@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');

/* Infra AI · Orven. Load after the existing NewAPI application stylesheet.
   Theme only: component dimensions, responsive layouts and interaction states
   remain owned by the application. Tokens also cover portals mounted on body. */
:root,
body,
[data-theme-preset],
html.light,
html.light body,
html.light [data-theme-preset] {
  --font-sans: 'Inter Tight', 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  --font-body: var(--font-sans) !important;
  --font-inter: var(--font-sans) !important;
  --font-manrope: var(--font-sans) !important;
  --radius: 0.75rem !important;
  --background: #ffffff !important;
  --foreground: #17212f !important;
  --card: #ffffff !important;
  --card-foreground: #17212f !important;
  --popover: #ffffff !important;
  --popover-foreground: #17212f !important;
  --primary: #0066cc !important;
  --primary-foreground: #fafaf7 !important;
  --secondary: #eef2f6 !important;
  --secondary-foreground: #282828 !important;
  --muted: #f3f5f7 !important;
  --muted-foreground: #536273 !important;
  --accent: #edf2f7 !important;
  --accent-foreground: #141414 !important;
  --border: #e1e7ed !important;
  --input: #c7d1db !important;
  --ring: #0066cc !important;
  --sidebar: #ffffff !important;
  --sidebar-foreground: #292929 !important;
  --sidebar-primary: #0066cc !important;
  --sidebar-primary-foreground: #fafaf7 !important;
  --sidebar-accent: #eef3f8 !important;
  --sidebar-accent-foreground: #111111 !important;
  --sidebar-border: #e1e7ed !important;
  --sidebar-ring: #0066cc !important;
  --skeleton-base: #e7edf2 !important;
  --skeleton-highlight: #f7f9fb !important;
  --table-row: #ffffff !important;
  --table-header: #f5f7fa !important;
  --table-header-hover: #edf2f7 !important;
  --table-disabled: #f3f5f7 !important;
  --table-disabled-hover: #e7edf2 !important;
  --table-disabled-border: #c7d1db !important;
  --chart-1: #0066cc !important;
  --chart-2: #236d52 !important;
  --chart-3: #536273 !important;
  --chart-4: #777771 !important;
  --chart-5: #8b8b84 !important;
  --overview-accent-1: #0066cc !important;
  --overview-accent-2: #236d52 !important;
  --overview-accent-3: #8058a5 !important;
  --destructive: #b62935 !important;
  --destructive-foreground: #ffffff !important;
  --success: #276746 !important;
  --success-foreground: #ffffff !important;
  --warning: #97530e !important;
  --warning-foreground: #ffffff !important;
  --info: #3b627e !important;
  --info-foreground: #ffffff !important;
  --neutral: #536273 !important;
  --neutral-foreground: #ffffff !important;
}

/* The native theme menu remains available for an explicit later selection. */
html.dark,
html.dark body,
html.dark [data-theme-preset] {
  --background: #080808 !important;
  --foreground: #f5f5f3 !important;
  --card: #111111 !important;
  --card-foreground: #f5f5f3 !important;
  --popover: #181818 !important;
  --popover-foreground: #f5f5f3 !important;
  --primary: #f3f3ef !important;
  --primary-foreground: #111111 !important;
  --secondary: #232323 !important;
  --secondary-foreground: #f0f0ed !important;
  --muted: #1b1b1b !important;
  --muted-foreground: #ababaa !important;
  --accent: #2a2a2a !important;
  --accent-foreground: #ffffff !important;
  --border: #2c2c2c !important;
  --input: #3c3c3c !important;
  --ring: #d8d8d3 !important;
  --sidebar: #0d0d0d !important;
  --sidebar-foreground: #dededb !important;
  --sidebar-primary: #f3f3ef !important;
  --sidebar-primary-foreground: #111111 !important;
  --sidebar-accent: #242424 !important;
  --sidebar-accent-foreground: #ffffff !important;
  --sidebar-border: #292929 !important;
  --sidebar-ring: #d8d8d3 !important;
  --skeleton-base: #222222 !important;
  --skeleton-highlight: #323232 !important;
  --table-row: #101010 !important;
  --table-header: #181818 !important;
  --table-header-hover: #232323 !important;
  --table-disabled: #1c1c1c !important;
  --table-disabled-hover: #272727 !important;
  --table-disabled-border: #424242 !important;
  --chart-1: #f1f1ed !important;
  --chart-2: #c8c8c3 !important;
  --chart-3: #aaaaa4 !important;
  --chart-4: #91918b !important;
  --chart-5: #787872 !important;
  --overview-accent-1: #e5e5e0 !important;
  --overview-accent-2: #bcbcb7 !important;
  --overview-accent-3: #959590 !important;
  /* Keep operational states identifiable, including error text and badges. */
  --destructive: #fb9292 !important;
  --destructive-foreground: #190808 !important;
  --success: #91cfab !important;
  --success-foreground: #09160e !important;
  --warning: #dfc180 !important;
  --warning-foreground: #211809 !important;
  --info: #a9c6da !important;
  --info-foreground: #0b151c !important;
  --neutral: #b8b8b1 !important;
  --neutral-foreground: #161616 !important;
}

