/* ══════════════════════════════════════════════════════════════════════════════════════════════
       DESIGN TOKENS — the single source of truth for the Proving Ground's visual system.
       Direction: professional trading terminal. Quiet chrome, the chart is the hero; separation by
       subtle border, not shadow; money green/red stays semantic; gold carries platform interaction.
       Every component references tokens — never raw hex downstream.

       TYPE — Switzer, SELF-HOSTED, matching the rest of the Taking Prophets platform. Four compact
       static faces serve the UI's real weights without synthetic hierarchy or a misleading family
       alias. No CDN or Google Fonts. The terminal's numeric voice:
       tabular figures EVERYWHERE (body-level
       font-variant-numeric), so prices, P&L, and clocks align in columns and never jitter. --mono is a
       zero-download system stack, reserved for true code surfaces (the Pine editor).
       ══════════════════════════════════════════════════════════════════════════════════════════════ */
    @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; }
    :root {
      /* ── color · background layers (base → panel → elevated) — TRUE NEUTRAL, zero hue. The old ramp
         (#05080f/#0a101c/#0d1526) was slate-derived: blue channel ~3× red. That token set — not any CSS
         override — was the "blue-black" that kept surviving. ── */
      color-scheme: dark;                                   /* native selects/scrollbars follow the theme */
      --bg: #050506;                                        /* base: jet, per the reference — not charcoal */
      --solid: #0d0d10;                                     /* panel: header, rails, side panel — lifts off --bg, no border needed */
      --card: linear-gradient(180deg, #18181c, #101013);    /* elevated: popovers, modals, sheets */
      --card-solid: #141417;                                /* elevated, flat (where a gradient can't paint) */
      /* ── color · borders — neutral white-alpha hairlines ── */
      --line: rgba(255, 255, 255, .11);  /* contrast pass: borders were disappearing */
      --line-strong: rgba(255, 255, 255, .18);
      /* ── color · interactive fills — neutral white-alpha (the slate alphas carried the same tint) ── */
      --surface: rgba(255, 255, 255, .045);
      --surface-hi: rgba(255, 255, 255, .08);
      /* ── color · text (primary → secondary → muted → faint) ── */
      /* contrast pass 2026-08-22: every gray tier lifted 20-30% — muted must read, not ghost */
      --text: #e7eaee; --sec: #bfc4cb; --muted: #9aa1aa; --faint: #6f6d68; /* northstar B: the faint tier is the floor for words — lifted off the icon-stroke level */
      /* ── color · semantic accents ── */
      --up: #35c77c; --down: #f0544a;                       /* positive / negative money */
      /* THE accent. One saturated blue carries every interactive state — selection, links,
         active, focus, primary CTA — and per the OpenSea reference it is the ONLY chrome-level
         colour on the page. Content supplies colour; the interface does not. */
      --accent: #2563eb; --accent-hi: #3b82f6; --accent-ink: #ffffff;
      /* CAUTION ONLY. This gold used to be the accent — a token literally named --blue held a gold
         value — which is why yellow turned up in places nobody chose to make yellow. It now speaks
         only when something actually needs attention. */
      --warn: #eab63c; --warn-hi: #f7cf5f; --warn-ink: #221803;
      /* Back-compat aliases: ~195 call sites resolve through these two families and BOTH were
         painting gold. The dominant use of both was accent, not caution, so both alias to the
         accent; the handful of genuine caution sites are repointed at --warn-* by hand. */
      --blue: var(--accent); --blue-hi: var(--accent-hi);
      --gold: var(--accent); --gold-hi: var(--accent-hi); --gold-ink: var(--accent-ink);
      /* soft washes of the accents — chip fills, button tints, active states (were ad-hoc rgba) */
      --up-soft: rgba(53, 199, 124, .12); --up-border: rgba(53, 199, 124, .40);
      --down-soft: rgba(240, 84, 74, .12); --down-border: rgba(240, 84, 74, .40);
      --accent-soft: rgba(37, 99, 235, .14); --accent-border: rgba(37, 99, 235, .40);
      --warn-soft: rgba(234, 182, 60, .12); --warn-border: rgba(234, 182, 60, .40);
      --blue-soft: var(--accent-soft); --blue-border: var(--accent-border);
      --gold-soft: var(--accent-soft); --gold-border: var(--accent-border);
      --success-text: #5bdd97; --success-ink: #03231b;
      /* Firm logos need a stable neutral instrument tile in both themes. This
         is intentionally not a light/dark surface token: it is a mark holder,
         not application chrome. */
      --firm-mark-bg: #09090b; --firm-mark-ink: #f8f7f2;
      --firm-mark-border: rgba(255, 255, 255, .18); --firm-mark-inset: rgba(255, 255, 255, .08);
      --modal-overlay: rgba(0, 0, 0, .78);
      --chip-scrim: rgba(0, 0, 0, .72);                     /* on-chart pills sitting over candles */
      --acct-card-bg: linear-gradient(180deg, #101318, #0b0b0d); /* the prop challenge card — neutral, was amber-tinted */
      --scrim: rgba(0, 0, 0, .62);                          /* the select-bar dim */
      --focus: rgba(37, 99, 235, .70);
      /* ── typography ── */
      --font: 'Switzer', -apple-system, 'Helvetica Neue', Arial, sans-serif;
      --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
      /* type scale — roles, not sizes-for-sizes'-sake */
      --fs-eyebrow: 10px;    /* section headers: 600, uppercase, +.07em tracking */
      --fs-label: 11.5px;    /* field labels, secondary copy: 500 */
      --fs-ui: 12.5px;       /* controls, buttons, inputs: 500–600 */
      --fs-body: 13px;       /* base body */
      --fs-title: 14px;      /* panel/modal titles: 600 */
      --fs-stat: 16px;       /* stat values: 600, tabular */
      --fs-hero: 26px;       /* THE number (live P&L): 700, tabular, -0.01em */
      /* ── spacing scale — the only rhythm (no arbitrary margins downstream) ── */
      --s0: 2px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
      /* ── radii ── */
      --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-pill: 999px;
      /* ── shadows — separation is the border's job; shadows only lift floating layers ── */
      --shadow-pop: 0 12px 32px rgba(0, 0, 0, .45);         /* popovers, menus */
      --shadow-modal: 0 24px 64px rgba(0, 0, 0, .60);       /* modal sheets */
      --ease: cubic-bezier(.4, 0, .2, 1);
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; } /* the hidden attribute must beat any author display rule */
    html, body { margin: 0; height: 100%; }
    body { background: var(--bg); color: var(--text); font: 13px/1.45 var(--font); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; }
    .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--surface-hi); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-track { background: transparent; }
    :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--r-xs); }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

    button { font: 600 12.5px var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 13px; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); }
    button:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-hi); }
    button:active:not(:disabled) { transform: translateY(1px); }
    button:disabled { opacity: .38; cursor: default; }
    kbd { font: 500 9.5px var(--mono); color: var(--sec); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px; }
    select, input { font: 500 12.5px var(--font); color: var(--text); background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 9px; transition: border-color .15s var(--ease); }
    /* the native dropdown list (symbol/timeframe/etc.) — force readable contrast; without this the options
       inherited a near-black-on-near-black on Chromium/Electron and blended into the background (item 7) */
    /* Native option lists are drawn by the OS, not by us. `color-scheme` is the
       only supported way to tell it which palette to use — and a TRANSLUCENT
       background here (which var(--surface-hi) is) makes the popup render
       wrong or invisible on macOS, which is exactly how the prop-account
       selector "stopped opening": the list was there and unpaintable. Set the
       scheme, then leave the control alone. */
    select option { background-color: Field; color: FieldText; }
    select:hover, input:hover { border-color: var(--line-strong); }
    select { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%238fa0b8' fill='none' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
    input { width: 92px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
    input[type="checkbox"] { width: auto; } /* the 92px text-input width made every checkbox a 92px-wide ghost — the berow overflow's real cause */
    input::placeholder { color: var(--faint); }
    .muted { color: var(--muted); }

    /* ── header — REGION D1. One continuous 30px row: every control (selects, buttons, TF row, mode
       chip, member pill) sits on the same baseline; gaps and padding from the spacing scale only; quiet
       chrome — the active timeframe is a subtle fill, not a colored box; ARMED transient states (Select
       bar) may use the accent. ── */
    /* Own the chrome stacking layer: Start/Go-to popovers must paint above every chart canvas/HUD. */
    header { position: relative; z-index: 70; isolation: isolate; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); background: var(--solid); flex: none; }
    .brand { display: flex; align-items: center; gap: var(--s2); margin-right: var(--s1); }
    .logo-tile { width: 28px; height: 28px; flex: none; border-radius: var(--r-xs); background: linear-gradient(180deg, #ffffff, #cdd7e4); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
    .logo-tile img { width: 21px; height: 21px; object-fit: contain; display: block; }
    .wordmark { font: 700 var(--fs-title)/1 var(--font); letter-spacing: -.01em; white-space: nowrap; }
    #brandHome { cursor: pointer; border-radius: var(--r-sm); padding: 3px 7px 3px 3px; margin-left: -3px; transition: background .12s ease; } /* item 5: the logo is a clear route back to your sessions */
    #brandHome:hover { background: var(--surface); }
    #brandHome:focus-visible { outline: 1.5px solid rgba(255, 255, 255, .4); outline-offset: 1px; }
    .brand-home { width: 14px; height: 14px; color: var(--faint); opacity: 0; margin-left: 1px; flex: none; transition: opacity .12s ease; }
    #brandHome:hover .brand-home { opacity: 1; }
    /* item 1: standard-account balance in the top bar (prop mode swaps to a bold prop badge — item 3) */
    .acct-bar { position:relative; display: inline-flex; align-items: center; gap: 9px; margin-right: 4px; }
    .acct-bar:empty { display: none; }
    /* Battle countdown — the acct-bar idiom (quiet uppercase label + tabular mono value), sitting
       left of "Starting". Escalates with the same thresholds the banner warnings use. */
    .match-clock { display: inline-flex; align-items: center; gap: 6px; margin-right: 5px; }
    .match-clock b { font: 700 13.5px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    .match-clock.low b { color: var(--warn-hi); }
    .match-clock.critical b { color: var(--down); }
    .acct-bar .ab-lbl { font: 600 9px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
    .acct-bar .ab-a { font: 600 12.5px var(--mono); color: var(--sec); font-variant-numeric: tabular-nums; }
    .acct-bar .ab-b { font: 700 15px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    .acct-bar .ab-b.up { color: var(--up); } .acct-bar .ab-b.down { color: var(--down); }
    .acct-bar.prop { gap: 0; }
    .acct-bar .ab-chip { font: 800 9px var(--font); letter-spacing: .09em; color: var(--gold-hi); }
    .acct-bar .ab-firm { font: 650 12.5px var(--font); color: var(--text); }
    .acct-bar .ab-sep { color: var(--faint); font-size: 11px; }
    .acct-bar .ab-eq { font: 700 13.5px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; padding-right: 4px; }
    .account-status-trigger { max-width: 390px; height: 34px; display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--gold) 7%,var(--card-solid));color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm); }
    .account-status-trigger:hover,.account-status-trigger[aria-expanded="true"] { border-color:color-mix(in srgb,var(--gold) 58%,var(--line-strong));background:color-mix(in srgb,var(--gold) 11%,var(--card-solid)); }
    .account-status-trigger:focus-visible { outline:2px solid var(--focus);outline-offset:2px; }
    .account-status-trigger .ab-stack { color:var(--muted);font:550 10px var(--font);white-space:nowrap; }
    .account-status-trigger .ab-caret { color:var(--muted);font-size:13px;margin-left:1px; }
    .account-status-menu { position:absolute;z-index:55;top:calc(100% + 8px);right:0;width:min(430px,calc(100vw - 32px));max-height:min(520px,calc(100vh - 90px));overflow:auto;padding:7px;background:var(--card-solid);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-pop); }
    .account-status-head { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:9px 10px 10px;border-bottom:1px solid var(--line); }
    .account-status-head span { color:var(--text);font:700 12px var(--font); }
    .account-status-head small { color:var(--muted);font:500 9.5px var(--font);text-align:right; }
    .account-status-row { width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px;border:0;border-bottom:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text);text-align:left;cursor:pointer; }
    .account-status-row:last-of-type { border-bottom:0; }
    .account-status-row:hover,.account-status-row:focus-visible { background:var(--surface-hi);outline:none; }
    .account-status-row.selected { background:color-mix(in srgb,var(--gold) 8%,var(--surface));box-shadow:inset 2px 0 var(--gold); }
    .asr-id { color:var(--faint);font:650 9px var(--mono);font-variant-numeric:tabular-nums; }
    .asr-main { min-width:0;display:flex;flex-direction:column;gap:2px; }
    .asr-main b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 11.5px var(--font); }
    .asr-main small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:500 9.5px var(--font); }
    .asr-role { color:var(--sec);font:600 9.5px var(--font);white-space:nowrap; }
    .asr-money { color:var(--text);font:650 11px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap; }
    .account-status-empty { margin:0;padding:18px 10px;color:var(--muted);font:500 11px var(--font); }
    @media (max-width:1120px) {
      .account-status-trigger { max-width:235px; }
      .account-status-trigger .ab-eq,.account-status-trigger .ab-stack { display:none; }
    }
    /* item 4: the account you're trading on, pinned at the top of the Order tab */
    .ord-acct { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
    .ord-acct .oa-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px rgba(255, 255, 255, .03); }
    .ord-acct.prop .oa-dot { background: #e0a13c; }
    .ord-acct.prop.failed .oa-dot, .ord-acct.prop.day-locked .oa-dot { background: var(--down); }
    .ord-acct .oa-body { min-width: 0; flex: 1; }
    .ord-acct .oa-name { font-size: 13px; font-weight: 650; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ord-acct .oa-sub { font: 500 11px var(--mono); color: var(--sec); margin-top: 3px; font-variant-numeric: tabular-nums; }
    header .spacer { flex: 1; }
    /* the unified header control */
    header select, header > button, .startwrap > button {
      height: 30px; display: inline-flex; align-items: center; gap: var(--s1);
      padding: 0 var(--s3); font: 500 var(--fs-ui) var(--font); border-radius: var(--r-xs);
      /* These are flex items in the header row, so without this they SHRINK and
         wrap their label inside a fixed 30px box — "Go to" and "Select bar"
         broke onto two cramped lines. A control is sized by its text. */
      white-space: nowrap; flex: none;
    }
    /* The popover wrappers are flex items too; letting them shrink squeezed the
       button inside them just the same. */
    .startwrap { flex: none; }
    /* The account cluster sits at the end of the row, so it is what gets clipped
       when the bar runs out of room — which is why "Member" was cut in half.
       Pinned, and the tool cluster gives way first. */
    #account, .acct-bar { flex: none; }
    /* §7.3's coverage meter. A quiet chip by default: a Free member should notice
       it when it matters, not be reminded of a limit on every glance at the chart. */
    .cov-meter {
      flex: none; font: 600 11px var(--mono); letter-spacing: .01em;
      padding: 3px 8px; border-radius: 999px; white-space: nowrap;
      color: var(--sec); border: 1px solid var(--line); background: transparent;
    }
    .cov-meter[data-state="low"] { color: var(--warn, #d9a441); border-color: color-mix(in srgb, var(--warn, #d9a441) 45%, transparent); }
    .cov-meter[data-state="spent"] { color: var(--neg, #e5534b); border-color: color-mix(in srgb, var(--neg, #e5534b) 45%, transparent); }
    /* §13 — a capability the member does not have yet. Reads as unavailable
       rather than broken: still legible, still in place, not dimmed to nothing.
       Deliberately distinct from :disabled, which also covers "not right now"
       states like a rollout pause that upgrading would not fix. */
    .is-locked { opacity: .62; cursor: not-allowed; }
    header select { background: var(--surface); padding-right: 24px; }
    /* ── themed dropdowns ────────────────────────────────────────────────────
       The native <select> stays for value and events; it is taken out of the
       layout so the trigger below sits exactly where it did. `display:none`
       would drop it from the form and from screen readers, so it is hidden the
       accessible way instead. */
    select.tpsel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .tpsel-trigger {
      height: 30px; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s2);
      min-width: 0; padding: 0 var(--s2) 0 var(--s3);
      font: 500 var(--fs-ui) var(--font); color: var(--text);
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs);
      cursor: pointer; text-align: left; white-space: nowrap;
      transition: border-color .12s ease, background .12s ease;
    }
    .tpsel-trigger:hover { border-color: var(--line-strong); }
    .tpsel-trigger.tpsel-open { border-color: var(--gold-border); background: var(--surface-hi); }
    .tpsel-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .tpsel-trigger[disabled] { opacity: .5; cursor: default; }
    /* display:inline-flex above beats the UA [hidden] rule — restate it, or a hidden select's
       proxy trigger stays visible (the phantom second timeframe dropdown in the header). */
    .tpsel-trigger[hidden] { display: none; }
    .tpsel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tpsel-caret { flex: none; font-size: 9px; color: var(--faint); }
    /* ── minimised floating panels ───────────────────────────────────────────
       Hidden means minimised, not removed: the panel collapses to a "⋯" chip in
       place, still draggable, so it comes back where you left it. */
    /* Id-scoped button rules (#transport button, …) outrank a bare class, so the
       chip is hidden at matching specificity or it shows while the panel is open. */
    #transport > .pill-restore, .floatpill > .pill-restore { display: none; }
    .pill-restore {
      width: 26px; height: 22px; align-items: center; justify-content: center;
      font: 700 13px/1 var(--font); letter-spacing: 1px; color: var(--faint);
      background: transparent; border: 0; border-radius: var(--r-xs); cursor: pointer;
    }
    .pill-restore:hover { color: var(--text); background: var(--surface); }
    #transport.min > *:not(.pill-restore),
    .floatpill.min > *:not(.pill-restore) { display: none !important; }
    #transport.min, .floatpill.min { padding: 2px; gap: 0; min-width: 0; width: auto; }
    #transport.min > .pill-restore, .floatpill.min > .pill-restore { display: inline-flex; }
    /* One item, so it should not read as a full dropdown. */
    .panelmenu { min-width: 150px; }

    .tpsel-menu {
      position: fixed; z-index: 400; max-height: min(340px, 60vh); overflow-y: auto;
      display: flex; flex-direction: column; padding: var(--s1);
      /* Menus are information surfaces, never glass. A gradient or translucent
         card makes options compete with the chart below it. */
      background: var(--card-solid); opacity: 1; overscroll-behavior: contain; scrollbar-gutter: stable;
      border: 1px solid var(--line-strong); border-radius: var(--r-sm);
      box-shadow: var(--shadow-pop);
    }
    .tpsel-opt {
      display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-xs);
      font: 500 var(--fs-ui) var(--font); color: var(--sec); background: transparent;
      text-align: left; white-space: nowrap; cursor: pointer;
    }
    .tpsel-opt:hover:not([disabled]) { color: var(--text); background: var(--surface); }
    .tpsel-opt.on { color: var(--text); background: var(--surface-hi); }
    .tpsel-opt[disabled] { opacity: .45; cursor: default; }
    .tpsel-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
    /* Inside the header the trigger follows the same no-shrink rule as the
       other controls, or it would wrap its caption like the buttons did. */
    header .tpsel-trigger { flex: none; }
    .pickrow > .tpsel-trigger { flex: 1 1 auto; }

    /* timeframe row — quiet until hovered; the ACTIVE TF is a subtle fill + full text, no colored box */
    /* The timeframe strip is the widest thing in the bar and the only part that
       degrades gracefully, so it is the one that gives way when the row runs
       short — everything else (the account figures, the Member chip) is pinned.
       Before this the row simply overflowed and clipped its right edge, which is
       why "Member" was cut in half. Scrollbar hidden: this scrolls by drag or
       wheel, and a visible track in a 30px toolbar reads as a defect.
       `position: relative` is load-bearing for the ⋯ popover, so the overflow is
       on the X axis only and the menu still escapes vertically. */
    #tfBar { display: flex; align-items: center; gap: var(--s0); position: relative; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
    #tfBar::-webkit-scrollbar { display: none; }
    #tfBar button { flex: none; }
    #tfBar button { height: 30px; padding: 0 var(--s2); font: 600 var(--fs-ui) var(--font); background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: var(--r-xs); cursor: pointer; }
    #tfBar button:hover { color: var(--text); background: var(--surface); }
    #tfBar button.active { background: var(--surface-hi); color: var(--text); }
    /* Body-mounted and FIXED: #tfBar scrolls on narrow screens, and a scroll
       container clips absolutely positioned descendants on both axes — which is
       why this menu used to open and be invisible. */
    .tfmore-list { position: fixed; z-index: 300; display: none; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: var(--s1); padding: var(--s2); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-pop); max-height: 62vh; overflow-y: auto; }
    .tfmore-list.open { display: grid; }
    .tfmore-entry { grid-column: 1/-1; display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
    .tfmore-entry input { width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: 600 12px var(--mono); text-transform: uppercase; }
    .tfmore-entry input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
    .tfmore-entry small { flex: none; color: var(--faint); font: 550 10px var(--font); }
    .tfmore-row { display: flex; align-items: center; gap: 1px; }
    .tfmore-list button { height: 28px; font: 600 var(--fs-ui) var(--font); background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: var(--r-xs); cursor: pointer; }
    .tfmore-list .tfmore-pick { flex: 1 1 auto; min-width: 0; padding: 0 var(--s2); text-align: left; }
    .tfmore-list button:hover { color: var(--text); background: var(--surface); }
    .tfmore-list .tfmore-pick.active { background: var(--surface-hi); color: var(--text); }
    .tfmore-star { flex: none; width: 22px; padding: 0; font-size: 12px; line-height: 1; color: var(--faint); }
    .tfmore-star.on { color: var(--gold); }
    .tfmore-star:hover { color: var(--gold-hi); background: var(--surface); }
    /* session-data mode chip — gold only while it deviates from the default (RTH) */
    #ethRth { height: 30px; padding: 0 var(--s2); font: 600 11px var(--font); letter-spacing: .05em; background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: var(--r-xs); cursor: pointer; }
    #ethRth:hover { color: var(--text); background: var(--surface); }
    #ethRth.rth { background: var(--gold-soft); color: var(--gold-hi); border-color: var(--gold-border); }
    .signin { height: 30px; display: inline-flex; align-items: center; font: 600 var(--fs-ui) var(--font); color: #fff; text-decoration: none; background: linear-gradient(180deg, var(--blue-hi), var(--blue)); border-radius: var(--r-xs); padding: 0 var(--s4); box-shadow: 0 4px 14px rgba(37, 99, 235, .3), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
    .signin:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, .38), inset 0 1px 0 rgba(255, 255, 255, .18); }

    /* ── sign-in gate: members-only, shown until a token verifies (mirrors the Lab) ── */
    #gate { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, #0f0f0f, var(--bg)); }
    #gate .gate-card { width: 100%; max-width: 430px; padding: 40px 36px 32px; text-align: left; background: var(--card); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
    #gate .gate-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
    #gate .eyebrow { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
    #gate h1 { margin: 0 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
    #gate p { margin: 0 0 26px; color: var(--muted); font-size: 14px; line-height: 1.6; }
    #gate .discord-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px; font: 600 14px var(--font); color: var(--accent-ink); border: 1px solid var(--blue-border); border-radius: 12px; cursor: pointer; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 12px 28px -10px rgba(37, 99, 235, .62), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .15s var(--ease), filter .15s var(--ease); }
    #gate .discord-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
    #gate .discord-btn:disabled { opacity: .6; cursor: default; }
    #gate .discord-btn svg { width: 20px; height: 20px; fill: var(--accent-ink); }
    #gate .gate-note { margin-top: 15px; color: var(--faint); font-size: 12.5px; line-height: 1.7; }
    #gate .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 .gate-member-only li + li { margin-top: 6px; }
    #gate .gate-member-only a.discord-btn { text-decoration: none; }
    #gate .gate-switch { display: block; margin-top: 14px; color: var(--muted); font-size: 12.5px; text-decoration: none; }
    #gate .gate-switch:hover { text-decoration: underline; }
    #gate .gate-err { min-height: 18px; margin-top: 12px; color: var(--down); font-size: 12.5px; }
    #gate .gate-foot { color: var(--faint); font-size: 11.5px; letter-spacing: .04em; text-align: center; }
    #gate .gate-foot b { color: var(--sec); font-weight: 600; }

    /* ── banner (toast strip) ── */
    /* OVERLAY, not a row. In the body's flex column this pushed the chart down
       every time a notification appeared and let it spring back on dismiss —
       a full layout shift for a message that lasts 2.6s. It floats over the top
       of the chart now and passes clicks through, so nothing moves. */
    #banner { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 55; pointer-events: none;
      padding: 6px 16px; font-size: 12.5px; font-weight: 500;
      background: var(--gold-soft); color: var(--gold-hi);
      border-bottom: 1px solid var(--gold-border);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    #banner.err { background: var(--down-soft); color: var(--down); border-bottom-color: var(--down-border); }
    /* The strip passes clicks through so it never eats a chart gesture — the one
       control on it has to opt back in, or the retry is decorative. */
    /* The strip lays out as a row so the close control sits at its end regardless of message
       length, and the message itself can wrap without pushing the × off-screen. */
    #banner { align-items: flex-start; gap: 10px; }
    .banner-msg { flex: 1 1 auto; min-width: 0; }
    /* Same opt-in as .banner-act — the strip passes clicks through so it never eats a chart
       gesture, which would make a close button decorative. */
    .banner-x { pointer-events: auto; flex: none; margin: -2px -6px 0 0; padding: 0 6px;
      font: 600 16px/1.2 var(--font); color: inherit; background: transparent; border: 0;
      border-radius: 6px; cursor: pointer; opacity: .6; transition: opacity .15s var(--ease); }
    .banner-x:hover { opacity: 1; }
    .banner-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
    @media (prefers-reduced-motion: reduce) { .banner-x { transition: none; } }
    .banner-act { pointer-events: auto; margin-left: 8px; padding: 1px 9px;
      font: inherit; font-weight: 600; line-height: 1.5; color: inherit;
      background: transparent; border: 1px solid currentColor; border-radius: 999px;
      cursor: pointer; opacity: .85; transition: opacity .15s var(--ease), background-color .15s var(--ease); }
    .banner-act:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
    .banner-act:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
    @media (prefers-reduced-motion: reduce) { .banner-act { transition: none; } }

    .workspace-recovery { position: fixed; top: 100px; right: 12px; z-index: 1200;
      display: flex; flex-wrap: wrap; gap: 8px; width: min(420px, calc(100vw - 24px));
      padding: 12px; border: 1px solid var(--line); border-radius: 8px;
      background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; }
    .workspace-recovery[hidden] { display: none; }
    .workspace-recovery .banner-act { margin-left: 0; min-height: 44px; }

    /* ── main: tool rail + chart + side panel ── */
    main { flex: 1; display: flex; min-height: 0; position: relative; }  /* the notification overlay anchors here */
    /* ── the tool rail, grouped TradingView-style: one FACE per category (its last-used tool); the
       corner chevron opens a flyout listing the whole group. Tooltips are ours, not the browser's. ── */
    #drawRail { width: 48px; flex: none; scrollbar-gutter: stable; border-right: 1px solid var(--line); background: var(--solid); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; z-index: 6; }
    #drawRail::-webkit-scrollbar { width: 4px; }
    #drawRail:has(.tgroup.open) { z-index: 9; } /* flyouts must clear the floating replay/order bars */
    #drawRail::-webkit-scrollbar-thumb { background: var(--line-strong); border: 0; }
    #drawRail > button, #drawRail .face { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); }
    /* side rail = primary navigation: substantial icon-over-label buttons (FX Replay sizing) */
    #sideRail > button { width: 60px; height: 54px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); }
    #sideRail > button .rl { font: 600 9px var(--font); letter-spacing: .03em; }
    #drawRail > button:hover, #drawRail .face:hover, #sideRail > button:hover { background: var(--surface-hi); color: var(--sec); }
    #drawRail > button.active, #drawRail .face.active, #sideRail > button.active { background: rgba(255, 255, 255, .1); color: var(--text); border-color: rgba(255, 255, 255, .16); }
    #drawRail svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
    #sideRail svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
    /* The magnet is the Lab's filled horseshoe (#438); the rail's stroke-only rule would hollow it. */
    #magnetBtn svg { fill: currentColor; stroke: none; }
    #drawRail .rail-gap { flex: 1; }
    #drawRail .rail-sep { width: 22px; height: 1px; flex: none; background: var(--line-strong); margin: 3px 0; }
    /* hover tooltips (small, ours): a dark pill beside the rail */
    /* Tooltips are keyed off the ATTRIBUTE, not off two rail ids. Scoping them to
       #drawRail and #sideRail meant every control outside those rails — step,
       play, speed, the tape — silently got no themed tooltip at all, which is
       why they still looked dark in light mode: they were never styled here.
       Delay drops 320ms → 140ms; a third of a second reads as lag. */
    [data-tip] { position: relative; }
    [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--card-solid); color: var(--text); border: 1px solid var(--line-strong); font-size: 11px; font-weight: 500; line-height: 1; padding: 6px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .09s ease .14s; box-shadow: var(--shadow-pop); z-index: 90; }
    [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }
    /* Controls in the bottom tape have no room to the right — flip them above. */
    #transport [data-tip]::after, #ordBar [data-tip]::after { left: 50%; right: auto; top: auto; bottom: calc(100% + 8px); transform: translateX(-50%); }
    /* a tool group: face + corner chevron + flyout */
    .tgroup { position: relative; flex: none; }
    /* Inside the rail's content box: at -7px the chevron sat under the 4px scrollbar track and
       overflow-x: hidden clipped it (#437). The gutter is reserved so the scrollbar never covers it. */
    .tgroup .more { position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0 0 0 8px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 7px; color: var(--faint); opacity: 0; cursor: pointer; } /* quiet visual, full 24px pointer/keyboard target */
    .tgroup:hover .more, .tgroup:focus-within .more, .tgroup.open .more { opacity: 1; }
    .tgroup .more:hover { color: var(--text); }
    .tgroup .more svg { width: 8px; height: 8px; stroke-width: 2; }
    .tgroup .fly { display: none; position: fixed; z-index: 300; min-width: 198px; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 10px; padding: 5px; box-shadow: var(--shadow-pop); backdrop-filter: blur(6px); }
    .tgroup.open .fly { display: block; }
    .visgroup { position: relative; flex: none; }
    .visgroup > .face { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); }
    .visgroup > .face:hover, .visgroup > .face[aria-expanded="true"] { background: var(--surface-hi); color: var(--text); }
    .visibility-menu { position: fixed; z-index: 320; width: 210px; padding: 5px; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-pop); }
    .visibility-menu button { width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--sec); font: 550 12px var(--font); text-align: left; }
    .visibility-menu button:hover { color: var(--text); background: var(--surface-hi); }
    .tgroup.open :is(.face, .more)::after { display: none; } /* no tooltip while the menu is open */
    .fly .fly-h { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 4px 8px 5px; }
    .fly button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; background: transparent; border: none; border-radius: 7px; color: var(--sec); font-size: 12px; font-weight: 500; text-align: left; cursor: pointer; }
    .fly button:hover { background: var(--surface-hi); color: var(--text); }
    .fly button.current { color: var(--text); }
    .fly button svg { flex: none; }
    .fly button span { flex: 1; }
    .fly button kbd { font: 500 9.5px var(--mono); color: var(--faint); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }
    /* favorite tools — a persistent quick-access strip at the top of the rail */
    #drawFavs { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    #drawFavs:empty { display: none; }
    #drawFavs button { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; }
    #drawFavs button:hover { background: var(--surface-hi); color: var(--sec); }
    #drawFavs button.active { background: rgba(255, 255, 255, .1); color: var(--text); border-color: rgba(255, 255, 255, .16); }
    #drawFavs svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
    .fly .tool-row { display: flex; align-items: center; gap: 2px; }
    .fly .tool-row > button[data-tool] { flex: 1; min-width: 0; }
    .fly .tool-row > .fav-star { flex: 0 0 32px; width: 32px; min-height: 36px; justify-content: center; padding: 0; font-size: 15px; color: var(--muted); }
    .fly .tool-row > .fav-star.on { color: var(--gold-hi); background: var(--surface-hi); }
    .fly .fav-star:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
    /* A right-click on either favorites surface opens this one-action visibility menu. Keeping the
       control contextual mirrors TradingView and avoids adding permanent chrome to the drawing rail. */
    .favbar-menu { position: fixed; z-index: 500; min-width: 196px; padding: 6px; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: var(--shadow-pop); }
    .favbar-menu button { width: 100%; min-height: 36px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--sec); font: 550 12px var(--font); text-align: left; cursor: pointer; }
    .favbar-menu button:hover { background: var(--surface-hi); color: var(--text); }
    #chart { flex: 1; min-width: 0; position: relative; overflow: hidden; background: var(--bg); }
    /* MC-4 — the one execution workspace may own up to four observational chart panes. Global
       transport/order/drawing chrome stays above this layer, so it is never cloned per pane. */
    .workspace-chart-grid { --workspace-ratio-a: 50%; --workspace-ratio-b: 50%; position: absolute; inset: 0; z-index: 0; display: grid; min-width: 0; min-height: 0; background: var(--bg); }
    .workspace-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
    .workspace-chart-grid:not(.is-single) .workspace-pane { outline: 1px solid var(--line); outline-offset: -1px; }
    .workspace-chart-grid:not(.is-single) .workspace-pane.is-focused { outline-color: color-mix(in srgb, var(--gold) 58%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 13%, transparent); }
    .workspace-pane[hidden] { display: none !important; }
    /* The pane header is a STATE CARRIER, never chrome: its selects hold each pane's market and
       timeframe for the workspace plumbing, but the member's controls live in the ONE top bar,
       which drives whichever pane holds focus. Painting this row duplicated every control. */
    .workspace-pane-header { display: none; }
    /* The role chip beside the market selector: who the top bar is acting on. Trading = the
       execution chart; Viewing = an observational chart, with Trade as the handoff. */
    .workspace-pane-identity { min-width: 0; display: flex; align-items: center; gap: 7px; }
    .workspace-pane-identity b { font: 700 10.5px var(--font); letter-spacing: .045em; color: var(--text); }
    .workspace-pane-symbol { width: auto; min-width: 58px; max-width: 132px; height: 24px; padding: 0 20px 0 7px; border: 1px solid transparent; border-radius: var(--r-xs); color: var(--text); background-color: transparent; font: 720 10.5px var(--font); letter-spacing: .025em; }
    .workspace-pane-symbol:hover, .workspace-pane-symbol:focus { border-color: var(--line-strong); background: var(--surface); }
    .workspace-pane-identity > .tpsel { min-width: 0; }
    .workspace-pane-identity > .tpsel .tpsel-trigger { width: auto; min-width: 58px; max-width: 142px; height: 24px; padding: 0 6px 0 8px; border-color: transparent; background: transparent; color: var(--text); font-size: 10.5px; font-weight: 720; }
    .workspace-pane-identity > .tpsel .tpsel-trigger:hover,
    .workspace-pane-identity > .tpsel.open .tpsel-trigger { border-color: var(--line-strong); background: var(--surface); }
    .workspace-pane-identity span { padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); font: 650 8.5px var(--font); letter-spacing: .055em; text-transform: uppercase; color: var(--sec); background: var(--surface); white-space: nowrap; }
    .workspace-pane.is-execution .workspace-pane-identity span { color: var(--gold-hi); border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); background: var(--gold-soft); }
    .workspace-pane-timeframe { width: auto; min-width: 66px; height: 24px; margin-left: auto; padding: 0 21px 0 8px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--sec); background-color: var(--surface); font: 650 10px var(--font); }
    .workspace-pane-header > .tpsel-trigger { width: auto; min-width: 66px; height: 24px; margin-left: auto; padding: 0 7px 0 9px; border-radius: var(--r-xs); font-size: 10px; }
    .workspace-pane-actions { display: flex; align-items: center; gap: 2px; }
    .workspace-pane-actions button { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; color: var(--muted); border: 0; border-radius: 6px; background: transparent; }
    .workspace-pane-actions button:hover { color: var(--text); background: var(--surface-hi); }
    .workspace-pane-actions .workspace-pane-activate { width: auto; min-width: 58px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); border-radius: var(--r-pill); color: var(--gold-hi); background: var(--gold-soft); font: 690 9px var(--font); letter-spacing: .025em; }
    .workspace-pane-actions .workspace-pane-activate:hover { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold-soft) 76%, var(--surface-hi)); }
    .workspace-pane-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
    .workspace-pane-chart { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
    .workspace-pane-state { position: absolute; z-index: 9; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 24px; color: var(--sec); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(7px); text-align: center; font: 560 11px/1.45 var(--font); }
    .workspace-pane-state[hidden] { display: none; }
    .workspace-pane-state i { width: 19px; height: 19px; border: 2px solid color-mix(in srgb, var(--gold) 22%, var(--line-strong)); border-top-color: var(--gold-hi); border-radius: 50%; animation: workspace-pane-spin .8s linear infinite; }
    .workspace-pane[data-feed-state="error"] .workspace-pane-state i { width: 7px; height: 7px; border: 0; background: var(--down); box-shadow: 0 0 0 5px color-mix(in srgb, var(--down) 13%, transparent); animation: none; }
    .workspace-pane[data-feed-state="deferred"] .workspace-pane-state { background: color-mix(in srgb, var(--bg) 78%, transparent); }
    .workspace-pane[data-feed-state="deferred"] .workspace-pane-state i { width: 18px; height: 18px; border: 0; border-radius: 5px; background: linear-gradient(90deg, var(--gold-hi) 0 34%, transparent 34% 66%, var(--gold-hi) 66%); box-shadow: 0 0 0 5px var(--gold-soft); animation: none; opacity: .82; }
    .workspace-pane-state button { min-height: 28px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line)); border-radius: var(--r-pill); color: var(--gold-hi); background: var(--gold-soft); font: 680 10px var(--font); }
    .workspace-pane-state button:hover { border-color: color-mix(in srgb, var(--gold) 62%, var(--line)); background: color-mix(in srgb, var(--gold-soft) 75%, var(--surface-hi)); }
    @keyframes workspace-pane-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .workspace-pane-state i { animation-duration: 1.8s; } }
    .workspace-chart-grid[data-preset="two-columns"] { grid-template-columns: var(--workspace-ratio-a) minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
    .workspace-chart-grid[data-preset="two-rows"] { grid-template-columns: minmax(0,1fr); grid-template-rows: var(--workspace-ratio-a) minmax(0,1fr); }
    .workspace-chart-grid[data-preset="main-left-two-right"] { grid-template-columns: var(--workspace-ratio-a) minmax(0,1fr); grid-template-rows: var(--workspace-ratio-b) minmax(0,1fr); }
    .workspace-chart-grid[data-preset="main-left-two-right"] > .workspace-pane:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; }
    .workspace-chart-grid[data-preset="main-left-two-right"] > .workspace-pane:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .workspace-chart-grid[data-preset="main-left-two-right"] > .workspace-pane:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .workspace-chart-grid[data-preset="main-top-two-bottom"] { grid-template-columns: var(--workspace-ratio-b) minmax(0,1fr); grid-template-rows: var(--workspace-ratio-a) minmax(0,1fr); }
    .workspace-chart-grid[data-preset="main-top-two-bottom"] > .workspace-pane:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1; }
    .workspace-chart-grid[data-preset="main-top-two-bottom"] > .workspace-pane:nth-of-type(2) { grid-column: 1; grid-row: 2; }
    .workspace-chart-grid[data-preset="main-top-two-bottom"] > .workspace-pane:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .workspace-chart-grid[data-preset="four-grid"] { grid-template-columns: var(--workspace-ratio-a) minmax(0,1fr); grid-template-rows: var(--workspace-ratio-b) minmax(0,1fr); }
    .workspace-splitter { position: absolute; z-index: 7; touch-action: none; background: transparent; }
    .workspace-splitter::after { content: ''; position: absolute; background: color-mix(in srgb, var(--gold) 52%, var(--line-strong)); opacity: 0; transition: opacity .14s var(--ease); }
    .workspace-splitter:hover::after, .workspace-splitter:focus-visible::after { opacity: 1; }
    .workspace-splitter.axis-x { top: 0; bottom: 0; left: var(--workspace-ratio-a); width: 9px; margin-left: -4px; cursor: col-resize; }
    .workspace-splitter.axis-x::after { top: 0; bottom: 0; left: 4px; width: 1px; }
    .workspace-splitter.axis-y { left: 0; right: 0; top: var(--workspace-ratio-a); height: 9px; margin-top: -4px; cursor: row-resize; }
    .workspace-splitter.axis-y::after { left: 0; right: 0; top: 4px; height: 1px; }
    .workspace-splitter[data-ratio-index="1"].axis-x { left: var(--workspace-ratio-b); }
    .workspace-splitter[data-ratio-index="1"].axis-y { top: var(--workspace-ratio-b); }
    .workspace-splitter.scope-right { left: var(--workspace-ratio-a); }
    .workspace-splitter.scope-bottom { top: var(--workspace-ratio-a); }
    /* The layout control lives at the BOTTOM of the side rail, TradingView-style — never floating
       over the chart. margin-top:auto pushes it past Order/Stats/Journal/Indicators; the menu opens
       leftward from the rail. */
    .workspace-layout-control { position: relative; margin-top: auto; display: flex; }

    /* The rail button matches its siblings' anatomy (icon over label); it cannot ride the
       #sideRail > button rules because the menu needs this positioned wrapper. */
    #sideChartSettingsBtn { width: 60px; height: 54px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); }
    #sideChartSettingsBtn .rl { font: 600 9px var(--font); letter-spacing: .03em; }
    #sideChartSettingsBtn:hover { background: var(--surface-hi); color: var(--sec); }
    #sideChartSettingsBtn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
    #chart > .chart-settings-gear { display: none; }
    .cs-row:has(#csScaleLines) { display: none; }
    .workspace-layout-control > button { width: 60px; height: 54px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); }
    .workspace-layout-control > button .rl { font: 600 9px var(--font); letter-spacing: .03em; }
    .workspace-layout-control > button:hover { background: var(--surface-hi); color: var(--sec); }
    .workspace-layout-control > button[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: var(--text); border-color: rgba(255, 255, 255, .16); }
    .workspace-layout-control svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
    .workspace-layout-menu { position: absolute; right: calc(100% + 12px); bottom: 0; z-index: 11; width: 254px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--card-solid); box-shadow: var(--shadow-pop); }
    .workspace-layout-menu[hidden] { display: none; }
    .workspace-layout-menu-head { display: flex; flex-direction: column; gap: 2px; margin: 1px 2px 10px; }
    .workspace-layout-menu-head span { font: 700 12px var(--font); color: var(--text); }
    .workspace-layout-menu-head small, .workspace-layout-menu p { font: 500 9.5px/1.45 var(--font); color: var(--faint); }
    .workspace-layout-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
    .workspace-layout-options button { min-height: 55px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; padding: 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
    .workspace-layout-options button:hover, .workspace-layout-options button.on { color: var(--gold-hi); border-color: color-mix(in srgb,var(--gold) 46%,var(--line)); background: var(--gold-soft); }
    .workspace-layout-options button span { font: 700 9px var(--mono); }
    .workspace-sync-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
    .workspace-sync-options > span { grid-column: 1 / -1; color: var(--faint); font: 650 8.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
    .workspace-sync-options button, .workspace-reset-ratios { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font: 620 9.5px var(--font); text-align: left; }
    .workspace-sync-options button::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--line-strong); vertical-align: 1px; }
    .workspace-sync-options button.on { color: var(--gold-hi); border-color: color-mix(in srgb,var(--gold) 42%,var(--line)); background: var(--gold-soft); }
    .workspace-sync-options button.on::before { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent); }
    .workspace-sync-options button:disabled { opacity: .42; cursor: not-allowed; }
    .workspace-reset-ratios { width: 100%; margin-top: 6px; text-align: center; background: transparent; }
    .workspace-sync-options button:focus-visible, .workspace-reset-ratios:focus-visible { outline: 2px solid color-mix(in srgb,var(--gold) 64%,transparent); outline-offset: 2px; }
    /* TradingView-style preset tiles: the diagram IS the label — no numbers beside it. */
    .layout-glyph { width: 44px; height: 32px; display: block; border: 1.5px solid currentColor; border-radius: 4px; opacity: .9; background-color: transparent; }
    .layout-glyph.two-cols { background: linear-gradient(90deg,transparent 48%,currentColor 48%,currentColor 52%,transparent 52%); }
    .layout-glyph.two-rows { background: linear-gradient(transparent 48%,currentColor 48%,currentColor 52%,transparent 52%); }
    .layout-glyph.three-left { background: linear-gradient(90deg,transparent 58%,currentColor 58%,currentColor 62%,transparent 62%),linear-gradient(transparent 48%,currentColor 48%,currentColor 52%,transparent 52%); }
    .layout-glyph.three-top { background: linear-gradient(transparent 58%,currentColor 58%,currentColor 62%,transparent 62%),linear-gradient(90deg,transparent 48%,currentColor 48%,currentColor 52%,transparent 52%); }
    .layout-glyph.four { background: linear-gradient(90deg,transparent 48%,currentColor 48%,currentColor 52%,transparent 52%),linear-gradient(transparent 48%,currentColor 48%,currentColor 52%,transparent 52%); }
    .workspace-layout-menu p { margin: 10px 2px 0; }
    .workspace-mobile-switcher { display: none; }
    /* Native-seconds transport status: a compact data checkpoint, not an alarming modal. It appears
       only when the replay genuinely needs attention and stays clear of chart/order controls. */
    .seconds-replay-state { position:absolute;left:50%;bottom:34px;z-index:14;transform:translateX(-50%);width:min(440px,calc(100% - 32px));min-height:52px;display:flex;align-items:center;gap:11px;padding:9px 10px 9px 12px;border:1px solid var(--line-strong);border-radius:14px;background:color-mix(in srgb,var(--card-solid) 94%,transparent);box-shadow:var(--shadow-pop);backdrop-filter:blur(18px); }
    .seconds-replay-state[hidden] { display:none!important; }
    .seconds-state-mark { width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;color:var(--gold);background:var(--gold-soft); }
    .seconds-state-mark i { width:11px;height:11px;display:block;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:secondsStateSpin .8s linear infinite; }
    .seconds-state-copy { min-width:0;flex:1;display:flex;flex-direction:column;gap:3px; }
    .seconds-state-copy strong { color:var(--text);font:650 12px/1.2 var(--font);letter-spacing:-.01em; }
    .seconds-state-copy p { margin:0;color:var(--muted);font:500 10.5px/1.35 var(--font); }
    #secondsStateAction { min-height:32px;flex:none;padding:0 12px;border:1px solid var(--gold-border);border-radius:9px;background:var(--gold-soft);color:var(--gold-hi);font:650 10.5px var(--font);cursor:pointer; }
    #secondsStateAction:hover { background:color-mix(in srgb,var(--gold-soft) 70%,var(--surface-hi));color:var(--text); }
    #secondsStateAction:disabled { opacity:.55;cursor:progress; }
    .seconds-replay-state[data-state="reconnect"] .seconds-state-mark,
    .seconds-replay-state[data-state="unavailable"] .seconds-state-mark { color:var(--down);background:var(--down-soft); }
    .seconds-replay-state[data-state="reconnect"] .seconds-state-mark i,
    .seconds-replay-state[data-state="unavailable"] .seconds-state-mark i { width:10px;height:10px;border:0;border-radius:50%;background:currentColor;animation:none;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 15%,transparent); }
    .seconds-replay-state[data-state="ended"] .seconds-state-mark { color:var(--up);background:var(--up-soft); }
    .seconds-replay-state[data-state="ended"] .seconds-state-mark i { width:10px;height:6px;border:solid currentColor;border-width:0 0 2px 2px;border-radius:0;transform:rotate(-45deg);animation:none; }
    @keyframes secondsStateSpin { to { transform:rotate(360deg); } }
    @media (prefers-reduced-motion:reduce) { .seconds-state-mark i { animation-duration:1.8s; } }
    @media (max-width:680px) {
      .seconds-replay-state { bottom:18px;width:calc(100% - 20px);min-height:48px;gap:9px;padding:8px 8px 8px 10px;border-radius:12px; }
      .seconds-state-mark { width:28px;height:28px; }
      .seconds-state-copy p { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
      #secondsStateAction { padding-inline:10px; }
    }
    /* Waiting room → chart start gate. The one animated tape is the transition's signature; every status
       below it maps to a real startup stage, so motion never pretends that unfinished work is complete. */
    /* Waiting-room -> match cut. The last 5 seconds of the countdown fade the screen to black,
       then the launch screen appears underneath it. Presentation ONLY: nothing in the start
       sequence waits on this element, so a stalled or skipped transition cannot delay a match.
       The duration here is only the default used when LIFTING the fade — setBattleFade sets the
       fade-to-black span from the time actually left. Linear on purpose: an eased curve over five
       seconds sits nearly clear and then lunges, which is the opposite of gradual. */
    .battle-fade { position:fixed;z-index:360;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 900ms linear; }
    .battle-fade.on { opacity:1; }
    @media (prefers-reduced-motion: reduce) { .battle-fade { transition:none; } }
    .battle-launch { position:fixed;z-index:340;inset:0 0 0 var(--tp-shell-w);display:grid;place-items:center;overflow:hidden;padding:clamp(18px,4vw,48px);background:
      radial-gradient(760px 440px at 50% 42%,color-mix(in srgb,var(--gold-soft) 72%,transparent),transparent 72%),
      color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),visibility 0s linear .28s; }
    .battle-launch.is-open { opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s; }
    .battle-launch.is-leaving { opacity:0;pointer-events:none; }
    .battle-launch-ambient { position:absolute;inset:0;overflow:hidden;pointer-events:none; }
    .battle-launch-ambient::before { content:"";position:absolute;inset:0;opacity:.38;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at center,#000,transparent 72%); }
    .battle-launch-ambient span { position:absolute;left:50%;top:50%;width:min(64vw,720px);aspect-ratio:1;border:1px solid var(--gold-border);border-radius:50%;transform:translate(-50%,-50%) scale(.56);opacity:0;animation:battleLaunchRing 3.2s var(--ease) infinite; }
    .battle-launch-ambient span:nth-child(2) { animation-delay:1.05s; }
    .battle-launch-ambient span:nth-child(3) { animation-delay:2.1s; }
    @keyframes battleLaunchRing { 0% { opacity:0;transform:translate(-50%,-50%) scale(.48); } 22% { opacity:.24; } 100% { opacity:0;transform:translate(-50%,-50%) scale(1); } }
    .battle-launch-card { position:relative;width:min(620px,100%);overflow:hidden;padding:24px 26px 20px;border:1px solid var(--line-strong);border-radius:20px;background:color-mix(in srgb,var(--card-solid) 94%,transparent);box-shadow:var(--shadow-modal);backdrop-filter:blur(22px);transform:translateY(10px) scale(.985);transition:transform .36s var(--ease); }
    .battle-launch.is-open .battle-launch-card { transform:translateY(0) scale(1); }
    .battle-launch-topline { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px;color:var(--faint);font:650 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; }
    .battle-launch-live { display:inline-flex;align-items:center;gap:7px;color:var(--gold); }
    .battle-launch-live i { width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--gold-soft);animation:battleLaunchLive 1.4s ease-in-out infinite; }
    @keyframes battleLaunchLive { 50% { box-shadow:0 0 0 8px transparent; } }
    .battle-launch-visual { position:relative;height:108px;margin:0 -26px 21px;overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--gold-soft) 34%,transparent),transparent); }
    .battle-launch-visual svg { width:100%;height:100%;overflow:visible; }
    .battle-launch-grid { fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke; }
    .battle-launch-shadow,.battle-launch-line { fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round; }
    .battle-launch-shadow { stroke:color-mix(in srgb,var(--gold) 18%,transparent);stroke-width:8;filter:blur(6px); }
    .battle-launch-line { stroke:var(--gold);stroke-width:2;stroke-dasharray:520;stroke-dashoffset:520;animation:battleLaunchTrace 1.35s var(--ease) forwards; }
    .battle-launch-cursor { position:absolute;right:0;top:17px;width:2px;height:16px;background:var(--gold-hi);box-shadow:0 0 16px 4px var(--gold-soft);animation:battleLaunchCursor 1.35s var(--ease) both; }
    @keyframes battleLaunchTrace { to { stroke-dashoffset:0; } }
    @keyframes battleLaunchCursor { from { right:100%;opacity:0; } 12% { opacity:1; } to { right:0;opacity:1; } }
    .battle-launch-copy > span { display:block;margin-bottom:7px;color:var(--gold);font:700 9px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; }
    .battle-launch-copy h2 { margin:0;color:var(--text);font:730 clamp(25px,4vw,34px)/1.08 var(--font);letter-spacing:-.04em; }
    .battle-launch-copy p { min-height:38px;margin:9px 0 0;color:var(--sec);font:500 12px/1.55 var(--font); }
    .battle-launch-meta { display:grid;grid-template-columns:minmax(0,1.5fr) 1fr 1fr;gap:1px;margin:19px 0 20px;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--line); }
    .battle-launch-meta > span { min-width:0;display:flex;flex-direction:column;gap:5px;padding:11px 12px;background:var(--solid); }
    .battle-launch-meta small { color:var(--faint);font:650 7.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; }
    .battle-launch-meta b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sec);font:620 11px/1.25 var(--font); }
    .battle-launch-steps { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px; }
    .battle-launch-steps > span { min-width:0;display:flex;align-items:center;gap:7px;color:var(--faint);font:600 9.5px/1 var(--font);transition:color .2s var(--ease); }
    .battle-launch-steps i { width:8px;height:8px;flex:none;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--solid);transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); }
    .battle-launch-steps > span.is-active { color:var(--text); }
    .battle-launch-steps > span.is-active i { border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft);animation:battleLaunchStep .8s ease-in-out infinite alternate; }
    .battle-launch-steps > span.is-done { color:var(--sec); }
    .battle-launch-steps > span.is-done i { border-color:var(--gold);background:var(--gold);box-shadow:none; }
    @keyframes battleLaunchStep { to { box-shadow:0 0 0 7px transparent; } }
    .battle-launch-progress { height:3px;overflow:hidden;border-radius:999px;background:var(--surface-hi); }
    .battle-launch-progress i { display:block;width:14%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-hi));box-shadow:0 0 14px var(--gold-soft);transition:width .4s var(--ease),background .2s var(--ease); }
    .battle-launch[data-phase="verifying_frozen_feed"] .battle-launch-progress i { width:38%; }
    .battle-launch[data-phase="loading_history"] .battle-launch-progress i { width:62%; }
    .battle-launch[data-phase="mounting_chart"] .battle-launch-progress i,
    .battle-launch[data-phase="warming_workspace"] .battle-launch-progress i { width:84%; }
    .battle-launch[data-phase="ready"] .battle-launch-progress i { width:100%; }
    .battle-launch[data-phase="recoverable_error"] .battle-launch-progress i { width:100%;background:var(--down); }
    .battle-launch-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px; }
    .battle-launch-actions[hidden] { display:none; }
    .battle-launch-actions button { min-height:42px; }
    .battle-launch-rule { margin:12px 0 0;color:var(--faint);font:550 9.5px/1.4 var(--font);text-align:center; }
    @media (max-width:680px) {
      .battle-launch { inset:60px 0 0;padding:12px; }
      .battle-launch-card { padding:20px 18px 17px;border-radius:16px; }
      .battle-launch-visual { height:92px;margin:0 -18px 18px; }
      .battle-launch-topline { margin-bottom:14px; }
      .battle-launch-meta { grid-template-columns:1fr 1fr;margin-block:16px; }
      .battle-launch-meta > span:first-child { grid-column:1 / -1; }
      .battle-launch-copy p { min-height:0; }
      .battle-launch-steps { grid-template-columns:1fr 1fr;row-gap:11px; }
      .battle-launch-actions { grid-template-columns:1fr; }
    }
    @media (prefers-reduced-motion:reduce) {
      .battle-launch,.battle-launch-card { transition-duration:.01ms; }
      .battle-launch-ambient span,.battle-launch-live i,.battle-launch-line,.battle-launch-cursor,.battle-launch-steps > span.is-active i { animation:none; }
      .battle-launch-line { stroke-dashoffset:0; }
      .battle-launch-cursor { right:0;opacity:1; }
    }
    /* ── multiplayer match layer — one compact chronograph in the chart's unused top-right corner.
       Battle mode adds information, never a new layout: the normal OHLC, transport, quote ticket, and
       indicator legend keep their exact solo-session coordinates. Gold marks time/rank; green/red remain
       exclusively financial. The HUD itself is draggable and its lower gold rail is the shared clock. ── */
    /* The battle rank pill. The WHOLE pill is one control — hold anywhere to drag (makeDraggable),
       tap to open the standings drawer. The old strip packed name/tape/time/pnl and two buttons
       into an overflow:hidden box, which is how the collapse toggle got clipped off the edge. */
    #matchStrip { position:absolute;z-index:12;top:12px;right:12px;left:auto;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 13px 6px 11px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:color-mix(in srgb,var(--card-solid) 93%,transparent);box-shadow:var(--shadow-pop);backdrop-filter:blur(18px);cursor:grab;user-select:none;touch-action:none; }
    #matchStrip:hover { border-color:var(--gold-border); }
    #matchStrip:focus-visible { outline:1.5px solid rgba(255,255,255,.4);outline-offset:1px; }
    #matchStrip.dragging-pill { cursor:grabbing; }
    .match-pulse { width:7px;height:7px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft);animation:matchPulse 1.8s ease-in-out infinite; }
    #matchStrip.syncing .match-pulse,#matchStrip.buffering .match-pulse { animation-duration:.55s; }
    /* State without words at pill size: gold = live, fast pulse = working, and the two working
       states shift hue so replaying debt and seeking stay tellable apart. */
    #matchStrip.buffering:not(.syncing):not(.navigating) .match-pulse { background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 20%,transparent); }
    #matchStrip.navigating .match-pulse { background:var(--sec);box-shadow:0 0 0 4px color-mix(in srgb,var(--sec) 20%,transparent); }
    @keyframes matchPulse { 50% { box-shadow:0 0 0 7px transparent; } }
    #matchStripRank { color:var(--text);font:750 13px/1 var(--mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums; }
    #matchStripField { color:var(--faint);font:600 10px/1 var(--mono);font-variant-numeric:tabular-nums; }
    #matchLeaderboard { position:absolute;z-index:45;inset:0 0 0 auto;width:min(390px,100%);display:flex;flex-direction:column;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(102%);border-left:1px solid var(--line-strong);background:color-mix(in srgb,var(--card-solid) 96%,transparent);box-shadow:-24px 0 54px -38px rgba(0,0,0,.62);backdrop-filter:blur(22px);transition:transform .24s var(--ease),opacity .18s var(--ease),visibility 0s linear .24s; }
    #matchLeaderboard.open { visibility:visible;opacity:1;pointer-events:auto;transform:translateX(0);transition-delay:0s; }
    .match-drawer-head { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:24px 22px 17px;border-bottom:1px solid var(--line); }
    .match-drawer-head span,.match-results-kicker { display:block;margin-bottom:5px;color:var(--gold);font:700 8.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; }
    .match-drawer-head h2,.match-results-card h2 { margin:0;color:var(--text);font:700 21px/1.1 var(--font);letter-spacing:-.025em; }
    #matchLeaderboardClose { width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--muted);font:400 23px/1 var(--font); }
    .match-drawer-meta { min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px 10px 22px;color:var(--muted);font:500 10.5px/1.4 var(--font);border-bottom:1px solid var(--line); }
    .match-drawer-meta > span { min-width:0; }
    #matchLeaveBtn,#matchEndBtn { flex:none;min-height:30px;padding:0 10px;font:650 9.5px/1 var(--font); }
    #matchLeaveBtn { margin-left:auto;border-color:var(--line-strong);background:var(--solid);color:var(--sec); }
    #matchLeaveBtn:hover { color:var(--text);background:var(--surface-hi); }
    #matchEndBtn { border-color:var(--down-border);background:var(--down-soft);color:var(--down); }
    #matchPayoutBtn { flex:none;min-height:30px;padding:0 10px;border-color:var(--gold-border);background:var(--gold-soft);color:var(--gold-ink);font:650 9.5px/1 var(--font); }
    #matchPayoutBtn:disabled { opacity:.55;cursor:wait; }
    #matchEndBtn:hover { border-color:var(--down);background:color-mix(in srgb,var(--down-soft) 74%,var(--surface)); }
    #matchEndBtn:disabled { opacity:.52;cursor:wait; }
    .match-table-head,.match-board-row { display:grid;grid-template-columns:42px minmax(0,1fr) 52px 82px;align-items:center;gap:8px; }
    .match-table-head { padding:10px 20px;color:var(--faint);font:650 8px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; }
    .match-table-head span:nth-child(n+3) { text-align:right; }
    .match-leaderboard-rows { flex:1;overflow:auto;padding:0 10px 18px; }
    .match-board-row { min-height:52px;padding:7px 10px;border-bottom:1px solid var(--line);border-radius:9px;color:var(--sec); }
    .match-board-row.me { background:var(--gold-soft);box-shadow:inset 2px 0 var(--gold); }
    .match-board-row.blown { background:color-mix(in srgb,var(--red) 7%,transparent); }
    .match-board-row.blown.me { box-shadow:inset 2px 0 var(--red); }
    .match-rank { color:var(--muted);font:700 12px var(--mono); }
    .match-rank.podium { color:var(--gold); }
    .match-person { min-width:0;display:flex;align-items:center;gap:9px; }
    .match-avatar { width:28px;height:28px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font:650 9px var(--mono); }
    .match-avatar img { width:100%;height:100%;object-fit:cover; }
    .match-person-copy { min-width:0;display:flex;flex-direction:column;gap:2px; }
    .match-person-copy b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font:600 11.5px var(--font); }
    .match-person-copy small { color:var(--faint);font:500 8.5px var(--font);text-transform:capitalize; }
    .match-person-copy small.blown { color:var(--red);font-weight:700;letter-spacing:.04em;text-transform:uppercase; }
    .match-person-copy small.prop-good { color:var(--gold);font-weight:700;letter-spacing:.04em;text-transform:uppercase; }
    .match-board-trades,.match-board-pnl { text-align:right;font:600 10.5px var(--mono); }
    .match-board-pnl.pos { color:var(--up); }.match-board-pnl.neg { color:var(--down); }
    .match-results { position:absolute;z-index:60;inset:0;display:grid;place-items:center;padding:24px;background:rgba(9,9,11,.48);backdrop-filter:blur(10px); }
    .match-results-card { width:min(620px,100%);max-height:min(720px,calc(100% - 18px));overflow:auto;padding:28px;border:1px solid var(--line-strong);border-radius:20px;background:var(--card);box-shadow:var(--shadow-modal); }
    .match-results-card > p { margin:8px 0 22px;color:var(--muted);font:500 12px/1.5 var(--font); }
    .match-podium { display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:9px;margin:0 0 18px; }
    .match-podium-card { min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:15px 8px 13px;border:1px solid var(--line);border-radius:12px;background:var(--solid);text-align:center; }
    .match-podium-card.first { min-height:126px;border-color:var(--gold-border);background:linear-gradient(180deg,var(--gold-soft),var(--solid)); }
    .match-podium-card .match-avatar { width:38px;height:38px; }
    .match-podium-card b { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font:650 11px var(--font); }
    .match-podium-card strong { color:var(--gold);font:750 17px var(--mono); }
    .match-results-rows { margin-bottom:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden; }
    .match-results-rows .match-board-row { border-radius:0;padding-inline:13px; }
    .match-results-seal { display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-2px 0 18px;padding:10px 12px;border:1px solid var(--gold-border);border-radius:10px;background:var(--gold-soft); }
    .match-results-seal span { color:var(--gold-ink);font:700 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; }
    .match-results-seal code { min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text);font:600 10px/1.2 var(--mono);white-space:nowrap; }
    .match-results-actions { display:flex;justify-content:flex-end;gap:9px; }
    #matchResultsRetry { min-height:38px;padding:0 14px;border:1px solid var(--line-strong);border-radius:9px;background:var(--solid);color:var(--text);font:650 11px var(--font); }
    #matchResultsDone { width:100%;min-height:42px; }
    body.match-active #selectBarBtn,body.match-active #ethRth,body.match-active #propSec,body.match-active #actionPill,body.match-active #sideBizBtn { display:none; }
    /* A PROP battle keeps the Prop-mode section: it holds the read-only sealed-rules panel.
       The solo picker/builder/HUD inside it are suppressed by the render gate, not by CSS. */
    body.match-active.match-prop #propSec { display:block; }
    body.match-active.match-syncing #buyBtn,
    body.match-active.match-syncing #sellBtn,
    body.match-active.match-syncing #closeBtn,
    body.match-active.match-syncing #opBuy,
    body.match-active.match-syncing #opSell,
    body.match-active.match-syncing #opClose,
    body.match-active.match-syncing #omSave,
    body.match-active.match-syncing #omSaveJournal { pointer-events:none;opacity:.46;cursor:progress; }
    body.match-active.match-blocking #stepBtn { pointer-events:none;opacity:.46;cursor:progress; }
    body.match-active.match-navigating #stepBtn { pointer-events:none;opacity:.46;cursor:progress; }
    body.match-active.match-navigating #playBtn { pointer-events:auto;opacity:1;cursor:pointer; }
    @media (max-width:1200px) {
      #matchStrip { top:56px; }
    }
    @media (max-width:820px) {
      #matchStrip { top:8px;right:8px; }
      /* NOTE: no `.match-rank { display:none }` here — the drawer's rank column shares that class,
         and the old rule silently emptied it on phones. The pill needs no per-breakpoint pruning. */
    }
    @media (max-width:680px) {
      .match-results { padding:10px; }
      .match-results-card { padding:21px 16px;border-radius:16px; }
    }
    /* the legend: a quiet two-line HUD, no box — symbol descriptor over inline OHLC (FX-Replay feel) */
    .pane-ohlc { position: absolute; top: 9px; left: 12px; z-index: 3; pointer-events: none; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
    .pane-ohlc .leg-sym { font: 600 11px var(--font); letter-spacing: .015em; color: var(--text); }
    .pane-ohlc .leg-sym .att { font-weight: 500; color: var(--faint); }
    .pane-ohlc .leg-vals { display: flex; gap: 10px; margin-top: 2px; font: 500 11.5px var(--font); letter-spacing: -.01em; color: var(--sec); }
    .pane-ohlc .leg-vals i { font: 600 8.5px var(--font); font-style: normal; letter-spacing: .06em; color: var(--faint); margin-right: 3px; }
    .pane-ohlc .leg-vals b { font-weight: 500; }
    .pane-ohlc .leg-vals.up b { color: var(--up); }
    .pane-ohlc .leg-vals.down b { color: var(--down); }
    .pane-ohlc .chg.pos { color: var(--up); }
    .pane-ohlc .chg.neg { color: var(--down); }
    .pane-ohlc.hide-symbol-title .leg-sym > span:first-child,
    .pane-ohlc.hide-timeframe .leg-sym .att,
    .pane-ohlc.hide-ohlc .leg-vals > span:not(.chg),
    .pane-ohlc.hide-bar-change .leg-vals .chg { display: none; }
    .pane-ohlc.hide-symbol-title.hide-timeframe .leg-sym,
    .pane-ohlc.hide-ohlc.hide-bar-change .leg-vals { display: none; }
    /* legible on light custom chart backgrounds */
    .pane-ohlc.on-light { text-shadow: none; }
    .pane-ohlc.on-light .leg-sym { color: #131722; }
    .pane-ohlc.on-light .leg-sym .att, .pane-ohlc.on-light .leg-vals i { color: #8a8e99; }
    .pane-ohlc.on-light .leg-vals { color: #2a2e39; }

    /* ── floating drawing-style toolbar (appears when a drawing is selected, TV-style) ── */
    #drawStyle { display: none; position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 4; /* below the transport pill */ align-items: center; gap: 8px; padding: 6px 10px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; backdrop-filter: blur(6px); box-shadow: var(--shadow-pop); }
    #drawStyle.open { display: flex; }
    #drawStyle .grip { display: inline-flex; align-items: center; padding: 0 4px 0 2px; font: 600 10px var(--font, Switzer, sans-serif); letter-spacing: -2px; color: #5a5f66; cursor: grab; user-select: none; }
    #drawStyle .swatch { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
    #drawStyle .swatch.active { border-color: #fff; }
    #drawStyle #styleHex { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; -webkit-appearance: none; appearance: none; vertical-align: middle; background: conic-gradient(from 90deg, #f23645, var(--accent), #089981, #4d8bff, #a78bfa, #f23645); }
    #drawStyle #styleHex.active { border-color: #fff; }
    #drawStyle #styleHex::-webkit-color-swatch-wrapper { padding: 0; }
    #drawStyle #styleHex::-webkit-color-swatch { border: none; border-radius: 50%; opacity: 0; }
    #drawStyle #styleHex::-moz-color-swatch { border: none; opacity: 0; }
    #drawStyle .wbtn { width: 24px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--muted); }
    #drawStyle .wbtn.active { background: var(--surface-hi); color: var(--text); border-color: var(--line-strong); }
    #drawStyle .wbtn i { display: block; background: currentColor; border-radius: 2px; width: 12px; }
    #drawStyle .sep { width: 1px; height: 16px; background: var(--line-strong); }
    #drawStyle #styleDelete { color: var(--down); background: transparent; border: none; padding: 2px 4px; }
    #drawStyle #styleDelete:hover { background: rgba(242, 54, 69, .12); }
    /* locked: style edits are inert (the store blocks them) — reflect it */
    #drawStyle.locked :is(.swatch, #styleHex, .wbtn[data-width], #styleDash, #styleExtend) { opacity: .3; pointer-events: none; }
    /* the position tool has semantic colors; extend only means something on trend/channel */
    #drawStyle[data-kind^="position"] :is(#styleSwatches, .wbtn[data-width], #styleDash) { display: none; }
    #drawStyle:not([data-kind="trend"]):not([data-kind="channel"]) #styleExtend { display: none; }

    /* ── the right DRAWERS (TV-style): the chart owns the screen; Trade and Analytics live in slide-in
       panels toggled from the slim right rail. One panel at a time; state persists per browser. ── */
    #sideRail, #sidePanels { font-family: var(--font); font-variant-numeric: tabular-nums; }
    /* The right workspace is application UI, not a code surface. Older `.mono` utilities and the
       global numeric-input rule leaked the retired terminal face into Order, Stats, Prop Mode,
       Journal, Indicators and Settings. Own typography once at the drawer boundary so dynamic
       panel content cannot drift while prices and P&L retain stable tabular figures. */
    #sidePanels *:not(kbd) { font-family: var(--font) !important; font-variant-numeric: tabular-nums; }
    #sidePanels { position: relative; width: 302px; flex: none; border-left: 1px solid var(--line); background: var(--solid); display: flex; flex-direction: column; min-height: 0; }
    /* item 4: drag the left edge to resize; width persists; content scales by width bucket (data-w) */
    .panel-resize { position: absolute; left: -6px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 9; touch-action: none; }
    .panel-resize::after { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .12s var(--ease); }
    .panel-resize:hover::after, body.resizing-panel .panel-resize::after { background: rgba(255, 255, 255, .22); }
    body.resizing-panel { cursor: col-resize; user-select: none; }
    body.resizing-panel #chart { pointer-events: none; }
    body.resizing-panel #sidePanels { will-change: width; }
    #sidePanels[data-w="md"] .ph-hero { font-size: 30px; }
    #sidePanels[data-w="lg"] .ph-hero { font-size: 33px; }
    #sidePanels[data-w="lg"] #propStats b, #sidePanels[data-w="lg"] #propLedger b { font-size: 16px; }
    #sidePanels[data-w="lg"] .field { gap: 16px; }
    #sidePanels[data-w="md"] .sec { padding-left: 20px; padding-right: 20px; }
    #sidePanels[data-w="lg"] .sec { padding-left: 26px; padding-right: 26px; }
    @media (max-width: 840px) { .panel-resize { display: none; } }
    #sidePanels[data-open=""] { display: none; }
    #sidePanels .panel { display: none; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
    .pending-size-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); color: var(--muted); font: 550 11px var(--font); }
    .pending-size-row[hidden] { display: none; }
    .pending-size-row input { width: 64px; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--card); color: var(--text); font: 650 12px var(--mono); text-align: center; }
    #sidePanels[data-open="trade"] #tradePanel { display: flex; }
    #sidePanels[data-open="stats"] #statsPanel { display: flex; }
    #sidePanels[data-open="biz"] #bizPanel { display: flex; }
    #sidePanels[data-open="jrnl"] #jrnlPanel { display: flex; }

    /* ── Journal drawer (Confluence Journal Phase 1) ─────────────────────────
       A journaling PRACTICE, not a form: sections in the order a session
       actually runs — bias before trading, trades as they close, then the
       review trio. Quiet by default; the chips are the only color. */
    #jrnlPanel .panel-head { padding: 14px 16px 10px; font: 680 15px var(--font); letter-spacing: -.015em; color: var(--text); border-bottom: 1px solid var(--line); flex: none; }
    #jrnlPanel .panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 18px; }
    .jr-sec { padding: 13px 0 14px; border-bottom: 1px solid var(--line); }
    .jr-sec:last-of-type { border-bottom: none; }
    .jr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .jr-title { font: 680 12.5px var(--font); color: var(--text); letter-spacing: -.01em; }
    .jr-day, .jr-count { font: 600 10.5px var(--mono); color: var(--muted); }
    .jr-hint { margin-top: 2px; font: 500 10.5px var(--font); color: var(--muted); line-height: 1.45; }
    /* Prose boxes fit their content — a plan written yesterday should be readable
       today without finding a scrollbar inside a three-row window. field-sizing does
       it with no script where it exists; autofitProse() below covers the rest. */
    .jr-text { width: 100%; margin-top: 8px; padding: 8px 10px; font: 500 12px/1.5 var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; resize: none; overflow-y: hidden; field-sizing: content; }
    .jr-text:focus { outline: none; border-color: var(--line-strong); }
    .jr-mini { background: transparent; border: 1px solid var(--line); color: var(--sec); border-radius: 7px; font: 600 10.5px var(--font); padding: 2px 8px; cursor: pointer; }
    .jr-mini:hover { color: var(--text); border-color: var(--line-strong); }
    /* trades list — compact receipt rows */
    .jr-trades { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
    .jr-trow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; }
    .jr-trow:hover { border-color: var(--line-strong); }
    .jr-tside { font: 700 10px var(--font); letter-spacing: .04em; text-transform: uppercase; flex: none; }
    /* the side chip wears its DIRECTION colour only (like the live Journal) — outcome belongs to P&L.
       The old outcome tint put a losing LONG in red, which read as SHORT at a glance. */
    .jr-tpnl { font: 700 11.5px var(--mono); font-variant-numeric: tabular-nums; flex: none; }
    .jr-trow.pos .jr-tpnl { color: var(--up); } .jr-trow.neg .jr-tpnl { color: var(--down); }
    .jr-tmeta { font: 500 10px var(--mono); color: var(--muted); flex: none; }
    .jr-ttags { flex: 1; min-width: 0; display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
    .jr-ttag { font: 600 9px var(--font); color: var(--sec); background: var(--blue-soft); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
    .jr-empty { margin-top: 8px; font: 500 11px var(--font); color: var(--muted); line-height: 1.5; }
    /* chips (confluence + discipline) */
    .jr-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
    .jr-chip { font: 600 11px var(--font); color: var(--sec); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
    .jr-chip:hover { color: var(--text); border-color: var(--line-strong); }
    .jr-chip[aria-pressed="true"] { color: var(--blue-hi); background: var(--blue-soft); border-color: var(--blue-border); }
    /* edge finder — one row per confluence */
    .jr-edge { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
    .jr-erow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 7px; background: var(--surface); }
    .jr-etag { font: 600 11px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .jr-ewr, .jr-er, .jr-epnl { font: 600 10.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--sec); }
    .jr-epnl.pos { color: var(--up); } .jr-epnl.neg { color: var(--down); }
    .jr-en { font: 500 9px var(--font); color: var(--muted); margin-left: 3px; }
    /* did I win the day */
    .jr-winrow { margin-top: 8px; display: flex; gap: 6px; }
    .jr-win { flex: 1; height: 32px; font: 640 12px var(--font); background: transparent; color: var(--sec); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
    .jr-win:hover { color: var(--text); border-color: var(--line-strong); }
    .jr-win.on-yes { color: var(--up); background: var(--up-soft); border-color: var(--up-border); }
    .jr-win.on-no { color: var(--down); background: var(--down-soft); border-color: var(--down-border); }
    .jn-ai { background: transparent; border: 1px solid var(--line); color: var(--sec); border-radius: 8px; font: 600 11px var(--font); padding: 0 10px; cursor: pointer; }
    .jn-ai:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
    .jn-ai:disabled { opacity: .55; cursor: default; }
    .jr-mic { position: relative; margin-top: 4px; background: transparent; border: 1px solid var(--line); color: var(--sec); border-radius: 7px; font-size: 11px; line-height: 1; padding: 3px 8px; cursor: pointer; }
    .jr-mic.on { color: var(--down); border-color: var(--down-border); background: var(--down-soft); }
    .jn-shots { margin: 6px 0 2px; }
    .jn-shot-tabs { display: flex; gap: 3px; margin-bottom: 4px; }
    .jn-shot-tab { font: 600 9.5px var(--mono); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; cursor: pointer; }
    .jn-shot-tab.on { color: var(--text); border-color: var(--line-strong); background: var(--surface); }
    .jn-shot-img { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
    .jr-weekrow { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
    .jr-wcell { padding: 7px 8px; border-radius: 8px; background: var(--surface); text-align: center; }
    .jr-wlbl { display: block; font: 600 8.5px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
    .jr-wcell b { font: 700 12.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
    .jr-wcell b.pos { color: var(--up); } .jr-wcell b.neg { color: var(--down); }
    .jr-foot { padding-top: 12px; }
    .jr-foot .jn-open { font: 600 11.5px var(--font); }
    /* ── Prop Business drawer (ROI rework Phase 1) ─────────────────────────
       One hero number. The ROI IS the game, so it gets the display type and
       everything else stays quiet: a three-up money row, a counts line, and a
       receipt roll. Red must read as loudly as green — the sting is the
       mechanic. */
    .biz-hero { text-align: center; padding: 14px 0 10px; }
    .bz-roi { font: 700 34px/1 var(--mono); letter-spacing: -.01em; }
    .bz-roi.pos { color: var(--up); }
    .bz-roi.neg { color: var(--down); }
    .bz-roi-lbl { margin-top: 4px; font: 500 11px var(--font); color: var(--sec); text-transform: uppercase; letter-spacing: .08em; }
    .biz-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 10px 0 4px; }
    .biz-row3 > div { text-align: center; padding: 8px 2px; border: 1px solid var(--line); border-radius: 8px; }
    .biz-row3 b { display: block; font: 600 13px var(--mono); }
    .biz-row3 span { display: block; margin-top: 2px; font: 500 10px var(--font); color: var(--sec); }
    .biz-counts { margin: 8px 0 2px; font: 500 11px var(--font); color: var(--sec); text-align: center; }
    .biz-sub { margin: 12px 0 4px; font: 600 11px var(--font); color: var(--sec); text-transform: uppercase; letter-spacing: .06em; }
    .biz-ledger { display: flex; flex-direction: column; gap: 2px; }
    .bz-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 6px; border-radius: 6px; }
    .bz-row:nth-child(odd) { background: color-mix(in srgb, var(--line) 30%, transparent); }
    .bz-lbl { font: 500 12px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bz-amt { font: 600 12px var(--mono); flex: none; }
    .biz-empty { padding: 14px 4px; font: 500 12px/1.5 var(--font); color: var(--sec); }
    .bk-biz { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: 500 12px var(--font); color: var(--sec); }
    /* ── the combined day across the copy-trade stack ── */
    .biz-day { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; }
    .bd-val { font: 700 26px/1.1 var(--mono); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
    .bd-val.pos { color: var(--up); }
    .bd-val.neg { color: var(--down); }
    .bd-lbl { margin-top: 3px; font: 600 10px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--sec); }
    /* One segment per account: width = its share of today's move, colour = its
       direction. A stack pulling together and a stack pulling apart read
       differently at a glance; a single summed figure cannot show that. */
    .bd-strip { display: flex; gap: 2px; height: 5px; margin-top: 9px; }
    .bd-strip i { border-radius: 1px; min-width: 2px; }
    .bd-strip i.up { background: var(--up); }
    .bd-strip i.dn { background: var(--down); }
    .bd-strip i.fl { background: var(--line-strong); }
    .bd-split { margin-top: 6px; font: 500 10px var(--mono); color: var(--muted); }
    /* ── Portfolio (Phases 2–3) ── */
    .port-head { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
    .port-head .biz-sub { margin: 0; }
    .port-toggle { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--sec); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
    .port-toggle .pt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sec); opacity: .4; }
    .port-toggle.on { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
    .port-toggle.on .pt-dot { background: var(--up); opacity: 1; }
    .port-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
    /* Four bands, in the order the questions get asked: who is this, what is it
       worth, how is it doing, what can I do about it. The old three-column
       squeeze gave the name a third of the width and broke words in half. */
    .port-row { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
    .pr-top { display: flex; align-items: baseline; gap: 6px; }
    .pr-figs { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .pr-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
    /* The leader carries the stack — it reads as the anchor of the group. */
    .port-row.lead { border-color: var(--gold-border); background: var(--gold-soft); }
    .port-row.dead { opacity: .72; }
    /* Firm as a chip, account as the name. Spelling the firm out on every row
       repeated it up to twenty times and wrapped each name onto three lines;
       the chip carries it in the space of a word and makes the list scannable
       by firm, which is the axis the caps and the rules run on. */
    .port-firm { flex: none; font: 700 8.5px var(--font); letter-spacing: .07em; color: var(--sec); background: var(--surface-hi); border-radius: 3px; padding: 2px 4px; }
    /* break-word, not anywhere: only split a word that cannot fit at all. */
    .port-name { flex: 1; min-width: 0; font: 600 12px var(--font); overflow-wrap: break-word; line-height: 1.3; }
    .port-sub { font: 500 10px var(--font); color: var(--sec); }
    .port-pill { flex: none; font: 700 9px var(--font); text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--sec); }
    .port-pill.funded { color: var(--up); border-color: color-mix(in srgb, var(--up) 50%, transparent); }
    .port-pill.blown { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); }
    .port-pill.passed { color: var(--up); }
    .port-bal { flex: none; font: 700 13px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
    .port-day { font: 500 9.5px var(--mono); color: var(--sec); font-variant-numeric: tabular-nums; }
    .port-room { font: 500 9.5px var(--mono); color: var(--sec); font-variant-numeric: tabular-nums; }
    .port-rebuy { flex: none; font: 600 10px var(--font); color: var(--down); background: none; border: 1px solid color-mix(in srgb, var(--down) 45%, transparent); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
    .port-actions { display: flex; gap: 6px; margin-top: 8px; }
    /* ── the copy-trader: shelf headers and per-account controls ── */
    .port-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 2px; font: 700 9px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--sec); }
    .port-sec:first-child { margin-top: 2px; }
    .port-sec.blown { color: var(--down); }
    .port-sec-note { font: 500 9px var(--mono); text-transform: none; letter-spacing: 0; color: var(--muted); }
    .port-resetall { font: 600 9px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--down); background: none; border: 1px solid color-mix(in srgb, var(--down) 45%, transparent); border-radius: 999px; padding: 3px 8px; cursor: pointer; }
    .port-resetall:hover { background: color-mix(in srgb, var(--down) 12%, transparent); }
    /* Quiet by default. Twenty rows × three bordered pills competed with the
       figures they sit under; only STATE (following) and money (payout, reset)
       earn a tint, and the plain actions recede until hovered. */
    .port-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
    .port-ctl button { font: 600 9px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 7px; cursor: pointer; transition: color .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease); }
    .port-ctl button:hover { color: var(--text); background: var(--surface-hi); }
    .port-follow { display: inline-flex; align-items: center; gap: 5px; }
    .port-follow .pt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; }
    /* Scoped under .port-ctl so these beat the generic button rule above on
       specificity rather than on !important. */
    .port-ctl .port-follow { border-color: var(--line); }
    .port-ctl .port-follow.on { color: var(--up); border-color: var(--up-border); background: var(--up-soft); }
    .port-ctl .port-follow.on .pt-dot { opacity: 1; }
    .port-ctl .port-mult { font-family: var(--mono); }
    .port-ctl .port-payout { color: var(--up); border-color: var(--up-border); background: var(--up-soft); }
    .port-ctl .port-payout:hover { color: var(--up); border-color: var(--up); }
    .port-ctl .port-rebuy { color: var(--down); border-color: var(--down-border); }
    .port-ctl .port-rebuy:hover { color: var(--down); border-color: var(--down); background: var(--down-soft); }
    .port-lead { flex: none; font: 700 8.5px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--gold-hi); background: var(--gold-soft); border-radius: 3px; padding: 2px 5px; }
    .port-shop { flex: 1; font: 600 12px var(--font); padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; }
    .port-shop:hover { border-color: var(--sec); }
    .port-sweep { flex: 1; font: 700 12px var(--font); padding: 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--up) 55%, transparent); background: color-mix(in srgb, var(--up) 12%, transparent); color: var(--up); cursor: pointer; }
    /* ── Eval Shop ── */
    .shop-sheet { width: min(560px, 94vw); max-height: 84vh; display: flex; flex-direction: column; }
    .shop-spend { font: 600 11px var(--mono); color: var(--sec); padding: 6px 14px 8px; border-bottom: 1px solid var(--line); }
    .shop-list { overflow-y: auto; padding: 8px 14px; }
    .shop-firm { margin-bottom: 12px; }
    .shop-firm-head { display: flex; justify-content: space-between; align-items: baseline; font: 700 12px var(--font); padding: 6px 0 4px; }
    .shop-cap { font: 600 10px var(--mono); color: var(--sec); }
    .shop-cap.full { color: var(--down); }
    .shop-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 4px; transition: border-color .12s, transform .12s; }
    .shop-item:hover { border-color: var(--sec); transform: translateY(-1px); }
    .shop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .shop-name { font: 600 12px var(--font); }
    .shop-sub { font: 500 10px var(--font); color: var(--sec); }
    .shop-buy { flex: none; display: flex; align-items: center; gap: 8px; }
    .shop-strike { text-decoration: line-through; font: 500 10px var(--mono); color: var(--sec); }
    .shop-btn { font: 700 11px var(--font); padding: 6px 12px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--up) 55%, transparent); background: color-mix(in srgb, var(--up) 10%, transparent); color: var(--up); cursor: pointer; white-space: nowrap; }
    .shop-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--up) 20%, transparent); }
    .shop-btn:disabled { opacity: .5; cursor: not-allowed; color: var(--sec); border-color: var(--line); background: none; }
    .shop-note { padding: 8px 14px 12px; font: 500 10px/1.5 var(--font); color: var(--sec); border-top: 1px solid var(--line); }
    /* indicators panel */
    #indSrc { width: 100%; resize: vertical; min-height: 120px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: 400 11px var(--mono); padding: 9px 10px; line-height: 1.5; }
    #indSrc:focus { outline: none; border-color: var(--line-strong); }
    .indrow { display: flex; align-items: center; gap: 7px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
    .indrow.off .ititle { color: var(--faint); }
    .indrow .ieye, .indrow .ix { padding: 2px 7px; font-size: 12px; background: transparent; border: none; color: var(--muted); }
    .indrow .ieye:hover, .indrow .ix:hover { color: var(--text); background: var(--surface-hi); border-radius: 5px; }
    .indrow .ititle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--sec); }
    .ichip { flex: none; font: 600 9px var(--font); letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--faint); }
    .ichip.err { color: var(--down); border-color: rgba(242, 54, 69, .4); }
    .ichip.warn { color: var(--warn-hi); border-color: var(--warn-border); }
    .indrow .igear { padding: 2px 6px; font-size: 11px; background: transparent; border: none; color: var(--muted); }
    .indrow .igear:hover, .indrow .igear.on { color: var(--text); background: var(--surface-hi); border-radius: 5px; }
    .ichip.upd { color: var(--blue-hi); border-color: rgba(37, 99, 235, .45); cursor: pointer; }
    /* the add-tabs (Paste / My builds / Community) */
    #indTabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
    #indTabs button { padding: 6px 8px; font-size: 11px; color: var(--muted); }
    #indTabs button.active { color: var(--text); border-color: var(--line-strong); background: var(--surface-hi); }
    #indCommSearch { width: 100%; margin-bottom: 8px; }
    .librow { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
    .librow .lthumb { flex: none; width: 44px; height: 24px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
    .librow .lmain { flex: 1; min-width: 0; }
    .librow .lt { font-size: 12px; color: var(--sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .librow .lm { font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .librow .ladd { flex: none; padding: 4px 10px; font-size: 11px; }
    .librow .lopen { flex: none; padding: 4px 7px; font-size: 11px; background: transparent; border: none; color: var(--muted); text-decoration: none; }
    .librow .lopen:hover { color: var(--text); }
    .lpick { color: var(--gold-hi); }
    .libsection + .libsection { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
    .libsection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 2px 6px; }
    .libsection-head div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .libsection-head strong { font: 650 11px var(--font); color: var(--text); }
    .libsection-head span { font: 500 9.5px var(--font); color: var(--faint); }
    .libsection-head b { flex: none; padding: 3px 7px; border: 1px solid rgba(37, 99, 235, .28); border-radius: 999px; background: rgba(37, 99, 235, .08); font: 650 8.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); }
    /* Indicator settings — a composed Inputs / Style / Visibility sheet. Controls use the sheet's
       semantic surface token instead of a hard-coded black fill, so their text keeps readable contrast
       when the host/browser presents the dialog with a light palette. */
    .indset-sheet { width: min(720px, 94vw); height: min(780px, 90vh); background: var(--card-solid); box-shadow: var(--shadow-pop); }
    .indset-head { min-height: 70px; padding: 16px 24px; }
    .indset-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .indset-head .imtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
    .indset-head > div > span:last-child { font: 500 10px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
    #indSettingsBody { flex: 1; min-height: 0; }
    .indform { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--card-solid); }
    /* No tab strip: Inputs is the only list, because Pine only ever had one.
       Colour belongs to the row that uses it, not to a tab of its own. */
    .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: 650 9.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
    .if-group:first-child { margin-top: 0; }
    /* Density is the tell. Native settings put a lot of controls in a small pane,
       and a row twice the necessary height reads as a different product before
       anyone has looked at a single label. */
    .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-hi); font: 700 9px var(--font); cursor: help; }
    button.if-info:hover:not(:disabled), button.if-info:focus-visible { color: var(--text); background: var(--surface-hi); border-color: transparent; transform: none; }
    /* Input help is a real portal popover instead of a browser `title`. It can escape the scrolling
       settings pane, preserves Pine's multiline tooltips, and works from hover or keyboard focus. */
    .ind-input-tooltip { position: fixed; z-index: 420; width: max-content; max-width: min(320px, calc(100vw - 24px)); padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--card-solid); color: var(--text); box-shadow: var(--shadow-pop); 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: #202124; }
    .ind-input-tooltip[data-side="left"]::before { left: 100%; top: calc(50% - 6px); border-left-color: #202124; }
    .ind-input-tooltip[data-side="below"]::before { bottom: 100%; left: calc(50% - 6px); border-bottom-color: #202124; }
    /* `inline=` in Pine means one row, controls at their natural width — the
       "HTF1 [5 minutes] Bullish [swatch] Bearish [swatch]" shape. Equal-width
       grid columns stretched a colour swatch to the width of a dropdown and
       spread three controls across the pane, which is not what the script asked
       for and not what the member has been trained on. */
    .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; }
    /* The first control carries the row; the rest sit against their own labels. */
    .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-radius: 6px; font: 550 12px var(--font); color: var(--text); background-color: var(--solid); border-color: var(--line-strong); }
    .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-family: var(--mono); }
    .ifield > textarea { min-height: 72px; height: auto; padding-block: 9px; resize: vertical; line-height: 1.4; }
    .ifield > :is(input,select,textarea):focus { outline: none; border-color: var(--gold-border); box-shadow: 0 0 0 2px var(--gold-soft); }
    #indSettingsModal select option { color: var(--text); background: var(--card-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-strong); border-radius: 3px; background: var(--solid); 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 var(--accent-ink); 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: var(--gold); border-color: var(--gold); }
    .if-check input:checked + span::after { opacity: 1; transform: rotate(45deg) scale(1); }
    .if-check input:focus-visible + span { outline: 2px solid var(--focus); 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: 40px; padding: 0 9px; color: var(--text); background: var(--solid); border-color: var(--line-strong); font: 550 11.5px var(--mono); }
    .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-strong); border-radius: 6px; background: var(--solid); color: var(--text); font: 550 11px var(--mono); text-transform: uppercase; }
    .if-color .if-color-hex:focus { outline: none; border-color: var(--gold-border); box-shadow: 0 0 0 2px var(--gold-soft); }
    .if-color .if-color-hex.bad { border-color: var(--down); }
    .if-color input[type="color"] { width: 26px; height: 26px; padding: 2px; border-radius: 6px; border-color: var(--line-strong); background: var(--solid); 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; }
    /* On an inline row a colour is a swatch and nothing else — the hex field and
       transparency slider are the standalone-row affordances, and repeating them
       three times across one row is what made ours read as a form rather than a
       row of settings. Both stay reachable: the swatch opens the full picker. */
    .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: var(--gold); }
    .if-color output { color: var(--muted); font: 550 10.5px var(--mono); 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(--bg); }
    .indset-foot > .indset-actions { display: flex; gap: 8px; }
    .indset-foot button { min-width: 84px; height: 38px; }
    .indset-foot .ireset-script, .indset-foot .ireset-rec { min-width: 0; padding-inline: 8px; border-color: transparent; background: transparent; color: var(--muted); }
    .indset-foot .ireset-script:hover, .indset-foot .ireset-rec:hover { color: var(--text); background: var(--surface); }
    .indset-resets { display: flex; align-items: center; gap: 3px; min-width: 0; }
    .indset-resets > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .indset-foot .ireset-rec { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
    .indset-foot .icancel { background: transparent; color: var(--sec); }
    .indset-foot .iapplyall { background: var(--surface); color: var(--text); border-color: var(--line); }
    .imcontext { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .indset-foot .iapply { min-width: 96px; color: var(--accent-ink); border-color: var(--gold); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 7px 20px -10px rgba(37,99,235,.75); }
    .indset-foot .iapply:hover { filter: brightness(1.05); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
    @media (max-width: 640px) {
      #indSettingsModal { align-items: flex-end; padding: 0; }
      .indset-sheet { width: 100%; max-height: none; height: min(92dvh, 780px); border-radius: 18px 18px 0 0; border-bottom: 0; }
      .indset-head { min-height: 60px; padding: 12px 16px; }
      .indset-tabs { gap: 24px; padding: 0 17px; overflow-x: auto; }
      .indset-panel { padding: 16px 17px 26px; }
      .ifield { grid-template-columns: minmax(110px, 1fr) minmax(145px, 1.2fr); gap: 12px; }
      .if-inline { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
      .ifield-session, .ifield-color { grid-template-columns: 1fr; gap: 6px; padding-block: 10px; }
      .ifield-session .if-session, .ifield-color .if-color { width: 100%; }
      .indset-foot { padding: 10px 13px calc(10px + env(safe-area-inset-bottom)); }
      .indset-foot { align-items: stretch; flex-direction: column; gap: 6px; }
      .indset-foot > .ireset-script, .indset-foot > .indset-resets { align-self: flex-start; min-height: 30px; }
      .indset-foot > .indset-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
      .indset-foot button { min-width: 0; padding-inline: 8px; }
      .ind-input-tooltip { max-width: min(280px, calc(100vw - 24px)); }
    }
    /* on-chart indicator legend — a compact TradingView-style control surface directly below OHLC */
    .ind-legend { position: absolute; top: 54px; left: 12px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font: 500 10.5px var(--mono); font-variant-numeric: tabular-nums; }
    .ind-legend .il-collapse { pointer-events: auto; display: flex; align-items: center; gap: 7px; min-height: 25px; padding: 3px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); box-shadow: none; font: 600 10px var(--font); }
    .ind-legend .il-collapse:hover { color: var(--text); border-color: var(--line); background: color-mix(in srgb, var(--card-solid) 78%, transparent); }
    .ind-legend .il-chev { display: inline-block; transform: rotate(0); transition: transform .16s var(--ease); }
    .ind-legend.collapsed .il-chev { transform: rotate(180deg); }
    .ind-legend:not(.collapsed) .il-summary { display: none; }
    .ind-legend .il-load { color: var(--gold); font-size: 9px; }
    .ind-legend .il-collapse.loading::after { content: ''; width: 7px; height: 7px; border: 1.5px solid var(--line-strong); border-top-color: var(--gold); border-radius: 50%; animation: ispin .7s linear infinite; }
    .ind-legend .il-rows { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
    .ind-legend.collapsed .il-rows { display: none; }
    .ind-legend .il { pointer-events: auto; display: flex; align-items: center; gap: 6px; min-height: 25px; background: color-mix(in srgb, var(--card-solid) var(--ind-legend-background-opacity, 84%), transparent); border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); padding: 3px 5px 3px 8px; border-radius: 7px; color: var(--muted); max-width: 520px; white-space: nowrap; backdrop-filter: blur(10px); box-shadow: 0 3px 12px rgba(0,0,0,.08); }
    .ind-legend.on-light .il { background: color-mix(in srgb, #fff var(--ind-legend-background-opacity, 84%), transparent); border-color: rgba(19,23,34,.13); color: #50535c; box-shadow: 0 3px 14px rgba(19,23,34,.08); }
    .ind-legend.no-background .il { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
    .ind-legend.hide-titles .il .ititle, .ind-legend.hide-values .il .vals { display: none; }
    .ind-legend.on-light .il .ititle { color: #20232b; }
    .ind-legend.on-light .il button { color: #626671; }
    .ind-legend .il:hover { border-color: var(--line-strong); }
    .ind-legend .il.off { opacity: .58; }
    .ind-legend .il .ieye { flex: none; padding: 2px 4px; font-size: 10px; }
    .ind-legend .il .irefresh { flex: none; padding: 2px 4px; font-size: 11px; background: transparent; border: none; color: var(--muted); cursor: pointer; }
    .ind-legend .il .irefresh:hover { color: var(--accent-hi); }
    .ind-legend .il .ititle { font-weight: 600; color: var(--sec); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
    .ind-legend .il.off .ititle { color: var(--faint); }
    .ind-legend .il .vals { display: inline-flex; gap: 7px; }
    .ind-legend .il .ichip { flex: none; padding: 1px 6px; font-size: 8.5px; }
    .ind-legend .il .il-loading { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font: 600 8.5px var(--font); }
    .ind-legend .il .il-progress { --il-progress: 2; position: relative; flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--sec); font: 650 6.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
    .ind-legend .il .il-progress svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
    .ind-legend .il .il-progress circle { fill: none; stroke-width: 2.25; }
    .ind-legend .il .il-progress .il-track { stroke: color-mix(in srgb, var(--gold) 18%, var(--line-strong)); }
    .ind-legend .il .il-progress .il-meter { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: var(--il-progress) 100; transition: stroke-dasharray .22s var(--ease); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gold) 35%, transparent)); }
    .ind-legend .il .il-progress > span { position: relative; z-index: 1; letter-spacing: -.04em; }
    .ind-legend .il .il-loading.estimated .il-meter { opacity: .78; stroke-dasharray: var(--il-progress) 100; }
    .ind-legend .il .il-loading.estimated .il-progress > span { color: var(--muted); font-size: 6px; }
    .ind-legend.on-light .il .il-progress { color: #30333b; }
    .ind-legend .il .ictl { display: inline-flex; align-items: center; gap: 1px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .16s var(--ease), opacity .16s var(--ease); }
    .ind-legend .il:hover .ictl, .ind-legend .il:focus-within .ictl { max-width: 132px; opacity: 1; }
    .ind-legend .il button { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; display: inline-flex; align-items: center; }
    .ind-legend .il button:hover { color: var(--text); background: var(--surface-hi); }
    .ind-legend .il .icode { font: 700 9.5px var(--mono); }
    .ind-legend .il .ix:hover { color: var(--down); background: rgba(242, 54, 69, .14); }
    @keyframes ispin { to { transform: rotate(360deg); } }

    /* indicator popouts (browser / pine editor / settings) — shared modal shell, keyed off .open */
    .imodal { position: fixed; inset: 0; z-index: 340; display: none; align-items: center; justify-content: center; padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); background: var(--modal-overlay); backdrop-filter: blur(6px); }
    /* while any dialog is up, hide the floating chart controls so they don't peek through the backdrop half-lit */
    body:has(.imodal.open, .passmodal.open, #breakdown.open) :is(#transport, .floatpill, #propChip) { visibility: hidden !important; pointer-events: none; }
    .imodal.open { display: flex; }
    /* Themed confirm. Deliberately narrow and quiet: it interrupts, so it says
       one thing and offers exactly two ways out. */
    .asksheet { width: min(420px, 100%); }
    .askbody { padding: 22px 22px 4px; }
    .asktitle { margin: 0 0 8px; font: 650 15px var(--font); color: var(--text); }
    .askcopy { margin: 0; font: 400 12.5px/1.55 var(--font); color: var(--muted); }
    .askfoot { display: flex; justify-content: flex-end; gap: var(--s2); padding: 18px 22px 20px; }
    .askbtn { height: 32px; padding: 0 14px; font: 600 12.5px var(--font); border-radius: var(--r-xs); cursor: pointer;
      color: var(--sec); background: var(--surface); border: 1px solid var(--line); }
    .askbtn:hover { color: var(--text); border-color: var(--line-strong); }
    .askbtn-go { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
    .askbtn-go:hover { filter: brightness(1.06); }
    .askbtn-go.danger { color: #fff; background: var(--down); border-color: var(--down); }
    .askbtn:focus-visible { outline: 1.5px solid rgba(255, 255, 255, .5); outline-offset: 1px; }
    .imsheet { width: min(560px, 100%); max-height: 84vh; max-height: 84dvh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 24px 64px rgba(0, 0, 0, .6); overflow: hidden; }
    .imsheet-wide { width: min(780px, 100%); }
    /* ── Place Order modal: grouped Side/Type → Size/Entry → toggles → actions; refined switches ── */
    .ordm-sheet { width: min(460px, 94vw); }
    #orderModal .imbody { padding: 4px 18px 18px; }
    .ordm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
    .ordm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .ordm-field > label { font: 600 10px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
    .ordm-field input[type="number"], .ordm-field input[type="text"] { height: 34px; width: 100%; padding: 0 10px; font: 600 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-sm); }
    .ordm-field input:focus { outline: none; border-color: var(--line-strong); background: var(--surface); }
    #omEntryField.off { visibility: hidden; }
    .seg { display: flex; height: 34px; background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
    .seg button { flex: 1; min-width: 0; border: none; background: transparent; color: var(--muted); font: 600 12px var(--font); cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease); }
    .seg button + button { border-left: 1px solid var(--line); }
    .seg button:hover:not(.on) { background: var(--surface); color: var(--sec); }
    .seg button.on { background: var(--surface-hi); color: var(--text); }
    .seg-side button.seg-buy.on { background: linear-gradient(180deg, #0aa88d, var(--up)); color: #03231b; }
    .seg-side button.seg-sell.on { background: linear-gradient(180deg, #ff5563, var(--down)); color: #2a0509; }
    #orderModal .sizectl { width: 100%; flex: 1 1 auto; }
    .ordm-div { height: 1px; background: var(--line-strong); margin: 15px 0; }
    .ordm-tgl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
    .ordm-tgl-row > label { font: 500 13px var(--font); color: var(--sec); cursor: pointer; }
    .ordm-hint { margin-left: 5px; font: 500 11px var(--font); color: var(--faint); text-transform: none; letter-spacing: 0; }
    .ordm-sub { max-height: 0; overflow: hidden; transition: max-height .2s var(--ease); }
    .ordm-sub.on { max-height: 62px; }
    .ordm-sub input { height: 34px; width: 100%; padding: 0 10px; font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-sm); }
    .ordm-sub input:focus { outline: none; border-color: var(--line-strong); }
    .ordm-level-grid { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; margin: 3px 0 9px; }
    .ordm-level-field { position: relative; min-width: 0; }
    .ordm-level-field input { padding-right: 44px; }
    .ordm-level-unit { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; font: 600 9px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
    .ordm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 13px 0 2px; }
    .ordm-metric { min-width: 0; padding: 10px 10px 9px; background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-sm); }
    .ordm-metric span { display: block; margin-bottom: 5px; font: 600 9px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
    .ordm-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; font: 650 14px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
    .ordm-metric.reward strong { color: var(--up); }
    .ordm-metric.risk strong { color: var(--down); }
    .ordm-metric.rr strong { color: var(--gold-hi); }
    .ordm-tickmeta { margin: 8px 1px 0; font: 500 10.5px var(--mono); color: var(--faint); text-align: right; }
    .ordm-ber { display: inline-flex; align-items: center; gap: 6px; margin: 3px 0 6px; font: 500 12.5px var(--font); color: var(--muted); }
    .ordm-ber input { width: 58px; height: 30px; text-align: center; margin: 0; }
    /* iOS-style switch */
    .tgl { position: relative; width: 38px; height: 22px; flex: none; }
    .tgl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
    .tgl .track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .15); transition: background .18s var(--ease); }
    .tgl .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #e7edf6; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: transform .18s var(--ease); }
    .tgl input:checked ~ .track { background: var(--up); }
    .tgl input:checked ~ .knob { transform: translateX(16px); }
    .tgl input:focus-visible ~ .track { outline: 2px solid var(--focus); outline-offset: 2px; }
    .ordm-field--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
    .ordm-field--row > label { flex: none; }
    .ordm-field--row input { max-width: 210px; }
    .ordm-error { margin-top: 12px; padding: 8px 10px; font: 500 11.5px var(--font); color: var(--down); background: var(--down-soft); border: 1px solid var(--down-border); border-radius: var(--r-xs); }
    .ordm-actions { display: flex; gap: 8px; margin-top: 16px; }
    .ordm-btn { height: 38px; font: 600 12.5px var(--font); border-radius: var(--r-sm); cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
    .ordm-btn.ghost { flex: 0 0 auto; padding: 0 16px; color: var(--muted); background: transparent; border: 1px solid var(--line); }
    .ordm-btn.ghost:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface); }
    .ordm-btn.primary { flex: 1; background: var(--surface-hi); color: var(--text); border: 1px solid var(--line-strong); }
    .ordm-btn.primary:hover { background: rgba(255, 255, 255, .12); }
    #omSaveJournal { flex: 1.4; color: var(--sec); background: var(--surface); border: 1px solid var(--line); }
    #omSaveJournal:hover { color: var(--text); background: var(--surface-hi); }
    .imhead { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
    .imhead input { flex: 1; min-width: 0; }
    .imtitle { flex: 1; font: 600 14px var(--font); color: var(--text); }
    .imx { flex: none; padding: 5px 9px; font-size: 13px; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 6px; }
    .imx:hover { color: var(--text); background: var(--surface-hi); }
    .impine { flex: none; padding: 6px 11px; font: 600 11px var(--mono); color: var(--sec); }
    .impine:hover { color: var(--text); border-color: var(--line-strong); }
    .imbuild { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: 700 11px var(--font); letter-spacing: .01em; color: var(--up); background: rgba(8, 153, 129, .1); border: 1px solid rgba(8, 153, 129, .4); border-radius: var(--r-sm); cursor: pointer; text-decoration: none; white-space: nowrap; }
    .imbuild:hover { background: rgba(8, 153, 129, .17); color: #4fd1b5; }
    .imbuild svg { width: 13px; height: 13px; }
    /* ── prop optimizer rows ── */
    #propOptList { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
    .porow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
    .porow.best { border-color: rgba(8, 153, 129, .5); background: rgba(8, 153, 129, .06); }
    .porow .porank { flex: none; width: 18px; text-align: right; font: 600 11px var(--mono); color: var(--faint); }
    .porow .pomain { flex: 1; min-width: 0; }
    .porow .poname { font: 600 12.5px var(--font); color: var(--text); }
    .porow .powhy { font: 500 11px var(--font); color: var(--muted); margin-top: 2px; }
    .porow .pomet { font: 500 10px var(--mono); color: var(--faint); margin-top: 3px; }
    .porow .postat { flex: none; text-align: right; }
    .porow .ponet { font: 600 13px var(--mono); color: var(--sec); }
    .porow .ponet.up { color: var(--up); }
    .porow .ponet.down { color: var(--down); }
    .porow .posub { font: 500 9.5px var(--font); color: var(--faint); }
    .pochip { flex: none; font: 600 9px var(--font); letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--faint); }
    .pochip.pass { color: var(--up); border-color: rgba(8, 153, 129, .4); }
    .pochip.fail { color: var(--down); border-color: rgba(242, 54, 69, .4); }
    .pochip.mid { color: var(--warn-hi); border-color: var(--warn-border); }
    .porow .poarm { flex: none; padding: 5px 10px; font: 600 11px var(--font); }
    #propOptPricing input { width: 46px; margin: 0 3px; padding: 3px 6px; font: 600 11px var(--mono); text-align: right; }
    /* The shared chart-settings stylesheet owns the dialog; this rail alignment remains Backtester chrome. */
    /* ── the color picker: SV field, slim hue rail, hex-first, quiet RGB disclosure ── */
    #cpick { position: fixed; z-index: 10040; width: 208px; padding: var(--s2); background: color-mix(in srgb, var(--card-solid) 97%, transparent); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-pop); backdrop-filter: blur(18px); }
    #cpick .cp-presets { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: var(--s3); }
    #cpick .cp-preset { width: 100%; aspect-ratio: 1; padding: 0; border-radius: 4px; border: 1px solid var(--line-strong); cursor: pointer; }
    #cpick .cp-preset:hover { transform: scale(1.14); border-color: var(--blue); }
    #cpick .cp-preset:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
    #cpick .cp-sv { position: relative; height: 132px; border-radius: 8px; cursor: crosshair; background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); touch-action: none; }
    #cpick .cp-dot { position: absolute; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .4); transform: translate(-50%, -50%); pointer-events: none; }
    #cpick .cp-hue { position: relative; height: 8px; margin: var(--s3) 0; border-radius: 999px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
    #cpick .cp-thumb { position: absolute; top: 50%; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); transform: translate(-50%, -50%); pointer-events: none; }
    #cpick .cp-sat { display: grid; grid-template-columns: auto 1fr 34px; align-items: center; gap: 8px; margin: 0 0 var(--s3); color: var(--muted); font: 600 10px var(--font); }
    #cpick .cp-satrail { position: relative; height: 8px; border-radius: 999px; cursor: pointer; touch-action: none; }
    #cpick .cp-hue:focus-visible, #cpick .cp-satrail:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
    #cpick .cp-sat output { color: var(--sec); font: 600 10px var(--mono); text-align: right; }
    #cpick .cp-io { display: flex; align-items: center; gap: var(--s1); }
    #cpick .cp-hex { flex: 1; min-width: 0; padding: 5px 8px; font-family: var(--mono); font-size: 11.5px; text-transform: lowercase; }
    #cpick .cp-hex.bad { border-color: var(--down-border); }
    #cpick .cp-eye { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); }
    #cpick .cp-eye:hover { color: var(--text); background: var(--surface-hi); }
    #cpick .cp-rgbt { display: flex; align-items: center; gap: 4px; width: 100%; margin-top: var(--s1); padding: 4px 0; background: none; border: none; font: 600 9.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); cursor: pointer; }
    #cpick .cp-rgbt:hover { color: var(--sec); }
    #cpick .cp-chev { display: inline-block; transition: transform .15s var(--ease); }
    #cpick .cp-rgbt.open .cp-chev { transform: rotate(90deg); }
    #cpick .cp-rgb { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s1); margin-top: 2px; }
    #cpick .cp-rgb label { display: flex; flex-direction: column; gap: 2px; font: 600 8.5px var(--font); letter-spacing: .07em; color: var(--faint); }
    #cpick .cp-rgb input { width: 100%; padding: 4px 5px; font-family: var(--mono); font-size: 11px; text-align: center; }
    .csgrid .cs-row select { width: 150px; }
    .porow .pocost { cursor: pointer; border-bottom: 1px dotted var(--line-strong); }
    .porow .pocost:hover { color: var(--sec); }
    .porow .pocost s { color: var(--faint); margin-left: 3px; }
    .porow .pocost.pinned { color: var(--gold-hi); border-bottom-color: rgba(37, 99, 235, .5); }
    .porow .pocost input { width: 62px; padding: 2px 5px; font: 600 10px var(--mono); }
    .imtabs { display: flex; gap: 6px; padding: 11px 14px 0; }
    .imtabs button { padding: 7px 14px; font-size: 12px; color: var(--muted); }
    .imtabs button.active { color: var(--text); border-color: var(--line-strong); background: var(--surface-hi); }
    .imbody { padding: 6px 14px 14px; overflow-y: auto; }
    .imfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 14px; }
    .imfoot-btns { display: flex; gap: 8px; flex: none; }
    #pineModal textarea { display: block; width: calc(100% - 28px); margin: 13px 14px 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; resize: vertical; min-height: 220px; }

    /* replay start picker (header) — FXReplay-style: latest by default, or jump to a date/time / random */
    .startwrap { position: relative; }
    /* the Go-to popover — macOS-menu feel: airy padding, quiet eyebrows, one clean jump grid, the
       session-time editor a clearly separated section with aligned Start/End columns */
    #goPop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: none; flex-direction: column; gap: var(--s3); width: 324px; padding: var(--s4); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); }
    #goPop.open { display: flex; }
    #goPop .gp-sec { font: 600 var(--fs-eyebrow) var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
    #goPop .gp-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); margin-left: var(--s1); }
    #goPop .gp-div { height: 1px; background: var(--line-strong); margin: var(--s1) calc(-1 * var(--s4)); }
    #goPop .go-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
    #goPop .go-grid button { height: 34px; font: 500 var(--fs-ui) var(--font); }
    #goPop .go-times { display: grid; grid-template-columns: 76px 1fr 1fr; gap: var(--s2) var(--s3); align-items: center; }
    #goPop .go-times .gt-col { font: 600 9px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
    #goPop .go-times label { font-size: var(--fs-label); color: var(--sec); white-space: nowrap; }
    #goPop .go-times input[type="time"] { width: 100%; height: 30px; padding: 0 var(--s2); font: 500 11.5px var(--mono); }
    #goPop .go-times .gt-blank { color: var(--faint); text-align: center; }
    #goPop .gp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s1); }
    #goPop .gp-actions button { height: 32px; }
    #goPop .gp-actions .primary { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue-hi); }
    #sideRail { width: 64px; flex: none; border-left: 1px solid var(--line); background: var(--solid); display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2) 0; z-index: 6; }
    #sideRail [data-tip]::after { left: auto; right: calc(100% + 10px); } /* pills open toward the chart */
    .sec { padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none; }
    .order-buying-power { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0 2px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
    .order-buying-power[hidden] { display: none; }
    .order-buying-power span { min-width: 0; }
    .order-buying-power span:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: 7px; border-top: 1px solid var(--line); }
    .order-buying-power small { display: block; color: var(--faint); font: 600 8.5px var(--font); letter-spacing: .06em; text-transform: uppercase; }
    .order-buying-power b { display: block; margin-top: 2px; color: var(--text); font: 650 11.5px var(--mono); }
    .order-buying-power b.blocked { color: var(--down); }
    .battle-prop-context { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 12px 10px; }
    .battle-prop-context > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
    .battle-prop-context span { display: block; color: var(--faint); font: 650 8.5px var(--font); letter-spacing: .07em; text-transform: uppercase; }
    .battle-prop-context b { display: block; margin-top: 3px; overflow: hidden; color: var(--text); font: 600 10.5px var(--font); text-overflow: ellipsis; white-space: nowrap; }
    .battle-prop-context b.loading { color: var(--warn-hi); }
    .battle-prop-context b.bad { color: var(--down); }
    .ordm-buying-power { margin-top: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--sec); font: 550 11px/1.45 var(--font); }
    .ordm-buying-power[hidden] { display: none; }
    .ordm-buying-power b { color: var(--text); font-family: var(--mono); }
    .ordm-buying-power.blocked { color: var(--down); border-color: var(--down-border); background: var(--down-soft); }
    #sidePanels h3, .ph { margin: 0 0 10px; font: 600 10px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
    .ph { padding: 12px 16px 0; flex: none; }
    /* ── Session Stats · Topstep-X-style dashboard (scoped to #statsDash; tuned for the 302px dock) ── */
    @property --win { syntax: '<number>'; inherits: false; initial-value: 0; }
    #statsDash { display: none; flex-direction: column; gap: 10px; padding: 12px; }
    #statsDash .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px; }
    #statsDash .eyebrow { font: 700 9px var(--font); text-transform: uppercase; letter-spacing: .09em; color: var(--faint); }
    #statsDash .card-hero { position: relative; overflow: hidden; }
    #statsDash .card-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--pnl-accent, var(--up)); }
    #statsDash .hero-num { font: 700 27px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.08; margin: 6px 0 3px; color: var(--pnl-accent, var(--text)); }
    #statsDash .hero-sub { font: 500 11px var(--font); color: var(--muted); }
    #statsDash .dash-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #statsDash .card-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; }
    #statsDash .donut-wrap { position: relative; width: 76px; height: 76px; }
    #statsDash .donut { width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--up) calc(var(--win) * 3.6deg), rgba(242, 54, 69, .18) 0deg); -webkit-mask: radial-gradient(circle at center, transparent 61%, #000 62%); mask: radial-gradient(circle at center, transparent 61%, #000 62%); transition: --win .45s var(--ease); }
    #statsDash .donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    #statsDash .donut-mid b { font: 700 19px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; }
    #statsDash .donut-mid i { font: 700 8px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-top: 2px; }
    #statsDash .card-sub { font: 500 10.5px var(--font); color: var(--muted); }
    #statsDash .card-num { font: 700 23px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 5px 0 9px; color: var(--text); }
    #statsDash .meter { position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); margin-bottom: 8px; }
    #statsDash .meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pct) * 1%); max-width: 100%; border-radius: 3px; background: var(--up); transition: width .4s var(--ease), background .3s; }
    #statsDash .meter-tick { position: absolute; left: 33.33%; top: -2px; bottom: -2px; width: 1px; background: rgba(255, 255, 255, .3); }
    #statsDash .exp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
    #statsDash .exp-r { font: 700 16px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
    #statsDash .ratio { display: flex; gap: 2px; height: 8px; }
    #statsDash .ratio-l { background: linear-gradient(90deg, var(--down), rgba(242, 54, 69, .5)); border-radius: 4px 0 0 4px; min-width: 3px; }
    #statsDash .ratio-w { background: linear-gradient(90deg, rgba(8, 153, 129, .5), var(--up)); border-radius: 0 4px 4px 0; min-width: 3px; }
    #statsDash .ratio-leg { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font: 600 10.5px var(--mono); font-variant-numeric: tabular-nums; }
    #statsDash .ratio-leg em { font: 600 9px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
    #statsDash .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #statsDash .mini-card { padding: 10px 11px; }
    #statsDash .mini-card b { display: block; font: 700 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); margin-top: 5px; }
    #statsDash .exp-r.pos, #statsDash .mini-card b.pos { color: var(--up); }
    #statsDash .exp-r.neg, #statsDash .mini-card b.neg { color: var(--down); }
    #statsDash .card-equity #equity { height: 92px; margin-top: 7px; }
    /* empty state — a friendly, on-brand invitation */
    .stats-empty { display: none; flex-direction: column; align-items: center; text-align: center; padding: 34px 20px; font: 600 13px var(--font); color: var(--sec); }
    .se-badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; font-size: 17px; color: var(--muted); background: var(--surface); border: 1px solid rgba(255, 255, 255, .07); }
    .se-title { font: 700 14px var(--font); color: var(--text); margin-bottom: 4px; }
    .stats-empty span { display: block; margin-top: 8px; font: 500 11px var(--font); color: var(--faint); }
    .stats-empty kbd { font: 600 9.5px var(--mono); color: var(--muted); background: var(--surface); border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; padding: 1px 5px; }
    .sessrow { display: flex; gap: 8px; align-items: center; }
    .sessrow select { flex: 1; min-width: 0; }
    .sessrow button[hidden] { display: none; } /* "Make active" only exists for an archived session (§8.2) */
    /* the on-chart position chip: live P&L stays visible while the panels are closed; click opens Trade */
    #posChip { position: absolute; top: 10px; right: 12px; z-index: 3; display: none; align-items: center; gap: 8px; font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--chip-scrim); backdrop-filter: blur(4px); cursor: pointer; }
    #posChip.long { color: var(--up); border-color: rgba(8, 153, 129, .45); }
    #posChip.short { color: var(--down); border-color: rgba(242, 54, 69, .45); }
    #posChip.pend { color: var(--blue-hi); border-color: rgba(37, 99, 235, .45); }
    /* the prop chip: status + room-to-kill, always visible while a pack is armed */
    #propChip { position: absolute; top: 10px; right: 78px; z-index: 3; display: none; align-items: center; gap: 7px; font: 600 11px var(--mono); font-variant-numeric: tabular-nums; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--chip-scrim); backdrop-filter: blur(4px); cursor: pointer; color: var(--sec); }
    #propChip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
    #propChip.warn .dot { background: var(--warn); } #propChip.danger .dot { background: var(--down); }
    #propChip.failed { color: var(--down); border-color: rgba(242, 54, 69, .45); }
    #propChip.passed { color: var(--up); border-color: rgba(8, 153, 129, .45); }
    #posChip.shifted { top: 42px; } /* both chips visible → stack */

    /* ── prop mode section (Trade drawer): pack picker OR the live meter strip ── */
    /* The account rules line — target, drawdown, daily, contracts, entry cost,
       as-of date — is reference material. Most members pick a firm and go, so it
       is folded behind a tiny "i" rather than shown as a wall of interpuncts. */
    .pickrow { display: flex; align-items: center; gap: var(--s2); }
    .pickrow > select { flex: 1 1 auto; min-width: 0; }
    .meta-i {
      flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
      font: 700 11px var(--font); font-style: italic; line-height: 1;
      color: var(--faint); background: transparent; border: 1px solid var(--line); border-radius: 50%;
      cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
    }
    .meta-i:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface); }
    .meta-i[aria-expanded="true"] { color: var(--text); border-color: var(--line-strong); background: var(--surface-hi); }
    .meta-i:focus-visible { outline: 1.5px solid rgba(255, 255, 255, .4); outline-offset: 1px; }
    #propSec .packmeta { font-size: 11px; color: var(--muted); margin: 6px 0 10px; line-height: 1.5; }
    #propSec .packmeta[hidden] { display: none; }
    #propSec .packmeta a { color: var(--muted); }
    /* account status reads as an INDICATOR, not a tab: a labeled row with a live status dot + a plain-text phase */
    .ps-eyebrow { font: 600 9px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
    .prop-status-line { display: flex; align-items: center; gap: 8px; }
    .propStatus { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font: 700 10.5px var(--font); letter-spacing: .04em; background: var(--surface); color: var(--sec); border: 1px solid var(--line-strong); cursor: default; }
    .propStatus .ps-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex: none; }
    .propStatus.failed { background: rgba(242, 54, 69, .14); color: var(--down); border-color: rgba(242, 54, 69, .4); }
    .propStatus.failed .ps-dot { background: var(--down); }
    .propStatus.passed { background: rgba(8, 153, 129, .14); color: var(--up); border-color: rgba(8, 153, 129, .4); }
    .propStatus.day-locked { background: var(--warn-soft); color: var(--warn-hi); border-color: var(--warn-border); }
    .propStatus.day-locked .ps-dot { background: var(--warn-hi); }
    /* account health — the drawdown room is the hero; its number + track color-shift continuously
       green→amber→red by real proximity to the breach line. Daily room mirrors it, quieter. */
    .ph-health { margin-top: 13px; }
    .ph-health--sm { margin-top: 13px; }
    .ph-eyebrow { font: 700 10.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } /* item 3: legibility — key metric labels were 9px */
    .ph-hero { font: 660 28px var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; color: var(--health, var(--up)); margin: 4px 0 8px; transition: color .25s var(--ease); }
    .ph-line { display: flex; align-items: baseline; justify-content: space-between; }
    .ph-mid { font: 660 19px var(--font); font-variant-numeric: tabular-nums; color: var(--health, var(--up)); transition: color .25s var(--ease); }
    .ph-track { position: relative; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .11); overflow: hidden; margin-top: 5px; }
    .ph-fill { height: 100%; width: 0; border-radius: 999px; background: var(--health, var(--up)); transition: width .18s var(--ease), background-color .25s var(--ease); }
    .ph-breach { position: absolute; inset: 0 auto 0 0; width: 2px; background: rgba(242, 54, 69, .55); z-index: 1; } /* the breach line sits at empty */
    .ph-sub { margin-top: 6px; font: 500 11.5px var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
    .ph-prog { margin-top: 15px; }
    .ph-prog b { font: 660 15px var(--font); font-variant-numeric: tabular-nums; color: var(--text); }
    .ph-track--pos .ph-fill { background: var(--up); }
    .ph-gates { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
    .ph-gate { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font); color: var(--sec); }
    .ph-gate label { flex: 1; }
    .ph-gate b { font: 600 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
    .ph-gate .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
    .ph-gate.ok .dot { background: var(--up); }
    .ph-gate.bad .dot { background: var(--down); }
    /* met, but only because of the rule's tolerance — passing on the margin is not the same as clear of it */
    .ph-gate.near .dot { background: var(--gold-hi); }

    /* ── P&L calendar ────────────────────────────────────────────────────────────────────────────────
       Built for a 302px rail, not for a dashboard. Topstep's reference prints "$0.00 / 0 trades" in every
       untraded cell and hides the week summary inside the Saturday column; at this width both would be
       unreadable. So: quiet days carry only their date, the week summary gets its own rail, and money is
       compacted (+1.5k). Colour is the ONLY thing competing for attention, and only where money moved. */
    /* #propCal is a direct child of .panel, not of a .sec — so it never inherited the responsive
       horizontal padding every sibling has, and sat flush against both panel edges. It carries its
       own now, tracking .sec's values at each width bucket so the two stay visually aligned. */
        /* The partner-server picker. Built in JS (see buildSharePicker) so the HTML shell stays inside
       its gzip budget; only the styling lives here, where CSS is already paid for. */

.pcal { margin-top: 14px; padding: 13px 16px 0; border-top: 1px solid var(--line); }
    .pcal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
    .pcal-total { font: 700 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); margin-top: 2px; }
    .pcal-total.pos { color: var(--up); } .pcal-total.neg { color: var(--down); }
    .pcal-nav { display: flex; align-items: center; gap: 2px; flex: none; }
    .pcal-step, .pcal-today { background: transparent; border: 1px solid transparent; color: var(--sec); border-radius: 7px; cursor: pointer; font: 600 11px var(--font); transition: color .12s var(--ease), background .12s var(--ease); }
    .pcal-step { width: 22px; height: 22px; font-size: 15px; line-height: 1; padding: 0; }
    .pcal-today { height: 22px; padding: 0 8px; margin-left: 3px; }
    .pcal-step:hover, .pcal-today:hover { color: var(--text); background: var(--surface); }
    .pcal-step:disabled { color: var(--faint); cursor: default; background: transparent; }
    .pcal-month { font: 600 11.5px var(--mono); color: var(--text); min-width: 58px; text-align: center; }
    /* 7 day columns + the week rail */
    /* SEVEN columns at the default 302px rail, and the week rail is deliberately dropped there.
       Eight columns left ~19px of text width per cell against a ~33px label — the cells were
       narrower than their own contents, which is what read as "squished". `data-w` is stamped only
       when the panel is RESIZED, so the attribute-free state has to be the one that fits; the rail
       and the larger type return below, once there is room to honour them. */
    .pcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
    .pcal-week, .pcal-hd.rail { display: none; }
    .pcal-hd { font: 600 9.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 4px; }
    .pcal-hd.rail { color: var(--faint); }
    /* Center the [day / P&L / count] stack so it never crowds the top or side edges of a stretched cell. */
    .pcal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 42px; border-radius: 7px; padding: 6px 2px 7px; text-align: center; background: var(--surface); }
    .pcal-day.out { background: transparent; }
    .pcal-day.out .pcal-dnum { color: var(--faint); }
    .pcal-dnum { font: 600 10px var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.1; }
    .pcal-day.traded .pcal-dnum { color: var(--sec); }
    .pcal-pnl { font: 700 9.5px var(--mono); font-variant-numeric: tabular-nums; line-height: 1.2; }
    .pcal-n { font: 500 8.5px var(--font); color: var(--muted); line-height: 1.1; }
    /* Sign tint stays low-alpha: the number carries the message, the fill only groups the eye. */
    /* ── the width buckets the calendar never had ───────────────────────────────────────────────
       Every other component in the panel responds to `data-w` (.ph-hero, #propStats, .field, .sec);
       the calendar did not, so widening the drawer changed nothing about it. Now each step buys
       something real: the week rail comes back, the money grows, and the cells breathe. */
    #sidePanels[data-w="md"] .pcal { padding-left: 20px; padding-right: 20px; }
    #sidePanels[data-w="lg"] .pcal { padding-left: 26px; padding-right: 26px; }
    #sidePanels[data-w="md"] .pcal-grid,
    #sidePanels[data-w="lg"] .pcal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.05fr); gap: 3px; }
    #sidePanels[data-w="md"] .pcal-week,
    #sidePanels[data-w="lg"] .pcal-week { display: flex; }
    #sidePanels[data-w="md"] .pcal-hd.rail,
    #sidePanels[data-w="lg"] .pcal-hd.rail { display: block; }
    #sidePanels[data-w="md"] .pcal-day { padding: 6px 5px 7px; }
    #sidePanels[data-w="lg"] .pcal-day { padding: 7px 7px 8px; min-height: 48px; }
    #sidePanels[data-w="md"] .pcal-pnl { font-size: 11px; }
    #sidePanels[data-w="lg"] .pcal-pnl { font-size: 12.5px; }
    #sidePanels[data-w="lg"] .pcal-dnum { font-size: 11px; }

    .pcal-day.pos { background: var(--up-soft); }
    .pcal-day.neg { background: var(--down-soft); }
    .pcal-day.pos .pcal-pnl { color: var(--up); } .pcal-day.neg .pcal-pnl { color: var(--down); }
    .pcal-day.today { outline: 1.5px solid var(--blue); outline-offset: -1.5px; }
    .pcal-week { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 42px; border-radius: 7px; padding: 6px 6px 7px; text-align: center; background: transparent; border: 1px dashed var(--line); }
    .pcal-wk { font: 600 8.5px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); line-height: 1.1; }
    .pcal-wv { font: 700 11px var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.2; }
    .pcal-week.pos .pcal-wv { color: var(--up); } .pcal-week.neg .pcal-wv { color: var(--down); }
    .pcal-foot { margin-top: 8px; font: 500 10.5px var(--font); color: var(--muted); }
    .pcal-empty { margin-top: 8px; font: 500 11px var(--font); color: var(--muted); line-height: 1.5; }
    #propGateMsg { display: none; margin-top: 8px; font-size: 11px; color: var(--gold-hi); }
    /* phase pill: where the account is in its lifecycle (Evaluation → Funded) */
    /* the phase is CONTEXT, not a second tab — plain text after the status pill */
    .propPhase { display: inline-block; font: 600 11px var(--font); color: var(--muted); }
    /* the armed pack's name gets its own line under the badges — it can never collide, at any width */
    #propHud #propPackName { font-size: 10.5px; line-height: 1.45; margin-top: 5px; overflow-wrap: anywhere; }
    /* phase intent line — says in words what this account is working toward (eval target vs funded payout) */
    #propPhaseNote { margin-top: 4px; font: 500 11px var(--font); color: var(--muted); }
    #propPhaseNote.funded { color: var(--up); }
    .propPhase.funded { color: var(--up); }
    /* ── active-account card (item 2): firm · size · phase + live status, unmistakable at a glance ── */
    .acct-card { position: relative; background: var(--acct-card-bg); border: 1px solid var(--gold-border); border-left: 3px solid var(--gold); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px; } /* item 3: prop mode is unmistakable — amber challenge accent */
    .acct-eyebrow { font: 800 9px var(--font); letter-spacing: .11em; text-transform: uppercase; color: #e8b45a; margin-bottom: 8px; }
    .acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .acct-firm { display: block; font: 700 18px var(--font); letter-spacing: -.015em; color: var(--text); line-height: 1.12; overflow-wrap: anywhere; }
    .acct-sub { margin-top: 3px; font: 500 11.5px var(--font); color: var(--muted); display: flex; align-items: center; gap: 6px; }
    .acct-sub .mono { font-variant-numeric: tabular-nums; color: var(--sec); }
    .acct-sub .acct-dot { color: var(--faint); }
    .acct-prog { margin-top: 8px; font-size: 10.5px; line-height: 1.4; color: var(--faint); overflow-wrap: anywhere; }
    .acct-prog:empty { display: none; }
    .acct-switch { width: 100%; margin-top: 11px; padding: 7px 0; font: 600 11.5px var(--font); color: var(--sec); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer; transition: color .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease); }
    .acct-switch:hover { color: var(--text); background: var(--surface-hi); border-color: var(--line-strong); }
    /* ── eval-pass celebration ── */
    .passmodal { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; padding: 24px; background: var(--modal-overlay); backdrop-filter: blur(8px); }
    .passmodal.open { display: flex; }
    .pass-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
    .pass-card { position: relative; z-index: 2; width: min(384px, 92vw); padding: 34px 30px 24px; text-align: center; color: var(--text);
      background: radial-gradient(130% 88% at 50% -6%, var(--up-soft), transparent 62%), var(--card-solid);
      border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-modal), 0 0 0 1px var(--up-soft);
      animation: passIn .5s cubic-bezier(.2, .9, .25, 1.08) both; }
    @keyframes passIn { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }
    .pass-seal { position: relative; width: 60px; height: 60px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--success-text); background: var(--up-soft); border: 1px solid var(--up-border); }
    .pass-seal::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--up-border); animation: passRing 1.5s ease-out .15s both; }
    @keyframes passRing { from { transform: scale(.68); opacity: .85; } to { transform: scale(1.55); opacity: 0; } }
    .pass-eyebrow { font: 700 10.5px var(--font); letter-spacing: .17em; text-transform: uppercase; color: var(--success-text); }
    .pass-firm { margin-top: 9px; font: 640 21px var(--font); letter-spacing: -.015em; color: var(--text); }
    .pass-stat { margin-top: 4px; font: 500 12.5px var(--font); font-variant-numeric: tabular-nums; color: var(--sec); }
    .pass-next { margin: 18px 0 20px; padding: 12px 14px; border-radius: 12px; background: var(--solid); border: 1px solid var(--line-strong); font: 500 12.5px var(--font); color: var(--sec); line-height: 1.5; }
    .pass-next b { color: var(--text); font-weight: 640; }
    .pass-cta { width: 100%; height: 40px; font: 640 13px var(--font); background: var(--up); color: var(--success-ink); border: none; border-radius: 10px; cursor: pointer; transition: filter .15s var(--ease); }
    .pass-cta:hover { filter: brightness(1.06); }
    /* Secondary to the CTA on purpose: sharing is optional and never the thing to do next. */
    .pass-share-wrap { position:relative;width:100%; }
    .pass-share-wrap[hidden] { display:none; }
    .pass-share { width: 100%; height: 36px; margin-top: 8px; font: 600 12.5px var(--font); background: transparent; color: var(--sec); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
    .pass-share:hover:not(:disabled) { color: var(--text); border-color: var(--sec); }
    .pass-share:disabled { opacity: .55; cursor: default; }
    .lobby-share-menu.pass-share-menu { top:auto;right:0;bottom:calc(100% + 8px);width:100%;text-align:left;transform-origin:bottom center; }
    .pass-share-note { margin-top: 6px; min-height: 14px; font: 500 11px var(--font); color: var(--muted); }
    .pass-share-note.bad { color: var(--down); }
    @media (prefers-reduced-motion: reduce) { .pass-card, .pass-seal::after { animation: none; } }
    /* the running economics ledger — always visible in prop mode, the honest tally the breakdown expands on */
    /* item 5: equity / threshold as labeled stat boxes (mirrors the ledger), replacing the run-on meta line */
    #propStats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 10px 0 8px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
    #propStats div { background: var(--solid); padding: 9px 11px; }
    #propStats span { display: block; font: 600 10px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
    #propStats b { font: 600 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
    #propMeta .pm-fail { color: var(--down); }
    #propLedger { display: none; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 10px 0 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
    #propLedger div { background: var(--solid); padding: 9px 11px; }
    #propLedger span { display: block; font: 600 10px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
    #propLedger b { font: 600 14px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
    #propLedger b.pos { color: var(--up); } #propLedger b.neg { color: var(--down); }
    /* ── end-of-run breakdown modal: the full economic + trade post-mortem ── */
    #breakdown, #help { position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; padding: 24px; background: var(--modal-overlay); backdrop-filter: blur(5px); }
    #breakdown .sheet, #help .sheet { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 24px 64px rgba(0, 0, 0, .6); padding: 24px; }
    #breakdown .bk-eyebrow, #help .bk-eyebrow { font: 700 10px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
    #breakdown h2, #help h2 { margin: 4px 0 2px; font: 600 20px var(--font); letter-spacing: -.01em; }
    #breakdown .bk-sub { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
    #breakdown .bk-net { text-align: center; padding: 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); margin-bottom: 18px; }
    #breakdown .bk-net span { display: block; font: 700 10px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
    #breakdown .bk-net b { font: 600 34px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    #breakdown .bk-net b.pos { color: var(--up); } #breakdown .bk-net b.neg { color: var(--down); }
    #breakdown .bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 18px; }
    #breakdown .bk-grid div { background: var(--solid); padding: 11px 13px; }
    #breakdown .bk-grid span { display: block; font: 600 9.5px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
    #breakdown .bk-grid b { font: 600 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
    #breakdown .bk-grid b.pos { color: var(--up); } #breakdown .bk-grid b.neg { color: var(--down); }
    #breakdown .bk-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
    #help .bk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    /* Flex, not a 2-up grid: the blow report shows THREE actions and the
       ordinary breakdown two, and a hidden button has to collapse rather than
       leave a hole in a fixed track. */
    #breakdown .bk-btns { display: flex; gap: 8px; }
    #breakdown .bk-btns button { flex: 1; min-width: 0; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
    #breakdown .bk-btns button[hidden] { display: none; }
    #breakdown .bk-btns .bk-danger { background: var(--down); border-color: var(--down); color: #fff; font-weight: 700; }
    #breakdown .bk-btns .bk-danger:hover { filter: brightness(1.06); }
    /* keyboard-help overlay body */
    #help h2 { margin-bottom: 14px; }
    #help .help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; margin-bottom: 16px; }
    #help .help-grid > div { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: var(--sec); }
    #help .help-grid span { color: var(--muted); }
    #help .help-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
    @media (max-width: 560px) { #help .help-grid { grid-template-columns: 1fr; } }
    #propSec .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    #propSec select { width: 100%; }
    /* the custom-rules builder: compact stacked fields */
    #propBuilder .field input, #propBuilder .field select { width: 140px; }
    #propBuilder .field { margin: 6px 0; }
    #pbDeleteBtn { color: var(--down); }

    .badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font: 700 11.5px var(--font); letter-spacing: .04em; }
    .badge.flat { background: var(--surface); color: var(--faint); border: 1px solid var(--line); }
    .badge.long { background: var(--up); color: #03231b; box-shadow: 0 2px 10px rgba(8, 153, 129, .35); }
    .badge.short { background: var(--down); color: #2a0509; box-shadow: 0 2px 10px rgba(242, 54, 69, .35); }
    .kv { display: flex; justify-content: space-between; margin: 5px 0; font-size: 12px; color: var(--sec); }
    .kv .muted { color: var(--faint); }
    #pnl { font: 700 24px/1.2 var(--mono); font-variant-numeric: tabular-nums; margin: 4px 0 8px; letter-spacing: -.01em; }
    .pos { color: var(--up); } .neg { color: var(--down); }

    .field { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; flex-wrap: wrap; row-gap: 4px; } /* a control that can't fit drops below its label — never out of the panel */
    /* order-ticket extras (structural) */
    .field { gap: var(--s2); }
    .field > label { white-space: nowrap; flex: none; }
    .field .berow { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; white-space: nowrap; flex: none; }
    .field .berow span { white-space: nowrap; }
    .field .berow input[type="number"] { width: 44px; }
    /* item 4: the order ticket's controls fill a consistent, generous width so fields aren't skewed left */
    #orderSec .field { gap: var(--s3); }
    #orderSec .field > label { flex: 1 1 auto; }
    #orderSec .field > input, #orderSec .field > select { flex: 0 0 148px; width: 148px; text-align: left; }
    #orderSec .field .berow { flex: 0 0 auto; }
    /* ── size stepper (item 4): a tactile contract control — −/+ , preset chips, direct entry ── */
    .field-size { margin-bottom: 4px; }
    .sizectl { display: flex; align-items: stretch; flex: 0 0 148px; width: 148px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--solid); }
    .sizectl:focus-within { border-color: var(--line-strong); }
    .sizectl input { flex: 1 1 auto; width: auto !important; min-width: 0; height: 100%; text-align: center; border: none !important; background: transparent; border-radius: 0; padding: 0; font: 600 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); -moz-appearance: textfield; appearance: textfield; }
    .sizectl input::-webkit-outer-spin-button, .sizectl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .sz-btn { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; font: 400 19px var(--font); line-height: 1; color: var(--sec); background: var(--surface); border: none; cursor: pointer; user-select: none; transition: background .12s var(--ease), color .12s var(--ease); }
    .sz-btn:hover { background: var(--surface-hi); color: var(--text); }
    .sz-btn:active { background: var(--blue-soft); color: var(--blue-hi); }
    .size-presets { display: flex; gap: 6px; margin: 0 0 10px; }
    .size-presets button { flex: 1; padding: 5px 0; font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer; transition: color .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease); }
    .size-presets button:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-hi); }
    .size-presets button.on { color: var(--blue-hi); background: var(--blue-soft); border-color: var(--blue-border); }
    /* item 3: journal notes scratchpad */
    #sessionNotes { width: 100%; min-height: 88px; resize: vertical; padding: 9px 11px; font: 500 12px var(--font); line-height: 1.55; color: var(--text); background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-sm); }
    #sessionNotes::placeholder { color: var(--faint); }
    #sessionNotes:focus { outline: none; border-color: var(--line-strong); background: var(--surface); }
    .ordfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
    .ordfoot label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
    .field label { color: var(--muted); font-size: 12px; font-weight: 500; }
    .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
    .btns .full { grid-column: 1 / -1; }
    button.buy { background: linear-gradient(180deg, #0aa88d, var(--up)); border-color: transparent; color: #03231b; font-weight: 700; box-shadow: 0 4px 14px rgba(8, 153, 129, .28), inset 0 1px 0 rgba(255, 255, 255, .22); }
    button.buy kbd { color: rgba(3, 35, 27, .75); background: rgba(255, 255, 255, .25); border-color: transparent; }
    button.sell { background: linear-gradient(180deg, #ff5563, var(--down)); border-color: transparent; color: #2a0509; font-weight: 700; box-shadow: 0 4px 14px rgba(242, 54, 69, .28), inset 0 1px 0 rgba(255, 255, 255, .22); }
    button.sell kbd { color: rgba(42, 5, 9, .75); background: rgba(255, 255, 255, .25); border-color: transparent; }
    button.buy:hover:not(:disabled), button.sell:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }

    /* ── controls ── */
    #controls { display: none; } /* retired — the transport pill owns replay control now */
    #chart { position: relative; }
    /* The time of day, always on, at the bottom of the chart (#455): the transport pill can be dragged away or
       minimised, and hovering a candle was the only other way to read the clock. Sits above the time axis. */
    #opSize.op-size-working { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
    #replayClock { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 7; padding: 3px 10px; font: 600 12px var(--mono); letter-spacing: .02em; color: var(--sec); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); pointer-events: none; white-space: nowrap; }
    #transport { position: absolute; top: var(--s3); left: 50%; transform: translateX(-50%); z-index: 8; padding: var(--s1); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); }
    #transportCore { display: flex; align-items: center; gap: var(--s0); }
    #transportStatus { position: absolute; top: 50%; left: calc(100% + var(--s2)); transform: translateY(-50%); display: flex; align-items: center; min-height: 32px; padding: var(--s1); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); }
    #playBtn { inline-size: 96px; justify-content: center; }
    #transport button { height: 28px; display: inline-flex; align-items: center; padding: 0 var(--s3); font: 600 var(--fs-ui) var(--font); color: var(--sec); background: transparent; border: none; border-radius: var(--r-pill); }
    #transport button:hover:not(:disabled) { background: var(--surface-hi); color: var(--text); }
    #transport select { height: 28px; font: 600 var(--fs-label) var(--font); color: var(--sec); background: transparent; border: none; border-radius: var(--r-pill); padding: 0 20px 0 var(--s2); }
    #transport #transportTime { padding: 0 var(--s3) 0 var(--s3); font: 600 var(--fs-ui) var(--font); font-variant-numeric: tabular-nums; color: var(--text); border-left: 1px solid var(--line); white-space: nowrap; }
    #transport #indCatchup { padding: 0 var(--s2); font: 600 9px var(--font); color: var(--gold-hi); white-space: nowrap; }
    #transport #indCatchup[hidden] { display: none; }
    /* Historical bar time belongs in the replay status line, not in a second floating card. The tiny
       gold pip makes it scannable without competing with the shared Battle clock. */
    #transport .bar-close-status { min-height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 var(--s2); border-left: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
    #transport .bar-close-status[hidden] { display: none; }
    #transport .bar-close-status i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent); }
    #transport .bar-close-status .bar-close-label { font: 600 8.5px var(--font); letter-spacing: .045em; text-transform: uppercase; }
    #transport .bar-close-status b { color: var(--text); font: 650 10px var(--mono); font-variant-numeric: tabular-nums; }
    #selectBarBtn.active { background: var(--blue-soft); color: var(--blue-hi); border-color: var(--blue-border); }
    .focus-replay-btn { min-height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--solid);color:var(--muted);font:620 10px/1 var(--font);cursor:pointer; }
    .focus-replay-btn svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round; }
    .focus-replay-btn:hover,.focus-replay-btn[aria-pressed="true"] { border-color:var(--gold-border);color:var(--gold);background:var(--gold-soft); }
    @media(max-width:760px){.focus-replay-btn span{display:none}.focus-replay-btn{width:36px;justify-content:center;padding:0}}
    /* floating pills — draggable via the grip (or any quiet spot); positions persist per browser */
    .floatpill { position: absolute; z-index: 8; display: flex; align-items: center; gap: var(--s0); padding: var(--s1); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); }
    .floatpill button, #transport .grip, .floatpill .grip { height: 28px; }
    .floatpill button { display: inline-flex; align-items: center; padding: 0 var(--s3); font: 600 var(--fs-ui) var(--font); color: var(--sec); background: transparent; border: none; border-radius: var(--r-pill); }
    .floatpill button:hover:not(:disabled) { background: var(--surface-hi); color: var(--text); }
    #transport .grip, .floatpill .grip { display: inline-flex; align-items: center; padding: 0 var(--s1) 0 var(--s2); font: 600 10px var(--font); letter-spacing: -2px; color: var(--faint); cursor: grab; user-select: none; }
    .dragging-pill, .dragging-pill .grip { cursor: grabbing !important; }
    /* Favorite drawings belong on the canvas: a compact draggable palette that persists like the other
       chart pills. The rail remains the place to pin/unpin; this is the fast execution surface. */
    #drawFavBar { top: 92px; left: 12px; gap: 2px; padding: 4px; border-radius: 10px; }
    #drawFavBar[hidden] { display: none; }
    #drawFavBarTools { display: flex; align-items: center; gap: 2px; }
    #drawFavBarTools button { width: 30px; height: 28px; padding: 0; justify-content: center; border: 1px solid transparent; border-radius: 7px; }
    #drawFavBarTools button:hover { border-color: var(--line-strong); }
    #drawFavBarTools button.active { color: var(--gold-hi); background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
    #drawFavBarTools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    /* TradingView-style quote pair: blue Buy + red Sell in the chart's upper-left scan lane. */
    #orderPill { gap: 3px; padding: 4px; border-radius: 9px; }
    #orderPill .op-root { min-width: 28px; height: 21px; display: inline-grid; place-items: center; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line)); border-radius: var(--r-pill); color: var(--gold-hi); background: var(--gold-soft); font: 720 8.5px var(--mono); letter-spacing: .045em; }
    #orderPill .op-side { height: 27px; flex-direction: column; justify-content: center; gap: 0; padding: 0 10px; border-radius: var(--r-xs); }
    #orderPill .op-lbl { font: 700 8px var(--font); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
    #orderPill .op-px { font: 600 9.5px var(--font); font-variant-numeric: tabular-nums; line-height: 1.35; color: inherit; }
    #orderPill .op-buy { background: linear-gradient(180deg, #4b7cff, #2962ff); color: #fff; box-shadow: 0 2px 9px rgba(41, 98, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .22); }
    #orderPill .op-sell { background: linear-gradient(180deg, #ff5563, var(--down)); color: #fff; box-shadow: 0 2px 8px rgba(242, 54, 69, .26), inset 0 1px 0 rgba(255, 255, 255, .2); }
    #orderPill .op-side:hover:not(:disabled) { filter: brightness(1.06); }
    #orderPill #opSize { width: 42px; height: 27px; padding: 0 var(--s1); text-align: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-xs); }
    /* ── on-line order controls (FX-Replay model): the entry line's tag [ × | SL | TP | pnl ] and one
       labeled chip per placed level. True-black chips, hairline seams, tokenized signal colors. ── */
    /* ── the position HUD — one unified entry pill [ id · PnL hero · SL · TP · × ] + prominent SL/TP chips.
       Topstep-X clarity: near-black chrome, strong up/down color language, a subtle pulse as PnL moves. ── */
    .postag, .lvlchip { position: absolute; z-index: 6; display: flex; align-items: stretch; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; box-shadow: var(--shadow-pop); }
    .postag { height: 30px; }
    .lvlchip { height: 26px; }
    .postag > * + *, .lvlchip > * + * { border-left: 1px solid rgba(255, 255, 255, .08); }
    .postag button, .lvlchip button { display: inline-flex; align-items: center; padding: 0 8px; margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--sec); font: 600 11px var(--font); cursor: pointer; }
    .pt-x, .lc-x { font-size: 14px; line-height: 1; padding: 0 8px !important; color: var(--faint); }
    .pt-x:hover, .lc-x:hover { background: rgba(242, 54, 69, .18); color: var(--down); }
    /* merged identity: side glyph + size @ entry — quiet, because the PnL is the hero */
    .pt-id { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; font: 600 11px var(--mono); line-height: 1; color: var(--sec); }
    .pt-side { font-style: normal; font-size: 9px; line-height: 1; }
    .pt-side.long { color: var(--up); } .pt-side.short { color: var(--down); }
    /* the PnL hero: big, bold, sign-colored, with a quiet points sibling + a pulse on each $ change */
    .pt-pnl { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; }
    .pt-pnl .usd { font: 800 17px var(--mono); letter-spacing: -.01em; line-height: 1; color: var(--sec); }
    .pt-pnl .pts { font: 600 9.5px var(--mono); line-height: 1; color: var(--muted); }
    .postag.up .usd { color: var(--up); } .postag.down .usd { color: var(--down); }
    .postag.pend .usd { font: 700 12px var(--mono); color: var(--sec); }
    .postag.pend { border-color: rgba(255, 255, 255, .14); }
    .postag.up { border-color: rgba(8, 153, 129, .45); box-shadow: 0 2px 14px rgba(8, 153, 129, .16); }
    .postag.down { border-color: rgba(242, 54, 69, .45); box-shadow: 0 2px 14px rgba(242, 54, 69, .16); }
    .pt-pnl.bump .usd { animation: pnlpulse .24s var(--ease); }
    @keyframes pnlpulse { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.06); filter: brightness(1.4); } 100% { transform: scale(1); filter: brightness(1); } }
    @media (prefers-reduced-motion: reduce) { .pt-pnl.bump .usd { animation: none; } }
    /* SL/TP pull-tabs on the entry pill */
    .pt-lvl { cursor: ns-resize; letter-spacing: .06em; font-weight: 700; }
    .pt-lvl:hover { background: var(--surface-hi); }
    .pt-sl { color: var(--down); } .pt-tp { color: var(--up); }
    /* placed SL/TP chips: the dollar stake is the headline (item 3) */
    .lvlchip .lc-lbl { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; cursor: ns-resize; }
    .lc-tag { font: 700 8.5px var(--font); line-height: 1; font-style: normal; letter-spacing: .09em; opacity: .85; }
    .lc-usd { font: 800 13px var(--mono); line-height: 1; letter-spacing: -.01em; }
    .lvlchip.sl { color: var(--down); border-color: rgba(242, 54, 69, .5); box-shadow: 0 2px 10px rgba(242, 54, 69, .14); }
    .lvlchip.tp { color: var(--up); border-color: rgba(8, 153, 129, .5); box-shadow: 0 2px 10px rgba(8, 153, 129, .14); }
    /* the order pill's kill switch */
    .op-lvl { min-width:34px;height:30px;padding:0 7px;border:1px solid var(--line);border-radius:8px;background:var(--solid);font:700 10px var(--mono);letter-spacing:.04em;cursor:pointer;touch-action:none; }
    .op-lvl-sl { color:var(--down); }
    .op-lvl-tp { color:var(--up); }
    .op-lvl:active { transform:scale(.96); }
    @media (max-width:760px){ .op-lvl { min-width:40px;height:34px; } }
    #orderPill .op-x { width: 26px; height: 27px; justify-content: center; padding: 0; font-size: 14px; color: var(--faint); border-radius: var(--r-xs); }
    #orderPill .op-x:hover:not(:disabled) { background: rgba(242, 54, 69, .16); color: var(--down); }
    /* quiet Apple-style tooltip — hover-intent via transition delay, no arrow */
    .tip { position: relative; }
    .tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-2px); padding: 5px 10px; border-radius: 6px; background: var(--card-solid); border: 1px solid var(--line-strong); color: var(--text); font: 500 10.5px var(--font); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s var(--ease) .14s, transform .1s var(--ease) .14s; z-index: 90; }
    .tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
    /* the transport's dropdown menu — airy padding, quiet rows, a check on the active choice */
    .ddwrap { position: relative; }
    .dd-pop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 172px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 5px; box-shadow: var(--shadow-pop); display: none; z-index: 30; }
    .dd-pop.open { display: block; }
    /* JS sets an explicit left/top for this one, so drop .dd-pop's centering transform — otherwise it
       shifted the popover left by half its width and clipped the left rows off the viewport edge. */
    .magnet-pop { position: fixed; z-index: 400; min-width: 236px; left: 0; transform: none; }
    .dd-row { white-space: nowrap; }   /* keep "Weak · Snaps near OHLC" on one line (was clipping) */
    .dd-head { padding: 5px 9px 4px; font: 700 9.5px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
    .dd-row, #transport .dd-row { display: flex; align-items: center; gap: 7px; width: 100%; height: auto; padding: 6px 9px; border: none; background: transparent; border-radius: 7px; font: 500 12px var(--font); color: var(--sec); cursor: pointer; }
    .dd-row:hover, #transport .dd-row:hover { background: var(--surface-hi); color: var(--text); }
    .dd-row .dd-check { width: 12px; color: var(--blue-hi); visibility: hidden; }
    .dd-row.on .dd-check { visibility: visible; }
    .dd-row .dd-hint { margin-left: auto; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
    .ddwrap > button::after { content: '▾'; margin-left: 4px; font-size: 8px; color: var(--faint); }
    .dd-pre { font: 700 8px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-right: 5px; }
    #actionPill button { font-weight: 500; }
    /* select-bar mode: the replay split — accent line, future scrim, scissors badge, time pill. All
       composited layers with quick-ease transitions; the fade is a scrim, never per-candle restyling. */
    .sel-line { position: absolute; top: 0; bottom: 27px; left: 0; width: 1px; background: var(--blue-hi); z-index: 6; pointer-events: none; opacity: 0; transition: transform .15s var(--ease), opacity .15s var(--ease); will-change: transform; }
    /* The dim is driven by scaleX from the RIGHT edge, never by `left`.
       Animating `left` on a full-height element forces layout + paint on every
       pointer move, and the 130ms transition restarted from wherever it had got
       to — so it permanently chased a stale target. That is the whole of "the
       select bar is choppy". scaleX is compositor-only, and with no transition
       on the transform the dim tracks the cursor exactly: the pointer IS the
       animation. A solid fill scales without artifacts. */
    .sel-scrim { position: absolute; top: 0; bottom: 27px; left: 0; right: 0; background: var(--scrim); z-index: 5; pointer-events: none; opacity: 0; transform: scaleX(0); transform-origin: right center; will-change: transform, opacity; transition: opacity .14s ease; }
    .sel-badge { position: absolute; top: 0; left: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; z-index: 7; color: var(--blue-hi); background: var(--card-solid); border: 1px solid var(--blue-border); border-radius: 50%; pointer-events: none; opacity: 0; transition: transform .15s var(--ease), opacity .15s var(--ease); will-change: transform; }
    .sel-pill { position: absolute; top: 60px; left: 0; z-index: 7; padding: 5px 12px; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: 600 var(--fs-label) var(--font); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; box-shadow: var(--shadow-pop); pointer-events: none; opacity: 0; transition: transform .15s var(--ease), opacity .15s var(--ease); will-change: transform; }
    #controls #backBtn { padding: 7px 11px; font-size: 11px; }
    #scrub { flex: 1; min-width: 90px; max-width: 380px; height: 4px; accent-color: var(--blue-hi); cursor: pointer; }
    #scrubPos { font-size: 11px; min-width: 92px; white-space: nowrap; }
    .ctltgl.on { border-color: rgba(37, 99, 235, .55); color: var(--blue-hi); background: rgba(37, 99, 235, .12); }
    #helpBtn { padding: 7px 12px; font-weight: 700; }
    /* editable per-trade note cell */
    input.tradenote { width: 100%; min-width: 96px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--sec); font: 400 11.5px var(--font); padding: 2px 5px; }
    input.tradenote::placeholder { color: var(--faint); }
    input.tradenote:hover:not(:disabled) { border-color: var(--line); }
    input.tradenote:focus { border-color: var(--line-strong); background: var(--surface); outline: none; color: var(--text); }
    input.tradenote:disabled { color: var(--muted); }

    /* ── analytics panel internals ── */
    .tablewrap { overflow: auto; flex: 1; min-height: 130px; }
    #equity { height: 110px; flex: none; }
    .bysetupwrap { overflow: auto; flex: none; max-height: 168px; }
    .mini th, .mini td { white-space: nowrap; }
    .mini td:first-child { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
    /* lightweight-charts attribution moves here (on-chart logos disabled) — required by its license */
    .credit { margin-top: auto; flex: none; padding: 6px 14px 8px; font-size: 9.5px; color: var(--faint); border-top: 1px solid var(--line); }
    .credit a { color: var(--muted); text-decoration: none; }
    .credit a:hover { color: var(--sec); }
    table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
    th { position: sticky; top: 0; z-index: 1; background: var(--solid); text-align: right; padding: 7px 10px; color: var(--faint); font: 600 10px var(--font); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
    th:first-child, td:first-child { text-align: left; }
    td { padding: 6px 10px; border-bottom: 1px solid rgba(0, 0, 0, .45); color: var(--sec); }
    td.mono, .mini td.mono { font-variant-numeric: tabular-nums; }
    tbody tr:hover td { background: var(--surface); }
    .mini th, .mini td { padding: 4px 10px; font-size: 10.5px; }
    /* Stats tables — quiet headers, faint LIGHT hairlines (black-on-black was invisible), comfortable rows */
    #statsPanel th { background: var(--solid); border-bottom: 1px solid rgba(255, 255, 255, .08); }
    #statsPanel td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
    #statsPanel .mini td { padding: 6px 10px; }
    #statsPanel tbody tr:last-child td { border-bottom: none; }
    .empty { padding: 18px 16px; color: var(--faint); font-size: 12px; }

    /* ── mobile / narrow screens: chart stays full-width, the side panels overlay it, drawing rail hides ── */
    @media (max-width: 820px) {
      :root { --sec: #c6cbd2; --muted: #9aa1aa; --faint: #83878f; }  /* item 9: lift the gray label tiers for bright screens */
      header { flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
      header .spacer { flex: 1 1 100%; order: 5; height: 0; }
      #symbol, #timeframe { flex: 1 1 auto; min-width: 96px; }
      main { position: relative; }
      #drawRail, #drawFavBar { display: none !important; } /* drawing is a desktop affordance */
      #sidePanels { position: absolute; top: 0; right: 42px; bottom: 0; width: min(86vw, 340px); z-index: 20; border-left: 1px solid var(--line-strong); box-shadow: -10px 0 30px rgba(0, 0, 0, .55); }
      #controls { flex-wrap: wrap; gap: 8px 10px; padding: 9px 12px; }
      #scrub { order: 10; flex: 1 1 100%; max-width: none; }
      #scrubPos { order: 11; }
      /* item 8: larger tap targets (≥44px, Apple HIG) for the timeframe row, header controls, and close icons */
      header select, header > button, .startwrap > button, #tfBar button, #ethRth { height: 44px; }
      #tfBar button { padding: 0 var(--s3); min-width: 40px; }
      .imx, #csClose, .pass-cta, #propOptClose { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
      /* top-of-chart overlays: keep the legend and the room chip in their own lanes so they never collide,
         and stop the transport pill from overflowing the screen (it drops below the info band). */
      .pane-ohlc { max-width: calc(100% - 145px); }  /* reserve the right lane for the room chip (100% = chart width) */
      .pane-ohlc .leg-sym, .pane-ohlc .leg-vals { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      #propChip { top: 8px; right: 74px; max-width: 112px; }
      /* transport stays a single compact row (no wrap): the essentials are back / play / step / interval /
         time. Speed is the one control dropped on mobile so the pill fits without wrapping. */
      #transport { top: 52px; max-width: calc(100% - 12px); padding: 3px 4px; }
      #transportCore { flex-wrap: nowrap; gap: 0; }
      #transportStatus { top: calc(100% + 5px); right: 0; left: auto; transform: none; min-height: 28px; padding: 2px 4px; }
      #transport .ddwrap:has(> #speedBtn) { display: none; }
      #transport #indCatchup { display: none; }
      #transport .bar-close-status { padding: 0 6px; }
      #transport .bar-close-status .bar-close-label { display: none; }
      #transport #transportTime { padding: 0 6px; }
      #transport button { padding: 0 9px; }
      .ind-legend { top: 126px; max-width: calc(100% - 24px); }
      .workspace-chart-grid:not(.is-single) .workspace-pane:not(.is-focused) { display: none; }
      .workspace-chart-grid:not(.is-single) { display: block; }
      .workspace-chart-grid:not(.is-single) .workspace-pane.is-focused { width: 100%; height: 100%; }
      .workspace-mobile-switcher:not([hidden]) { position: absolute; z-index: 12; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; max-width: calc(100% - 110px); padding: 3px; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: color-mix(in srgb,var(--card-solid) 94%,transparent); box-shadow: var(--shadow-pop); backdrop-filter: blur(16px); }
      .workspace-mobile-switcher button { min-width: 64px; min-height: 38px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 6px; padding: 4px 8px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); text-align: left; }
      .workspace-mobile-switcher button.on { color: var(--gold-hi); background: var(--gold-soft); }
      .workspace-mobile-switcher b { grid-row: 1; font: 720 10px var(--font); }
      .workspace-mobile-switcher span { grid-row: 2; font: 600 8.5px var(--mono); color: var(--faint); }
      .workspace-mobile-switcher i { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--surface-hi); font: 700 8px var(--mono); font-style: normal; }
      /* The shared chart-settings gear follows measured chart gutters with an inline bottom offset.
         In a multi-pane mobile workspace that lands inside the pane switcher's tap lane. Lift the
         shared chart-host gear (including its 6px touch halo) above the switcher so both controls keep
         independent 44px-class targets. The override is mobile + multi-pane only; single-chart and
         desktop placement continue to follow the shared measured inset. */
      #chart:has(> .workspace-chart-grid:not(.is-single)) > .chart-settings-gear {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
      }
      .workspace-splitter { display: none; }
      .workspace-layout-menu { width: min(254px,calc(100vw - 16px)); max-height: calc(100dvh - 96px); overflow-y: auto; }
    }
    @media (max-width: 560px) {
      .wordmark, .logo-tile { display: none; }
      #newBtn { padding: 8px 10px; }
      #controls .ctltgl, #csvBtn { flex: 1 1 auto; }
    }
    /* Create-session launcher — one calm decision flow: mode, account, then tape. */
    .sess-sheet { width: min(660px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
    .sess-head { justify-content: space-between; padding: 24px 28px 10px; border-bottom: 0; }
    .sess-title { font: 700 20px var(--font); letter-spacing: -.01em; color: var(--text); }
    .sess-tabs { display: inline-flex; align-self: flex-start; gap: 4px; margin: 10px 28px 0; padding: 4px; border: 1px solid var(--line); border-radius: calc(var(--r-sm) + 2px); background: var(--surface); }
    .sess-tab { position: relative; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted); font: 650 13px var(--font); cursor: pointer; transition: color .12s ease, background .12s ease, box-shadow .12s ease; }
    .sess-tab.on::after { display: none; }
    .sess-tab:hover { color: var(--text); }
    .sess-tab.on { color: var(--text); background: var(--card-solid); box-shadow: 0 2px 8px -6px rgba(45,37,24,.55); }
    .sess-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .sess-scroll { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; padding: 8px 28px 18px; scrollbar-gutter: stable; }
    .sess-lbl { display: block; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
    .sess-scroll > .sess-lbl:first-child { margin-top: 2px; }
    /* Empty unless a seconds session covers fewer markets than the session would otherwise
       carry, so it must collapse rather than leave a gap. */
    .sess-note { font: 400 11px var(--font); color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
    .sess-note:empty { display: none; }
    .sess-in { height: 44px; width: 100%; box-sizing: border-box; padding: 0 13px; font: 500 14.5px var(--font); color: var(--text); background: var(--solid); border: 1px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color .12s ease; }
    .sess-in:focus { outline: none; border-color: var(--focus); background: var(--surface); box-shadow: 0 0 0 3px var(--gold-soft); }
    select.sess-in { cursor: pointer; }
    /* Numerals are platform type (Switzer + tabular), not the retired mono. */
    input.sess-in[type="number"] { font: 600 15px var(--font); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
    .sess-money { position: relative; }
    .sess-cur { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); font: 600 15px var(--font); pointer-events: none; }
    .sess-money .sess-in { padding-left: 28px; }
    .sess-fidelity { margin: 18px 0 2px; padding: 0; border: 0; min-width: 0; }
    .sess-fidelity > .sess-lbl { padding: 0; margin: 0 0 8px; }
    .sess-daterow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .sess-dcol { display: flex; flex-direction: column; min-width: 0; }
    /* One window group — duration plus exact dates, with an optional fresh roll. */
    .sess-rowline { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 22px; }
    .sess-rowline > .sess-rowlabel { padding-top: 12px; }
    .sess-rowbody { min-width: 0; }
    .sess-instrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .sess-inst-chips { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-sm); background: var(--solid); }
    .sess-inst-chips button { min-width: 46px; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--sec); font: 700 13px var(--font); cursor: pointer; transition: background .12s ease, color .12s ease; }
    .sess-inst-chips button:hover { color: var(--text); }
    .sess-inst-chips button.on { background: var(--surface); color: var(--text); }
    .sess-inst-search { width: 120px; padding: 9px 0; border: 0; background: transparent; color: var(--text); font: 500 13.5px var(--font); }
    .sess-inst-search::placeholder { color: var(--muted); }
    .sess-inst-search:focus { outline: none; }
    .sess-div { margin: 26px 0 6px; border: 0; border-top: 1px solid var(--line); }
    .sess-winhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .sess-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-sm); background: var(--solid); }
    .sess-seg button { padding: 8px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--sec); font: 600 13px var(--font); cursor: pointer; transition: background .12s ease, color .12s ease; }
    .sess-seg button:hover { color: var(--text); }
    .sess-seg button.on { background: var(--surface); color: var(--text); }
    .sess-note-inline { color: var(--muted); font: 500 13px var(--font); }
    .sess-daterow { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
    /* Stable-width chips + tabular digits keep dates quiet while the window changes. */
    .sess-daterow .dp-field { min-width: 212px; font-variant-numeric: tabular-nums; }
    .sess-to { color: var(--muted); font: 500 13px var(--font); }
    .sess-random { display: flex; align-items: center; margin-top: 14px; }
    .sess-rand-btn { min-height: 38px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--solid); color: var(--sec); font: 650 12.5px var(--font); cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease; }
    .sess-rand-btn:hover { color: var(--text); border-color: var(--gold-border); background: var(--gold-soft); }
    .sess-rand-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .sess-foot27 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .sess-foot-note { margin: 0; max-width: 52ch; }
    .sess-foot-note b { color: var(--sec); }
    .sess-foot-actions { display: flex; gap: 10px; flex: none; }
    .sess-err { margin-top: 12px; font: 500 12.5px var(--font); color: var(--down); }
    /* A locked feature is not an error state — the upgrade path sits inline with
       the explanation rather than being something to go hunting for. */
    .sess-err-cta { display: inline-block; margin-left: 8px; color: var(--gold-ink); font-weight: 650; text-decoration: underline; }
    .sess-err-cta:hover, .sess-err-cta:focus-visible { color: var(--text); }
    .sess-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 28px 24px; margin-top: 8px; border-top: 1px solid var(--line-strong); }
    .sess-btn { padding: 12px 24px; border-radius: var(--r-sm); font: 700 14px var(--font); cursor: pointer; border: 1px solid transparent; transition: opacity .12s ease, background .12s ease; }
    .sess-btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
    .sess-btn.ghost:hover { background: var(--surface); }
    .sess-btn.primary { background: var(--text); color: var(--bg); }
    .sess-btn.primary:hover { opacity: .9; }
    /* custom date picker (item 5) — replaces the dated native datetime-local widget */
    .dp { position: relative; }
    .dp-field { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; box-sizing: border-box; padding: 0 13px; background: var(--solid); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text); font: 500 14px var(--font); cursor: pointer; text-align: left; transition: border-color .12s ease; }
    .dp-field:hover { border-color: var(--line-strong); }
    .dp-val { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dp-val.empty { color: var(--faint); }
    .dp-cal { width: 15px; height: 15px; flex: none; color: var(--muted); }
    .dp-pop { position: fixed; z-index: 360; width: 292px; padding: 13px; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-modal); }
    .dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .dp-jump { display: flex; align-items: center; gap: 5px; }
    .dp-jump select { width: auto; height: 32px; padding: 0 24px 0 9px; border-color: transparent; border-radius: 8px; background-color: transparent; color: var(--text); font: 650 14px var(--font); cursor: pointer; }
    .dp-jump select:hover, .dp-jump select:focus-visible { border-color: var(--line-strong); background-color: var(--surface); }
    .dp-jump .tpsel-trigger { width: auto; min-width: 75px; height: 32px; padding: 0 8px; border-color: transparent; background: transparent; color: var(--text); font: 650 14px var(--mono); }
    .dp-jump .tpsel-trigger:hover, .dp-jump .tpsel-trigger.tpsel-open { border-color: var(--line-strong); background: var(--surface); }
    .dp-jump .dp-month { min-width: 34px; font: 650 14px var(--font); color: var(--text); }
    .dp-jump .dp-year { min-width: 75px; font-family: var(--mono); }
    .dp-arrow { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--sec); font-size: 18px; line-height: 1; cursor: pointer; }
    .dp-arrow:hover { background: var(--surface); color: var(--text); }
    .dp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
    .dp-week span { text-align: center; font: 600 10.5px var(--mono); color: var(--faint); padding: 4px 0; }
    .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 32px); gap: 2px; }
    .dp-day { height: 32px; display: grid; place-items: center; border: none; background: transparent; color: var(--sec); font: 500 13px var(--mono); border-radius: 8px; cursor: pointer; font-variant-numeric: tabular-nums; }
    .dp-day:hover:not(.dis):not(.empty) { background: var(--surface); color: var(--text); }
    .dp-day.sel { background: var(--text); color: var(--bg); font-weight: 700; }
    .dp-day.dis { color: var(--faint); opacity: .3; cursor: default; }
    .dp-day.empty { visibility: hidden; }
    .dp-timerow { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
    .dp-tl { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
    .dp-time { flex: 1; min-width: 0; height: 36px; box-sizing: border-box; padding: 0 9px; background: var(--solid); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text); font: 600 12.5px var(--mono); }
    .dp-time::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
    @media (max-width: 640px) {
      /* On phones this is a deliberate inset sheet, not a desktop popover awkwardly positioned inside
         another modal. Inline left/top values are retained for desktop and overridden only here. */
      .dp-pop { left: 12px !important; right: 12px; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 14px; border-radius: 18px; overflow-y: auto; overscroll-behavior: contain; }
      .dp-nav { margin-bottom: 8px; }
      .dp-arrow { width: 44px; height: 44px; font-size: 21px; }
      .dp-jump { gap: 4px; }
      .dp-jump select { height: 44px; font-size: 15px; }
      .dp-jump .tpsel-trigger { height: 44px; font-size: 15px; }
      .dp-jump .dp-month { font-size: 15px; }
      .dp-week { margin-bottom: 2px; }
      .dp-week span { padding: 5px 0; }
      .dp-grid { grid-template-rows: repeat(6, 44px); }
      .dp-day { height: 44px; font-size: 14px; border-radius: 10px; }
      .dp-timerow { margin-top: 10px; padding-top: 10px; }
      .dp-time { height: 44px; }
      .sess-head { padding: 18px 18px 10px; }
      .sess-tabs { margin:8px 18px 0; }
      .sess-tab { min-height:46px;padding-inline:12px; }
      .sess-scroll { padding:8px 18px 14px;scrollbar-gutter:auto; }
      .sess-foot { padding:16px 18px calc(18px + env(safe-area-inset-bottom)); }
    }

    /* ── Multiplayer lobbies · Phase 2 ─────────────────────────────────────────────────────────
       Same platform cards, with one market-specific signature: the schedule rail turns a waiting room
       into a precise start → duration → finish instrument instead of a generic social lobby. */
    .home-mode { width:max-content;display:flex;gap:4px;margin:10px 0 16px;padding:4px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--solid) 78%,transparent); }
    .home-mode button { min-height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:600 12px var(--mono);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease); }
    .home-mode button:hover { color:var(--text); }
    .home-mode button.on { color:var(--text);background:var(--solid);box-shadow:0 2px 8px -5px rgba(45,37,24,.35); }
    .home-mode-new { display:inline-flex;margin-left:6px;padding:3px 5px;border-radius:5px;background:var(--gold-soft);color:var(--gold);font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px; }
    .lobby-kicker,.lobby-sec-kicker { display:block;color:var(--gold);font:650 9.5px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase; }
    .lobby-sec-kicker { margin-bottom:5px;color:var(--faint);font-size:8.5px; }
    .lobby-intro { position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 30px;border:1px solid var(--gold-border);border-radius:16px;background:linear-gradient(115deg,var(--card-solid) 0%,color-mix(in srgb,var(--gold-soft) 44%,var(--card-solid)) 100%);box-shadow:0 18px 42px -34px rgba(45,37,24,.38); }
    .lobby-intro::after { content:"";position:absolute;right:8%;top:-76px;width:220px;height:220px;border-radius:50%;border:1px solid var(--gold-border);box-shadow:0 0 0 32px color-mix(in srgb,var(--gold-soft) 25%,transparent),0 0 0 64px color-mix(in srgb,var(--gold-soft) 13%,transparent);pointer-events:none; }
    .lobby-intro > * { position:relative;z-index:1; }
    .lobby-intro h2 { margin:7px 0 5px;color:var(--text);font:700 22px/1.2 var(--font);letter-spacing:-.025em; }
    .lobby-intro p { max-width:570px;margin:0;color:var(--sec);font:500 13px/1.55 var(--font); }
    .lobby-code-form { display:flex;gap:8px;margin-top:10px; }
    .lobby-code-form input { flex:1;min-width:0;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--solid);color:var(--text);font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase; }
    .lobby-code-form button { min-height:38px;padding:0 16px;border:1px solid var(--line-strong);border-radius:10px;background:var(--solid);color:var(--text);font:650 12px var(--font);cursor:pointer; }
    .lobby-code-form button:hover { background:var(--surface-hi); }
    /* The solo sheet's tabs share the lobby pills — inline, not stretched. */
    .sess-tabs.mp-pills { display:inline-flex;width:auto; }
    .sess-tabs.mp-pills button { flex:none; }

    /* ── Prop challenges shop (the reference) ────────────────────────────── */
    /* ── the Eval item shop (mock: stack evals, basket bar derives from terms) ── */
    .es-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .es-eyebrow { display: block; margin-top: 4px; color: var(--gold-ink); font: 650 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
    .es-head h1 { margin: 6px 0 0; color: var(--text); font: 700 24px/1.15 var(--font); letter-spacing: -.02em; }
    .es-sub { margin: 8px 0 0; max-width: 88ch; color: var(--muted); font: 500 14px/1.5 var(--font); }
    .es-controls { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
    .es-search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; padding: 0 14px; height: 44px; border-radius: var(--r-sm); background: var(--solid); color: var(--muted); }
    .es-search svg { width: 16px; height: 16px; flex: none; }
    .es-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 500 14px var(--font); }
    .es-search input:focus { outline: none; }
    .es-search input::placeholder { color: var(--muted); }
    .es-selects { display: flex; }
    .es-selwrap { position: relative; }
    .es-select { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; background: var(--solid); color: var(--text); font: 600 13.5px var(--font); cursor: pointer; }
    .es-selwrap:first-child .es-select { border-radius: var(--r-sm) 0 0 var(--r-sm); }
    .es-selwrap:last-child .es-select { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
    .es-selwrap + .es-selwrap .es-select { border-left: 1px solid var(--line); }
    .es-select svg { width: 13px; height: 13px; color: var(--muted); }
    .es-firmrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
    .es-firms { display: flex; gap: 8px; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; padding: 2px 2px 5px; }
    .es-firmbtn { padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 9px; opacity: .55; transition: opacity .12s ease; }
    .es-firmbtn:hover { opacity: .85; }
    .es-firmbtn.on { opacity: 1; }
    .es-firmall { flex: none; min-width: 42px; height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--solid); color: var(--sec); font: 650 12px var(--font); }
    .es-firmall.on { border-color: var(--gold-border); background: var(--gold-soft); color: var(--gold-hi); }
    .es-firmhint { color: var(--muted); font: 500 13px var(--font); }
    /* A compact, dark instrument tile is the shop's one visual signature. It
       gives third-party marks a controlled home in either application theme,
       instead of letting a white SVG disappear into the light surface. */
    .es-tile { display: inline-grid; place-items: center; overflow: hidden; border: 1px solid var(--firm-mark-border); border-radius: 8px; background: var(--firm-mark-bg); color: var(--firm-mark-ink); font: 800 11px var(--font); letter-spacing: .02em; box-shadow: inset 0 1px 0 var(--firm-mark-inset); }
    .es-tile img { display: block; width: 76%; height: 76%; object-fit: contain; }
    .es-tile > span { display: none; }
    .es-tile.es-tile-fallback img { display: none; }
    .es-tile.es-tile-fallback > span { display: block; }
    .es-tile.xs { width: 20px; height: 20px; font-size: 9px; }
    .es-tile.sm { width: 26px; height: 26px; }
    .es-tile.md { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
    .es-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; color: var(--muted); font: 600 13.5px var(--font); }
    .es-priced { font-weight: 500; }
    .es-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 320px); gap: 14px; margin-top: 12px; padding: 2px 2px 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: thin; }
    .es-card { display: flex; flex-direction: column; min-height: 168px; padding: 18px; border-radius: var(--r-md); background: var(--solid); scroll-snap-align: start; }
    .es-chead { display: flex; align-items: center; gap: 10px; }
    .es-chead b { flex: 1; min-width: 0; color: var(--text); font: 700 15px/1.25 var(--font); letter-spacing: -.01em; }
    .es-phase { display: block; margin-top: 4px; color: var(--gold-ink); font: 650 9px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
    .es-cprice { flex: none; color: var(--text); font: 700 17px var(--font); font-variant-numeric: tabular-nums; }
    .es-clines { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; margin-top: 14px; }
    .es-clines > span { color: var(--muted); font: 500 13px var(--font); }
    .es-clines > b { color: var(--sec); font: 600 13px var(--font); text-align: right; font-variant-numeric: tabular-nums; }
    .es-clines > b.es-red { color: var(--red, #ef4444); }
    .es-casof { margin-top: 12px; color: var(--muted); font: 500 12px var(--font); }
    .es-cfoot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
    .es-add, .es-inbasket { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: 1px solid var(--gold-border); border-radius: var(--r-sm); background: var(--gold-soft); color: var(--gold-hi); font: 650 13px var(--font); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
    .es-add.sole { grid-column: 1 / -1; }
    .es-add:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--success-ink); }
    .es-add:disabled { opacity: 1; cursor: default; background: var(--surface-hi); border-color: var(--line); color: var(--muted); }
    .es-inbasket { width: auto; justify-content: space-between; padding: 0 12px; border-color: var(--line-strong); background: var(--solid); color: var(--sec); }
    .es-inx { color: var(--muted); }
    .es-inbasket:hover .es-inx { color: var(--text); }
    .es-promoline { display: block; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r-sm); background: var(--solid); color: var(--muted); font: 500 13.5px/1.5 var(--font); }
    .es-promoline b { color: var(--text); }
    .es-morerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font: 500 13px var(--font); }
    .es-basket { display: flex; align-items: center; gap: 28px; margin-top: 22px; padding: 16px 18px; border-radius: var(--r-md); background: var(--solid); flex-wrap: wrap; }
    .es-bstat { display: flex; flex-direction: column; gap: 3px; }
    .es-bstat span { color: var(--muted); font: 600 12.5px var(--font); }
    .es-bstat b { color: var(--text); font: 700 20px var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
    .es-bstat b.neg { color: var(--red, #ef4444); }
    .es-bstat small { color: var(--muted); font: 500 12px var(--font); }
    .es-bactions { margin-left: auto; display: flex; gap: 8px; }
    .es-disclaimer { margin: 14px 0 0; color: var(--muted); font: 500 12px/1.5 var(--font); opacity: .8; }
    .ps-head { display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:2px 0 14px; }
    .ps-back { border:0;background:transparent;padding:0 0 10px;color:var(--muted);font:500 13px var(--font);cursor:pointer; }
    .ps-back:hover { color:var(--text); }
    .ps-head h1 { margin:0;font:800 30px/34px var(--font);letter-spacing:-.02em;color:var(--text); }
    .ps-actions { display:flex;align-items:center;gap:10px; }
    .ps-actions .lobby-secondary.on { background:var(--surface-hi);color:var(--text); }
    .ps-sort { min-width:190px; }
    .ps-menu-down { bottom:auto;top:calc(100% + 6px); }
    .ps-rule { height:1px;background:var(--line);margin-bottom:22px; }
    .ps-body { display:flex;gap:34px;align-items:flex-start; }
    .ps-rail { width:220px;flex:none;display:flex;flex-direction:column;gap:22px; }
    .ps-glabel { display:block;color:var(--sec);font:600 13.5px var(--font);margin-bottom:10px; }
    .ps-chips { display:flex;flex-wrap:wrap;gap:8px; }
    .ps-chips button { border:0;background:var(--surface);color:var(--sec);font:550 13px var(--font);border-radius:9px;padding:9px 13px;cursor:pointer; }
    .ps-chips button.on { background:var(--surface-hi);color:var(--text); }
    .ps-pricehead { display:flex;align-items:baseline;justify-content:space-between; }
    .ps-pricehead b { color:var(--text);font:650 13px var(--font);font-variant-numeric:tabular-nums; }
    .ps-price { margin-top:6px; }
    .ps-pricerange { display:block;margin-top:8px;color:var(--faint);font:500 12px var(--font);font-variant-numeric:tabular-nums; }
    .ps-main { min-width:0;flex:1; }
    .ps-countrow { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--sec);font:500 14px var(--font); }
    .ps-countrow b { color:var(--text);font-weight:750; }
    .ps-terms { color:var(--faint);font-size:13px; }
    .ps-thead { display:grid;grid-template-columns:minmax(240px,1.5fr) 90px 150px 90px 70px 96px;gap:14px;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--faint);font:500 13px var(--font); }
    .ps-list { max-height:560px;overflow-y:auto; }
    .ps-list:not(.cards) .ps-row { display:grid;grid-template-columns:minmax(240px,1.5fr) 90px 150px 90px 70px 96px;gap:14px;align-items:center;min-height:64px;padding:8px 12px;border-radius:10px; }
    .ps-row:hover { background:var(--surface); }
    .ps-cell-account { display:flex;align-items:center;gap:12px;min-width:0; }
    .ps-firm { width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--surface-hi);color:var(--sec);font:750 11px var(--font); }
    .ps-names { display:flex;flex-direction:column;gap:2px;min-width:0; }
    .ps-names b { color:var(--text);font:650 14px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .ps-names span { color:var(--muted);font:500 12.5px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .ps-cheapest { flex:none;background:var(--up-soft);color:var(--success-text);font:650 11.5px var(--font);border-radius:8px;padding:6px 10px; }
    .ps-cell { color:var(--sec);font:500 13.5px var(--font);font-variant-numeric:tabular-nums; }
    .ps-price-cell { color:var(--text);font-weight:650; }
    .ps-dd.static { color:var(--up); }
    .ps-replay { min-height:36px;padding:0 18px;justify-self:end; }
    .ps-footrow { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 0;color:var(--faint);font:500 13.5px var(--font); }
    .ps-list.cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;max-height:none;overflow:visible; }
    .ps-list.cards .ps-row { display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--card);border-radius:14px;padding:16px; }
    .ps-list.cards .ps-row:hover { background:var(--card); }
    .ps-list.cards .ps-replay { justify-self:start;align-self:stretch;justify-content:center; }
    .ps-compare-sheet { max-width:min(96vw,1100px); }
    .ps-compare-body { padding:18px 20px 22px;overflow-x:auto; }
    .ps-compare-grid { display:grid;gap:0 14px;align-items:center; }
    .ps-cc { padding:9px 0;color:var(--sec);font:500 13px var(--font);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line); }
    .ps-cc.head { color:var(--text);font-weight:700; }
    .ps-cc.lbl { color:var(--faint); }
    @media (max-width:900px) { .ps-body { flex-direction:column; } .ps-rail { width:100%;flex-direction:row;flex-wrap:wrap; } }

    /* ── Multiplayer home + create sheet (the reference) ─────────────────── */
    .mp-head { display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 18px; }
    .mp-head h1 { font:800 26px/30px var(--font);letter-spacing:-.02em;color:var(--text);margin:0; }
    .mp-head-actions { display:flex;align-items:center;gap:10px; }
    .mp-code { display:inline-flex;align-items:stretch;background:var(--surface);border-radius:10px;overflow:hidden; }
    .mp-code input { width:88px;background:transparent;border:0;color:var(--text);font:500 13px var(--font);padding:0 12px;outline:none; }
    .mp-code input::placeholder { color:var(--muted); }
    .mp-code button { border:0;background:transparent;color:var(--sec);font:600 13px var(--font);padding:0 14px;cursor:pointer;border-left:1px solid var(--line); }
    .mp-code button:hover { color:var(--text); }
    .mp-hero { background:var(--card);border-radius:16px;padding:20px 22px;margin:0 0 26px; }
    .mp-hero-top { display:flex;align-items:center;gap:12px; }
    .mp-live-chip { display:inline-flex;align-items:center;gap:7px;background:var(--up-soft);color:var(--success-text);font:700 11px/1 var(--font);letter-spacing:.08em;border-radius:8px;padding:7px 10px; }
    .mp-live-chip::before { content:'';width:6px;height:6px;border-radius:50%;background:var(--up); }
    .mp-hero-when { color:var(--muted);font:500 13px var(--font); }
    .mp-hero-title { margin:14px 0 0;font:800 22px/26px var(--font);letter-spacing:-.015em;color:var(--text); }
    .mp-hero-meta { margin:6px 0 0;color:var(--muted);font:500 13.5px var(--font); }
    .mp-hero-foot { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap; }
    .mp-hero-who { display:flex;align-items:center;gap:12px;min-width:0; }
    .mp-faces { display:inline-flex;align-items:center; }
    .mp-faces .mp-face,.mp-face.more { width:26px;height:26px;border-radius:50%;margin-right:-7px;border:2px solid var(--card-solid);font:700 10px/22px var(--font);text-align:center;background:var(--surface-hi);color:var(--sec);overflow:hidden; }
    .mp-hero-line { color:var(--sec);font:500 13.5px var(--font);margin-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .mp-hero-line b.pos { color:var(--up); } .mp-hero-line b.neg { color:var(--down); }
    .mp-sec { margin:0 0 30px; }
    .mp-sec-head { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px; }
    .mp-sec-head h2 { font:750 17px/22px var(--font);letter-spacing:-.01em;color:var(--text);margin:0; }
    .mp-side { color:var(--faint);font:500 13px var(--font); }
    .mp-thead { display:grid;grid-template-columns:150px minmax(200px,1fr) 110px 110px 84px;gap:14px;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--faint);font:500 13px var(--font); }
    .mp-thead.history { grid-template-columns:88px minmax(200px,1fr) 130px 90px 90px 110px; }
    .mp-row-item { display:grid;grid-template-columns:150px minmax(200px,1fr) 110px 110px 84px;gap:14px;align-items:center;min-height:58px;padding:6px 12px;border-radius:10px;background:transparent;border:0;text-align:left;width:100%;font:inherit;color:inherit; }
    .mp-row-item.history { grid-template-columns:88px minmax(200px,1fr) 130px 90px 90px 110px;cursor:pointer; }
    .mp-row-item:hover { background:var(--surface); }
    .mp-cell-start { color:var(--sec);font:500 13.5px var(--font); }
    .mp-cell-name { display:flex;flex-direction:column;gap:2px;min-width:0; }
    .mp-cell-name b { color:var(--text);font:650 14px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .mp-cell-name span { color:var(--muted);font:500 12.5px var(--font); }
    .mp-cell { color:var(--sec);font:500 13.5px var(--font); }
    .mp-net.pos { color:var(--up);font-weight:650; } .mp-net.neg { color:var(--down);font-weight:650; }
    .mp-join { min-height:34px;padding:0 16px; }
    .mp-stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;margin:0 0 34px; }
    .mp-stat { display:flex;flex-direction:column; }
    .mp-stat-label { color:var(--muted);font:500 13.5px var(--font); }
    .mp-stat-value { margin-top:10px;font:700 30px/34px var(--font);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums; }
    .mp-stat-value.pos { color:var(--up); } .mp-stat-value.neg { color:var(--down); }
    .mp-stat-track { display:flex;height:4px;border-radius:2px;overflow:hidden;background:var(--surface);margin-top:16px; }
    .mp-stat-track i { display:block;height:100%; } .mp-stat-track i.up { background:rgba(53,199,124,.55); } .mp-stat-track i.down { flex:1;background:rgba(240,84,74,.5); }
    .mp-stat-context { margin-top:12px;color:var(--faint);font:500 13px var(--font); }
    .mp-read { margin:2px 0 8px;max-width:860px;font:500 14.5px/22px var(--font);color:var(--muted); }
    .mp-read b { color:var(--text);font-weight:700; }
    .mp-read-action { border:0;background:transparent;padding:0;color:var(--text);font:700 14.5px var(--font);cursor:pointer; }
    .mp-read-action:hover { text-decoration:underline; }
    .mp-sub { margin:4px 0 0;color:var(--muted);font:500 13px var(--font); }
    .mp-pills { display:inline-flex;background:var(--surface);border-radius:10px;padding:3px;margin:2px 0 16px; }
    .mp-pills button { border:0;background:transparent;color:var(--muted);font:600 13.5px var(--font);border-radius:7px;padding:9px 18px;cursor:pointer; }
    .mp-pills button.on { background:var(--surface-hi);color:var(--text); }
    .mp-grid2 { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px; }
    .mp-grid2 > div { min-width:0; }
    .mp-flabel { display:block;color:var(--sec);font:550 13px var(--font);margin:0 0 7px; }
    .lobby-standard-risk { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:2px 0 16px;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface); }
    .lobby-standard-risk .mp-flabel { margin-bottom:2px;color:var(--text);font-weight:650; }
    .lobby-standard-risk .lobby-field-note { margin:0; }
    .lobby-contract-input { display:flex;align-items:center;gap:8px;flex:none; }
    .lobby-contract-input .sess-in { width:76px;min-height:40px;padding-inline:10px;text-align:center;font:700 14px var(--mono);font-variant-numeric:tabular-nums; }
    .lobby-contract-input span { color:var(--muted);font:600 12px var(--font); }
    .mp-ro { color:var(--sec);pointer-events:none; }
    .mp-h3 { margin:20px 0 12px;font:750 15.5px var(--font);letter-spacing:-.01em;color:var(--text); }
    .mp-random-field { display:flex;align-items:center;min-height:42px;background:var(--surface);border-radius:10px;padding:0 13px;color:var(--muted);font:500 13.5px var(--font);cursor:pointer; }
    .mp-random-field:hover { color:var(--text); }
    .mp-row { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap; }
    .mp-chips { display:flex;gap:8px; }
    .mp-chips button { border:0;background:var(--surface);color:var(--sec);font:550 13px var(--font);border-radius:9px;padding:9px 14px;cursor:pointer; }
    .mp-chips button.on { background:var(--surface-hi);color:var(--text); }
    .mp-quiet { border:0;background:transparent;color:var(--sec);font:600 13.5px var(--font);cursor:pointer;padding:8px 4px; }
    .mp-quiet:hover { color:var(--text); }
    .mp-slider-head { margin-bottom:8px; }
    .mp-slider-head b { color:var(--text);font:700 14px var(--font);font-variant-numeric:tabular-nums; }
    .mp-slider { width:100%;appearance:none;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0,var(--accent) calc(var(--fill,33%) ),var(--surface) calc(var(--fill,33%))); }
    .mp-slider::-webkit-slider-thumb { appearance:none;width:18px;height:18px;border-radius:50%;background:#e7eaee;border:0;cursor:pointer; }
    .mp-slider::-moz-range-thumb { width:18px;height:18px;border-radius:50%;background:#e7eaee;border:0;cursor:pointer; }
    .mp-select-wrap { position:relative; }
    .mp-select { display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;background:var(--surface);border:0;border-radius:10px;padding:0 13px;color:var(--text);font:550 13.5px var(--font);cursor:pointer;text-align:left; }
    .mp-select svg { width:14px;height:14px;color:var(--faint);flex:none; }
    .mp-menu { position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:30;max-height:min(280px,50vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:var(--card-solid);opacity:1;border:1px solid var(--line-strong);border-radius:10px;padding:5px;box-shadow:var(--shadow-pop); }
    .mp-menu button { display:flex;width:100%;border:0;background:transparent;color:var(--sec);font:550 13.5px var(--font);border-radius:7px;padding:10px 11px;cursor:pointer;text-align:left; }
    .mp-menu button:hover { background:var(--surface);color:var(--text); }
    .mp-menu button.on { color:var(--text);font-weight:650; }
    .mp-announce { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px; }
    .mp-announce label[for] { color:var(--text);font:650 13.5px var(--font);display:block;cursor:pointer; }
    .mp-announce small { display:block;color:var(--muted);font:500 12.5px var(--font);margin-top:3px; }
    .mp-switch { position:relative;display:inline-flex;width:40px;height:24px;flex:none;cursor:pointer; }
    .mp-switch input { position:absolute;opacity:0;inset:0;cursor:pointer; }
    .mp-switch span { position:absolute;inset:0;border-radius:12px;background:var(--surface-hi);transition:background .15s var(--ease); }
    .mp-switch span::after { content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#e7eaee;transition:transform .15s var(--ease); }
    .mp-switch input:checked + span { background:var(--accent); }
    .mp-switch input:checked + span::after { transform:translateX(16px); }
    /* The reference sends this sheet's primary back to the accent. */
    .lobby-create-sheet .sess-btn.primary { background:var(--accent);color:#fff; }
    .lobby-create-sheet .sess-btn.primary:hover { opacity:1;filter:brightness(1.06); }
    .mp-foot { align-items:center; }
    .mp-foot .mp-side { margin-right:auto; }

    .lobby-primary,.lobby-secondary,.lobby-danger { min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border-radius:10px;font:650 12.5px var(--font);cursor:pointer;transition:transform .12s var(--ease),filter .15s var(--ease),background .15s var(--ease); }
    .lobby-primary { border:1px solid color-mix(in srgb,var(--gold) 72%,transparent);background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--accent-ink);box-shadow:0 9px 20px -13px rgba(37,99,235,.72); }
    .lobby-primary:hover { filter:brightness(1.025); }
    .lobby-primary:active,.lobby-secondary:active,.lobby-danger:active { transform:scale(.985); }
    .lobby-primary svg,.lobby-secondary svg { width:17px;height:17px; }
    .lobby-secondary { border:1px solid var(--line-strong);background:var(--solid);color:var(--text); }
    .lobby-secondary:hover { background:var(--surface); }
    .lobby-danger { border:1px solid var(--down-border);background:var(--down-soft);color:var(--down); }
    .lobby-danger:hover { background:color-mix(in srgb,var(--down-soft) 72%,var(--surface)); }
    .lobby-primary:disabled,.lobby-secondary:disabled,.lobby-danger:disabled { opacity:.5;cursor:not-allowed;transform:none;filter:none; }
    .lobby-columns { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:24px; }
    #home .lobby-section { min-width:0;margin:0;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--card);box-shadow:0 16px 36px -31px rgba(45,37,24,.35); }
    #home .lobby-section .home-sec-head { margin:0 0 13px; }
    #home .lobby-section .home-sec-head h2 { margin:0;font-size:15px; }
    .lobby-refresh { width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--solid);color:var(--muted);cursor:pointer; }
    .lobby-refresh:hover { color:var(--text);background:var(--surface); }
    .lobby-refresh.loading svg { animation:lobbySpin .75s linear infinite; }
    .lobby-refresh svg { width:16px;height:16px; }
    @keyframes lobbySpin { to { transform:rotate(360deg); } }
    .lobby-list { display:flex;flex-direction:column;gap:8px;min-height:110px; }
    .lobby-list-card { width:100%;display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:14px 15px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--solid) 84%,transparent);color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease),transform .12s var(--ease); }
    .lobby-list-card:hover { border-color:var(--gold-border);background:var(--solid); }
    .lobby-list-card:active { transform:scale(.995); }
    .lobby-card-title { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 13.5px var(--font);letter-spacing:-.01em; }
    .lobby-card-count { color:var(--sec);font:600 11px var(--mono);font-variant-numeric:tabular-nums; }
    .lobby-card-meta { grid-column:1 / -1;display:flex;gap:7px;min-width:0;color:var(--muted);font:500 11px/1.35 var(--font); }
    .lobby-card-meta > span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .lobby-card-meta i { color:var(--faint);font-style:normal; }
    .lobby-card-host { display:inline-flex;align-items:center;gap:6px; }
    .lobby-card-avatar { width:18px;height:18px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font:650 7px var(--mono); }
    .lobby-card-avatar img { width:100%;height:100%;object-fit:cover; }
    .lobby-empty { min-height:110px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px;border:1px dashed var(--line-strong);border-radius:11px;color:var(--muted);font:500 12px/1.45 var(--font); }
    .lobby-empty b { margin-bottom:4px;color:var(--text);font-weight:650; }
    .lobby-empty.error { color:var(--down);border-color:var(--down-border);background:var(--down-soft); }

    .lobby-room { padding-bottom:54px; }
    .lobby-room-nav { min-height:40px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
    .lobby-back { display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 10px 0 6px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 12.5px var(--font);cursor:pointer; }
    .lobby-back:hover { color:var(--text);background:var(--surface); }
    .lobby-back svg { width:19px;height:19px; }
    .lobby-status { display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--solid);color:var(--muted);font:650 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; }
    .lobby-status::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--faint); }
    .lobby-status.waiting::before { background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft); }
    .lobby-status.running::before { background:var(--up);box-shadow:0 0 0 4px var(--up-soft); }
    .lobby-status.cancelled::before,.lobby-status.ended::before,.lobby-status.expired::before { background:var(--down);box-shadow:0 0 0 4px var(--down-soft); }
    .lobby-room-head { display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:23px; }
    .lobby-room-head h1 { margin:7px 0 4px;color:var(--text);font:730 clamp(27px,3vw,38px)/1.08 var(--font);letter-spacing:-.04em; }
    .lobby-room-head p { margin:0;color:var(--muted);font:500 12.5px var(--font); }
    .lobby-room-actions { display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap; }
    .lobby-discord-share { position:relative;flex:none; }
    .lobby-discord-share[hidden] { display:none; }
    .lobby-discord { position:relative; }
    .lobby-discord-chevron { width:14px!important;height:14px!important;margin-left:1px;transition:transform .18s var(--ease); }
    .lobby-discord.open .lobby-discord-chevron { transform:rotate(180deg); }
    .lobby-share-menu { position:absolute;z-index:90;right:0;top:calc(100% + 9px);width:min(350px,calc(100vw - 32px));overflow:hidden;border:1px solid var(--line-strong);border-radius:15px;background:var(--card-solid);box-shadow:0 24px 64px -24px rgba(28,24,18,.34),0 6px 18px -10px rgba(28,24,18,.16);transform-origin:top right;animation:lobby-share-in .16s var(--ease) both; }
    .lobby-share-menu[hidden] { display:none; }
    @keyframes lobby-share-in { from { opacity:0;transform:translateY(-5px) scale(.985); } to { opacity:1;transform:none; } }
    .lobby-share-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:17px 17px 13px;border-bottom:1px solid var(--line);background:linear-gradient(145deg,var(--gold-soft),transparent 64%); }
    .lobby-share-head span { display:block;margin-bottom:5px;color:var(--gold);font:680 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; }
    .lobby-share-head h2 { margin:0;color:var(--text);font:690 16px/1.2 var(--font);letter-spacing:-.025em; }
    .lobby-share-head button { width:28px;height:28px;display:grid;place-items:center;flex:none;border:0;border-radius:8px;background:transparent;color:var(--muted);font:400 21px/1 var(--font);cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease); }
    .lobby-share-head button:hover { background:var(--surface);color:var(--text); }
    .lobby-share-options { max-height:min(330px,52vh);overflow:auto;padding:9px;scrollbar-width:thin; }
    .lobby-share-option { position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;gap:11px;min-height:58px;padding:8px 10px;border:1px solid transparent;border-radius:11px;color:var(--text);cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease),transform .14s var(--ease); }
    .lobby-share-option:hover { background:var(--surface); }
    .lobby-share-option.selected { border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:color-mix(in srgb,var(--gold-soft) 52%,var(--card-solid)); }
    .lobby-share-option:active { transform:scale(.995); }
    .lobby-share-mark { width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--sec);font:720 9px/1 var(--mono);letter-spacing:.02em; }
    .lobby-share-option.primary .lobby-share-mark { border-color:var(--gold-border);background:linear-gradient(145deg,var(--gold-soft),var(--surface));color:var(--gold); }
    .lobby-share-option-copy { min-width:0;display:flex;flex-direction:column;gap:3px; }
    .lobby-share-option-copy strong { overflow:hidden;color:var(--text);font:650 12.5px/1.2 var(--font);text-overflow:ellipsis;white-space:nowrap; }
    .lobby-share-option-copy small { overflow:hidden;color:var(--muted);font:500 10.5px/1.25 var(--font);text-overflow:ellipsis;white-space:nowrap; }
    .lobby-share-option input { appearance:none;width:20px;height:20px;margin:0;border:1px solid var(--line-strong);border-radius:6px;background:var(--card-solid);cursor:pointer;transition:border-color .14s var(--ease),background .14s var(--ease),box-shadow .14s var(--ease); }
    .lobby-share-option input::after { content:"";display:block;width:8px;height:4px;margin:5px 0 0 5px;border:solid var(--gold-ink);border-width:0 0 2px 2px;opacity:0;transform:rotate(-45deg) scale(.7);transition:opacity .12s var(--ease),transform .12s var(--ease); }
    .lobby-share-option input:checked { border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft); }
    .lobby-share-option input:checked::after { opacity:1;transform:rotate(-45deg) scale(1); }
    .lobby-share-option input:focus-visible,.lobby-share-head button:focus-visible,.lobby-share-foot button:focus-visible { outline:2px solid var(--focus);outline-offset:2px; }
    .lobby-share-section-label { margin:7px 10px 4px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font:660 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; }
    .lobby-share-status { min-height:46px;display:flex;align-items:center;gap:9px;padding:8px 10px;color:var(--muted);font:500 10.5px/1.4 var(--font); }
    .lobby-share-status.loading span { width:13px;height:13px;flex:none;border:1.5px solid var(--line-strong);border-top-color:var(--gold);border-radius:50%;animation:lobby-share-spin .7s linear infinite; }
    @keyframes lobby-share-spin { to { transform:rotate(360deg); } }
    .lobby-share-foot { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-top:1px solid var(--line);background:var(--surface); }
    .lobby-share-foot > span { color:var(--muted);font:560 10.5px/1.2 var(--font); }
    .lobby-share-foot button { min-height:36px;padding:0 14px;border:1px solid var(--gold-border);border-radius:9px;background:var(--gold);color:var(--gold-ink);font:680 11.5px/1 var(--font);cursor:pointer;box-shadow:0 7px 18px -12px color-mix(in srgb,var(--gold) 78%,transparent);transition:filter .14s var(--ease),transform .14s var(--ease),opacity .14s var(--ease); }
    .lobby-share-foot button:hover:not(:disabled) { filter:brightness(1.04);transform:translateY(-1px); }
    .lobby-share-foot button:disabled { cursor:not-allowed;opacity:.5;box-shadow:none; }
    .lobby-room-actions[hidden],#lobbyRoomDetails[hidden] { display:none; }
    .lobby-arrival-state { display:flex;align-items:flex-start;gap:13px;margin:0 0 18px;padding:14px 16px;border:1px solid var(--gold-border);border-radius:12px;background:var(--gold-soft); }
    .lobby-arrival-state[hidden] { display:none; }
    .lobby-arrival-state.error { border-color:var(--down-border);background:var(--down-soft); }
    .lobby-arrival-state.complete { border-color:var(--line-strong);background:var(--solid); }
    .lobby-arrival-icon { width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--card-solid);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-border); }
    .lobby-arrival-state.error .lobby-arrival-icon { color:var(--down);box-shadow:inset 0 0 0 1px var(--down-border); }
    .lobby-arrival-state.complete .lobby-arrival-icon { color:var(--muted);box-shadow:inset 0 0 0 1px var(--line); }
    .lobby-arrival-icon svg { width:18px;height:18px; }
    .lobby-arrival-state h2 { margin:1px 0 4px;color:var(--text);font:670 13px/1.25 var(--font);letter-spacing:-.01em; }
    .lobby-arrival-state p { margin:0;color:var(--sec);font:500 11.5px/1.5 var(--font); }
    .lobby-clock-card { position:relative;overflow:hidden;padding:25px 27px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 18px 42px -34px rgba(45,37,24,.38); }
    .lobby-clock-card::before { content:"";position:absolute;inset:0;background:radial-gradient(500px 150px at 18% 0%,var(--gold-soft),transparent 72%);pointer-events:none; }
    .lobby-clock-main { position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:13px; }
    .lobby-clock-main > span { color:var(--muted);font:600 12px var(--font); }
    .lobby-clock-main strong { color:var(--text);font:700 clamp(30px,4vw,48px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.045em; }
    .lobby-clock-main small { grid-column:2;margin-top:7px;color:var(--muted);font:500 11px var(--font); }
    .lobby-clock-line { position:relative;display:flex;align-items:center;margin:26px 5px 14px; }
    .lobby-clock-track { flex:1;height:2px;background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 24%,var(--line-strong))); }
    .lobby-clock-dot { position:relative;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--solid);border:2px solid var(--gold);box-shadow:0 0 0 4px var(--gold-soft); }
    .lobby-clock-dot.finish { border-color:var(--line-strong);box-shadow:none; }
    .lobby-clock-meta { display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px; }
    .lobby-clock-meta > span { display:flex;flex-direction:column;gap:5px; }
    .lobby-clock-meta > span:nth-child(2) { text-align:center; }
    .lobby-clock-meta > span:last-child { text-align:right; }
    .lobby-clock-meta small { color:var(--faint);font:600 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase; }
    .lobby-clock-meta b { color:var(--sec);font:600 12px var(--font); }
    .lobby-room-grid { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;margin-top:18px; }
    .lobby-panel { padding:21px;border:1px solid var(--line);border-radius:15px;background:var(--card);box-shadow:0 16px 38px -33px rgba(45,37,24,.32); }
    .lobby-panel-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px; }
    .lobby-panel-head h2 { margin:0;color:var(--text);font:680 15px var(--font);letter-spacing:-.015em; }
    .lobby-setup-grid { display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--line); }
    .lobby-setup-grid > div { min-width:0;display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--solid); }
    .lobby-setup-grid span { color:var(--faint);font:600 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase; }
    .lobby-setup-grid b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sec);font:620 12.5px var(--font); }
    .lobby-integrity { display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 13px;border-radius:10px;background:var(--gold-soft); }
    .lobby-integrity > span { width:8px;height:8px;flex:none;margin-top:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold-soft) 70%,transparent); }
    .lobby-integrity p { margin:0;color:var(--sec);font:500 11px/1.5 var(--font); }
    .lobby-briefing { margin-top:14px;padding:14px;border:1px solid var(--gold-border);border-radius:12px;background:linear-gradient(135deg,var(--gold-soft),color-mix(in srgb,var(--solid) 92%,transparent));animation:lobbyBriefIn .35s var(--ease) both; }
    .lobby-briefing[hidden] { display:none; }
    .lobby-briefing-head { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px; }
    .lobby-briefing-head span { color:var(--gold);font:700 8px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; }
    .lobby-briefing-head b { color:var(--text);font:660 12px/1.2 var(--font); }
    .lobby-briefing-contract { display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--line); }
    .lobby-briefing-contract span { min-width:0;display:flex;flex-direction:column;gap:5px;padding:9px;background:var(--solid); }
    .lobby-briefing-contract small { color:var(--faint);font:650 7.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase; }
    .lobby-briefing-contract b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sec);font:600 10px/1.2 var(--font); }
    .lobby-briefing-actions { display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px; }
    .lobby-briefing-actions button { min-height:36px;border:1px solid var(--line-strong);border-radius:9px;background:var(--solid);color:var(--sec);font:620 10px/1 var(--font);cursor:pointer; }
    .lobby-briefing-actions button:hover { border-color:var(--gold-border);color:var(--text); }
    .lobby-briefing > p { margin:9px 0 0;color:var(--faint);font:500 9.5px/1.4 var(--font); }
    @keyframes lobbyBriefIn { from { opacity:0;transform:translateY(5px); } }
    .lobby-roster-count { color:var(--muted);font:600 10.5px var(--mono);font-variant-numeric:tabular-nums; }
    .lobby-roster { display:flex;flex-direction:column;gap:7px;max-height:258px;overflow:auto; }
    .lobby-member { min-height:44px;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--surface) 65%,transparent); }
    .lobby-member-avatar { width:31px;height:31px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:var(--solid);color:var(--muted);font:650 10px var(--mono); }
    .lobby-member-avatar img { width:100%;height:100%;object-fit:cover; }
    .lobby-member-name { min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sec);font:600 12px var(--font); }
    .lobby-member-role { color:var(--gold);font:650 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase; }
    .lobby-room-message { min-height:18px;margin-top:13px;color:var(--muted);font:500 11.5px var(--font);text-align:right; }
    .lobby-room-message.error { color:var(--down); }

    .lobby-create-sheet { width:min(700px,94vw);max-height:92vh;display:flex;flex-direction:column; }
    .lobby-create-head { align-items:flex-start;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid var(--line); }
    .lobby-create-head > div { display:flex;flex-direction:column;gap:7px; }
    .lobby-create-scroll { flex:1 1 auto;overflow-y:auto;padding:4px 28px 8px;scrollbar-gutter:stable; }
    .lobby-create-scroll > .sess-lbl:first-child { margin-top:18px; }
    .lobby-fieldset { min-width:0;margin:23px 0 0;padding:0;border:0; }
    .lobby-fieldset legend { width:100%;margin:0 0 10px;padding:0;color:var(--muted);font:650 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase; }
    .lobby-choice-grid { display:grid;gap:8px; }
    .lobby-choice-grid.schedule { grid-template-columns:repeat(5,1fr); }
    .lobby-choice-grid.duration { grid-template-columns:repeat(4,1fr); }
    .lobby-choice-grid button { min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:10px 11px;border:1px solid var(--line-strong);border-radius:10px;background:var(--solid);color:var(--sec);cursor:pointer;text-align:left;transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease); }
    .lobby-choice-grid.duration button { min-height:44px;align-items:center;padding:0;font:650 12.5px var(--font); }
    .lobby-choice-grid button:hover { border-color:var(--gold-border);color:var(--text); }
    .lobby-choice-grid button.on { border-color:var(--gold-border);background:var(--gold-soft);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-border) 34%,transparent); }
    .lobby-choice-grid button:disabled { cursor:not-allowed;opacity:.58;box-shadow:none; }
    .lobby-choice-grid button b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 12px var(--font); }
    .lobby-choice-grid button span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint);font:500 9.5px var(--font); }
    .lobby-field-legend { display:flex;align-items:baseline;justify-content:space-between;gap:12px; }
    .lobby-field-legend span { color:var(--muted);font:650 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase; }
    .lobby-field-legend small { color:var(--gold-ink);font:650 9px var(--mono);letter-spacing:.055em;text-transform:uppercase; }
    .lobby-time-choices button,.lobby-span-choices button { position:relative;min-height:66px;align-items:flex-start;padding:11px 12px;overflow:hidden;transform:translateY(0);transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease); }
    .lobby-time-choices button:hover,.lobby-span-choices button:hover { transform:translateY(-1px); }
    .lobby-time-choices button b,.lobby-span-choices button b { color:inherit;font:700 13px/1.1 var(--mono);letter-spacing:-.015em; }
    .lobby-time-choices button span,.lobby-span-choices button span { color:var(--faint);font:500 9.5px/1.2 var(--font); }
    .lobby-prop-mode { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 76%,transparent); }
    .lobby-prop-mode button { min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease); }
    .lobby-prop-mode button:hover { color:var(--text); }
    .lobby-prop-mode button.on { border-color:var(--line);background:var(--solid);color:var(--text);box-shadow:var(--shadow-pop); }
    .lobby-prop-mode b { font:660 12.5px/1.2 var(--font); }
    .lobby-prop-mode span { color:var(--faint);font:500 9.5px/1.3 var(--font); }
    .lobby-prop-catalog { display:grid;gap:14px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 72%,transparent); }
    .lobby-prop-catalog[hidden] { display:none; }
    .lobby-prop-step { display:block;margin-bottom:7px;color:var(--faint);font:650 8px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; }
    .lobby-prop-chips { display:flex;flex-wrap:wrap;gap:6px; }
    .lobby-prop-chips button { min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--solid);color:var(--muted);font:600 10.5px/1 var(--font);cursor:pointer; }
    .lobby-prop-chips button:hover,.lobby-prop-chips button.on { border-color:var(--gold-border);background:var(--gold-soft);color:var(--text); }
    .lobby-prop-accounts { display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:7px; }
    .lobby-prop-account { min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:56px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--solid);color:var(--sec);text-align:left;cursor:pointer; }
    .lobby-prop-account:hover,.lobby-prop-account.on { border-color:var(--gold-border);background:var(--gold-soft);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-border) 30%,transparent); }
    .lobby-prop-account b { font:700 13px/1 var(--mono); }
    .lobby-prop-account small { color:var(--faint);font:500 9px/1.25 var(--font); }
    .lobby-prop-summary { display:flex;flex-wrap:wrap;gap:5px 12px;padding-top:11px;border-top:1px solid var(--line);color:var(--muted);font:500 9.5px/1.4 var(--font); }
    .lobby-prop-summary strong { width:100%;color:var(--sec);font:630 11px/1.3 var(--font); }
    .lobby-prop-summary em { color:var(--gold);font-style:normal; }
    .lobby-range-mode { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;padding:4px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 76%,transparent); }
    .lobby-range-mode button { min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease); }
    .lobby-range-mode button:hover { color:var(--text); }
    .lobby-range-mode button.on { border-color:var(--line);background:var(--solid);color:var(--text);box-shadow:var(--shadow-pop); }
    .lobby-range-mode button b { font:650 12px/1.2 var(--font); }
    .lobby-range-mode button span { color:var(--faint);font:500 9.5px/1.3 var(--font); }
    #lobbyRandomRange[hidden],.lobby-exact-range[hidden] { display:none; }
    .lobby-exact-range { padding:13px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--surface) 72%,transparent); }
    .lobby-exact-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
    .lobby-exact-grid > div { min-width:0; }
    .lobby-exact-label { display:block;margin:0 0 7px;color:var(--muted);font:600 9.5px var(--font);letter-spacing:.04em;text-transform:uppercase; }
    .lobby-exact-range .lobby-field-note { margin-bottom:0; }
    .lobby-custom-time { margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface); }
    .lobby-custom-time label { display:block;margin-bottom:7px;color:var(--muted);font:600 10px var(--font); }
    .lobby-field-note { margin:8px 0 0;color:var(--faint);font:500 10.5px/1.45 var(--font); }
    .lobby-create-sheet .sess-foot { padding-inline:28px; }

    :is(.home-mode button,.lobby-primary,.lobby-secondary,.lobby-danger,.lobby-list-card,.lobby-refresh,.lobby-back,.lobby-choice-grid button):focus-visible { outline:2px solid var(--focus);outline-offset:2px; }
    @media (prefers-reduced-motion:reduce) {
      .lobby-refresh.loading svg { animation:none; }
      .lobby-time-choices button,.lobby-span-choices button { transition-duration:.01ms;transform:none; }
      .lobby-share-menu { animation:none; }
      .lobby-share-status.loading span { animation-duration:1.4s; }
      .lobby-briefing { animation:none; }
    }
    @media (max-width:900px) {
      .lobby-columns,.lobby-room-grid { grid-template-columns:1fr; }
      .lobby-choice-grid.schedule { grid-template-columns:repeat(3,1fr); }
    }
    @media (max-width:640px) {
      .home-mode { width:100%;box-sizing:border-box; }
      .home-mode button { flex:1;padding-inline:8px; }
      .lobby-intro { align-items:flex-start;flex-direction:column;padding:22px; }
      .lobby-intro::after { right:-70px;top:-80px; }
      .lobby-intro .lobby-primary { width:100%; }
      .lobby-room-head { align-items:flex-start;flex-direction:column; }
      .lobby-room-actions { width:100%;justify-content:flex-start; }
      .lobby-discord-share { flex:1 0 100%; }
      .lobby-discord-share > .lobby-discord { width:100%;justify-content:center; }
      .lobby-share-menu { left:0;right:auto;width:min(360px,calc(100vw - 36px));transform-origin:top left; }
      .lobby-room-actions > button { flex:1; }
      .lobby-clock-card { padding:21px 18px 18px; }
      .lobby-clock-main { grid-template-columns:1fr;row-gap:6px; }
      .lobby-clock-main small { grid-column:1; }
      .lobby-clock-meta { gap:9px; }
      .lobby-clock-meta b { font-size:10.5px; }
      .lobby-panel { padding:17px; }
      .lobby-setup-grid { grid-template-columns:1fr; }
      .lobby-briefing-contract,.lobby-briefing-actions { grid-template-columns:1fr; }
      .lobby-create-sheet { width:100%;height:min(94vh,850px);max-height:none;margin-top:auto;border-radius:20px 20px 0 0; }
      .lobby-create-head { padding:20px 18px 15px; }
      .lobby-create-scroll { padding-inline:18px;scrollbar-gutter:auto; }
      .lobby-choice-grid.schedule { grid-template-columns:1fr 1fr; }
      .lobby-choice-grid.duration { grid-template-columns:1fr 1fr; }
      .lobby-range-mode,.lobby-exact-grid,.lobby-prop-mode { grid-template-columns:1fr; }
      .lobby-create-sheet .sess-foot { padding-inline:18px; }
      .lobby-standard-risk { align-items:flex-start; }
    }

    /* First-paint guard: the static chart DOM exists before membership and deep-link routing resolve.
       Keep it behind one quiet platform loading state until boot deliberately chooses gate, launcher,
       or a real session; this prevents the chart from flashing during dashboard → Backtester hops. */
    /* The reference composition, near enough exactly: a jet field, the product mark centred and
       modest, a thin rounded progress bar under it, one line of quiet status text, and otherwise
       nothing. The card is gone — negative space IS the design, and a bordered box in the middle of
       black was the "unpolished" part. */
    #bootScreen { position:fixed;inset:0 0 0 var(--tp-shell-w);z-index:310;display:none;align-items:center;justify-content:center;padding:24px;background:radial-gradient(860px 420px at 50% 10%,rgba(37,99,235,.12),transparent 68%),var(--bg); }
    body.is-booting #bootScreen { display:flex; }
    body.is-booting > header,body.is-booting > #banner,body.is-booting > main,body.is-booting > #home,body.is-booting > #gate { visibility:hidden;pointer-events:none; }
    .bt-boot-card { width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center; }
    .bt-boot-mark { display:block; }
    /* the TP1 marks are now tightly cropped (the old files carried a 3x transparent
       canvas) — 44px of ink here is exactly what 132px of padded canvas showed */
    .bt-boot-mark img { display:none;width:44px;height:auto;object-fit:contain; }
    html[data-theme="dark"] .bt-boot-mark .for-dark { display:block; }
    html:not([data-theme="dark"]) .bt-boot-mark .for-light { display:block; }
    .bt-boot-copy { min-width:0;display:flex;flex-direction:column;gap:2px;order:3; }
    .bt-boot-copy strong { color:var(--muted);font:500 11.5px var(--font);letter-spacing:.01em; }
    .bt-boot-copy small { color:var(--faint);font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase; }
    .bt-boot-progress { order:2;width:min(220px,70%);height:3px;overflow:hidden;border-radius:99px;background:var(--surface-hi); }
    .bt-boot-progress span { display:block;width:42%;height:100%;border-radius:inherit;background:var(--text);animation:btBootSlide 1.1s ease-in-out infinite; }
    #bootScreen[data-phase="recoverable_error"] .bt-boot-progress span { width:100%;animation:none;background:var(--down); }
    #bootScreen[data-phase="ready"] .bt-boot-progress span { width:100%;animation:none; }
    @keyframes btBootSlide { 0%{transform:translateX(-120%)} 100%{transform:translateX(340%)} }
    @media (max-width:760px) { #bootScreen { inset:60px 0 0;padding:18px; } }
    @media (prefers-reduced-motion:reduce) { .bt-boot-progress span { animation:none;width:68%; } }
    /* "Backtest this" quick-start (Lab handoff) — minimal: the indicator is loaded, just pick a date */
    .bq-sheet { width: min(440px, 94vw); }
    .bq-title { font: 700 18px var(--font); letter-spacing: -.01em; color: var(--text); }
    .bq-body { padding: 16px 18px 4px; }
    .bq-ind { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--solid); }
    .bq-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(8, 153, 129, .12); color: var(--up); }
    .bq-ic svg { width: 16px; height: 16px; }
    .bq-name { font: 600 14.5px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bq-lbl { display: block; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 8px; }
    .bq-note { margin-top: 16px; font: 500 12.5px var(--font); line-height: 1.5; color: var(--sec); }
    .bq-note b { color: var(--text); font-weight: 600; }
    .bq-note .bq-mono { font-family: var(--mono); }
    .bq-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px; margin-top: 8px; border-top: 1px solid var(--line-strong); }
    .bq-btn { padding: 11px 20px; border-radius: var(--r-sm); font: 700 13.5px var(--font); cursor: pointer; border: 1px solid transparent; transition: opacity .12s ease, background .12s ease; }
    .bq-btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
    .bq-btn.ghost:hover { background: var(--surface); }
    .bq-btn.primary { background: var(--up); border-color: var(--up); color: #04140f; }
    .bq-btn.primary:hover { opacity: .92; }

    /* ── Home hub (Stages 2–4): the landing where sessions live; boots here, the chart mounts on entry ── */
    #home { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; overflow-y: auto; background: radial-gradient(900px 500px at 18% -8%, rgba(37, 99, 235, .09), transparent 64%), var(--bg); }
    body.at-home #home { display: flex; }
    /* The shared ambient field (packages/viewer/src/app/ambient.ts), the same one behind the Lab's
       launch deck — one platform, one back screen. Sticky rather than fixed: #home is the scroll
       container AND is inset by the platform sidebar, so a fixed canvas would bleed under the rail.
       The negative margin keeps it out of the flow so the hub still starts at the top. */
    #home > #homeAmbient { position: sticky; top: 0; z-index: 0; width: 100%; height: 100vh;
      margin-bottom: -100vh; flex: none; pointer-events: none; }
    /* Ryan's platform rule: the field lives in the top third — near-invisible by mid-screen. */
    #home > #homeAmbient { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 26vh, rgba(0,0,0,.22) 48vh, transparent 68vh); mask-image: linear-gradient(180deg, #000 0, #000 26vh, rgba(0,0,0,.22) 48vh, transparent 68vh); }
    #home > .home-top, #home > .home-body { position: relative; z-index: 1; }
    .home-top { flex: none; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 26px 0; }
    .home-top .brand { display: flex; align-items: center; gap: 10px; }
    .home-top .logo-tile { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; }
    .home-top .logo-tile img { width: 22px; height: 22px; object-fit: contain; }
    .home-top .wordmark { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: var(--text); }
    .home-top .home-sub { font-size: 12px; color: var(--faint); border-left: 1px solid var(--line-strong); padding-left: 12px; }
    .home-top .spacer { flex: 1; }
    .home-streak { font: 600 12px var(--mono); color: var(--sec); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); }
    #home .home-account { font: 600 12px var(--mono); color: var(--sec); }
    .home-body { width: min(1200px, 100%); margin: 0 auto; padding: 26px 32px 64px; display: flex; flex-direction: column; }
    /* ── Northstar B (the dashboard's language, carried forward): objects are LIT, not outlined.
       The two mode cards are glass on the ambient field; the sessions table below is quiet rows
       with no separators. Borders on this page: the tab-row rule — the shell's rail edge is the
       other. Accent: the pane's New session, the Solo card's Start, the active tab. ── */
    .home-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
    /* P4 — one card anatomy, both cards, equal height. The action sits
       bottom-left after the sentence that explains it; the flex spacer is what
       equalises the pair. On the ambient field the fill is the §6.20 scrim. */
    .hcard { display: flex; flex-direction: column; align-items: stretch; text-align: left; min-height: 168px; padding: 24px; border: 0; border-radius: 12px; background: rgba(16, 16, 19, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: background .12s ease; font-family: var(--font); }
    .hcard:hover { background: var(--surface-hi); }
    .hcard .hc-tt { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--text); line-height: 26px; }
    .hcard .hc-sub { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--muted); max-width: 42ch; }
    .hcard .hc-spacer { flex: 1; }
    .hcard .hc-action { margin-top: 20px; align-self: flex-start; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; font: 600 15px var(--font); letter-spacing: -.01em; }
    .hcard .hc-action.primary { background: var(--accent); color: var(--accent-ink); }
    .hcard:hover .hc-action.primary { background: var(--accent-hi); }
    .hcard .hc-action.secondary { background: var(--solid); border: 1px solid var(--line-strong); color: var(--text); font-weight: 500; font-size: 14px; }
    .hcard:hover .hc-action.secondary { background: var(--surface-hi); border-color: var(--gold-border); }
    .home-sec { display: flex; flex-direction: column; margin-top: 48px; }
    /* Session filter — the mock's tab row: text tabs whose active underline sits ON the one rule. */
    .home-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line-strong); }
    .home-tabs button { position: relative; margin-bottom: -1px; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 500 13px var(--font); cursor: pointer; transition: color .15s ease; }
    .home-tabs button:hover { color: var(--text); }
    .home-tabs button.on { color: var(--text); font-weight: 600; }
    /* Column headers carry NO rule of their own — the tab-row rule above is the table's line. */
    .home-thead { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(90px, .6fr) minmax(200px, 1.2fr) 70px 110px 90px 86px 36px; gap: 16px; align-items: center; padding: 16px 12px 6px; color: var(--faint); font-size: 11.5px; font-weight: 500; }
    .home-thead .ta-r { text-align: right; }
    .home-search { width: 220px; height: 34px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--solid); color: var(--text); font: 13px var(--font); outline: none; }
    .home-search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
    .home-search::placeholder { color: var(--faint); }
    .home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; }
    .home-sessions { display: flex; flex-direction: column; }
    /* Northstar B rows: NO separators — 54px height and the hover fill do the separating. */
    .srow { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(90px, .6fr) minmax(200px, 1.2fr) 70px 110px 90px 86px 36px; gap: 16px; align-items: center; min-height: 54px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background .12s ease; }
    .srow:hover { background: #0d0d10; }
    .srow .s-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .srow .s-name { font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; }
    .srow .s-tag { flex: none; font: 600 10px var(--mono); letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; background: var(--surface); color: var(--sec); }
    .srow .s-tag.prop { color: var(--warn); background: var(--warn-soft); }
    .srow .s-meta { font-size: 11.5px; color: var(--faint); display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; }
    .srow .s-meta .sep { opacity: .4; }
    .srow .s-inst { font: 600 13px var(--font); color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .srow .s-prog { min-width: 0; display: flex; align-items: center; gap: 12px; }
    .srow .s-progress { flex: 1; max-width: 200px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
    .srow .s-progress-fill { height: 100%; border-radius: 2px; background: #4c8f6a; }
    .srow .s-prog-label { flex: none; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
    .srow .s-num { text-align: right; font: 500 13px var(--font); color: var(--sec); font-variant-numeric: tabular-nums; }
    .srow .s-pnl { font-weight: 600; font-size: 13.5px; }
    .srow .s-pnl.pos { color: var(--up); } .srow .s-pnl.neg { color: var(--down); }
    .srow .s-analytics { min-width: 82px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--solid); color: var(--sec); font: 600 11.5px var(--font); cursor: pointer; white-space: nowrap; }
    .srow .s-analytics:hover { border-color: var(--gold-border); background: var(--gold-soft); color: var(--gold-hi); }
    .srow .s-analytics:disabled { color: var(--muted); cursor: wait; }
    .srow .s-menu-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .12s ease; }
    .srow:hover .s-menu-btn, .srow .s-menu-btn:focus-visible { opacity: 1; }
    .srow .s-menu-btn:hover { background: var(--surface-hi); color: var(--text); }
    .srow .s-rename { width: 280px; height: 30px; }
    .home-empty { padding: 44px 12px; color: var(--faint); font-size: 13px; }
    .home-empty b { color: var(--sec); font-weight: 600; display: block; margin-bottom: 5px; font-size: 15px; }
    .srow-menu { position: fixed; z-index: 210; min-width: 168px; padding: 5px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
    .srow-menu button { display: flex; align-items: center; width: 100%; text-align: left; padding: 9px 11px; border: none; background: transparent; color: var(--text); font: 13px var(--font); border-radius: 7px; cursor: pointer; }
    .srow-menu button:hover { background: var(--surface); }
    .srow-menu button.danger { color: var(--down); }
    .srow-menu .sm-div { height: 1px; margin: 4px 6px; background: var(--line-strong); }
    /* ── Leaderboard (northstar B): its own page inside the hub — the hero and mode cards leave ── */
    #homeLanding[data-view="lb"] .home-hero, #homeLanding[data-view="lb"] .home-cards { display: none; }
    /* Multiplayer is its own page too: the landing hero and mode cards leave with it. */
    #homeLanding[data-view="lobby"] .home-hero, #homeLanding[data-view="lobby"] .home-cards { display: none; }
    #homeLanding[data-view="prop"] .home-hero, #homeLanding[data-view="prop"] .home-cards { display: none; }
    .lb-eyebrow { margin: 16px 0 10px; color: var(--accent-hi); font: 600 10px var(--mono); letter-spacing: .12em; }
    .lb-h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -.035em; color: var(--text); }
    .lb-intro { margin: 12px 0 30px; max-width: 560px; color: var(--sec); font-size: 14px; line-height: 1.6; }
    .lb-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .lb-switch, .lb-period { display: flex; flex-wrap: wrap; gap: 4px; }
    .lb-controls button, .lb-refresh, .lb-act { min-height: 44px; border: 1px solid transparent; border-radius: 7px; padding: 8px 12px; background: transparent; color: var(--sec); font: 600 12px var(--font); cursor: pointer; }
    .lb-switch { padding: 3px; border-radius: 10px; background: var(--surface); }
    .lb-switch button[aria-pressed="true"] { color: var(--text); background: var(--card-solid); border-color: var(--line); }
    .lb-period button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-hi); border-color: var(--accent-border); }
    .lb-controls button:hover, .lb-refresh:hover { color: var(--text); background: var(--surface-hi); }
    #lbHome button:focus-visible, .lb-method summary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
    #lbHome [hidden] { display: none; }
    .lb-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 4px; }
    .lb-status { margin: 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
    .lb-refresh { flex: none; color: var(--sec); }
    .lb-board { min-width: 0; }
    .lb-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
    .lb-caption { text-align: left; color: var(--sec); padding: 0 0 12px; font-size: 12px; }
    .lb-table thead th { text-align: left; padding: 10px 12px; color: var(--muted); font: 500 11px var(--font); }
    .lb-table th:first-child { width: 64px; }
    .lb-table th:last-child { width: 130px; text-align: right; }
    .lb-row td, .lb-row th { padding: 16px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid transparent; }
    .lb-row.you td, .lb-row.you th { background: var(--accent-soft); border-color: var(--accent-border); }
    .lb-row td:first-child { border-radius: 8px 0 0 8px; }
    .lb-row td:last-child { border-radius: 0 8px 8px 0; }
    .lb-rank { color: var(--sec); font: 600 16px var(--mono); font-variant-numeric: tabular-nums; }
    .lb-member-cell { background: transparent; text-transform: none; letter-spacing: normal; }
    .lb-member { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; }
    .lb-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-hi); color: var(--sec); font: 650 10px var(--font); }
    .lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .lb-name { min-width: 0; overflow-wrap: anywhere; color: var(--text); font: 600 13px/1.45 var(--font); }
    .lb-you { flex: none; color: var(--accent-hi); font: 500 11px var(--font); }
    .lb-num { text-align: right; white-space: nowrap; color: var(--text); font: 600 14px var(--mono); font-variant-numeric: tabular-nums; }
    .lb-gap td { text-align: center; padding: 14px; color: var(--muted); font-size: 11px; }
    .lb-empty { margin: 0; padding: 36px 12px; color: var(--sec); font-size: 13px; line-height: 1.6; }
    .lb-empty h2 { margin: 0 0 6px; color: var(--text); font-size: 19px; letter-spacing: -.02em; }
    .lb-empty p { margin: 0 0 16px; max-width: 540px; }
    .lb-insight { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
    .lb-personal { display: grid; gap: 6px; color: var(--sec); font: 13px/1.6 var(--font); }
    .lb-personal strong { color: var(--text); font-weight: 600; }
    .lb-act { background: var(--accent-soft); color: var(--accent-hi); border-color: var(--accent-border); }
    .lb-act:hover { background: var(--surface-hi); }
    .lb-method { grid-column: 1 / -1; color: var(--muted); font: 12px/1.7 var(--font); }
    .lb-method summary { cursor: pointer; padding: 12px 0; width: fit-content; color: var(--sec); }
    .lb-method p { margin: 0; max-width: 780px; }
    html[data-theme="light"] .lb-switch button[aria-pressed="true"] { background: #fff; }
    html[data-theme="light"] .lb-row.you td, html[data-theme="light"] .lb-row.you th { background: var(--accent-soft); }
    @media (max-width: 560px) {
      .lb-h1 { font-size: 29px; }
      .lb-intro { margin-bottom: 22px; }
      .lb-controls { gap: 10px; }
      .lb-table th:first-child { width: 40px; }
      .lb-table th:last-child { width: 94px; }
      .lb-table thead th, .lb-row td, .lb-row th { padding: 12px 6px; }
      .lb-member { gap: 7px; flex-wrap: wrap; }
      .lb-avatar { width: 24px; height: 24px; }
      .lb-name { flex: 1; min-width: 50px; font-size: 12px; }
      .lb-num { font-size: 12px; }
      .lb-insight { grid-template-columns: 1fr; gap: 14px; }
      .lb-act { justify-self: start; }
    }

    @media (max-width: 900px) {
      .home-cards { grid-template-columns: 1fr; }
      .home-thead { display: none; }
      .srow { grid-template-columns: 1fr 84px 36px; }
      .srow .s-inst, .srow .s-prog, .srow .s-num:not(.s-pnl) { display: none; }
      .srow .s-pnl { display: none; }
      .srow .s-menu-btn { opacity: 1; }
      .home-search { width: 150px; }
    }

    /* ── Stage 3: shared platform header (Build · Prove · Trade) ── */
    .home-top .brand { text-decoration: none; }
    .home-top .brand:hover .wordmark { color: var(--gold-hi); }
    .bpt { display: flex; align-items: center; gap: 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 ease, color .15s ease; }
    .bpt-r { font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
    .bpt-i:hover { background: var(--surface); color: var(--sec); }
    .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: linear-gradient(180deg, var(--accent-hi), var(--accent)); border-radius: 2px; }
    @media (max-width: 760px) { .bpt-r { display: none; } }
    @media (max-width: 560px) { .bpt-i:not(.active) { display: none; } .bpt-i.active::after { display: none; } .home-top .logo-tile { display: grid; } }

    /* ── Northstar B hub — the hero is type on the field; nothing above it competes ── */
    .home-hero { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
    #home .home-h1 { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--text); }
    .home-lede { font-size: 15px; line-height: 1.55; color: var(--sec); max-width: 580px; margin: 0; }

    /* ══════════════════════════════════════════════════════════════════════════════════════════
       ONE-PLATFORM SHELL — the dashboard's fixed sidebar, reproduced natively at this service
       boundary so the chart and session engine stay focused without visually leaving the platform.
       ══════════════════════════════════════════════════════════════════════════════════════════ */
    html { --tp-shell-w:288px; } /* 56px spine + 232px context pane (P1) */
    html[data-sidebar="collapsed"] { --tp-shell-w:56px; } /* pane hidden, spine stays */
    /* Focus mode: the chart owns the WHOLE viewport. The shell flips data-replay-focus but nothing
       ever styled it — the button "did nothing" whenever the sidebar was already collapsed, because
       collapse-to-rail was its only visible effect. The width variable drives BOTH the sidebar's own
       width and the content offset, so zeroing it does the whole job through the existing transition;
       a translateX would resolve against the already-zero width and do nothing (measured: -1.02px).
       The border is suppressed or its 1px survives as a sliver at the screen edge. The compound
       selector must outrank the collapsed rule above. */
    html[data-replay-focus="on"], html[data-replay-focus="on"][data-sidebar="collapsed"] { --tp-shell-w:0px; }
    /* FULL SCREEN is the member's own toggle — a separate state from data-replay-focus, which the
       platform shell already flips as the replay room's nav-collapse and which is routinely ON during
       a session (styling the rail off that attribute hid it permanently). Fullscreen collapses the
       left shell through the same width variable and takes the right rail and drawer with it. */
    html[data-replay-fullscreen="on"] { --tp-shell-w:0px; }
    html[data-replay-fullscreen="on"] #sideRail, html[data-replay-fullscreen="on"] #sidePanels { display:none; }
        html[data-theme="light"] {
      color-scheme:light;
      --bg:#f5f4f0; --solid:#fcfbf8; --card:linear-gradient(180deg,#fffefb,#fcfbf8); --card-solid:#fcfbf8;
      --line:rgba(53,47,36,.08); --line-strong:rgba(53,47,36,.14); --surface:rgba(53,47,36,.045); --surface-hi:rgba(53,47,36,.08);
      --text:#171612; --sec:#56524a; --muted:#7e796f; --faint:#a8a297; --up:#1f9d57; --down:#ce3b31;
      /* light mode collapsed these into one brown — accent and caution were indistinguishable. */
      --accent:#2563eb; --accent-hi:#1d4ed8; --accent-ink:#ffffff;
      --warn:#b07e1e; --warn-hi:#8a5a12; --warn-ink:#ffffff;
      --blue:var(--accent); --blue-hi:var(--accent-hi);
      --gold:var(--accent); --gold-hi:var(--accent-hi); --gold-ink:var(--accent-ink);
      --up-soft:rgba(31,157,87,.1); --up-border:rgba(31,157,87,.34); --down-soft:rgba(206,59,49,.1); --down-border:rgba(206,59,49,.34);
      --accent-soft:rgba(37,99,235,.10); --accent-border:rgba(37,99,235,.34);
      --warn-soft:rgba(176,126,30,.1); --warn-border:rgba(176,126,30,.34);
      --blue-soft:var(--accent-soft); --blue-border:var(--accent-border);
      --gold-soft:var(--accent-soft); --gold-border:var(--accent-border);
      --success-text:#126f3d; --success-ink:#062516; --modal-overlay:rgba(23,22,18,.46);
      --chip-scrim:rgba(252,251,248,.88); --scrim:rgba(45,37,24,.28);
      --acct-card-bg:linear-gradient(180deg,#f4f7fd,#fcfbf8);

      --focus:rgba(37,99,235,.65); --shadow-pop:0 18px 42px -24px rgba(45,37,24,.3); --shadow-modal:0 30px 80px -36px rgba(45,37,24,.38);
    }
    html[data-theme="light"] select option { background:var(--solid);color:var(--text); }
    html[data-theme="light"] select option:checked { background:#eee9df;color:var(--text); }
    html[data-theme="light"] body > header { background:#fff;background-image:none; }
    html[data-theme="light"] #gate { background:radial-gradient(1000px 540px at 50% -12%,rgba(37,99,235,.18),var(--bg)); }
    html[data-theme="light"] #home { background:radial-gradient(900px 500px at 18% -8%,rgba(37,99,235,.16),transparent 64%),radial-gradient(760px 440px at 88% 0%,rgba(37,99,235,.07),transparent 68%),var(--bg); }
    /* Northstar B, light ground: raised surfaces step toward white — no borders, no shadows. */
    html[data-theme="light"] #home .hcard { background:rgba(252,251,248,.72); }
    html[data-theme="light"] #home .hcard:hover { background:rgba(255,254,251,.85); }
    html[data-theme="light"] #home .srow:hover { background:rgba(45,37,24,.045); }
    html[data-theme="light"] #home .s-progress { background:rgba(45,37,24,.09); }
    html[data-theme="light"] #home .s-progress-fill { background:#6fa786; }
    html[data-theme="light"] kbd { color:var(--sec);background:var(--surface);border-color:var(--line); }

    /* 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. */




    body > header,body > #banner,body > main { width:calc(100% - var(--tp-shell-w));margin-left:var(--tp-shell-w);transition:width .3s var(--ease),margin-left .3s var(--ease); }
    #home { left:var(--tp-shell-w);transition:left .3s var(--ease); }
    #gate { left:var(--tp-shell-w);transition:left .3s var(--ease); }
    .tool-context { color:var(--sec); }
    #brandHome.tool-context { margin-left:0;padding-left:7px; }
    #brandHome.tool-context .brand-home { width:16px;height:16px;margin:0;opacity:1;color:var(--muted); }
    #brandHome.tool-context:hover .brand-home { color:var(--gold); }

    @media (max-width:760px) {
      /* NEXT_STEPS 2.1/2.2 — the desktop right rail + drawer had NO mobile treatment at all: the
         60px rail sat ON the chart's right edge and the 302px drawer claimed phone width (measured:
         chart 326px of 390, rail overlapping at x:329). On phones the chart owns the full width;
         trading runs through the on-chart floating ticket and the battle HUD. */
      #sideRail, #sidePanels { display:none; }
      /* The rail is gone on phones — the floating gear IS the chart-settings affordance here. */
      #chart > .chart-settings-gear { display:grid; }
      html { --tp-shell-w:0px; }








      body > header { width:100%;margin:60px 0 0; }
      body > #banner,body > main { width:100%;margin-left:0; }
      #home { top:60px;left:0; }
      #gate { top:60px;left:0; }
      .home-top { padding-inline:14px; }
      .home-body { padding-inline:14px; }
      .home-actions { grid-template-columns:1fr; }
      .tool-context .wordmark { 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 var(--font);
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pine-label-tooltip { z-index: 8; }

/* ── Backtest Journal: the notes prompt ─────────────────────────────────────
   A card that slides in at the bottom-right after a trade is auto-logged.
   Deliberately NOT a modal: it never traps focus, never blocks the chart, and
   dismisses itself. Journaling that interrupts the replay would be turned off
   within a day, so the prompt has to be ignorable by design. */
.jn-prompt {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 300px;
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  animation: jn-in .18s ease-out;
}
.jn-prompt[hidden] { display: none; }
@keyframes jn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jn-prompt { animation: none; } }
.jn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jn-title { font: 600 11px/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--pos, #089981); }
.jn-x { background: none; border: 0; color: var(--sec); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; }
.jn-x:hover { color: var(--text); }
.jn-sub { margin: 5px 0 7px; font: 500 12px/1.35 var(--font); color: var(--text); }
.jn-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.jn-chip {
  font: 500 10.5px/1 var(--font); padding: 4px 7px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--sec);
}
.jn-chip:hover { color: var(--text); }
.jn-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.jn-note { resize: none; overflow-y: hidden; field-sizing: content;
  width: 100%; box-sizing: border-box;
  background: var(--input, #0d1118); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font: 400 12px/1.4 var(--font); padding: 6px 7px;
}
.jn-note:focus { outline: none; border-color: var(--accent); }
.jn-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.jn-save {
  font: 600 11px/1 var(--font); padding: 6px 11px; border-radius: 6px; cursor: pointer;
  background: var(--accent); border: 0; color: #fff;
}
.jn-save:disabled { opacity: .5; cursor: default; }
.jn-open { font: 500 11px/1 var(--font); color: var(--sec); text-decoration: none; }
.jn-open:hover { color: var(--text); text-decoration: underline; }

/* The consent toggle. Reads its own state in words rather than relying on
   colour alone, so "is this recording?" is answerable at a glance. */
/* Its own row: as a fourth item in the session row it wrapped to three lines
   and dwarfed Save. It is a session SETTING, not a peer of Resume/Save. */
.jn-row { padding-top: 0 !important; }
.jn-toggle { display: flex; align-items: center; gap: var(--s2); width: 100%; height: 30px; padding: 0 var(--s2) 0 var(--s3);
  font: 500 var(--fs-label) var(--font); color: var(--sec); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer; }
.jn-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.jn-toggle .jn-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--faint); transition: background .14s var(--ease); }
.jn-toggle .jn-lbl { flex: 1; text-align: left; }
.jn-toggle .jn-state { font: 600 var(--fs-eyebrow) var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.jn-toggle.on { border-color: var(--up-border); color: var(--text); }
.jn-toggle.on .jn-dot { background: var(--up); }
.jn-toggle.on .jn-state { color: var(--up); }

/* ── prop account picker: a browsable side panel ────────────────────────────
   Replaces a native <select> that could not be made to open reliably and was
   the wrong control anyway — choosing a firm is a comparison, and twelve
   accounts differing by target, drawdown type, daily-loss rule and contract
   caps do not fit in an option label. */
.acct-panel { position: fixed; inset: 0; z-index: 360; }
.acct-panel[hidden] { display: none !important; }
.acct-scrim { position: absolute; inset: 0; background: var(--modal-overlay); opacity: 0; transition: opacity .18s var(--ease); }
.acct-panel.open .acct-scrim { opacity: 1; }
.acct-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw);
  display: flex; flex-direction: column; background: var(--solid);
  border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-modal);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.acct-panel.open .acct-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) { .acct-sheet, .acct-scrim { transition: none; } }

/* The launcher and live-session shop host the same lazy surface as the Prop
   Challenges page. It reads as a room inside the platform—not the old dense
   side drawer—while keeping session setup visible beneath the scrim. */
.eval-shop-sheet {
  position: absolute; inset: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 56px);
  display: flex; overflow: hidden; border: 1px solid var(--line-strong);
  border-radius: clamp(16px, 2vw, 24px); background: var(--bg);
  box-shadow: var(--shadow-modal); opacity: 0; transform: translateY(14px) scale(.992);
  transition: opacity .18s var(--ease), transform .22s cubic-bezier(.22,.61,.36,1);
}
.eval-shop-overlay.open .eval-shop-sheet { opacity: 1; transform: none; }
.eval-shop-host { min-width: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 3vw, 40px); scrollbar-gutter: stable; }
.eval-shop-host .es-head { position: relative; padding-right: 44px; }
.eval-shop-host .es-head > .imx { position: absolute; top: -8px; right: -8px; }
.eval-shop-host :is(.es-select,.es-firmbtn,.es-add,.es-inbasket,.mp-quiet,.lobby-primary,.lobby-secondary,.imx):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.eval-shop-host .es-basket { position: sticky; bottom: -1px; z-index: 4; border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); }
.eval-shop-host .es-selwrap .mp-menu { z-index: 8; top: calc(100% + 6px); bottom: auto; min-width: 100%; max-height: min(320px, 46vh); overflow-y: auto; overscroll-behavior: contain; background: var(--card-solid); }
.eval-shop-loading,.eval-shop-error { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; }
.eval-shop-loading span { width: 28px; height: 28px; margin-bottom: 8px; border: 2px solid var(--line-strong); border-top-color: var(--gold); border-radius: 50%; animation: evalShopSpin .8s linear infinite; }
.eval-shop-loading b,.eval-shop-error b { color: var(--text); font: 650 15px var(--font); }
.eval-shop-loading small,.eval-shop-error span { color: var(--muted); font: 500 12.5px/1.5 var(--font); }
@keyframes evalShopSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .eval-shop-sheet { transition: none; }
  .eval-shop-loading span { animation: none; border-color: var(--gold-border); }
}
@media (max-width: 720px) {
  .eval-shop-sheet { inset: 60px 0 0; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .eval-shop-host { padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); scrollbar-gutter: auto; }
  .eval-shop-host .es-controls,.eval-shop-host .es-selects { width: 100%; }
  .eval-shop-host .es-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .eval-shop-host .es-selwrap:first-child { grid-column: 1 / -1; }
  .eval-shop-host .es-select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm) !important; }
  .eval-shop-host .es-selwrap + .es-selwrap .es-select { border-left: 1px solid var(--line); }
  .eval-shop-host .es-firmrow { align-items: flex-start; }
  .eval-shop-host .es-firms { overflow-x: auto; padding-bottom: 4px; }
  .eval-shop-host .es-firmhint { display: none; }
  .eval-shop-host .es-cards { grid-auto-columns: minmax(270px, calc(100vw - 58px)); }
  .eval-shop-host .es-basket { gap: 14px 22px; }
  .eval-shop-host .es-bactions { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 8px; }
}

