@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-400-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-500-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-500-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-600-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-700-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/cr-theme/fonts/inter-700-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/cr-theme/fonts/jetbrainsmono-400-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/cr-theme/fonts/jetbrainsmono-400-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/cr-theme/fonts/jetbrainsmono-500-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/cr-theme/fonts/jetbrainsmono-500-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/cr-theme/fonts/jetbrainsmono-600-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/cr-theme/fonts/jetbrainsmono-600-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;
}/* ============================================================
   ClaudeRouter — Design System v20
   Light-first SaaS system. Inter + JetBrains Mono. #2563EB.
   Applies to the entire app: public site, auth, console/admin.
   ============================================================ */

/* ---------- §0. TOKENS ---------- */
:root, html:not(.dark) {
  /* surfaces */
  --background: #F8FAFC;
  --card: #FFFFFF;
  --popover: #FFFFFF;
  --surface-sunken: #F1F5F9;

  /* text */
  --foreground: #0F172A;
  --muted-foreground: #64748B;
  --card-foreground: #0F172A;
  --popover-foreground: #0F172A;

  /* brand */
  --primary: #2563EB;
  --primary-foreground: #FFFFFF;
  --ring: #2563EB;

  /* semantics */
  --secondary: #F1F5F9;
  --secondary-foreground: #0F172A;
  --muted: #F1F5F9;
  --accent: #EFF6FF;
  --accent-foreground: #1D4ED8;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --success: #16A34A;
  --success-foreground: #FFFFFF;
  --warning: #D97706;
  --warning-foreground: #FFFFFF;
  --info: #2563EB;
  --info-foreground: #FFFFFF;

  /* lines */
  --border: #E2E8F0;
  --input: #E2E8F0;
  --sidebar-border: #E2E8F0;

  /* sidebar: LIGHT shell per the light-first spec (white surface, hairline
     border, slate text; active = blue on blue-50). html.dark re-supplies. */
  --sidebar: #FFFFFF;
  --sidebar-foreground: #334155;
  --sidebar-accent: #EFF6FF;
  --sidebar-accent-foreground: #2563EB;
  --sidebar-primary: #2563EB;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-ring: #2563EB;

  /* system */
  --radius: 0.5rem;
  --skeleton-base: #E9EEF5;
  --skeleton-highlight: #F5F8FC;
  --hairline: rgba(15, 23, 42, 0.08);
  --hairline-strong: rgba(15, 23, 42, 0.16);
  --table-header: #F8FAFC;
}

html.dark {
  /* keep a proper dark mode: slate, not pure black */
  --background: #0B1220;
  --card: #111A2C;
  --popover: #16203A;
  --surface-sunken: #0E1626;
  --foreground: #E6EDF7;
  --muted-foreground: #94A3B8;
  --card-foreground: #E6EDF7;
  --popover-foreground: #E6EDF7;
  --primary: #3B82F6;
  --primary-foreground: #FFFFFF;
  --ring: #3B82F6;
  --secondary: #1B2740;
  --secondary-foreground: #E6EDF7;
  --muted: #1B2740;
  --accent: #16233F;
  --accent-foreground: #93C5FD;
  --destructive: #EF4444;
  --success: #22C55E;
  --warning: #F59E0B;
  --border: #22304E;
  --input: #22304E;
  --sidebar-border: #22304E;
  --sidebar: #0A101C;
  --sidebar-foreground: #E2E8F0;
  --skeleton-base: #16203A;
  --skeleton-highlight: #1B2740;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
}

/* global radius discipline: 8px buttons/inputs, 10-12 cards */
:root { --radius: 0.5rem; }
[data-theme-radius] { --radius: 0.5rem !important; }

