/* TYPE — the same self-hosted Switzer family as the platform website. UI, display, and
       tabular figures all use one face; monospace is reserved for source/code only. */
    @font-face {
      font-family: 'Switzer'; src: url('/assets/Switzer-Regular.aefa3d21af6a.woff2') format('woff2');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Switzer'; src: url('/assets/Switzer-Medium.2ea341e35c0d.woff2') format('woff2');
      font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Switzer'; src: url('/assets/Switzer-Semibold.04084ce10f3b.woff2') format('woff2');
      font-weight: 600; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Switzer'; src: url('/assets/Switzer-Bold.5cb009dd2131.woff2') format('woff2');
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      src: url('/assets/JetBrainsMono-Variable.18be452724bf.woff2') format('woff2');
      font-weight: 100 900; font-style: normal; font-display: swap;
    }
    /* ═══ Taking Prophets · Indicator Lab — design system (hi-fi handoff, Jul 2026) ═══ */
    :root {
      color-scheme: dark;
      /* THE accent — one saturated blue, the platform's only chrome-level colour. Channel
         triplets because ~40 call sites here read them through rgb(var(--blue) / a). */
      --accent: 37 99 235;       /* #2563eb — matches the Backtester and the website verbatim */
      --accent-hi: 59 130 246;   /* #3b82f6 */
      --accent-ink: #ffffff;     /* label ON the accent — it was #221803, a brown that only made sense on gold */
      /* CAUTION ONLY. This gold used to be the Lab's default accent; it now speaks when
         something needs attention and nowhere else. Deliberately NOT wired into --blue/--gold. */
      --warn: 234 182 60;        /* #eab63c */
      --warn-hi: 247 207 95;     /* #f7cf5f */
      --warn-ink: #221803;
      /* Back-compat aliases. Both families were painting gold and both were being used as the
         accent, so both resolve to the accent; genuine caution sites read --warn by hand. */
      --blue: var(--accent);
      --blue-hi: var(--accent-hi);
      --gold: var(--accent);
      --gold-hi: var(--accent-hi);
      --bg: #09090b;
      --bg-2: #17171b;
      --pane: #0c0c0f;
      --raised: #101013;
      --row-hover: #0d0d10;
      --toolbar-bg: rgba(9,9,11,.78);   /* the chart toolbar AND its sticky action mask */
      --surface: rgba(255,255,255,.05);
      --surface-2: rgba(255,255,255,.09);
      --solid: #101013;
      /* v3 (#350): the legacy gradient names now resolve to flat fills — no gradient washes on cards, bubbles
         or buttons. The names stay so every rule that reads them follows. */
      --card-grad: #101013;
      --card-grad-2: #101013;
      --bubble-grad: #1A1A1F;
      --accent-grad: #2563eb;
      --gold-grad: var(--accent-grad);   /* alias — see --gold above */
      --line: #1f1f24;
      --line-2: #35353c;
      --text: #efeeea;
      --text-2: #c0bdb6;
      --body-ai: #c0bdb6;
      --sec: #c0bdb6;
      --muted: #a09d96;
      --faint: #7c7a74;
      --ghost: #55555e;
      --accent-text: #bcd4ff;
      --ok: #35c77c;             /* bull / positive money */
      --ok-text: #6ee7a0;
      --danger: #f0544a;
      --diff-red: #f28b8b;
      /* v3 radii and shadows (#350): --r and --r-lg (panels, sheets, dialogs) are the 10px card radius, --r-sm
         (buttons and controls) the 6px control radius. Buttons carry no glow; --sh-modal and --sh-card are the one
         float shadow, for floating objects only. */
      --r: 10px; --r-lg: 10px; --r-sm: 6px; --r-pill: 999px;
      --sh-primary: none;
      --sh-send: none;
      --sh-modal: var(--j-float-shadow);
      --sh-card: var(--j-float-shadow);
      --ease: var(--m-ease, cubic-bezier(.16,1,.3,1)); /* the platform's one curve (§7) */
      --spring: var(--m-ease, cubic-bezier(.16,1,.3,1)); /* nothing bounces: the same curve */
      --font: 'Switzer', -apple-system, 'Segoe UI', sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
      /* Drawing-tool context menu (.btctx, injected by the shared draw-layer). The engine falls back to the
         Proving Ground's black terminal skin; the Lab overrides to neutral-glass here. */
      --btctx-bg: #101013;
      --btctx-border: rgba(255,255,255, .16);
      --btctx-input-bg: #141417;
      --btctx-input-border: rgba(255,255,255, .18);
      /* TP1 v2 (apps/website/DESIGN_SYSTEM.md, apps/replay-lab/src/tp1-scope.css): the design-system values this
         palette has no name for. The rest of TP1 already lives above under the Lab's names: --bg, --pane,
         --raised, --line (divider), --line-2 (border), --text, --text-2, --muted, --ghost (nonlabel), --ok, --danger. */
      --j-chip: #1A1A1F;
      --j-hover-2: #141418;
      --j-chip-hover: #202027;
      --j-faint: #6F6D68;
      --j-accent-hover: #1D4FD8;
      /* v3 (DESIGN_SYSTEM §2, #349): a raised object's 1px INSET edge, the one hero card, floating objects, radii,
         page top. The Lab launcher and Inside the Lab prompts build on these. */
      --j-edge: #26262B; --j-edge-2: #1C1C20; --j-hero-top: #121214; --j-hero-bottom: #0D0D0F;
      --j-gold-hair: rgba(226,190,105,.38); --j-float-shadow: 0 10px 24px rgba(0,0,0,.45);
      --r-seg: 6px; --r-control: 6px; --r-tile: 8px; --r-input: 8px; --r-card: 10px;
      --page-top: 20px; --page-head-h: 48px;
    }
    @media (max-width: 767px) { :root { --page-top: 16px; } }
    * { box-sizing: border-box; }
    /* the `hidden` attribute must always win — otherwise a class that sets `display`
       (e.g. .toast{display:flex}) defeats it and elements never hide. */
    [hidden] { display: none !important; }
    html, body { height: 100%; margin: 0; }
    @supports (height: 100dvh) { html, body { height: 100dvh; } }
    body {
      font: 400 14px/1.55 var(--font); color: var(--text);
      background: radial-gradient(1100px 500px at 18% -10%, rgba(37, 99, 235,.18), transparent 60%), var(--bg);
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden;
    }
    ::selection { background: rgba(37, 99, 235,.35); }
    a { color: #3b82f6; text-decoration: none; } a:hover { color: #bcd4ff; }

    /* ── scrollbars ── */
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-thumb { background: #1e1e22; border-radius: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    * { scrollbar-width: thin; scrollbar-color: #1e1e22 transparent; }

    /* ── icons (lucide-style strokes) ── */
    .ic { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .ic-fill { fill: currentColor; stroke: none; width: 17px; height: 17px; }

    /* ── buttons ── */
    button { font: inherit; cursor: pointer; border: 0; color: inherit; -webkit-tap-highlight-color: transparent; }
    .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--accent-grad); color: #ffffff; font-weight: 600; font-size: 13px;
      border-radius: var(--r-control); padding: 10px 18px; letter-spacing: -.005em;
      border: 0;
      box-shadow: none;
      transition: background .15s var(--ease); }
    /* v3 primary (§6.8): flat accent, hover and press step the fill. No glow, no press scale. */
    .btn:hover { background: var(--j-accent-hover); }
    .btn:active { background: #1A46C0; }
    .btn:disabled { opacity: .5; filter: grayscale(.35); cursor: default; box-shadow: none; }
    /* ghost actions — 32px control height per spec */
    /* Default TRANSPARENT — and stated at a specificity that survives
       product-language.css, which build-static appends AFTER this file and
       whose .tp-button-secondary re-applies var(--tp-surface) at equal
       specificity. Two previous fixes landed in the losing stylesheet. Three
       adjacent filled buttons with an 8px gap read as one pale slab behind
       Inspect/Code/Publish; the border is the affordance, the fill is hover. */
    .gbtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
      background: transparent; color: var(--text-2); border: 0; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--j-edge);
      font-size: 12.5px; font-weight: 550; white-space: nowrap; flex: none;
      transition: color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
    /* Was `color:#fff; background:rgba(255,255,255,.11)` — white-on-light, i.e.
       the label vanished on hover in light mode. */
    .gbtn:hover { color: var(--text); background: var(--raised); }
    /* Wins over the later stylesheet without !important: two classes beat one. */
    .ctoolbar .gbtn.tp-button-secondary { background: transparent; box-shadow: inset 0 0 0 1px var(--j-edge); }
    .ctoolbar .gbtn.tp-button-secondary:hover:not(:disabled) { background: var(--raised); }
    /* Selected is a fill and a colour, the same box (§6.9 selectable) — not a blue ring. */
    .gbtn.active { color: var(--text); background: var(--j-chip); }
    .gbtn .ic { color: var(--ghost, #7f838c); }
    .gbtn:hover .ic, .gbtn.active .ic { color: currentColor; }
    .iconbtn { width: 32px; padding: 0; justify-content: center; }

    /* ── inputs ── */
    /* v3 input (§6.10): radius 8 and the edge colour. The bare-element base keeps a constant 1px border in
       --j-edge rather than an inset shadow: every class rule that sets `border: 0` (the launcher composer, search
       fields) would otherwise inherit a ring. Class-level inputs draw the inset edge themselves. Only the colour
       changes on focus, so nothing moves. */
    input, textarea, select { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--j-edge);
      border-radius: var(--r-input); padding: 9px 12px; outline: none; transition: border-color .15s var(--ease); }
    input::placeholder, textarea::placeholder { color: var(--faint); }
    input:focus, textarea:focus, select:focus { border-color: rgb(var(--accent)); }

    /* ── brand: white tile + rotated diamond ── */
    .logo-tile { width: 30px; height: 30px; flex: none; border-radius: 9px; background: linear-gradient(180deg, #ffffff, #cdd7e4);
      display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
    .logo-tile img { width: 22px; height: 22px; object-fit: contain; display: block; }
    .wordmark { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
    .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
    .ver-chip { font: 600 12px var(--font); font-variant-numeric: tabular-nums; color: var(--j-faint); background: none; border: 0; padding: 0; flex: none; }

    /* ══════════ LOGIN GATE ══════════ */
    .gate { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; }
    .gate-card { width: 100%; max-width: 420px; position: relative; padding: 40px 36px 34px; text-align: left;
      background: var(--card-grad); border: 1px solid var(--line-2); border-radius: var(--r-lg);
      box-shadow: var(--sh-modal); animation: rise .5s var(--spring) both; }
    .gate-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
    .gate-card h1 { margin: 14px 0 10px; font-size: 31px; font-weight: 700; letter-spacing: -.02em; line-height: 1.08;
      color: var(--text); }
    .gate-card p { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }
    .gate-card .btn { width: 100%; padding: 13px; font-size: 14px; border-radius: var(--r-control); }
    .discord-btn { background: var(--accent-grad); color: #ffffff; border-color: rgba(37, 99, 235,.4); box-shadow: var(--sh-primary); }
    /* The other sign-in choices beside Discord (#1211): quieter, the same size. Google's G keeps its four colours, from
       /sign-in-google.svg rather than inline, since the HTML shell has an 8 KB gzip budget (scripts/check-static.ts). */
    .gate-signin { display: flex; flex-direction: column; gap: 10px; }
    .gate-card .btn.gate-alt { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
    .gate-card .btn.gate-alt:hover:not(:disabled) { background: var(--row-hover); }
    .gate-card .btn.gate-alt:disabled { opacity: .6; cursor: default; }
    .gate-mark { width: 18px; height: 18px; flex: none; }
    .gate-note { margin-top: 14px; color: var(--faint); font-size: 12.5px; line-height: 1.7; }
    .gate-learn { color: var(--muted); font-weight: 600; text-decoration: none; }
    .gate-learn:hover { color: var(--text); text-decoration: underline; }
    .gate-err { min-height: 18px; margin-top: 10px; color: var(--danger); font-size: 12.5px; }
    .gate-member-only ul { margin: 0 0 22px; padding: 0 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
    .gate-member-only li + li { margin-top: 6px; }
    /* The purchase button is an <a>: pin its label colour above the theme's generic link rule
       (html[data-theme="light"] a) and the link hover tint, or it reads as disabled in light. */
    .gate-member-only a.discord-btn, .gate-member-only a.discord-btn:hover, html[data-theme="light"] .gate-member-only a.discord-btn { display: block; text-align: center; text-decoration: none; color: #ffffff; }
    .gate-switch, html[data-theme="light"] .gate-switch { display: block; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
    /* The price, the refund line, the plain fallback and the way through for a payer (member-only-page.ts). */
    .gate-card .gate-member-only .gate-member-price { margin: 0 0 12px; color: var(--text); font-size: 15px; font-weight: 600; }
    .gate-card .gate-member-only .gate-member-app { margin: 0 0 12px; }
    .gate-card .gate-member-only .gate-member-policy { margin: 10px 0 0; color: var(--faint); font-size: 12px; line-height: 1.55; }
    .gate-member-only .gate-member-policy a, html[data-theme="light"] .gate-member-only .gate-member-policy a { color: var(--muted); }
    .gate-member-only .gate-member-fallback { display: block; margin-top: 12px; font-size: 13px; text-align: center; }
    .gate-card .gate-member-only .gate-member-paid { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }
    .gate-member-only .gate-member-link, html[data-theme="light"] .gate-member-only .gate-member-link { color: var(--text); font-weight: 600; }
    .gate-member-only .gate-member-support, html[data-theme="light"] .gate-member-only .gate-member-support { color: var(--muted); }
    .gate-foot { z-index: 2; color: var(--faint); font-size: 12px; letter-spacing: .06em; text-align: center; }
    .gate-foot b { color: var(--sec); font-weight: 600; }
    .foot-legal { display: block; margin-top: 6px; color: var(--ghost); font-size: 11px; letter-spacing: .02em; }
    .foot-legal a { color: var(--faint); text-decoration: none; } .foot-legal a:hover { color: var(--text); text-decoration: underline; }

    /* ── post-checkout code landing (same card language) ── */
    .paid-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center;
      padding: 6vh 20px calc(40px + env(safe-area-inset-bottom)); overflow-y: auto; background: rgba(6,6,8,.82); }
    .paid-card { max-width: 520px; }
    .paid-card h1 { font-size: 26px; margin: 12px 0 8px; }
    .paid-state { height: 40px; display: flex; align-items: center; }
    .paid-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(37, 99, 235,.25); border-top-color: #3b82f6; animation: paidspin .8s linear infinite; }
    @keyframes paidspin { to { transform: rotate(360deg); } }
    .paid-state .ok { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); color: var(--ok-text); }
    .paid-state .ok svg { width: 20px; height: 20px; }
    .paid-dl { width: 100%; padding: 13px; font-size: 14px; margin: 4px 0 22px; border-radius: var(--r-control); }
    .paid-dl:disabled { opacity: .45; cursor: default; }
    .paid-steps { border-top: 1px solid var(--line); padding-top: 18px; }
    .paid-steps > b { font-size: 14px; letter-spacing: -.01em; }
    .paid-steps ol { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.65; display: flex; flex-direction: column; gap: 7px; }
    .paid-steps b { color: var(--text); font-weight: 600; }
    .paid-steps code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-control); padding: 1px 5px; }
    .paid-note { margin: 16px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.6; }
    .paid-back { width: 100%; margin-top: 20px; padding: 11px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); box-shadow: none; border-radius: var(--r-control); }
    .paid-back:hover { border-color: rgba(37, 99, 235,.5); filter: none; }

    /* ══════════ LAB ══════════ */
    .lab { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
    header { position: relative; z-index: 20; height: 56px; flex: none; display: flex; align-items: center; gap: 14px;
      padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
      border-bottom: 1px solid var(--line); background: rgba(9,9,11,.85); backdrop-filter: blur(12px); }
    .hbrand { display: flex; align-items: center; gap: 11px; }
    .hsep { width: 1px; height: 14px; background: rgba(255,255,255,.22); }
    .hmuted { color: var(--muted); font-weight: 500; font-size: 13px; }
    .hspacer { flex: 1; }
    .hbrand-link { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; border-radius: 9px; }
    .hbrand-link:hover .wordmark { color: var(--gold-hi); }
    /* Platform switcher — Build · Prove · Trade, one bar across all three tools. */
    .bpt { display: flex; align-items: center; gap: 2px; margin-left: 2px; }
    .bpt-i { display: flex; align-items: baseline; gap: 7px; padding: 7px 11px; border-radius: 9px; text-decoration: none;
      color: var(--muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; position: relative;
      transition: background .15s var(--ease), color .15s var(--ease); }
    .bpt-r { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ghost); font-weight: 600; }
    .bpt-i:hover { background: var(--surface); color: var(--text-2); }
    .bpt-i:hover .bpt-r { color: var(--muted); }
    .bpt-i.active { color: var(--text); }
    .bpt-i.active .bpt-r { color: var(--gold); }
    .bpt-i.active::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; background: var(--gold-grad); border-radius: 2px; }
    @media (max-width: 760px) { .bpt-r { display: none; } .bpt-i { padding: 7px 9px; font-size: 13px; } }
    @media (max-width: 560px) { .bpt-i:not(.active) { display: none; } .bpt-i.active::after { display: none; } }
    .hactions { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .hactions::-webkit-scrollbar { display: none; }
    .hactions > * { flex: none; }
    .hdiv { width: 1px; height: 20px; background: rgba(255,255,255,.14); margin: 0 4px; }
    .btn.hnew { height: 32px; padding: 0 13px; font-size: 12.5px; border-radius: var(--r-sm); }
    /* usage meter: conic ring + label */
    .usage-chip { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0 4px;
      color: var(--muted); font-size: 11.5px; font-weight: 500; cursor: pointer; }
    .usage-chip:hover { color: var(--text); }
    /* #821: the fill and the track are tokens, so the ring animates and reads in both themes. It was a hard-coded
       near-black track under a hole painted with the light theme's surface: a white disc in a black ring at 0%. */
    @property --usage-pct { syntax: '<number>'; inherits: false; initial-value: 0; }
    .usage-ring { --usage-pct: 0; --usage-fill: #2563eb; --usage-track: rgba(255,255,255,.16); width: 16px; height: 16px; border-radius: 50%; flex: none;
      background: conic-gradient(var(--usage-fill) calc(var(--usage-pct) * 1%), var(--usage-track) 0);
      -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px);
      transition: --usage-pct .7s var(--ease); }
    .usage-ring[data-tone="warn"] { --usage-fill: #eab63c; }
    .usage-ring[data-tone="danger"] { --usage-fill: #f0544a; }
    .usage-ring[data-tone="unmetered"] { --usage-fill: rgba(37,99,235,.55); }
    @media (prefers-reduced-motion: reduce) { .usage-ring { transition: none; } }
    .usage-chip.hot { color: var(--danger); }
    /* notifications bell */
    .notif-btn { position: relative; }
    .notif-dot { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
      background: var(--accent-grad); color: #ffffff; font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
      box-shadow: 0 2px 8px rgba(37, 99, 235,.5); font-variant-numeric: tabular-nums; }
    .notif-item { display: flex; gap: 10px; padding: 10px 11px; border-radius: 10px; cursor: pointer; transition: background .14s var(--ease); align-items: flex-start; }
    .notif-item:hover { background: var(--surface-2); }
    .notif-item .nic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
      background: rgba(37, 99, 235,.12); border: 1px solid rgba(37, 99, 235,.25); color: #f0c974; }
    .notif-item .nic .ic { width: 12px; height: 12px; }
    .notif-item .nb { min-width: 0; flex: 1; }
    .notif-item .nt { font-size: 12.5px; line-height: 1.45; color: var(--sec); }
    .notif-item .nt b { color: var(--text); font-weight: 650; }
    .notif-item .nq { font-size: 11.5px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
    .notif-item .nw { font-size: 12px; color: var(--j-faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
    .notif-item.unread .nt { color: var(--text); }
    .notif-item.unread::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; flex: none; margin-top: 6px; }

    /* segmented Chat / Chart tabs (mobile) */
    .tabs { display: none; background: var(--raised); border: 0; border-radius: var(--r-tile); padding: 3px; gap: 2px; }
    .tab { position: relative; display: inline-flex; align-items: center; gap: 6px; background: none; color: var(--muted);
      font-weight: 500; font-size: 13px; padding: 5px 12px; border-radius: var(--r-seg); transition: color .15s var(--ease), background .2s var(--ease); }
    .tab .ic { width: 14px; height: 14px; }
    .tab.active { color: var(--text); background: var(--j-chip); box-shadow: none; }
    .tab .pip { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--gold)); display: none; }
    .tab.updated .pip { display: block; animation: pulse 1.4s var(--ease) infinite; }

    /* header pop-over panels (saved / usage) */
    .saved-panel { position: absolute; top: 60px; right: 16px; z-index: 30; width: 344px; max-width: calc(100vw - 32px); max-height: 72vh; overflow-y: auto;
      background: var(--solid); border: 0; border-radius: var(--r-card);
      box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); transform-origin: top right; }
    .saved-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; }
    .saved-list { padding: 7px; }
    .saved-empty { padding: 26px 16px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.6; }
    .saved-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px; cursor: pointer; transition: background .14s var(--ease); }
    .saved-item::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-grad); flex: 0 0 auto; }
    .saved-item:hover { background: var(--surface-2); }
    .saved-item .si-main { flex: 1; min-width: 0; }
    .saved-item .si-name { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .saved-item .si-date { font-size: 12px; color: var(--j-faint); margin-top: 1px; font-variant-numeric: tabular-nums; }
    .saved-item .si-del { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 14px; padding: 3px 7px; border-radius: 7px; opacity: 0; transition: opacity .14s, color .14s, background .14s; }
    .saved-item:hover .si-del { opacity: 1; } .saved-item .si-del:hover { color: var(--danger); background: rgba(242,109,109,.12); }
    .saved-item .si-test { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 3px 6px; border-radius: 7px; opacity: 0; transition: opacity .14s, color .14s, background .14s; display: inline-flex; align-items: center; }
    .saved-item .si-test .ic { width: 14px; height: 14px; }
    .saved-item:hover .si-test { opacity: 1; } .saved-item .si-test:hover { color: #3b82f6; background: rgba(37, 99, 235,.12); }
    .shelf-head { border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--j-faint); }
    .shelf-item .si-dl { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 13px; flex: none; transition: all .14s var(--ease); }
    .shelf-item:hover .si-dl, .shelf-item .si-dl:hover { color: #ffffff; background: var(--accent-grad); border-color: transparent; }
    .library-panel { width: 480px; max-height: min(78vh, 760px); overflow: hidden; display: flex; flex-direction: column; }
    .library-head { flex: none; padding: 16px 18px 14px; }
    .library-head > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .library-head > div > span { color: var(--text); font-size: 14px; font-weight: 700; }
    .library-head > div::after { content: 'Every build and revision, ready when you need it.'; color: var(--faint); font-size: 11.5px; font-weight: 450; letter-spacing: 0; }
    .library-toolbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 54%, transparent); }
    .library-search { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
    .library-search .ic { position: absolute; left: 11px; width: 13px; height: 13px; color: var(--faint); pointer-events: none; }
    .library-search .tp-field { width: 100%; min-height: 36px; padding-left: 32px; }
    .library-count { flex: none; color: var(--j-faint); font: 500 12px var(--font); font-variant-numeric: tabular-nums; }
    #savedList { flex: 1; min-height: 180px; overflow-y: auto; padding: 10px; }
    .lib-loading { padding: 4px; }
    .lib-card { position: relative; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--solid) 88%, var(--surface)); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
    .lib-card:hover { border-color: var(--line-2); box-shadow: var(--sh-card); }
    .lib-card[aria-busy="true"] { opacity: .72; }
    .lib-open { width: 100%; min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px 13px 9px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
    .lib-open:disabled { cursor: wait; }
    .lib-glyph { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(37, 99, 235,.28); border-radius: 9px; background: rgba(37, 99, 235,.08); color: var(--accent-text); font-size: 15px; }
    .lib-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .lib-copy strong { overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
    .lib-copy > span { color: var(--j-faint); font: 400 12px var(--font); font-variant-numeric: tabular-nums; }
    /* Access is a status: plain text, never a tinted pill. */
    .lib-access { min-height: 23px; display: inline-flex; align-items: center; padding: 0; border: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
    .lib-access.protected, .lib-access.visible { border: 0; background: none; color: var(--muted); }
    .lib-actions { display: flex; align-items: center; gap: 2px; padding: 0 10px 10px 50px; }
    .lib-actions .tp-button { min-height: 28px; padding: 0 8px; font-size: 10.5px; }
    .lib-actions .lib-danger-link { margin-left: auto; }
    .lib-danger-link:hover:not(:disabled) { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
    .lib-inline-form, .lib-delete-confirm { margin: 0 10px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
    .lib-inline-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
    .lib-inline-form > div, .lib-delete-confirm > div:last-child { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
    .lib-field-error, .lib-item-error { display: block; color: var(--danger); font-size: 11px; line-height: 1.4; }
    .lib-item-error { padding: 0 13px 11px 50px; }
    .lib-delete-confirm { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
    .lib-delete-confirm > div:first-child { display: flex; flex-direction: column; gap: 2px; }
    .lib-delete-confirm strong { color: var(--text); font-size: 12px; }
    .lib-delete-confirm span { color: var(--faint); font-size: 10.5px; }
    .lib-delete-confirm > div:last-child { flex: none; margin-top: 0; }
    .lib-versions { position: relative; margin: 0 10px 10px 50px; padding: 11px 11px 6px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 68%, transparent); }
    .lib-versions > p { margin: 0 0 10px; color: var(--faint); font-size: 10.5px; line-height: 1.45; }
    .lib-version { position: relative; min-height: 38px; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 8px; }
    .lib-version:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 24px; bottom: -10px; width: 1px; background: var(--line-2); }
    .lib-version-marker { width: 11px; height: 11px; z-index: 1; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 0 1px rgba(37, 99, 235,.32); }
    .lib-version-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .lib-version-copy strong { color: var(--text); font: 650 11px var(--font); }
    .lib-version-copy span, .lib-version-empty { color: var(--j-faint); font: 400 12px var(--font); font-variant-numeric: tabular-nums; }
    .lib-version-restore { min-height: 27px; padding: 0 8px; font-size: 10px; }
    .lib-current { color: var(--muted); font: 500 12px var(--font); }
    /* Drafts (#335): kept to look at, never current. Caution gold marks them, never their text (light-theme contrast). */
    .lib-access.draft { border: 0; background: none; color: var(--muted); }
    .lib-version-draft .lib-version-marker { background: var(--surface); box-shadow: 0 0 0 1.5px rgb(var(--warn) / .75); }
    .lib-version-show { min-height: 27px; padding: 0 8px; font-size: 10px; }
    .lib-empty { min-height: 210px; gap: 7px; }
    .lib-empty .tp-button { margin-top: 8px; }
    .note-link { display: inline; background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 600; color: #3b82f6; cursor: pointer; text-decoration: none; }
    .note-link:hover { text-decoration: underline; }
    /* usage panel */
    .usage-panel { width: 320px; }
    .usage-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
    .usage-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 2px; }
    .usage-now { padding: 12px 12px 0; display: flex; flex-direction: column; gap: 7px; }
    .usage-now:empty { display: none; }
    .usage-now strong { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
    .usage-now small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
    .usage-now small:empty { display: none; }
    .usage-now[data-tone="warn"] .tp-progress-bar { background: #eab63c; } .usage-now[data-tone="danger"] .tp-progress-bar { background: #f0544a; }
    .buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; text-align: left; transition: all .14s var(--ease); }
    .buy:disabled { opacity: .6; cursor: default; }
    .buy:hover { background: rgba(37, 99, 235,.1); border-color: rgba(37, 99, 235,.45); }
    .buy .buy-price { font-size: 15px; font-variant-numeric: tabular-nums; } .buy .buy-sub { font-size: 11.5px; color: var(--faint); font-weight: 500; }
    .buy.buy-lead { background: #2563eb; border-color: transparent; color: #fff; } .buy.buy-lead .buy-sub { color: rgba(255,255,255,.78); }
    .buy.buy-code { background: rgba(37, 99, 235,.07); border-color: rgba(37, 99, 235,.3); }
    .buy.buy-code:hover { border-color: rgba(37, 99, 235,.55); }
    .usage-div { height: 1px; background: var(--line); margin: 4px 0; }
    .usage-empty { color: var(--faint); font-size: 12.5px; text-align: center; padding: 16px 8px; line-height: 1.6; }
    .settings-close { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 19px; line-height: 1; padding: 0 4px; } .settings-close:hover { color: var(--text); }

    .toast { position: absolute; top: 62px; right: 16px; z-index: 70; display: flex; align-items: center; gap: 8px;
      background: var(--raised); color: var(--text); font-size: 13px; font-weight: 500;
      padding: 10px 16px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); animation: pop .22s var(--spring) both; }

    /* The top bar (TP1 v2, the "Inside the Lab" canvas frames): back to the Lab, what you are building, where it
       is in Define · Confirm · Build · Use, and, once a revision exists, Replay, Backtest (the one primary) and
       Finish. It projects the typed application state (authoring-flow.ts); it is not a second workflow store. */
    #lab > header { gap: 12px; padding-left: max(12px, env(safe-area-inset-left)); border-bottom-color: var(--line); background: var(--bg); backdrop-filter: none; }
    .authoring-flow { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 16px; }
    .authoring-current { min-width: 0; display: flex; align-items: center; gap: 10px; }
    .authoring-current::before { content: ''; width: 1px; height: 20px; flex: none; margin-right: 4px; background: var(--j-chip); }
    .authoring-current b { min-width: 0; max-width: 260px; overflow: hidden; color: var(--text); font: 600 15px/20px var(--font); letter-spacing: -.005em; text-overflow: ellipsis; white-space: nowrap; }
    .authoring-current em { flex: none; color: var(--j-faint); font: 600 12px/16px var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
    .authoring-progress { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; overflow: hidden; }
    .authoring-stages { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .authoring-stages li { display: flex; align-items: center; gap: 8px; color: var(--j-faint); font: 500 13px/18px var(--font); white-space: nowrap; }
    .authoring-stages li:not(:last-child)::after { content: ''; width: 28px; height: 1px; margin-left: 2px; background: var(--line-2); }
    .authoring-stages i { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--j-hover-2);
      color: var(--j-faint); font: 700 11px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
    .authoring-stages b { font-weight: inherit; }
    .authoring-stages li[data-state='done'] { color: var(--muted); }
    .authoring-stages li[data-state='done'] i { background: var(--j-chip); color: var(--ok); }
    .authoring-stages li[data-state='current'] { color: var(--text); font-weight: 600; }
    .authoring-stages li[data-state='current'] i { background: rgb(var(--accent)); color: #fff; }
    .authoring-actions { flex: none; display: flex; align-items: center; gap: 4px; }
    .authoring-actions .tp-button { height: 32px; min-height: 32px; padding: 0 10px; border-radius: 8px; font: 500 14px var(--font); white-space: nowrap; transform: none; }
    .authoring-actions .authoring-inspect { border-color: transparent; background: transparent; color: var(--text-2); box-shadow: none; }
    .authoring-actions .authoring-inspect .lbl-hide { display: inline; }
    .authoring-actions .authoring-inspect .ic { color: currentColor; }
    .authoring-actions :is(.authoring-inspect, .authoring-menu-trigger):hover:not(:disabled) { background: var(--j-hover-2); color: var(--text); }
    .authoring-actions .authoring-backtest { margin: 0 4px; padding: 0 14px; border: 0; background: rgb(var(--accent)); color: #fff; font-weight: 600; box-shadow: none; filter: none; }
    .authoring-actions .authoring-backtest:hover:not(:disabled) { background: var(--j-accent-hover); filter: none; }
    .authoring-menu { position: relative; }
    .authoring-menu-trigger { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
    .authoring-menu-trigger .ic { width: 14px; height: 14px; color: var(--j-faint); }
    .authoring-menu-trigger[aria-expanded='true'] { background: var(--j-chip); color: var(--text); }
    .authoring-popover, .lab-more-menu { position: absolute; z-index: 80; width: 210px; padding: 6px; border: 0; border-radius: var(--r-card); background: var(--raised);
      box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); }
    .authoring-popover { top: calc(100% + 8px); right: 0; transform-origin: top right; }
    .lab-more-menu { top: 50px; right: 16px; transform-origin: top right; }
    .authoring-popover .authoring-menu-item, .lab-more-menu .lab-more-item { width: 100%; height: 36px; min-height: 36px; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
      padding: 0 10px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-2); box-shadow: none; font: 500 14px var(--font); text-align: left; cursor: pointer; transform: none; }
    .authoring-popover .authoring-menu-item:is(:hover, :focus-visible), .lab-more-menu .lab-more-item:is(:hover, :focus-visible) { background: var(--j-hover-2); color: var(--text); outline: none; }
    .authoring-popover .authoring-menu-item .ic, .lab-more-menu .lab-more-item .ic { width: 15px; height: 15px; color: var(--muted); }
    .authoring-popover .authoring-menu-item :is(.lbl,.lbl-hide) { display: inline; }
    .authoring-popover .authoring-menu-item[data-menu-label]::after { content: attr(data-menu-label); }
    /* Publish keeps its accent class for the toolbar it returns to on teardown; in the menu it is one quiet item. */
    .authoring-popover .authoring-menu-item.tbtn-accent { color: var(--text-2); }
    /* Guidance: one quiet line above the conversation while a build runs or has stopped safely. At rest it stays
       in the accessibility tree (its polite live region keeps announcing) but out of sight. */
    .authoring-guidance { flex: none; margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font: 400 13px/18px var(--font); }
    .authoring-guidance[data-tone='safe'] { color: var(--text-2); }
    .authoring-guidance:is([data-tone='quiet'], [data-tone='ready']) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    /* The conversation itself now says what a build is doing and how it ended, so the line above it stays a live
       region for screen readers only instead of repeating the build status a second time. */
    .authoring-guidance:is([data-tone='working'], [data-tone='safe']) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    /* Header controls: quiet text+icon buttons; the bell and usage stay where they were; the ⋯ popover sits beside the strip. */
    #lab > header .hactions { gap: 4px; }
    #lab > header .hactions .gbtn { height: 32px; min-height: 32px; padding: 0 10px; border-color: transparent; border-radius: var(--r-control); background: transparent; color: var(--text-2);
      font: 500 14px var(--font); box-shadow: none; transform: none; }
    #lab > header .hactions .gbtn.iconbtn { width: 32px; min-width: 32px; padding: 0; justify-content: center; }
    #lab > header .hactions .gbtn:hover:not(:disabled) { background: var(--j-hover-2); color: var(--text); }
    #lab > header .hactions .gbtn .ic { color: currentColor; }
    #lab > header .hactions .gbtn[aria-expanded='true'] { background: var(--j-chip); color: var(--text); }
    #lab > header .hdiv { background: var(--j-chip); margin: 0 6px; }
    .authoring-loop > header > .hspacer { display: none; }
    #lab > header:is([data-density='tight'], [data-density='minimal']) .authoring-actions .authoring-inspect { width: 32px; padding: 0; justify-content: center; }
    #lab > header:is([data-density='tight'], [data-density='minimal']) .authoring-actions .authoring-inspect .lbl-hide { display: none; }
    #lab > header[data-density='tight'] .authoring-stages li:not([data-state='current']) b, #lab > header[data-density='minimal'] .authoring-stages b { display: none; }
    #lab > header:is([data-density='tight'], [data-density='minimal']) .authoring-stages li:not(:last-child)::after { width: 14px; }
    #lab > header[data-density='tight'] .authoring-current b { max-width: 180px; }
    #lab > header[data-density='minimal'] .authoring-current b { max-width: 140px; }
    #lab > header[data-density='minimal'] .lab-deck-back { width: 32px; padding: 0; justify-content: center; }
    #lab > header[data-density='minimal'] .lab-deck-back span { display: none; }
    #lab > header:is([data-density='compact'], [data-density='tight'], [data-density='minimal']) .hactions .lbl-hide { display: none; }
    #lab > header:is([data-density='compact'], [data-density='tight'], [data-density='minimal']) .hactions .gbtn { width: 32px; min-width: 32px; padding: 0; justify-content: center; }
    #lab > header:is([data-density='compact'], [data-density='tight'], [data-density='minimal']) #usagePct { display: none; }

    /* ── panes ── */
    #panes { flex: 1; display: flex; min-height: 0; background: var(--bg); }
    .pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
    #chatPane { flex: none; width: var(--builder-w, 400px); background: var(--bg); }
    #chartPane { flex: 1; position: relative; container-type: inline-size; background: var(--bg); border-left: 1px solid var(--line-2); }
    .workspace-splitter { position: relative; z-index: 12; width: 7px; flex: 0 0 7px; margin-right: -7px; padding: 0;
      border: 0; background: transparent; cursor: col-resize; touch-action: none; }
    .workspace-splitter::after { content: ''; position: absolute; inset: 0 2px; background: transparent; transition: background .14s var(--ease); }
    .workspace-splitter:hover::after, .workspace-splitter:focus-visible::after, .workspace-splitter.dragging::after {
      background: color-mix(in srgb, var(--accent-text) 58%, transparent); }
    .workspace-splitter:focus-visible { outline: none; }
    body.resizing-workspace { cursor: col-resize; user-select: none; }
    /* The Assistant panel collapses on the layout speed instead of vanishing (DESIGN_SYSTEM §7, #370). It keeps its
       width and slides out to the left under a clip while its contents fade out (110ms), so nothing squashes; the
       chart beside it holds one size and resizes once (app/page-motion.ts glideBuilder). Expanding, it slides back
       and its contents fade in from 110ms. At rest a collapsed panel is hidden, out of the tab order. */
    .lab[data-builder-collapsed] #chatPane { margin-left: calc(-1 * var(--builder-w, 400px)); opacity: 0; visibility: hidden; pointer-events: none; }
    .lab[data-builder-collapsed] .workspace-splitter { display: none; }
    .lab[data-builder-gliding] #panes { overflow: clip; }
    .lab[data-builder-gliding] #chatPane { transition: margin-left var(--m-layout, 280ms) var(--m-ease), opacity 160ms var(--m-ease) 110ms, visibility 0s linear 0s; }
    .lab[data-builder-gliding][data-builder-collapsed] #chatPane { transition: margin-left var(--m-layout, 280ms) var(--m-ease), opacity 110ms ease, visibility 0s linear var(--m-layout, 280ms); }

    /* How it works is a technical reading rail, not a second stack of dashboard cards. */
    .how-panel { position:relative; z-index:4; flex:0 0 var(--how-w,316px); width:var(--how-w,316px);
      display:flex; flex-direction:column; min-height:0; color:var(--text); background:var(--bg);
      border-left:1px solid var(--line-2); }
    .how-splitter { position:relative; z-index:12; width:7px; flex:0 0 7px; margin-left:-7px; padding:0; border:0;
      background:transparent; cursor:col-resize; touch-action:none; }
    .how-splitter::after { content:''; position:absolute; inset:0 2px; background:transparent; transition:background .14s var(--ease); }
    .how-splitter:hover::after,.how-splitter:focus-visible::after,.how-splitter.dragging::after { background:color-mix(in srgb,var(--accent-text) 58%,transparent); }
    .how-splitter:focus-visible { outline:none; }
    .how-head { min-height:48px; padding:7px 12px 7px 20px; display:flex; align-items:center; justify-content:space-between;
      gap:16px; border-bottom:1px solid var(--line); background:var(--pane); }
    .how-head>div { display:flex; flex-direction:column; min-width:0; gap:0; }
    .how-head span { color:var(--j-faint); font:500 12px/16px var(--font); }
    .how-head b { font:600 14px/18px var(--font); letter-spacing:-.012em; }
    .how-head .settings-close { width:32px; height:32px; padding:0; border-radius:8px; }
    .how-body { flex:1; min-height:0; overflow:auto; padding:22px 20px 32px; }
    .how-overview { padding-bottom:22px; border-bottom:1px solid var(--line); }
    .how-kicker { display:flex; margin-bottom:12px; }
    .how-overview h2 { margin:0; font:600 22px/28px var(--font); letter-spacing:-.025em; text-wrap:balance; }
    .how-overview p { margin:8px 0 0; color:var(--muted); font:400 13px/20px var(--font); text-wrap:pretty; }
    .how-section { padding-top:24px; }
    .how-section-title { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
    .how-section-title b { font:600 12px/16px var(--font); letter-spacing:.01em; }
    .how-section-title span { color:var(--faint); font:500 11px/16px var(--font); font-variant-numeric:tabular-nums; }
    .how-rules { position:relative; display:flex; flex-direction:column; gap:0; padding-left:17px; }
    .how-rules::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:#2a2a31; }
    .how-rule { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px;
      min-height:54px; margin:0 -10px; padding:9px 10px; border:0; border-radius:8px; background:transparent;
      transition:background 120ms ease; }
    .how-rule:hover { background:var(--surface); }
    .how-rule.is-focused { background:var(--solid); outline:2px solid rgb(var(--accent)); outline-offset:1px; }
    .private-import-dialog { width:min(620px,calc(100vw - 28px)); max-height:min(820px,calc(100dvh - 28px)); padding:0; overflow:hidden;
      border:0; border-radius:var(--r-card); background:var(--solid); color:var(--text); box-shadow:inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); }
    .private-import-dialog::backdrop { background:rgba(0,0,0,.58); }
    .private-import-sheet { display:flex; flex-direction:column; gap:16px; padding:22px; max-height:inherit; overflow:auto; }
    .private-import-sheet header,.private-import-sheet footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .private-import-sheet header span { color:var(--muted); font:500 12px var(--font); }
    .private-import-sheet h2 { margin:3px 0 0; font-size:21px; } .private-import-sheet p { margin:0; color:var(--muted); line-height:1.55; }
    .private-import-sheet label:not(.private-import-file) { display:grid; gap:7px; color:var(--sec); font-size:12px; font-weight:650; }
    .private-import-sheet textarea { min-height:72px; resize:vertical; font:12px/1.55 var(--mono); }
    .private-import-file { position:relative; width:max-content; overflow:hidden; } .private-import-file input { position:absolute; inset:0; opacity:0; cursor:pointer; }
    .private-import-result { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:22px; color:var(--muted); font-size:12px; }
    .private-import-sheet footer { justify-content:flex-end; padding-top:4px; }
    .how-rule-index { position:absolute; left:-20px; top:20px; width:7px; height:7px; overflow:hidden; padding:0;
      border:2px solid var(--bg); border-radius:50%; background:var(--ghost); color:transparent; font-size:0; }
    .how-rule b { display:block; font:500 13px/18px var(--font); color:var(--text-2); }
    .how-rule p { margin:3px 0 0; color:var(--faint); font:400 12px/18px var(--font); text-wrap:pretty; }
    .how-status { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:18px; padding:0; color:var(--faint);
      background:transparent; border:0; font:500 10.5px/18px var(--font); text-transform:capitalize; white-space:nowrap; }
    .how-status i { width:5px; height:5px; flex:none; border-radius:50%; background:currentColor; }
    .how-status.tone-success { color:var(--ok-text); }
    .how-status.tone-info { color:var(--accent-text); }
    .how-status.tone-warning { color:rgb(var(--warn-hi)); }
    .how-notes { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
    .how-notes li { position:relative; padding:8px 0 8px 16px; color:var(--muted); font:400 12px/18px var(--font); border-bottom:1px solid var(--line); }
    .how-notes li::before { content:''; position:absolute; left:0; top:.58em; width:5px; height:5px; border-radius:50%; background:rgb(var(--warn)); }
    .how-empty,.how-loading { min-height:180px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; text-align:left; }
    .how-empty b,.how-loading b { font:600 15px/20px var(--font); }
    .how-empty span,.how-loading span { max-width:260px; color:var(--muted); font:400 13px/20px var(--font); }
    .how-empty.compact { min-height:100px; padding:16px 0; border:0; border-radius:0; }
    .how-empty.is-error b { color:var(--danger); }
    .how-empty .tp-button { margin-top:8px; }
    .cap-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
    .cap-search .tp-field { min-width:0; }
    .cap-results { display:flex; flex-direction:column; gap:0; margin-top:10px; }
    .cap-result { width:100%; padding:11px 0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
      color:var(--text); font:inherit; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; cursor:pointer; }
    .cap-result:hover,.cap-result:focus-visible { color:var(--text); background:var(--surface); outline:2px solid rgb(var(--accent)); outline-offset:2px; }
    .cap-result b { font:600 12.5px/17px var(--font); }.cap-result span { color:var(--muted); font:400 12px/18px var(--font); }
    .cap-result small,.cap-hint { color:var(--faint); font:500 10.5px/16px var(--font); }.cap-hint.is-error { color:var(--danger); }
    .change-fields{display:grid;gap:0}.change-fields label,.change-request{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,.8fr);align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted);font:500 12px/18px var(--font)}.change-fields input{min-width:0}.change-request{display:grid;grid-template-columns:1fr;padding-top:18px;border:0}.change-request textarea{min-height:86px;resize:vertical}.change-status{min-height:18px;margin-top:8px;color:var(--muted);font:400 11px/18px var(--font)}.change-status.is-ready{color:var(--ok-text)}.change-status.is-error{color:var(--danger)}.change-apply{width:100%;margin-top:8px}
    .how-overview>small{display:block;margin-top:9px;color:var(--faint);font:400 11px/17px var(--font)}.how-inspect{margin-top:14px}

    /* ── chat: session header ── */
    .sess { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 12px; border-bottom: 1px solid var(--line); background:var(--pane); }
    .sess-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .sess-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
    .sess-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sess-sub { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #7d818a; font-weight: 500; white-space: nowrap; }
    .sess-sub #sessStatus { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .sess-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; animation: tpPulse 2.4s infinite; }
    .sess-dot.idle { background: var(--faint); animation: none; }
    .sess-hist { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid transparent; background: transparent; color: #7f838c; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .sess-hist:hover { background: var(--surface-2); color: #d6e0ef; }

    /* ── chat: messages ──
       Read like a conversation, the way a chat assistant does: the member's words in a soft bubble on the right,
       the Lab's words as plain text on the page — no avatar tiles, no boxes around prose. */
    #chat { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 22px 20px 10px; display: flex; flex-direction: column; gap: 22px; }
    /* A narrow Assistant must still hold its own text: long tickers, identifiers and links break inside the bubble. */
    .mcol > * { min-width: 0; max-width: 100%; }
    .daydiv { display: flex; align-items: center; justify-content: center; }
    .daydiv span { color: var(--j-faint); font: 500 12px var(--font); }
    .msg { max-width: 100%; font-size: 14px; line-height: 1.65; }
    .msg.user { align-self: flex-end; max-width: 84%; color: var(--text); background: var(--surface-2);
      border-radius: 18px; padding: 9px 15px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; min-width: 0; }
    .msg.assistant, .msg.working { align-self: stretch; display: flex; }
    .ai-av { display: none; }
    .mcol { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 12px; color: var(--text); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
    .mcol b { font-weight: 600; }
    .mcol code, .msg code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border-radius: 5px; padding: 1px 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
    .msg.error { align-self: stretch; color: color-mix(in srgb, var(--danger) 78%, var(--text)); padding: 0;
      white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; }

    /* Brief summary: the finished build line, then how the Lab read the request, said as a sentence. */
    .build-summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
    .brief-card { min-width: 0; padding: 0; color: var(--text); overflow-wrap: anywhere; }
    .brief-lead { margin: 0; color: var(--text); font: 400 14px/1.65 var(--font); }
    .brief-title { font-weight: 600; }
    .brief-caption { margin: 2px 0 0; color: var(--muted); font: 400 13.5px/1.6 var(--font); }
    .brief-card summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--muted); font: 500 13px var(--font); border-radius: 6px; }
    .brief-card summary:focus-visible { outline: 2px solid rgba(37,99,235,.5); outline-offset: 2px; }
    .brief-card ul { margin: 0 0 4px; padding: 0 0 0 18px; color: var(--text-2); font: 400 13.5px/1.6 var(--font); }
    .brief-card li + li { margin-top: 4px; }
    .brief-empty { margin: 0; color: var(--j-faint); font-size: 13px; }
    .build-card[data-state="completed"] .build-eyebrow::before { animation: none; border-color: var(--ok); }
    html[data-theme="light"] .brief-card { background: transparent; box-shadow: none; }
    @media (hover: hover) and (pointer: fine) { .brief-card summary:hover { color: var(--text); } }
    @media (hover: none) and (pointer: coarse) { .brief-card summary { min-height: var(--tp-touch-target); } }

    /* clarifying-question card — one question, option rows, one recommended, an Other field (plan D5) */
    .q-card { gap: 8px; white-space: normal; }
    .q-text { font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
    .q-why { font-size: 12px; color: var(--muted); margin-top: -2px; }
    .q-options { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
    .q-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 9px 12px; text-align: left; cursor: pointer;
      background: var(--surface); border: 1px solid transparent; border-radius: 10px; color: var(--text); font: inherit; transition: background 120ms ease, border-color 120ms ease; }
    .q-opt:hover:not(:disabled) { background: var(--surface-2); }
    .q-opt:focus-visible { outline: none; border-color: rgba(37, 99, 235,.55); box-shadow: 0 0 0 3px rgba(37, 99, 235,.18); }
    .q-opt-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
    .q-opt-detail { font-size: 11.5px; color: var(--text-2); }
    .q-rec { font-size: 12px; font-weight: 600; color: var(--accent-text, #93b4ff); background: rgba(37, 99, 235,.14); border-radius: 999px; padding: 2px 7px; }
    .q-opt.q-chosen, .q-opt.q-chosen:disabled { border-color: rgba(37, 99, 235,.5); background: rgba(37, 99, 235,.12); opacity: 1; }
    .q-answered .q-opt:disabled:not(.q-chosen) { opacity: .45; }
    .q-opt:disabled { cursor: default; }
    .q-other { align-self: flex-start; background: none; border: 0; padding: 4px 2px; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
    .q-other:hover, .q-other:focus-visible { color: var(--text); outline: none; text-decoration: underline; }
    .q-answered .q-other { display: none; }
    .q-other-row { display: flex; gap: 8px; align-items: center; }
    .q-other-input { flex: 1; min-width: 0; font-size: 13px; }
    .q-other-send { width: 36px; height: 36px; flex: none; border-radius: 10px; padding: 0; }
    .q-other-send .ic { width: 15px; height: 15px; }
    @media (hover: none) and (pointer: coarse) { .q-other { min-height: var(--tp-touch-target); } }
    @media (prefers-reduced-motion: reduce) { .q-opt { transition: none; } }

    /* Result row — the versioned build attached to the Lab's reply: its name, version and what to do next. The
       verification record folds under "Details". */
    .artifact { border: 1px solid var(--line-2); background: var(--surface); border-radius: 12px; overflow: hidden; white-space: normal; }
    .art-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px 4px; }
    .art-head .ic { color: var(--muted); width: 13px; height: 13px; }
    .art-name { font-size: 13.5px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .art-meta { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--j-faint); flex: none; }
    .art-body { padding: 4px 12px 2px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
    .art-row { display: flex; justify-content: space-between; gap: 12px; }
    .art-row .k { color: var(--muted); } .art-row .v { color: var(--text-2); text-align: right; }
    .art-status { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px 12px; background: none; }
    .art-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
    /* An ordinary finished build needs no status word — only a draft or a result with notes says something. */
    .artifact:not(.artifact-draft, .artifact-notes) .art-status :is(.dot, .art-status-label) { display: none; }
    /* …so its actions sit on the name's own line. */
    .artifact:not(.artifact-draft, .artifact-notes) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .artifact:not(.artifact-draft, .artifact-notes) > .art-head { padding-bottom: 11px; }
    .artifact:not(.artifact-draft, .artifact-notes) > .art-status { grid-column: 2; grid-row: 1; padding: 0 8px 0 0; }
    .artifact > :is(.art-body, .art-details) { grid-column: 1 / -1; }
    .art-status span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
    .art-revise { margin-left: auto; min-height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px;
      background: transparent; color: var(--text-2); font: 500 12.5px var(--font); }
    .art-revise:hover, .art-revise:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
    .art-revise + .art-revise { margin-left: 0; }
    .art-revise:disabled { opacity: .6; cursor: default; }
    .art-details { border-top: 1px solid var(--line); padding: 0 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
    .art-details summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; color: var(--j-faint); font: 500 12px var(--font); }
    .art-details summary:hover, .art-details summary:focus-visible { color: var(--text-2); outline: none; }
    .art-details[open] { padding-bottom: 10px; }
    .art-details .art-row + .art-row { margin-top: 3px; }
    /* A draft or a result with notes (#335): the dot speaks caution; the actions wrap on narrow screens. */
    .artifact-draft .art-status, .artifact-notes .art-status { flex-wrap: wrap; }
    .artifact-draft .art-status .dot, .artifact-notes .art-status .dot { background: rgb(var(--warn)); }
    @media (hover: none) and (pointer: coarse) { .art-revise, .art-details summary { min-height: var(--tp-touch-target); } }

    /* Build status — one quiet line while the Lab works: a small spinner, what it is doing, how long it has taken,
       a thin rule for the four real lifecycle stages (no invented percentage), and its steps behind "Show steps". */
    .build-flight { color: var(--muted); align-items: flex-start; }
    .build-card { min-width: 0; flex: 1; overflow: hidden; border: 0; background: none; }
    /* The page-level header rule (height, padding, translucent bar, border) must not reach this inline header. */
    .build-card-head, html[data-theme="light"] .build-card-head { position: static; z-index: auto; height: auto; min-height: 24px; padding: 0;
      display: flex; align-items: center; gap: 8px; border: 0; background: none; backdrop-filter: none; }
    /* The eyebrow IS the inline progress spinner (tp-progress-inline draws it in ::before); its word stays for
       screen readers only. Scoped under .build-card-head so the shared colour/gap don't win on tie. */
    .build-card-head .build-eyebrow { flex: none; gap: 0; color: var(--muted); font: 600 13px var(--font); letter-spacing: 0; text-transform: none; }
    .build-card-head .build-eyebrow::before { width: 11px; height: 11px; }
    .build-card .wlabel { min-width: 0; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
    .build-card .elapsed { color: var(--j-faint); font: 400 12.5px var(--font); font-variant-numeric: tabular-nums; }
    .build-copy { padding: 1px 0 0 19px; }
    .build-detail { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .build-pace:not([hidden]) { display: block; margin-top: 2px; color: var(--j-faint); font-size: 12.5px; line-height: 1.45; }
    .build-card:is([data-state="detached"], [data-state="resumed"], [data-state="failed"], [data-state="cancel_requested"]) .build-pace { display: none; }
    .build-phases { list-style: none; margin: 8px 0 0 19px; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; max-width: 200px; }
    .build-phases li { height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
    .build-phase-dot { display: none; }
    .build-phase-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .build-phases li.complete { background: color-mix(in srgb, var(--text-2) 55%, transparent); }
    .build-phases li.current { background: linear-gradient(90deg, color-mix(in srgb, var(--text-2) 55%, transparent) 30%, var(--line-2) 70%);
      background-size: 220% 100%; animation: buildPhase 1.4s ease-in-out infinite; }
    @keyframes buildPhase { from { background-position: 100% 0; } to { background-position: 0 0; } }
    .build-steps-toggle { margin: 6px 0 0 15px; min-height: 28px; padding: 0 4px; border: 0; border-radius: 6px; background: none;
      color: var(--j-faint); font: 500 12.5px var(--font); cursor: pointer; }
    .build-steps-toggle:hover, .build-steps-toggle:focus-visible { color: var(--text-2); outline: none; }
    .build-card .acts { margin: 4px 0 0 19px; padding: 0 0 0 10px; border-left: 1px solid var(--line-2); gap: 5px; }
    .build-card .act { color: var(--muted); }
    .build-card .act.did { color: var(--j-faint); }
    .build-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 0 0 19px; }
    .build-assurance { min-width: 160px; flex: 1; color: var(--j-faint); font-size: 12.5px; line-height: 1.45; }
    .build-actions { display: flex; align-items: center; gap: 2px; margin-left: -8px; order: -1; width: 100%; }
    .build-actions button { min-height: 28px; padding: 0 8px; border-radius: 7px; background: transparent; color: var(--muted); font: 500 12.5px var(--font); }
    .build-actions button:hover, .build-actions button:focus-visible { color: var(--text); background: var(--surface-2); outline: none; }
    .build-actions .wretry { color: var(--text); background: var(--surface-2); }
    .build-actions .wstop:hover, .build-actions .wstop:focus-visible { color: var(--danger); }
    .build-actions button:disabled { opacity: .45; cursor: default; }
    .build-card[data-state="detached"] .wlabel, .build-card[data-state="resumed"] .wlabel { color: var(--text-2); }
    /* A stopped build must not keep spinning — the ring freezes and recolours to match the state. */
    .build-card[data-state="detached"] .build-eyebrow::before { animation: none; border-color: var(--faint); }
    .build-card[data-state="failed"] .wlabel { color: color-mix(in srgb, var(--danger) 78%, var(--text)); }
    .build-card[data-state="failed"] .build-eyebrow::before { animation: none; border-color: var(--danger); }
    .build-card[data-state="failed"] .build-detail { color: var(--text-2); }
    .build-phases.failed { display: none; }
    .build-card[data-state="cancel_requested"] .build-eyebrow::before { border-top-color: var(--danger); }
    .build-card[data-state="completed"] .wlabel { color: var(--muted); font-weight: 500; }
    .build-card[data-state="completed"] .build-phases { display: none; }
    @media (max-width: 520px) {
      .build-card-foot { align-items: flex-start; flex-direction: column; }
      .build-actions { justify-content: flex-start; }
    }
    @media (hover: none) and (pointer: coarse) { .build-actions button, .build-steps-toggle { min-height: var(--tp-touch-target); } }
    @media (prefers-reduced-motion: reduce) { .build-phases li.current { animation: none; } }
    .acts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .act { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-width: 0;
      opacity: 0; transform: translateY(3px); animation: actin .24s var(--ease) forwards; }
    .act .aic { width: 13px; height: 13px; flex: none; display: flex; color: var(--muted); }
    .act .aic .ic { width: 13px; height: 13px; stroke-width: 2; }
    .act.live .aic { animation: pulse 1.15s ease-in-out infinite; }
    .act.did { color: var(--j-faint); }
    .act.did .aic { color: var(--ok-text); animation: none; }
    .act .atitle { font-weight: 500; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .act .adetail { font-size: 12px; color: var(--j-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .dots { display: inline-flex; }
    .dots span { display: inline-block; width: 5px; height: 5px; margin: 0 2px; border-radius: 50%; background: var(--muted); animation: tpDot 1.2s infinite; }
    .dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
    /* Jump to latest (#814): floats over the foot of the chat while the reader is scrolled up, dots while a build runs and
       an arrow once it is done. Its negative top margin cancels its own height, so the composer never moves. */
    #chatPane .chat-jump { --jump: var(--tp-control); position: relative; z-index: 2; flex: none; align-self: center; width: var(--jump); min-width: var(--jump);
      height: var(--jump); margin: calc(-12px - var(--jump)) 0 12px; border-radius: 50%; color: var(--muted); background: var(--solid);
      box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); }
    #chatPane .chat-jump:hover { color: var(--text); }
    #chatPane .chat-jump .dots span { width: 4px; height: 4px; margin: 0 1.5px; }
    @media (hover: none) and (pointer: coarse) { #chatPane .chat-jump { --jump: var(--tp-touch-target); } }
    /* legacy chips kept for safety (superseded by .artifact) */
    .build-meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
    .bm-chip { font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .bm-chip.gold { color: #ffffff; border-color: transparent; background: var(--gold-grad); }

    /* flywheel 👍/👎 */
    .fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
    .fb-q { font-size: 11px; color: var(--faint); margin-right: auto; }
    .fb-btn { background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; line-height: 1; padding: 4px 8px; cursor: pointer; opacity: .8; transition: all .14s var(--ease); }
    .fb-btn:hover { opacity: 1; border-color: rgba(255,255,255,.22); background: var(--surface-2); }
    .fb-btn.picked { opacity: 1; border-color: rgba(37, 99, 235,.5); background: rgba(37, 99, 235,.12); }
    .fb-btn:disabled { cursor: default; }
    .fb-note { flex: 1 1 100%; min-width: 0; margin-top: 6px; background: var(--bg-2); border: 0; box-shadow: inset 0 0 0 1px var(--j-edge); border-radius: var(--r-input); color: var(--text); font: inherit; font-size: 12.5px; padding: 7px 10px; outline: none; }
    .fb-note:focus { border-color: rgba(37, 99, 235,.5); }
    .fb-send { background: var(--accent-grad); border: 0; color: #ffffff; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 9px; cursor: pointer; }
    .fb-send:disabled { opacity: .5; cursor: default; }
    .fb-skip { background: none; border: 0; color: var(--faint); font: inherit; font-size: 12px; cursor: pointer; padding: 6px 4px; }
    .fb-skip:hover { color: var(--muted); }

    /* Empty conversation (the "1 Define: empty start" frame): a sparkle tile, the question, one line on what
       happens next, and four starters as full-width rows. Clicking one fills the prompt and sends it. */
    .hint { margin: auto 0; padding: 4px 4px 12px; text-align: left; color: var(--muted); animation: msgin .4s var(--spring) both; }
    .hint .hint-mark { width: 36px; height: 36px; display: grid; place-items: center; margin: 0 0 18px; border: 0; border-radius: 10px;
      background: rgba(37,99,235,.14); color: rgb(var(--accent-hi)); }
    .hint .hint-mark .ic { width: 18px; height: 18px; }
    .hint-title { margin: 0; color: var(--text); font: 700 20px/26px var(--font); letter-spacing: -.01em; }
    .hint-sub { margin: 8px 0 0; color: var(--muted); font: 400 14px/21px var(--font); }
    .hint-label { margin: 22px 0 4px; padding: 0 12px; color: var(--ghost); font: 500 12px/16px var(--font); }
    .starters { display: flex; flex-direction: column; gap: 2px; margin: 0 -12px 0 -12px; }
    .starter { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent;
      color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .12s var(--ease); }
    .starter:hover { background: var(--j-hover-2); }
    .starter:focus-visible { outline: 2px solid rgba(37,99,235,.5); outline-offset: 0; }
    .st-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .starter .st-t { color: var(--text); font: 600 14px/19px var(--font); }
    .starter .st-s { color: var(--j-faint); font: 400 13px/17px var(--font); }
    .starter .st-go { width: 14px; height: 14px; flex: none; color: var(--ghost); }
    .starter:hover .st-go { color: var(--muted); }

    /* Composer: one rounded field. The textarea, then a row inside it: attach, a small </> "Paste Pine instead", a "?"
       that explains revisions, the model picker and Send, which stays grey until there is something to send. When the
       field is narrow the model picker moves to its own row below, so nothing overlaps or is cut off. */
    .composer { flex: none; padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
    .composer-field { container: lab-composer / inline-size; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px 14px; border: 0; border-radius: 14px; background: var(--pane);
      box-shadow: inset 0 0 0 1px var(--j-chip); transition: box-shadow 120ms ease; }
    .composer-field:focus-within { border-color: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
    #prompt { flex: none; width: 100%; resize: none; height: 44px; min-height: 44px; max-height: 168px; border: 0; background: transparent; padding: 0; box-shadow: none;
      color: var(--text); font: 400 15px/22px var(--font); border-radius: 0; }
    #prompt::placeholder { color: var(--ghost); }
    #prompt:focus { box-shadow: none; outline: none; }
    .composer-bar { display: flex; align-items: center; gap: 4px; min-width: 0; }
    /* Build model picker: a quiet button beside Send that opens a grouped menu above the composer. */
    .composer-bar .build-model { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: auto; }
    /* Fast mode: a bolt that only lights for a model with a fast mode (billed at 2×). */
    .build-fast-btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent;
      color: var(--muted); cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease); }
    .build-fast-btn svg { fill: currentColor; }
    .build-fast-btn:hover:not(:disabled) { background: var(--j-hover-2); color: var(--text); }
    .build-fast-btn[aria-pressed="true"] { background: rgb(var(--accent) / .14); color: rgb(var(--accent)); }
    .build-fast-btn[aria-pressed="true"]:hover { background: rgb(var(--accent) / .2); color: rgb(var(--accent)); }
    .build-fast-btn:disabled { opacity: .35; cursor: not-allowed; }
    .build-fast-btn:focus-visible { outline: 2px solid rgba(37,99,235,.45); outline-offset: 1px; }
    .build-model-fast { width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; fill: rgb(var(--accent)); }
    .composer-bar .build-model + #go { margin-left: 4px; }
    .build-model-btn { display: flex; align-items: center; gap: 7px; height: 32px; max-width: 180px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
      color: var(--text-2); font: 500 13px var(--font); cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease); }
    .build-model-btn:hover, .build-model-btn[aria-expanded="true"] { background: var(--j-hover-2); color: var(--text); }
    .build-model-btn:focus-visible { outline: 2px solid rgba(37,99,235,.45); outline-offset: 1px; }
    .build-model-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .build-model-chev { flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; opacity: .7; transition: transform .15s var(--ease); }
    .build-model-btn[aria-expanded="true"] .build-model-chev { transform: rotate(180deg); }
    .build-model-menu { position: fixed; z-index: 1100; overflow-y: auto; padding: 6px; /* left, bottom, width, max-height: build-model-menu.ts place() */
      background: var(--raised); animation: build-model-in .14s var(--ease); }
    @keyframes build-model-in { from { opacity: 0; transform: translateY(4px); } }
    .build-model-group { padding: 10px 10px 4px 32px; color: var(--muted); font: 600 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
    .build-model-menu { display: flex; flex-direction: column; gap: 2px; }
    .build-model-option { min-height: 44px; padding: 6px 10px 6px 8px; gap: 10px; cursor: pointer; }
    .build-model-option::before { content: ''; flex: none; width: 14px; height: 14px; }
    .build-model-option[aria-checked="true"] { background: rgb(var(--accent) / .12); }
    .build-model-option[aria-checked="true"]::before { background: rgb(var(--accent));
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M3 7.4l2.6 2.6L11 4.4" stroke="black" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 14px no-repeat;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M3 7.4l2.6 2.6L11 4.4" stroke="black" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 14px no-repeat; }
    .build-model-option:focus-visible { outline: 2px solid rgba(37,99,235,.5); outline-offset: -2px; }
    .build-model-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .build-model-name { color: var(--text); font: 500 13.5px/18px var(--font); }
    .build-model-note { color: var(--muted); font: 400 12px/16px var(--font); }
    .build-model-cost { flex: none; color: var(--text-2); font: 600 12px/1 var(--mono); letter-spacing: .04em; }
    .build-model-cost-rest { opacity: .3; }
    .build-model-tag { flex: none; padding: 3px 7px; border-radius: 999px; background: var(--j-chip); color: var(--text-2); font: 500 11px/1 var(--font); }
    .build-model-foot { margin: 4px -6px -6px; padding: 9px 16px 10px 38px; box-shadow: inset 0 1px 0 var(--line); color: var(--muted); font: 400 12px/16px var(--font); }
    @media (prefers-reduced-motion: reduce) { .build-model-menu { animation: none; } .build-model-chev { transition: none; } }
    /* A 44px target (the intake's touch contract) that reads as a quiet 32px ghost icon. */
    .composer .composer-bar .composer-attach { order: -1; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: -6px -6px -6px -10px; border-radius: 10px; color: var(--muted); }
    .composer .composer-bar .composer-attach svg { width: 17px; height: 17px; }
    .composer-bar .pine-start-button { height: 32px; min-height: 32px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font: 500 13px var(--font); transform: none; }
    .composer-bar .pine-start-button:hover:not(:disabled) { background: var(--j-hover-2); color: var(--text); }
    .composer-bar .pine-start-icon { display: grid; place-items: center; width: 32px; min-width: 32px; padding: 0; }
    .composer-bar .pine-start-icon .ic { width: 16px; height: 16px; }
    .composer-bar .build-model-btn { min-width: 0; }
    @container lab-composer (max-width: 300px) {
      .composer-bar { flex-wrap: wrap; row-gap: 6px; }
      .composer-bar .build-model { order: 3; flex: 1 0 100%; margin-left: 0; }
      .composer-bar .build-model + #go { margin-left: auto; }
    }
    #go { width: 36px; min-width: 36px; height: 36px; min-height: 36px; flex: none; margin-left: auto; padding: 0; border: 0; border-radius: 10px;
      background: rgb(var(--accent)); color: #fff; box-shadow: none; filter: none; transform: none; transition: background .12s var(--ease), color .12s var(--ease); }
    #go:hover:not(:disabled) { background: var(--j-accent-hover); }
    /* Grey until there is text: the only blue on an empty Lab is a Send that can actually send. */
    .composer-field:has(#prompt:placeholder-shown) #go, #go:disabled { background: var(--j-chip); color: var(--j-faint); opacity: 1; }
    #go .ic { width: 16px; height: 16px; stroke-width: 2; }

    /* ── chart pane ── */
    .ctoolbar { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px;
      border-bottom: 1px solid var(--line); background: var(--bg); min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .ctoolbar::-webkit-scrollbar { display: none; }
    .ctoolbar > * { flex: none; }
    /* A scroll mask, not a panel: same colour as the bar it sits on, faded in
       over a longer run so there is no visible edge. */
    .chart-context { display:flex; align-items:center; gap:10px; min-width:0; }
    /* Right side: "How it works" as quiet text, then Split and Fullscreen as ghost icons. */
    .ctoolbar .gbtn.tp-button-quiet, .ctoolbar #howItWorksBtn { height: 32px; min-height: 32px; border-color: transparent; background: transparent; color: var(--muted);
      font: 500 13px var(--font); box-shadow: none; transform: none; }
    .ctoolbar .gbtn.iconbtn.tp-button-quiet { width: 32px; min-width: 32px; padding: 0; }
    .ctoolbar .gbtn.tp-button-quiet:hover:not(:disabled), .ctoolbar #howItWorksBtn:hover:not(:disabled) { background: var(--j-hover-2); color: var(--text); }
    .ctoolbar #howItWorksBtn .ic { display: none; }
    @media (max-width: 900px) { .ctoolbar #howItWorksBtn .ic { display: block; } .ctoolbar #howItWorksBtn { width: 32px; min-width: 32px; padding: 0; justify-content: center; } }
    .ctoolbar #howItWorksBtn[aria-expanded='true'] { background: var(--j-chip); color: var(--text); }
    .chart-actions { position: sticky; right: -10px; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 20px;
      background: linear-gradient(90deg, transparent, var(--bg) 20px); }
    @container (max-width: 820px) {
      .chart-actions { gap: 5px; padding-left: 6px; }
      .chart-actions :is(.lbl,.lbl-hide) { display: none; }
      .ctoolbar, .chart-context { gap: 6px; }
      /* A narrow chart pane keeps the full market name and lets "How it works" become its book icon. */
      .ctoolbar #howItWorksBtn { width: 32px; min-width: 32px; padding: 0; justify-content: center; }
      .ctoolbar #howItWorksBtn .ic { display: block; }
      /* Clipped, not removed: the label stays the button's accessible name. */
      .ctoolbar #howItWorksBtn .lbl-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
      .ind-pill { padding-inline: 8px; }
      .ind-pill :is(#indPillName,#indPillVer) { display: none; }
      .tf-btn { padding-inline: 7px; }
    }
    .tdiv { width: 1px; height: 20px; background: rgba(255,255,255,.12); }
    .color-input-pop { position: fixed; z-index: 10040; width: 208px; padding: 9px; background: var(--raised); border: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); }
    .cip-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
    .cip-sw { width: 100%; aspect-ratio: 1; padding: 0; border-radius: 4px; border: 1px solid var(--line-2); cursor: pointer; }
    .cip-sw:hover { transform: scale(1.14); border-color: var(--accent-text); }
    .cip-sw.on { outline: 2px solid var(--accent-text); outline-offset: 1px; }
    .cip-row { margin-top: 8px; }
    .cip-hex { width: 100%; box-sizing: border-box; padding: 5px 7px; font-family: var(--mono); font-size: 11.5px; text-transform: lowercase; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 5px; color: var(--text); }
    .cip-hex.bad { border-color: var(--danger); }

    /* Hiding must be reversible. Only exists while collapsed, docked where the
       Builder was, so the way back is where the thing used to be: a plain arrow tab, no label. */
    .builder-reopen { display: none; }
    .lab[data-builder-collapsed] .builder-reopen {
      position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6;
      display: grid; place-items: center; width: 22px; height: 44px; padding: 0;
      border: 1px solid var(--line-2); border-left: 0;
      border-radius: 0 var(--r-sm) var(--r-sm) 0;
      background: var(--card-grad); color: var(--faint); cursor: pointer;
      box-shadow: var(--sh-card);
      transition: color .15s var(--ease), background .15s var(--ease); }
    .lab[data-builder-collapsed] .builder-reopen:hover { color: var(--text-2); background: var(--surface-2); }
    .lab[data-builder-collapsed] .builder-reopen:focus-visible { outline: 2px solid rgba(37,99,235,.5); outline-offset: 2px; }
    .lab[data-builder-collapsed] .builder-reopen .ic { width: 16px; height: 16px; }

    /* Collapse control at the chart toolbar's left edge, styled like the left menu's .tp-pane-collapse: a bare
       chevron, faint at rest and brighter on hover, that turns 180° while the Assistant is collapsed. */
    .ctoolbar .gbtn.builder-toggle { flex: none; width: 32px; min-width: 32px; height: 32px; min-height: 32px; margin-left: -6px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--faint); box-shadow: none; transition: color .15s var(--ease); }
    .ctoolbar .gbtn.builder-toggle:hover:not(:disabled) { background: transparent; color: var(--text-2); }
    .ctoolbar .gbtn.builder-toggle:focus-visible { outline: 2px solid rgba(37,99,235,.5); outline-offset: 2px; }
    .ctoolbar .builder-toggle .ic { width: 16px; height: 16px; transition: transform var(--m-layout, 280ms) var(--ease); }
    .lab[data-builder-collapsed] .ctoolbar .builder-toggle .ic { transform: rotate(180deg); }
    @media (prefers-reduced-motion: reduce) { .ctoolbar .builder-toggle .ic { transition: none; } }

    /* Body-mounted so the scrolling .tf-switch cannot clip it. */
    .tf-more-menu { position: fixed; z-index: 300; display: none; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 3px; width:min(280px,calc(100vw - 16px)); padding: 7px; background: var(--solid); border: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); max-height: 62vh; overflow-y: auto; }
    .tf-more-menu.open { display: grid; }
    .tf-more-entry { grid-column:1/-1; display:flex; align-items:center; gap:7px; margin-bottom:3px; }
    .tf-more-entry input { width:100%; min-width:0; height:34px; padding:0 10px; border:0; box-shadow:inset 0 0 0 1px var(--j-edge); border-radius:var(--r-input); background:var(--surface); color:var(--text); font:650 12px var(--mono); text-transform:uppercase; }
    .tf-more-entry input:focus { outline:none; box-shadow:inset 0 0 0 1px rgb(var(--accent)), 0 0 0 3px rgba(37,99,235,.14); }
    .tf-more-entry small { flex:none; color:var(--faint); font:550 10px var(--font); white-space:nowrap; }
    .tf-more-row { display: flex; align-items: center; gap: 1px; }
    .tf-more-menu button { height: 27px; font: 600 12px var(--font, inherit); background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; }
    .tf-more-pick { flex: 1 1 auto; min-width: 0; padding: 0 7px; text-align: left; }
    .tf-more-menu button:hover { color: var(--text); background: var(--surface-2); }
    .tf-more-pick.active { color:var(--text); background:var(--surface-2); }
    .tf-more-star { flex: none; width: 21px; padding: 0; font-size: 11px; line-height: 1; color: var(--ghost); }
    .tf-more-star.on { color: var(--accent-text); }
    .tspacer { flex: 1 !important; min-width: 10px; }
    /* active indicator pill → opens settings */
    .ind-pill { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px;
      border: 0; background: var(--raised); cursor: pointer; white-space: nowrap; }
    .ind-pill:hover { background: var(--j-hover-2); }
    .ip-dot { width: 7px; height: 7px; border-radius: 2px; background: #3b82f6; flex: none; }
    #indPillName { font-size: 13px; font-weight: 600; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
    .ind-pill .ic { width: 12px; height: 12px; stroke-width: 2; color: var(--j-faint); }
    .indicator-visibility { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px;
      color: var(--muted); background: transparent; border: 1px solid transparent; }
    .indicator-visibility:hover { color: var(--text); background: var(--surface); border-color: var(--line); }
    .indicator-visibility.is-hidden { color: var(--accent-text); background: rgba(37, 99, 235,.1); }
    .indicator-visibility.is-hidden::after { content: ''; position: absolute; width: 18px; height: 1px; background: currentColor; transform: rotate(-38deg); }
    /* Market + timeframe use the Backtester's one-row chart language: quiet at
       rest, a low-contrast fill for the active interval, and no blue capsule. */
    .mkt-select { appearance:none; -webkit-appearance:none; height:34px; display:flex; align-items:center; field-sizing:content;
      min-width:0; max-width:300px; text-overflow:ellipsis; background:var(--raised) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><path d="M1 1l3 3 3-3" stroke="%236f87ab" stroke-width="1.35" fill="none" stroke-linecap="round"/></svg>') no-repeat right 8px center;
      border:0; border-radius:8px; color:var(--text); background-position:right 12px center;
      font-family:var(--font); font-size:14px; font-weight:500; padding:0 30px 0 12px; cursor:pointer; }
    .mkt-select:hover { background-color:var(--j-hover-2); }
    .mkt-select:focus-visible { outline:2px solid rgba(37,99,235,.45); outline-offset:1px; border-color:transparent; }
    /* The Backtester's timeframe bar (lab-tf-bar.ts), drawn as one segmented control. */
    .tf-switch { display:flex; align-items:center; gap:2px; min-width:0; max-width:min(460px,42vw); padding:3px; border-radius:9px; background:var(--raised); overflow-x:auto; scrollbar-width:none; }
    .tf-switch::-webkit-scrollbar { display:none; }
    .tf-btn { flex:none; height:28px; background:transparent; border:0; color:var(--muted); font:500 13px var(--font);
      font-variant-numeric:tabular-nums; padding:0 10px; border-radius:7px; cursor:pointer; transition:color .12s var(--ease),background .12s var(--ease); }
    .tf-btn:hover { color:var(--text); background:transparent; }
    .tf-btn.active { background:var(--j-chip); color:var(--text); font-weight:600; box-shadow:none; }
    .tf-btn:focus-visible { outline:2px solid rgba(37,99,235,.45); outline-offset:1px; }
    .tbtn-accent { border-color: rgba(37, 99, 235,.4); background: rgba(37, 99, 235,.09); color: var(--accent-text); font-weight: 600; }
    .tbtn-accent:hover { background: rgba(37, 99, 235,.16); color: #cfe0ff; border-color: rgba(37, 99, 235,.4); }
    .tbtn-accent .ic { color: currentColor; }

    #chart { flex: 1; position: relative; min-width: 0; min-height: 0; }

    /* ── split screen (#329 / IL-5): independent comparison context, one focused workspace.
       The row is built at runtime by lab-panes.ts, so members who never split pay nothing for it. ── */
    .chart-split { flex: 1; display: flex; min-width: 0; min-height: 0; }
    .chart-split-col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative;
      outline: 1px solid transparent; outline-offset: -1px; }
    .chart-split-col > #chart { flex: 1 1 0; min-height: 0; }
    .chart-split-col.is-comparison-focused { outline-color: color-mix(in srgb,var(--accent) 60%,transparent); }
    .chart-split-pane { border-left: 1px solid var(--line); }
    .chart-split-pane.is-focused { outline-color: color-mix(in srgb,var(--accent) 64%,transparent); }
    /* The header is a ROW ABOVE the chart, the same height on both sides, so the HUD and the first
       candles are never under a control. It used to be an absolutely positioned strip over the pane. */
    .chart-split-header { flex: none; height: 34px; display:flex; align-items:center; gap:4px; padding:0 6px; overflow:hidden;
      border-bottom: 1px solid var(--line); background: var(--surface-1, var(--solid)); }
    .chart-split-focus { flex:none; padding:0 4px; color:var(--faint); font-size:12px; font-weight:500; }
    .chart-split-pane.is-focused .chart-split-focus, .chart-split-col.is-comparison-focused .chart-split-focus { color:var(--accent-text); }
    .chart-split-context { color: var(--muted); font: 600 11px/1 Switzer,Inter,sans-serif; }
    .chart-split-collapsed-note { display: none; margin-left: auto; color: var(--faint); font-size: 11px; }
    .chart-split-sync { flex:none; height:26px; padding:0 7px; border:1px solid var(--line); border-radius:7px; background:transparent;
      color:var(--muted); font:600 11px/1 Switzer,Inter,sans-serif; cursor:pointer; }
    .chart-split-sync[aria-pressed="true"] { color:var(--accent-text); background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
    .chart-split-sync:hover { color:var(--text); }
    .chart-split-sync:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
    .chart-split-select { min-width:0; height:26px; padding:0 24px 0 8px; border:0; box-shadow:inset 0 0 0 1px var(--j-edge);
      border-radius:var(--r-control); color:var(--text); font:600 11px/1 Switzer,Inter,sans-serif; appearance:none;
      background-color:var(--surface-2); background-repeat:no-repeat; background-position:right 7px center;
      background-size:8px 5px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%238b93a1' stroke-width='1.4'/%3E%3C/svg%3E"); }
    .chart-split-market { width:62px; flex:none; }
    .chart-split-timeframe { width:54px; flex:none; }
    .chart-split-reference { flex:1 1 60px; width:84px; min-width:44px; max-width:150px; }
    .chart-split-settings { width:27px; height:27px; flex:none; display:grid; place-items:center; padding:0;
      border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; }
    .chart-split-settings:hover { color:var(--text); background:var(--surface-2); border-color:var(--line); }
    .chart-split-settings[aria-pressed="false"] { color:var(--faint); opacity:.62; }
    .chart-split-settings:disabled { opacity:.28; cursor:default; }
    .chart-split-settings:focus-visible,.chart-split-select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
    .chart-split-surface { position: relative; flex: 1 1 0; min-height: 0; }
    .chart-split-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 6;
      pointer-events: none; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
      background: rgba(9,9,11,.82); backdrop-filter: blur(8px); color: var(--muted); font-size: 12px; }
    /* Narrow, in two steps. The Lab's default laptop layout (1280 wide, Assistant open) leaves the
       chart pane ~540 px, and the comparison must still be there: below 720 px the row STACKS —
       clean now that each chart has a header row instead of a strip over it. Below 520 px a chart
       would be shorter than it is useful, so the comparison collapses and the header says so; it
       comes back the moment the pane is wide enough. */
    @container (max-width: 720px) {
      .chart-split { flex-direction: column; }
      .chart-split-pane { border-left: 0; border-top: 1px solid var(--line); } }
    @container (max-width: 520px) {
      .chart-split-pane { display: none; }
      .chart-split-collapsed-note { display: inline; } }
    /* A quiet hint pinned bottom-centre, never a box over the candles. */
    /* Strategy results (#872 A4): docked over the chart's lower edge, collapsible to its header. */
    .strategy-results { position: absolute; left: 12px; right: 76px; bottom: 72px; z-index: 5; /* leaves the price and time axes and the chart-settings button clear */
      display: flex; flex-direction: column; max-height: min(50%, 400px); min-width: 0; color: var(--text);
      background: var(--pane); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-card); }
    .strategy-results .sr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 10px; min-width: 0;
      height: auto; z-index: auto; border-bottom: 0; background: none; backdrop-filter: none; } /* not the page header's 56px bar */
    .strategy-results .sr-toggle { flex: none; padding: 4px 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
      background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
    .strategy-results .sr-toggle::after { content: '⌄'; display: inline-block; margin-left: 6px; color: var(--muted); }
    .strategy-results[data-open="false"] .sr-toggle::after { transform: rotate(180deg); }
    .strategy-results .sr-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
    .strategy-results .sr-note { min-width: 0; font-size: 11.5px; color: var(--muted); } /* never truncated: it qualifies every figure */
    .strategy-results .sr-body { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); }
    .strategy-results .sr-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); margin: 0; border-bottom: 1px solid var(--line); }
    .strategy-results .sr-figure { padding: 6px 10px; min-width: 0; box-shadow: inset -1px 0 var(--line), inset 0 -1px var(--line); }
    .strategy-results .sr-figure dt { font-size: 11px; color: var(--muted); }
    .strategy-results .sr-figure dd { margin: 2px 0 0; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .strategy-results [data-tone="up"] { color: var(--ok-text, var(--ok)); }
    .strategy-results [data-tone="down"] { color: var(--danger); }
    .strategy-results .sr-trades-wrap { min-height: 0; overflow: auto; }
    .strategy-results .sr-trades { width: 100%; border-collapse: collapse; font-size: 12px; }
    .strategy-results .sr-trades caption { padding: 6px 10px; text-align: left; font-size: 11px; color: var(--muted); }
    .strategy-results .sr-trades th { position: sticky; top: 0; padding: 4px 10px; text-align: left; font-weight: 500; color: var(--muted); background: var(--pane); white-space: nowrap; }
    .strategy-results .sr-trades td { padding: 4px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
    .strategy-results .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
    /* #1138: the tabs and the period sit in the header, which wraps on a narrow chart; each view scrolls inside the panel. */
    .strategy-results .sr-controls { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; }
    .strategy-results[data-open="false"] .sr-controls { visibility: hidden; }
    .strategy-results .sr-tabs { display: flex; gap: 2px; }
    .strategy-results .sr-tab, .strategy-results .sr-preset { padding: 3px 8px; font: inherit; font-size: 12px; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
    .strategy-results .sr-tab[aria-selected="true"], .strategy-results .sr-preset[aria-pressed="true"] { color: var(--text); background: var(--surface-2); border-color: var(--line); }
    .strategy-results .sr-tab:focus-visible, .strategy-results .sr-preset:focus-visible, .strategy-results .sr-period input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
    .strategy-results .sr-period { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11.5px; color: var(--muted); }
    .strategy-results .sr-period label { display: inline-flex; align-items: center; gap: 4px; }
    .strategy-results .sr-period input { padding: 2px 4px; font: inherit; font-size: 12px; color: var(--text); background: var(--pane); border: 1px solid var(--line); border-radius: 6px; color-scheme: dark; }
    html[data-theme="light"] .strategy-results .sr-period input { color-scheme: light; }
    .strategy-results .sr-span, .strategy-results .sr-partial { margin: 0; padding: 6px 10px; font-size: 11.5px; color: rgb(var(--warn)); border-bottom: 1px solid var(--line); }
    .strategy-results .sr-view { flex: 1 1 auto; min-height: 0; overflow: auto; }
    .strategy-results .sr-view[hidden] { display: none; }
    .strategy-results .sr-pnl { display: flex; flex-direction: column; padding: 6px 10px; }
    .strategy-results .sr-pnl-head, .strategy-results .sr-pnl-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }
    .strategy-results .sr-pnl-head [data-tone] { font-family: var(--mono); font-size: 13px; }
    .strategy-results .sr-pnl-chart { display: block; flex: 1 1 auto; width: 100%; height: auto; min-height: 72px; max-height: 220px; margin: 4px 0; }
    .strategy-results .sr-pnl-zero { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
    .strategy-results .sr-pnl-line { fill: none; stroke: var(--muted); stroke-width: 1.75; }
    .strategy-results .sr-pnl-line[data-tone="up"] { stroke: var(--ok-text, var(--ok)); }
    .strategy-results .sr-pnl-line[data-tone="down"] { stroke: var(--danger); }
    .strategy-results .sr-empty { margin: 12px 0; font-size: 12px; color: var(--muted); }
    .strategy-results .sr-stats { width: 100%; border-collapse: collapse; font-size: 12px; }
    .strategy-results .sr-stats caption { caption-side: bottom; padding: 6px 10px; text-align: left; font-size: 11px; color: var(--muted); }
    .strategy-results .sr-stats th, .strategy-results .sr-stats td { padding: 4px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
    .strategy-results .sr-stats thead th { position: sticky; top: 0; border-top: 0; font-weight: 500; color: var(--muted); background: var(--pane); text-align: left; }
    .strategy-results .sr-stats thead th.num { text-align: right; }
    .strategy-results .sr-stats tbody th { font-weight: 400; color: var(--muted); text-align: left; }
    @media (hover: none) and (pointer: coarse) { .strategy-results .sr-toggle, .strategy-results .sr-tab, .strategy-results .sr-preset { min-height: var(--tp-touch-target); } }
    @media (max-width: 600px) { .strategy-results { left: 8px; right: 68px; max-height: 48%; }
      .strategy-results .sr-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strategy-results .sr-figure { padding: 5px 8px; } }
    #chartEmpty { position: absolute; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; pointer-events: none;
      padding: 10px 14px; border: 0; border-radius: 10px; background: var(--raised); box-shadow: 0 0 0 1px var(--j-chip); backdrop-filter: none;
      color: var(--muted); font: 400 13px/18px var(--font); white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
    .chart-state { position: absolute; z-index: 11; top: 58px; left: 50%; max-width: min(540px, calc(100% - 28px)); min-height: 42px;
      transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 11px;
      border: 1px solid var(--line-2); border-radius: 12px; background: color-mix(in srgb, var(--solid) 94%, transparent);
      box-shadow: 0 16px 38px -26px rgba(0,0,0,.72); backdrop-filter: blur(16px); }
    .chart-state-signal { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 4px rgba(37, 99, 235,.1); }
    .chart-state-copy { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
    .chart-state-copy b { flex: none; color: var(--text); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
    .chart-state-copy > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
    .chart-state > button { min-height: 28px; margin-left: 2px; padding: 0 9px; font-size: 10.5px; }
    .chart-state.kind-loading .chart-state-signal, .chart-state.kind-catching-up .chart-state-signal,
    .chart-state.kind-stale .chart-state-signal { animation: chart-state-pulse 1.2s var(--ease) infinite; }
    .chart-state.kind-disconnected .chart-state-signal, .chart-state.kind-render-failed .chart-state-signal {
      background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent); }
    .chart-state.kind-hidden .chart-state-signal { background: var(--faint); box-shadow: none; }
    .chart-state.is-blocking { top: 50%; min-width: min(390px, calc(100% - 32px)); min-height: 116px; padding: 20px;
      transform: translate(-50%,-50%); align-items: flex-start; flex-wrap: wrap; box-shadow: var(--sh-card); }
    .chart-state.is-blocking::before { content: ''; position: fixed; inset: 48px 0 0; z-index: -1; background: color-mix(in srgb, var(--bg) 22%, transparent); }
    .chart-state.is-blocking .chart-state-signal { margin-top: 6px; }
    .chart-state.is-blocking .chart-state-copy { flex: 1; align-items: flex-start; flex-direction: column; gap: 4px; }
    .chart-state.is-blocking .chart-state-copy b { font-size: 14px; }
    .chart-state.is-blocking .chart-state-copy > span { overflow: visible; font-size: 12px; line-height: 1.5; text-overflow: initial; white-space: normal; }
    .chart-state.is-blocking > button { margin: 4px 0 0 17px; }
    @keyframes chart-state-pulse { 50% { opacity: .36; transform: scale(.76); } }

    /* Historical inspection rail — compact chart instrument, not a replay/trading footer. */
    .replay-bar { position: absolute; left: 50%; bottom: calc(36px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8;
      display: flex; align-items: center; gap: 7px; padding: 7px 9px 7px 7px; max-width: calc(100% - 16px);
      border-radius: 15px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--solid) 94%, transparent); backdrop-filter: blur(18px);
      box-shadow: 0 18px 46px -24px rgba(0,0,0,.5), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
      animation: rail-fade .18s var(--ease) both; user-select: none; }
    @keyframes rail-fade { from { opacity: 0; } to { opacity: 1; } }
    .replay-bar.dragging { cursor: grabbing; box-shadow: 0 24px 56px -22px rgba(0,0,0,.58), 0 0 0 2px rgba(37, 99, 235,.12); }
    .rp-grip { width: 14px; height: 32px; flex: none; display: grid; grid-template-columns: repeat(2, 3px); place-content: center; gap: 3px;
      padding: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: grab; touch-action: none; }
    .rp-grip:hover, .rp-grip:focus-visible { background: var(--surface); color: var(--muted); outline: none; }
    .rp-grip:active { cursor: grabbing; }
    .rp-grip span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; pointer-events: none; }
    .rp-primary, .rp-secondary { display: flex; align-items: center; gap: 5px; }
    .rp-primary { padding-right: 7px; border-right: 1px solid var(--line); }
    .rp-position { min-width: 112px; max-width: 132px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      color: var(--muted); font: 500 12px/1.2 var(--font); text-align: center; font-variant-numeric: tabular-nums; }
    .rp-btn { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 9px; background: transparent; border: 1px solid transparent; color: var(--sec); cursor: pointer; padding: 0;
      transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease); }
    .rp-btn:hover { border-color: rgba(37, 99, 235,.55); background: rgba(37, 99, 235,.12); }
    .rp-btn .ic { width: 14px; height: 14px; }
    .rp-btn.active { background: var(--accent-grad); border-color: transparent; color: #ffffff; }
    .rp-btn:focus-visible, .rp-wide:focus-visible, .rp-speed:focus-visible { outline: 2px solid rgba(37, 99, 235,.55); outline-offset: 2px; }
    .rp-play { border-radius: 50%; background: var(--accent-grad); color: #ffffff; box-shadow: 0 5px 14px -8px rgba(37,99,235,.75); }
    .rp-play:hover { color: #ffffff; filter: brightness(1.04); }
    .rp-close { color: var(--muted); }
    .rp-wide { height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px;
      border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--sec);
      font-size: 11.5px; font-weight: 650; white-space: nowrap; gap: 4px; }
    .rp-wide:hover { border-color: rgba(37,99,235,.48); background: rgba(37, 99, 235,.11); }
    .rp-jump-menu { position: absolute; right: 10px; bottom: calc(100% + 8px); width: 260px; padding: 7px;
      border: 0; border-radius: var(--r-card); background: var(--solid); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); }
    .rp-jump-menu > button { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 10px; border-radius: var(--r-control); background: transparent; color: var(--text); font-size: 12px; text-align: left; }
    .rp-jump-menu > button:hover { background: var(--surface-2); }
    .rp-jump-menu > button span { color: var(--muted); font: 12px var(--font); font-variant-numeric: tabular-nums; }
    .rp-date-row { margin-top: 5px; padding: 8px 9px 5px; border-top: 1px solid var(--line); }
    .rp-date-row label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
    .rp-date-row > div { display: flex; gap: 6px; }
    .rp-date-row input { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border-radius: 8px; font: 12px var(--font); font-variant-numeric: tabular-nums; }
    .rp-date-row button { width: 40px; border-radius: 8px; background: var(--accent-grad); color: #ffffff; font-size: 11px; font-weight: 700; }
    .replay-bar.loading::after { content: ''; position: absolute; inset: -1px; border: 1px solid rgba(37, 99, 235,.7);
      border-radius: inherit; pointer-events: none; animation: rp-load 1s ease-in-out infinite alternate; }
    @keyframes rp-load { from { opacity: .25 } to { opacity: 1 } }
    #chart.selecting { cursor: crosshair; }
    .rp-glyph { font-size: 15px; line-height: 1; }
    .rp-speed-wrap { height: 32px; display: flex; align-items: center; gap: 5px; padding: 0 5px 0 8px; border: 1px solid var(--line);
      border-radius: 9px; background: var(--surface); color: var(--j-faint); font: 500 12px var(--font); }
    .rp-speed { width: 48px; height: 26px; appearance: none; background: transparent; border: 0; color: var(--text);
      border-radius: 6px; font: 600 12px var(--font); font-variant-numeric: tabular-nums; padding: 0 5px; cursor: pointer; text-align: center; }
    .rp-speed option { color: var(--text); background: var(--solid); }
    @media (max-width: 680px) {
      .replay-bar { gap: 5px; padding: 7px 9px; }
      #rpPrevSession { display: none; }
      .rp-position { min-width: 92px; max-width: 102px; }
      .rp-speed-wrap { display: none; }
      .rp-jump-menu { right: 0; }
    }
    @media (max-width: 500px) {
      .rp-position { display: none; }
      .rp-primary { padding-right: 4px; }
      .rp-grip { display: none; }
    }

    /* Code is a real drawer in the chart column. It consumes space instead of covering candles,
       and its horizontal separator shares the same pointer + keyboard contract as the side rails. */
    .code-splitter { position:relative; z-index:12; width:auto; height:7px; flex:0 0 7px; margin:0; padding:0;
      border:0; background:var(--pane); cursor:row-resize; touch-action:none; }
    .code-splitter::after { content:''; position:absolute; inset:2px 0; background:transparent; transition:background .14s var(--ease); }
    .code-splitter:hover::after,.code-splitter:focus-visible::after,.code-splitter.dragging::after {
      background:color-mix(in srgb,var(--accent-text) 58%,transparent); }
    .code-splitter:focus-visible { outline:none; }
    body.resizing-code { cursor:row-resize; user-select:none; }
    #code { position: relative; z-index: 6; display:flex; flex-direction:column;
      flex:0 0 var(--code-h,260px); min-width:0; min-height:220px; max-height:none;
      margin:0; padding:0; overflow:hidden; background:var(--solid); color:var(--sec); }
    .code-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
      flex:none; gap:10px 16px; padding:12px 16px; border-bottom:1px solid var(--line-2); background:var(--pane); }
    .code-heading { display:flex; flex-direction:column; gap:3px; flex:1 1 140px; min-width:0; }
    .code-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--text); }
    .code-heading span { font-size:11px; color:var(--muted); }
    .code-actions { display:flex; align-items:center; flex:none; gap:8px; font-family:var(--font); }
    .code-actions .tp-button { min-height:36px; white-space:nowrap; }
    .code-actions .code-close { width:36px; padding:0; font-size:20px; }
    .code-actions .code-download { width:36px; padding:0; }
    .code-actions .code-download .ic { width:16px; height:16px; }
    .code-source { flex:1 1 auto; min-height:0; min-width:0; margin:0; padding:14px 18px;
      overflow:auto; white-space:pre; tab-size:4; font:12px/1.7 var(--mono); color:var(--text); }
    .code-source:focus-visible { outline:2px solid var(--accent-text); outline-offset:-2px; }
    .code-status { flex:none; padding:8px 16px; border-top:1px solid var(--line-2);
      font:11px/1.5 var(--font); color:var(--muted); overflow-wrap:anywhere; }
    @container (max-width: 440px) {
      .code-header { gap:8px; padding:10px 12px; }
      .code-heading { flex-basis:100%; }
      .code-actions { width:100%; }
      .code-actions .tp-button { min-height:44px; }
      .code-actions .code-close { margin-left:auto; width:44px; }
      .code-actions .code-download { width:44px; }
      .code-source { padding:12px; }
      .code-status { padding:7px 12px; }
    }
    .code-lock { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 460px; margin: 6px auto 10px;
      padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card-grad);
      font-family: var(--font); white-space: normal; }
    .code-lock .cl-h { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
    .code-lock .cl-t { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
    .cd-btn.gold { background: var(--accent-grad); border-color: transparent; color: #ffffff; }
    .cd-btn.gold:hover { filter: brightness(1.08); }

    /* ── "why?" popover: click a marking → the reason, from the bars ── */
    .why-pop { position: absolute; z-index: 9; width: 280px; max-width: calc(100% - 16px);
      background: var(--raised); border: 0; border-radius: var(--r-card);
      box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); padding: 0 0 10px; }
    .why-head { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
    .why-head .ic { width: 13px; height: 13px; color: #f0c974; }
    .why-title { font-size: 12.5px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .why-when { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--j-faint); flex: none; }
    .why-x { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; flex: none; }
    .why-x:hover { color: var(--text); }
    .why-lead { padding: 9px 12px 2px; font-size: 12px; font-weight: 600; color: var(--faint); }
    .why-line { display: flex; gap: 8px; padding: 4px 12px; font-size: 12px; line-height: 1.45; color: var(--sec); }
    .why-line .wmark { flex: none; font-weight: 700; color: var(--ok-text); }
    .why-line.fail .wmark { color: var(--diff-red); }
    .why-line .wnum { font-size: 12px; font-variant-numeric: tabular-nums; }

    /* ── community modal ── */
    /* Community library (TP1 v2, the "Community library" canvas frame). One blue action per view: the featured
       card's Preview. Sorts are one segmented control, statuses are plain text, and every thumbnail is drawn
       from the item's real preview data (community-thumb.ts). */
    .co { position: absolute; inset: 0; z-index: 26; display: flex; justify-content: center; align-items: flex-start; padding: 40px 28px;
      background: rgba(0,0,0,.62); animation: coin .2s var(--ease) both; }
    @keyframes coin { from { opacity: 0 } }
    .co-sheet { position: relative; width: min(1120px, 100%); max-height: 100%; display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-card);
      border: 0; background: var(--pane); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow);
      overflow: hidden; animation: cosheet .28s var(--spring) both; }
    @keyframes cosheet { from { opacity: 0; transform: translateY(14px) scale(.985) } }
    .co-head { flex: none; display: flex; align-items: flex-start; gap: 16px; padding: 26px 28px 0; }
    .co-title { flex: 1; min-width: 0; }
    .co-title h2 { margin: 0; color: var(--text); font: 700 22px/28px var(--font); letter-spacing: -.015em; }
    .co-title p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 20px; }
    #coClose { width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: -2px -6px 0 0; border-radius: var(--r-control); color: var(--muted); font-size: 20px; }
    #coClose:hover { color: var(--text); background: var(--j-hover-2); }
    .co-controls { flex: none; display: flex; align-items: center; gap: 16px; padding: 18px 28px 20px; }
    .co-tabs { display: inline-flex; align-items: center; gap: 2px; height: auto; margin: 0; padding: 3px; border: 0; border-radius: var(--r-tile); background: var(--raised); }
    .co-tab { height: 30px; border: 0; background: none; color: var(--muted); font: 500 14px var(--font); padding: 0 12px; border-radius: var(--r-control); cursor: pointer; box-shadow: none;
      transition: color .12s var(--ease), background .12s var(--ease); }
    .co-tab:hover { color: var(--text); }
    .co-tab.active { background: var(--j-chip); color: var(--text); font-weight: 600; box-shadow: none; }
    .co-tab:focus-visible, .co-feature-row:focus-visible, .ccard-open:focus-visible, .co-primary:focus-visible, .co-quiet:focus-visible,
    .ccard-add:focus-visible, .vpill:focus-visible, .co-feature-visual:focus-visible { outline: 2px solid rgba(37,99,235,.5); outline-offset: 2px; }
    .co-search { position: relative; width: 280px; max-width: 100%; margin-left: auto; display: flex; align-items: center; }
    .co-search .ic { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--j-faint); pointer-events: none; }
    .co-search input { width: 100%; height: 36px; min-height: 36px; padding: 0 12px 0 32px; border: 0; border-radius: var(--r-input); background: var(--raised);
      color: var(--text); font: 400 14px var(--font); box-shadow: none; }
    .co-search input::placeholder { color: var(--j-faint); }
    .co-search input:focus { outline: 2px solid rgba(37,99,235,.5); outline-offset: 0; box-shadow: none; background: var(--j-hover-2); }
    .co-body { flex: 1; display: flex; min-height: 200px; position: relative; }
    .co-catalog { flex: 1; min-width: 0; overflow-y: auto; padding: 0 28px calc(28px + env(safe-area-inset-bottom)); }
    .co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-content: start; }
    .co-empty { grid-column: 1 / -1; margin-top: 24px; padding: 40px 20px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }
    .co-empty strong { display: block; color: var(--text); font-size: 15px; font-weight: 600; }
    .co-empty small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
    .co-empty .tp-button { margin-top: 14px; }

    .co-feature { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; margin: 0 0 24px; }
    .co-feature-lead { min-width: 0; display: grid; grid-template-columns: minmax(0, 420px) minmax(310px, 1fr); overflow: hidden; border-radius: var(--r-card); background: var(--raised); }
    .co-feature-visual { position: relative; min-height: 236px; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--raised); cursor: pointer; }
    .co-feature-visual > svg, .ccard-thumb > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .co-feature-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 22px; }
    .co-feature-eye { color: var(--muted); font: 400 13px/18px var(--font); }
    .co-feature-copy > strong { margin-top: 6px; max-width: 100%; overflow: hidden; color: var(--text); font: 700 24px/30px var(--font); letter-spacing: -.015em;
      text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .co-feature-by { margin-top: 6px; color: var(--j-faint); font: 400 14px/20px var(--font); }
    .co-feature-by b { color: var(--text-2); font-weight: 400; }
    .co-feature-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
    .co-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; }
    .co-primary { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; border-radius: var(--r-control);
      background: rgb(var(--accent)); color: #fff; font: 600 15px var(--font); cursor: pointer; transition: background .12s var(--ease); }
    .co-primary:hover { background: var(--j-accent-hover); }
    .co-primary .ic { width: 15px; height: 15px; }
    .co-quiet { height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-2); font: 500 14px var(--font); cursor: pointer; }
    .co-quiet:hover { color: var(--text); background: var(--j-hover-2); }
    .co-feature-support { min-width: 0; padding: 16px 10px 10px; border-radius: var(--r-card); background: var(--raised); }
    .co-feature-support h3 { margin: 0 8px 6px; color: var(--text-2); font: 600 14px/20px var(--font); }
    .co-feature-support ol { margin: 0; padding: 0; list-style: none; }
    .co-feature-row { width: 100%; min-height: 56px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 8px;
      border: 0; border-radius: var(--r-card); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
    .co-feature-row:hover { background: var(--j-hover-2); }
    .co-rank { color: var(--ghost); font: 700 14px var(--font); font-variant-numeric: tabular-nums; }
    .co-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .co-row-copy strong { overflow: hidden; font: 600 14px/19px var(--font); text-overflow: ellipsis; white-space: nowrap; }
    .co-row-copy small { overflow: hidden; color: var(--j-faint); font: 400 12px/16px var(--font); text-overflow: ellipsis; white-space: nowrap; }
    .co-feature .script-kind-badge, .ccard .script-kind-badge { color: var(--muted); font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; }

    .ccard { position: relative; display: flex; flex-direction: column; border: 0; border-radius: var(--r-card); background: var(--raised);
      overflow: hidden; transition: transform .15s ease, background .15s ease;
      animation: cardin .38s var(--spring) both; animation-delay: calc(min(var(--i), 16) * 26ms); }
    .ccard-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
    .ccard-open:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }
    .ccard:hover { background: var(--j-hover-2); box-shadow: none; }
    @keyframes cardin { from { opacity: 0; transform: translateY(8px) } }
    .ccard.gone { animation: cardout .26s var(--ease) both; }
    @keyframes cardout { to { opacity: 0; transform: scale(.92) } }
    .ccard-thumb { position: relative; height: 140px; background: var(--pane); border: 0; }
    .ccard-thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--j-faint); font: 400 12px var(--font); }
    .community-thumb .thumb-area { fill: rgba(160,157,150,.07); stroke: none; }
    .community-thumb .thumb-price { stroke: var(--j-faint); }
    .ccard-body { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .ccard-title { color: var(--text); font: 600 15px/20px var(--font); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ccard-pick { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font: 600 12px/16px var(--font); }
    .ccard-pick .ic { width: 12px; height: 12px; }
    .cd-badge.pick { color: var(--muted); border-color: var(--line-2); background: transparent; }
    .ccard-lineage { color: var(--j-faint); font: 400 12px/16px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ccard-meta { display: flex; align-items: center; gap: 0; min-width: 0; color: var(--j-faint); font: 400 13px/18px var(--font); }
    .ccard-meta > * + *::before { content: '·'; margin: 0 5px; }
    .ccard-meta .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chip-you { flex: none; color: var(--text-2); font: 500 13px var(--font); }
    .ccard-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px; }
    .vpill { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: var(--r-tile); background: var(--j-chip);
      color: var(--text-2); font: 600 13px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: none; transition: background .12s var(--ease), color .12s var(--ease); flex: none; }
    .vpill .ic { width: 10px; height: 10px; }
    .vpill:hover { background: var(--j-chip-hover); color: var(--text); }
    .vpill.voted { color: rgb(var(--accent-hi)); background: rgba(37,99,235,.12); box-shadow: none; }
    .vpill.pop { animation: vpop .32s var(--spring); }
    @keyframes vpop { 40% { transform: scale(1.12) } }
    .cstat { display: inline-flex; align-items: center; gap: 5px; color: var(--j-faint); font: 400 13px var(--font); font-variant-numeric: tabular-nums; flex: none; }
    .cstat .ic { width: 13px; height: 13px; }
    .co-feature-row .cstat { font-size: 12px; }
    .co-feature-row .cstat .ic { width: 12px; height: 12px; }
    .ccard-add { margin-left: auto; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-control); background: transparent;
      color: var(--text-2); font: 500 13px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
    .ccard-add:hover { color: var(--text); background: var(--j-chip); }
    .ccard-del { border: 0; background: none; color: var(--j-faint); min-width: 30px; height: 30px; border-radius: var(--r-control); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 14px; opacity: 0; transition: all .15s var(--ease); flex: none; }
    .ccard-del + .ccard-add { margin-left: 0; }
    .ccard:hover .ccard-del, .ccard-del:focus-visible { opacity: 1; }
    .ccard-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
    .ccard-del.arm { opacity: 1; color: #fff; background: #d2434f; font-size: 12px; font-weight: 600; padding: 0 9px; }
    .ccard-foot:has(.ccard-del) .ccard-del { margin-left: auto; }

    .co-detail { width: 442px; max-width: 100%; flex: none; border-left: 1px solid var(--line); background: rgba(13,13,16,.55);
      display: flex; flex-direction: column; min-height: 0; animation: detin .26s var(--spring) both; }
    @keyframes detin { from { opacity: 0; transform: translateX(16px) } }
    .cd-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
    .cd-back { border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 3px 7px; border-radius: var(--r-control); }
    .cd-back:hover { color: var(--text); background: var(--surface-2); }
    .cd-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cd-scroll { flex: 1; overflow-y: auto; min-height: 0; }
    .cd-chart { position: relative; height: 218px; margin: 14px 16px 0; border-radius: var(--r-card); border: 1px solid var(--line); overflow: hidden; background: #0a0c12; }
    .cd-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 12.5px; }
    .cd-sec { padding: 13px 16px 0; }
    .cd-authorrow { display: flex; align-items: center; gap: 10px; }
    .cd-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); background: var(--surface-2); flex: none; }
    .cd-av-ph { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 13px; color: #0b1220; background: #bcd4ff; }
    .cd-author { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
    .cd-when { color: var(--j-faint); font-size: 12px; margin-top: 1px; font-variant-numeric: tabular-nums; }
    .cd-badges { margin-left: auto; display: flex; gap: 6px; }
    .cd-badge { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
    .cd-access { margin: 13px 16px 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
    .cd-access strong { color: var(--text); font-size: 11.5px; }
    .cd-access span { color: var(--faint); font-size: 10.5px; line-height: 1.45; }
    .cd-access.owner, .cd-access.unlocked { border-color: var(--line); background: var(--surface); }
    .cd-lineage { padding: 10px 16px 0; font-size: 12px; color: var(--faint); }
    .cd-lineage button { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--muted); cursor: pointer; }
    .cd-lineage button:hover { color: var(--text); text-decoration: underline; }
    .cd-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 4px; }
    .cd-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
      font: inherit; font-size: 12.5px; font-weight: 650; padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer; transition: all .15s var(--ease); }
    .cd-btn .ic { width: 14px; height: 14px; }
    .cd-btn:hover { border-color: rgba(37, 99, 235,.5); background: rgba(37, 99, 235,.12); }
    .cd-btn.primary { background: var(--accent-grad); border-color: transparent; color: #ffffff; box-shadow: var(--sh-send); }
    .cd-btn.primary:hover { filter: brightness(1.08); }
    .cd-btn.danger { color: #f2969e; }
    .cd-btn.danger:hover { border-color: rgba(242,109,109,.5); background: rgba(242,109,109,.1); }
    .cd-btn.danger.arm { background: #d2434f; border-color: transparent; color: #fff; }
    .cd-comments { padding: 6px 16px 14px; }
    .cd-chead { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 10px 0 6px; }
    .cmt { display: flex; gap: 9px; padding: 7px 0; }
    .cmt-av { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; border: 1px solid var(--line-2); background: var(--surface-2); }
    .cmt-av-ph { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); }
    .cmt-b { min-width: 0; }
    .cmt-a { font-size: 12px; font-weight: 650; }
    .cmt-a span { color: var(--j-faint); font-weight: 400; font-size: 12px; margin-left: 6px; }
    .cmt-t { font-size: 13px; line-height: 1.5; color: #cbd2de; white-space: pre-wrap; word-break: break-word; margin-top: 1px; }
    .cd-composer { display: flex; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.012); }
    .cd-input { flex: 1; background: var(--bg-2); border: 0; box-shadow: inset 0 0 0 1px var(--j-edge); border-radius: var(--r-input); color: var(--text); font: inherit; font-size: 12.5px; padding: 8px 11px; outline: none; }
    .cd-input:focus { border-color: rgba(37, 99, 235,.5); }
    .cd-send { background: var(--j-chip); border: 0; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--r-control); cursor: pointer; }
    .cd-send:hover:not(:disabled) { background: var(--j-chip-hover); }
    /* One blue action per view: with details open, their Preview is the primary, so the featured card's steps back. */
    .co-body:has(> .co-detail:not([hidden])) .co-primary { background: var(--j-chip); color: var(--text); }
    .cd-send:disabled { opacity: .5; cursor: default; }
    .cd-loading { margin: 18px; }
    .cd-failed { min-height: 100%; }
    @media (max-width: 860px) {
      .co { padding: 0; }
      .co-sheet { border-radius: 0; box-shadow: none; width: 100%; max-height: 100%; padding-top: env(safe-area-inset-top); }
      .co-detail { position: absolute; inset: 0; width: 100%; border-left: 0; background: rgba(10,10,12,.99); }
      .co-head { padding: 18px 16px 0; }
      .co-controls { flex-wrap: wrap; gap: 12px; padding: 14px 16px 16px; }
      .co-search { order: 10; flex-basis: 100%; width: auto; margin-left: 0; }
      .co-catalog { padding-inline: 16px; }
      .co-feature { grid-template-columns: 1fr; }
      .co-feature-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    }
    @media (max-width: 560px) {
      .co-title h2 { font-size: 20px; line-height: 26px; }
      .co-title p { font-size: 13px; }
      .co-tabs { width: 100%; overflow-x: auto; }
      .co-tab { flex: 1; min-width: max-content; }
      .co-feature-lead { grid-template-columns: 1fr; }
      .co-feature-visual { min-height: 150px; }
      .co-feature-copy { padding: 18px; }
      .co-feature-copy > strong { font-size: 20px; line-height: 26px; }
      .co-grid { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) { .co, .co-sheet, .ccard, .co-detail, .vpill.pop { animation: none; } }
    /* touch: reveal hover-only controls, grow small targets */
    @media (hover: none) {
      .saved-item .si-del, .saved-item .si-test, .ccard-del { opacity: .75; }
      .fb-btn { padding: 7px 11px; }
      .tf-btn { padding: 0 12px; }
    }

    /* settings panel (⚙ inputs) — legend header itself is hidden; the toolbar pill opens this */
    .legend { display: none; }
    /* ── indicator settings popout: the Backtester's sheet, on the Lab's tokens ──
       One list in Pine's own order and grouping (indicator-settings-form.ts); a colour sits in
       the row that uses it. Density is the tell: 42px rows, a 720px sheet, native Pine scale. */
    .indset-modal { position: absolute; inset: 0; z-index: 26; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .indset-modal.tp-modal-backdrop { background: transparent; }
    .indset-sheet { width: min(720px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; min-height: 0; overflow: hidden;
      background: var(--solid); border: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); animation: pop .18s var(--spring) both; }
    .indset-head { flex: none; min-height: 70px; display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
    .indset-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .indset-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: 600 15px var(--font); }
    .indset-head > div > span:last-child { font: 500 12px var(--font); color: var(--faint); }
    .indset-close { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; }
    .indset-close:hover { color: var(--text); background: var(--surface-2); }
    .indset-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .indform { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--solid); }
    .indset-panels { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
    .indset-panel { display: block; padding: 16px 22px 28px; }
    .if-group { margin: 20px 0 5px; padding: 0 2px; font: 600 12px var(--font); color: var(--faint); }
    .if-group:first-child { margin-top: 0; }
    .ifield { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 232px); align-items: center; gap: 18px; min-height: 42px; padding: 5px 2px; border-bottom: 1px solid var(--line); }
    .ifield:last-child { border-bottom: 0; }
    .if-copy { min-width: 0; display: flex; align-items: center; gap: 8px; }
    .if-copy label { min-width: 0; color: var(--sec); font: 500 12.5px/1.35 var(--font); }
    .if-info { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; color: var(--faint); background: var(--surface-2); font: 700 9px var(--font); cursor: help; }
    button.if-info:hover:not(:disabled), button.if-info:focus-visible { color: var(--text); background: var(--surface-2); border-color: transparent; transform: none; }
    .ind-input-tooltip { position: absolute; z-index: 30; width: max-content; max-width: min(320px, calc(100% - 24px)); padding: 9px 11px; border: 0; border-radius: var(--r-tile); background: var(--solid); color: var(--text); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); font: 500 11.5px/1.42 var(--font); letter-spacing: 0; white-space: pre-line; text-align: left; pointer-events: none; }
    .ind-input-tooltip::before { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; }
    .ind-input-tooltip[data-side="right"]::before { right: 100%; top: calc(50% - 6px); border-right-color: var(--line-2); }
    .ind-input-tooltip[data-side="left"]::before { left: 100%; top: calc(50% - 6px); border-left-color: var(--line-2); }
    .ind-input-tooltip[data-side="below"]::before { bottom: 100%; left: calc(50% - 6px); border-bottom-color: var(--line-2); }
    .if-inline { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px; padding: 4px 2px; border-bottom: 1px solid var(--line); }
    .if-inline > .ifield { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border-bottom: 0; }
    .if-inline > .ifield > .if-copy { flex: none; }
    .if-inline > .ifield:first-child { flex: 1 1 auto; min-width: 0; }
    .if-inline > .ifield:first-child > .if-copy { flex: 1 1 auto; min-width: 0; }
    .if-inline > .ifield > :is(input,select,textarea) { width: auto; min-width: 0; }
    .if-inline > .ifield > select { min-width: 108px; }
    .if-inline > .ifield > input[type="number"] { width: 84px; }
    .ifield[data-inactive="1"] { opacity: .48; }
    .ifield[data-inactive="1"] :is(input,select,textarea) { cursor: not-allowed; }
    .ifield > input[type="number"], .ifield > input[type="text"], .ifield > input[type="datetime-local"], .ifield > select, .ifield > textarea { justify-self: stretch; width: 100%; height: 32px; padding: 0 10px; border: 0; box-shadow: inset 0 0 0 1px var(--j-edge); border-radius: var(--r-input); font: 550 12px var(--font); color: var(--text); background-color: var(--surface); }
    .ifield > select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: calc(100% - 15px) 14px,calc(100% - 11px) 14px; background-size: 4px 4px,4px 4px; background-repeat: no-repeat; }
    .ifield > :is(input[type="number"],input[type="datetime-local"]) { font-variant-numeric: tabular-nums; }
    .ifield > textarea { min-height: 72px; height: auto; padding-block: 9px; resize: vertical; line-height: 1.4; }
    .ifield > :is(input,select,textarea):focus { outline: none; box-shadow: inset 0 0 0 1px rgb(var(--accent)), 0 0 0 3px rgba(37,99,235,.14); }
    .indset-sheet select option { color: var(--text); background: var(--solid); }
    .if-check { position: relative; justify-self: end; width: 16px; height: 16px; cursor: pointer; }
    .if-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
    .if-check span { position: absolute; inset: 0; border: 1px solid var(--line-2); border-radius: 3px; background: var(--surface); transition: background .14s var(--ease), border-color .14s var(--ease); }
    .if-check span::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.7); opacity: 0; transition: opacity .12s var(--ease), transform .12s var(--ease); }
    .if-check input:checked + span { background: rgb(var(--accent)); border-color: rgb(var(--accent)); }
    .if-check input:checked + span::after { opacity: 1; transform: rotate(45deg) scale(1); }
    .if-check input:focus-visible + span { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
    .if-session { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
    .if-session > span { color: var(--faint); }
    .if-session input { width: 100%; height: 32px; padding: 0 9px; color: var(--text); background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--j-edge); border-radius: var(--r-input); font: 500 12px var(--font); font-variant-numeric: tabular-nums; }
    .if-color { display: grid; grid-template-columns: 82px 28px minmax(70px, 1fr) 36px; align-items: center; gap: 8px; }
    .if-color .if-color-hex { width: 82px; height: 30px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--text); font: 550 11px var(--mono); text-transform: uppercase; }
    .if-color .if-color-hex:focus { outline: none; border-color: rgba(37,99,235,.6); box-shadow: 0 0 0 2px rgba(37,99,235,.18); }
    .if-color .if-color-hex.bad { border-color: var(--danger); }
    .if-color input[type="color"] { width: 26px; height: 26px; padding: 2px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); cursor: pointer; overflow: hidden; }
    .if-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    .if-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
    .if-inline .if-color { display: flex; gap: 6px; }
    .if-inline .if-color :is(.if-color-hex, .if-transp, output) { display: none; }
    .if-color .if-transp { width: 100%; padding: 0; accent-color: rgb(var(--accent)); }
    .if-color output { color: var(--muted); font: 500 12px var(--font); font-variant-numeric: tabular-nums; text-align: right; }
    .indset-empty { min-height: 240px; display: grid; place-content: center; gap: 5px; text-align: center; }
    .indset-empty b { color: var(--sec); font-size: 13px; }
    .indset-empty span { max-width: 280px; color: var(--faint); font-size: 11.5px; }
    .indset-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--pane); }
    .indset-foot > .indset-actions { display: flex; gap: 8px; }
    .indset-foot button { min-width: 84px; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--sec); font: 600 12.5px var(--font); cursor: pointer; }
    .indset-foot button:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
    .indset-foot .iapply { color: #fff; border-color: transparent; background: rgb(var(--accent)); }
    .indset-foot .iapply:hover { color: #fff; background: rgb(var(--accent)); filter: brightness(1.08); }
    .indset-foot .iapplyall { display: none; } /* one chart in the Lab */
    .indset-foot .ireset-script { min-width: 0; padding-inline: 8px; border-color: transparent; background: transparent; color: var(--muted); }
    .color-ctrl { display: grid; grid-template-columns: minmax(78px,1fr) 32px minmax(58px,.8fr) 34px; align-items: center; gap: 7px; width: 100%; }
    .color-hex { width: 100% !important; height: 36px; font: 600 11px var(--mono); text-transform: uppercase; }
    .color-hex.bad { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb,var(--danger) 12%,transparent); }
    .color-swatch { width: 30px !important; min-width: 30px; height: 30px; padding: 2px !important; border: 1px solid var(--line-2); border-radius: 50%;
      background: var(--solid); box-shadow: inset 0 0 0 2px var(--solid); cursor: pointer; }
    .color-swatch:hover { border-color: rgba(37,99,235,.5); }
    .color-transp { flex: 1; width: auto !important; padding: 0 !important; }
    .color-pct { font-size: 12px; color: var(--muted); width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
    .input-color-popover { position: fixed; z-index: 1100; width: 216px; padding: 9px; border: 0; border-radius: var(--r-card);
      background: var(--solid); box-shadow: inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); }
    .input-color-sv { position: relative; height: 132px; border-radius: 9px; cursor: crosshair; touch-action: none;
      background-image: linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent); }
    .input-color-dot { position: absolute; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.3); transform: translate(-50%,-50%); pointer-events: none; }
    .input-color-hue { width: 100%; height: 10px; margin: 10px 0 8px; padding: 0; border: 0; border-radius: 999px; appearance: none;
      background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); cursor: pointer; }
    .input-color-hue::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.65); }
    .input-color-saturation { display: grid; grid-template-columns: auto 1fr 34px; align-items: center; gap: 8px; margin: 0 1px 8px; color: var(--muted); font: 600 10px var(--font,Switzer,system-ui,sans-serif); }
    .input-color-saturation input { min-width: 0; accent-color: var(--accent); }
    .input-color-saturation output { color: var(--text-2); font: 600 10px 'Geist Mono',ui-monospace,monospace; text-align: right; }
    .input-color-hex { width: 100%; height: 36px; padding: 0 9px; border-radius: 8px; font: 600 11px var(--mono); text-transform: uppercase; }
    @media (max-width: 480px) {
      .library-panel { position: fixed; inset: auto 8px 8px; width: auto; max-width: none; max-height: min(78dvh, 680px); border-radius: 18px; transform-origin: bottom center; }
      .library-toolbar { align-items: stretch; flex-direction: column; gap: 7px; }
      .library-count { align-self: flex-end; }
      .lib-open { grid-template-columns: 30px minmax(0,1fr); }
      .lib-access { grid-column: 2; justify-self: start; }
      .lib-actions { padding-left: 10px; overflow-x: auto; }
      .lib-versions { margin-left: 10px; }
      .lib-delete-confirm { align-items: stretch; flex-direction: column; }
      .lib-delete-confirm > div:last-child { justify-content: flex-end; }
      .indset-modal { padding: 0; align-items: flex-end; }
      .indset-sheet { inset: auto 0 0; width: 100%; height: min(76dvh, 680px); border-radius: 18px 18px 0 0; transform-origin: bottom center; }
      .ifield { grid-template-columns: minmax(104px,1fr) minmax(142px,1.2fr); gap: 12px; }
      .indset-panel { padding-inline: 14px; }
      .color-ctrl { grid-template-columns: minmax(70px,1fr) 30px minmax(46px,.7fr) 30px; gap: 5px; }
    }

    /* ── responsive: desktop split → mobile tabs ── */
    @media (max-width: 1100px) {
      #chatPane { width: min(var(--builder-w, 350px), 40vw); }
      .lab[data-builder-collapsed] #chatPane { margin-left: calc(-1 * min(var(--builder-w, 350px), 40vw)); }
      .ctoolbar { gap: 6px; }
      .tf-btn { padding-inline: 9px; }
    }
    @media (max-width: 900px) {
      /* Narrow: the bar wraps. Row one is back, the Assistant / How it works / Chart tabs and the header actions;
         row two is the indicator, its progress and, once built, what to do with it. */
      #lab > header { height:auto;min-height:56px;flex-wrap:wrap;row-gap:0;padding-top:8px;padding-bottom:6px; }
      #lab > header > .authoring-flow { order:10;flex:1 1 100%;height:auto;min-height:40px;gap:10px;padding-top:6px; }
      /* The actions share row one and scroll there, as before, rather than wrapping into a row of their own. */
      #lab > header .hactions { flex:1 1 0;min-width:0; }
      #lab > header .hactions > :first-child { margin-left:auto; }
      .authoring-current::before { display:none; }
      .authoring-progress { justify-content:flex-start;overflow-x:auto;scrollbar-width:none; }
      .authoring-progress::-webkit-scrollbar { display:none; }
      .authoring-stages li:not([data-state='current']) b { display:none; }
      .authoring-stages li:not(:last-child)::after { width:12px; }
      .lab-more-menu { top:calc(100% - 42px); }
      .tabs { display: inline-flex; }
      #chatPane { width: auto; border-right: 0; }
      .workspace-splitter, .builder-toggle { display: none !important; }
      .lab[data-builder-collapsed] #chatPane { display: flex; margin-left: 0; opacity: 1; visibility: visible; pointer-events: auto; }
      .lab[data-tab="chat"] #chartPane, .lab[data-tab="chart"] #chatPane { display: none; }
      .lab[data-tab="chat"] #chatPane, .lab[data-tab="chart"] #chartPane { flex: 1 1 100%; }
      .hbrand .hmuted, .hbrand .hsep { display: none; }
      .hactions .lbl-hide, .ctoolbar .lbl-hide { display: none; }
      .btn.hnew { padding: 0 10px; }
      #chat { padding: 18px 16px 8px; }
      /* iOS zooms the page when a focused input is under 16px — pin the chat inputs */
      #prompt, .cd-input, .fb-note, .co-search input { font-size: 16px; }
      .lab[data-tab="chat"] #chartPane,.lab[data-tab="chat"] #howItWorksPanel,
      .lab[data-tab="chart"] #chatPane,.lab[data-tab="chart"] #howItWorksPanel,
      .lab[data-tab="how"] #chatPane,.lab[data-tab="how"] #chartPane { display:none; }
      .lab[data-tab="how"] #howItWorksPanel { display:flex; flex:1 1 100%; width:auto; border-left:0; }
      .how-splitter { display:none !important; }
      .how-rule { grid-template-columns:minmax(0,1fr); }
      .how-rule .how-status { grid-column:1; justify-self:start; }
    }
    /* Touch devices: Apple's 44px tap-target floor on the nav + brighter secondary label tiers (outdoor screens) */
    @media (hover: none) and (pointer: coarse) {
      html:not([data-theme="light"]) { --faint: #858b94; --muted: #a7abb2; --sec: #c4d1e5; }
      .tab, .gbtn { min-height: 42px; }
    }
    @media (max-width: 560px) {
      /* Icon-only tabs, as intended here all along: the shared .tp-tab primitive loads later and was overriding it.
         Their text stays in the DOM, so each tab keeps its accessible name. */
      #lab > header .tabs .tab { font-size:0;gap:0;padding:0 12px; }
      #lab > header > .authoring-flow { flex-wrap:wrap;row-gap:4px; }
      .authoring-current { flex:1 1 auto; }
      .authoring-current b { font-size:14px; }
      .authoring-progress { order:3;flex:1 1 100%; }
      .authoring-actions .authoring-inspect { width:32px;padding:0;justify-content:center; }
      .authoring-actions .authoring-inspect .lbl-hide { display:none; }
      .saved-panel { position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: min(68dvh, 620px); border-radius: 18px; transform-origin: bottom center; }
      .library-panel { max-height: min(78dvh, 680px); }
      header { backdrop-filter: none; }
      .hbrand .wordmark { display: none; }
      header { gap: 10px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
      .tab { font-size: 0; gap: 0; padding: 7px 12px; }
      .tab .ic { width: 16px; height: 16px; }
      .toast { right: 12px; max-width: calc(100vw - 24px); }
      .usage-chip span:last-child { display: none; }
      .ctoolbar { padding-inline: 8px; }
      /* One horizontal rail on phones. A sticky action cluster used to sit on
         top of market/timeframe, so the controls traders need first were the
         only controls they could not see. */
      .chart-actions { position:static; right:auto; padding:0; background:none; }
      .tf-switch { max-width:none; overflow:visible; }
      #indPillName { max-width: 126px; }
      .chart-state { top: 56px; max-width: calc(100% - 16px); }
      .chart-state-copy > span { display: none; }
      .chart-state.is-blocking .chart-state-copy > span { display: block; }
    }
    @media (max-width: 430px) {
      .hbrand { display: none; }
      .gbtn { padding: 0 9px; }
      .gate-card { padding: 30px 22px 26px; }
      .gate-card h1 { font-size: 26px; }
      .paid-wrap { padding: 14px 12px calc(28px + env(safe-area-inset-bottom)); }
      .paid-card { padding: 28px 20px 24px; }
      .paid-card h1 { font-size: 22px; }
      .code-lock { margin: 6px 2px 10px; }
    }

    /* ── keyframes ── */
    @keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
    @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes msgin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
    @keyframes actin { to { opacity: 1; transform: none; } }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
    @keyframes tpPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
    @keyframes tpDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

    /* ═══════════ LAUNCH DECK — the Lab's home (#358, "CHOSEN · Lab launcher, cleaned up", DESIGN_SYSTEM v3) ═══════════
       The shared page header (.tps-page-head, packages/platform-shell), "What do you want to build?", the build row
       (the composer and, when there is something to resume, the continue card), then Your indicators beside the right
       column (Taking Prophets picks, Trending in the community). Flat fills with 1px inset edges; the composer is the
       one hero card. One blue element: the send button once the box has text. Sections rise 520ms, 40ms apart; rows
       answer hover in 120ms; none of it under reduced motion. The crown field sits behind it (#575). */
    #launch{position:relative;height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;
      --lch-pad:44px;--lch-side:330px;--lch-q:#8a8780;--lch-ink-3:#6f6d68;--lch-surf:#0f0f11;--lch-tile:#131316;--lch-hover:#101013;
      --lch-chip:#1a1a1f;--lch-chip-2:#222229;--lch-seg:#101013;--lch-next:#1f1f25;--lch-ok:#35c77c;--lch-blue:#3b82f6;--lch-blue-ink:#93c5fd;--lch-gold:#e2be69}
    html[data-sidebar="collapsed"] #launch{--lch-pad:56px}
    /* First paint (#371): #labBoot is the shared .tp-boot placeholder page (platform-shell) in the library's own frame. */
    #labBoot{--tpb-pad:44px;--tpb-max:1240px;--tpb-gap:20px}
    html[data-sidebar="collapsed"] #labBoot{--tpb-pad:56px}
    #labBoot .lab-boot-title{width:200px;height:28px}
    #labBoot .lab-boot-search{width:260px;height:36px}
    #labBoot .lab-boot-h2{width:280px;height:26px}
    #labBoot .lab-boot-composer{height:197px;margin-top:-8px}
    #labBoot .lab-boot-composer + .tp-boot-row{margin-top:8px}
    #labBoot .lab-boot-list{height:300px}
    #labBoot .lab-boot-side{flex:none;width:330px}
    #labBoot .lab-boot-side-a{height:226px}
    #labBoot .lab-boot-side-b{height:160px}
    @media (max-width:1180px){#labBoot .lab-boot-side{width:300px}}
    @media (max-width:1060px){#labBoot .lab-boot-side{display:none}}
    @media (max-width:767px){#labBoot{--tpb-pad:16px}#labBoot .lab-boot-search{display:none}}
    /* The collapsed padding rides the menu's glide; registered as a length so it can transition. */
    @property --lch-pad{syntax:'<length>';inherits:true;initial-value:44px}
    html[data-theme="light"] #launch{--lch-q:#69645c;--lch-ink-3:#736e65;--lch-surf:#fffefb;--lch-tile:#f5f4f0;--lch-hover:#f1efe9;
      --lch-chip:#ebe8e1;--lch-chip-2:#e1ddd4;--lch-seg:#efede7;--lch-next:#e1ddd4;--lch-ok:#1f9d57;--lch-blue:#2563eb;--lch-blue-ink:#1d4ed8;--lch-gold:#9a7020}
    /* The crown field (#575, platform-shell/src/crown-field.ts) mounts in here: the content region, under the deck. */
    #launch .lch-space{position:fixed;inset:0;z-index:0;pointer-events:none;isolation:isolate}
    #launch .lch-deck{position:relative;z-index:3;min-height:100%;max-width:calc(1240px + 2 * var(--lch-pad));margin:0 auto;padding:0 var(--lch-pad)}
    #launch .lch-main{padding:var(--page-top,20px) 0 64px;container-type:inline-size}
    #launch .lch-srch{position:relative;display:flex;align-items:center;width:260px;margin:0}
    #launch .lch-srch .ic{position:absolute;left:12px;width:15px;height:15px;color:var(--lch-ink-3);pointer-events:none}
    #launch .lch-srch input{width:100%;height:36px;padding:0 52px 0 36px;border:0;border-radius:var(--r-input);background:var(--lch-surf);box-shadow:inset 0 0 0 1px var(--j-edge-2);color:var(--text);font:14px var(--font);outline:none;-webkit-appearance:none;appearance:none}
    #launch .lch-srch input::placeholder{color:var(--lch-ink-3)}
    #launch .lch-srch input::-webkit-search-cancel-button{display:none}
    #launch .lch-srch input:focus{box-shadow:inset 0 0 0 1px #2563eb,0 0 0 3px rgba(37,99,235,.14)}
    #launch .lch-srch kbd{position:absolute;right:10px;color:var(--ghost);font:12px var(--font);pointer-events:none}
    #launch .lch2-h2{margin:0;color:var(--text);font:600 20px/26px var(--font);letter-spacing:-.015em}
    #launch .lch2-h2+.build-mode{margin:12px 0 0}
    #launch .lch2-build{display:flex;align-items:stretch;gap:20px;margin-top:12px}
    #launch .build-mode+.build-mode-notice{margin-top:4px}
    #launch .lchb-composer{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;padding:18px 14px 14px 20px;border-radius:var(--r-card);
      background:linear-gradient(180deg,var(--j-hero-top),var(--j-hero-bottom));box-shadow:inset 0 0 0 1px var(--j-edge);transition:box-shadow .16s ease}
    #launch .lchb-composer::before{content:'';position:absolute;top:0;right:24px;width:260px;max-width:50%;height:1px;background:linear-gradient(90deg,transparent,var(--j-gold-hair));pointer-events:none}
    #launch .lchb-composer:focus-within{box-shadow:inset 0 0 0 1px #2563eb,0 0 0 3px rgba(37,99,235,.14)}
    #launch #labComposer{display:block;width:100%;min-height:72px;max-height:240px;margin:0;padding:0;border:0;background:transparent;color:var(--text);font:16px/24px var(--font);resize:none;outline:none;overflow-y:auto}
    #launch #labComposer::placeholder{color:var(--ghost)}
    #launch .lch2-bar{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--j-edge-2)}
    #launch .lch2-bar>span{margin-left:auto;color:var(--ghost);font:12.5px var(--font);white-space:nowrap}
    #launch .lch2-qb{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:0;border-radius:var(--r-control);background:transparent;box-shadow:inset 0 0 0 1px var(--j-edge);color:var(--text-2);font:500 13px var(--font);white-space:nowrap;cursor:pointer;transition:color .12s ease,box-shadow .12s ease}
    #launch .lch2-qb[hidden]{display:none}
    #launch .lch2-qb:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
    #launch .lch2-qb .ic{width:14px;height:14px}
    #launch #labComposerGo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:var(--lch-chip);color:var(--lch-ink-3);cursor:pointer;transition:background .16s ease,color .16s ease}
    #launch #labComposerGo .ic{width:16px;height:16px}
    #launch .lchb-composer.has-text #labComposerGo{background:#2563eb;color:#fff}
    #launch .lchb-composer.has-text #labComposerGo:hover{background:#1d4fd8}
    #launch .lch2-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;min-height:20px;padding:2px 0 0 2px;color:var(--ghost);font:13px var(--font)}
    #launch .lch2-try button{padding:0;border:0;background:transparent;color:var(--lch-q);font:13.5px var(--font);cursor:pointer}
    #launch .lch2-try button:hover{color:var(--text)}
    #launch #labContinueConversation{flex:0 0 var(--lch-side);min-width:0;min-height:44px;display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:0;border-radius:var(--r-card);
      background:var(--lch-surf);box-shadow:inset 0 0 0 1px var(--j-edge-2);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:background .14s ease,box-shadow .14s ease}
    #launch #labContinueConversation:is([hidden],:empty){display:none}
    #launch #labContinueConversation:hover{background:var(--lch-tile);box-shadow:inset 0 0 0 1px var(--j-edge)}
    #launch .lch2-k{display:flex;align-items:center;gap:8px;color:var(--lch-q);font:13.5px var(--font)}
    #launch .lch2-k .ic{width:14px;height:14px}
    #launch .lch2-cn{max-width:100%;overflow:hidden;color:var(--text);font:600 17px/22px var(--font);text-overflow:ellipsis;white-space:nowrap}
    #launch .lch2-cm{color:var(--lch-q);font:13.5px var(--font)}
    #launch .lch2-track{display:flex;gap:4px;width:100%;margin-top:auto}
    #launch .lch2-track i{flex:1;height:4px;border-radius:2px;background:var(--lch-next)}
    #launch .lch2-track i.done{background:var(--lch-ok)}
    #launch .lch2-track i.now{background:var(--lch-blue)}
    #launch .lch2-steps{display:flex;justify-content:space-between;width:100%;color:var(--ghost);font:12px var(--font)}
    #launch .lch2-steps .now{color:var(--lch-blue-ink)}
    #launch .lch2-cta{color:var(--lch-blue-ink);font:500 13.5px var(--font)}
    #launch .lch2-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--lch-side);gap:20px;align-items:start;margin-top:28px}
    #launch .lch2-sh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:6px}
    #launch .lch2-sh h2{display:flex;align-items:center;gap:8px;margin:0;color:var(--text);font:600 16px/22px var(--font)}
    #launch .lch2-sh h2 span:not(.lch2-crown){margin-left:-2px;color:var(--lch-ink-3);font-weight:500}
    #launch .lch2-tools{display:flex;align-items:center;gap:8px}
    #launch .lch2-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-tile);background:var(--lch-seg)}
    #launch .lch2-seg:empty{display:none}
    #launch .lch2-seg button{height:30px;padding:0 12px;border:0;border-radius:var(--r-seg);background:transparent;color:var(--muted);font:500 13px var(--font);white-space:nowrap;cursor:pointer}
    #launch .lch2-seg button:hover{color:var(--text)}
    #launch .lch2-seg button[aria-pressed="true"]{background:var(--lch-chip);color:var(--text);font-weight:600}
    #launch .lch2-seg button span{margin-left:5px;color:var(--lch-ink-3);font-weight:500}
    #launch #lchSort{height:36px;padding:0 26px 0 12px;border:0;border-radius:var(--r-control);box-shadow:inset 0 0 0 1px var(--j-edge);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8780' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center/12px;color:var(--lch-q);font:500 13px var(--font);-webkit-appearance:none;appearance:none;cursor:pointer}
    #launch #lchSort:hover{color:var(--text)}
    #launch .script-kind-filters{margin:4px 0 6px}
    #launch .lchb-thead,#launch .lch2-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 90px 124px;column-gap:14px;align-items:center}
    #launch .lchb-thead{height:36px;padding:0 12px;border-bottom:1px solid var(--j-edge-2);color:var(--ghost);font:12.5px var(--font)}
    #launch .lch2-row{position:relative;height:58px;padding:0 12px;border-radius:var(--r-control);transition:background .12s ease}
    #launch .lch2-row:hover,#launch .lch2-row:focus-within{background:var(--lch-hover)}
    #launch .lch2-row>button:first-child{display:flex;align-items:center;gap:12px;min-width:0;height:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
    #launch .lch2-glyph{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-seg);background:var(--lch-tile);box-shadow:inset 0 0 0 1px var(--j-edge-2);color:var(--muted)}
    #launch .lch2-glyph svg,#launch .lch2-mb svg,#launch .lch2-crown svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
    #launch .lch2-nm{display:flex;flex-direction:column;gap:2px;min-width:0}
    #launch .lchb-name{overflow:hidden;color:var(--text);font:600 14.5px/19px var(--font);text-overflow:ellipsis;white-space:nowrap}
    #launch .lch2-sub{overflow:hidden;color:var(--lch-ink-3);font:12.5px/16px var(--font);text-overflow:ellipsis;white-space:nowrap}
    #launch .lch2-sub .script-kind-badge{display:inline;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:0;text-transform:lowercase}
    #launch .lch2-st{display:flex;align-items:center;gap:7px;font:13.5px var(--font)}
    #launch .lch2-st::before{content:'';flex:none;width:6px;height:6px;border-radius:999px;background:currentColor}
    #launch .lch2-st:empty::before{display:none}
    #launch .lch2-st[data-status="draft"]{color:var(--lch-blue-ink)}
    #launch .lch2-st[data-status="published"]{color:var(--lch-ok)}
    #launch .lch2-st[data-status="private"]{color:var(--muted)}
    #launch .lch2-st[data-status="protected"]{color:var(--lch-gold)}
    #launch .lch2-ago{color:var(--lch-ink-3);font:13.5px var(--font);font-variant-numeric:tabular-nums}
    #launch .lchb-acts{display:flex;justify-content:flex-end;gap:6px;opacity:0;transition:opacity .12s ease}
    #launch .lch2-row:hover .lchb-acts,#launch .lchb-acts:focus-within{opacity:1}
    #launch .lch2-mb{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 11px;border:0;border-radius:var(--r-seg);background:var(--lch-chip);color:var(--text);font:500 12.5px var(--font);text-decoration:none;white-space:nowrap;cursor:pointer}
    #launch .lch2-mb[hidden]{display:none}
    #launch .lch2-mb:hover{background:var(--lch-chip-2);color:var(--text)}
    #launch .lch2-mb.ico{width:30px;padding:0}
    #launch .lch2-mb svg{width:13px;height:13px;stroke-width:1.8}
    #launch .lch2-menu{position:absolute;top:calc(100% - 8px);right:12px;z-index:6;min-width:150px;padding:4px;border-radius:var(--r-tile);background:var(--raised);box-shadow:inset 0 0 0 1px var(--j-edge),var(--j-float-shadow)}
    #launch .lch2-menu[hidden]{display:none}
    #launch .lch2-menu button{display:block;width:100%;height:32px;padding:0 10px;border:0;border-radius:var(--r-seg);background:transparent;color:var(--danger);text-align:left;font:500 13px var(--font);cursor:pointer}
    #launch .lch2-menu button:is(:hover,:focus-visible,.arm){background:var(--lch-hover)}
    #launch .lch-empty{padding:24px 12px;color:var(--muted);font:14px/20px var(--font)}
    #launch .lch-empty b{display:block;margin-bottom:2px;color:var(--text);font-weight:600}
    #launch .lch-empty button{margin-top:10px}
    #launch .lch2-side{display:flex;flex-direction:column;gap:16px;min-width:0}
    #launch .lch2-card{padding:16px 18px 8px;border-radius:var(--r-card);background:var(--lch-surf);box-shadow:inset 0 0 0 1px var(--j-edge-2)}
    #launch .lch2-card[hidden]{display:none}
    #launch .lch2-card .lch2-sh{align-items:baseline}
    #launch .lch2-crown{display:flex;color:var(--lch-gold)}
    #launch .lch2-crown svg{width:15px;height:15px;stroke-width:1.8}
    #launch .lch2-link{padding:0;border:0;background:transparent;color:var(--lch-q);font:13.5px var(--font);cursor:pointer}
    #launch .lch2-link:hover{color:var(--text)}
    #launch .lch2-sr{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--j-edge-2)}
    #launch .lch2-sh+.lch2-sr{border-top:0}
    #launch .lch2-sr .lch2-glyph{width:30px;height:30px}
    #launch #lchPicks .lch2-glyph{color:var(--lch-gold)}
    #launch .lch2-sr .lch2-nm{flex:1 1 auto}
    #launch .lch2-sr .lchb-name{font-size:14px}
    #launch .lch2-foot{margin:6px 0 10px;color:var(--lch-ink-3);font:12.5px/18px var(--font)}
    @keyframes lch2Rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    #launch.lch-boot .lch2-rise{animation:lch2Rise 520ms cubic-bezier(.2,.7,.2,1) both}
    #launch.lch-boot .lch2-h2{animation-delay:40ms}
    #launch.lch-boot .lch2-build{animation-delay:80ms}
    #launch.lch-boot .lch2-grid{animation-delay:120ms}
    @container (max-width:960px){
      #launch :is(.lch2-build,.lch2-grid){--lch-side:300px}
      #launch .lchb-thead,#launch .lch2-row{grid-template-columns:minmax(0,1fr) 96px 72px 112px;column-gap:10px}
    }
    @container (max-width:880px){
      #launch .lch2-grid{grid-template-columns:minmax(0,1fr)}
    }
    @container (max-width:720px){
      #launch .lch2-build{flex-direction:column}
      #launch #labContinueConversation{flex-basis:auto}
    }
    /* #70, #370: the workspace arriving as one settled piece, on the same page enter as the website's
       .tp-content-enter (lib/platform/content-transition.ts owns the numbers there): 220ms, opacity from 0 and a
       6px rise on the one curve, once the deck has faded out over 90ms. Nothing blurs and nothing scales. Change one
       and change the other. The deck's return and a library room switch use the same pair (app/page-motion.ts). */
    #lab.lab-enter,.lab-page-enter{animation:labEnter var(--m-base,220ms) var(--m-ease,cubic-bezier(.16,1,.3,1))}
    @keyframes labEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    .lab-page-leave{opacity:0;pointer-events:none;transition:opacity 90ms linear}
    @media (prefers-reduced-motion:reduce){
      #lab.lab-enter.lab-enter,.lab-page-enter.lab-page-enter{animation:labEnterReduced 80ms linear!important}
      @keyframes labEnterReduced{from{opacity:0}to{opacity:1}}
      .lab-page-leave.lab-page-leave{transition:opacity 80ms linear!important}
    }
    @media (prefers-reduced-motion:reduce){
      #launch.lch-boot .lch2-rise{animation:none}
      #launch :is(.lchb-composer,.lch2-qb,#labComposerGo,#labContinueConversation,.lch2-row,.lchb-acts){transition:none}
    }
    @media (max-width:767px){
      #launch{--lch-pad:16px}
      #launch .tps-page-head-actions{flex:1 1 100%}
      #launch .lch-srch{width:100%}
      #launch .lch-srch input{font-size:16px}
      #launch .lch-srch kbd{display:none}
    }
    @media (max-width:560px){
      #launch .lch2-bar>span{display:none}
      #launch #labComposerGo{margin-left:auto}
      #launch .lchb-thead{display:none}
      #launch .lchb-thead~.lch2-row,#launch .lch2-row{grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px}
      #launch .lch2-ago,#launch .lch2-row .lch2-mb:first-child{display:none}
      #launch .lchb-acts{opacity:1}
    }

    /* ══════════════════════════════════════════════════════════════════════════════════════════
       ONE-PLATFORM SHELL — mirrors takingprophets.com. The services remain independently deployed;
       this persistent spatial contract is the seam users see and use on every surface.
       ══════════════════════════════════════════════════════════════════════════════════════════ */
    html { --tp-shell-w:288px; } /* 56px spine + 232px context pane (P1) */
    html[data-sidebar="collapsed"] { --tp-shell-w:56px; } /* pane hidden, spine stays */
    /* A focused build keeps the product rooms reachable. Members can still collapse the context
       pane explicitly, but entering the Builder must never hide navigation on their behalf. */
    html[data-theme="light"] {
      color-scheme:light;
      /* Light mode kept its own brass accent, which is the gold left on the launch cards.
         These are the Backtester's light values verbatim — one accent, both themes. */
      --accent:37 99 235; --accent-hi:29 78 216;
      --accent-grad:#2563eb;
      --bg:#f5f4f0; --bg-2:#f1efe9; --pane:#faf9f6; --raised:#fffefb; --row-hover:#f1efe9; --surface:rgba(53,47,36,.045); --surface-2:rgba(53,47,36,.08);
      --solid:#fcfbf8; --card-grad:#fffefb; --card-grad-2:#fffefb;
      --bubble-grad:#f1efe9; --line:rgba(53,47,36,.08); --line-2:rgba(53,47,36,.14);
      --text:#171612; --text-2:#3f3b34; --body-ai:#4d4941; --sec:#56524a; --muted:#69645c; --faint:#736e65; --ghost:#948d82;
      --accent-text:#1d4ed8; --ok:#1f9d57; --ok-text:#197c47; --danger:#ce3b31; --diff-red:#b43c34;
      --sh-primary:none;
      --sh-send:none; --sh-modal:var(--j-float-shadow);
      --j-chip:var(--surface-2); --j-hover-2:var(--row-hover); --j-chip-hover:var(--line-2); --j-faint:var(--faint); --j-accent-hover:#1d4ed8;
      --j-edge:#DDD9D0; --j-edge-2:#E6E3DC; --j-hero-top:#FCFBF8; --j-hero-bottom:#F5F4F0; --j-gold-hair:rgba(170,128,40,.45); --j-float-shadow:0 10px 24px rgba(40,32,20,.12);
      --sh-card:var(--j-float-shadow); --btctx-bg:#fffefb;
      --btctx-border:rgba(53,47,36,.16); --btctx-input-bg:#f1efe9; --btctx-input-border:rgba(53,47,36,.18);
    }
    html[data-theme="light"] body { background:radial-gradient(1000px 520px at 16% -12%,rgba(37, 99, 235,.17),transparent 64%),var(--bg); }
    html[data-theme="light"] a { color:#1d4ed8; }
    html[data-theme="light"] header { background:rgba(250,249,246,.9); }
    html[data-theme="light"] .gate-card h1,
    
    html[data-theme="light"] #chatPane { background:#faf9f6; }
    html[data-theme="light"] #chartPane { border-color:rgba(53,47,36,.12); }
    html[data-theme="light"] { --toolbar-bg:rgba(252,251,248,.92); }
        html[data-theme="light"] .tdiv,
    html[data-theme="light"] .tf-switch { border-color:rgba(53,47,36,.14); }
    html[data-theme="light"] .tf-btn:hover { color:var(--text); background:rgba(37,99,235,.08); }
    html[data-theme="light"] #indPillName { color:var(--text); }
    html[data-theme="light"] .mkt-select:hover { border-color:rgba(53,47,36,.28); }
    html[data-theme="light"] .msg.user { color:var(--text);border-color:var(--line-2); }
    html[data-theme="light"] .msg.question .q-opt { background:rgba(53,47,36,.05); }
    html[data-theme="light"] .msg.question .q-opt:hover:not(:disabled) { background:rgba(53,47,36,.09); }
    html[data-theme="light"] .msg.question .q-rec { color:#1d4ed8;background:rgba(37,99,235,.12); }
    html[data-theme="light"] .msg.question .q-opt.q-chosen { background:rgba(37,99,235,.1); }
    html[data-theme="light"] .hdiv { background:var(--line-2); }
    html[data-theme="light"] .usage-ring { --usage-track:rgba(53,47,36,.16); }
    html[data-theme="light"] .co { background:rgba(53,47,36,.22); }
    html[data-theme="light"] .co-tabs { border-color:var(--line-2); }
    html[data-theme="light"] .co-tab:hover { color:var(--text); }
    html[data-theme="light"] .co-feature-visual,
    html[data-theme="light"] .ccard-thumb { background:var(--bg-2); }
    html[data-theme="light"] .co-sheet { box-shadow:inset 0 0 0 1px var(--j-edge),var(--j-float-shadow); }
    html[data-theme="light"] .co-detail { background:rgba(250,249,246,.98); }
    html[data-theme="light"] .cmt-t { color:var(--text-2); }
    html[data-theme="light"] .cd-composer { background:rgba(53,47,36,.025); }

    /* Northstar B: the shell owns its own visuals (deep OPAQUE black pane, one border on the right
       edge) — this override carries only what is app-specific: the width variable and the app's
       easing. No translucency, no blur, no shadow: the pane is a surface, not a veil. */




    #launch,.lab,.gate,.paid-wrap { width:calc(100% - var(--tp-shell-w));margin-left:var(--tp-shell-w); }
    /* The page glides with the rail (§7 "Navigation and layout motion"): 280ms on the one curve, only while the
       rail is gliding (the shell marks it), never on the way in or on a window resize. Reduced motion: at once. */
    html[data-shell-gliding] :is(#launch,.lab,.gate,.paid-wrap) { transition:width var(--m-layout,280ms) var(--ease),margin-left var(--m-layout,280ms) var(--ease); }
    html[data-shell-gliding] #launch { transition:width var(--m-layout,280ms) var(--ease),margin-left var(--m-layout,280ms) var(--ease),--lch-pad var(--m-layout,280ms) var(--ease); }
    html[data-shell-gliding] #launch .lch-space { transition:left var(--m-layout,280ms) var(--ease); }
    @media (prefers-reduced-motion:reduce) { html[data-shell-gliding] :is(#launch,.lab,.gate,.paid-wrap,#launch .lch-space) { transition:none; } }
    #launch .lch-space { left:var(--tp-shell-w); }
    html[data-theme="light"] #lab > header { background:var(--pane); }
    html[data-theme="light"] .authoring-popover, html[data-theme="light"] .lab-more-menu { background:var(--raised); box-shadow:inset 0 0 0 1px var(--j-edge), var(--j-float-shadow); }
    html[data-theme="light"] .authoring-stages li[data-state='current'] i { color:#fff; }


    /* ── Partnered indicators — a quiet product shelf inside the Lab shell. The module is lazy;
       the CSS stays with the shared visual contract so light/dark paint correctly before it mounts. ── */
    .sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
    .partner-shelf { width:100%;color:var(--text); }
    .partner-shelf-loading,.partner-shelf-error { min-height:260px;display:grid;place-content:center;gap:6px;text-align:center;color:var(--muted);font:14px var(--font); }
    .partner-shelf-error strong { color:var(--text);font-size:16px; }
    .partner-shelf-head { display:flex;align-items:center;justify-content:space-between;gap:28px;padding-bottom:18px;border-bottom:1px solid var(--line-2);background:transparent; }
    .partner-shelf-head h1 { margin:0;color:var(--text);font:700 32px/38px var(--font);letter-spacing:-.025em;outline:none; }
    .partner-shelf-tools { display:flex;align-items:center;gap:8px; }
    .partner-shelf-sort select,.partner-shelf-search { height:38px;border:0;border-radius:var(--r-input);background:var(--raised);color:var(--sec);box-shadow:inset 0 0 0 1px var(--j-edge); }
    .partner-shelf-sort select { min-width:158px;padding:0 34px 0 12px;font:600 12px var(--font);color-scheme:dark;cursor:pointer; }
    .partner-shelf-search { display:flex;align-items:center;gap:7px;padding:0 11px; }
    .partner-shelf-search svg { width:14px;height:14px;flex:none;color:var(--faint); }
    .partner-shelf-search input { width:92px;border:0;background:transparent;color:var(--text);font:13px var(--font);outline:none; }
    .partner-shelf-search input::placeholder { color:var(--faint); }
    .partner-shelf-sort select:focus-visible,.partner-shelf-search:focus-within { outline:2px solid rgb(var(--accent));outline-offset:2px;border-color:transparent; }
    .partner-shelf-results { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }

    .partner-featured { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:28px;margin-top:30px; }
    .partner-featured-body { align-self:center;min-width:0;padding:10px 0; }
    .partner-featured-eyebrow { display:flex;align-items:center;gap:10px;margin-bottom:13px; }
    .partner-featured-eyebrow span { min-height:23px;display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok-text);font:650 10px var(--font); }
    .partner-featured-eyebrow small { color:var(--faint);font:500 10.5px var(--mono); }
    .partner-featured-title { display:block;width:max-content;max-width:100%;color:var(--text)!important;text-decoration:none;font:700 25px/31px var(--font);letter-spacing:-.025em; }
    .partner-featured-title:hover,.partner-card-title:hover { color:rgb(var(--accent-hi))!important;text-decoration:underline;text-underline-offset:4px; }
    .partner-featured-title:focus-visible,.partner-card-title:focus-visible,.partner-action:focus-visible,.partner-shelf-reveal:focus-visible { outline:2px solid rgb(var(--accent));outline-offset:3px;border-radius:4px; }
    .partner-featured-creator { margin:3px 0 0;color:var(--faint);font:500 11.5px var(--font); }
    .partner-featured-description { margin:20px 0 18px;color:var(--sec);font:14px/21px var(--font); }
    .partner-featured-access { min-height:40px;display:flex;align-items:center;gap:9px;padding:0 12px;margin-bottom:11px;border-radius:var(--r-tile);background:var(--surface);color:var(--sec);font:500 11.5px var(--font); }
    .partner-featured-access i { width:6px;height:6px;flex:none;border-radius:50%;background:var(--ok);box-shadow:none; }
    .partner-featured-body>small,.partner-card-body>small { display:block;margin-top:9px;color:var(--faint);font:500 10.5px/16px var(--font); }

    .partner-product-art { --partner-ink:#8aa8ff;position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-card);background:linear-gradient(145deg,#090a0d 4%,#111522 58%,#07080b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 26px 56px -40px rgba(0,0,0,.78); }
    .partner-product-art::before,.partner-product-art::after { content:'';position:absolute;z-index:0; }
    .partner-product-art::before { inset:12% 8% 10% 42%;opacity:.5;background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.17) 25px 27px,transparent 28px 41px),linear-gradient(116deg,transparent 0 36%,var(--partner-ink) 37% 39%,transparent 40% 51%,color-mix(in srgb,var(--partner-ink) 72%,white) 52% 54%,transparent 55%);clip-path:polygon(0 82%,8% 58%,16% 69%,27% 36%,36% 50%,48% 22%,58% 43%,67% 16%,78% 31%,88% 4%,100% 17%,100% 100%,0 100%); }
    .partner-product-art::after { width:180px;height:180px;right:-60px;top:-72px;border-radius:50%;background:var(--partner-ink);filter:blur(70px);opacity:.23; }
    .partner-product-art-featured { min-height:272px;border-radius:var(--r-card); }
    .partner-product-hero { position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.012);transition:opacity .24s ease,transform .45s cubic-bezier(.2,.8,.2,1); }
    .partner-product-art-loaded .partner-product-hero { opacity:1;transform:none; }
    .partner-product-art-loaded::before,.partner-product-art-loaded::after,
    .partner-product-art-loaded .partner-art-grid,.partner-product-art-loaded .partner-art-trace,
    .partner-product-art-loaded .partner-art-glow,.partner-product-art-loaded .partner-art-lockup { opacity:0; }
    .partner-product-art[data-partner-id="ifvg-ultimate"] .partner-product-hero { object-fit:cover;background:#03060c; }
    .partner-art-grid { position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(110deg,transparent 2%,#000 56%,transparent 98%); }
    .partner-art-trace { position:absolute;left:8%;right:8%;bottom:22%;height:1px;background:linear-gradient(90deg,transparent,var(--partner-ink),transparent);box-shadow:none;opacity:.62; }
    .partner-art-trace::before,.partner-art-trace::after { content:'';position:absolute;width:7px;height:42px;bottom:-8px;border:1px solid var(--partner-ink);background:color-mix(in srgb,var(--partner-ink) 18%,transparent);box-shadow:44px -34px 0 -1px color-mix(in srgb,var(--partner-ink) 52%,transparent),86px -12px 0 -1px color-mix(in srgb,var(--partner-ink) 52%,transparent); }
    .partner-art-trace::before { right:15%; }.partner-art-trace::after { right:48%;transform:scale(.72);opacity:.55; }
    .partner-art-glow { position:absolute;inset:auto 14% -38% 14%;height:60%;border-radius:50%;background:var(--partner-ink);filter:blur(72px);opacity:.12; }
    .partner-art-lockup { position:absolute;z-index:2;left:8%;top:12%;right:8%;display:flex;align-items:center;gap:14px; }
    .partner-shelf-logo { width:48px;height:48px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-card);background:rgba(4,5,8,.48);box-shadow:inset 0 1px rgba(255,255,255,.06); }
    .partner-shelf-logo img { grid-area:1/1;width:38px;height:38px;object-fit:contain; }
    .partner-logo-light { display:none; }
    .partner-shelf-logo-text { color:#f5f7ff;font:750 13px var(--mono);letter-spacing:.07em; }
    .partner-art-copy { min-width:0;display:flex;flex-direction:column;gap:3px;color:#fff; }
    .partner-art-copy strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:750 clamp(18px,2.2vw,28px)/1 var(--font);letter-spacing:-.035em;text-shadow:0 4px 24px #000; }
    .partner-art-copy>span { color:rgba(226,232,248,.65);font:600 8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase; }
    .partner-art-model-2022 { --partner-ink:#b6d7c4;background:linear-gradient(140deg,#060807,#101411 56%,#050605); }
    .partner-art-trls { --partner-ink:#93ebff;background:linear-gradient(140deg,#05080a,#0b1720 58%,#050607); }
    .partner-art-orb { --partner-ink:#8c9cff;background:linear-gradient(140deg,#070812,#10142a 58%,#06070c); }
    .partner-art-quadz { --partner-ink:#ff6868;background:linear-gradient(140deg,#0c0708,#241012 58%,#070506); }
    .partner-art-r8 { --partner-ink:#9c8cff;background:linear-gradient(140deg,#08070d,#191329 58%,#060509); }
    .partner-art-golden-pocket { --partner-ink:#eabf6d;background:linear-gradient(140deg,#0d0a05,#231a0d 58%,#080604); }
    .partner-art-lotion { --partner-ink:#6ee7a0;background:linear-gradient(140deg,#050a08,#0b2017 58%,#040705); }
    .partner-art-ifvg { --partner-ink:#f2a53b;background:linear-gradient(140deg,#0b0805,#24190a 58%,#070503); }
    .partner-art-flow-state { --partner-ink:#74d9c2;background:linear-gradient(140deg,#050a09,#0a201b 58%,#040706); }

    .partner-shelf-section-title { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:34px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line-2); }
    .partner-shelf-section-title h2 { margin:0;color:var(--text);font:700 20px/26px var(--font);letter-spacing:-.018em; }
    .partner-shelf-section-title span { color:var(--faint);font:500 10.5px var(--mono); }
    .partner-card-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px; }
    .partner-card { min-width:0; }
    .partner-card-body { padding-top:11px; }
    .partner-card-titleline { display:flex;align-items:baseline;gap:8px;min-width:0; }
    .partner-card-title { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)!important;text-decoration:none;font:700 14px/20px var(--font); }
    .partner-card-titleline>span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint);font:500 10.5px var(--font); }
    .partner-card-titleline>.partner-card-price { flex:none;margin-left:auto;color:var(--sec);font:650 10.5px var(--mono);font-variant-numeric:tabular-nums; }
    .partner-card-body>p { min-height:38px;margin:6px 0 12px;color:var(--muted);font:12px/18px var(--font); }
    .partner-card-actions { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; }
    .partner-action { min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:var(--r-tile);text-decoration:none!important;font:650 11.5px var(--font);transition:transform .16s ease,filter .16s ease,background .16s ease,border-color .16s ease; }
    .partner-action:hover { transform:none; }
    .partner-action-primary { background:rgb(var(--accent));color:#fff!important;box-shadow:0 7px 18px -13px rgba(37,99,235,.7); }
    .partner-action-primary:hover { filter:brightness(1.08); }
    .partner-action-secondary { border:1px solid var(--line);background:var(--surface);color:var(--sec)!important; }
    .partner-action-secondary:hover { border-color:var(--line-2);background:var(--surface-2);color:var(--text)!important; }
    .partner-shelf-empty { grid-column:1/-1;min-height:190px;display:grid;place-content:center;gap:5px;text-align:center;color:var(--muted);font:13px var(--font); }
    .partner-shelf-empty strong { color:var(--text);font-size:15px; }
    .partner-shelf-note { display:flex;align-items:flex-start;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted); }
    .partner-shelf-note>span { color:rgb(var(--accent));font-size:13px; }
    .partner-shelf-note p { margin:0;font:12px/18px var(--font); }

    html[data-theme="light"] .partner-shelf-sort select { color-scheme:light; }
    /* Product art is deliberately a dark, lit object in both app themes; keep the high-contrast
       partner mark in that object instead of swapping to the dark-ink mark used on light chrome. */
    html[data-theme="light"] .partner-product-art .partner-logo-dark { display:block; }
    html[data-theme="light"] .partner-product-art .partner-logo-light { display:none; }
    html[data-theme="light"] .partner-product-art { box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 26px 52px -38px rgba(45,37,24,.38); }

    @media (prefers-reduced-motion:reduce) {
      .partner-product-hero { transition:none; }
    }

    @media (max-width:920px) {
      .partner-featured { grid-template-columns:1fr;gap:18px; }
      .partner-featured-body { padding:0; }
      .partner-product-art-featured { min-height:230px; }
    }
    @media (max-width:680px) {
      .partner-shelf-head { align-items:flex-start;flex-direction:column;gap:16px; }
      .partner-shelf-head h1 { font-size:27px;line-height:33px; }
      .partner-shelf-tools { width:100%; }
      .partner-shelf-sort { flex:none; }
      .partner-shelf-sort select { min-width:150px; }
      .partner-shelf-search { flex:1; }
      .partner-shelf-search input { width:100%;font-size:16px; }
      .partner-card-grid { grid-template-columns:1fr;gap:26px; }
      .partner-card-body>p { min-height:0; }
    }
    @media (max-width:420px) {
      .partner-shelf-tools { align-items:stretch;flex-direction:column; }
      .partner-shelf-sort select,.partner-shelf-search { width:100%;box-sizing:border-box; }
      .partner-featured { margin-top:22px; }
      .partner-product-art-featured { min-height:190px; }
      .partner-art-lockup { left:6%;right:6%; }
      .partner-shelf-logo { width:42px;height:42px; }
      .partner-shelf-logo img { width:34px;height:34px; }
      .partner-card-actions { grid-template-columns:1fr; }
    }

    /* ── Taking Prophets publications — public TradingView work, inside our own shell. ── */
    .house-publications { width:100%;color:var(--text); }
    .house-publications-loading,.house-publications-error { min-height:260px;display:grid;place-content:center;gap:6px;text-align:center;color:var(--muted);font:14px var(--font); }
    .house-publications-error strong { color:var(--text);font-size:16px; }
    .house-profile { display:flex;align-items:center;justify-content:space-between;gap:32px;padding:2px 0 28px;border-bottom:1px solid var(--line-2);background:transparent; }
    .house-profile-identity { min-width:0;display:flex;align-items:center;gap:18px; }
    .house-profile-mark { width:68px;height:68px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:0 20px 44px -34px rgba(0,0,0,.7); }
    .house-profile-mark img { grid-area:1/1;width:40px;height:40px;object-fit:contain; }
    .house-profile-copy { min-width:0; }
    .house-profile-copy>span { display:block;margin-bottom:3px;color:rgb(var(--accent-hi));font:650 10px/15px var(--font);letter-spacing:.08em;text-transform:uppercase; }
    .house-profile-copy h1 { margin:0;color:var(--text);font:700 30px/36px var(--font);letter-spacing:-.026em;outline:none; }
    .house-profile-copy p { max-width:610px;margin:6px 0 0;color:var(--muted);font:13px/20px var(--font); }
    .house-profile-aside { flex:none;display:flex;align-items:flex-end;flex-direction:column;gap:12px; }
    .house-profile-stats { display:flex;gap:22px;margin:0; }
    .house-profile-stats>div { display:flex;align-items:flex-end;flex-direction:column; }
    .house-profile-stats dd { margin:0;color:var(--text);font:650 17px/20px var(--mono);font-variant-numeric:tabular-nums; }
    .house-profile-stats dt { color:var(--faint);font:500 9.5px/15px var(--font); }
    .house-profile-link { color:var(--sec)!important;text-decoration:none;font:600 11.5px/18px var(--font); }
    .house-profile-link:hover { color:rgb(var(--accent-hi))!important;text-decoration:underline;text-underline-offset:4px; }

    .house-publication-controls { margin:25px 0 8px; }
    .house-publication-tools { display:flex;align-items:center;gap:8px; }
    .house-publication-search,.house-publication-tools select { height:40px;box-sizing:border-box;border:0;border-radius:var(--r-input);background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--j-edge); }
    .house-publication-search { flex:1;min-width:0;padding:0 13px;font:13px var(--font);outline:none; }
    .house-publication-search::placeholder { color:var(--faint); }
    .house-publication-tools select { width:154px;padding:0 34px 0 12px;color:var(--sec);font:600 12px var(--font);color-scheme:dark;cursor:pointer; }
    .house-publication-search:focus-visible,.house-publication-tools select:focus-visible { outline:2px solid rgb(var(--accent));outline-offset:2px;border-color:transparent; }
    .house-category-strip { display:flex;gap:6px;margin-top:10px;padding:1px 0 8px;overflow-x:auto;scrollbar-width:thin; }
    .house-category-strip button { flex:none;min-height:32px;padding:0 11px;border:1px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--muted);font:600 11px var(--font);cursor:pointer; }
    .house-category-strip button:hover { background:var(--surface);color:var(--text); }
    .house-category-strip button.is-active { border-color:var(--line);background:var(--surface-2);color:var(--text); }
    .house-category-strip button:focus-visible { outline:2px solid rgb(var(--accent));outline-offset:1px; }
    .house-publication-count { margin:0 0 14px;color:var(--faint);font:500 10.5px/16px var(--mono); }

    .house-publication-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px; }
    .house-publication-card { min-width:0; }
    .house-publication-thumb { position:relative;display:block;isolation:isolate;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(145deg,#090a0d,#121621);box-shadow:0 24px 50px -40px rgba(0,0,0,.7); }
    .house-publication-thumb::after { content:'View publication ↗';position:absolute;z-index:3;right:10px;bottom:10px;padding:6px 8px;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-control);background:rgba(5,6,9,.76);color:#fff;font:600 9.5px var(--font);opacity:0;transform:translateY(3px);transition:opacity .16s ease,transform .16s ease; }
    .house-publication-thumb:hover::after,.house-publication-thumb:focus-visible::after { opacity:1;transform:none; }
    .house-publication-thumb:focus-visible { outline:2px solid rgb(var(--accent));outline-offset:3px; }
    .house-publication-thumb img { position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease,transform .35s ease; }
    .house-publication-thumb.is-loaded img { opacity:1; }
    .house-publication-thumb:hover img { transform:scale(1.012); }
    .house-publication-fallback { position:absolute;z-index:1;inset:0;display:grid;place-items:end start;padding:20px;color:#fff;font:700 22px/27px var(--font);letter-spacing:-.025em;background:radial-gradient(circle at 75% 15%,rgba(233,178,76,.19),transparent 38%),linear-gradient(145deg,#0b0c10,#151821); }
    .house-publication-body { padding-top:12px; }
    .house-publication-badges { display:flex;align-items:center;gap:6px;margin-bottom:7px; }
    .house-publication-badges span { min-height:21px;display:inline-flex;align-items:center;padding:0 7px;border-radius:var(--r-control);background:var(--surface);color:var(--muted);font:600 9.5px var(--font); }
    .house-publication-badges span[data-access="open"] { color:var(--ok-text);background:color-mix(in srgb,var(--ok) 12%,transparent); }
    .house-publication-title { display:block;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)!important;text-decoration:none;font:700 15px/21px var(--font); }
    .house-publication-title:hover { color:rgb(var(--accent-hi))!important;text-decoration:underline;text-underline-offset:4px; }
    .house-publication-title:focus-visible,.house-action:focus-visible,.house-profile-link:focus-visible { outline:2px solid rgb(var(--accent));outline-offset:3px;border-radius:4px; }
    .house-publication-body>p { min-height:36px;margin:5px 0 9px;color:var(--muted);font:12px/18px var(--font); }
    .house-publication-meta { display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--faint);font:500 10px/16px var(--font); }
    .house-publication-meta span:last-child { flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums; }
    .house-publication-actions { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px; }
    .house-action { min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:var(--r-tile);text-decoration:none!important;font:650 11.5px var(--font);transition:transform .16s ease,filter .16s ease,background .16s ease; }
    .house-action:hover { transform:none; }
    .house-action-primary { background:rgb(var(--accent));color:#fff!important; }
    .house-action-primary:hover { filter:brightness(1.08); }
    .house-action-secondary { border:1px solid var(--line);background:var(--surface);color:var(--sec)!important; }
    .house-action-secondary:hover { background:var(--surface-2);color:var(--text)!important; }
    .house-publication-actions>.house-action-secondary:only-child { grid-column:1/-1; }
    .house-publication-empty { grid-column:1/-1;min-height:220px;display:grid;place-content:center;gap:5px;text-align:center;color:var(--muted);font:13px var(--font); }
    .house-publication-empty strong { color:var(--text);font-size:15px; }
    html[data-theme="light"] .house-publication-tools select { color-scheme:light; }
    html[data-theme="light"] .house-profile-mark { box-shadow:0 20px 40px -34px rgba(45,37,24,.45); }
    @media (prefers-reduced-motion:reduce) { .house-publication-thumb img,.house-publication-thumb::after,.house-action { transition:none; } }
    @media (max-width:820px) {
      .house-profile { align-items:flex-start;flex-direction:column;gap:20px; }
      .house-profile-aside { width:100%;align-items:flex-start; }
      .house-profile-stats { justify-content:space-between;width:100%;max-width:380px; }
      .house-profile-stats>div { align-items:flex-start; }
    }
    @media (max-width:680px) {
      .house-profile-mark { width:58px;height:58px;border-radius:var(--r-card); }.house-profile-mark img { width:34px;height:34px; }
      .house-profile-copy h1 { font-size:27px;line-height:33px; }
      .house-publication-grid { grid-template-columns:1fr;gap:27px; }
      .house-publication-body>p { min-height:0; }
    }
    @media (max-width:420px) {
      .house-profile-identity { align-items:flex-start;gap:13px; }
      .house-profile-mark { width:48px;height:48px;border-radius:var(--r-card); }.house-profile-mark img { width:28px;height:28px; }
      .house-profile-copy h1 { font-size:24px;line-height:29px; }
      .house-profile-stats { gap:12px; }
      .house-publication-tools { align-items:stretch;flex-direction:column; }
      .house-publication-tools select { width:100%; }
      .house-publication-search { flex:none;width:100%;font-size:16px; }
      .house-publication-actions { grid-template-columns:1fr; }.house-publication-actions .house-action { grid-column:1; }
    }

    .lab > header { padding-left:18px; }
    .lab-deck-back { flex:none;height:32px;min-height:32px;padding:0 8px 0 4px;display:flex;align-items:center;gap:2px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:500 14px var(--font);box-shadow:none;transform:none; }
    .lab-deck-back svg { width:16px;height:16px; }
    .lab-deck-back:hover:not(:disabled) { color:var(--text);background:var(--j-hover-2); }

    @media (max-width:760px) {
      html { --tp-shell-w:0px; }








      /* flow-root keeps that 60px margin from collapsing through <body>: collapsed, the page was 60px taller than
         the screen, and focusing the prompt scrolled the whole Lab header out of view. */
      body { display:flow-root; }
      #launch,.lab,.gate { width:100%;height:calc(100% - 60px);margin:60px 0 0; }
      .paid-wrap { width:100%;margin-left:0;top:60px; }
      #launch .lch-space { left:0;top:60px; }
      .lab-deck-back { min-width:32px;width:32px;padding:0;justify-content:center; }
      .lab-deck-back span { display:none; }
    }
:is(.pine-table-tooltip, .pine-label-tooltip) {
  position: absolute;
  pointer-events: none;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid rgba(120, 123, 134, .62);
  border-radius: 5px;
  background: rgba(19, 23, 34, .97);
  color: #f0f3fa;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  font: 500 11px/1.45 -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pine-label-tooltip { z-index: 8; }

/* Chart screenshot intake: transient composer media, never stored in the conversation. */
.composer .composer-attach, .composer .attachment-remove { flex: none; width: 44px; min-width: 44px; height: 44px; padding: 0; color: var(--text-2); background: transparent; }
.composer-attach:focus-visible, .attachment-remove:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.composer-attach:active, .attachment-remove:active { transform: scale(.97); }
.composer-attachment { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--solid); min-width: 0; }
.composer-attachment[hidden], .composer-attach[hidden] { display: none; }
.composer-attachment img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.attachment-caption { min-width: 0; flex: 1; display: grid; gap: 3px; }
.attachment-caption strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--text); font-weight: 550; }
.attachment-caption > span, .attachment-status { font-size: 11px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.attachment-status:empty { display: none; }
.attachment-remove { font-size: 23px; }
.composer.dropping .composer-field { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.composer-field:has(.composer-attach:not([hidden])) #prompt { min-width: 0; }
.msg-attach { display: block; width: 120px; max-width: 100%; height: 80px; object-fit: contain; border-radius: 8px; margin-top: 8px; }
html[data-theme="light"] .composer-attachment { background: #f0f2f5; }
html[data-theme="light"] .composer-attach, html[data-theme="light"] .attachment-remove { color: #475569; }
html[data-theme="light"] .attachment-caption strong { color: #172033; }
html[data-theme="light"] .attachment-caption > span, html[data-theme="light"] .attachment-status { color: #475569; }
@media (hover: hover) and (pointer: fine) { .composer-attach:hover, .attachment-remove:hover { background: var(--tp-surface-hover); color: var(--text); } }
@media (prefers-reduced-motion: reduce) { .composer-attach:active, .attachment-remove:active { transform: none; } }

/* Script identity controls share the Lab palette; native radios retain keyboard behavior. */
.build-mode { display:flex; gap:4px; width:fit-content; max-width:100%; padding:3px; margin:10px 0; border:1px solid #343c49; border-radius:10px; background:#181d25; }
.build-mode label { position:relative; cursor:pointer; min-width:0; }
.build-mode input { position:absolute; opacity:0; width:1px; height:1px; }
.build-mode span { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:7px; color:#b6bfcd; font-size:13px; }
.build-mode input:checked + span { background:#303b4d; color:#f4f6fa; }
.build-mode input:focus-visible + span { outline:2px solid #a5bfff; outline-offset:2px; }
.build-mode input:disabled + span { opacity:.5; cursor:wait; }
.build-mode-notice { display:flex; align-items:center; gap:12px; padding:8px 12px; color:var(--text); font-size:13px; }
.build-mode-notice span { overflow-wrap:anywhere; }
.script-kind-filters { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0; }
.script-kind-filters button { min-height:44px; padding:0 12px; border:1px solid #343c49; border-radius:8px; background:transparent; color:#b6bfcd; cursor:pointer; }
.script-kind-filters button[aria-pressed="true"] { background:#303b4d; color:#f4f6fa; }
.script-kind-filters button:focus-visible { outline:2px solid #a5bfff; outline-offset:2px; }
.script-kind-badge { display:block; color:var(--muted); font-size:12px; font-weight:500; line-height:1.5; }
html[data-theme="light"] .build-mode { background:#f0f2f5; border-color:#ccd3df; }
html[data-theme="light"] .build-mode span, html[data-theme="light"] .script-kind-filters button { color:#475569; border-color:#ccd3df; }
html[data-theme="light"] .build-mode input:checked + span, html[data-theme="light"] .script-kind-filters button[aria-pressed="true"] { background:#dbe6f6; color:#16365f; }
html[data-theme="light"] .script-kind-badge { color:var(--muted); }
html[data-theme="light"] .build-mode input:focus-visible + span, html[data-theme="light"] .script-kind-filters button:focus-visible { outline-color:#315f9a; }
.build-mode[hidden], .build-mode-notice[hidden], .script-kind-filters[hidden], .authoring-backtest[hidden], .lib-actions button[hidden], .lch-rmore[hidden] { display:none; }
@media(max-width:600px) { .build-mode span { padding:0 14px; } .build-mode-notice { align-items:flex-start; } .script-kind-filters { gap:4px; } }

#chatPane > .build-mode { margin-left:14px; margin-right:14px; }

.library-panel > .script-kind-filters { padding:8px 18px; }

/* Pine intake keeps code distinct from the member's change request. */
.private-import-sheet .private-import-source{min-height:200px;white-space:pre;overflow:auto;tab-size:4}
.private-import-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.private-import-tools small{color:var(--muted)}
.private-import-sheet input,.private-import-sheet textarea{box-sizing:border-box;min-width:0;width:100%}
.private-import-sheet [readonly]{opacity:.75}
.private-import-result{overflow-wrap:anywhere}
.pine-start-button{align-self:flex-start;font-size:12px;min-height:32px}
html[data-theme="light"] .private-import-dialog{background:#fff;color:#18202d;border-color:#ccd3df}
html[data-theme="light"] .private-import-sheet .tp-field{background:#f7f9fc;color:#18202d;border-color:#c3cddb}
.private-import-sheet :focus-visible,.private-import-file:focus-within,.pine-start-button:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:3px}
@media(max-width:560px){.private-import-sheet{padding:16px;gap:12px}.private-import-sheet .private-import-source{min-height:150px}.private-import-sheet footer{flex-wrap:wrap}.private-import-sheet .tp-button{min-height:40px}}

/* Guided tour (tours.ts / tours-lab.ts): the driver.js card in the Lab's palette. Tokens sit on :root, so the
   card, which driver.js mounts on <body>, inherits them and follows the light theme's overrides. */
:root {
  --tp-tour-surface: var(--bg-2);
  --tp-tour-line: var(--line-2);
  --tp-tour-ink: var(--text);
  --tp-tour-muted: var(--text-2);
  --tp-tour-accent: rgb(var(--accent));
  --tp-tour-accent-ink: var(--accent-ink);
}

/* ── Every popover and dropdown (DESIGN_SYSTEM §7, "Navigation and layout motion", issue #369) ──────────────────
   Opens 140ms, a fade and a 4px rise on the one curve; closes in a 100ms fade, taking no input, and only then is
   hidden. Menus shown with [hidden] or an open class fade out here (display rides the fade, so it wins over the
   [hidden] rule); menus a script builds and removes (.why-pop, .color-input-pop, the chart menus) fade through the
   shell's leaveAndRemove(). `translate` leaves any positioning transform alone. Reduced motion: an 80ms fade. */
:is(#labMoreMenu, #authoringFinishMenu, #savedPanel, #notifPanel, #usagePanel, #rpJumpMenu, #launch .lch2-menu):not([hidden]),
.tf-more-menu.open, .dr-group.open .dr-fly,
:is(.why-pop, .color-input-pop) { animation: tp-pop-in var(--m-pop, 140ms) var(--m-ease, cubic-bezier(.16, 1, .3, 1)); }
:is(#labMoreMenu, #authoringFinishMenu, #savedPanel, #notifPanel, #usagePanel, #rpJumpMenu, #launch .lch2-menu)[hidden],
.tf-more-menu:not(.open), .dr-group:not(.open) .dr-fly {
  opacity: 0; pointer-events: none; animation: none;
  transition: opacity var(--m-fast, 100ms) ease, display var(--m-fast, 100ms) allow-discrete; }
@keyframes tp-pop-in { from { opacity: 0; translate: 0 4px; } }
@keyframes tp-pop-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :is(#labMoreMenu, #authoringFinishMenu, #savedPanel, #notifPanel, #usagePanel, #rpJumpMenu, #launch .lch2-menu):not([hidden]),
  .tf-more-menu.open, .dr-group.open .dr-fly,
  :is(.why-pop, .color-input-pop, .tp-chart-menu) { animation: tp-pop-fade 80ms ease !important; }
  :is(#labMoreMenu, #authoringFinishMenu, #savedPanel, #notifPanel, #usagePanel, #rpJumpMenu, #launch .lch2-menu)[hidden],
  .tf-more-menu:not(.open), .dr-group:not(.open) .dr-fly { transition: opacity 80ms ease, display 80ms allow-discrete !important; }
}

/* Taking Prophets shared product language.
   Both Lab builds append this file after their app stylesheet. Product surfaces
   opt in with tp-* primitives; contextual chart chrome can remain app-specific. */
:root {
  --tp-space-0: 2px;
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;
  --tp-space-5: 24px;
  --tp-space-6: 32px;
  --tp-control-compact: 30px;
  --tp-control: 36px;
  --tp-control-roomy: 44px;
  --tp-touch-target: 44px;
  /* v3 radii (DESIGN_SYSTEM §2): control and segment 6 · input and tile 8 · card, menu and dialog 10 · pill.
     There is no larger radius: a dialog is a card that floats. */
  --tp-radius-xs: 6px;
  --tp-radius-sm: 8px;
  --tp-radius: 10px;
  --tp-radius-lg: 10px;
  --tp-radius-pill: 999px;
  --tp-font-ui: var(--font, "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --tp-font-data: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  --tp-text: var(--text, #e7eaee);
  --tp-text-secondary: var(--sec, #9aa1aa);
  --tp-text-muted: var(--muted, #6a7078);
  --tp-text-faint: var(--faint, #474d55);
  --tp-surface: var(--surface, rgba(255, 255, 255, .045));
  --tp-surface-hover: var(--surface-hi, var(--surface-2, rgba(255, 255, 255, .08)));
  --tp-panel: var(--card-solid, var(--solid, #141417));
  --tp-field-bg: var(--bg-2, var(--solid, #141417));
  --tp-border: var(--line, rgba(255, 255, 255, .08));
  --tp-border-strong: var(--line-strong, var(--line-2, rgba(255, 255, 255, .14)));
  --tp-focus: var(--focus, rgba(37, 99, 235, .7));
  --tp-success: var(--up, var(--ok, #35c77c));
  --tp-danger: var(--down, var(--danger, #f0544a));
  /* One accent across the platform — the same #2563eb the Backtester, the Lab and the website
     all resolve to. This file is appended after both app stylesheets, so a gold value here
     re-painted product surfaces gold no matter what the app tokens said. */
  --tp-accent: #2563eb;
  --tp-accent-hi: #3b82f6;
  --tp-accent-ink: #ffffff;
  --tp-warn: #eab63c;   /* caution only */
  /* v3: one shadow, for floating objects only. Rules read the app's --j-float-shadow / --j-edge directly
     (with these fallbacks), so a theme set below :root still reaches them. */
  --tp-shadow-pop: 0 10px 24px rgba(0, 0, 0, .45);
  --tp-shadow-modal: 0 10px 24px rgba(0, 0, 0, .45);
  --tp-ease: var(--ease, cubic-bezier(.4, 0, .2, 1));
  --tp-spring: var(--spring, cubic-bezier(.2, .8, .3, 1));
}

/* Buttons */
.tp-button {
  min-height: var(--tp-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  padding: 0 var(--tp-space-3);
  border: 0;
  border-radius: var(--r-control, var(--tp-radius-xs));
  font: 600 12.5px/1 var(--tp-font-ui);
  letter-spacing: -.005em;
  white-space: nowrap;
  transition:
    color .14s var(--tp-ease),
    background .14s var(--tp-ease),
    box-shadow .14s var(--tp-ease);
}
/* v3: flat fills, crisp edges — no hover lift, no press scale. */
.tp-button:disabled, .tp-button[aria-disabled="true"] {
  opacity: .42;
  cursor: default;
}
.tp-button-primary {
  color: var(--tp-accent-ink);
  /* v3 primary: flat accent. No gradient, no inset highlight, no glow. */
  background: var(--tp-accent);
  box-shadow: none;
}
.tp-button-primary:hover:not(:disabled) { background: var(--j-accent-hover, #1d4fd8); }
.tp-button-primary:active:not(:disabled) { background: var(--j-accent-down, #1a46c0); }
.tp-button-secondary {
  color: var(--tp-text);
  background: var(--j-chip, var(--tp-surface));
  box-shadow: none;
}
.tp-button-secondary:hover:not(:disabled) { background: var(--j-chip-hover, var(--tp-surface-hover)); }
/* Quiet: transparent with the 1px inset edge; the edge is the affordance, the fill is hover. */
.tp-button-quiet {
  color: var(--tp-text-secondary);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b);
}
.tp-button-quiet:hover:not(:disabled) {
  color: var(--tp-text);
  background: var(--j-raised, var(--raised, var(--tp-surface)));
}
/* A quiet icon button is the ghost icon: no edge at rest. */
.tp-button-quiet.tp-button-icon { box-shadow: none; }
/* Danger lives in the confirm, not a red panel. */
.tp-button-danger { color: var(--tp-danger); background: transparent; box-shadow: none; }
.tp-button-danger:hover:not(:disabled) { background: var(--j-neg-chip, rgba(240, 84, 74, .10)); }
.tp-button-icon {
  width: var(--tp-control);
  min-width: var(--tp-control);
  padding: 0;
}

/* Fields and selects */
.tp-field,
.tp-select {
  width: 100%;
  min-width: 0;
  min-height: var(--tp-control);
  padding: 7px 10px;
  color: var(--tp-text);
  background-color: var(--tp-field-bg);
  border: 0;
  border-radius: var(--r-input, var(--tp-radius-sm));
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b);
  font: 500 12.5px/1.4 var(--tp-font-ui);
  transition: box-shadow .14s var(--tp-ease), background .14s var(--tp-ease);
}
.tp-field:hover,
.tp-select:hover { background-color: var(--j-hover-2, var(--tp-field-bg)); }
/* v3 focus: a 1px accent inset ring and a 3px halo; nothing moves. */
.tp-field:focus,
.tp-select:focus {
  box-shadow: inset 0 0 0 1px var(--tp-accent), 0 0 0 3px rgba(37, 99, 235, .14);
  outline: none;
}
.tp-field::placeholder { color: var(--tp-text-faint); }
textarea.tp-field { min-height: 88px; resize: vertical; }
.tp-select {
  width: auto;
  appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tp-text-muted) 50%),
    linear-gradient(135deg, var(--tp-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.tp-field[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--tp-danger), 0 0 0 3px color-mix(in srgb, var(--tp-danger) 12%, transparent);
}

/* Segmented tabs */
/* v3 inset pill group (§6.7): a raised track with no ring, radius 8, 3px padding; segments radius 6. */
.tp-tabs {
  align-items: center;
  gap: var(--tp-space-0);
  padding: 3px;
  border: 0;
  border-radius: var(--r-tile, var(--tp-radius-sm));
  background: var(--j-raised, var(--raised, var(--tp-surface)));
}
.tp-tab {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: var(--tp-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-seg, var(--tp-radius-xs));
  box-shadow: none;
  font: 500 12px/1 var(--tp-font-ui);
}
.tp-tab:hover:not(:disabled) { color: var(--tp-text); }
.tp-tab:is(.active, [aria-selected="true"]) {
  color: var(--tp-text);
  background: var(--j-chip, var(--tp-surface-hover));
  box-shadow: none;
  font-weight: 600;
}

/* Tooltips and floating menus */
.tp-tooltip {
  max-width: min(300px, calc(100vw - 24px));
  padding: 8px 10px;
  color: var(--tp-text);
  background: var(--tp-panel);
  border: 0;
  border-radius: var(--r-tile, var(--tp-radius-sm));
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b), var(--j-float-shadow, var(--tp-shadow-pop));
  font: 500 11.5px/1.45 var(--tp-font-ui);
}
/* v3 floating object (§6.16e): radius 10, 1px inset edge, the float shadow. */
.tp-menu {
  color: var(--tp-text);
  background: var(--tp-panel);
  border: 0;
  border-radius: var(--r-card, var(--tp-radius));
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b), var(--j-float-shadow, var(--tp-shadow-pop));
}
.tp-menu-item {
  min-height: var(--tp-control);
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
  width: 100%;
  padding: 0 10px;
  color: var(--tp-text);
  background: transparent;
  border: 0;
  border-radius: var(--r-control, var(--tp-radius-xs));
  text-align: left;
}
.tp-menu-item:hover:not(:disabled) { background: var(--tp-surface-hover); }

/* Modals and sheets */
.tp-modal-backdrop {
  /* v3: a flat scrim, no glass blur. */
  background: rgba(0, 0, 0, .72);
}
.tp-modal {
  color: var(--tp-text);
  background: var(--tp-panel);
  border: 0;
  border-radius: var(--r-card, var(--tp-radius-lg));
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b), var(--j-float-shadow, var(--tp-shadow-modal));
}
.tp-modal-header,
.tp-modal-footer {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: var(--tp-space-3);
  padding: var(--tp-space-3) var(--tp-space-4);
}
.tp-modal-header { border-bottom: 1px solid var(--tp-border); }
.tp-modal-footer { justify-content: flex-end; border-top: 1px solid var(--tp-border); }

/* Feedback states */
.tp-toast {
  min-height: var(--tp-control-roomy);
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
  padding: 9px 12px;
  color: var(--tp-text);
  background: var(--tp-panel);
  border: 0;
  border-radius: var(--r-card, var(--tp-radius));
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b), var(--j-float-shadow, var(--tp-shadow-pop));
  font: 550 12.5px/1.4 var(--tp-font-ui);
}
.tp-empty {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  padding: var(--tp-space-5);
  color: var(--tp-text-muted);
  text-align: center;
  font: 500 12.5px/1.55 var(--tp-font-ui);
}
.tp-empty > strong { color: var(--tp-text); font-weight: 650; }
.tp-empty > small { max-width: 36ch; color: var(--tp-text-faint); font: inherit; }

/* Section labels — the ONE treatment, platform-wide.
   Every surface had grown its own gold kicker ("◆ BUILD · INDICATOR LAB", "Prove it",
   "YOUR TRADING WORKSPACE"), which is most of the yellow a member actually sees. The pattern
   that already reads well is the Lab's "YOUR INDICATORS · 03 SAVED" bay label: neutral type on
   a translucent surface. That is generalised here and gold is out of the family entirely.
   .tp-eyebrow is the bare label; .tp-eyebrow-glass adds the chip so it can carry a header. */
.tp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  font: 600 10.5px/1 var(--tp-font-data);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tp-text-secondary);
}
.tp-eyebrow > b,
.tp-eyebrow .tp-eyebrow-mark {
  color: var(--tp-accent);
  font-weight: 600;
  font-style: normal;
}
.tp-eyebrow .tp-eyebrow-sep { color: var(--tp-text-faint); }
.tp-eyebrow-glass {
  padding: 6px 11px;
  border: 0;
  border-radius: var(--tp-radius-pill);
  /* v3: a flat chip with the inset edge; glass blur is retired. */
  background: var(--j-raised, var(--tp-surface));
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b);
}

.tp-skeleton-stack {
  display: grid;
  gap: var(--tp-space-2);
  padding: var(--tp-space-2);
}
.tp-skeleton {
  display: block;
  min-height: 48px;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-tile, var(--tp-radius-sm));
  box-shadow: inset 0 0 0 1px var(--j-edge-2, #1c1c20);
  background: var(--tp-surface);
  position: relative;
}
.tp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: tp-skeleton 1.35s ease-in-out infinite;
}
.tp-progress-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  color: var(--tp-text-secondary);
}
.tp-progress-inline::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border: 1.5px solid color-mix(in srgb, var(--tp-accent) 30%, transparent);
  border-top-color: var(--tp-accent);
  border-radius: 50%;
  animation: tp-spin .75s linear infinite;
}
.tp-progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: var(--tp-radius-pill);
  background: var(--tp-surface-hover);
}
.tp-progress-bar {
  width: var(--tp-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--tp-accent);
  transition: width .24s var(--tp-ease);
}

:where(button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--tp-focus);
  outline-offset: 2px;
}

@keyframes tp-skeleton { to { transform: translateX(100%); } }
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* Breakpoint contract:
   1100px wide workspace · 900px compact workspace · 680px mobile chrome ·
   480px narrow phone. Contextual layout remains owned by each product. */
@media (max-width: 900px) {
  .tp-modal-header,
  .tp-modal-footer { padding-inline: 14px; }
}
@media (max-width: 680px) {
  .tp-menu-item { min-height: 40px; }
  .tp-shell-mobile-menu,
  .tp-shell-mobile-theme,
  .tp-shell-mobile-close {
    width: var(--tp-touch-target);
    min-width: var(--tp-touch-target);
    height: var(--tp-touch-target);
    min-height: var(--tp-touch-target);
  }
}
@media (max-width: 480px) {
  .tp-modal { border-radius: var(--tp-radius); }
  .tp-empty { min-height: 96px; padding: 18px 14px; }
}

/* Pointer precision, not viewport width, determines tap-target size. */
@media (hover: none) and (pointer: coarse) {
  .tp-button,
  .tp-tab,
  .tp-menu-item,
  .tp-field,
  .tp-select { min-height: var(--tp-touch-target); }
  .tp-button-icon { width: var(--tp-touch-target); min-width: var(--tp-touch-target); }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .tp-skeleton::after,
  .tp-progress-inline::before { animation: none; }
}

/* Shared chart settings — one TradingView-familiar information architecture for both Labs. */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
  backdrop-filter: none;
}
.cs-modal.open { display: flex; }
.cs-sheet {
  width: min(760px, calc(100vw - 48px));
  height: min(720px, calc(100dvh - 48px));
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--tp-panel, var(--card-solid, var(--card, #141417)));
  /* v3 dialog (§6.16e): radius 10, the 1px inset edge, the float shadow. */
  border: 0;
  border-radius: var(--r-card, 10px);
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b), var(--j-float-shadow, 0 10px 24px rgba(0, 0, 0, .45));
  color: var(--tp-text, var(--text, #e7eaee));
  font-family: var(--font, Switzer, system-ui, sans-serif);
}
.cs-head {
  display: flex;
  align-items: center;
  user-select: none;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 20px;
  border-bottom: 1px solid var(--tp-border, var(--line, rgba(128, 128, 128, .16)));
}
.cs-head h2 { margin: 0; color: var(--tp-text, var(--text, #e7eaee)); font: 650 17px/1 var(--font, Switzer, sans-serif); letter-spacing: -.02em; }
.cs-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-control, 6px);
  background: transparent;
  color: var(--tp-text-muted, var(--muted, #8b93a1));
  font: 400 18px/1 var(--font, Switzer, sans-serif);
  cursor: pointer;
}
.cs-close:hover { background: var(--tp-surface-hover, var(--surface-hi, rgba(128, 128, 128, .1))); color: var(--tp-text, var(--text, #e7eaee)); }
.cs-workspace { min-height: 0; display: grid; grid-template-columns: 206px minmax(0, 1fr); }
.cs-nav {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border-right: 1px solid var(--tp-border, var(--line, rgba(128, 128, 128, .16)));
  background: color-mix(in srgb, var(--solid, #0f0f12) 52%, transparent);
}
.cs-nav button {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-control, 6px);
  background: transparent;
  color: var(--tp-text-muted, var(--muted, #8b93a1));
  font: 560 12.5px/1 var(--font, Switzer, sans-serif);
  text-align: left;
  cursor: pointer;
  transition: background .14s var(--ease, ease), color .14s var(--ease, ease);
}
.cs-nav button svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.cs-nav button:hover { color: var(--tp-text, var(--text, #e7eaee)); background: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07))); }
.cs-nav button[aria-selected="true"] { color: var(--tp-text, var(--text, #e7eaee)); background: var(--tp-surface-hover, var(--surface-hi, rgba(128, 128, 128, .12))); }
.cs-nav button[aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 999px;
  background: var(--tp-accent, #2563eb);
}
.cs-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.cs-panel { width: min(430px, calc(100% - 48px)); margin: 0 auto; padding: 23px 0 34px; }
.cs-section-label {
  margin: 4px 0 12px;
  color: var(--tp-text-faint, var(--faint, #666d79));
  font: 650 9.5px/1 var(--font, Switzer, sans-serif);
  letter-spacing: .095em;
  text-transform: uppercase;
}
.cs-section-label:not(:first-child) { margin-top: 26px; }
.cs-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 6px 0;
}
.cs-row > label, .cs-label, .cs-row > div > label { color: var(--tp-text-secondary, var(--sec, #c6cad2)); font: 500 12.5px/1.35 var(--font, Switzer, sans-serif); }
.cs-row small { display: block; max-width: 280px; margin-top: 4px; color: var(--tp-text-faint, var(--faint, #666d79)); font: 450 10.5px/1.4 var(--font, Switzer, sans-serif); }
.cs-row-controls, .csctl, .cs-pair, .cs-autoctl { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; }
.cs-row-controls { min-width: 180px; }
.cs-pair { gap: 8px; }
.cs-color { display: inline-flex; align-items: center; gap: 6px; color: var(--tp-text-faint, var(--faint, #666d79)); font: 500 9.5px/1 var(--font, Switzer, sans-serif); }
.cs-color > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cs-color input[type="color"] {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 4px;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-input, 8px);
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b);
  background: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07)));
  cursor: pointer;
}
.cs-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cs-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.cs-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.cs-color input[type="color"]:hover { box-shadow: inset 0 0 0 1px var(--tp-accent, #2563eb); }
.cs-check { position: relative; width: 18px; height: 18px; flex: none; display: inline-grid; }
.cs-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cs-check span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-control, 6px);
  background: var(--j-chip, var(--tp-surface, rgba(128, 128, 128, .07)));
  color: var(--tp-accent-ink, var(--accent-ink, #221803));
  pointer-events: none;
}
.cs-check input:checked + span { background: var(--tp-accent, #2563eb); }
.cs-check input:checked + span::after { content: ''; width: 8px; height: 4px; margin-top: -2px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(-45deg); }
.cs-check input:focus-visible + span, .cs-nav button:focus-visible, .cs-close:focus-visible, .cs-foot :is(button, select):focus-visible, .chart-settings-gear:focus-visible { outline: 2px solid var(--tp-focus, var(--tp-accent, #e9b24c)); outline-offset: 2px; }
.cs-autoctl { gap: 10px; }
.cs-auto { display: inline-flex; align-items: center; gap: 6px; color: var(--tp-text-faint, var(--faint, #666d79)); font: 500 9.5px/1 var(--font, Switzer, sans-serif); white-space: nowrap; }
.cs-auto input { width: 14px; height: 14px; margin: 0; accent-color: var(--tp-accent, #e9b24c); }
.cs-row select, .cs-template-trigger, .cs-number input {
  height: 36px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b);
  border-radius: var(--r-input, 8px);
  background-color: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07)));
  color: var(--tp-text, var(--text, #e7eaee));
  font: 500 11.5px/1 var(--font, Switzer, sans-serif);
}
.cs-row select, .cs-template-trigger {
  min-width: 188px;
  padding: 0 34px 0 11px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tp-text-muted, #8b93a1) 50%), linear-gradient(135deg, var(--tp-text-muted, #8b93a1) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 11px) 15px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
/* The sliders (#674): the round-thumb range the Backtester's host form uses (battles.css .bt-host-range), filling the
   control column. --p (0–1) is set from chart-settings.ts so the track fills up to the thumb in Chromium too. */
.cs-row .csctl:has(> input[type="range"]) { flex: 1; min-width: 0; max-width: 260px; }
.cs-row input[type="range"] {
  --p: 0; --thumb: 18px;
  flex: 1; min-width: 120px; width: 100%; height: 22px; margin: 0; padding: 0; border: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cs-row input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--tp-accent, #2563eb) 0, var(--tp-accent, #2563eb) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)),
    var(--j-edge, #26262c) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p))); }
.cs-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -6px;
  border: 0; border-radius: 999px; background: #ffffff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .22), 0 1px 4px rgba(0, 0, 0, .45); }
.cs-row input[type="range"]::-moz-range-track { height: 6px; border: 0; border-radius: 3px; background: var(--j-edge, #26262c); }
.cs-row input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--tp-accent, #2563eb); }
.cs-row input[type="range"]::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 999px; background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .22), 0 1px 4px rgba(0, 0, 0, .45); }
.cs-row input[type="range"]:focus-visible { outline: none; }
.cs-row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(37, 99, 235, .6), 0 0 0 6px rgba(255, 255, 255, .25); }
.cs-row input[type="range"]:disabled { cursor: default; opacity: .45; }
.cs-val { min-width: 36px; color: var(--tp-text-muted, var(--muted, #8b93a1)); font: 600 10.5px/1 var(--mono, ui-monospace, monospace); text-align: right; }
.cs-number { display: inline-flex; align-items: center; gap: 8px; color: var(--tp-text-muted, var(--muted, #8b93a1)); font: 500 10.5px/1 var(--font, Switzer, sans-serif); }
.cs-number input { width: 88px; padding: 0 10px; font-family: var(--mono, ui-monospace, monospace); }
.cs-seg { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: var(--r-tile, 8px); background: var(--j-raised, var(--tp-surface, rgba(128, 128, 128, .07))); }
.cs-seg button { min-width: 60px; padding: 6px 8px; border: 0; border-radius: var(--r-seg, 6px); background: transparent; color: var(--tp-text-muted, var(--muted, #8b93a1)); font: 600 10px/1 var(--font, Switzer, sans-serif); cursor: pointer; }
.cs-seg button:hover { color: var(--tp-text, var(--text, #e7eaee)); }
.cs-seg button.active { background: var(--j-chip, var(--tp-surface-hover, rgba(128, 128, 128, .13))); color: var(--tp-text, var(--text, #e7eaee)); box-shadow: none; }
.cs-btn { min-height: 34px; padding: 0 12px; border: 0; box-shadow: inset 0 0 0 1px var(--j-edge, #26262b); border-radius: var(--r-control, 6px); background: transparent; color: var(--tp-text-secondary, var(--sec, #c6cad2)); font: 600 10.5px/1 var(--font, Switzer, sans-serif); cursor: pointer; }
.cs-btn:hover { background: var(--j-raised, var(--tp-surface-hover, rgba(128, 128, 128, .13))); color: var(--tp-text, var(--text, #e7eaee)); }
.cs-note, .cs-contrast { margin: 14px 0 0; padding: 10px 11px; border-radius: 8px; font: 500 10.5px/1.45 var(--font, Switzer, sans-serif); }
.cs-note { color: var(--tp-text-muted, var(--muted, #8b93a1)); background: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07))); }
.cs-contrast { color: var(--tp-text-secondary, #a36a00); background: color-mix(in srgb, var(--tp-warn, #e9b24c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-warn, #e9b24c) 30%, transparent); }
.cs-panel .disabled { opacity: .38; }
.cs-panel .disabled :is(input, select, button) { cursor: not-allowed; }
.cs-foot {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  border-top: 1px solid var(--tp-border, var(--line, rgba(128, 128, 128, .16)));
  background: color-mix(in srgb, var(--tp-panel, #141417) 96%, transparent);
}
.cs-template, .cs-actions { position: relative; display: flex; align-items: center; gap: 8px; }
.cs-template > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cs-template-trigger { min-width: 126px; max-width: 190px; height: 36px; display: inline-flex; align-items: center; cursor: pointer; }
.cs-template-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-template-list { left: 0; bottom: 45px; min-width: 186px; max-height: 264px; overflow: auto; }
.cs-template-list .cs-opt { width: 100%; min-height: 34px; display: flex; align-items: center; border: 0; border-radius: 6px; padding: 0 11px; background: transparent; color: var(--tp-text-secondary, var(--sec, #c6cad2)); text-align: left; }
.cs-template-list .cs-opt:hover, .cs-template-list .cs-opt:focus-visible { background: var(--tp-surface-hover, var(--surface-hi, rgba(128, 128, 128, .13))); color: var(--tp-text, var(--text, #e7eaee)); }
.cs-template-list .cs-opt[aria-selected="true"] { color: var(--tp-text, var(--text, #e7eaee)); }
.cs-template-list .cs-opt[aria-selected="true"]::after { content: '✓'; margin-left: auto; padding-left: 10px; color: var(--tp-accent, #e9b24c); font-weight: 700; }
.cs-list-group { display: block; padding: 8px 11px 4px; color: var(--tp-text-faint, var(--faint, #666d79)); font: 650 8.5px/1 var(--font, Switzer, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
.cs-template-name { display: inline-flex; align-items: center; gap: 8px; }
.cs-template-name input { height: 36px; min-width: 176px; padding: 0 11px; border: 0; box-shadow: inset 0 0 0 1px var(--j-edge, #26262b); border-radius: var(--r-input, 8px); background-color: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07))); color: var(--tp-text, var(--text, #e7eaee)); font: 500 11.5px/1 var(--font, Switzer, sans-serif); }
.cs-template-name input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--tp-accent, #2563eb), 0 0 0 3px rgba(37, 99, 235, .14); }
.cs-template.naming > :not(.cs-template-name):not(label) { display: none; }
.cs-foot button { min-height: 36px; padding: 0 14px; border: 0; box-shadow: inset 0 0 0 1px var(--j-edge, #26262b); border-radius: var(--r-control, 6px); background: transparent; color: var(--tp-text-secondary, var(--sec, #c6cad2)); font: 620 11.5px/1 var(--font, Switzer, sans-serif); cursor: pointer; }
.cs-foot button:hover { background: var(--j-raised, var(--tp-surface-hover, rgba(128, 128, 128, .13))); color: var(--tp-text, var(--text, #e7eaee)); }
.cs-foot #csReset { box-shadow: none; background: transparent; color: var(--tp-text-muted, var(--muted, #8b93a1)); }
.cs-template-menu { position:absolute;z-index:4;left:150px;bottom:45px;min-width:138px;padding:5px;border:0;border-radius:var(--r-card,10px);background:var(--tp-panel,var(--card-solid,#141417));box-shadow:inset 0 0 0 1px var(--j-edge, #26262b), var(--j-float-shadow, 0 10px 24px rgba(0, 0, 0, .45)); }
.cs-template-menu[hidden] { display:none; }
.cs-template-menu button { width:100%;min-height:34px;display:block;border:0;box-shadow:none;border-radius:var(--r-control,6px);background:transparent;text-align:left; }
.cs-template-menu button.danger { color:var(--tp-danger,var(--down,#f0544a)); }
.cs-template-status { max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tp-positive,var(--up,#35c77c));font:550 10px/1.2 var(--font,Switzer,sans-serif); }
.cs-template-status.error { color:var(--tp-danger,var(--down,#f0544a)); }
.cs-foot .primary { min-width: 58px; box-shadow: none; background: var(--tp-accent, #2563eb); color: var(--tp-accent-ink, #ffffff); }
.cs-foot .primary:hover { background: var(--j-accent-hover, #1d4fd8); color: var(--tp-accent-ink, #ffffff); }
.chart-settings-gear {
  position: absolute;
  z-index: 8;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-control, 6px);
  background: var(--tp-panel, #141417);
  color: var(--tp-text-muted, var(--muted, #8b93a1));
  box-shadow: inset 0 0 0 1px var(--j-edge, #26262b);
  cursor: pointer;
  transition: color .14s var(--ease, ease), background .14s var(--ease, ease);
}
.chart-settings-gear::before { content: ''; position: absolute; inset: -6px; }
.chart-settings-gear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.chart-settings-gear:hover { color: var(--tp-text, var(--text, #e7eaee)); background: var(--j-hover-2, var(--tp-panel, #141417)); }

@media (max-width: 660px) {
  .cs-modal { align-items: stretch; padding: 0; }
  .cs-sheet { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .cs-head { min-height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .cs-close, .cs-color input[type="color"] { width: 44px; height: 44px; }
  .cs-check::before { content: ''; position: absolute; inset: -13px; }
  .cs-workspace { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .cs-nav { flex-direction: row; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--tp-border, var(--line, rgba(128, 128, 128, .16))); scrollbar-width: none; }
  .cs-nav::-webkit-scrollbar { display: none; }
  .cs-nav button { width: auto; min-width: max-content; min-height: 44px; padding: 0 11px; }
  .cs-nav button[aria-selected="true"]::before { left: 11px; right: 11px; top: auto; bottom: 0; width: auto; height: 2px; }
  .cs-content { scrollbar-gutter: auto; }
  .cs-panel { width: auto; margin: 0; padding: 20px 16px 34px; }
  .cs-row { min-height: 52px; gap: 14px; }
  .cs-row-controls { min-width: 0; }
  .cs-row select { min-width: 174px; }
  .cs-row select, .cs-number input { height: 44px; }
  .cs-btn, .cs-seg button, .cs-foot button, .cs-template select { min-height: 44px; }
  .cs-auto { display: none; }
  .cs-foot { min-height: calc(62px + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom); }
  .cs-template #csReset { display: none; }
  .cs-template #csTemplateSave { display:none; }
  .cs-template-status { display:none; }
  .cs-template select { min-width: 112px; }
}
@media (max-width: 420px) {
  .cs-row { align-items: flex-start; flex-direction: column; padding: 9px 0; }
  .cs-row > :last-child { align-self: stretch; justify-content: flex-end; }
  .cs-color-row { flex-direction: row; align-items: center; }
  .cs-color-row > :last-child { align-self: auto; }
  .cs-row select { width: 100%; }
  .cs-autoctl { width: 100%; }
  .cs-seg { width: 100%; }
  .cs-seg button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-nav button, .chart-settings-gear { transition: none; }
}

/* The template menus open and close like every popover (DESIGN_SYSTEM §7): 140ms fade and 4px rise on the one
   curve; a 100ms fade out, then hidden. Reduced motion: an 80ms fade. */
.cs-template-menu:not([hidden]) { animation: tp-pop-in var(--m-pop, 140ms) var(--m-ease, cubic-bezier(.16, 1, .3, 1)); }
.cs-template-menu[hidden] { opacity: 0; pointer-events: none; animation: none; transition: opacity var(--m-fast, 100ms) ease, display var(--m-fast, 100ms) allow-discrete; }
@keyframes tp-pop-in { from { opacity: 0; translate: 0 4px; } }
@keyframes tp-pop-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cs-template-menu.cs-template-menu:not([hidden]) { animation: tp-pop-fade 80ms ease !important; }
  .cs-template-menu.cs-template-menu[hidden] { transition: opacity 80ms ease, display 80ms allow-discrete !important; }
}

/* ── Drawing tools: the rail, its flyouts and tooltips, the magnet menu, the floating style bar and
   favourites bar (#421); the drawing settings dialog reads these tokens too (#422). ONE stylesheet
   for both apps: scripts/build-static.mjs appends it to the Backtester's and the Lab's CSS, so the
   rail has its width from the first frame in both.
   Values are the design canvas's ("Drawing tools", Main board). The edges are the v3 tokens. ── */
.tp-draw {
  --dw-pane: #0C0C0F; --dw-raised: #101013; --dw-chip: #1A1A1F; --dw-hov: #16161A;
  --dw-edge: var(--j-edge, #26262B); --dw-edge2: var(--j-edge-2, #1C1C20);
  --dw-tx: #EFEEEA; --dw-tx2: #C0BDB6; --dw-mu: #A09D96; --dw-fa: #6F6D68; --dw-ink: #8A8780;
  --dw-menu: #141418; --dw-shadow: var(--j-float-shadow, 0 10px 24px rgba(0, 0, 0, .45)); --dw-tip: #1F1F25;
  --dw-blue: #3B82F6; --dw-gold: #E2BE69; --dw-red: #F0544A;
  --dw-ease: var(--m-ease, cubic-bezier(.16, 1, .3, 1));
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .tp-draw {
  --dw-pane: #FCFBF8; --dw-raised: #F2F0EB; --dw-chip: #E6E3DC; --dw-hov: #EDEBE5;
  --dw-edge: var(--j-edge, #DDD9D0); --dw-edge2: var(--j-edge-2, #E6E3DC);
  --dw-tx: #171612; --dw-tx2: #3A3731; --dw-mu: #565249; --dw-fa: #8C877D; --dw-ink: #6C685F;
  --dw-menu: #FFFFFF; --dw-shadow: var(--j-float-shadow, 0 10px 24px rgba(40, 32, 20, .12)); --dw-tip: #171612;
}
.tp-draw button { font-family: inherit; }
.tp-draw .dw-ico { display: block; flex: none; }

/* ── ">>" scroll to the most recent bar (#673): the pane's bottom-right corner, while the newest bar is off screen ── */
.dw-latest {
  position: absolute; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--dw-edge); border-radius: 7px; background: var(--dw-raised); color: var(--dw-mu);
  box-shadow: var(--dw-shadow); cursor: pointer;
}
.dw-latest:hover { background: var(--dw-hov); color: var(--dw-tx); }
.dw-latest[hidden] { display: none; }

/* ── the rail ── */
.dw-rail {
  width: 58px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; background: var(--dw-pane); border: 0; box-shadow: inset -1px 0 0 var(--dw-edge2);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; z-index: 6;
}
.dw-rail::-webkit-scrollbar { display: none; } /* it scrolls on a short viewport; tips and menus live on <body> */
.dw-sep { width: 28px; height: 1px; flex: none; margin: 6px 0; background: var(--dw-edge2); }
.dw-btn {
  position: relative; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: transparent; color: var(--dw-ink); cursor: pointer;
  transition: background var(--m-fast, 100ms) ease, color var(--m-fast, 100ms) ease;
}
.dw-btn:hover { background: var(--dw-hov); color: var(--dw-tx); }
/* One highlight in both themes: the armed tool (and an open group) sits on the chip, full strength. */
.dw-btn.on, .dw-group.open > .dw-btn { background: var(--dw-chip); color: var(--dw-tx); }
/* Toggles that are on (magnet, Keep drawing) take the blue tint instead. */
.dw-btn.dw-toggle.on { color: var(--dw-blue); background: color-mix(in srgb, var(--dw-blue) 14%, transparent); }
.dw-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--dw-ink); }
.dw-btn:focus-visible, .dw-more:focus-visible { outline: 2px solid rgba(37, 99, 235, .5); outline-offset: -2px; }
.dw-group { position: relative; display: flex; flex: none; }
/* The arrow: hidden until the group is hovered, at the button's right edge, its own tooltip the
   group's name. 10px — never bigger than the icon it belongs to. */
.dw-more {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%); z-index: 2; width: 14px; height: 28px;
  padding: 0; border: 0; border-radius: 5px; display: grid; place-items: center; background: transparent;
  color: var(--dw-fa); cursor: pointer; opacity: 0;
  transition: opacity var(--m-fast, 100ms) ease, background var(--m-fast, 100ms) ease, color var(--m-fast, 100ms) ease;
}
.dw-group:hover .dw-more, .dw-group.open .dw-more, .dw-more:focus-visible { opacity: 1; }
.dw-more:hover, .dw-group.open .dw-more { background: var(--dw-hov); color: var(--dw-tx); }
.dw-foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.dw-rail .visgroup { position: relative; flex: none; }

/* ── tooltips: outside the rail, 50ms after hover, name + shortcut; an 80ms fade (#672) ── */
.dw-tip {
  position: fixed; z-index: 400; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 6px 9px; border-radius: 6px; background: var(--dw-tip); color: #EFEEEA; font-size: 12.5px; font-weight: 500; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transform: translateX(-4px);
  transition: opacity 80ms ease, transform 80ms var(--dw-ease);
}
.dw-tip.in { opacity: 1; transform: none; }
.dw-tip[hidden] { display: none; }
.dw-tip-key { color: #8A8780; }

/* ── flyouts and menus ── */
.dw-menu {
  position: fixed; z-index: 320; width: 236px; box-sizing: border-box; padding: 6px; border-radius: 10px;
  background: var(--dw-menu); color: var(--dw-tx); box-shadow: inset 0 0 0 1px var(--dw-edge), var(--dw-shadow);
  animation: dw-fin var(--m-pop, 140ms) var(--dw-ease) both;
}
.dw-menu[hidden] { display: none; }
.dw-magnet-menu { width: 272px; }
@keyframes dw-fin { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.dw-menu-h { padding: 6px 10px; font-size: 12px; font-weight: 500; color: var(--dw-fa); }
.dw-menu-note { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--dw-edge2); }
.dw-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 18px; column-gap: 10px; align-items: center;
  width: 100%; height: 34px; box-sizing: border-box; padding: 0 8px 0 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--dw-tx2); font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.dw-row > .dw-ico { justify-self: center; }
.dw-row:hover, .dw-row:focus-visible { background: var(--dw-hov); color: var(--dw-tx); outline: none; }
.dw-row.on { background: var(--dw-chip); color: var(--dw-tx); }
.dw-row .dw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-row .dw-key { font-size: 12px; font-weight: 500; color: var(--dw-fa); }
.dw-row[hidden] { display: none; }
/* Text-only rows (the visibility menu, the favourites bar's menu). */
.visibility-menu .dw-row, .favbar-menu .dw-row { display: flex; padding: 0 10px; }
.visibility-menu, .favbar-menu { width: 220px; }
/* A tool row: the tool's own button spans icon, name and shortcut; the star is its own button. */
.dw-tool-row { padding: 0 8px 0 0; cursor: default; }
.dw-item {
  grid-column: 1 / 4; display: grid; grid-template-columns: subgrid; align-items: center; height: 100%;
  padding: 0 0 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dw-item > .dw-ico { justify-self: center; }
.dw-item:focus-visible { outline: none; }
.dw-tool-row:focus-within { background: var(--dw-hov); color: var(--dw-tx); }
.dw-tool-row.on { background: var(--dw-chip); color: var(--dw-tx); }
.dw-star {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--dw-fa); opacity: 0; cursor: pointer;
}
.dw-tool-row:hover .dw-star, .dw-tool-row:focus-within .dw-star { opacity: 1; }
.dw-star:hover { color: var(--dw-tx); }
.dw-star:focus-visible { opacity: 1; outline: 2px solid rgba(37, 99, 235, .5); outline-offset: 0; }
.dw-star.fav, .dw-star.fav:hover { opacity: 1; color: var(--dw-gold); } /* favourites stay gold */

/* ── the floating style bar ── */
.dw-sbar {
  display: none; align-items: center; gap: 2px; height: 40px; box-sizing: border-box; padding: 0 4px; border: 0;
  border-radius: 10px; background: var(--dw-menu); color: var(--dw-tx); box-shadow: inset 0 0 0 1px var(--dw-edge), var(--dw-shadow);
}
.dw-sbar.open { display: flex; }
.dw-sbar.enter { animation: dw-drop 160ms var(--dw-ease) both; }
@keyframes dw-drop { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.dw-sb {
  height: 32px; min-width: 32px; box-sizing: border-box; padding: 0 8px; border: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent;
  color: var(--dw-ink); font-size: 13px; font-weight: 500; cursor: pointer;
}
.dw-sb:hover { background: var(--dw-hov); color: var(--dw-tx); }
.dw-sb.on { background: var(--dw-chip); color: var(--dw-tx); }
.dw-sb[hidden] { display: none; }
.dw-sb:focus-visible { outline: 2px solid rgba(37, 99, 235, .5); outline-offset: 1px; }
.dw-sb.dw-del { color: var(--dw-red); }
.dw-sw { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-theme="light"] .dw-sw { box-shadow: inset 0 0 0 1px rgba(23, 22, 18, .14); }
.dw-ssep { width: 1px; height: 20px; flex: none; margin: 0 4px; background: var(--dw-edge2); }
.dw-sgrip { width: 16px; flex: none; display: flex; color: var(--dw-fa); cursor: grab; }
.dw-sbar.locked .dw-edit { opacity: .35; pointer-events: none; }
/* A text drawing's size stepper, bold and italic (#670): the size sits between its − and +. */
.dw-tsize { min-width: 22px; flex: none; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dw-tx); }
.dw-tsize[hidden] { display: none; }
.dw-sb.dw-tstep { min-width: 24px; padding: 0 4px; font-size: 16px; }
.dw-sb:disabled { opacity: .35; cursor: default; }
.dw-pal {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 9;
  display: grid; grid-template-columns: repeat(9, 22px); gap: 6px; padding: 10px; border-radius: 10px;
  background: var(--dw-menu); box-shadow: inset 0 0 0 1px var(--dw-edge), var(--dw-shadow);
  animation: dw-drop var(--m-pop, 140ms) var(--dw-ease) both;
}
.dw-pal[hidden] { display: none; }
.dw-pal button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; }
/* The selected swatch's ring is the text colour, so it reads in both themes (it was #fff). */
.dw-pal button.on, .dw-pal .dw-pal-hex.on { box-shadow: 0 0 0 2px var(--dw-menu), 0 0 0 3.5px var(--dw-tx); }
/* The custom colour (#674): a round swatch the size of the others, ringed in the rainbow the drawing settings use. */
.dw-pal .dw-pal-hex {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: radial-gradient(circle, var(--dw-menu) 0 6px, transparent 6.5px), conic-gradient(from 90deg, #F0544A, #E9A23B, #35C77C, #3B82F6, #A78BFA, #F0544A);
}
.dw-pal .dw-pal-hex::-webkit-color-swatch-wrapper { padding: 0; }
.dw-pal .dw-pal-hex::-webkit-color-swatch { border: none; opacity: 0; }
.dw-pal .dw-pal-hex::-moz-color-swatch { border: none; opacity: 0; }
/* "Saved as default" (#674): a moment's confirmation under the bar. */
.dw-toast {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 10; white-space: nowrap;
  padding: 7px 12px; border-radius: 8px; background: var(--dw-tip); color: #EFEEEA; font-size: 12.5px; font-weight: 500;
  box-shadow: var(--dw-shadow); animation: dw-drop var(--m-pop, 140ms) var(--dw-ease) both; pointer-events: none;
}
.dw-toast[hidden] { display: none; }
.dw-sbar .dw-sb-menu { position: absolute; top: calc(100% + 6px); width: 220px; z-index: 9; animation-name: dw-drop; }
/* The app's own actions for the selection (#424): the Backtester's Place order and TP. */
.dw-sapp { display: flex; align-items: center; gap: 2px; }
.dw-sapp[hidden] { display: none; }
.dw-sb.dw-app { font-weight: 600; white-space: nowrap; }

/* ── the floating favourites bar ── */
.dw-favbar {
  display: flex; align-items: center; gap: 2px; height: 40px; box-sizing: border-box; padding: 0 4px;
  border-radius: 10px; background: var(--dw-menu); box-shadow: inset 0 0 0 1px var(--dw-edge), var(--dw-shadow);
}
.dw-favbar[hidden] { display: none; }
.dw-favbar .dw-sgrip { margin-right: 2px; }
.dw-favbar > div { display: flex; align-items: center; gap: 2px; }
.dw-favbtn {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; display: grid; place-items: center;
  background: transparent; color: var(--dw-ink); cursor: pointer;
}
.dw-favbtn:hover { background: var(--dw-hov); color: var(--dw-tx); }
.dw-favbtn.on { background: var(--dw-chip); color: var(--dw-tx); }
.dw-favbtn.dragging { background: var(--dw-chip); color: var(--dw-tx); cursor: grabbing; box-shadow: 0 0 0 1px var(--dw-edge); } /* #673 */

/* ── the themed confirm (the Lab; the Backtester has its own ask()) ── */
.dw-confirm { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
html[data-theme="light"] .dw-confirm { background: rgba(23, 22, 18, .28); }
.dw-confirm-sheet {
  width: min(400px, calc(100vw - 32px)); box-sizing: border-box; padding: 20px; border-radius: 10px;
  background: var(--dw-menu); color: var(--dw-tx); box-shadow: inset 0 0 0 1px var(--dw-edge), var(--dw-shadow);
  animation: dw-drop var(--m-pop, 140ms) var(--dw-ease) both;
}
.dw-confirm-sheet h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.dw-confirm-sheet p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.5; color: var(--dw-tx2); }
.dw-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dw-confirm-actions button { height: 36px; padding: 0 14px; border: 0; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dw-confirm-no { background: transparent; color: var(--dw-tx); box-shadow: inset 0 0 0 1px var(--dw-edge); }
.dw-confirm-yes { background: #2563EB; color: #FFFFFF; }
.dw-confirm-yes.danger { background: var(--dw-red); color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .dw-menu, .dw-pal, .dw-sbar.enter, .dw-confirm-sheet { animation: none; }
  .dw-tip, .dw-btn, .dw-more { transition: none; }
}