/* The live-session shop is the same lazy component, compressed into the Prop
   drawer instead of opening a second full-screen room. One card remains fully
   legible; the horizontal rail exposes the rest without turning the sidebar
   into a tiny desktop page. */
.eval-shop-sidebar { min-height: 100%; padding: 16px 14px 24px; background: var(--solid); }
.eval-shop-sidebar .es-head { align-items: center; }
.eval-shop-sidebar .es-eyebrow,.eval-shop-sidebar .es-firmhint,.eval-shop-sidebar .es-priced,
.eval-shop-sidebar .es-promoline,.eval-shop-sidebar .es-disclaimer { display: none; }
.eval-shop-sidebar .es-head h1 { margin-top: 0; font-size: 18px; }
.eval-shop-sidebar .es-sub { font-size: 12.5px; line-height: 1.45; }
.eval-shop-sidebar .es-controls { margin-top: 14px; }
.eval-shop-sidebar .es-search { min-width: 100%; height: 40px; }
.eval-shop-sidebar .es-selects { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 7px; }
.eval-shop-sidebar .es-selwrap:first-child { grid-column: 1 / -1; }
.eval-shop-sidebar .es-select { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm) !important; }
.eval-shop-sidebar .es-selwrap + .es-selwrap .es-select { border-left: 1px solid var(--line); }
.eval-shop-sidebar .es-firmrow { margin-top: 10px; }
.eval-shop-sidebar .es-sectionhead { margin-top: 15px; }
.eval-shop-sidebar .es-cards { grid-auto-columns: minmax(250px, calc(100% - 18px)); }
.eval-shop-sidebar .es-card { padding: 15px; }
.eval-shop-sidebar .es-basket { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); }
.eval-shop-sidebar .es-bstat:nth-child(3) { grid-column: 1 / -1; }
.eval-shop-sidebar .es-bactions { grid-column: 1 / -1; width: 100%; margin-left: 0; }
.eval-shop-sidebar .es-bactions .lobby-primary { flex: 1; }
.eval-shop-sidebar .es-morerow { font-size: 11.5px; }
.acct-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
.acct-ph h2 { margin: 0; font: 600 var(--fs-title) var(--font); }
.acct-ph p { margin: 3px 0 0; font-size: var(--fs-label); color: var(--muted); }
.acct-filters { display: flex; gap: var(--s1); flex-wrap: wrap; padding: var(--s3) var(--s4) 0; }
.acct-chip { padding: 5px 10px; font: 600 var(--fs-label) var(--font); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.acct-chip:hover { color: var(--text); border-color: var(--line-strong); }
.acct-chip.on { color: var(--text); background: var(--surface-hi); border-color: var(--blue-border); }
.acct-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); }
.acct-empty { color: var(--muted); font-size: var(--fs-label); text-align: center; padding: var(--s5) 0; }
/* Each card is one comparable offer — and the unit the eval shop extends. */
.acct-card {
  display: flex; flex-direction: column; gap: var(--s2); width: 100%; text-align: left;
  padding: var(--s3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: border-color .12s var(--ease), transform .12s var(--ease);
}
.acct-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.acct-card.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue-border) inset; }
.acct-card .ac-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.acct-card .ac-firm { font: 600 var(--fs-ui) var(--font); color: var(--text); }
.acct-card .ac-price { font: 700 var(--fs-ui) var(--mono); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.acct-card .ac-price s { color: var(--faint); font-weight: 500; }
.acct-card .ac-name { font-size: var(--fs-label); color: var(--sec); }
/* minmax(0, 1fr), not 1fr: a bare 1fr track takes an automatic MINIMUM of its
   content, so a long pair ("Daily loss  $1,500 · fails") refused to shrink and
   spilled past the card's padding instead of letting its label ellipsise. */
.acct-card .ac-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px var(--s3); }
.acct-card .ac-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); font-size: var(--fs-label); color: var(--muted); }
/* The VALUE is atomic — "$1,000 · intraday" breaking after the bullet left the
   Drawdown field two lines tall while every neighbour sat on one, so cards in
   the same row ended at different heights. The label yields instead; it is the
   repeated, predictable half. */