:root {
  --font-body: 'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono-stack: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body {
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* type scale discipline */
h1 { letter-spacing: -0.022em; }
h2, h3 { letter-spacing: -0.015em; }

/* ---------- §1. BASE ---------- */
body {
  background: var(--background);
  color: var(--foreground);
  font-size: 14.5px;
  line-height: 1.55;
}

::selection { background: rgba(37, 99, 235, 0.16); }

* { border-color: var(--border); }

/* skeleton shimmer on-brand */
.bg-muted.animate-pulse, .animate-pulse.bg-muted {
  background: var(--skeleton-base) !important;
  animation: cr-shimmer 1.6s ease-in-out infinite !important;
}
@keyframes cr-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* focus rings: subtle blue */
:focus-visible {
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px !important;
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.55); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- §2. BUTTONS ---------- */
/* App buttons are shadcn variants; retune sizes + radii + weights */
button, [role="button"], a[class*="button"], .group\/button {
  border-radius: calc(var(--radius) - 1px) !important;
}

button, a[class*="inline-flex"][class*="justify-center"] {
  font-weight: 500 !important;
}

/* primary = solid blue */
.bg-primary, button[class*="bg-primary"]:not([class*="text-primary"]) {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.bg-primary:hover { background-color: #1D4ED8 !important; }

/* outline/secondary = white + border */
.bg-background[class*="border"], button[class*="variant"] {
  background: #FFFFFF;
}

/* ---------- §3. FORMS ---------- */
input, textarea, select {
  border-radius: calc(var(--radius) - 1px) !important;
  font-size: 14px !important;
}
input:focus-visible, textarea:focus-visible {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
label { font-weight: 500; }

/* ---------- §4. TABLES ---------- */
table { border-collapse: separate; border-spacing: 0; }
table th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: var(--muted-foreground) !important;
  background: var(--table-header) !important;
  text-transform: uppercase;
}
table td { font-size: 13.5px; }
tbody tr:hover td { background: rgba(37, 99, 235, 0.025) !important; }

/* ---------- §5. BADGES / STATUS ---------- */
/* keep semantic colors: green success, amber warning, red danger, blue info */

/* ---------- §6. AUTH PAGES ---------- */
/* focused centered card on quiet background */
.relative.grid.h-svh {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(37, 99, 235, 0.05), transparent 60%),
    var(--background);
}
.relative.grid.h-svh form {
  max-width: 400px;
}
.relative.grid.h-svh input {
  background: #FFFFFF;
  height: 40px;
}
.relative.grid.h-svh label { font-size: 13px; color: var(--foreground); }

/* ---------- §7. CONSOLE (data-skin=console) ---------- */
/* the app's console skin inherits our tokens; add density + shell polish */
[data-skin="console"] {
  --font-mono-features: "zero" 1, "tnum" 1;
}

/* ---------- §7b. GLOBAL TOKEN BRIDGE (app pages + console) ----------
   The console's own theme engine (extracted from the shipped bundles):
   - .dark / light resolved from the `vite-ui-theme` cookie (default DARK)
   - data-theme-preset / -radius / -font / -scale / -content-layout land on
     document.BODY; `data-skin="console"` exists in the shipped CSS but is
     NEVER set by the current build — so the reliable console hook is the
     route class override.js puts on <html> (cr-route-console/-dashboard).
   This section retargets the app's OWN token names to the SaaS system so the
   console reads as one product with the public site. Only value swaps here —
   no layout surgery — so any app-side regression stays cosmetic. */
html {
  /* brand: coral #e37756 / sky #3ea4ec → primary blue */
  --primary: #2563EB;
  --primary-foreground: #FFFFFF;
  --ring: #2563EB;
  /* canvas: cream #fafaf7 → slate-50; cards stay white */
  --background: #F8FAFC;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #0F172A;
  --popover: #FFFFFF;
  --popover-foreground: #0F172A;
  /* secondary surfaces: warm greys → cool slates */
  --muted: #F1F5F9;
  --muted-foreground: #64748B;
  --accent: #EFF6FF;
  --accent-foreground: #1D4ED8;
  /* hairlines: foreground-derived → true hairline */
  --border: #E2E8F0;
  --input: #E2E8F0;
  --hairline: #E2E8F0;
  --hairline-strong: #CBD5E1;
  /* semantics */
  --success: #16A34A;
  --success-foreground: #FFFFFF;
  --warning: #D97706;
  --warning-foreground: #FFFFFF;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --info: #2563EB;
  --info-foreground: #FFFFFF;
  /* elevation: soft SaaS shadows, not ink shadows */
  --elevation-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --elevation-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --elevation-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --elevation-lg: 0 8px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.05);
  --elevation-xl: 0 16px 48px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);
  /* glass: matte instead of frosted-dark */
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-border: #E2E8F0;
  --glass-blur: 8px;
  /* skeletons: cool slate shimmer */
  --skeleton-base: #EEF2F7;
  --skeleton-highlight: #F8FAFC;
  /* charts: brand-anchored ramp */
  --chart-1: #2563EB;
  --chart-2: #16A34A;
  --chart-3: #D97706;
  --chart-4: #7C3AED;
  --chart-5: #DC2626;
  /* table header + disabled states */
  --table-header-bg: #F8FAFC;
  --table-header: #64748B;
  --table-disabled: #F8FAFC;
  --table-disabled-border: #E2E8F0;
  --table-disabled-hover: #F1F5F9;
  /* radius: presets ship 1rem/0.625rem — system is 6-8px controls */
  --radius: 0.5rem;
  --radius-md: 0.5rem;
  --radius-sm: 0.375rem;
  /* sidebar tokens live in §0 (light) and html.dark (dark) — both set here
     by the same design system; no route gating needed. */
}

