/* ==========================================================================
   Oceanus Design Tokens — Single source of truth for the entire UI
   Import this FIRST in base.html before all other stylesheets.
   ========================================================================== */

:root {
  /* Product-app skin (Observatory / ElevenLabs family): warm paper, ink
     CTAs, Instrument Sans, hairline edges. Dark is the warm-black analog of the
     same sheet — not GitHub blue-gray. */

  /* ---------- Color: Backgrounds (dark theme default) ---------- */
  /* Warm charcoal, not pitch black — canvas vs plate must read as a step. */
  --bg-base:        #1a1816;  /* page / canvas */
  --bg-elevated:    #2a2724;  /* panels, cards, headers */
  --bg-elevated-2:  #353230;  /* hover, secondary elevation */
  --bg-input:       #221f1d;  /* form inputs */
  --bg-code:        #221f1d;  /* code blocks */
  --bg-tooltip:     #353230;

  /* ---------- Color: Text ---------- */
  --text-primary:   #f5f2ef;  /* headings, primary text */
  --text-secondary: #d6d3d1;  /* body text */
  --text-muted:     #a8a29e;  /* muted, helper text */
  /* Phase 8.3: --text-dim carried section labels, timeline kinds and nav
     headings at 2.4–3.8:1 in all three themes — text, not decoration, and
     below 4.5:1 in every one. These are the smallest values that clear it
     against the lighter of the two surfaces each sits on; measured, not
     picked. a11y_probe.mjs --section contrast re-checks them. */
  --text-dim:       #928d89;  /* very dim text — 4.52:1 on --bg-elevated */
  --text-inverse:   #1a1816;

  /* ---------- Color: Borders ---------- */
  --border-default: #403c39;
  --border-muted:   #2f2c2a;
  --border-strong:  #5a5550;

  /* ---------- Color: Brand / Accent ---------- */
  /* Ink stays on large CTAs (--text-primary fill). --accent is the
     highlight blue for handles, chips, focus, selected rows, links. */
  --accent:         #4d8fd4;
  --accent-rgb:     77 143 212;   /* rgba(var(--accent-rgb), a) */
  --accent-hover:   #6aa3de;
  --accent-active:  #3a7bc0;
  --accent-muted:   rgba(77, 143, 212, 0.16);

  /* ---------- Color: Semantic ---------- */
  --success:        #3fb950;
  --success-bg:     rgba(63, 185, 80, 0.15);
  --danger:         #f8544d;  /* moves with --price-down (4.51:1) */
  --danger-bg:      rgba(248, 84, 77, 0.15);
  --warning:        #d29922;
  --warning-bg:     rgba(210, 153, 34, 0.15);
  --info:           #4d8fd4;
  --info-bg:        rgba(77, 143, 212, 0.12);

  /* ---------- Color: Extended palette ---------- */
  --clr-purple:     #7a9bc4;
  --clr-orange:     #f78166;
  --clr-brown:      #c4a574;

  /* ---------- Color: Market ---------- */
  --price-up:       #3fb950;
  --price-down:     #f8544d;  /* 4.51:1 on --bg-elevated (was #f85149, 4.43) */

  /* ---------- Typography ---------- */
  /* Instrument Sans (product UI) + Geist Mono (markdown / code). */
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "IBM Plex Mono", Menlo, Monaco, Consolas, monospace;

  /* User-adjustable text scale (top-bar A− / A+). Bootstrap sets this on
     <html> from localStorage before paint; default 1 = 100%. */
  --ui-font-scale: 1;

  --fs-xs:   calc(11px * var(--ui-font-scale, 1));
  --fs-sm:   calc(12px * var(--ui-font-scale, 1));
  --fs-base: calc(13px * var(--ui-font-scale, 1));
  --fs-md:   calc(14px * var(--ui-font-scale, 1));
  --fs-lg:   calc(16px * var(--ui-font-scale, 1));
  --fs-xl:   calc(18px * var(--ui-font-scale, 1));
  --fs-2xl:  calc(22px * var(--ui-font-scale, 1));
  --fs-3xl:  calc(28px * var(--ui-font-scale, 1));
  --fs-4xl:  calc(36px * var(--ui-font-scale, 1));

  --fw-light:    400;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.17;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- Border radius (paper: 8px plates, pills on actions) ---------- */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-full: 9999px; /* pills / chips only */

  /* ---------- Shadows (hairline, not elevation) ---------- */
  --shadow-sm:  rgba(0, 0, 0, 0.08) 0 0 0 0.5px;
  --shadow-md:  rgba(0, 0, 0, 0.08) 0 0 0 0.5px, rgba(0, 0, 0, 0.04) 0 1px 2px;
  --shadow-lg:  rgba(0, 0, 0, 0.08) 0 0 0 0.5px, rgba(0, 0, 0, 0.06) 0 2px 8px;
  --shadow-xl:  rgba(0, 0, 0, 0.10) 0 0 0 0.5px, rgba(0, 0, 0, 0.12) 0 8px 24px;

  /* ---------- Glassmorphism (global aesthetic) ---------- */
  /* Minimal frost: light translucent fills on dark, short shadows, hairline edges.
     0.5px is the practical CSS minimum (true hairline on retina; ~1 device px
     on 1x displays where subpixels round up). */
  --hairline:           0.5px;
  --glass-blur:         12px;
  --glass-blur-strong:  16px;
  --glass-blur-soft:    8px;
  --glass-saturate:     1.05;
  --glass-bg:           rgba(255, 255, 255, 0.06);
  --glass-bg-strong:    rgba(255, 255, 255, 0.09);
  --glass-bg-soft:      rgba(255, 255, 255, 0.035);
  --glass-bg-input:     rgba(255, 255, 255, 0.07);
  --glass-border:       rgba(255, 255, 255, 0.11);
  --glass-border-hi:    rgba(255, 255, 255, 0.16);
  --glass-border-lo:    rgba(255, 255, 255, 0.07);
  --glass-highlight:    none;
  --glass-highlight-sm: none;
  --glass-shadow:       0 1px 3px rgba(0, 0, 0, 0.22);
  --glass-shadow-sm:    none;
  --glass-shadow-lg:    0 4px 14px rgba(0, 0, 0, 0.28);
  --glass-filter:       blur(var(--glass-blur)) saturate(var(--glass-saturate));
  --glass-filter-strong: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  --glass-filter-soft:  blur(var(--glass-blur-soft)) saturate(1.08);

  /* ---------- Material tiers (iOS mobile parity — 2026-07) ----------
     L = liquid content plates | D = dense overlays | C = chrome bars
     See .grok/docs/design/IOS_MOBILE_PARITY_2026-07.md */
  /* L — liquid plate (Home/Markets/Ticker/composer) */
  --lg-blur:            26px;
  --lg-blur-strong:     32px;
  --lg-blur-soft:       16px;
  --lg-sat:             1.2;
  --lg-filter:          blur(var(--lg-blur)) saturate(var(--lg-sat));
  --lg-filter-strong:   blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  --lg-filter-soft:     blur(var(--lg-blur-soft)) saturate(var(--lg-sat));
  --lg-fill:            rgba(48, 58, 74, 0.52);
  --lg-fill-strong:     rgba(48, 58, 74, 0.72);
  --lg-fill-soft:       rgba(48, 58, 74, 0.42);
  --lg-fill-chip:       rgba(48, 58, 74, 0.36);
  --lg-edge:            rgba(175, 194, 218, 0.22);
  --lg-edge-hi:         rgba(200, 216, 236, 0.32);
  --lg-edge-lo:         rgba(170, 188, 214, 0.11);
  --lg-radius:          14px;
  --lg-radius-sm:       10px;
  --lg-shadow:          0 8px 28px -12px rgba(0, 0, 0, 0.45);
  /* D — dense overlay plate (menus, cmd palette, sheets chrome) */
  --glass-plate:        rgba(22, 28, 38, 0.92);
  --glass-plate-edge:   rgba(200, 216, 236, 0.28);
  --glass-plate-filter: blur(28px) saturate(1.35);
  --glass-plate-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55),
                        0 6px 16px -6px rgba(0, 0, 0, 0.35),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* C — chrome bars (top bar mobile, bottom tray, tools pills) */
  --chrome-fill:        color-mix(in srgb, var(--bg-elevated, #161b22) 94%, transparent);
  --chrome-fill-solid:  var(--bg-elevated, #161b22);
  --chrome-edge:        rgba(200, 216, 236, 0.18);
  --chrome-filter:      blur(18px) saturate(1.25);
  --chrome-radius:      24px;
  --chrome-shadow:      0 10px 28px rgba(0, 0, 0, 0.35);
  --command-tray-height: 52px;

  /* Ambient (dark) — solid field; Batch 1 减法 (no mesh) */
  --ambient-base:       #1a1816;
  --ambient-spot-1:     transparent;
  --ambient-spot-2:     transparent;
  --ambient-spot-3:     transparent;

  /* ---------- Motion (iOS-calibrated; --tr-* stay aliases) ---------- */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  /* UIKit-like default curve (no bounce). */
  --ease-ios: cubic-bezier(0.23, 1, 0.32, 1);
  /* Underdamped spring: visible 8% overshoot, then settle. Menus, sheets,
     tab ink, drawers. Never on financial numbers. */
  --ease-ios-bounce: linear(
    0, 0.07 3.5%, 0.23 8.4%, 0.62 18%, 0.91 28%, 1.05 38%, 1.089 46%,
    1.07 52%, 1.03 64%, 1.01 76%, 1.002 88%, 1
  );
  --dur-press:  140ms;
  --dur-ui:     200ms;
  --dur-pop:    480ms;
  --dur-sheet:  560ms;
  --tap-min:   44px;
  --overlay:   rgba(12, 14, 18, 0.55);
  --tr-fast:   var(--dur-press) var(--ease-out);
  --tr-base:   var(--dur-ui) var(--ease-out);
  --tr-slow:   var(--dur-sheet) var(--ease-out);

  /* ---------- Motion vocabulary (Phase 2.3, 2026-09-12) ----------
     Components should name what the motion *means*, not pick a duration.
     A raw `160ms cubic-bezier(...)` in a component is how a codebase ends up
     with 312 hardcoded durations that no one can retune together. */
  --motion-enter:    var(--dur-pop) var(--ease-ios-bounce);
  --motion-exit:     var(--dur-pop) var(--ease-ios);
  --motion-move:     var(--dur-pop) var(--ease-ios-bounce);
  --motion-emphasis: var(--dur-sheet) var(--ease-ios-bounce);

  /* Springs. --ease-spring is the iOS bounce; --ease-soft-spring settles
     without crossing (chips, numbers). Never put overshoot on prices. */
  --ease-spring: var(--ease-ios-bounce);
  --ease-soft-spring: linear(
    0, 0.009, 0.035 3.3%, 0.146 8.1%, 0.539 20.6%, 0.72 27%, 0.84 33%,
    0.925 39.4%, 0.964 44.1%, 0.99 50.4%, 1.001 57.5%, 1.004 67%, 1
  );
  /* Waiting, not moving: one loop of the skeleton sweep, and how far apart
     stacked lines sit in that loop. Slow enough to read as breathing rather
     than as a progress bar promising a speed it does not know. */
  --dur-shimmer:      1500ms;
  --dur-shimmer-step:  110ms;

  --spring-press: var(--dur-press) var(--ease-soft-spring);
  --spring-ui:    var(--dur-ui) var(--ease-spring);
  --spring-sheet: var(--dur-sheet) var(--ease-spring);

  /* Research OS — 10% glass on temporary layers only (cmd palette, menus,
     sheets). Workspace stays solid. See desk.css. */
  --overlay-fill:   color-mix(in srgb, var(--bg-elevated) 62%, transparent);
  --overlay-blur:   40px;
  --overlay-filter: blur(var(--overlay-blur)) saturate(1.6);
  --overlay-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.62),
                    0 0 0 0.5px color-mix(in srgb, var(--text-primary) 16%, transparent);
  --r-control: 6px;
  --row-h:     28px;

  /* ---------- Z-index scale ---------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    1000;
  --z-modal:    1500;
  --z-tooltip:  2000;

  /* ---------- Layout ---------- */
  --sidebar-width:           260px;
  --sidebar-width-collapsed: 64px;
  --topbar-height:           49px;
  --statusbar-height:        32px;
  --content-max-width:       1480px;
  /* Chat drawer width — proportional, with min/max so it never looks
     tiny on a 4K display but never dominates a laptop screen either.
     clamp(min, ideal, max): ~28vw with floor 380px and ceiling 720px. */
  --chat-width:              clamp(380px, 28vw, 720px);

  /* ========================================================================
     Pathway C — Studio / AI tokens (opt-in; see PATHWAY_C_VISUAL_SYSTEM.md)
     ------------------------------------------------------------------------
     These do NOT remap --fs-base, --r-md, or --accent. Terminal surfaces
     (Markets, Ticker tables) keep existing density. Studio surfaces
     (Dashboard, Chat, Analysts, Scout, Research, Pipeline chrome) should
     reference --fs-studio-*, --r-card / --r-panel, --bg-studio, --accent-ai*
     deliberately in later stages.
     ======================================================================== */

  /* Studio type scale — slightly larger prose without changing app base. */
  --fs-studio-xs:   calc(12px * var(--ui-font-scale, 1));
  --fs-studio-sm:   calc(13px * var(--ui-font-scale, 1));
  --fs-studio-base: calc(14px * var(--ui-font-scale, 1));
  --fs-studio-md:   calc(15px * var(--ui-font-scale, 1));
  --fs-studio-lg:   calc(17px * var(--ui-font-scale, 1));
  --fs-studio-xl:   calc(20px * var(--ui-font-scale, 1));
  --fs-studio-2xl:  calc(24px * var(--ui-font-scale, 1));
  --lh-studio:      1.55;

  /* Studio radii — paper plates. */
  --r-card:  8px;
  --r-panel: 8px;
  --r-control: 8px;

  /* Studio surfaces — same paper family as the app. */
  --bg-studio:     #2a2724;
  --bg-studio-elevated: #353230;
  --border-soft:   rgba(245, 242, 239, 0.10);
  --border-soft-strong: rgba(245, 242, 239, 0.16);
  --shadow-studio: rgba(0, 0, 0, 0.08) 0 0 0 0.5px;

  /* Pathway D Stage D3 — marketing ↔ app handoff aliases.
     Login/signup/landing should prefer these; terminal density tokens unchanged. */
  --bg-auth:       var(--bg-studio);
  --bg-auth-card:  var(--bg-studio-elevated);
  --border-auth:   var(--border-soft);
  --shadow-auth:   var(--shadow-studio);

  /* AI accent — cooler sibling of --accent, for studio/AI chips */
  --accent-ai:         #5b9ee0;
  --accent-ai-hover:   #78b0e8;
  --accent-ai-2:       #4d8fd4;
  --accent-ai-muted:   rgba(91, 158, 224, 0.14);
  --accent-ai-muted-2: rgba(77, 143, 212, 0.10);
  --gradient-ai:       linear-gradient(135deg, #4d8fd4 0%, #6aa3de 100%);
  --gradient-ai-soft:  linear-gradient(135deg,
                         rgba(77, 143, 212, 0.12) 0%,
                         rgba(91, 158, 224, 0.08) 100%);

  /* ---------- Legacy aliases (for backward compatibility) ---------- */
  --bg:       var(--bg-base);
  --panel:    var(--bg-elevated);
  --panel-2:  var(--bg-elevated-2);
  --text:     var(--text-primary);
  /* Used widely in ticker/chat/dashboard; must track theme (not a dark hex). */
  --text-default: var(--text-primary);
  --muted:    var(--text-muted);
  --border:   var(--border-default);
  --warn:     var(--warning);
  --crit:     var(--danger);
  --accent-2: var(--success);

  /* ---------- Legacy aliases (Phase 2, 2026-09-12) ----------
     These names are referenced by var() in sheets written against older token
     vocabularies. Until now none of them was defined anywhere, so every one
     silently rendered from its inline fallback — outside the theme system.
     The most visible case: price colour. `var(--positive, #2ea043)` painted
     the dark theme's green in light mode, while tokens.css defined the correct
     --price-up: #1a7f37 and nothing used it.

     Defined as aliases rather than literals so they follow the theme.
     Sheets should migrate to the canonical names; these keep the old ones
     honest in the meantime. */
  --positive:        var(--price-up);
  --negative:        var(--price-down);
  --clr-up:          var(--price-up);
  --clr-dn:          var(--price-down);

  --fg:              var(--text-primary);
  --fg-muted:        var(--text-muted);
  --text-tertiary:   var(--text-muted);

  --surface:         var(--bg-elevated);
  --surface-2:       var(--bg-elevated-2);
  --bg-elev:         var(--bg-elevated);
  --bg-elev-2:       var(--bg-elevated);
  --bg-elev-3:       var(--bg-elevated-2);
  --bg-2:            var(--bg-elevated);
  --bg-3:            var(--bg-elevated-2);
  --bg-default:      var(--bg-base);
  --bg-surface:      var(--bg-elevated);
  --bg-hover:        var(--bg-elevated-2);
  --bg-soft:         var(--bg-elevated);
  --bg-subtle:       color-mix(in srgb, var(--text-primary) 6%, transparent);
  --bg-muted:        color-mix(in srgb, var(--text-primary) 12%, transparent);

  --border-subtle:   var(--border-muted);

  --accent-success:  var(--success);
  --accent-danger:   var(--danger);
  --accent-warning:  var(--warning);
  --danger-fg:       var(--danger);
  --accent-soft:     color-mix(in srgb, var(--accent) 18%, transparent);

  --radius-md:       var(--r-md);
  --radius-lg:       var(--r-xl);

  --chat-fab-right:  var(--sp-5);
  --chat-fy-bottom:  var(--sp-4);

}

/* ==========================================================================
   Light theme overrides
   Activated via [data-theme="light"] on .app-layout, body, or html
   ========================================================================== */

[data-theme="light"] {
  --bg-base:        #fdfcfc;
  --bg-elevated:    #f5f3f1;
  --bg-elevated-2:  #ebe8e4;
  --bg-input:       #fdfcfc;
  --bg-code:        #f5f3f1;
  --bg-tooltip:     #1c1917;

  --text-primary:   #000000;
  --text-secondary: #44403b;
  --text-muted:     #736d65;  /* 4.56:1 on --bg-elevated (was #777169, 4.36) */
  --text-dim:       #736f69;  /* 4.51:1 (was #a59f97, 2.37) */
  --text-inverse:   #ffffff;

  --border-default: #e5e5e5;
  --border-muted:   #ebe8e4;
  --border-strong:  #d6d3d1;

  --accent:         #0969da;
  --accent-rgb:     9 105 218;   /* rgba(var(--accent-rgb), a) */
  --accent-hover:   #0550ae;
  --accent-active:  #0550ae;
  --accent-muted:   rgba(9, 105, 218, 0.10);

  --success:        #1a7f37;
  --success-bg:     rgba(26, 127, 55, 0.10);
  --danger:         #cf222e;
  --danger-bg:      rgba(207, 34, 46, 0.10);
  --warning:        #9a6700;
  --warning-bg:     rgba(154, 103, 0, 0.10);
  --info:           #0969da;
  --info-bg:        rgba(9, 105, 218, 0.08);

  --price-up:       #1a7f37;
  --price-down:     #cf222e;

  --clr-purple:     #5472a8;
  --clr-orange:     #bc4c00;
  --clr-brown:      #9a6700;

  --overlay-fill:   color-mix(in srgb, #ffffff 90%, transparent);
  --overlay-shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.18),
                    0 0 0 1px rgba(0, 0, 0, 0.06);

  --shadow-sm:  rgba(0, 0, 0, 0.06) 0 0 0 0.5px;
  --shadow-md:  rgba(0, 0, 0, 0.06) 0 0 0 0.5px, rgba(0, 0, 0, 0.04) 0 1px 2px;
  --shadow-lg:  rgba(0, 0, 0, 0.06) 0 0 0 0.5px, rgba(0, 0, 0, 0.05) 0 2px 8px;
  --shadow-xl:  rgba(0, 0, 0, 0.08) 0 0 0 0.5px, rgba(0, 0, 0, 0.08) 0 8px 24px;
  --overlay:    rgba(0, 0, 0, 0.35);

  /* Glass (light) — paper frost, unused when quiet.css is last */
  --glass-bg:           rgba(253, 252, 252, 0.72);
  --glass-bg-strong:    rgba(253, 252, 252, 0.88);
  --glass-bg-soft:      rgba(253, 252, 252, 0.50);
  --glass-bg-input:     rgba(253, 252, 252, 0.86);
  --hairline:           0.5px;
  --glass-border:       rgba(0, 0, 0, 0.10);
  --glass-border-hi:    rgba(0, 0, 0, 0.14);
  --glass-border-lo:    rgba(0, 0, 0, 0.06);
  --glass-highlight:    none;
  --glass-highlight-sm: none;
  --glass-shadow:       0 1px 3px rgba(31, 35, 40, 0.06);
  --glass-shadow-sm:    none;
  --glass-shadow-lg:    0 4px 14px rgba(31, 35, 40, 0.08);

  /* Material tiers (light) */
  --lg-fill:            rgba(255, 255, 255, 0.62);
  --lg-fill-strong:     rgba(255, 255, 255, 0.78);
  --lg-fill-soft:       rgba(255, 255, 255, 0.48);
  --lg-fill-chip:       rgba(255, 255, 255, 0.58);
  --lg-edge:            rgba(31, 35, 40, 0.12);
  --lg-edge-hi:         rgba(31, 35, 40, 0.18);
  --lg-edge-lo:         rgba(31, 35, 40, 0.08);
  --lg-shadow:          0 8px 28px -12px rgba(31, 35, 40, 0.12);
  --glass-plate:        rgba(255, 255, 255, 0.94);
  --glass-plate-edge:   rgba(31, 35, 40, 0.14);
  --glass-plate-filter: blur(28px) saturate(1.25);
  --glass-plate-shadow: 0 16px 40px -12px rgba(31, 35, 40, 0.18),
                        0 6px 16px -6px rgba(31, 35, 40, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --chrome-fill:        color-mix(in srgb, #fdfcfc 94%, transparent);
  --chrome-fill-solid:  #fdfcfc;
  --chrome-edge:        rgba(0, 0, 0, 0.10);
  --chrome-filter:      blur(18px) saturate(1.2);
  --chrome-shadow:      0 10px 28px rgba(31, 35, 40, 0.12);

  --ambient-base:       #fdfcfc;
  --ambient-spot-1:     transparent;
  --ambient-spot-2:     transparent;
  --ambient-spot-3:     transparent;

  /* Pathway C Studio / AI (light) — same paper as the app. */
  --bg-studio:            #f5f3f1;
  --bg-studio-elevated:   #fdfcfc;
  --border-soft:          rgba(0, 0, 0, 0.06);
  --border-soft-strong:   rgba(0, 0, 0, 0.10);
  --shadow-studio:        rgba(0, 0, 0, 0.06) 0 0 0 0.5px;

  /* Pathway D Stage D3 handoff (light) */
  --bg-auth:       var(--bg-studio);
  --bg-auth-card:  var(--bg-studio-elevated);
  --border-auth:   var(--border-soft);
  --shadow-auth:   var(--shadow-studio);

  --accent-ai:         #218bff;
  --accent-ai-hover:   #0969da;
  --accent-ai-2:       #0969da;
  --accent-ai-muted:   rgba(9, 105, 218, 0.10);
  --accent-ai-muted-2: rgba(33, 139, 255, 0.08);
  --gradient-ai:       linear-gradient(135deg, #0969da 0%, #218bff 100%);
  --gradient-ai-soft:  linear-gradient(135deg,
                         rgba(9, 105, 218, 0.08) 0%,
                         rgba(33, 139, 255, 0.06) 100%);
}

/* ==========================================================================
   Blue steel — cool navy terminal (Yahoo AlphaSpace "Blue Steel")
   Activated via [data-theme="steel"] on html / body / .app-layout
   Distinct from warm charcoal dark and paper light.
   ========================================================================== */

[data-theme="steel"] {
  --bg-base:        #141b26;
  --bg-elevated:    #1c2533;
  --bg-elevated-2:  #253040;
  --bg-input:       #181f2c;
  --bg-code:        #181f2c;
  --bg-tooltip:     #253040;

  --text-primary:   #e8eef6;
  --text-secondary: #c5cedb;
  --text-muted:     #8b98ad;
  --text-dim:       #828c9b;  /* 4.53:1 on --bg-elevated (was #6b7789, 3.40) */
  --text-inverse:   #141b26;

  --border-default: #2c3a4c;
  --border-muted:   #222c3a;
  --border-strong:  #3d4d62;

  --accent:         #5b9fd4;
  --accent-rgb:     91 159 212;   /* rgba(var(--accent-rgb), a) */
  --accent-hover:   #7ab0de;
  --accent-active:  #4a8cc4;
  --accent-muted:   rgba(91, 159, 212, 0.16);

  --success:        #3fb950;
  --success-bg:     rgba(63, 185, 80, 0.15);
  --danger:         #f8544d;  /* moves with --price-down (4.51:1) */
  --danger-bg:      rgba(248, 84, 77, 0.15);
  --warning:        #d29922;
  --warning-bg:     rgba(210, 153, 34, 0.15);
  --info:           #5b9fd4;
  --info-bg:        rgba(91, 159, 212, 0.12);

  --price-up:       #3fb950;
  --price-down:     #f8544d;  /* 4.51:1 on --bg-elevated (was #f85149, 4.43) */

  --clr-purple:     #7a9bc4;
  --clr-orange:     #f78166;
  --clr-brown:      #c4a574;

  --overlay-fill:   color-mix(in srgb, #1c2533 88%, transparent);
  --overlay-shadow: 0 12px 36px -18px rgba(8, 12, 20, 0.65),
                    0 0 0 1px color-mix(in srgb, #e8eef6 8%, transparent);

  --shadow-sm:  rgba(8, 12, 20, 0.18) 0 0 0 0.5px;
  --shadow-md:  rgba(8, 12, 20, 0.18) 0 0 0 0.5px, rgba(8, 12, 20, 0.16) 0 1px 2px;
  --shadow-lg:  rgba(8, 12, 20, 0.22) 0 0 0 0.5px, rgba(8, 12, 20, 0.20) 0 2px 8px;
  --shadow-xl:  rgba(8, 12, 20, 0.28) 0 0 0 0.5px, rgba(8, 12, 20, 0.28) 0 8px 24px;
  --overlay:    rgba(8, 12, 20, 0.58);

  --glass-bg:           rgba(232, 238, 246, 0.06);
  --glass-bg-strong:    rgba(232, 238, 246, 0.09);
  --glass-bg-soft:      rgba(232, 238, 246, 0.035);
  --glass-bg-input:     rgba(232, 238, 246, 0.07);
  --glass-border:       rgba(175, 194, 218, 0.14);
  --glass-border-hi:    rgba(175, 194, 218, 0.22);
  --glass-border-lo:    rgba(175, 194, 218, 0.08);
  --glass-shadow:       0 1px 3px rgba(8, 12, 20, 0.28);
  --glass-shadow-lg:    0 4px 14px rgba(8, 12, 20, 0.32);

  --lg-fill:            rgba(37, 48, 64, 0.52);
  --lg-fill-strong:     rgba(37, 48, 64, 0.72);
  --lg-fill-soft:       rgba(37, 48, 64, 0.42);
  --lg-fill-chip:       rgba(37, 48, 64, 0.36);
  --lg-edge:            rgba(175, 194, 218, 0.22);
  --lg-edge-hi:         rgba(200, 216, 236, 0.32);
  --lg-edge-lo:         rgba(170, 188, 214, 0.11);
  --lg-shadow:          0 8px 28px -12px rgba(8, 12, 20, 0.50);
  --glass-plate:        rgba(20, 27, 38, 0.92);
  --glass-plate-edge:   rgba(175, 194, 218, 0.26);
  --glass-plate-shadow: 0 16px 40px -12px rgba(8, 12, 20, 0.55),
                        0 6px 16px -6px rgba(8, 12, 20, 0.35),
                        inset 0 1px 0 rgba(232, 238, 246, 0.08);
  --chrome-fill:        color-mix(in srgb, #1c2533 94%, transparent);
  --chrome-fill-solid:  #1c2533;
  --chrome-edge:        rgba(175, 194, 218, 0.18);
  --chrome-shadow:      0 10px 28px rgba(8, 12, 20, 0.38);

  --ambient-base:       #141b26;
  --ambient-spot-1:     transparent;
  --ambient-spot-2:     transparent;
  --ambient-spot-3:     transparent;

  --bg-studio:            #1c2533;
  --bg-studio-elevated:   #253040;
  --border-soft:          rgba(232, 238, 246, 0.10);
  --border-soft-strong:   rgba(232, 238, 246, 0.16);
  --shadow-studio:        rgba(8, 12, 20, 0.18) 0 0 0 0.5px;

  --bg-auth:       var(--bg-studio);
  --bg-auth-card:  var(--bg-studio-elevated);
  --border-auth:   var(--border-soft);
  --shadow-auth:   var(--shadow-studio);

  --accent-ai:         #5b9fd4;
  --accent-ai-hover:   #7ab0de;
  --accent-ai-2:       #4a8cc4;
  --accent-ai-muted:   rgba(91, 159, 212, 0.14);
  --accent-ai-muted-2: rgba(91, 159, 212, 0.10);
  --gradient-ai:       linear-gradient(135deg, #4a8cc4 0%, #7ab0de 100%);
  --gradient-ai-soft:  linear-gradient(135deg,
                         rgba(91, 159, 212, 0.12) 0%,
                         rgba(91, 159, 212, 0.08) 100%);
}

html:lang(zh-Hant) {
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

/* ==========================================================================
   Global resets and base styles
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: var(--lh-normal);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--tr-slow), color var(--tr-slow);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: none; }

code, pre, kbd, samp { font-family: var(--font-mono); }

/* Headings — Instrument Sans. Weight 400+ (no 300 cut). */
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: var(--lh-tight); margin: 0 0 var(--sp-3); color: var(--text-primary); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-normal); letter-spacing: -0.02em; line-height: var(--lh-tight); margin: 0 0 var(--sp-3); color: var(--text-primary); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); color: var(--text-primary); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); color: var(--text-primary); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-tight); margin: 0 0 var(--sp-1); color: var(--text-primary); }

/* Utility classes */
.dim         { color: var(--text-muted); font-size: var(--fs-sm); }
.muted       { color: var(--text-muted); }
.text-up,
.positive    { color: var(--price-up); }
.text-down,
.negative    { color: var(--price-down); }

/* ==========================================================================
   Unified button system
   ========================================================================== */

/* Buttons — Batch 1 减法: solid fills, 1px border, press scale. No glow/shimmer. */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-press, 120ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    background var(--dur-ui, 200ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    border-color var(--dur-ui, 200ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    color var(--dur-ui, 200ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
  -webkit-tap-highlight-color: transparent;
}
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-ghost::before,
.btn-danger::before { display: none; }

/* ---- Primary: ink fill (paper CTA). Blue lives on chips/handles/alerts. ---- */
.btn-primary {
  background: var(--text-primary);
  color: var(--bg-base);
  border-color: var(--border-default);
  box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:visited {
  background: var(--text-secondary);
  border-color: var(--border-default);
  color: var(--bg-base);
  text-decoration: none;
  transform: none;
  box-shadow: none;
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-danger:active { transform: scale(0.98); }
.btn-primary:active { box-shadow: none; }
a.btn-primary { color: var(--bg-base); }

/* ---- Secondary: hairline outline ---- */
.btn-secondary {
  background: var(--bg-base);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn-secondary:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-default);
  transform: none;
  box-shadow: none;
  text-decoration: none;
}

/* ---- Ghost / default .btn: no plate (toolbar icons) ---- */
.btn,
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn:hover,
.btn-ghost:hover,
a.btn-ghost:hover,
a.btn-ghost:focus {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: transparent;
  transform: none;
  box-shadow: none;
  text-decoration: none;
}
.btn-secondary:active, .btn:active { transform: scale(0.98); }

.btn-ghost:active { transform: scale(0.98); }

/* ---- Danger ---- */
.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
  border-color: var(--danger);
  box-shadow: none;
}
.btn-danger:hover,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:visited {
  color: var(--text-inverse);
  text-decoration: none;
  transform: none;
  box-shadow: none;
  filter: none;
  background: var(--danger);
}
.btn-danger:active { transform: scale(0.98); }
a.btn-danger { color: var(--text-inverse); }

/* ---- Focus ring (accessibility) — ARQ hairline ---- */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.btn.lg, .btn-primary.lg, .btn-ghost.lg, .btn-secondary.lg {
  padding: 9px 18px;
  font-size: var(--fs-md);
  border-radius: 999px;
}
.btn.sm, .btn-primary.sm, .btn-ghost.sm, .btn-secondary.sm {
  padding: 4px 10px;
  font-size: var(--fs-xs);
  border-radius: 999px;
}

/* Page-local buttons share the same kinematics / radius (Batch 2). */
.im-btn-primary,
.im-btn-secondary,
.im-btn-danger,
.pf-btn,
.cal-btn,
.dd-btn,
.wl-row-btn,
.ask-oceanus-btn,
.an-btn,
.mem-btn {
  font-family: var(--font-sans);
  border-radius: 999px;
  box-shadow: none;
  filter: none;
  transition:
    transform var(--dur-press) var(--ease-out),
    background var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out);
}
.im-btn-primary:active,
.im-btn-secondary:active,
.im-btn-danger:active,
.pf-btn:active,
.cal-btn:active,
.dd-btn:active,
.wl-row-btn:active,
.ask-oceanus-btn:active,
.an-btn:active,
.mem-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   Unified form inputs
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  outline: none;
  box-shadow: none;
  transition: border-color var(--dur-ui) var(--ease-out);
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--border-strong);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: 0 0 0 1000px var(--bg-input) inset;
  transition: background-color 99999s ease-out;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-dim);
}

/* Appearance cycle: show the glyph of the CURRENT mode (sun / moon / steel). */
.theme-ico {
  width: 18px;
  height: 18px;
  display: none;
  flex-shrink: 0;
}
html[data-theme="light"] .theme-ico--sun,
html[data-theme="dark"] .theme-ico--moon,
html:not([data-theme]) .theme-ico--moon,
html[data-theme="steel"] .theme-ico--steel {
  display: block;
}
html[data-oc-theme] .theme-ico { display: none; }
html[data-oc-theme] .theme-ico--custom { display: block; }

.theme-pop {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1100;
}
.theme-pop-menu {
  min-width: 220px;
  max-height: min(70vh, 360px);
  overflow-y: auto;
}
.theme-pop-swatch {
  display: inline-flex;
  gap: 2px;
  width: 22px;
  justify-content: center;
}
.theme-pop-swatch span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  background: var(--bg-elevated-2);
}
.theme-pop-sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--border-muted);
  list-style: none;
  padding: 0;
}
.theme-pop-manage {
  display: flex;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  margin-top: 2px;
  grid-template-columns: none;
}
.theme-pop-manage:hover { color: var(--text-primary); }