.acct-card .ac-row b { flex: none; white-space: nowrap; color: var(--text); font: 600 var(--fs-label) var(--mono); font-variant-numeric: tabular-nums; }
.acct-card .ac-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-card .ac-foot { font-size: var(--fs-eyebrow); color: var(--faint); }
.acct-pf { display: flex; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); }
.acct-ghost { flex: 0 0 auto; padding: 9px 14px; font: 600 var(--fs-ui) var(--font); color: var(--sec); background: transparent; border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer; }
.acct-ghost:hover { color: var(--text); border-color: var(--line-strong); }
.acct-primary { flex: 1; padding: 9px 14px; font: 600 var(--fs-ui) var(--font); color: var(--success-ink); background: var(--gold); border: 1px solid var(--gold); border-radius: var(--r-xs); cursor: pointer; }
.acct-primary:hover:not(:disabled) { background: var(--gold-hi); border-color: var(--gold-hi); }
.acct-primary:disabled { opacity: .5; cursor: default; }
@media (max-width: 560px) { .acct-sheet { width: 100vw; } .acct-card .ac-brief { grid-template-columns: 1fr; } }

/* ── Eval Item Shop (Prop Mode Phase 1) ─────────────────────────────────────
   The create window docks LEFT and the shop opens beside it, so the portfolio
   you are assembling and the form it feeds are visible at once — buying evals
   is a comparison against a running total, not a modal round trip. */
