/* Console design contract, derived from the approved UI Lab and the read-only OpenRouter reference. */
:root {
  color-scheme: light;
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303080a' stroke-opacity='.69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --canvas: #fcfcfe; --surface: #fff; --surface-subtle: #f7f7fa;
  --mode-cover-chatty: #fbe4bd; --mode-cover-sunny: #d5efe9; --mode-cover-quiet: #dbe4f7; --mode-cover-called: #eee2f8;
  --sidebar-surface: rgba(3,8,10,.01085); --input-surface: var(--surface);
  --ink: #03080a; --muted: rgba(3,8,10,.69); --line: rgba(3,8,10,.08); --line-subtle: rgba(3,8,10,.0312); --line-strong: rgba(3,8,10,.22);
  --on-brand: #fff; --on-danger: #fff;
  --brand: #7624f4; --brand-hover: #651bd5; --brand-tint: rgba(118,36,244,.08);
  --success: #16803c; --success-tint: #eef9f0; --warning: #916000; --warning-tint: #fff8e7;
  --danger: #c9362b; --danger-text: #c9362b; --danger-tint: #fff0ee; --scrim: rgba(3,8,10,.32); --drawer-scrim: rgba(3,8,10,.32); --hover: rgba(3,8,10,.035);
  /* Demo baseline: system-ui at 14px/22.75px. Keep platform fallbacks for
     Chinese glyphs without making a page depend on an unavailable webfont. */
  --font: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --radius: 6px; --panel-radius: 8px; --dialog-radius: 8px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --dialog-max-height: 760px; --overlay-gutter: 24px;
  --dialog-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --modal-scrim: rgba(252,252,254,.8); --focus-border: rgba(3,8,10,.3); --focus-shadow: rgba(3,8,10,.06);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --control-height: 40px; --compact-height: 32px; --touch-height: 44px; --sidebar-width: 224px; --header-height: 56px; --drawer-duration: 350ms;
  --motion: 150ms ease; --progress-height: 2px; --progress-motion: 200ms;
  --switch-width: 44px; --switch-height: 24px; --switch-thumb: 20px;
  --switch-off: rgba(3,8,10,.30);
  --scrollbar-width: thin; --scrollbar-thumb: var(--line-strong); --scrollbar-track: transparent;
  --progress-brand: #7624f4; --progress-glow: 0 0 10px #7624f4,0 0 5px #7624f4;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcfcfe' stroke-opacity='.627' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  /* Target dark mode measured on the authorised OpenRouter console. */
  --canvas: #03080a; --surface: #080d0f; --surface-subtle: rgba(252,252,254,.031);
  --mode-cover-chatty: #2b2117; --mode-cover-sunny: #12241f; --mode-cover-quiet: #192130; --mode-cover-called: #221a2c;
  --sidebar-surface: rgba(252,252,254,.00372); --input-surface: #fcfcfe0a;
  --ink: #fcfcfe; --muted: rgba(252,252,254,.627); --line: rgba(252,252,254,.078); --line-subtle: rgba(252,252,254,.0312); --line-strong: rgba(252,252,254,.18);
  --on-brand: #03080a; --on-danger: #fff;
  --brand: #c8ff00; --brand-hover: #c8ff00e0; --brand-tint: rgba(200,255,0,.08);
  --success: #7ee787; --success-tint: rgba(126,231,135,.12); --warning: #f2cc60; --warning-tint: rgba(242,204,96,.12);
  --danger: #e11d48; --danger-text: #fb7185; --danger-tint: rgba(225,29,72,.14); --scrim: rgba(0,0,0,.55); --drawer-scrim: rgba(3,8,10,.6); --hover: rgba(252,252,254,.031);
  --modal-scrim: rgba(3,8,10,.8); --focus-border: rgba(252,252,254,.3); --focus-shadow: rgba(252,252,254,.06);
  --switch-off: rgba(252,252,254,.30);
  --progress-brand: #c8ff00; --progress-glow: 0 0 10px #c8ff00,0 0 5px #c8ff00;
}

@media(prefers-reduced-motion:reduce) { :root { --drawer-duration: 0ms; } }

/* One spacing contract for all touch/narrow overlays, including landscape. */
@media(max-width:768px), (pointer:coarse) { :root { --overlay-gutter:12px; } }