/* ==========================================================================
   Unified card / panel
   ========================================================================== */

.card,
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

/* ==========================================================================
   Unified table
   ========================================================================== */

table.data,
table.kv,
table.rel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

table.data th, table.data td,
table.kv th, table.kv td,
table.rel th, table.rel td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-muted);
  text-align: left;
  vertical-align: top;
}

table.data th, table.rel th {
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.kv th {
  color: var(--text-muted);
  width: 30%;
  font-weight: var(--fw-normal);
}

/* ==========================================================================
   Chips, badges, tags
   ========================================================================== */

.chip {
  display: inline-block;
  padding: 2px var(--sp-2);
  margin: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: var(--fs-sm);
}

.crit, .badge {
  font-size: var(--fs-xs);
  padding: 2px var(--sp-1);
  border-radius: var(--r-sm);
  color: var(--text-inverse);
  background: var(--text-muted);
}
.crit.critical { background: var(--danger); }
.crit.high     { background: var(--warning); }
.crit.medium   { background: var(--info); }
.crit.low      { background: var(--clr-purple); }

/* Grabbers — blue so they read as interactive, not hairline chrome. */
.oc-sheet__handle,
.an-modal__handle,
.an-coverage__sheet-handle {
  background: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
}

/* ==========================================================================
   Language popover (globe + flag pill, dropdown menu)
   Markup contract:
     <div class="lang-pop" data-lang-pop>
       <button type="button" class="lang-pop-btn" aria-haspopup="listbox" aria-expanded="false">
         <svg class="lang-pop-globe">…</svg>
         <span class="lang-pop-flag">🇺🇸</span>
         <span class="lang-pop-code">EN</span>
         <svg class="lang-pop-caret">…</svg>
       </button>
       <ul class="lang-pop-menu" role="listbox" hidden>
         <li class="lang-pop-item is-active" data-lang="en">
           <span class="lp-flag">🇺🇸</span>
           <span class="lp-name">English</span>
           <span class="lp-sub">English</span>
           <span class="lp-check">✓</span>
         </li>
         <li class="lang-pop-item" data-lang="zh">…</li>
       </ul>
     </div>
   ========================================================================== */

.lang-pop {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  /* Make sure the popover sits above hero / main / animated bg layers,
     even when an ancestor (e.g. .landing-head) creates a low-index
     stacking context. */
  z-index: 1100;
}
/* Language — icon-only circle (flag), same minimal path as mobile tray */
.lang-pop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}
.lang-pop-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated-2);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}
.lang-pop-btn:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--text-primary) 45%, transparent);
  outline-offset: 2px;
  border-color: var(--border-strong);
  box-shadow: none;
}
.lang-pop-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--bg-elevated-2);
}