.sessmodal:has(~ .acct-panel:not([hidden])) .sess-sheet,
body:has(.acct-panel:not([hidden])) .sessmodal { justify-content: flex-start; }
body:has(.acct-panel:not([hidden])) .sessmodal .sess-sheet { margin-left: var(--s5); }
@media (max-width: 1180px) { body:has(.acct-panel:not([hidden])) .sessmodal { display: none; } }

.sess-browse { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); text-align: left; cursor: pointer; }
.sess-browse:hover { border-color: var(--blue); }
.sess-browse-caret { color: var(--muted); font-size: 16px; line-height: 1; }

/* The portfolio, in the create window — the running bill for what you are about to run. */
.sess-cart { margin-top: var(--s2); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.sess-cart[hidden] { display: none; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font: 600 var(--fs-eyebrow) var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sc-copy { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.sc-list { margin: var(--s2) 0; display: flex; flex-direction: column; gap: 3px; }
.sc-row { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-label); }
.sc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sec); }
.sc-price { font: 600 var(--fs-label) var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.sc-x { width: 18px; height: 18px; padding: 0; font-size: 13px; line-height: 1; color: var(--faint); background: none; border: 0; cursor: pointer; }
.sc-x:hover { color: var(--down); }
.sc-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--fs-label); color: var(--sec); }
.sc-total b { font: 700 var(--fs-stat) var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }

/* Two-up card grid, wide enough to compare rules side by side. */
.acct-sheet { width: min(760px, 100vw); }
.acct-controls { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) 0; }
.acct-sort { flex: none; height: 32px; padding: 0 var(--s2); font: 500 var(--fs-label) var(--font); }
.acct-controls .tpsel-trigger { flex: none; width: min(218px, 42vw); height: 32px; font-size: var(--fs-label); }
/* Search — the shop is 50+ cards; scanning them by eye was the only option. */
.acct-search { flex: 1; display: flex; align-items: center; gap: var(--s2); height: 32px; padding: 0 var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); transition: border-color .12s var(--ease); }
.acct-search:focus-within { border-color: var(--gold-border); }
.acct-search svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.acct-search input { flex: 1; min-width: 0; height: 100%; padding: 0; font: 500 var(--fs-label) var(--font); color: var(--text); background: none; border: 0; outline: none; }
.acct-search input::placeholder { color: var(--faint); }
.acct-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Firm and size are separate axes, each on its own labelled row. */
.acct-filters { flex-direction: column; align-items: stretch; gap: var(--s1); padding: var(--s2) var(--s4) 0; }
.acct-frow { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.acct-flab { flex: none; width: 34px; font: 600 var(--fs-eyebrow) var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.acct-clearf { margin-top: var(--s2); padding: 5px 12px; font: 600 var(--fs-label) var(--font); color: var(--text); background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.acct-clearf:hover { border-color: var(--line-strong); }
.acct-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); align-content: start; }
.acct-card { cursor: default; }
.acct-card .ac-top { align-items: flex-start; }
.acct-card .ac-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.firm-mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--firm-mark-border); border-radius: 9px;
  background: var(--firm-mark-bg); color: var(--firm-mark-ink); box-shadow: inset 0 1px 0 var(--firm-mark-inset);
  font: 800 9px var(--font); letter-spacing: .02em;
}
.firm-mark img { display: block; width: 76%; height: 76%; object-fit: contain; }
.firm-mark .firm-mark-fallback-label { display: none; }
.firm-mark.firm-mark-fallback .firm-mark-fallback-label { display: block; }
.firm-mark.firm-mark-fallback img { display: none; }
.ac-mark { width: 32px; height: 32px; }
.acct-card .ac-firm { display: block; }
.acct-card .ac-name { display: block; margin-top: 1px; }
.acct-card .ac-price { font-size: var(--fs-stat); }
.ac-act { margin-top: var(--s1); }
/* `background: var(--text)` inverted correctly in dark and catastrophically in
   light: --text is near-BLACK there, so the primary buy button was a black slab
   with near-black ink on it. A tinted outline that fills on hover reads in both
   themes and leaves the footer's solid gold as the single primary action. */
