:root {
            color-scheme: dark;
            --bg: #0b1220;
            --bg-card: rgba(255, 255, 255, 0.025);
            --border: rgba(255, 255, 255, 0.07);
            --border-strong: rgba(255, 255, 255, 0.14);
            --text: #e6e9f2;
            --text-dim: #8a95ad;
            --text-muted: #76819b; /* ≥4.5:1 on --bg — this token is used at 10-11.5px, so it must pass AA for small text */
            --accent: #f59034;
            --accent-soft: rgba(245, 144, 52, 0.16);
            --good: #4ade80;
            --warn: #fbbf24;
            --bad: #f87171;
            --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Menlo", monospace;

            /* Live (interactive) artifact surface. Models style their modules for
               a LIGHT page (dark text on pale panels), so the inline module gets
               its own light "paper" surface rather than the dark chat theme — set
               these to retheme it centrally (a dark value risks unreadable
               model-authored content). */
            --cm-live-bg: #f6f7f9;
            --cm-live-fg: #1a2230;

            /* ── Scales (added in the UI consolidation pass) ──────────────
               Shared design tokens so components stop hardcoding values.
               Spacing is a 4px base; radius/elevation/z-index are named rungs.
               The .luma-* component library (css/luma-components.css) is built
               entirely on these. */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-pill: 999px;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
            --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.35);
            --z-base: 1;
            --z-dropdown: 100;
            --z-overlay: 1000;
            --z-modal: 1100;
            --z-toast: 1200;
            /* Component surface aliases */
            --surface-input: rgba(0, 0, 0, 0.25);
            --surface-hover: rgba(255, 255, 255, 0.04);
            /* Sunken surface for inset/scrollable regions — sits visibly below
               the card surface so a scroll area reads as a contained box. */
            --surface-sunken: rgba(0, 0, 0, 0.22);
            --surface-pop: #141b2c;        /* opaque popover/menu/modal surface */
            --on-accent: #0b0b10;          /* text/icon color on a flat --accent fill */
            --on-accent-warm: #1a1206;     /* ink on the accent GRADIENT (chat's primary) */
            --accent-deep: #e07d22;        /* dark end-stop of the accent gradient */
            --accent-grad: linear-gradient(180deg, var(--accent), var(--accent-deep));
            --code-bg: #161a23;            /* fenced code-block surface */
            --radius-xl: 14px;             /* modal/dialog shells */
        }
        * { box-sizing: border-box; }

        /* Native <select> popups inherit the control's background, and our
           selects use a translucent dark fill (e.g. rgba(11,18,32,0.55)) to
           sit on the card surfaces. Composited, that translucent color makes
           the OPEN option list render as a washed-out, OS-default grey-blue
           that looks foreign to the rest of the UI. Pin every option list to
           an opaque theme surface (matching the .cm-model-pop popover) so the
           dropdown contents read as part of the dark design. */
        select option,
        select optgroup {
            background-color: #141b2c;
            color: var(--text);
        }
        select option:checked,
        select option:hover {
            background-color: var(--accent-soft);
            color: var(--text);
        }

        /* Match the LumaBrowser settings-modal scrollbar treatment —
           subtle 15%-opacity orange thumb on a transparent track. The
           main window uses a bolder var(--accent) bar, but that style
           looks loud here next to the dim card surfaces. The modal's
           style is what the LLM tab should mirror because the LLM tab
           is similarly a content view rather than the app chrome.
           Source: index.html lines ~3460-3464. */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background-color: rgba(245, 144, 52, 0.15);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(245, 144, 52, 0.30);
        }
        ::-webkit-scrollbar-corner {
            background: transparent;
        }
        /* Firefox / standards-track fallback — same subdued treatment. */
        html { scrollbar-width: thin; scrollbar-color: rgba(245, 144, 52, 0.15) transparent; }

        html, body {
            margin: 0;
            padding: 0;
            min-height: 100%;
            background: var(--bg);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
            font-size: 13px;
            line-height: 1.5;
        }
        body { padding: 28px 32px 56px; }