html { color-scheme: light; background: var(--background); }
html.dark { color-scheme: dark; }
body {
  background-color: var(--background) !important;
  color: var(--foreground);
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--foreground); color: var(--background); }

:where(h1, h2, h3, h4, h5, h6, [data-slot='card-title'],
  [data-slot='dialog-title'], [data-slot='sheet-title']) {
  letter-spacing: -0.035em;
}
:where([data-slot='button'], [data-slot='tabs-trigger'],
  [data-slot='sidebar-menu-button'], [data-sidebar='menu-button']) {
  letter-spacing: -0.015em;
}
:where([data-slot='table'], .tabular-nums) {
  font-variant-numeric: tabular-nums;
}

/* Token-driven surfaces preserve the component's layout and spacing. */
[data-slot='card'] {
  background-color: var(--card);
  color: var(--card-foreground);
  box-shadow: 0 0 0 1px var(--border);
}
[data-slot='card']:hover {
  box-shadow: 0 0 0 1px var(--input);
}
[data-slot='sidebar-inner'] {
  border-inline-end: 1px solid var(--sidebar-border);
}
[data-slot='sidebar-inset'] > header {
  background: color-mix(in srgb, var(--background) 94%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
header nav {
  font-family: var(--font-body);
}

/* Only primary buttons receive a filled treatment. Ghost controls, table
   actions, danger actions and disabled states retain their own variants. */
[data-slot='button'].bg-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  box-shadow: none;
}
[data-slot='button'].bg-primary:not(:disabled):not([aria-disabled='true']):hover {
  background-color: color-mix(in srgb, var(--primary) 88%, var(--background));
  border-color: color-mix(in srgb, var(--primary) 88%, var(--background));
}
[data-slot='button'].bg-primary svg { color: currentColor; }

:where([data-slot='input'], [data-slot='textarea'],
  [data-slot='select-trigger'], [data-slot='combobox-input']) {
  background-color: var(--background);
  color: var(--foreground);
}
:where([data-slot='input'], [data-slot='textarea'])::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}
:where([data-slot='input'], [data-slot='textarea']):autofill {
  box-shadow: 0 0 0 1000px var(--background) inset;
  color: var(--foreground);
}
:where([data-slot='input'], [data-slot='textarea']):-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--background) inset;
  -webkit-text-fill-color: var(--foreground);
  caret-color: var(--foreground);
}
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