/* ---- §7c CONSOLE DARK-FLASH GUARD ----
   override.js pins the vite-ui-theme=light cookie; until the app's boot
   applies it, don't let a residual .dark paint console surfaces dark. */
html.dark {
  /* dark mode keeps a dark app shell — re-supply what §7b set for light */
  --sidebar: #0B1220;
  --sidebar-foreground: #94A3B8;
  --sidebar-accent: #16203A;
  --sidebar-accent-foreground: #F1F5F9;
  --sidebar-border: rgba(148, 163, 184, 0.14);
}
html.dark.cr-route-console,
html.dark.cr-route-dashboard {
  --background: #F8FAFC !important;
  --foreground: #0F172A !important;
  --card: #FFFFFF !important;
  --surface-sunken: #F1F5F9 !important;
  --hairline: #E2E8F0 !important;
  --primary: #2563EB !important;
}
html.dark.cr-route-console body,
html.dark.cr-route-dashboard body {
  background: var(--background) !important;
  color: var(--foreground) !important;
}


/* ============================================================
   §7d. APP HEADER / SIDEBAR LIGHT SURFACES
   Applied on every console-app route (html.cr-app = any non-public path,
   set by override.js) plus the sign-in fallback, in light mode only.
   ============================================================ */
html.cr-app:not(.dark) header,
html.cr-route-sign-in:not(.dark) header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #E2E8F0;
  color: #334155;
}
html.cr-app:not(.dark) header button,
html.cr-app:not(.dark) header [role="button"] {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #475569;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
html.cr-app:not(.dark) header button:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}
html.cr-app:not(.dark) header button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* sidebar shell: light surface, hairline border */
html.cr-app:not(.dark) aside,
html.cr-app:not(.dark) [data-slot="sidebar"] {
  background: #FFFFFF;
  border-right: 1px solid #E2E8F0;
  color: #334155;
}
/* dropdowns/tooltips opened from the header inherit popover tokens */
html.cr-app:not(.dark) [data-slot="dropdown-menu-content"],
html.cr-app:not(.dark) [data-slot="popover-content"] {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #334155;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

/* ---------- §8. UTILITIES ---------- */
.font-mono, code, pre, kbd, samp {
  font-family: var(--font-mono-stack) !important;
}

/* tabular numbers for metrics */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* dialogs: border-first, subtle shadow */
[data-slot="dialog-content"], [role="dialog"] {
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.07) !important;
  border-radius: 12px !important;
}

/* toast: small, unobtrusive */
[data-slot="toast"], [data-sonner-toast] {
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
}

/* ---- auth forms: reclaim width on tiny screens ---- */
@media (max-width: 380px) {
  html[class*="cr-route-sign"] .container,
  html[class*="cr-route-reset"] .container,
  html[class*="cr-route-forgot"] .container {
    padding-inline: 16px !important;
  }
  html[class*="cr-route-sign"] form,
  html[class*="cr-route-reset"] form,
  html[class*="cr-route-forgot"] form {
    max-width: none !important;
  }
}

