/* FastAPI console theme, layered over new-api's own stylesheet (deploy/edge-ui/nginx.conf injects it last).
   Direction: Optical UI (deepcake.ai/ui) — warm paper, dark olive ink, one rust accent, hairlines instead of shadows,
   large radii on surfaces and small ones on actions. new-api is themed by the CSS variables below (its :root / .dark
   blocks define exactly these names), so nothing here depends on its class names except the few rules at the end. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/tf-ui/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/tf-ui/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Specificity: new-api ships selectable colour presets as [data-theme-preset]:not([data-theme-preset=default]) blocks
   (0,2,0). The repeated :root keeps this theme above them, so a user's preset choice cannot bring the blue back. */
html:root:root:root {
  --tf-hue: 18;
  --tf-sat: 63%;
  --tf-accent-deep: hsl(var(--tf-hue) var(--tf-sat) 24%);
  --tf-accent: hsl(var(--tf-hue) var(--tf-sat) 36%);
  --tf-accent-bright: hsl(var(--tf-hue) var(--tf-sat) 57%);
  --tf-paper: #fbfaf6;
  --tf-raised: #fffefa;
  --tf-wash: #f4f2ea;
  --tf-line: #e5e3d8;
  --tf-ink: #2f322c;
  --tf-muted: #62675d;
  --tf-ease: cubic-bezier(0.22, 0.8, 0.25, 1);

  --radius: 0.875rem;
  --font-sans: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;

  --background: var(--tf-paper);
  --foreground: var(--tf-ink);
  --card: var(--tf-raised);
  --card-foreground: var(--tf-ink);
  --popover: var(--tf-raised);
  --popover-foreground: var(--tf-ink);
  --primary: var(--tf-accent);
  --primary-foreground: #fffdf5;
  --secondary: var(--tf-wash);
  --secondary-foreground: var(--tf-accent-deep);
  --muted: var(--tf-wash);
  --muted-foreground: var(--tf-muted);
  --accent: var(--tf-accent-bright);
  --accent-foreground: #161811;
  --destructive: #b3261e;
  --destructive-foreground: #fffdf5;
  --success: #3f7d4e;
  --success-foreground: #fffdf5;
  --warning: #b7791f;
  --warning-foreground: #161811;
  --info: #3f6f8a;
  --info-foreground: #fffdf5;
  --border: var(--tf-line);
  --input: var(--tf-line);
  --ring: var(--tf-accent-bright);
  --chart-1: #b4532a;
  --chart-2: #5d7a52;
  --chart-3: #c99a2e;
  --chart-4: #7a5c8e;
  --chart-5: #3f7f86;
  --sidebar: #f3f1e8; /* the shell behind the content panel: sidebar and top bar */
  --sidebar-foreground: var(--tf-ink);
  --sidebar-primary: var(--tf-accent);
  --sidebar-primary-foreground: #fffdf5;
  /* the active item in the sidebar: a tint, not a solid block, so its label stays readable */
  --sidebar-accent: color-mix(in oklab, var(--tf-accent) 14%, #f3f1e8);
  --sidebar-accent-foreground: var(--tf-accent-deep);
  --sidebar-border: var(--tf-line);
  --overview-accent-1: var(--chart-1);
  --overview-accent-2: var(--chart-3);
  --overview-accent-3: var(--chart-2);
  --neutral: #a3a394;
  --neutral-foreground: #161811;
  --sidebar-ring: var(--tf-accent-bright);
}

html.dark:root:root:root,
html:root:root:root .dark {
  --tf-paper: #161811;
  --tf-raised: #1e211a;
  --tf-wash: #262a21;
  --tf-line: #ffffff1a;
  --tf-ink: #f1efe6;
  --tf-muted: #a9ad9f;

  --background: var(--tf-paper);
  --foreground: var(--tf-ink);
  --card: var(--tf-raised);
  --card-foreground: var(--tf-ink);
  --popover: #23261f;
  --popover-foreground: var(--tf-ink);
  --primary: var(--tf-accent-bright);
  --primary-foreground: #161811;
  --secondary: var(--tf-wash);
  --secondary-foreground: #f3c9b3;
  --muted: var(--tf-wash);
  --muted-foreground: var(--tf-muted);
  --accent: var(--tf-accent-bright);
  --accent-foreground: #161811;
  --destructive: #f2776c;
  --destructive-foreground: #161811;
  --success: #7cc08a;
  --success-foreground: #161811;
  --warning: #e3a84a;
  --warning-foreground: #161811;
  --info: #7fb3cf;
  --info-foreground: #161811;
  --border: var(--tf-line);
  --input: #ffffff2b;
  --ring: var(--tf-accent-bright);
  --chart-1: #e08a5c;
  --chart-2: #9cbb8f;
  --chart-3: #e3c264;
  --chart-4: #b79bc9;
  --chart-5: #7fbcc3;
  --sidebar: #12140e;
  --sidebar-foreground: #e8e6dc;
  --sidebar-primary: var(--tf-accent-bright);
  --sidebar-primary-foreground: #161811;
  --sidebar-accent: color-mix(in oklab, var(--tf-accent-bright) 22%, #12140e);
  --sidebar-accent-foreground: #f3c9b3;
  --sidebar-border: #ffffff1c;
  --sidebar-ring: var(--tf-accent-bright);
}

html,
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings: tight tracking, the reference's display feel. */
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/* Radii all derive from --radius in new-api's stylesheet (md 0.8x, lg 1x, xl 1.4x, 2xl 1.8x), and its utilities sit in
   cascade layers that any unlayered rule here would override - a blanket button radius would square off every pill
   and avatar. So the shape is set by the one variable above: cards land at 20-25px, buttons at about 11px. */
:where(button, [role="button"], a[data-slot="button"]) {
  transition: background-color 0.18s var(--tf-ease), border-color 0.18s var(--tf-ease), color 0.18s var(--tf-ease),
    box-shadow 0.18s var(--tf-ease);
}

/* Focus: one visible ring in the accent, on everything. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in oklab, var(--tf-accent-bright) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* The public pages paint a decorative wash behind their header with an inline style in blue hues (oklch hue 250 / 200 /
   280). An inline style only yields to !important. The selector is the layer's own classes plus "it has an inline
   radial gradient", not the colour values, which a browser may serialise differently. */
div[aria-hidden="true"].pointer-events-none.absolute.inset-x-0.top-0[style*="radial-gradient"] {
  background: radial-gradient(60% 50% at 20% 20%, oklch(0.74 0.13 48 / 0.75) 0%, transparent 70%),
    radial-gradient(50% 40% at 80% 15%, oklch(0.82 0.1 85 / 0.6) 0%, transparent 70%),
    radial-gradient(40% 35% at 50% 70%, oklch(0.78 0.08 30 / 0.4) 0%, transparent 70%) !important;
}

/* The admin header's version badge ("v1.0.0-rc.38 · Update available") opens a dialog that links to new-api's GitHub
   releases. It is the one button with aria-busy that holds a monospace version label; the selector avoids its text,
   which changes with the UI language. Updates are taken by changing the image digest in docker-compose.edge.yml. */
button[aria-busy]:has(> span.font-mono) {
  display: none !important;
}

/* Safety net: any link to the upstream projects that still renders somewhere (the crash page's "Report an issue",
   the update dialog's release link, the built-in footer and About when their settings are emptied again). */
a[href*="github.com/QuantumNous"],
a[href*="github.com/Calcium-Ion"],
a[href*="github.com/songquanpeng"],
a[href*="newapi.pro"],
a[href*="newapi.ai"] {
  display: none !important;
}

/* The built-in home page ends with a footer whose last line is hard-coded: "© <year> New API. All rights reserved.
   Designed and developed by the project contributors", the name linking to GitHub. Hiding only the link (the net
   above) would leave "© 2026 . All rights reserved…"; the whole sentence is the span that directly holds that link. */
span:has(> a[href*="github.com/QuantumNous/new-api"]) {
  display: none !important;
}

/* new-api's pages also use Tailwind's blue / sky scales directly (badges, the home headline gradient, hover tints).
   Those utilities read these variables, so remapping the scales turns every one of them warm without touching a class.
   blue -> the rust scale; sky -> amber; the two stops of the headline gradient (violet-400, purple-500) -> rust. */
html:root:root:root {
  --color-blue-50: #fbf1ec;
  --color-blue-100: #f6e0d5;
  --color-blue-200: #edc3ae;
  --color-blue-300: #e2a286;
  --color-blue-400: #d77a4c;
  --color-blue-500: #b9562b;
  --color-blue-600: #964622;
  --color-blue-700: #7a391c;
  --color-blue-800: #643017;
  --color-blue-900: #4a2412;
  --color-blue-950: #2c150a;
  --color-sky-50: #fbf5e6;
  --color-sky-200: #f0dba6;
  --color-sky-300: #e6c672;
  --color-sky-400: #d9ac3f;
  --color-sky-500: #c9962a;
  --color-sky-700: #8a6418;
  --color-sky-900: #5a4110;
  --color-sky-950: #36270a;
  --color-violet-400: #c86a35;
  --color-purple-500: #964622;
}

/* The home page's own two washes (hero and closing call to action), blue inline styles like the one above. */
div.absolute.inset-0.-z-10[style*="radial-gradient"] {
  background: radial-gradient(60% 50% at 20% 20%, oklch(0.74 0.13 48 / 0.75) 0%, transparent 70%),
    radial-gradient(50% 40% at 80% 15%, oklch(0.82 0.1 85 / 0.6) 0%, transparent 70%),
    radial-gradient(40% 35% at 40% 80%, oklch(0.78 0.08 30 / 0.4) 0%, transparent 70%) !important;
}