/* CODEX API dashboard tech theme: visual-only overrides, original behavior untouched. */
html.font-inter {
  color-scheme: dark;
  --background: 222 48% 7%;
  --foreground: 213 40% 96%;
  --card: 222 42% 11%;
  --card-foreground: 213 40% 96%;
  --popover: 222 42% 10%;
  --popover-foreground: 213 40% 96%;
  --primary: 190 92% 62%;
  --primary-foreground: 222 48% 7%;
  --secondary: 224 37% 16%;
  --secondary-foreground: 213 35% 88%;
  --muted: 222 35% 14%;
  --muted-foreground: 215 20% 64%;
  --accent: 263 88% 72%;
  --accent-foreground: 222 48% 7%;
  --border: 218 38% 21%;
  --input: 218 38% 21%;
  --ring: 190 92% 62%;
  background: #050b16;
}

html.font-inter body {
  min-height: 100vh;
  color: #edf5ff !important;
  background:
    radial-gradient(circle at 85% 5%, rgba(74, 105, 255, .14), transparent 28rem),
    radial-gradient(circle at 15% 30%, rgba(42, 213, 227, .07), transparent 24rem),
    #050b16 !important;
}

html.font-inter body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: linear-gradient(rgba(105, 170, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 170, 255, .04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

html.font-inter header.sticky.top-0 {
  background: rgba(5, 11, 22, .78) !important;
  border-bottom: 1px solid rgba(126, 174, 255, .14);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
}

html.font-inter header.sticky.top-0 a[href="/"] {
  color: #f5f8ff;
}

html.font-inter header.sticky.top-0 a[href="/"] img {
  filter: drop-shadow(0 0 10px rgba(71, 214, 221, .55));
}

html.font-inter header.sticky.top-0 button,
html.font-inter header.sticky.top-0 a {
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

html.font-inter header.sticky.top-0 button:hover,
html.font-inter header.sticky.top-0 a:hover {
  color: #62e4ed !important;
}

html.font-inter aside,
html.font-inter [data-sidebar="sidebar"] {
  background: rgba(5, 12, 25, .92) !important;
  border-color: rgba(123, 170, 255, .13) !important;
  box-shadow: 14px 0 50px rgba(0, 0, 0, .2);
}

html.font-inter aside a,
html.font-inter [data-sidebar="sidebar"] a {
  border-radius: 10px;
  color: #8ea5bf;
}

html.font-inter aside a:hover,
html.font-inter aside a[aria-current="page"],
html.font-inter [data-sidebar="sidebar"] a:hover,
html.font-inter [data-sidebar="sidebar"] a[aria-current="page"] {
  color: #ecfbff !important;
  background: linear-gradient(90deg, rgba(52, 206, 222, .15), rgba(119, 101, 255, .08)) !important;
  box-shadow: inset 2px 0 #59dce9, 0 0 22px rgba(56, 214, 229, .07);
}

html.font-inter main.bg-background {
  background: transparent !important;
}

html.font-inter main.bg-background > main {
  position: relative;
}

html.font-inter main.bg-background h2,
html.font-inter main.bg-background h3 {
  color: #f1f7ff;
  letter-spacing: -.025em;
}

html.font-inter main.bg-background h2 {
  text-shadow: 0 0 24px rgba(78, 209, 229, .1);
}

html.font-inter main.bg-background .bg-card {
  border-color: rgba(115, 165, 232, .16) !important;
  background: linear-gradient(145deg, rgba(15, 31, 54, .88), rgba(7, 17, 33, .86)) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}

html.font-inter main.bg-background .bg-card:hover {
  border-color: rgba(77, 216, 232, .34) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28), 0 0 28px rgba(61, 214, 230, .06);
}

html.font-inter main.bg-background .rounded-2xl,
html.font-inter main.bg-background .rounded-xl {
  border-radius: 16px;
}

html.font-inter main.bg-background a[role="button"],
html.font-inter main.bg-background button {
  border-color: rgba(116, 168, 238, .18);
}

html.font-inter main.bg-background a[role="button"]:hover,
html.font-inter main.bg-background button:hover {
  border-color: rgba(83, 218, 232, .48);
  box-shadow: 0 0 20px rgba(58, 208, 225, .08);
}

html.font-inter main.bg-background .text-primary,
html.font-inter main.bg-background [class*="text-primary"] {
  color: #62dce8 !important;
}

html.font-inter main.bg-background .text-muted-foreground,
html.font-inter main.bg-background [class*="text-muted-foreground"] {
  color: #8fa6bd !important;
}

html.font-inter main.bg-background .border-border,
html.font-inter main.bg-background [class*="border-border"] {
  border-color: rgba(115, 165, 232, .16) !important;
}

html.font-inter main.bg-background svg {
  filter: drop-shadow(0 0 5px rgba(82, 208, 230, .1));
}

html.font-inter main.bg-background .recharts-cartesian-grid-horizontal line,
html.font-inter main.bg-background .recharts-cartesian-grid-vertical line {
  stroke: rgba(115, 165, 232, .13) !important;
}

html.font-inter main.bg-background .recharts-line-curve {
  filter: drop-shadow(0 0 6px rgba(87, 219, 234, .65));
}

html.font-inter main.bg-background input,
html.font-inter main.bg-background textarea,
html.font-inter main.bg-background select {
  color: #eaf5ff !important;
  border-color: rgba(115, 165, 232, .2) !important;
  background: rgba(8, 20, 38, .72) !important;
}

html.font-inter main.bg-background input:focus,
html.font-inter main.bg-background textarea:focus,
html.font-inter main.bg-background select:focus {
  border-color: rgba(85, 221, 233, .7) !important;
  box-shadow: 0 0 0 3px rgba(82, 213, 229, .12), 0 0 24px rgba(82, 213, 229, .08) !important;
}

html.font-inter main.bg-background .bg-muted {
  background: rgba(12, 28, 48, .78) !important;
}

@media (max-width: 768px) {
  html.font-inter main.bg-background .bg-card {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
  }
  html.font-inter main.bg-background h2 { font-size: 1.45rem; }
}