.ac-add {
  width: 100%; padding: 9px; font: 600 var(--fs-ui) var(--font);
  color: var(--gold-hi); background: var(--gold-soft);
  border: 1px solid var(--gold-border); border-radius: var(--r-xs); cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.ac-add:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--success-ink); }
.ac-add:disabled { opacity: 1; cursor: default; background: var(--surface-hi); border-color: var(--line); color: var(--muted); }
.ac-owned { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font: 600 var(--fs-label) var(--font); color: var(--up); }
.ac-rm { padding: 8px 10px; font: 500 var(--fs-label) var(--font); color: var(--faint); background: none; border: 0; cursor: pointer; }
.ac-rm:hover { color: var(--down); }
.acct-card.on { border-color: var(--up-border); }

/* Sticky tally — the bill and the buying power, always in view.
   Both tallies share one grid so the labels, the figures and the sublines sit
   on the SAME three rows. Laid out independently they had different heights
   (only one carried a subline) and `align-items: center` then pushed the two
   figures off each other's baseline. */
.acct-pf { align-items: center; flex-wrap: wrap; }
.acct-tallies { display: flex; gap: var(--s4); margin-right: var(--s4); }
.acct-tally { display: grid; grid-template-rows: auto auto auto; gap: 1px; align-content: start; }
.at-k { font: 600 var(--fs-eyebrow) var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.at-v { font: 700 var(--fs-stat) var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.at-sub { font-size: var(--fs-eyebrow); color: var(--muted); }
@media (max-width: 700px) { .acct-list { grid-template-columns: 1fr; } }

/* Phase 2: an eval row is clickable, and carries both distances. */
.port-row[data-detail] { cursor: pointer; }
.port-row[data-detail]:hover { background: var(--surface); }
.port-row[data-detail]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.port-togo { font: 500 9px var(--mono); color: var(--muted); }
/* The per-eval sheet: what it is doing, then what it is judged by. */
/* ── one account's own stats, in the Stats tab's language ──────────────────
   Cards for the live figures, a meter for the pass, plain rows for the rest,
   and the rules it is judged by underneath. Replaces a flat 12-row key/value
   list that made the important numbers no louder than the footnotes. */
.asksheet.wide { width: min(560px, 100%); }
.cs { text-align: left; }
.cs-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.cs-bal { font: 700 26px/1.1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cs-sub { margin-top: 3px; font: 500 var(--fs-label) var(--mono); color: var(--muted); }
.cs-sub.pos { color: var(--up); } .cs-sub.neg { color: var(--down); }
.cs-why { margin: var(--s2) 0 0; padding: 7px 10px; font: 500 var(--fs-label) var(--font); color: var(--down); background: var(--down-soft); border-radius: var(--r-xs); }
.cs-eyebrow { font: 600 var(--fs-eyebrow) var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.cs-card { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); }
.cs-card b { font: 700 var(--fs-stat) var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.cs-card b.pos { color: var(--up); } .cs-card b.neg { color: var(--down); }
.cs-prog { margin-top: var(--s3); }
.cs-prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.cs-prog-num { font: 600 var(--fs-label) var(--mono); color: var(--sec); font-variant-numeric: tabular-nums; }
.cs-meter { margin-top: 5px; height: 5px; background: var(--surface-hi); border-radius: var(--r-pill); overflow: hidden; }
.cs-meter span { display: block; height: 100%; background: var(--up); border-radius: inherit; }
.cs-rows { margin-top: var(--s3); display: flex; flex-direction: column; gap: 3px; }
.cs-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: var(--fs-label); color: var(--muted); }
.cs-row b { color: var(--text); font: 600 var(--fs-label) var(--mono); font-variant-numeric: tabular-nums; }
.cs-row b.pos { color: var(--up); }
.cs-rules { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.cs-rules .ed-row { margin-top: 0; }
.cs-consistency { margin-top: var(--s3); padding: 12px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); }
.cs-consistency-head { display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3); }
.cs-consistency-head > div { display:flex;flex-direction:column;gap:3px;min-width:0; }
.cs-consistency-head b { color:var(--text);font:650 var(--fs-label) var(--font); }
.cs-status { flex:none;padding:4px 7px;border-radius:var(--r-pill);font:650 var(--fs-eyebrow) var(--font);text-transform:uppercase;letter-spacing:.04em; }
.cs-status.passing { color:var(--success-text);background:var(--up-soft); }
.cs-status.risk { color:var(--warn);background:var(--warn-soft); }
.cs-status.failing { color:var(--down);background:var(--down-soft); }
.cs-status.neutral { color:var(--muted);background:var(--surface-hi); }
.cs-consistency-limit { display:flex;justify-content:space-between;gap:var(--s3);margin-top:10px;color:var(--muted);font:500 var(--fs-label) var(--font); }
.cs-consistency-limit b { color:var(--text);font:650 var(--fs-label) var(--mono);font-variant-numeric:tabular-nums; }
.cs-consistency-formula { display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;margin-top:8px;color:var(--muted);font:500 var(--fs-label)/1.45 var(--font); }
.cs-consistency-formula b { color:var(--text);font-family:var(--mono);font-variant-numeric:tabular-nums; }
.cs-consistency p { margin:8px 0 0;color:var(--sec);font:500 var(--fs-label)/1.45 var(--font); }
.cs-reset { margin-top: var(--s3); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--down) 30%, var(--line)); border-radius: var(--r-xs); background: color-mix(in srgb, var(--down-soft) 62%, var(--surface)); }
.cs-reset.blocked { border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); background: color-mix(in srgb, var(--gold-soft) 58%, var(--surface)); }
.cs-reset p { margin: 4px 0 0; font: 500 var(--fs-label)/1.45 var(--font); color: var(--sec); }