/* Globe / code / caret hidden — flag-only chip */
.lang-pop-globe,
.lang-pop-code,
.lang-pop-caret {
  display: none !important;
}

.lang-pop-flag {
  font-size: 16px;
  line-height: 1;
  filter: none;
  transform: none;
}

/* ---- Menu ---- */
.lang-pop-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  z-index: 2000;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lang-pop-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lang-pop-menu[hidden] { display: none; }

.lang-pop-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  transition: background var(--dur-ui, 200ms) var(--ease-out, ease), color var(--dur-ui, 200ms) var(--ease-out, ease);
}
.lang-pop-item:hover,
.lang-pop-item:focus-visible {
  /* neutral hover so the menu does NOT look like a theme/color-scheme
     toggle. The check-mark + bold weight are the active indicators. */
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  outline: none;
}
.lang-pop-item.is-active {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.lang-pop-item.is-active .lp-name { color: var(--text-primary); }
.lang-pop-item .lp-flag {
  font-size: 1.15em;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, #000 25%, transparent));
}
.lang-pop-item .lp-name {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lang-pop-item .lp-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 1px;
  font-weight: 400;
}
.lang-pop-item .lp-name-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lang-pop-item .lp-check {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-md);
  opacity: 0;
  transition: opacity var(--dur-ui, 200ms) var(--ease-out, ease);
}
.lang-pop-item.is-active .lp-check { opacity: 1; }