/* ---- touch ergonomics: 40px+ primary actions on phones ---- */
@media (pointer: coarse) and (max-width: 767px) {
  a[href="/sign-in"], a[href="/sign-up"],
  section a[class*="h-9"], section button[class*="h-9"] {
    min-height: 40px !important;
  }
  .cr-footer-links a {
    display: inline-block;
    padding: 8px 0;
    line-height: 20px;
  }
  header nav a, header button {
    min-height: 40px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   §9. PUBLIC SHELL — header, hero, sections
   ============================================================ */

/* Fixed header: transparent over hero, quiet white veil on scroll */
header.fixed, header[class*="fixed"] {
  background: transparent;
}
header.fixed nav, header[class*="fixed"] nav {
  height: 60px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 1024px) {
  header.fixed nav, header[class*="fixed"] nav { padding-inline: 8px; }
}

/* nav links: quiet, 13.5px, readable */
header nav a[class*="px-3"] {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--muted-foreground) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: color 150ms ease, background-color 150ms ease;
}
header nav a[class*="px-3"]:hover {
  color: var(--foreground) !important;
  background: rgba(15, 23, 42, 0.045) !important;
}
header nav a[class*="px-3"][aria-current="page"],
header nav a[class*="px-3"].active {
  color: var(--foreground) !important;
}

/* nav icon buttons: 32px tap, quiet */
header nav button {
  width: 32px;
  height: 32px;
  border-radius: 6px !important;
  color: var(--muted-foreground);
}
header nav button:hover { color: var(--foreground); background: rgba(15, 23, 42, 0.045); }

/* sign-in button in header: primary blue, 34px */
header nav a[href*="sign-in"], header nav button[data-variant="primary"] {
  background: var(--primary) !important;
  color: #fff !important;
  height: 34px;
  padding: 0 14px !important;
  border-radius: 7px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
header nav a[href*="sign-in"]:hover { background: #1D4ED8 !important; }

/* logo: keep the wordmark crisp */
header nav > a:first-child span { font-weight: 600 !important; font-size: 14px !important; color: var(--foreground) !important; }

/* mobile drawer: solid surface, clean list */
.bg-background\/98 {
  background: color-mix(in srgb, var(--background) 97%, transparent) !important;
  backdrop-filter: blur(8px);
}

/* hero: tighter, left-aligned, less sky */
section[class*="pt-24"] { padding-top: 96px !important; padding-bottom: 48px !important; }
section[class*="pt-24"] .grid { gap: 40px !important; }
@media (min-width: 1024px) {
  section[class*="pt-24"] .grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; gap: 56px !important; }
}

/* hero eyebrow: quiet pill, real status color */
section[class*="pt-24"] .inline-flex[class*="rounded-full"] {
  background: rgba(22, 163, 74, 0.08) !important;
  border: 1px solid rgba(22, 163, 74, 0.18) !important;
  color: #15803D !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* hero h1: 40-44px, not 51px */
section[class*="pt-24"] h1 {
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
}
/* kill the violet gradient word — solid ink reads more premium */
section[class*="pt-24"] h1 .bg-clip-text {
  background-image: none !important;
  -webkit-text-fill-color: currentColor;
  color: var(--primary) !important;
}

/* hero paragraph */
section[class*="pt-24"] h1 + p {
  font-size: 16px !important;
  color: var(--muted-foreground) !important;
  margin-top: 14px !important;
  max-width: 34rem !important;
}

/* hero CTAs: one primary, rest quiet */
section[class*="pt-24"] .flex[class*="gap-3"] a {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
section[class*="pt-24"] .flex[class*="gap-3"] a:first-child {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
section[class*="pt-24"] .flex[class*="gap-3"] a:first-child:hover { background: #1D4ED8 !important; }
section[class*="pt-24"] .flex[class*="gap-3"] a:not(:first-child) {
  background: #FFFFFF !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}
section[class*="pt-24"] .flex[class*="gap-3"] a:not(:first-child):hover {
  background: var(--surface-sunken) !important;
  border-color: #CBD5E1 !important;
}

/* hero code window: white card, real chrome */
section[class*="pt-24"] .rounded-2xl {
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}
html.dark section[class*="pt-24"] .rounded-2xl {
  background: var(--card) !important;
}

/* code window tabs: quiet underline tabs */
section[class*="pt-24"] .rounded-2xl button[class*="border-b-2"] {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--muted-foreground) !important;
  border-bottom-color: transparent !important;
}
section[class*="pt-24"] .rounded-2xl button[class*="border-b-2"][class*="text-foreground"],
section[class*="pt-24"] .rounded-2xl button[class*="border-b-2"].active {
  color: var(--foreground) !important;
  border-bottom-color: var(--primary) !important;
}

/* POST chip: blue subtle */
section[class*="pt-24"] .rounded-md[class*="font-mono"] {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  font-weight: 600 !important;
}

/* supported apps row: quiet chips */
section[class*="pt-24"] [class*="border-border/40"][class*="bg-muted"] {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}
html.dark section[class*="pt-24"] [class*="border-border/40"][class*="bg-muted"] {
  background: var(--card) !important;
}

/* stats band: quiet, left-aligned numbers */
.border-y {
  background: var(--card);
  border-color: var(--border) !important;
}
html.dark .border-y { background: var(--card); }
.border-y .grid { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.border-y span[class*="text-2xl"], .border-y span[class*="text-3xl"] {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--foreground) !important;
}
.border-y span[class*="text-xs"] { color: var(--muted-foreground) !important; font-size: 12.5px !important; }
.border-y .flex { align-items: flex-start !important; text-align: left !important; }

/* feature sections: breathing room, restrained headings */
section[class*="py-24"] { padding: 72px 0 !important; }
section[class*="py-24"] h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
section[class*="py-24"] .rounded-xl {
  border-radius: 10px !important;
}

/* dark-mode adjustments for the public shell */
html.dark section[class*="pt-24"] .inline-flex[class*="rounded-full"] {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #4ADE80 !important;
}
html.dark header nav a[class*="px-3"]:hover,
html.dark header nav button:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}
html.dark section[class*="pt-24"] .flex[class*="gap-3"] a:not(:first-child) {
  background: transparent !important;
  border-color: var(--border) !important;
}
html.dark .border-y span[class*="text-2xl"],
html.dark .border-y span[class*="text-3xl"] { color: var(--foreground) !important; }

/* ============================================================
   §10. MODEL SQUARE (pricing) — table-first, not marketing cards
   ============================================================ */

/* page header row */
.cr-route-pricing h1, .cr-route-models h1 {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.cr-route-pricing h1 + p, .cr-route-models h1 + p {
  color: var(--muted-foreground) !important;
  font-size: 14px !important;
}

/* filter controls: compact, aligned */
.cr-route-pricing button[class*="rounded-lg"], .cr-route-pricing select {
  border-radius: 7px !important;
  font-size: 13px !important;
}

/* model cards: tighter, border-first */
.cr-route-pricing .rounded-xl {
  border-radius: 10px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.cr-route-pricing .rounded-xl:hover {
  border-color: #CBD5E1 !important;
}
/* model name in mono */
.cr-route-pricing .rounded-xl h3, .cr-route-pricing .rounded-xl h4 {
  font-family: var(--font-mono-stack) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* price figures: tabular */
.cr-route-pricing .tabular-nums { font-variant-numeric: tabular-nums; }

/* ============================================================
   §11. RANKINGS — leaderboard as a proper table
   ============================================================ */
.cr-route-rankings h1 {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.cr-route-rankings h1 + p { color: var(--muted-foreground) !important; font-size: 14px !important; }
/* tabs: underline style already; tighten */
.cr-route-rankings button[class*="px-3"] { font-size: 13px !important; font-weight: 500 !important; }
/* rank numbers mono */
.cr-route-rankings .tabular-nums { font-variant-numeric: tabular-nums; }

/* ============================================================
   §12. STATUS — quiet infrastructure report
   ============================================================ */
.cr-route-status h1 {
  font-size: clamp(1.375rem, 2vw, 1.625rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}
/* the big green card → restrained banner */
.cr-route-status [class*="rounded-2xl"] {
  border-radius: 10px !important;
}
/* status dot colors: semantic, no glow */
.cr-route-status [class*="bg-green-500"], .cr-route-status [class*="bg-emerald-500"] {
  box-shadow: none !important;
}

/* ============================================================
   §13. AUTH — focused panel
   ============================================================ */
.cr-route-sign-in form, .cr-route-sign-up form, .cr-route-register form {
  max-width: 400px;
}
/* the app's auth card: give inputs height + white bg */
.relative.grid.h-svh input {
  height: 40px;
  font-size: 14px !important;
}
/* agreement checkbox block: quieter */
.relative.grid.h-svh .border-border\/60 {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
}

/* ============================================================
   §14. FOOTER / global bits
   ============================================================ */
footer { border-top: 1px solid var(--border); }
footer a { color: var(--muted-foreground); }
footer a:hover { color: var(--foreground); }

/* ============================================================
   §15. FINAL CTA BAND + FOOTER
   ============================================================ */
/* CTA band: white card, one primary button — no giant gradient panel */
section[class*="py-24"]:last-of-type {
  padding-bottom: 88px !important;
}
/* how-it-works steps: numbered, quiet */
section[class*="py-24"] [class*="text-4xl"], section[class*="py-24"] [class*="text-3xl"] {
  font-variant-numeric: tabular-nums;
}

/* footer: compact, single row on desktop */
footer {
  padding: 28px 0 !important;
}
footer .container, footer [class*="mx-auto"] { max-width: 1200px; }
footer { font-size: 13px !important; color: var(--muted-foreground) !important; }

/* ============================================================
   §16. FEATURE CARDS — kill the "identical card grid" look
   ============================================================ */
/* the 7 feature blocks: borderless rows with left-aligned titles,
   separated by hairlines instead of floating cards */
section[class*="py-24"] .grid[class*="gap-6"] > div,
section[class*="py-24"] .grid[class*="gap-8"] > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
  border-radius: 0 !important;
}
@media (min-width: 768px) {
  section[class*="py-24"] .grid[class*="gap-6"] > div,
  section[class*="py-24"] .grid[class*="gap-8"] > div {
    border-top: 1px solid var(--border) !important;
    padding: 24px 0 !important;
  }
}
/* feature titles */
section[class*="py-24"] h3 {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--foreground) !important;
}
/* feature body copy */
section[class*="py-24"] h3 + p, section[class*="py-24"] .text-muted-foreground {
  color: var(--muted-foreground) !important;
  font-size: 14px !important;
}

/* big decorative icon tiles in features: shrink to inline icons */
section[class*="py-24"] .size-10, section[class*="py-24"] .size-11, section[class*="py-24"] .size-12 {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

/* 1200px content width on marketing pages */
section[class*="pt-24"] .mx-auto.max-w-6xl,
section[class*="py-24"] .mx-auto.max-w-6xl {
  max-width: 1200px !important;
}

/* NOTE: docs-site mobile table fixes live in /var/www/clauderouter-docs/docs-mobile.css
   (the docs app is static and does not receive this override layer). */

/* ---- §11. ADMIN BROADCAST UI (injected page + settings card) ------------
   Uses the app's design tokens so it follows light/dark automatically. */
#cr-broadcast-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
  max-width: 1100px;
  margin: 0 auto;
  color: var(--card-foreground, #0F172A);
}
#cr-broadcast-page h, #cr-broadcast-page .cr-bc-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--card-foreground, #0F172A);
}
#cr-broadcast-page .cr-bc-sub {
  font-size: 13px;
  color: var(--muted-foreground, #64748B);
  margin-top: -8px;
}
#cr-broadcast-panel {
  padding: 16px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 12px;
  background: var(--card, #FFFFFF);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  max-width: 720px;
  width: 100%;
  font-family: inherit;
  color: var(--card-foreground, #0F172A);
  box-sizing: border-box;
}
#cr-broadcast-panel .cr-bc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
#cr-broadcast-panel .cr-bc-icon { font-size: 22px; }
#cr-broadcast-panel .cr-bc-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--card-foreground, #0F172A);
}
#cr-broadcast-panel .cr-bc-status {
  font-size: 12px;
  color: var(--muted-foreground, #64748B);
  margin-top: 2px;
}
#cr-bc-message {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--border, #CBD5E1);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--card-foreground, #0F172A);
  background: var(--muted, #F8FAFC);
  resize: vertical;
}
#cr-bc-message:focus {
  outline: none;
  border-color: var(--primary, #2563EB);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
#cr-broadcast-panel .cr-bc-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}
#cr-bc-preview {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--card, #FFFFFF);
  color: var(--card-foreground, #475569);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
#cr-bc-preview:hover { background: var(--accent, #F8FAFC); }
#cr-bc-send {
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  background: var(--primary, #2563EB);
  color: var(--primary-foreground, #FFFFFF);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: filter 150ms;
}
#cr-bc-send:hover { filter: brightness(1.08); }
#cr-bc-result {
  font-size: 12px;
  color: var(--muted-foreground, #64748B);
}
/* sidebar link injected next to System Settings — match native item styling */
#cr-nav-broadcast { display: inline-flex; align-items: center; gap: 8px; }