.ed-live, .ed-rules { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.ed-live { padding-bottom: var(--s2); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.ed-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: var(--fs-label); color: var(--muted); }
.ed-row b { color: var(--text); font: 600 var(--fs-label) var(--mono); font-variant-numeric: tabular-nums; }
.ed-row b.pos { color: var(--up); } .ed-row b.neg { color: var(--down); }

/* Simulated-money framing, stated where the money appears. */
.acct-legal { flex: none; margin: 0; padding: var(--s2) var(--s4) var(--s3); font-size: var(--fs-eyebrow); line-height: 1.5; color: var(--faint); border-top: 1px solid var(--line); }
.biz-legal { margin: var(--s3) 0 0; font-size: var(--fs-eyebrow); line-height: 1.5; color: var(--faint); }

/* Trades ledger rows open the journal editor (#270 Part C) */
#trades .trade-row{cursor:pointer}
#trades .trade-row:hover td{background:color-mix(in srgb, currentColor 5%, transparent)}
#trades .dim{opacity:.65;font-size:11px;white-space:nowrap}

/* #270 Part D: a trade review is read-only — the order surfaces stand down */
.trade-review #orderPill,.trade-review #orderSec,.trade-review #drawRail,.trade-review #drawStyle{display:none!important}

/* #270 polish: the notes card is a MODAL now — the live Journal's entry, not a corner pop-up */
.jn-prompt{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:80;padding:16px}
.jn-prompt[hidden]{display:none}
.jn-prompt .jn-card{width:min(560px,94vw);max-height:92vh;overflow-y:auto;background:var(--card-solid);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.jn-facts{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-size:12px;opacity:.95;margin:6px 0 2px}
.jn-fside{font-weight:700;letter-spacing:.06em;font-size:11px}
.jn-grp{display:flex;align-items:baseline;gap:8px;margin:10px 0 4px}
.jn-glbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.jn-ghint{font-size:11px;opacity:.55}
.jn-noterow{position:relative}

/* the drawer ledger, live-Journal shaped: symbol leads, chip = direction, P&L right, date second line */
.jr-trow{display:block;width:100%;text-align:left;padding:8px 10px}
.jr-tl1,.jr-tl2{display:flex;align-items:baseline;gap:10px;min-width:0}
.jr-tl2{margin-top:3px;font-size:11px;opacity:.85}
.jr-tdate{font:500 11px var(--font);color:var(--sec);white-space:nowrap}
.jr-tside{font-size:10px;font-weight:700;letter-spacing:.06em;padding:1px 7px;border-radius:999px;border:1px solid var(--line);flex:none}
.jr-tside.long{color:var(--up)}
.jr-tside.short{color:var(--down)}
.jr-tpnl{margin-left:auto;font-weight:600;flex:none}
.jr-tsym{font:700 13px var(--font);flex:none}
.jr-tfill{color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-ttags{display:flex;gap:4px;margin-left:auto;overflow:hidden}
/* the auto-journal switch, at home in the drawer it feeds */
.jr-autorow{padding:10px 2px 2px;border-bottom:1px solid var(--line);margin-bottom:4px}
.jr-autorow .jn-toggle{width:100%}

/* #270 iteration: the entry page overlays the Journal panel itself */
.jr-entry{position:absolute;inset:0;overflow-y:auto;background:var(--card-solid);padding:12px 14px;z-index:5}
.jr-ehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.jr-erow2{display:flex;gap:8px;align-items:center;margin-top:10px}
.jr-earlier{font-size:11px;opacity:.55;padding:6px 2px}
.jr-saveday{width:100%;margin-top:2px}
.jr-chipman{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.jr-chipx{display:inline-flex;align-items:center;gap:4px;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.jr-chipx button{border:0;background:none;cursor:pointer;opacity:.6;font-size:13px;padding:0 2px}
.jr-chipx button:hover{opacity:1}
.jr-chipin{flex:1;min-width:120px;border:1px solid var(--line);border-radius:8px;background:transparent;padding:6px 8px;font-size:13px}

/* #270 polish 2: uniform tokens, real mic glyph, live-Journal group labels */
.jn-gdot{width:6px;height:6px;border-radius:999px;display:inline-block;margin-right:2px}
.jr-mic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:4px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--sec);cursor:pointer}
.jr-mic:hover{color:var(--text);border-color:var(--accent)}
.jr-mic.on{color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.jr-entry .jr-text{width:100%}
.jr-entry .jn-save{margin-top:0}

/* #270 UX round: the Journal drawer breathes; the launcher fills the page.
   Round 3: the CONTAINER carries the minimum and the panel fills whatever the member drags the
   drawer to — the old width clamp capped the panel at 480px inside a resizable region, which is
   exactly the dead gutter Ryan screenshotted. */
#sidePanels[data-open="jrnl"]{min-width:min(440px,46vw)}
#jrnlPanel{width:100%}
.jn-chip-new{border-style:dashed;opacity:.75}
.jn-chip-new:hover{opacity:1}
.s-progress{height:3px;margin-top:6px;border-radius:999px;background:var(--line);overflow:hidden;max-width:420px}
.s-progress-fill{height:100%;border-radius:999px;background:var(--accent)}
.home{max-width:1160px}
.home-sec-head{flex-wrap:wrap;row-gap:8px}
.home-sec-head .home-search{margin-left:auto;min-width:220px}
.home-stats{margin-bottom:6px}

/* #270 UX round 2: full-width journal sections, breathing entry page, stats-panel analytics link */
#jrnlPanel .jr-sec,#jrnlPanel .jr-text,#jrnlPanel .jr-trades{width:100%;box-sizing:border-box}
.jr-entry{padding:16px 18px}
.jr-entry .jn-grp{margin:16px 0 8px}
.jr-entry .jn-chips{gap:6px;margin-bottom:10px}
.jr-entry .jr-text{min-height:110px;margin-top:6px}
.jr-entry .jn-facts{margin:10px 0 4px;font-size:12.5px;gap:12px}
.jr-entry .jr-erow2{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.stats-full{display:block;width:calc(100% - 28px);margin:10px 14px 0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--solid);text-align:center;font:600 12.5px var(--font);color:var(--text);cursor:pointer}
.stats-full:hover{border-color:var(--gold-border);background:var(--gold-soft);color:var(--gold-hi)}
.stats-full:disabled{color:var(--muted);cursor:wait}
.home-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* Editing previews keep the chart visible and its colors accurate. */
#indSettingsModal { background: transparent; backdrop-filter: none; }

/* Direct price entry shares the chart's theme; opening it does not blur the chart. */
.order-level-editor{color:var(--text);background:var(--card-solid);border:1px solid var(--line-strong);border-radius:10px;width:min(360px,calc(100vw - 32px));padding:20px;box-shadow:var(--shadow-pop)}
.order-level-editor::backdrop{background:rgba(0,0,0,.16)}
.order-level-editor h2{font-size:17px;margin:0 0 16px}.order-level-editor label{display:grid;gap:6px}
.order-level-editor input{width:100%;min-height:44px;font-size:16px}.order-level-editor form>div{display:flex;flex-wrap:wrap;gap:8px}.order-level-editor button{min-height:44px}.order-level-error{color:var(--down);font-size:13px}.order-level-preview{font-size:13px;color:var(--sec)}
.postag button:focus-visible,.lvlchip button:focus-visible{outline:2px solid var(--accent,#4d8bff);outline-offset:-2px}
.postag .pt-meta:disabled{opacity:1;cursor:default}.postag .pt-lvl,.lvlchip .lc-lbl{touch-action:none}
@media(pointer:coarse){.postag,.lvlchip{min-height:40px;height:auto}.postag button,.lvlchip button{min-width:40px}.pt-id .pt-meta{padding:0 4px}.postag .pt-id{padding-left:4px}}
@media(max-width:480px){.postag .pt-pnl .pts{display:none}.postag .pt-pnl{padding:0 4px}.postag .pt-id{gap:2px;padding:0 3px}.postag .pt-meta{padding:0 2px;font-size:10px}.postag button{padding:0 5px}}

/* Session-owned warmup control, shared by both indicator panes. */
.imhistory { padding: 8px 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.imhistory p { margin: 0 0 6px; }
.imhistory button { min-height: 44px; margin-right: 8px; }
.imhistory [role="status"] { overflow-wrap: anywhere; }
.imhistory button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Guided tour (tours.ts / tours-bt.ts): the driver.js card in the Backtester'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(--card-solid);
  --tp-tour-line: var(--line-strong);
  --tp-tour-ink: var(--text);
  --tp-tour-muted: var(--sec);
  --tp-tour-accent: var(--accent);
  --tp-tour-accent-ink: var(--accent-ink);
  --tp-tour-font: var(--font);
  --tp-tour-mono: var(--mono);
}
.home-tour { all: unset; cursor: pointer; display: inline-block; margin: 8px 0 0; font: 500 12px/1 var(--font); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.home-tour:hover { color: var(--text); }
.home-tour:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 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;
  --tp-radius-xs: 6px;
  --tp-radius-sm: 10px;
  --tp-radius: 14px;
  --tp-radius-lg: 18px;
  --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 */
  --tp-shadow-pop: var(--shadow-pop, var(--sh-card, 0 12px 32px rgba(0, 0, 0, .45)));
  --tp-shadow-modal: var(--shadow-modal, var(--sh-modal, 0 24px 64px rgba(0, 0, 0, .6)));
  --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: 1px solid transparent;
  border-radius: var(--tp-radius-sm);
  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),
    border-color .14s var(--tp-ease),
    box-shadow .14s var(--tp-ease),
    transform .08s var(--tp-ease);
}
.tp-button:hover:not(:disabled) { transform: translateY(-1px); }
.tp-button:active:not(:disabled) { transform: translateY(0) scale(.985); }
.tp-button:disabled, .tp-button[aria-disabled="true"] {
  opacity: .42;
  cursor: default;
  box-shadow: none;
  transform: none;
}
.tp-button-primary {
  color: var(--tp-accent-ink);
  background: linear-gradient(180deg, var(--tp-accent-hi), var(--tp-accent));
  /* Derived from the accent, not restated as a literal — this border and glow were a hardcoded
     brass sitting on a blue gradient, i.e. the gold outline on every primary button on the
     platform. A literal here is how it drifted from the token in the first place. */
  border-color: color-mix(in srgb, var(--tp-accent) 38%, transparent);
  box-shadow: 0 7px 18px -10px color-mix(in srgb, var(--tp-accent) 65%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}
.tp-button-primary:hover:not(:disabled) { filter: brightness(1.04); }
.tp-button-secondary {
  color: var(--tp-text);
  background: var(--tp-surface);
  border-color: var(--tp-border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.tp-button-secondary:hover:not(:disabled) { background: var(--tp-surface-hover); }
.tp-button-quiet {
  color: var(--tp-text-secondary);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.tp-button-quiet:hover:not(:disabled) {
  color: var(--tp-text);
  background: var(--tp-surface);
}
.tp-button-danger { color: var(--tp-danger); }
.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: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  font: 500 12.5px/1.4 var(--tp-font-ui);
  transition: border-color .14s var(--tp-ease), box-shadow .14s var(--tp-ease), background .14s var(--tp-ease);
}
.tp-field:hover,
.tp-select:hover { border-color: var(--tp-border-strong); }
.tp-field:focus,
.tp-select:focus {
  border-color: var(--tp-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-focus) 16%, transparent);
  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"] {
  border-color: var(--tp-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-danger) 12%, transparent);
}

/* Segmented tabs */
.tp-tabs {
  align-items: center;
  gap: var(--tp-space-0);
  padding: var(--tp-space-0);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  background: 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: 8px;
  box-shadow: none;
  font: 600 12px/1 var(--tp-font-ui);
}
.tp-tab:hover:not(:disabled) { color: var(--tp-text); background: var(--tp-surface); }
.tp-tab:is(.active, [aria-selected="true"]) {
  color: var(--tp-text);
  background: var(--tp-panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--tp-border);
}

/* 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: 1px solid var(--tp-border-strong);
  border-radius: 9px;
  box-shadow: var(--tp-shadow-pop);
  font: 500 11.5px/1.45 var(--tp-font-ui);
}
.tp-menu {
  color: var(--tp-text);
  background: var(--tp-panel);
  border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-radius);
  box-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: 9px;
  text-align: left;
}
.tp-menu-item:hover:not(:disabled) { background: var(--tp-surface-hover); }

/* Modals and sheets */
.tp-modal-backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
}
.tp-modal {
  color: var(--tp-text);
  background: var(--tp-panel);
  border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-radius-lg);
  box-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: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-radius-sm);
  box-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: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-radius-pill);
  /* Glass, not a grey slab: translucent over whatever the surface is, plus a blur. */
  background: var(--tp-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.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: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  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: linear-gradient(90deg, var(--tp-accent), var(--tp-accent-hi));
  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)));
  border: 1px solid var(--tp-border-strong, var(--line-strong, rgba(128, 128, 128, .24)));
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
  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: 9px;
  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: 9px;
  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, #e9b24c);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tp-accent, #e9b24c) 38%, transparent);
}
.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: 1px solid var(--tp-border-strong, var(--line-strong, rgba(128, 128, 128, .24)));
  border-radius: 8px;
  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 { border-color: var(--tp-accent, #e9b24c); }
.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: 1px solid var(--tp-border-strong, var(--line-strong, rgba(128, 128, 128, .36)));
  border-radius: 4px;
  background: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07)));
  color: var(--tp-accent-ink, var(--accent-ink, #221803));
  pointer-events: none;
}
.cs-check input:checked + span { border-color: var(--tp-accent, #e9b24c); background: var(--tp-accent, #e9b24c); }
.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: 1px solid var(--tp-border-strong, var(--line-strong, rgba(128, 128, 128, .24)));
  border-radius: 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;
}
.cs-row input[type="range"] { width: 132px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--tp-accent, #e9b24c); }
.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; padding: 2px; border: 1px solid var(--tp-border, var(--line, rgba(128, 128, 128, .16))); border-radius: 9px; background: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07))); }
.cs-seg button { min-width: 60px; padding: 6px 8px; border: 0; border-radius: 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(--tp-surface-hover, var(--surface-hi, rgba(128, 128, 128, .13))); color: var(--tp-text, var(--text, #e7eaee)); box-shadow: 0 1px 2px rgba(0, 0, 0, .16); }
.cs-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--tp-border-strong, var(--line-strong, rgba(128, 128, 128, .24))); border-radius: 8px; background: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07))); 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(--tp-surface-hover, var(--surface-hi, 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); border: 1px solid 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: 1px solid var(--tp-border-strong, var(--line-strong, rgba(128, 128, 128, .24))); border-radius: 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: 2px solid var(--tp-accent, #e9b24c); outline-offset: -1px; }
.cs-template.naming > :not(.cs-template-name):not(label) { display: none; }
.cs-foot button { min-height: 36px; padding: 0 14px; border: 1px solid var(--tp-border-strong, var(--line-strong, rgba(128, 128, 128, .24))); border-radius: 8px; background: var(--tp-surface, var(--surface, rgba(128, 128, 128, .07))); 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(--tp-surface-hover, var(--surface-hi, rgba(128, 128, 128, .13))); color: var(--tp-text, var(--text, #e7eaee)); }
.cs-foot #csReset { border-color: transparent; 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:1px solid var(--tp-border-strong,var(--line-strong,rgba(128,128,128,.24)));border-radius:10px;background:var(--tp-panel,var(--card-solid,#141417));box-shadow:0 18px 46px rgba(0,0,0,.2); }
.cs-template-menu[hidden] { display:none; }
.cs-template-menu button { width:100%;min-height:34px;display:block;border:0;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; border-color: var(--tp-accent, #e9b24c); background: var(--tp-accent, #e9b24c); color: var(--tp-accent-ink, var(--accent-ink, #221803)); }
.cs-foot .primary:hover { border-color: var(--tp-accent-hi, #f5cd82); background: var(--tp-accent-hi, #f5cd82); color: var(--tp-accent-ink, var(--accent-ink, #221803)); }
.chart-settings-gear {
  position: absolute;
  z-index: 8;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--tp-panel, #141417) 86%, transparent);
  color: var(--tp-text-muted, var(--muted, #8b93a1));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color .14s var(--ease, ease), border-color .14s var(--ease, ease), background .14s var(--ease, ease), transform .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-accent, #e9b24c); border-color: color-mix(in srgb, var(--tp-accent, #e9b24c) 46%, transparent); background: color-mix(in srgb, var(--tp-panel, #141417) 96%, transparent); transform: translateY(-1px); }

@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; }
}