:root,
.dark {
  --background: 222 54% 4%;
  --foreground: 188 42% 94%;
  --card: 220 45% 7%;
  --card-foreground: 188 42% 94%;
  --popover: 220 48% 6%;
  --popover-foreground: 188 42% 94%;
  --primary: 183 100% 52%;
  --primary-foreground: 222 54% 4%;
  --secondary: 158 82% 42%;
  --secondary-foreground: 222 54% 4%;
  --muted: 220 36% 10%;
  --muted-foreground: 190 18% 66%;
  --accent: 256 94% 66%;
  --accent-foreground: 188 42% 96%;
  --border: 185 72% 34%;
  --input: 218 42% 11%;
  --ring: 183 100% 52%;
  --radius: .5rem;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .5rem;
  --radius-xl: .5rem;
  --chart-1: 183 100% 52%;
  --chart-2: 157 100% 54%;
  --chart-3: 256 94% 66%;
  --chart-4: 318 95% 62%;
  --chart-5: 43 100% 62%;
  --glow-primary: 183 100% 52%;
  --glow-accent: 157 100% 54%;
  --glass-bg: 220 48% 6%;
  --glass-border: 184 84% 42%;
  --glass-blur: 18px;
  --glass-surface: linear-gradient(145deg, hsl(220 48% 8% / .9), hsl(222 54% 4% / .82));
  --glass-surface-strong: linear-gradient(145deg, hsl(217 48% 10% / .95), hsl(222 58% 5% / .9));
  --shadow-soft: 0 12px 32px rgb(0 0 0 / .36), inset 0 1px 0 hsl(183 100% 70% / .08);
  --shadow-soft-lg: 0 20px 56px rgb(0 0 0 / .48), 0 0 0 1px hsl(183 100% 54% / .12);
  --shadow-soft-xl: 0 26px 80px rgb(0 0 0 / .56), 0 0 0 1px hsl(157 100% 54% / .13);
  --shadow-glow: 0 0 24px hsl(183 100% 52% / .18), 0 0 48px hsl(157 100% 54% / .1);
  --shadow-glow-strong: 0 0 26px hsl(183 100% 52% / .32), 0 0 70px hsl(256 94% 66% / .16);
  --control-bg: hsl(220 48% 7% / .86);
  --control-border: hsl(183 100% 52% / .22);
}

* {
  letter-spacing: 0 !important;
}

html {
  background: #020617;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .96), rgba(2, 6, 23, .98)),
    linear-gradient(90deg, rgba(0, 229, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(45, 255, 164, .055) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0, rgba(0, 229, 255, .08) 50%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 24%, transparent 76%, rgba(0, 229, 255, .04));
  mix-blend-mode: screen;
  opacity: .38;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 5px);
  opacity: .18;
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

:where(.rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-\[var\(--radius\)\]) {
  border-radius: 8px !important;
}

:where(button, [role="button"], input, textarea, select, [class*="bg-card"], [class*="bg-popover"], [class*="bg-muted"], .glass-panel) {
  border-radius: 8px !important;
}

.glass-panel,
[class*="bg-card"],
[class*="bg-popover"],
[class*="bg-muted"] {
  background-image: linear-gradient(145deg, rgba(6, 13, 31, .94), rgba(2, 6, 23, .86)) !important;
  border-color: rgba(0, 229, 255, .18) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(223, 250, 255, .06) !important;
}

header,
aside,
nav,
[class*="border-b"],
[class*="border-r"],
[class*="border-l"],
[class*="border-t"] {
  border-color: rgba(0, 229, 255, .18) !important;
}

button,
[role="button"] {
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

button:hover,
[role="button"]:hover {
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .22), 0 0 22px rgba(0, 229, 255, .12) !important;
}

button:active,
[role="button"]:active {
  transform: translateY(1px);
}

input,
textarea,
select,
[cmdk-input] {
  background: rgba(2, 6, 23, .82) !important;
  border-color: rgba(0, 229, 255, .24) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 255, 164, .05) !important;
}

input:focus,
textarea:focus,
select:focus,
[cmdk-input]:focus {
  border-color: rgba(45, 255, 164, .52) !important;
  box-shadow: 0 0 0 1px rgba(45, 255, 164, .28), 0 0 18px rgba(45, 255, 164, .12) !important;
}

table,
[class*="tv-lightweight-charts"] {
  background: rgba(2, 6, 23, .72) !important;
}

.text-glow-cyan,
[class*="text-primary"] {
  text-shadow: 0 0 18px rgba(0, 229, 255, .32);
}

[class*="from-cyan"],
[class*="to-blue"],
[class*="bg-primary"],
[data-state="active"] {
  box-shadow: 0 0 18px rgba(0, 229, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

img[src="/static/arena_logo_app_small.png"],
img[src="/static/arena_r_logo.svg"] {
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, .42));
}

button[aria-label="Enter main page"],
button[aria-label="Enter main page"]:hover {
  border-radius: 2rem !important;
  box-shadow: none !important;
}

button[aria-label="Enter main page"] > div:first-child {
  border-radius: 2.5rem !important;
}

button[aria-label="Enter main page"] > div:nth-child(2) {
  border-radius: 2rem !important;
}

button[aria-label="Enter main page"] > div:nth-child(3) {
  border-radius: 1.85rem !important;
}

::selection {
  color: #020617;
  background: #2dffa4;
}

@media (max-width: 768px) {
  body {
    background-size: auto, 36px 36px, 36px 36px;
  }

  .container,
  .\!container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}