/* Relay console theme: new-api's own console (the pages users see after signing in) in the
   look of the public site, which follows Moontask's dashboard (deep indigo canvas, violet
   accents, translucent cards, DM Sans).

   new-api is not modified. The console Caddy adds this stylesheet after new-api's own one
   (see tools/build_console.py), so it only restyles: every text, number and setting still
   comes from new-api, and whatever an admin edits in the console shows up immediately.

   How it is scoped:
   - Only the "Default" preset is restyled. A user who picks another preset, font, corner
     radius or text size in the theme drawer gets exactly what they picked.
   - Colours go through new-api's own design tokens (CSS variables), so every component,
     including ones added in later new-api versions, follows them.
   - Component rules use the shadcn `data-slot` attributes new-api's components carry; the few
     class-based ones are for panels without such an attribute. If a later new-api version
     renames something, that part falls back to the token colours instead of breaking.
   - This file is not in a cascade layer, so it wins over Tailwind's layered utilities, but
     not over their !important ones (e.g. the collapsed sidebar's fixed button size). */

@font-face {
  font-family: "DM Sans Variable";
  src: url("/_relay/fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("/_relay/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---------- tokens: light ---------- */
body:not([data-theme-preset]) {
  --relay-canvas: #f5f3fb;
  --relay-glow-1: rgba(124, 77, 255, 0.12);
  --relay-glow-2: rgba(16, 185, 129, 0.07);
  --relay-surface-shadow: 0 1px 2px rgba(19, 17, 31, 0.04), 0 10px 30px rgba(76, 52, 160, 0.06);
  --relay-overlay: rgba(19, 17, 31, 0.35);
  --relay-active-text: #5b2ee0;
  --relay-scrollbar: rgba(19, 17, 31, 0.18);
  /* A card's colour as one opaque value, for parts that must hide what scrolls under them. */
  --relay-surface-solid: #ffffff;

  --background: #f7f6fc;
  --foreground: #13111f;
  --card: #ffffff;
  --card-foreground: #13111f;
  --popover: #ffffff;
  --popover-foreground: #13111f;
  --primary: #6a3df0;
  --primary-foreground: #ffffff;
  --secondary: #efecf9;
  --secondary-foreground: #3b2a8a;
  --muted: #f1eff8;
  --muted-foreground: #615c78;
  --accent: rgba(106, 61, 240, 0.08);
  --accent-foreground: #13111f;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #0f9d6b;
  --success-foreground: #ffffff;
  --warning: #b7791f;
  --warning-foreground: #ffffff;
  --info: #2563eb;
  --info-foreground: #ffffff;
  --neutral: #8a86a0;
  --neutral-foreground: #13111f;
  --border: #e6e3f0;
  --input: #dcd8ea;
  --ring: #7c4dff;
  --chart-1: #7c4dff;
  --chart-2: #10b981;
  --chart-3: #3b82f6;
  --chart-4: #f97316;
  --chart-5: #eab308;
  --overview-accent-1: #7c4dff;
  --overview-accent-2: #10b981;
  --overview-accent-3: #3b82f6;
  --sidebar: #f5f3fb;
  --sidebar-foreground: #3a3650;
  --sidebar-primary: #6a3df0;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(106, 61, 240, 0.09);
  --sidebar-accent-foreground: #5b2ee0;
  --sidebar-border: #e6e3f0;
  --sidebar-ring: #7c4dff;
  --skeleton-base: #eeebf6;
  --skeleton-highlight: #f7f5fc;
  --table-row: var(--relay-surface-solid);
  --table-header: #f8f7fd;
  --table-header-hover: #f1eff9;
}

/* ---------- tokens: dark (the default, matching the public site) ---------- */
.dark body:not([data-theme-preset]) {
  --relay-canvas: #030014;
  --relay-glow-1: rgba(94, 56, 214, 0.24);
  --relay-glow-2: rgba(46, 230, 157, 0.07);
  --relay-surface-shadow: 0 12px 36px rgba(4, 4, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --relay-overlay: rgba(3, 0, 20, 0.72);
  --relay-active-text: #e4d4ff;
  --relay-scrollbar: rgba(255, 255, 255, 0.14);
  --relay-surface-solid: #09061a;

  --background: #030014;
  --foreground: #f4f3fa;
  --card: rgba(255, 255, 255, 0.025);
  --card-foreground: #f4f3fa;
  --popover: #0c0a1f;
  --popover-foreground: #f4f3fa;
  --primary: #8f63ff;
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.06);
  --secondary-foreground: #e9e5ff;
  --muted: rgba(255, 255, 255, 0.05);
  --muted-foreground: #a09cb8;
  --accent: rgba(157, 92, 255, 0.13);
  --accent-foreground: #f4f3fa;
  --destructive: #f87171;
  --destructive-foreground: #ffffff;
  --success: #4fffb0;
  --success-foreground: #03140c;
  --warning: #fcd34d;
  --warning-foreground: #1a1300;
  --info: #60a5fa;
  --info-foreground: #04101f;
  --neutral: #8d89a6;
  --neutral-foreground: #030014;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.11);
  --ring: #9d5cff;
  --chart-1: #9d5cff;
  --chart-2: #4fffb0;
  --chart-3: #60a5fa;
  --chart-4: #f97316;
  --chart-5: #fcd34d;
  --overview-accent-1: #9d5cff;
  --overview-accent-2: #4fffb0;
  --overview-accent-3: #60a5fa;
  --sidebar: #030014;
  --sidebar-foreground: #c9c6d8;
  --sidebar-primary: #9d5cff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(157, 92, 255, 0.14);
  --sidebar-accent-foreground: #e4d4ff;
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --sidebar-ring: #9d5cff;
  --skeleton-base: rgba(255, 255, 255, 0.05);
  --skeleton-highlight: rgba(255, 255, 255, 0.09);
  --table-row: var(--relay-surface-solid);
  /* Opaque: the header row is sticky and must hide the rows scrolling under it. */
  --table-header: #0b0920;
  --table-header-hover: #110e28;
}

/* Corner radius and typeface, unless the user chose their own in the theme drawer. */
body:not([data-theme-preset]):not([data-theme-radius]) {
  --radius: 0.875rem;
}
body:not([data-theme-preset])[data-theme-font="system"] {
  --font-ui-sans: "DM Sans Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: var(--font-ui-sans);
}

/* ---------- canvas ---------- */
/* <html> shows around <body> (e.g. when a page bounces past its end); it cannot see the
   variables set on <body>, hence the literal colours. */
html:has(> body:not([data-theme-preset])) {
  background: #f5f3fb;
}
html.dark:has(> body:not([data-theme-preset])) {
  background: #030014;
}
body:not([data-theme-preset]) {
  background: var(--relay-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body:not([data-theme-preset]) ::selection {
  background: rgba(139, 108, 255, 0.4);
}
:where(body:not([data-theme-preset])) * {
  scrollbar-color: var(--relay-scrollbar) transparent;
}

/* The app frame: one canvas with the two soft glows, the sidebar and header as quiet layers
   on it, and the page content directly on the canvas (no inset sheet), as in Moontask. */
body:not([data-theme-preset]) [data-slot="sidebar-wrapper"] {
  background:
    radial-gradient(circle at 88% 4%, var(--relay-glow-1) 0, transparent 46%),
    radial-gradient(circle at 4% 96%, var(--relay-glow-2) 0, transparent 44%),
    var(--relay-canvas);
}
body:not([data-theme-preset]) [data-slot="sidebar-wrapper"] > header {
  border-bottom: 1px solid var(--sidebar-border);
  background: color-mix(in srgb, var(--relay-canvas) 62%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body:not([data-theme-preset]) [data-slot="sidebar-wrapper"] > header nav a {
  transition: color 0.15s ease;
}
body:not([data-theme-preset]) [data-slot="sidebar-wrapper"] > header nav a:hover,
body:not([data-theme-preset]) [data-slot="sidebar-wrapper"] > header nav a.active {
  color: var(--foreground);
}
body:not([data-theme-preset]) [data-slot="sidebar-inner"] {
  background: color-mix(in srgb, var(--relay-canvas) 55%, transparent);
  border-inline-end: 1px solid var(--sidebar-border);
}
body:not([data-theme-preset]) [data-slot="sidebar-inset"] {
  background: transparent;
  box-shadow: none;
}
/* The bar under tables (pagination) sits on the canvas too. */
body:not([data-theme-preset]) [data-slot="sidebar-inset"] .shrink-0.border-t.bg-background {
  background: transparent;
}

/* Page titles ("Overview", "API Keys", ...): large and tight, like Moontask's headings. */
body:not([data-theme-preset]) [data-slot="sidebar-inset"] h2.truncate.font-bold {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
@media (min-width: 640px) {
  body:not([data-theme-preset]) [data-slot="sidebar-inset"] h2.truncate.font-bold {
    font-size: 1.625rem;
  }
}

/* ---------- sidebar menu ---------- */
body:not([data-theme-preset]) [data-sidebar="group-label"] {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sidebar-foreground) 62%, transparent);
}
body:not([data-theme-preset]) [data-sidebar="menu-button"] {
  position: relative;
  border-radius: 12px;
  color: var(--sidebar-foreground);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body:not([data-theme-preset]) [data-slot="sidebar"][data-state="expanded"] [data-sidebar="menu-button"],
body:not([data-theme-preset]) [data-slot="sheet-content"] [data-sidebar="menu-button"] {
  height: 2.5rem; /* taller rows only: new-api's padding and gap keep the room long labels need */
}
body:not([data-theme-preset]) [data-sidebar="menu-button"]:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
  color: var(--foreground);
}
body:not([data-theme-preset]) [data-sidebar="menu-button"][data-active] {
  background: linear-gradient(90deg, rgba(157, 92, 255, 0.2), rgba(157, 92, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(157, 92, 255, 0.2);
  color: var(--relay-active-text);
}
body:not([data-theme-preset]) [data-sidebar="menu-button"][data-active] svg {
  color: var(--ring);
}
/* The mint-to-violet bar on the active item. */
body:not([data-theme-preset]) [data-sidebar="menu-button"][data-active]::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4fffb0, #9d5cff);
  box-shadow: 0 0 10px rgba(157, 92, 255, 0.55);
}
body:not([data-theme-preset]) [data-sidebar="menu-sub-button"][data-active] {
  color: var(--relay-active-text);
}

/* ---------- surfaces ---------- */
body:not([data-theme-preset]) [data-slot="card"],
body:not([data-theme-preset]) [data-slot="sidebar-inset"] :is(.rounded-2xl, .rounded-xl, .rounded-lg).border.bg-card {
  border-radius: 20px;
  box-shadow: var(--relay-surface-shadow);
}
body:not([data-theme-preset]) [data-slot="card-title"] {
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Bordered boxes without their own background (stat rows, table frames) get the card surface,
   opaque so that it matches the pinned table columns below. */
body:not([data-theme-preset]) [data-slot="sidebar-inset"] .rounded-lg.border:not([class*="bg-"]):not([data-slot]) {
  border-radius: 18px;
  background: var(--relay-surface-solid);
}
/* Large figures (balances, totals) in the UI face rather than monospace, as Moontask does;
   code and keys keep monospace. */
body:not([data-theme-preset]) [data-slot="sidebar-inset"] .font-mono.tabular-nums,
body:not([data-theme-preset]) [data-slot="sidebar-inset"] .font-mono:is(.text-xl, .text-2xl, .text-3xl) {
  font-family: var(--font-ui-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- buttons ---------- */
/* Every one-line button-shaped control (buttons and the triggers rendered as buttons). Buttons
   that grow with their content (h-auto, e.g. the two-line group picker) keep new-api's radius. */
body:not([data-theme-preset]) .group\/button:not(.h-auto):not([data-slot="button-group"] *) {
  border-radius: 999px;
}
body:not([data-theme-preset]) .group\/button.bg-primary {
  border-color: transparent;
  background-image: linear-gradient(180deg, #5b2ae0, #8a63ec);
  color: #fff;
  box-shadow: 0 6px 20px rgba(79, 26, 214, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
body:not([data-theme-preset]) .group\/button.bg-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 32px rgba(124, 77, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body:not([data-theme-preset]) .group\/button.bg-primary:disabled {
  box-shadow: none;
}

/* ---------- form controls ---------- */
body:not([data-theme-preset]) :is([data-slot="input"], [data-slot="form-control"], [data-slot="textarea"],
  [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="combobox-trigger"]) {
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body:not([data-theme-preset]) [data-slot="input-group"] :is([data-slot="input"], [data-slot="input-group-control"]) {
  border-radius: inherit;
}
body:not([data-theme-preset]) :is([data-slot="input"], [data-slot="form-control"], [data-slot="textarea"],
  [data-slot="select-trigger"]):focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(157, 92, 255, 0.22);
}

/* ---------- tabs and segmented controls ---------- */
body:not([data-theme-preset]) [data-slot="tabs-list"] {
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--border);
}
body:not([data-theme-preset]) [data-slot="tabs-trigger"] {
  border-radius: 999px;
}
body:not([data-theme-preset]) [data-slot="tabs-trigger"][data-active] {
  background: rgba(157, 92, 255, 0.2);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px rgba(157, 92, 255, 0.28);
}
body:not([data-theme-preset]) [data-slot="toggle-group"] {
  border-radius: 999px;
}

/* ---------- tables ---------- */
body:not([data-theme-preset]) [data-slot="table-head"] {
  color: var(--muted-foreground);
  font-weight: 500;
}
body:not([data-theme-preset]) [data-slot="table-body"] [data-slot="table-row"]:hover {
  background-color: color-mix(in srgb, var(--foreground) 3%, transparent);
}
/* Pinned columns (e.g. the actions column) are opaque so rows can scroll under them; give them
   the table's own surface instead of the page canvas. */
body:not([data-theme-preset]) [data-slot="table-cell"].sticky {
  background-color: var(--relay-surface-solid);
}
body:not([data-theme-preset]) [data-slot="table-row"]:hover > [data-slot="table-cell"].sticky {
  background-color: color-mix(in srgb, var(--foreground) 3%, var(--relay-surface-solid));
}

/* ---------- floating layers ---------- */
body:not([data-theme-preset]) :is([data-slot="popover-content"], [data-slot="dropdown-menu-content"],
  [data-slot="dropdown-menu-sub-content"], [data-slot="select-content"], [data-slot="combobox-content"],
  [data-slot="hover-card-content"], [data-slot="context-menu-content"], [data-slot="menubar-content"]) {
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border);
}
body:not([data-theme-preset]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border);
}
body:not([data-theme-preset]) [data-slot="sheet-content"] {
  background: var(--popover);
  border-color: var(--border);
}
body:not([data-theme-preset]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"],
  [data-slot="sheet-overlay"], [data-slot="drawer-overlay"]) {
  background: var(--relay-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- smaller parts ---------- */
body:not([data-theme-preset]) [data-slot="alert"] {
  border-radius: 14px;
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}
body:not([data-theme-preset]) [data-slot="progress-indicator"] {
  background: linear-gradient(90deg, #9d5cff, #7c3aed, #4fffb0);
}
body:not([data-theme-preset]) [data-slot="kbd"] {
  border-radius: 6px;
}

/* ---------- content the admin writes (announcements, notices, About) ---------- */
/* new-api renders it with its Markdown component (.prose), which already wraps long words and
   keeps images and tables inside the screen; these rules only make sure that holds here too. */
body:not([data-theme-preset]) .prose {
  overflow-wrap: anywhere;
}
body:not([data-theme-preset]) .prose :is(img, video) {
  max-width: 100%;
  height: auto;
}
body:not([data-theme-preset]) .prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- what the console leaves to the public site (with any preset) ---------- */
/* Not part of the look, so not limited to the Default preset like the rest of this file. */

/* Overview, FAQ panel: the FAQ the console holds is written for the public site's About page,
   one entry per language ("[ja] ..."); this panel would list every language at once. The
   public site shows it per language, so the console leaves it out (user's choice, 2026-10-22). */
[data-slot="sidebar-inset"] div:has(> div.border > div.border-b svg.lucide-circle-question-mark) {
  display: none;
}

/* Top navigation: the menu lives in the sidebar (console.js adds the model list, rankings and
   guide there; user's choice, 2026-10-22). Home, Console, Docs and About are switched off in the
   console's header settings; Model Square and Rankings cannot be, because switching them off
   also stops the data behind the public model list and the rankings page, so they are hidden
   here: in the console's header, on new-api's public pages (rankings) and in their phone menu. */
header a:is([href="/pricing"], [href="/rankings"]),
.fixed.inset-0 nav > a:is([href="/pricing"], [href="/rankings"]) {
  display: none;
}
/* ...and the divider that separated those links from the buttons, when no other link is left. */
header div:not(:has(> a:not([href="/pricing"], [href="/rankings"]))) > div.mx-2.h-4.w-px {
  display: none;
}

/* ---------- sign-in, sign-up and password pages ---------- */
body:not([data-theme-preset]) #root > .grid.h-svh {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0, var(--relay-glow-1) 0, transparent 72%),
    var(--relay-canvas);
}
body:not([data-theme-preset]) #root > .grid.h-svh > .container > .mx-auto {
  margin-block: 1rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--relay-surface-shadow);
}
body:not([data-theme-preset]) #root > .grid.h-svh h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
body:not([data-theme-preset]) #root > .grid.h-svh :is([data-slot="form-control"], [data-slot="input"]) {
  height: 2.75rem;
  border-radius: 14px;
}
body:not([data-theme-preset]) #root > .grid.h-svh form .group\/button[type="submit"] {
  height: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-theme-preset]) * {
    transition: none !important;
  }
}