/* ---- Floating variant (landing / login / signup top-right) ---- */
.lang-pop-floating {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1000;
}

/* ---- Narrow ---- */
@media (max-width: 768px) {
  .lang-pop-menu { right: 0; min-width: 180px; }
}

/* ==========================================================================
   Mobile breakpoint (consistent: 768px)
   ========================================================================== */

@media (max-width: 820px) {
  :root {
    --topbar-height: 44px;
  }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
}

/* --------------------------------------------------------------------------
   Phone material overrides (iOS parity) — higher fill, lower blur
   Desktop keeps the thinner global / LG recipes above.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  :root {
    --glass-blur: 12px;
    --glass-blur-strong: 16px;
    --glass-blur-soft: 8px;
    --lg-blur: 14px;
    --lg-blur-strong: 18px;
    --lg-blur-soft: 10px;
    --lg-fill: rgba(48, 58, 74, 0.78);
    --lg-fill-strong: rgba(48, 58, 74, 0.88);
    --lg-fill-soft: rgba(48, 58, 74, 0.68);
    --chrome-fill: color-mix(in srgb, var(--bg-elevated, #161b22) 96%, transparent);
    --chrome-filter: blur(16px) saturate(1.2);
    --glass-plate-filter: blur(20px) saturate(1.25);
  }
  [data-theme="light"] {
    --lg-fill: rgba(255, 255, 255, 0.88);
    --lg-fill-strong: rgba(255, 255, 255, 0.94);
    --lg-fill-soft: rgba(255, 255, 255, 0.78);
    --chrome-fill: color-mix(in srgb, #ffffff 96%, transparent);
  }
  [data-theme="steel"] {
    --lg-fill: rgba(37, 48, 64, 0.82);
    --lg-fill-strong: rgba(37, 48, 64, 0.90);
    --lg-fill-soft: rgba(37, 48, 64, 0.70);
    --chrome-fill: color-mix(in srgb, #1c2533 96%, transparent);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --lg-fill: var(--bg-elevated);
    --lg-fill-strong: var(--bg-elevated);
    --glass-plate: var(--bg-elevated);
    --chrome-fill: var(--bg-elevated);
    --lg-filter: none;
    --lg-filter-strong: none;
    --glass-plate-filter: none;
    --chrome-filter: none;
  }
}

.u-hidden { display: none !important; }