[data-slot='table-head'] {
  color: var(--muted-foreground);
  font-weight: 500;
  letter-spacing: 0.025em;
}
[data-slot='table-row'][data-state='selected'] {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* Restrained depth on floating UI; no z-index changes or overflow clipping. */
:where([data-slot='dialog-content'], [data-slot='alert-dialog-content'],
  [data-slot='popover-content'], [data-slot='dropdown-menu-content'],
  [data-slot='select-content'], [data-slot='sheet-content']) {
  border-color: var(--border);
  box-shadow: 0 18px 60px rgb(0 0 0 / 25%);
}

/* The existing auth layout has no dedicated slot. Its exact class combination
   is stable in auth-layout.tsx and does not match data/dashboard wrappers. */
.relative.grid.h-svh.max-w-none {
  background-image: radial-gradient(ellipse at 50% 20%, var(--muted), transparent 65%);
}

@media (max-width: 767px) {
  :where([data-slot='input'], [data-slot='textarea'],
    [data-slot='select-trigger'], [data-slot='combobox-input']) {
    font-size: 16px;
  }
  [data-slot='sidebar-inset'] { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot='card'], [data-slot='button'] { transition: none !important; }
}

@media (forced-colors: active) {
  [data-slot='card'] { border: 1px solid CanvasText; }
  [data-slot='button'].bg-primary { border: 1px solid ButtonText; }
}

/* Official brand marks injected by infra-theme.js: force the theme foreground
   so the restored OpenAI / xAI marks render monochrome on both themes. */
svg[data-fj-brand] { color: var(--foreground, #f5f5f3) !important; }

/* ─── console palette: user-provided set (2026-09-19) ───────────────────
   #A6FFFF #0066CC #FFFFFF #8CEA00 #B3D9D9 #E6E6F2 #D94600 #BBFFBB #DDDDFF
   Semantic tokens and every Tailwind accent family resolve into this one
   set so the console keeps colour, but a colour the owner chose. */
html.dark, html.dark body, html.dark [data-theme-preset] {
  --success: #93ff93 !important;
  --success-foreground: #0a1400 !important;
  --info: #a6ffff !important;
  --info-foreground: #001a26 !important;
  --warning: #d94600 !important;
  --warning-foreground: #1a0600 !important;
  --destructive: #d94600 !important;
  --destructive-foreground: #1a0600 !important;
  --neutral: #b3d9d9 !important;
  --ring: #a6ffff !important;
  --sidebar-ring: #a6ffff !important;
}
:root {
  --color-emerald-300: #ceffce !important;
  --color-emerald-400: #93ff93 !important;
  --color-emerald-500: #93ff93 !important;
  --color-emerald-600: #93ff93 !important;
  --color-green-300: #ceffce !important;
  --color-green-400: #93ff93 !important;
  --color-green-500: #93ff93 !important;
  --color-green-600: #93ff93 !important;
  --color-lime-300: #ceffce !important;
  --color-lime-400: #93ff93 !important;
  --color-teal-300: #b3d9d9 !important;
  --color-teal-400: #b3d9d9 !important;
  --color-teal-500: #8fbfbf !important;
  --color-cyan-300: #a6ffff !important;
  --color-cyan-400: #a6ffff !important;
  --color-cyan-500: #7ad9e0 !important;
  --color-sky-300: #a6ffff !important;
  --color-sky-400: #7fd4f0 !important;
  --color-blue-300: #a6ffff !important;
  --color-blue-400: #7fd4f0 !important;
  --color-blue-500: #0066cc !important;
  --color-blue-600: #0066cc !important;
  --color-indigo-300: #dddfff !important;
  --color-indigo-400: #b9bdf2 !important;
  --color-violet-300: #dddfff !important;
  --color-violet-400: #d0d3ff !important;
  --color-violet-500: #b9bdf2 !important;
  --color-purple-300: #dddfff !important;
  --color-purple-400: #d0d3ff !important;
  --color-fuchsia-300: #dddfff !important;
  --color-fuchsia-400: #d0d3ff !important;
  --color-pink-300: #dddfff !important;
  --color-pink-400: #d0d3ff !important;
  --color-rose-300: #d94600 !important;
  --color-rose-400: #d94600 !important;
  --color-red-300: #d94600 !important;
  --color-red-400: #d94600 !important;
  --color-red-500: #d94600 !important;
  --color-orange-300: #ff8a4d !important;
  --color-orange-400: #d94600 !important;
  --color-amber-300: #ffab73 !important;
  --color-yellow-300: #ffd166 !important;
  --color-yellow-400: #e3b341 !important;
}
/* group column: the name stays neutral, the ratio badge keeps its meaning
   in the chosen accent tones */
[data-column-id="group"] span.min-w-0.truncate { color: var(--foreground) !important; }
/* wallet referral card: neutral text, a warm accent on its icon tile */
[class*="text-[#B45261]"], [class*="dark:text-[#E3A1AD]"] { color: var(--foreground) !important; }
[class*="text-[#A85A66]"], [class*="dark:text-[#D19AA4]"] { color: var(--muted-foreground) !important; }
[class*="bg-[#3D2730]"], [class*="bg-[#FDF2F4]"], [class*="dark:bg-[#3D2730]"] { background-color: rgba(217, 70, 0, .16) !important; }
[class*="bg-[#3D2730]"] svg, [class*="dark:bg-[#3D2730]"] svg { color: #d94600 !important; }
/* canvas charts: keep the palette, soften it a touch so it sits with the UI */
canvas { filter: saturate(0.95) brightness(1.03) contrast(1.02); }

/* Light surfaces need darker accent text than the old dark-mode palette. */
html.light, :root:not(.dark) {
  --color-green-300: #23713d !important;
  --color-green-400: #23713d !important;
  --color-green-500: #23713d !important;
  --color-green-600: #1c5f33 !important;
  --color-emerald-300: #18734f !important;
  --color-emerald-400: #18734f !important;
  --color-emerald-500: #18734f !important;
  --color-emerald-600: #146342 !important;
  --color-lime-300: #4b6c10 !important;
  --color-lime-400: #4b6c10 !important;
  --color-teal-300: #236868 !important;
  --color-teal-400: #236868 !important;
  --color-teal-500: #236868 !important;
  --color-cyan-300: #066b80 !important;
  --color-cyan-400: #066b80 !important;
  --color-cyan-500: #066b80 !important;
  --color-sky-300: #0066cc !important;
  --color-sky-400: #0066cc !important;
  --color-blue-300: #0066cc !important;
  --color-blue-400: #0066cc !important;
  --color-indigo-300: #565a9e !important;
  --color-indigo-400: #565a9e !important;
  --color-violet-300: #685394 !important;
  --color-violet-400: #685394 !important;
  --color-violet-500: #685394 !important;
  --color-purple-300: #685394 !important;
  --color-purple-400: #685394 !important;
  --color-fuchsia-300: #815385 !important;
  --color-fuchsia-400: #815385 !important;
  --color-pink-300: #9a4566 !important;
  --color-pink-400: #9a4566 !important;
  --color-orange-300: #b3470b !important;
  --color-orange-400: #b3470b !important;
  --color-amber-300: #97530e !important;
  --color-yellow-300: #85620b !important;
  --color-yellow-400: #85620b !important;
}