/* Supreme Trading Journal — the stylesheet. Served as its own file so it caches; index.html stays no-store. The tokens live at the top. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/brand/fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/dmmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/dmmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-base:#0a141f;--bg-surface:#0f1a24;--bg-elevated:#131f2a;--bg-hover:#182633;
  --accent:#8ecdf6;--accent-dim:rgba(142,205,246,.12);--accent-border:rgba(142,205,246,.5);--on-accent:#0a141f;
  /* Material: every panel is lit from above — a 1px catch on the top edge, a
     shade on the bottom. One light source is what makes parts read as one
     machined object rather than a set of widgets. */
  --hi:rgba(255,255,255,.08);--lo:rgba(0,0,0,.5);
  --tint-1:rgba(237,242,247,.04);--tint-2:rgba(237,242,247,.08);
  --win-border:rgba(52,196,138,.42);--loss-border:rgba(242,95,111,.42);--amber-dim:rgba(240,180,41,.12);--amber-border:rgba(240,180,41,.45);
  /* The ramp sat one step too dark: tertiary #56698c measured 3.09:1 on the card
     surface and had never met AA in either theme — it is the single largest
     contrast failure in the app (207 elements in light, a comparable share in
     dark). Shifted up one notch: the old secondary becomes the new tertiary at
     4.6:1, and secondary moves to 6.8:1. Primary is untouched at 14.6:1. */
  --text-primary:#edf2f7;--text-secondary:#a4b4c3;--text-tertiary:#8095a6;
  --border:rgba(237,242,247,.10);--border-strong:rgba(237,242,247,.18);
  --win:#34c48a;--win-dim:rgba(52,196,138,.10);
  --loss:#f25f6f;--loss-dim:rgba(242,95,111,.10);--loss-press:#c93448;
  --breakeven:#8095a6;--no-trade:#182633;
  /* One blue. --accent-grad is kept as a name, but it is now a FINISH (a
     polished top edge on the same blue), not a second hue. The indigo the
     landing banned is gone from the app with it. */
  --accent-2:#8ecdf6;--accent-grad:linear-gradient(180deg,#ffffff 0%,#f4f8fb 100%);
  /* Tier ladder. Was duplicated as inline hex in the legend and again in two JS
     maps, all tuned for a dark ground — on white, Silver measured 1.12:1 and
     Bronze 1.65:1. Tokenised so the ladder flips with the theme and there is one
     place to change it. */
  --tier-stone:#8095a6;--tier-iron:#8fa0b0;--tier-bronze:#a4b4c3;--tier-silver:#c7ceda;
  --tier-gold:#edf2f7;--tier-platinum:#ffffff;--tier-elite:#8ecdf6;
  --star-empty:rgba(255,255,255,.30);
  --amber:#f0b429;--violet:#8ecdf6;--orange:#f0b429;--orange-light:#f7c95a;--orange-dim:rgba(240,180,41,.12);--orange-border:rgba(240,180,41,.35);
  /* No spring: an instrument settles, it does not bounce. */
  --ease-standard:cubic-bezier(.4, 0, .2, 1);--ease-spring:cubic-bezier(.2, .7, .2, 1);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);
  --dur-fast:.15s;--dur-base:.2s;--dur-slow:.4s;
  /* The motion ladder: one vocabulary for the shell. Arrivals ease out, in-place changes take the
     standard curve, exits ease in at about 70% of their arrival. Hover and press 150; toggles,
     segments and the lit tab 180; menus, panels, popovers and toasts 240 (out 170); pages and sheets
     280. A page's outgoing content clears in 90 so the next can start 40 in. The theme cross-fades in 280. */
  --dur-press:150ms;--dur-toggle:180ms;--dur-panel:240ms;--dur-panel-out:170ms;--dur-page:280ms;--dur-leave:90ms;--dur-theme:280ms;
  --sp-1:4px;--sp-2:8px;--sp-2-5:10px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  /* Corners: the original app's shape language, 14 on panels and 8 on
     controls, from the tokens. The lint's literal scale (0-8) is unchanged. */
  --r:14px;--rs:8px;--rm:8px;--r-card:14px;
  /* The metal. Champagne, the one warm note in a cool palette, and only
     ever a line, a bezel, a seal or a tier word: never a fill, never a
     button, never a paragraph. --metal-ink is the text-safe weight;
     --metal-p* is the metal on paper (the statement) in either theme. */
  --metal:#8ecdf6;--metal-2:#8ecdf6;--metal-3:#8ecdf6;--metal-ink:#8ecdf6;
  --metal-p:#1a5f98;--metal-p2:#1a5f98;--metal-p3:#1a5f98;
  --metal-rule:linear-gradient(90deg,var(--metal-2),var(--metal-3) 35%,var(--metal) 62%,var(--metal-2));
  --metal-rule-v:linear-gradient(180deg,var(--metal-2),var(--metal-3) 35%,var(--metal) 62%,var(--metal-2));
  --metal-rule-p:linear-gradient(90deg,var(--metal-p2),var(--metal-p3) 35%,var(--metal-p) 62%,var(--metal-p2));
  /* The room: one light source top-left, the far corner falls off, film
     grain on the canvas. The topbar is the case, lit from the same side. */
  --atmos:radial-gradient(1300px 780px at 8% -12%,rgba(237,242,247,.06),transparent 62%),radial-gradient(900px 600px at 100% 100%,rgba(0,0,0,.45),transparent 60%);
  --grain-o:.03;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --case:linear-gradient(180deg,var(--bg-hover),var(--bg-surface));--case-shadow:0 1px 0 rgba(0,0,0,.6);
  --dial-face:var(--bg-base);--scrim:rgba(5,14,21,.6);--glass:rgba(19,31,42,.85);
  /* Paper: the sign-in sheet and the statement are paper in either theme. */
  --paper:#f2f5f8;--paper-2:#f7f9fb;--paper-in:#ffffff;--paper-ink:#0e1a26;--paper-ink-2:#46586a;--paper-ink-3:#596a7a;--paper-line:rgba(14,26,38,.18);
  --paper-face:linear-gradient(180deg,#f7f9fb,#f2f5f8);
  --auth-grid:repeating-linear-gradient(90deg,var(--tint-1) 0 1px,transparent 1px 11px),repeating-linear-gradient(0deg,var(--tint-1) 0 1px,transparent 1px 11px);
  --auth-grid-mask:radial-gradient(800px 500px at 30% 40%,#000,transparent 70%);
  /* The face the numbers wear. Every figure in the product is set in it. */
  --font-num:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Elevation. There was no scale — 192 box-shadow declarations, 146 distinct,
     122 used exactly once. These five are the values that actually repeat, so
     they become the ladder; new work should pick a rung. The 122 one-offs are
     deliberately NOT swept into these: each was tuned against its own surface
     and collapsing them blind would flatten things that are meant to differ.
     That is a pass of its own, with eyes on it. */
  --el-hero:0 1px 0 var(--tint-2) inset, 0 12px 40px -12px rgba(0,0,0,.55), 0 0 0 1px var(--tint-1);
  --el-1:0 1px 2px rgba(0,0,0,.28),0 12px 28px -20px rgba(0,0,0,.8);
  --el-2:0 1px 3px rgba(0,0,0,.3);
  --el-3:0 4px 16px -6px rgba(0,0,0,.3);
  --el-4:0 8px 32px rgba(0,0,0,.18);
  --el-5:0 24px 60px rgba(0,0,0,.5);
  /* z-bands: 150 nav scrim | 1000 page modals | 8800-8999 chrome (help, drawers) | 9000-9002 sign-in screens | 9050 the load-in |
     9100-9999 overlay stack (low=content, high=confirm) | 10000-10200 destructive/admin |
     --z-confirm tops everything: _showConfirm can spawn above any open modal */
  --z-confirm:10500;
  /* Above --z-confirm sit two full-screen BLOCKERS that must beat every overlay,
     including anything a third-party script injects. They are deliberately not
     part of the ordered stack above — naming them stops the next "just use a
     bigger number" escalation, which is how 2147483000 got here in the first place. */
  --z-banner:60;         /* sticky in-page notices (past-due card) */
  --z-gate:20000;        /* MFA / auth gate (.mfa-ov) */
  --z-blocker:2147483000;/* access-denied / suspended-account takeover */
  --bg-card:var(--bg-elevated);--border-subtle:rgba(255,255,255,.10);--bg:var(--bg-base);
  /* Newsreader replaced Archivo Expanded 2026-08-23 — the old family name was
     never a valid Google Fonts request (HTTP 400), so display text had been
     rendering system-ui fallback since it shipped. Brand now matches the
     landing's "Editorial" direction; loaded weights are 500/600/700 + 500i. */
  --font-display:'Geist',system-ui,-apple-system,sans-serif;
  --font-body:'Geist',system-ui,-apple-system,sans-serif;
  /* Type scale. There was no size token system at all — 23 distinct sizes had
     accreted, ten of them used once or twice. These 13 steps are the sizes the
     app actually leans on; the strays below now collapse onto them. New work
     should pick a step rather than invent a number. */
  --fs-2xs:11px;--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-base:14px;
  --fs-lg:16px;--fs-xl:18px;--fs-2xl:20px;--fs-3xl:22px;--fs-4xl:24px;
  --fs-5xl:28px;--fs-6xl:32px;--fs-7xl:34px;--fs-8xl:40px;
  /* 50px exists once, on .celebrate-icon — a deliberate one-off for the
     milestone moment, not drift. Left off the scale on purpose. */
}
/* ── Light mode (preview) — dark cards + sidebar float on a light canvas ─────
   We relight only the page canvas (body) and the few things that sit directly
   on it. Cards (--bg-elevated), the sidebar (--bg-surface), inputs and inner
   fills stay dark, so most of the app is unchanged. */
:root[data-theme="light"] body{background:var(--bg-base)}
:root[data-theme="light"] .pt{color:#0e1a26}
:root[data-theme="light"] .ps{color:#46586a}
:root[data-theme="light"] #trades-table thead th{color:var(--text-secondary);background:var(--bg-hover);border-bottom-color:rgba(0,0,0,.14)}
:root[data-theme="light"] #trades-table tbody td{color:#46586a}
:root[data-theme="light"] #trades-table tbody tr{border-bottom-color:rgba(0,0,0,.06)}
:root[data-theme="light"] #trades-table td.trade-act-cell{background:var(--bg-base);box-shadow:-11px 0 13px -9px rgba(0,0,0,.18)}
:root[data-theme="light"] #trades-thead th.trade-act-cell{background:var(--bg-hover)}
/* By day the cards are flat sheets one tone above the field; the hairline carries the edge. */
/* Dashboard greeting sits on the canvas → darken the non-gradient part */
:root[data-theme="light"] .dw-greeting{color:#0e1a26}
/* Onboarding "getting set up" cards → make them dark like every other card */
:root[data-theme="light"] .ob-step{background:var(--bg-elevated)}
:root[data-theme="light"] .ob-step.done{background:linear-gradient(var(--win-dim),var(--win-dim)),var(--bg-elevated)}
/* Gradient/hero cards: their gradients end in a SEMI-TRANSPARENT stop, which
   lets the light canvas bleed through and wash the card out. Composite each over
   an opaque dark base so the tint reads over dark (same subtle look as dark mode). */
:root[data-theme="light"] .card-hero{background:var(--bg-elevated)}
:root[data-theme="light"] .es-card{background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg-surface) 100%)}
/* .partner-hero composites over --bg-elevated in its base rule, so it needs no light override. */
:root[data-theme="light"] .aff-hero{background:linear-gradient(135deg,var(--accent-dim) 0%,var(--accent-dim) 55%,var(--accent-dim) 100%),var(--bg-elevated)}
:root[data-theme="light"] .mod-hero{background:linear-gradient(135deg,var(--accent-dim) 0%,var(--accent-dim) 55%,rgba(96,165,250,.05) 100%),var(--bg-elevated)}
:root[data-theme="light"] .admin-platform-hero{background:linear-gradient(135deg,var(--accent-dim) 0%,var(--accent-dim) 55%,var(--accent-dim) 100%),var(--bg-elevated)}
/* On-canvas text/controls — darkened to clear WCAG 4.5:1 on the light canvas
   (these sit directly on the canvas, not inside a dark card) */
:root[data-theme="light"] .dw-subtitle,
:root[data-theme="light"] .ob-head-title{color:var(--text-tertiary)}
:root[data-theme="light"] .stl-summary,
:root[data-theme="light"] .ob-head-sub{color:var(--text-tertiary)}
:root[data-theme="light"] .ob-step-action{color:#1a5f98}
/* Streak / status badges: tints wash out + text too light on the canvas → stronger chip + darker text */
:root[data-theme="light"] .dw-badge.dw-b-fire{background:var(--amber-dim);border-color:var(--amber-border);color:var(--amber)}
:root[data-theme="light"] .dw-badge.dw-b-green{background:var(--win-dim);border-color:var(--win-border);color:var(--win)}
:root[data-theme="light"] .dw-badge.dw-b-amber{background:var(--accent-dim);border-color:var(--accent-border);color:var(--text-primary)}
:root[data-theme="light"] .dw-badge.dw-b-blue{background:var(--accent-dim);border-color:var(--accent-border);color:#1a5f98}
:root[data-theme="light"] .dw-badge.dw-b-purple{background:var(--accent-dim);border-color:var(--accent-border);color:#1a5f98}
:root[data-theme="light"] .dw-badge.dw-b-muted{background:rgba(14,26,38,.06);border-color:rgba(14,26,38,.14);color:var(--text-tertiary)}
/* Transparent tables sit on the canvas (Trade Log, Calendar breakdown) → light header strip + dark body */
:root[data-theme="light"] .tw thead th{color:var(--text-secondary);background:var(--bg-hover);border-bottom-color:rgba(0,0,0,.14)}
:root[data-theme="light"] .tw tbody td{color:#46586a}
:root[data-theme="light"] .tw tbody tr{border-bottom-color:rgba(0,0,0,.06)}
/* On-canvas headings + section labels */
:root[data-theme="light"] .cal-bd-title,
:root[data-theme="light"] .stt-section-title{color:var(--text-tertiary)}
:root[data-theme="light"] #pg-insights .fl,
:root[data-theme="light"] #pg-trades .fl{color:var(--text-tertiary)}
:root[data-theme="light"] #pg-insights .ph .btn-g{color:var(--text-tertiary);border-color:rgba(14,26,38,.2)}
:root[data-theme="light"] .stl-summary b{color:var(--text-tertiary)}
:root[data-theme="light"] #pg-insights .btn-g{color:var(--text-tertiary);border-color:rgba(14,26,38,.2)}
/* Calendar "Monthly Breakdown" table uses inline semantic cell colours → keep it a dark card so they read */
:root[data-theme="light"] #pg-calendar .tw{background:var(--bg-elevated)}
:root[data-theme="light"] #pg-calendar .tw thead th{background:transparent;color:var(--text-secondary);border-bottom-color:var(--border-strong)}
:root[data-theme="light"] #pg-calendar .tw tbody td{color:var(--text-secondary)}
:root[data-theme="light"] #pg-calendar .tw tbody tr{border-bottom-color:var(--tint-1)}
html,body{height:100%;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* The room. One light source top-left on a fixed layer under the pages, the
   far corner falling off, film grain on the canvas. Every panel is lit from
   the same side, so the parts read as one object in one place. */
:root[data-theme="light"] body{background:var(--bg-base)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--atmos)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain-o);background:var(--grain) 0 0/160px 160px}
#app{display:flex;height:100vh;overflow:hidden}
/* ══ Two-tier navigation (top bar · section rail · sub-panel) — three-blue, theme-aware ══ */
/* Nav surfaces — the ORIGINAL sidebar treatment restored onto the two-tier rail:
   dark surface gradient + hairline blue inner edge. Top bar = the card colour
   (--bg-elevated), a deep midnight blue, so chrome and cards agree. */
:root{--nav-top:var(--bg-elevated);--nav-rail:linear-gradient(180deg,#182633 0%,#0f1a24 100%);--nav-rail-solid:#131f2a;--nav-panel:var(--bg-elevated)}
/* ── Light theme: the token layer ────────────────────────────────────────────
   Until now light mode was ~64 per-component patch rules sitting on top of an
   unchanged dark foundation — --bg-base stayed #0a141f and --text-primary
   stayed #e8edf5 even with data-theme="light" applied. So every component that
   did the correct thing and used var(--text-primary) painted near-white text on
   a light surface. Measured across all 19 pages: 313 of 824 text elements below
   AA, 23 of them at 1.00:1 — invisible. --text-tertiary alone accounted for 207.

   Re-mapping the tokens fixes the whole class at once, and any component written
   correctly from here inherits it for free.

   One field, as at night: the top bar, the rail, the page and the cards are one
   ice blue in tones, and elevation gets lighter (page, then card, then field;
   hover and table heads sit one tone below the page). Navy is the ink and the
   accent is the only colour that is not money. Every value below is measured,
   not picked by eye: the text tones and the money colours clear 4.5:1 on the
   card, the page and the hover tone.

     on card / on page / on hover
     --text-primary    16.0 / 15.0 / 13.8
     --text-secondary   6.7 /  6.3 /  5.7
     --text-tertiary    5.6 /  5.2 /  4.8
     --win              5.6 /  5.2 /  4.8
     --loss             5.5 /  5.2 /  4.8
     --amber            5.6 /  5.2 /  4.8

   Semantic hues darken: #34c48a and #f25f6f are tuned for a dark ground and
   fall to ~2.3:1 and ~3.3:1 on white. The light values keep the same meaning at
   a legible weight. --accent darkens for the same reason. */
:root[data-theme="light"]{
  --bg-base:#e6eef5;--bg-surface:#f8fafc;--bg-elevated:#f0f5f9;--bg-hover:#dae5ef;
  --text-primary:#0e1a26;--text-secondary:#46586a;--text-tertiary:#536474;
  --border:rgba(14,26,38,.10);--border-strong:rgba(14,26,38,.18);
  /* Defined for dark only until now, as white-alpha — so all 11 borders using
     it were invisible against a light background. Same ink-alpha family as
     --border above, one step lighter, which is what "subtle" meant in dark. */
  --border-subtle:rgba(14,26,38,.07);
  --accent:#1a5f98;--accent-dim:rgba(26,95,152,.10);--accent-border:rgba(26,95,152,.45);--on-accent:#f0f5f9;
  --hi:transparent;--lo:rgba(14,26,38,.08);
  --metal:#1a5f98;--metal-2:#1a5f98;--metal-3:#1a5f98;--metal-ink:#1a5f98;
  --atmos:none;
  --grain-o:.02;
  --case:var(--bg-base);--case-shadow:0 0 0 transparent;
  --scrim:rgba(14,26,38,.4);--glass:rgba(240,245,249,.9);
  --tint-1:rgba(14,26,38,.04);--tint-2:rgba(14,26,38,.07);
  --win-border:rgba(18,112,77,.35);--loss-border:rgba(184,43,66,.35);--amber-dim:rgba(240,180,41,.14);--amber-border:rgba(135,88,16,.35);
  --accent-2:#1a5f98;--accent-grad:linear-gradient(180deg,#182838 0%,#0e1a26 100%);
  --win:#12704d;--win-dim:rgba(18,112,77,.08);
  --loss:#b82b42;--loss-dim:rgba(184,43,66,.08);--loss-press:#b82b42;
  --breakeven:#536474;--no-trade:#cfdbe6;
  --amber:#875810;--violet:#1a5f98;
  --orange:#875810;--orange-light:#875810;--orange-dim:rgba(240,180,41,.14);--orange-border:rgba(135,88,16,.35);
  --tier-stone:#536474;--tier-iron:#46586a;--tier-bronze:#46586a;--tier-silver:#536474;
  --tier-gold:#0e1a26;--tier-platinum:#0e1a26;--tier-elite:#1a5f98;
  --star-empty:rgba(14,26,38,.58); /* .45 measured 2.9:1 on white — under the 3:1 floor for a 24px control */
  --nav-rail:var(--bg-base);--nav-rail-solid:var(--bg-base);
  /* One field: no lift, no glow. Sheets are flat and squarer than at night. */
  --el-hero:none;--el-1:none;--r:6px;--r-card:6px;--rm:4px;--rs:4px;
  /* The sign-in card is a sheet of the same paper. */
  --paper:var(--bg-elevated);--paper-2:var(--bg-elevated);--paper-in:var(--bg-surface);--paper-face:var(--bg-elevated)}
/* The night inks, for anything drawn on navy whatever the theme: the share card reads them from a .night-inks probe.
   By day the top bar and the rail are the field's own colour and take the day inks like everything else. */
.night-inks{--text-primary:#edf2f7;--win:#34c48a;--win-dim:rgba(52,196,138,.10);--win-border:rgba(52,196,138,.42);--loss:#f25f6f;--loss-dim:rgba(242,95,111,.10);--loss-border:rgba(242,95,111,.42);--loss-press:#c93448;--amber:#f0b429;--amber-dim:rgba(240,180,41,.12);--amber-border:rgba(240,180,41,.45);--text-secondary:#a4b4c3;--text-tertiary:#8095a6;--border:rgba(237,242,247,.12);--border-strong:rgba(237,242,247,.2);--bg-hover:rgba(255,255,255,.06);--tint-1:rgba(255,255,255,.05);--tint-2:rgba(255,255,255,.09);--accent:#8ecdf6;--accent-dim:rgba(142,205,246,.12);--accent-border:rgba(142,205,246,.5);--hi:rgba(255,255,255,.08);--accent-grad:linear-gradient(180deg,#ffffff 0%,#f4f8fb 100%);--on-accent:#0a141f}
#topbar{position:fixed;top:0;left:0;right:0;height:52px;background:var(--case);display:flex;align-items:center;gap:14px;padding:0 14px;z-index:130;border-bottom:1px solid var(--border);box-shadow:inset 0 1px 0 var(--hi),var(--case-shadow)}
.tb-burger{width:34px;height:34px;border:1px solid var(--border);background:transparent;border-radius:var(--rm);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:background-color var(--dur-press) var(--ease-standard),border-color var(--dur-press) var(--ease-standard),transform var(--dur-press) var(--ease-out)}
.tb-burger:hover{background:var(--bg-hover);border-color:var(--border-strong)}.tb-burger:active{transform:scale(.98)}
.tb-burger .bl{position:relative;width:16px;height:12px}
.tb-burger .bl span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--text-secondary);transition:transform var(--dur-toggle) var(--ease-standard),opacity var(--dur-toggle) var(--ease-standard)}
.tb-burger .bl span:nth-child(1){top:0}.tb-burger .bl span:nth-child(2){top:5px}.tb-burger .bl span:nth-child(3){top:10px}
body.nav-pinned .tb-burger .bl span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-pinned .tb-burger .bl span:nth-child(2){opacity:0}
body.nav-pinned .tb-burger .bl span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* Logo keeps its original id so the "old money" rule (clean white, wide tracked,
   no gradient) still applies; only the sidebar padding is re-scoped for the bar. */
#topbar #logo{padding:0;flex:none;text-transform:uppercase;line-height:1.05;white-space:nowrap;display:flex;align-items:center;gap:10px}
#topbar #logo .logo-wm{display:flex;flex-direction:column}
#topbar #logo .logo-wm>span{display:block;text-transform:none;margin-top:3px}
/* The ruled S: currentColor for the S, --accent for the record line, so it
   flips with the theme the same way the wordmark does. Square, like the files. */
#logo-mark{width:32px;height:32px;flex:none;display:block;color:var(--text-primary)}
.mk-rule{stroke:var(--accent)}.mk-dot{fill:var(--accent)}
/* The one metal gradient, defined once in the hidden SVG and referenced by
   the mark's rule, every bezel and every needle cap: url(#stj-metal). */
.mg1{stop-color:var(--metal-2)}.mg2{stop-color:var(--metal)}.mg3{stop-color:var(--metal-3)}
/* Sign in. Where "high value" is decided in two seconds: a lit room, the mark
   at full size, one line as the hero, the form on a sheet of the theme's own
   material (the card spec: one tone above the field, a hairline, the top catch
   at night, flat by day). Both columns keep one outer margin: the brand stack
   sits as far in from the left as the card, centred in its half, sits from the
   right. One control spec inside the card: fields and the button share a height,
   a radius and a hairline, and everything runs on the form's left edge. */
.auth-screen{position:fixed;inset:0;z-index:9000;background:var(--bg-base);display:flex;align-items:stretch;overflow:auto}
.auth-screen::before{content:"";position:absolute;inset:0;background:var(--atmos);pointer-events:none}
.auth-screen::after{content:"";position:absolute;inset:0;background:var(--auth-grid);-webkit-mask:var(--auth-grid-mask);mask:var(--auth-grid-mask);pointer-events:none}
.auth-left,.auth-right{position:relative;z-index:1;flex:1 1 50%;display:flex;flex-direction:column;justify-content:center;min-width:0}
.auth-left{padding:56px 6vw 72px max(24px,calc(25vw - 190px))}
.auth-right{align-items:center;padding:40px 24px}
.auth-mark-big{display:block;width:128px;height:128px;margin-left:-17px;color:var(--text-primary)}
.auth-lock{font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-secondary);margin-top:22px}
.auth-lock small{display:block;font-family:var(--font-num);font-size:11px;letter-spacing:.3em;color:var(--text-tertiary);margin-top:6px}
.auth-sent{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,3.06vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--text-primary);margin-top:44px;max-width:6.6em;text-wrap:balance}
.auth-foot{position:absolute;left:max(24px,calc(25vw - 190px));bottom:28px;font-family:var(--font-num);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-tertiary)}
.auth-paper{--auth-field:var(--bg-base);width:380px;max-width:100%;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r);padding:32px;box-shadow:inset 0 1px 0 var(--hi)}
.auth-eb{font-family:var(--font-num);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.auth-h{font-family:var(--font-display);font-size:var(--fs-5xl);font-weight:600;letter-spacing:-.015em;color:var(--text-primary);margin:10px 0 24px;line-height:1.1}
.auth-lbl{display:block;font-family:var(--font-num);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 8px}
.auth-paper .fi{height:44px;background:var(--auth-field);border:1px solid var(--border-strong);color:var(--text-primary);border-radius:var(--rs);margin-bottom:16px;box-shadow:none;caret-color:var(--accent);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.auth-paper .fi::placeholder{color:var(--text-tertiary);opacity:1}
.auth-paper .fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
/* A saved login keeps the field's own tone (the global autofill fix paints the card tone) and keeps the focus ring. */
.auth-paper .fi:-webkit-autofill,.auth-paper .fi:-webkit-autofill:hover{-webkit-box-shadow:inset 0 0 0 1000px var(--auth-field)!important;box-shadow:inset 0 0 0 1000px var(--auth-field)!important}
.auth-paper .fi:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 1000px var(--auth-field),0 0 0 3px var(--accent-dim)!important;box-shadow:inset 0 0 0 1000px var(--auth-field),0 0 0 3px var(--accent-dim)!important}
.auth-paper .pw-wrap{margin-bottom:16px}.auth-paper .pw-wrap .fi{margin-bottom:0;padding-right:44px}
.auth-paper .pw-eye{right:2px;padding:10px;color:var(--text-tertiary)}
.auth-paper .pw-eye:hover{color:var(--text-primary)}
.auth-paper .auth-btn{height:44px;margin-top:8px;font-size:14px;border-radius:var(--rs)}
.auth-paper .btn-p{background:var(--text-primary);color:var(--on-accent);border:1px solid transparent;box-shadow:none;filter:none;transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.auth-paper .btn-p:hover:not(:disabled){background-color:color-mix(in srgb,var(--text-primary) 92%,var(--bg-base));filter:none}
.auth-paper .btn-p:active{transform:scale(.98)!important;box-shadow:none!important}
.auth-paper .btn-p:disabled{cursor:default;transform:none!important}
@media(prefers-reduced-motion:reduce){.auth-paper .btn-p:active{transform:none!important}}
.auth-err{margin-top:12px;font-size:13px;line-height:1.45;color:var(--loss)}
.auth-ok{margin-top:10px;font-size:12px;line-height:1.45;color:var(--win)}
.auth-links{display:flex;justify-content:flex-start;align-items:baseline;gap:8px;margin-top:16px;font-size:12px;color:var(--text-tertiary)}
.auth-link{background:none;border:none;padding:0;font:inherit;font-size:12px;color:var(--text-secondary);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--border-strong);transition:color var(--dur-fast) var(--ease-standard),text-decoration-color var(--dur-fast) var(--ease-standard)}
.auth-link:hover{color:var(--text-primary);text-decoration-color:var(--text-tertiary)}
.auth-dot{opacity:.5}
.auth-legal{display:flex;justify-content:flex-start;align-items:baseline;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-tertiary)}
@media(max-width:820px){.auth-screen{flex-direction:column;align-items:stretch}.auth-left{flex:0 0 auto;padding:36px 41px 6px;align-items:flex-start}.auth-mark-big{width:64px;height:64px;margin-left:-8.5px}.auth-lock{margin-top:12px;font-size:12px}.auth-sent,.auth-foot{display:none}.auth-right{flex:1 1 auto;justify-content:safe center;padding:16px 16px 72px}.auth-paper{padding:24px}.auth-legal{position:absolute;left:41px;right:41px;bottom:24px;margin:0;padding:0;border-top:0}.auth-right:not(:has(.auth-legal)){padding-bottom:40px}}
/* Phones: the mark above, the card centred in the height that is left, the legal row at the screen's foot on the
   form's edge (it leaves the card for the foot, so the card holds only the form). Desktop: the brand column and the
   card share one top line. Both columns sit on one flex line centred in the screen (wrap + align-content), so both
   are as tall as the taller and start at the same top; the mark's glyph sits 17px inside its box, so the box rises
   17px and the glyph lands on the card's top edge. The foot stays on the screen's foot. */
@media(min-width:821px){.auth-screen{flex-wrap:wrap;align-content:safe center}.auth-left,.auth-right{justify-content:flex-start;padding-top:40px;padding-bottom:40px}.auth-mark-big{margin-top:-17px}.auth-foot{position:fixed}}
#tb-clock{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--text-primary)}
.tb-sync{height:26px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--rs);background:transparent;color:var(--text-secondary);font:500 12px var(--font-body);cursor:pointer;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.tb-sync:hover{color:var(--text-primary);border-color:var(--accent-border)}
.tb-sync[hidden]{display:none}
#tb-clock .tb-clock-r{text-align:right;line-height:1}
#sb-sess{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rs);padding:2px 8px;font-family:var(--font-num)}
#sb-time{font-family:var(--font-num);font-size:15px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums}
#sb-tz-label{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-top:3px;font-family:var(--font-num)}
/* ── App-wide glow (ported from reimagine-prototype) ─────────────────────────
   The atmosphere used to exist only on Insights, so every other page opened on
   flat #0a141f and the app disagreed with itself the moment you switched tabs.
   One fixed viewport layer behind everything, same five fields as the
   prototype. The old per-page Insights glow is retired below rather than
   deleted (one display:none beats slicing a 60-line commented block). */
#app-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(920px 540px at 78% -60px, rgba(237,242,247,.13) 0%, rgba(237,242,247,.05) 40%, rgba(237,242,247,0) 78%),
    radial-gradient(780px 480px at 12% 4%,   rgba(237,242,247,.10)  0%, rgba(237,242,247,.04)  42%, rgba(237,242,247,0)  80%),
    radial-gradient(900px 720px at 20% 52%,  rgba(237,242,247,.05)  0%, rgba(237,242,247,0)   72%),
    radial-gradient(880px 700px at 84% 64%,  rgba(237,242,247,.05) 0%, rgba(237,242,247,0)  74%),
    radial-gradient(940px 760px at 34% 96%,  rgba(237,242,247,.05)  0%, rgba(237,242,247,0)   76%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 92%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 92%,rgba(0,0,0,0) 100%)}
:root[data-theme="light"] #app-glow{opacity:.55}
/* Fathom: never a coloured haze. The room is lit by --atmos on body::before alone. */
#app-glow{display:none}
#pg-insights::before{display:none}
#rail{position:fixed;top:0;left:0;bottom:0;width:66px;background:var(--nav-rail);z-index:120;display:flex;flex-direction:column;align-items:center;padding-top:62px;padding-bottom:10px;border-right:1px solid var(--border);box-shadow:inset -1px 0 0 var(--accent-dim)}
/* Glass over the glow (dark only). Nothing scrolls behind the rail, so the
   blur cost is a one-off; light mode keeps its solid gradient. */
:root:not([data-theme="light"]) #rail{background:rgba(13,20,32,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#sb-log-btn.rail-cta{position:relative;width:46px;height:46px;border-radius:var(--r-card);border:none;display:flex;align-items:center;justify-content:center;gap:0;cursor:pointer;color:var(--on-accent);background:none;isolation:isolate;margin:0 0 12px;font-family:inherit}
/* The + is one control in three states. Its fill sits on ::before and the
   fill step on ::after, so a press scales the cap and its glyph and never the
   tooltip beside it. Hover: the field mixed in at 8%, in 150ms. Press: .96
   and 16%, in 100ms, held while down; the release returns in 150ms. */
#sb-log-btn.rail-cta::before,#sb-log-btn.rail-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
#sb-log-btn.rail-cta::before{z-index:-1;background:var(--accent-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.35)}
#sb-log-btn.rail-cta::after{background:var(--bg-base);opacity:0}
@media(hover:hover){#sb-log-btn.rail-cta:hover::after{opacity:.08}}
#sb-log-btn.rail-cta svg{width:20px;height:20px;flex:none;transition:transform var(--dur-fast) var(--ease-out)}
#sb-log-btn.rail-cta:active::before,#sb-log-btn.rail-cta:active::after,#sb-log-btn.rail-cta:active svg{transform:scale(.96);transition-duration:.1s}
#sb-log-btn.rail-cta:active::after{opacity:.16}
#sb-log-btn.rail-cta.on::before{box-shadow:0 0 0 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){#sb-log-btn.rail-cta:active::before,#sb-log-btn.rail-cta:active::after,#sb-log-btn.rail-cta:active svg{transform:none}}
#rail-nav{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.rail-sec{position:relative;width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;transition:background-color var(--dur-press) var(--ease-standard),color var(--dur-press) var(--ease-standard),transform var(--dur-press) var(--ease-out)}
.rail-sec:hover{background:var(--bg-hover);color:var(--text-primary)}
.rail-sec:active{transform:scale(.98)}
.rail-sec.active{background:var(--tint-1);color:var(--text-primary)}
.rail-sec.active::before{content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--metal-rule-v)}
.rail-sec svg{width:22px;height:22px;stroke:currentColor}
.rail-grow{flex:1}
.rail-sep{width:30px;height:1px;background:var(--border);margin:6px 0 10px}
.rail-av #sb-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--border-strong);display:flex;align-items:center;justify-content:center}
.rail-badge{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:var(--rs);background:var(--accent);box-shadow:0 0 0 2px var(--nav-rail-solid)}
.rail-tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px);background:var(--nav-rail-solid);color:var(--text-primary);border:1px solid var(--border-strong);font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--rs);white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;z-index:140;transition:opacity var(--dur-panel-out) var(--ease-in),transform var(--dur-panel-out) var(--ease-in)}
/* A tip leaves its icon: it comes 4px out from the rail as it fades in. */
@media(hover:hover){#rail .rail-cta:hover .rail-tip,#rail .rail-sec:hover .rail-tip,#rail .rail-av:hover .rail-tip{opacity:1;transform:translateY(-50%);transition:opacity var(--dur-panel) var(--ease-out),transform var(--dur-panel) var(--ease-out)}body.nav-open .rail-tip{opacity:0!important}}
#navpanel{position:fixed;top:0;left:66px;bottom:0;width:228px;background:var(--nav-panel);z-index:115;border-right:1px solid var(--border);box-shadow:8px 0 28px rgba(0,0,0,.28);padding-top:62px;padding-bottom:12px;display:flex;flex-direction:column;pointer-events:none}
body.nav-open #navpanel{pointer-events:auto}
/* The menu panel arrives in one move (240ms, easing out): its surface is opaque on every frame and opens
   out of the rail's edge as it travels the last 12px, and what it says fades in with it, every label in
   the same move. The scrim keeps step. It goes back in 170ms, easing in. (A phone shows it as a sheet.) */
@media not all and (max-width:768px){
  #navpanel{transform:translateX(-12px);clip-path:inset(0 100% 0 0);visibility:hidden;transition:transform var(--dur-panel-out) var(--ease-in),clip-path var(--dur-panel-out) var(--ease-in),visibility 0s var(--dur-panel-out)}
  body.nav-open #navpanel{transform:none;clip-path:inset(0 -48px 0 0);visibility:visible;transition:transform var(--dur-panel) var(--ease-out),clip-path var(--dur-panel) var(--ease-out),visibility 0s}
  #navpanel>*{opacity:0;transition:opacity var(--dur-panel-out) var(--ease-in)}
  body.nav-open #navpanel>*{opacity:1;transition:opacity var(--dur-panel) var(--ease-out)}
}
/* Switching sections in the open panel: the box holds still and never empties; what it says cross-fades
   with a 4px shift, the way a page does: the old words clear in 90ms, the new ones start 40ms in and
   settle in 150ms. The outgoing words are a copy laid over the new ones. */
.np-ghost{position:absolute;inset:0;display:flex;flex-direction:column;padding:inherit;pointer-events:none;animation:np-out var(--dur-leave) var(--ease-in) both}
#navpanel.np-swap>#navpanel-hd,#navpanel.np-swap>#navpanel-st,#navpanel.np-swap>#navpanel-subs{animation:np-in var(--dur-fast) var(--ease-out) 40ms both}
@keyframes np-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes np-in{from{opacity:0;transform:translateY(4px)}}
#navpanel-hd,.np-g-hd{padding:0 18px 10px;color:var(--text-tertiary);font-size:11px;letter-spacing:.10em;text-transform:uppercase;font-weight:400;font-family:var(--font-num)}
#navpanel-st,.np-g-st{padding:0 18px 12px;margin:0 0 10px;font-size:12.5px;line-height:1.4;color:var(--text-secondary);border-bottom:1px solid var(--border);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#navpanel-subs,.np-g-subs{display:flex;flex-direction:column;gap:2px;padding:0 10px;overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:none}
#navpanel-subs::-webkit-scrollbar,.np-g-subs::-webkit-scrollbar{display:none}
.nav-sub{position:relative;display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:var(--r);cursor:pointer;color:var(--text-secondary);white-space:nowrap;transition:background-color var(--dur-press) var(--ease-standard),color var(--dur-press) var(--ease-standard),transform var(--dur-press) var(--ease-out)}
button.rail-sec{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;background:transparent;font:inherit}
button.nav-sub{-webkit-appearance:none;appearance:none;border:0;margin:0;width:100%;background:transparent;font:inherit;text-align:left}
.nav-sub:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-sub:active{transform:scale(.98)}
.nav-sub svg{width:19px;height:19px;flex:none;stroke:currentColor}
.nav-sub .t{font-size:13.5px;font-weight:500;color:inherit}
.nav-sub.active{background:var(--tint-1);color:var(--text-primary)}
.nav-sub.active::before{content:"";position:absolute;left:0;width:3px;height:20px;border-radius:4px;background:var(--metal-rule-v)}
.nav-sub .subn{margin-left:auto;font-family:var(--font-num);font-size:11px;color:var(--text-tertiary)}
.nav-sub.active .subn{color:var(--text-secondary)}
.nav-gap{flex:none;height:1px;margin:6px 12px;background:var(--border)}
/* Text drawn inside the SVG rings and gauges (the win-rate ring, the drawdown
   gauge): figures in the figure face, labels in tertiary ink. A class, since an
   SVG presentation attribute can't read a CSS variable. */
.svg-fig{font-family:var(--font-num)}
.svg-lbl{font-family:var(--font-num);fill:var(--text-tertiary)}
/* Reorganise: a panel that changes place slides there (see _flipMove). */
.flip-moving{transition:transform .42s var(--ease-out)}
@media(prefers-reduced-motion:reduce){.flip-moving{transition:none}}
/* Role-tinted nav items (Admin / Moderator / Affiliates / My Affiliate) keep their
   own hue at rest, hover and active instead of the generic accent. */
.nav-sub.tinted{color:var(--tint)}
.nav-sub.tinted:hover{background:var(--tint-dim);color:var(--tint)}
.nav-sub.tinted.active{background:var(--tint-dim);color:var(--tint)}
.nav-sub.tinted.active::before{background:var(--tint)}
.rail-sec.tinted{color:var(--tint)}
.rail-sec.tinted:hover{background:var(--tint-dim);color:var(--tint)}
.rail-sec.tinted.active{background:var(--tint-dim);color:var(--tint)}
.rail-sec.tinted.active::before{background:var(--tint)}
#navpanel-foot{padding:10px 18px 2px;border-top:1px solid var(--border)}
#navpanel-foot #sync-status{color:var(--text-tertiary);font-size:11px;display:flex;align-items:center;gap:5px}
#navpanel-foot #sync-dot{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);display:inline-block}
#nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.34);opacity:0;pointer-events:none;z-index:110;transition:opacity var(--dur-panel-out) var(--ease-in)}
body.nav-open:not(.nav-pinned) #nav-scrim{opacity:1;pointer-events:auto;transition:opacity var(--dur-base) var(--ease-out)}
@media(prefers-reduced-motion:reduce){#navpanel,#navpanel>*,#nav-scrim,#main,.rail-sec,.tb-burger .bl span,.rail-tip{transition:none}.np-ghost{display:none}#navpanel.np-swap>*{animation:none}}
/* ── Weekly review layout ───────────────────────────────────────────────── */
.wr-topbar{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:18px}
.wr-weeknav{display:flex;align-items:center;gap:var(--sp-2)}
.wr-heroband{display:flex;align-items:center;gap:var(--sp-6);padding:22px 26px;margin-bottom:14px;flex-wrap:wrap}
.wr-hb-main{min-width:150px}
.wr-hb-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;font-family:var(--font-num)}
.wr-hb-val{font-size:40px;font-weight:800;line-height:1.02;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wr-hb-sub{font-size:11.5px;color:var(--text-tertiary);margin-top:4px}
.wr-hb-side{display:flex;gap:var(--sp-6);margin-left:auto;flex-wrap:wrap}
.wr-hb-stat{min-width:96px}
.wr-hb-slbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;font-family:var(--font-num)}
.wr-hb-sval{font-size:22px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
.wr-hb-ssub{font-size:11px;color:var(--text-tertiary);margin-top:2px}
@media(max-width:640px){.wr-heroband{gap:var(--sp-4)}.wr-hb-side{margin-left:0;width:100%}.wr-hb-val{font-size:34px}}
/* ── Weekly AI review ───────────────────────────────────────────────────── */
.wr-ai{padding:28px 30px}
.wr-ai-idle-t{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:5px}
.wr-ai-idle-p{font-size:13px;color:var(--text-secondary);line-height:1.6;max-width:520px;margin-bottom:14px}
.wr-ai-note{font-size:11.5px;color:var(--text-tertiary);margin-top:10px;line-height:1.5}
.wr-ai-loading-t{font-size:12px;color:var(--text-tertiary);margin-top:12px;letter-spacing:.02em}
.wr-sk{height:12px;border-radius:var(--rs);margin-bottom:10px;background:linear-gradient(90deg,var(--bg-hover) 25%,var(--bg-surface) 37%,var(--bg-hover) 63%);background-size:400% 100%}
@media(prefers-reduced-motion:no-preference){.wr-sk{animation:wrShimmer 1.4s ease infinite}}
.wr-sk.short{width:62%}
@keyframes wrShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.wr-ai-out{max-width:68ch}
.wr-ai-out p{font-size:14px;line-height:1.8;color:var(--text-primary);margin:0 0 15px}
.wr-ai-out p:last-child{margin-bottom:0}
.wr-ai-out p.wr-disc{font-size:11px;color:var(--text-tertiary);line-height:1.55;border-top:1px solid var(--border);padding-top:11px;margin-top:16px}
@media(prefers-reduced-motion:no-preference){.wr-ai-out p{animation:wrPara .4s var(--ease-standard) both}}
@keyframes wrPara{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wr-ai-foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-tertiary)}
.wr-ai-regen{margin-left:auto;background:none;border:1px solid var(--border);color:var(--text-secondary);font-family:inherit;font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:var(--rm);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.wr-ai-regen:hover{border-color:var(--border-strong);color:var(--text-primary)}
.wr-nlist{display:flex;flex-direction:column;gap:var(--sp-2)}
.wr-nrow{display:flex;gap:12px;align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);padding:11px 13px;cursor:pointer;transition:border-color var(--dur-fast)}
.wr-nrow:hover{border-color:var(--border-strong)}
.wr-nrow-t{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:3px}
.wr-nrow-b{font-size:12.5px;color:var(--text-secondary);line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wr-nrow-tr{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wr-nrow-tr .nb-tchip{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:2px 9px}
.wr-nempty{font-size:12.5px;color:var(--text-tertiary);background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--rm);padding:16px;text-align:center;line-height:1.6}
.wr-nempty a{color:var(--accent);cursor:pointer;font-weight:600}
/* ── Review History cards ───────────────────────────────────────────────── */
.rhc{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:18px 20px;margin-bottom:14px}

/* ── Reviews: use the width, without stretching the prose ──────────────────
   This page is cards, not rows, so the 1680px cap on .pg left ~400px of dead
   space each side on a 2560px monitor — content filling barely two thirds of
   the screen.
   Raising the cap alone would have made it WORSE: a review paragraph already
   ran 232 characters per line at 1680, about three times a comfortable
   measure. So the extra width buys COLUMNS instead of longer lines.
   auto-fill with a 620px floor means the count follows the screen — one card
   on a laptop exactly as before, two around 1680, three on a wide monitor —
   and the measure gets SHORTER as the page gets wider, which is the opposite
   of what it did. */
#pg-reviews{max-width:2100px}
#rh-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(620px,100%),1fr));gap:16px;align-items:start}
#rh-cards > .rhc{margin-bottom:0}
/* The empty state is one message, not a card in a grid — let it span. */
#rh-cards > .rhc-empty{grid-column:1/-1}
@media(prefers-reduced-motion:no-preference){.rhc{animation:nbIn .3s var(--ease-standard) both}}
.rhc-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:14px}
.rhc-week{font-size:14px;font-weight:700;color:var(--text-primary)}
.rhc-when{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.rhc-del{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:13px;line-height:1;padding:4px 6px;border-radius:var(--rs);flex:none}
.rhc-del:hover{color:var(--loss);background:var(--loss-dim)}
.rhc-nums{display:flex;gap:var(--sp-6);flex-wrap:wrap;padding:12px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);margin-bottom:14px}
.rhc-stat{display:flex;flex-direction:column;gap:2px;min-width:64px}
.rhc-slbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;font-family:var(--font-num)}
.rhc-sval{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.rhc-rev{max-height:5.6em;overflow:hidden;position:relative}
.rhc-rev.open{max-height:1600px}
.rhc-rev:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2em;background:linear-gradient(180deg,transparent,var(--bg-elevated))}
.rhc-rev p{font-size:13.5px;line-height:1.7;color:var(--text-primary);margin:0 0 11px}
.rhc-rev p:last-child{margin-bottom:0}
.rhc-rev p.rhc-disc{font-size:11px;color:var(--text-tertiary);line-height:1.55;border-top:1px solid var(--border);padding-top:10px;margin-top:6px}
.rhc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:12px}
.rhc-more{background:none;border:none;color:var(--accent);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0}
.rhc-open{background:none;border:1px solid var(--border);color:var(--text-secondary);font-family:inherit;font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--rm);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.rhc-open:hover{border-color:var(--border-strong);color:var(--text-primary)}
.rhc-empty{text-align:center;padding:56px 20px;color:var(--text-tertiary)}
.rhc-empty h3{font-size:16px;font-weight:700;color:var(--text-primary);margin:14px 0 6px}
.rhc-empty p{font-size:13px;max-width:360px;margin:0 auto 18px;line-height:1.6}
/* ── Notebook ───────────────────────────────────────────────────────────── */
.nb-bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:18px}
.nb-search{position:relative;flex:1;min-width:180px;max-width:320px}
.nb-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none}
.nb-search input{width:100%;height:36px;padding:0 12px 0 32px;border-radius:var(--rm);background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);font-family:inherit;font-size:13px;transition:border-color var(--dur-fast)}
.nb-search input:focus{outline:none;border-color:var(--accent-border)}
.nb-filters{display:flex;gap:2px;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0}
.nb-fil{border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--text-tertiary);font-family:inherit;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:0;cursor:pointer;transition:color var(--dur-fast)}
.nb-fil:hover{color:var(--text-primary)}
.nb-fil.on{background:transparent;color:var(--text-primary);border-width:0 0 2px;border-style:solid;border-color:transparent;border-image:var(--metal-rule) 1}
.nb-grid{display:flex;flex-direction:column;gap:var(--sp-4)}
.nb-month{}
.nb-month-hd{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 2px 10px;border-bottom:1px solid var(--border);margin-bottom:14px;user-select:none}
.nb-month-hd .nb-mchv{color:var(--text-tertiary);transition:transform var(--dur-base) var(--ease-standard);flex:none}
.nb-month-hd.closed{border-bottom-color:transparent;margin-bottom:0}
.nb-month-hd.closed .nb-mchv{transform:rotate(-90deg)}
.nb-month-hd .nb-mname{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:.01em}
.nb-month-hd .nb-mcount{font-size:11px;color:var(--text-tertiary);font-weight:500}
.nb-month-hd:hover .nb-mname{color:var(--accent)}
.nb-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--sp-3)}
.nb-month-body.closed{display:none}
.nb-card{position:relative;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:15px 16px;cursor:pointer;min-height:132px;display:flex;flex-direction:column;gap:7px;transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-standard)}
.nb-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.nb-card:active{transform:translateY(0) scale(.99)}
.nb-card-t{font-size:14px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-card-t.untitled{color:var(--text-tertiary);font-weight:500;font-style:italic}
.nb-card-b{font-size:12.5px;color:var(--text-secondary);line-height:1.55;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.nb-card-f{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;font-family:var(--font-num)}
.nb-chip{padding:2px 8px;border-radius:var(--rs);background:var(--bg-hover);color:var(--text-secondary)}
.nb-chip.wk{background:var(--accent-dim);color:var(--accent)}
.nb-empty{text-align:center;padding:60px 20px;color:var(--text-tertiary)}
.nb-empty h3,.nb-empty .nb-empty-h{font-size:16px;font-weight:600;color:var(--text-primary);margin:14px 0 6px}
.nb-empty p{font-size:13px;max-width:340px;margin:0 auto 18px;line-height:1.6}
@media(prefers-reduced-motion:no-preference){.nb-card{animation:nbIn .3s var(--ease-standard) both}}
@keyframes nbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* editor */
#nb-mo .nb-editor{width:min(680px,94vw);max-height:88vh;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:no-preference){#nb-mo .nb-editor{animation:nbEdIn .22s var(--ease-standard) both}}
@keyframes nbEdIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.nb-ed-top{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.nb-ed-title{flex:1;background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:18px;font-weight:700;padding:0}
.nb-ed-title:focus{outline:none}
.nb-ed-title::placeholder{color:var(--text-tertiary);font-weight:500}
.nb-saved{font-size:11px;letter-spacing:.10em;text-transform:uppercase;font-weight:400;color:var(--win);opacity:0;transition:opacity .25s;font-family:var(--font-num)}
.nb-saved.show{opacity:1}
.nb-ed-x{background:none;border:none;color:var(--text-tertiary);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:var(--rs);line-height:1}
.nb-ed-x:hover{color:var(--text-primary);background:var(--bg-hover)}
.nb-ed-meta{display:flex;align-items:center;gap:var(--sp-2);padding:0 16px 10px;flex-wrap:wrap}
.nb-ed-date{font-size:11.5px;color:var(--text-tertiary);font-weight:500}
.nb-linkbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:none;color:var(--text-secondary);font-family:inherit;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:var(--rs);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.nb-linkbtn:hover{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim)}
.nb-linked{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px}
.nb-linked:not(:empty){padding-bottom:10px}
.nb-linkchip{display:inline-flex;align-items:center;gap:4px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:3px 4px 3px 9px}
.nb-linkx{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:11px;line-height:1;padding:2px 4px;border-radius:50%}
.nb-linkx:hover{color:var(--loss);background:var(--loss-dim)}
.nb-tchip{font-size:11.5px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.nb-tchip b{color:var(--text-primary);font-weight:700}
.nb-tchip-d{color:var(--text-tertiary);font-size:11px}
.nb-picker{margin:0 16px 12px;border:1px solid var(--border);border-radius:var(--rm);background:var(--bg-surface);overflow:hidden}
.nb-picker-search{padding:9px 10px;border-bottom:1px solid var(--border)}
.nb-picker-search input{width:100%;height:32px;padding:0 10px;border-radius:var(--rm);background:var(--bg-base);border:1px solid var(--border);color:var(--text-primary);font-family:inherit;font-size:12.5px}
.nb-picker-search input:focus{outline:none;border-color:var(--accent-border)}
.nb-picker-list{max-height:210px;overflow-y:auto}
.nb-prow{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background var(--dur-fast)}
.nb-prow:last-child{border-bottom:none}
.nb-prow:hover{background:var(--bg-hover)}
.nb-prow.on{background:var(--accent-dim)}
.nb-prow-check{width:16px;flex:none;color:var(--accent);font-weight:700;font-size:13px}
.nb-prow-date{font-size:12px;color:var(--text-secondary)}
.nb-prow-r{margin-left:auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.nb-picker-empty{padding:16px;text-align:center;font-size:12px;color:var(--text-tertiary)}
.nb-chip.tr{background:var(--bg-hover);color:var(--text-secondary)}
.nb-del{margin-left:auto;background:none;border:none;color:var(--text-tertiary);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:var(--rs)}
.nb-del:hover{color:var(--loss);background:var(--loss-dim)}
.nb-ed-body{flex:1;min-height:280px;resize:none;background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:14px;line-height:1.7;padding:16px;overflow-y:auto}
.nb-ed-body:focus{outline:none}
.nb-ed-body::placeholder{color:var(--text-tertiary)}
.acct-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
#acct-form{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);align-items:center;justify-content:center}
#acct-form.open{display:flex}
.acct-modal-card{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r);padding:28px;width:90%;max-width:420px;box-shadow:var(--el-5);}
.acct-modal-hd{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:22px}
.acct-modal-icon{width:36px;height:36px;border-radius:var(--rm);background:var(--accent-dim);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acct-modal-title{font-size:16px;font-weight:600;color:var(--text-primary)}
.acct-modal-sub{font-size:12px;color:var(--text-tertiary);margin-top:1px}
.acct-modal-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;display:block;margin-bottom:5px;font-family:var(--font-num)}
.acct-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2-5);margin-bottom:20px}
.acct-modal-btns{display:flex;gap:var(--sp-2-5);margin-top:22px}
.acct-inp{width:100%;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--rs);height:36px;padding:0 10px;font-size:13px;color:var(--text-primary);font-family:var(--font-body);box-sizing:border-box;transition:border-color var(--dur-fast)}
.acct-inp:focus{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.35);border-color:var(--accent-border)}
#main{position:relative;z-index:1;margin-left:66px;flex:1;overflow-y:auto;height:100vh;padding:76px 36px 36px}
body.nav-pinned #main{margin-left:294px}
.pg{display:none;will-change:opacity,transform;
  /* Pages are tuned for laptop widths; unbounded they stretch to fill any
     monitor (2400px+ settings rows and chat lines on a 27" display — the same
     failure the landing hero had). One cap here covers every page, current
     and future. Below 1680px of content width nothing changes. */
  max-width:1680px;margin-inline:auto}
.pg.on{display:block}
/* The page change (navigateTo) is one composed move, with the rail and the top bar held still. The
   page leaving is lifted out of the flow where it stands (pinned to the screen, so it adds nothing to
   the scroll) and clears in 90ms, easing in. The page arriving starts 40ms later, so no frame is ever
   empty, and rises 10px to rest as it fades in (280ms, easing out). Everything on it rides that one
   move: its cards, its banner, and the record's first draw, whose stroke starts with the page and
   lands by ~450ms instead of trailing it to 900. */
.pg.pg-lift{position:fixed;margin:0;pointer-events:none}
.pg.pg-out{animation:pg-out var(--dur-leave) var(--ease-in) both}
.pg.pg-in{animation:pg-in var(--dur-page) var(--ease-out) 40ms both}
@keyframes pg-out{to{opacity:0}}
@keyframes pg-in{from{opacity:0;transform:translateY(10px)}}
.pg .rec-chart.draw path.ln{animation-duration:.4s;animation-delay:40ms}
.pg .rec-chart.draw path.ar{animation-duration:.25s;animation-delay:.2s}
@media(prefers-reduced-motion:reduce){.pg.pg-in,.pg.pg-out{animation:none}}
/* The theme switch: every surface cross-fades from one theme to the other at once (280ms) and nothing
   moves. Where the browser has no view transitions, the colours themselves cross-fade for as long. */
:root.theme-vt::view-transition-old(root),:root.theme-vt::view-transition-new(root){animation-duration:var(--dur-theme);animation-timing-function:var(--ease-standard)}
:root.theme-fade,:root.theme-fade *,:root.theme-fade *::before,:root.theme-fade *::after{transition:background-color var(--dur-theme) var(--ease-standard),color var(--dur-theme) var(--ease-standard),border-color var(--dur-theme) var(--ease-standard),fill var(--dur-theme) var(--ease-standard),stroke var(--dur-theme) var(--ease-standard)!important}
.ph{margin-bottom:32px}
.pt{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.ps{font-size:13px;color:var(--text-secondary);margin-top:4px}
/* Light mode opts out of the panel demotion: measured, dropping cards from
   white to #eaeff3 pushed ten marginal colours under AA (40 -> 50 failures)
   while the same demotion IMPROVED dark by fifteen. Light keeps white cards;
   its hero separation comes from elevation alone. */
:root[data-theme="light"] .card,:root[data-theme="light"] .cc,:root[data-theme="light"] .kc{background:var(--bg-elevated)}
/* 3-layer stage (reimagine brief): canvas -> panel cards -> ONE raised hero.
   Cards drop from elevated to panel so the hero's elevation means something,
   and padding tightens to the dashboard scale app-wide. */
/* Finish III, materials: one surface, one edge. A panel is flat elevated
   surface with the 1px top catch and a hairline; no shadow at rest, no
   gradient, and it does not lift on hover — hover belongs to what responds.
   One object per page is raised (--el-hero): the page's instrument. */
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:var(--sp-3);box-shadow:inset 0 1px 0 var(--hi)}

/* Hero card — the one focal point per page, echoes .es-card's treatment */
.card-hero{position:relative;background:var(--bg-elevated);border-color:var(--border-strong)!important;box-shadow:var(--el-hero)}
.ct{font-family:var(--font-num);font-size:11px;color:var(--text-tertiary);letter-spacing:.10em;font-weight:400;text-transform:uppercase}
.chv{color:var(--text-tertiary);font-size:11px;transition:transform var(--dur-base)}
.chv.open{transform:rotate(180deg)}
.cb{margin-top:14px}.cb.cld{display:none}
.dz{background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--r);padding:14px 18px;margin-bottom:12px}
.cl{list-style:none}
.cl li{display:flex;align-items:flex-start;gap:var(--sp-2-5);padding:7px 0;border-bottom:1px solid var(--tint-1);font-size:13px;color:var(--text-secondary);transition:color var(--dur-fast)}
.cl li:last-child{border-bottom:none}
.cl li.done{color:var(--text-tertiary);text-decoration:line-through}
.cl input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;min-width:17px;border:2px solid rgba(255,255,255,.18);border-radius:50%;background:transparent;cursor:pointer;margin-top:2px;flex-shrink:0;transition:background var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base)}
.cl input[type=checkbox]:hover:not(:checked){border-color:var(--accent-border);background:var(--accent-dim)}
.cl input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:9px 7px;box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.prog-date{font-size:13px;color:var(--text-secondary)}
.prog-txt{font-size:12px;color:var(--accent);letter-spacing:.04em;white-space:nowrap}
.prog-track{flex:1;max-width:160px;height:2px;background:var(--tint-2);border-radius:2px}
.prog-fill{height:100%;width:100%;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s}
/* Real text buttons at full opacity (the ghost links measured 2.5:1). */
.prog-reset{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;background:transparent;border:none;border-radius:0;font-family:var(--font-body);padding:2px 0;letter-spacing:.01em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--border-strong);transition:color var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out)}
.prog-reset:hover{color:var(--text-primary);text-decoration-color:var(--accent)}
.prog-reset svg{transition:transform .3s var(--ease-out)}
.prog-reset:hover svg{transform:rotate(-180deg)}
/* Session row */
@keyframes scr-pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* ── Session Pills ───────────────────────────────────────────────────────── */
.sess-timeline{margin-top:14px;}
.sess-pills{display:flex;gap:var(--sp-1);}
/* The session row is a timeline, the same in both themes: the names sit on a
   ruled line and each session's progress is drawn on it, neutral once it has
   passed and in the accent while it is live. No boxes and no shimmer: a live
   session is a solid state. */
.spill{position:relative;overflow:hidden;border:0;border-bottom:1px solid var(--border-strong);border-radius:0;padding:6px 2px 8px;background:transparent;flex:1;min-width:0;cursor:default;}
.spill-fill{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--text-tertiary);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);}
.spill-name{position:relative;z-index:1;font-family:var(--font-num);font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;display:block;text-align:center;color:var(--text-tertiary);white-space:nowrap;transition:color var(--dur-base);}
.spill[data-state="live"] .spill-fill{background:var(--accent);}
.spill[data-state="live"] .spill-name{color:var(--text-primary);}
.stl-summary{font-size:11px;color:var(--text-tertiary);margin-top:6px;line-height:1.5;min-height:15px;}
.stl-summary b{color:var(--text-secondary);font-weight:600;}
.today-empty{font-size:13px;color:var(--text-tertiary);font-style:italic;padding:4px 0}
.rules-empty{font-size:13px;color:var(--text-tertiary);font-style:italic;padding:4px 0}
.rules-section{margin-bottom:14px}
.rules-section:last-child{margin-bottom:0}
.rules-section-title{font-size:11px;font-weight:400;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.10em;margin-bottom:8px;font-family:var(--font-num)}
.rules-text-content{font-size:13px;color:var(--accent);line-height:1.75;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rm);padding:12px 14px;}
.rules-check-item{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer}
.rules-check-item:last-child{border-bottom:none}
.rules-check-item input[type=checkbox]{flex-shrink:0;width:19px;height:19px;margin-top:1px;cursor:pointer;appearance:none;-webkit-appearance:none;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:transparent;transition:background var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base);}
.rules-check-item input[type=checkbox]:hover:not(:checked){border-color:var(--accent-border);background:var(--accent-dim);}
.rules-check-item input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px 8px;box-shadow:0 0 0 3px rgba(0,0,0,.35);}
.rules-check-item .rc-text{font-size:13px;color:var(--text-secondary);line-height:1.5;transition:color var(--dur-base),opacity var(--dur-base)}
.rules-check-item.checked .rc-text{color:var(--text-tertiary);opacity:.6;text-decoration:line-through;text-decoration-color:var(--accent-border)}
.rules-progress{font-size:11px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
/* Rules editor */
.re-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}
.re-section-hd{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:12px}
.re-type-pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 9px;border-radius:4px;flex-shrink:0}
.re-type-pill.checklist{background:var(--accent-dim);color:var(--accent)}
.re-type-pill.text{background:var(--win-dim);color:var(--win)}
.re-item-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;border-radius:var(--rs);transition:background var(--dur-fast)}
.re-add-item{background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;font-family:var(--font-body);display:block;margin-top:4px}
.re-drag-handle{color:var(--text-tertiary);cursor:grab;font-size:16px;flex-shrink:0;user-select:none;padding:0 1px;line-height:1;transition:color var(--dur-fast)}
.re-drag-handle:hover{color:var(--text-secondary)}
.re-drag-handle:active{cursor:grabbing}
.re-dragging{opacity:.3;transition:opacity var(--dur-fast);}
.re-insert-line{height:2px;background:var(--accent);border-radius:2px;margin:3px 0;pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.35);animation:re-line-pop .12s ease;}
.re-insert-line-item{height:2px;background:var(--accent);border-radius:2px;margin:2px 0;pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.35);animation:re-line-pop .12s ease;}
@keyframes re-line-pop{from{opacity:0;transform:scaleX(.6)}to{opacity:1;transform:scaleX(1)}}
/* CSV Import */
.csv-drop-zone{border:2px dashed var(--border);border-radius:var(--r-card);padding:44px 24px;text-align:center;cursor:pointer;transition:border-color var(--dur-base),background var(--dur-base)}
.csv-drop-zone:hover,.csv-drop-zone.drag-over{border-color:var(--accent);background:var(--accent-dim)}
.csv-map-tbl{width:100%;border-collapse:collapse}
.csv-map-tbl th{font-size:11px;font-weight:400;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.10em;padding:0 10px 8px;text-align:left;font-family:var(--font-num)}
.csv-map-tbl td{padding:4px 8px 4px;vertical-align:middle}
.csv-map-tbl tr:not(:last-child) td{border-bottom:1px solid var(--border)}
.csv-prev-tbl{width:100%;border-collapse:collapse}
.csv-prev-tbl th{background:var(--bg-surface);color:var(--text-secondary);padding:7px 10px;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.10em;border-bottom:1px solid var(--border);text-align:left;font-family:var(--font-num)}
.csv-prev-tbl td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-secondary)}
.csv-prev-tbl tr:last-child td{border-bottom:none}
.csv-stat-pill{border-radius:var(--rm);padding:9px 16px;font-size:13px;font-weight:700;display:inline-block}
/* CSV Import — premium wizard */
.csv-stepper{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.csv-step{display:flex;align-items:center;gap:8px;flex:1}
.csv-step-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-tertiary);transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.csv-step.done .csv-step-dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.csv-step.active .csv-step-dot{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.csv-step-lbl{font-size:11px;font-weight:600;color:var(--text-tertiary);white-space:nowrap}
.csv-step.active .csv-step-lbl,.csv-step.done .csv-step-lbl{color:var(--text-secondary)}
.csv-step-bar{flex:1;height:1px;background:var(--border);position:relative;overflow:hidden}
.csv-step-bar::after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.csv-step.done .csv-step-bar::after{transform:scaleX(1)}
.csv-plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.csv-plat-group{margin-top:12px}
.csv-plat-glbl{font-size:11px;font-weight:400;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.10em;margin-bottom:6px;font-family:var(--font-num)}
.csv-plat-group .csv-plat-grid{margin-top:0;grid-template-columns:repeat(4,1fr)}
@media(max-width:480px){.csv-plat-group .csv-plat-grid{grid-template-columns:repeat(2,1fr)}}
.csv-fut-check{border:1px solid var(--border);border-radius:var(--rm);background:var(--bg-surface);padding:10px 14px 2px;margin-bottom:16px}
.csv-fut-title{font-size:11px;font-weight:400;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.10em;margin-bottom:2px;font-family:var(--font-num)}
.csv-fut-row{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:8px 0;font-size:12px;line-height:1.55}
.csv-fut-row:not(:last-child){border-bottom:1px solid var(--border)}
.csv-fut-h{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.10em;color:var(--text-tertiary);padding-top:2px;font-family:var(--font-num)}
.csv-fut-t{color:var(--text-secondary)}
.csv-fut-t b{color:var(--text-primary);font-weight:600}
.csv-fut-row.warn .csv-fut-h{color:var(--amber)}
.csv-prev-sub{display:block;font-size:11px;color:var(--text-tertiary);font-weight:500;margin-top:1px}
.csv-tz-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:12px;color:var(--text-secondary)}
.csv-tz-row .fs{height:30px;font-size:12px;width:auto;min-width:180px}
.csv-tz-eg{color:var(--text-tertiary);font-size:11px}
.csv-plat{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px;border:1px solid var(--border);border-radius:var(--rm);background:var(--bg-surface);cursor:pointer;transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
.csv-plat:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.csv-plat:hover{border-color:var(--accent-border);background:var(--bg-hover)}}
.csv-plat.sel{border-color:var(--accent);background:var(--accent-dim)}
.csv-plat svg{color:var(--text-secondary)}
.csv-plat.sel svg{color:var(--accent)}
.csv-plat span{font-size:11px;font-weight:600;color:var(--text-secondary);text-align:center;line-height:1.2}
.csv-plat.sel span{color:var(--text-primary)}
.csv-guide{margin-top:14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);padding:13px 15px;overflow:hidden}
.csv-guide-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.csv-guide ol{margin:0;padding-left:18px}
.csv-guide li{font-size:12px;color:var(--text-secondary);line-height:1.65;margin-bottom:2px}
.csv-warn-banner{display:flex;align-items:flex-start;gap:9px;background:var(--amber-dim);border:1px solid var(--amber-border);border-radius:var(--rm);padding:11px 14px;margin-bottom:14px;font-size:12px;color:var(--amber);line-height:1.55}
.csv-stage-in{animation:csv-stage-fade var(--dur-base) var(--ease-out)}
@keyframes csv-stage-fade{from{opacity:0;transform:translateY(4px);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
.csv-map-tbl tbody tr{animation:csv-row-in .32s var(--ease-out) both}
@keyframes csv-row-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Connected Brokers */
.bconn-sec{margin-top:22px}
.bconn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:14px}
.bconn-sub{font-size:12px;color:var(--text-tertiary);margin-top:3px;max-width:520px;line-height:1.5}
.bconn-beta{flex-shrink:0;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rs);padding:3px 9px;font-family:var(--font-num)}
.bconn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.bconn-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:12px;animation:bconn-in .34s var(--ease-out) both;transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.bconn-card:not(.soon):hover{border-color:var(--border-strong);transform:translateY(-2px)}}
.bconn-card.soon{opacity:.62}
.bconn-card.connected{border-color:var(--win-border)}
.bconn-top{display:flex;align-items:center;gap:11px}
.bconn-ic{width:38px;height:38px;flex-shrink:0;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary)}
.bconn-card.connected .bconn-ic{color:var(--win);border-color:var(--win-border);background:var(--win-dim)}
.bconn-name{font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.2}
.bconn-meta{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.bconn-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}
.bconn-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--text-tertiary)}
.bconn-dot.ok{background:var(--win);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.bconn-dot.err{background:var(--loss)}
.bconn-dot.sync{background:var(--accent);animation:bconn-pulse 1.1s var(--ease-standard) infinite}
@keyframes bconn-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Broker connection error banner */
.broker-err-box{display:flex;align-items:flex-start;gap:12px;background:var(--loss-dim);border:1px solid var(--loss-border);border-radius:var(--r);padding:13px 15px;margin-bottom:14px}
.broker-err-box svg{flex:none;color:var(--loss);margin-top:1px}
.broker-err-txt{flex:1;min-width:0}
.broker-err-txt b{display:block;font-size:13px;font-weight:700;color:var(--loss);margin-bottom:3px}
.broker-err-txt span{display:block;font-size:12.5px;line-height:1.5;color:var(--text-secondary);word-break:break-word}
.broker-err-x{flex:none;align-self:center;height:30px;padding:0 12px;font-size:12px;font-weight:600;border-radius:var(--rm);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer}
.broker-err-x:hover{color:var(--text-primary)}
/* Choose-accounts modal */
#broker-choose-modal{display:none;position:fixed;inset:0;z-index:9700;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
#broker-choose-modal.show{display:flex}
.bc-card{width:100%;max-width:460px;max-height:calc(100vh - 48px);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);box-shadow:0 24px 60px -12px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;animation:cmdk-in .18s var(--ease-out)}
.bc-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 4px}
.bc-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}
.bc-sub{padding:0 18px 12px;font-size:12.5px;line-height:1.5;color:var(--text-tertiary)}
.bc-list{overflow-y:auto;padding:4px 14px;display:flex;flex-direction:column;gap:6px}
.bc-acct{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r);cursor:pointer;background:var(--bg-surface)}
.bc-acct:hover{border-color:var(--accent-border)}
.bc-acct.dis{opacity:.55;cursor:default}
.bc-acct input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.bc-acct-lbl{flex:1;font-size:13px;font-weight:500;color:var(--text-primary)}
.bc-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:var(--rs)}
.bc-tag.live{color:var(--win);background:var(--win-dim)}
.bc-tag.demo{color:var(--text-tertiary);background:var(--bg-elevated)}
.bc-tag.added{color:var(--accent);background:var(--accent-dim)}
.bc-del{flex:none;font-size:11px;font-weight:600;color:var(--loss);background:none;border:1px solid var(--loss-border);border-radius:var(--rs);padding:3px 9px;cursor:pointer}
.bc-del:hover{background:var(--loss-dim)}
.bc-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px}
.bconn-actions{display:flex;gap:8px;margin-top:12px}
.bconn-soon-chip{font-size:11px;font-weight:600;color:var(--text-tertiary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:4px 11px;align-self:flex-start}
.cx-box{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:26px;width:min(480px,96vw);max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.cx-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.cx-intro{font-size:13px;color:var(--text-tertiary);line-height:1.6;margin-bottom:18px}
.cx-field{margin-bottom:14px}
.cx-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:5px}
.cx-input{width:100%;height:40px;padding:0 12px;border-radius:var(--rm,10px);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);font-size:14px;font-family:inherit;box-sizing:border-box}
.cx-hint{font-size:11px;color:var(--text-tertiary);margin-top:5px;line-height:1.5}
.cx-err{display:none;font-size:12px;color:var(--loss);line-height:1.5;margin-bottom:12px}
.cx-btns{display:flex;gap:10px;margin-top:4px}
.cx-cancel{flex:0 0 auto}
.cx-go{flex:1}
.cx-foot{font-size:12px;color:var(--text-tertiary);line-height:1.6;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.cx-acct{padding:10px 0;border-top:1px solid var(--border)}
.cx-acct-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.cx-acct-status{margin:6px 0 8px}
.cx-note{font-size:11px;color:var(--text-tertiary);margin-top:9px;line-height:1.45}
.cx-more{color:var(--accent);font-weight:600}
/* TradeLocker: the sign-in window and its account picker */
.tl-mo{position:fixed;inset:0;background:rgba(0,0,0,.65);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10500;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.tl-accts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:300px;overflow:auto}
.tl-acct{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--rs);cursor:pointer}
.tl-acct.on{opacity:.6;cursor:default}
.tl-acct input{margin:0;accent-color:var(--accent)}
.tl-acct-n{font-size:13px;font-weight:600;color:var(--text-primary)}
.tl-acct-m{font-size:12px;color:var(--text-tertiary);margin-left:auto;text-align:right}
.tl-add{background:none;border:0;padding:0;font:inherit;cursor:pointer}
/* white-space:nowrap because the height is FIXED at 32px — a label that wraps
   does not make the button taller, it spills a second line out through the
   middle of the border. Better to keep labels short than to let them break. */
.bconn-btn{flex:1;height:32px;border-radius:var(--rs);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.bconn-btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.bconn-btn:hover{border-color:var(--border-strong);background:var(--bg-hover)}}
.bconn-btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);flex:2}
@media(hover:hover) and (pointer:fine){.bconn-btn.pri:hover{filter:brightness(1.08)}}
.bconn-btn.ghost{flex:0 0 auto;width:34px}
/* .ghost is a 34px ICON square — that fixed width is what makes the unlink and
   sync buttons square. Put a word in one and it gets crushed to 34px with the
   label spilling out either side. Text ghosts add .txt to opt out of the width
   and get real padding instead. */
.bconn-btn.ghost.txt{width:auto;padding:0 14px;white-space:nowrap}
.bconn-btn:disabled{opacity:.5;cursor:not-allowed}
.bconn-btn svg{flex-shrink:0}
.bconn-btn.spin svg{animation:bconn-spin .8s linear infinite}
@keyframes bconn-spin{to{transform:rotate(360deg)}}
@keyframes bconn-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Prop-firm connect explainer */
.bconn-propnote{display:flex;gap:13px;align-items:flex-start;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r-card);padding:14px 16px;margin-bottom:16px}
.bconn-propnote-ic{width:34px;height:34px;flex-shrink:0;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border)}
.bconn-propnote b{display:block;font-size:13px;color:var(--text-primary);font-weight:700;margin-bottom:3px}
.bconn-propnote p{margin:0;font-size:12px;color:var(--text-secondary);line-height:1.55}
.bconn-firm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px}
.bconn-firm-l{font-size:12px;font-weight:600;color:var(--text-secondary)}
.bconn-firm-sel{height:34px;max-width:100%;min-width:0;padding:0 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);font:inherit;font-size:13px}
/* Welcome tour: "Where do you trade?" (the broker screen's firm list) */
.wm-q{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:10px}
.wm-select{display:block;width:100%;cursor:pointer}
.wm-select+.wm-select{margin-top:8px}
.wm-select[hidden]{display:none}
/* Account edit: the firm note, and the day a crypto account files trades under */
.ea-note{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:-8px 0 16px}
.ea-note[hidden]{display:none}
.ea-day{padding-top:12px;border-top:1px solid var(--border-subtle);margin-bottom:14px}
.ea-day[hidden]{display:none}
.ea-day-l{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);font-weight:500;margin-bottom:5px}
.ea-day .acct-type-tg{height:34px}
.ea-day-hint{font-size:11px;line-height:1.5;color:var(--text-tertiary);margin-top:4px}
/* What kind of account: live, demo or a prop firm's (_kindPickHtml) */
.kind-row{margin-bottom:14px}
.kind-row .acct-type-tg{height:34px;margin-bottom:0}
.kind-tg .acct-type-tb.on{font-weight:600}
.kind-tg .acct-type-tb:focus-visible{outline-offset:-2px}
.kind-cx .acct-type-tg{height:40px;border-radius:var(--rm)}
.kind-cx .acct-type-tb{font-size:13px}
.kind-hint{margin:5px 0 0;font-size:11px;line-height:1.5;color:var(--text-tertiary)}
.kind-row.err .acct-type-tg{border-color:var(--loss)}
.kind-tg .acct-type-tb:disabled{opacity:.4;cursor:not-allowed}
/* The MetaTrader link window's other way in: the EA, or a password link */
.mt-f-alt{font-size:12.5px;color:var(--text-tertiary);line-height:1.6;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.mt-f-alt a{color:var(--accent);font-weight:600}
.kind-row.err .kind-hint{color:var(--loss)}
.kind-firm{margin-top:12px}
.kind-firm[hidden]{display:none}
/* Under the Edge Score: demo accounts do not count (_edgeTrades) */
.es-demo-note{display:block;margin-top:6px;color:var(--text-tertiary)}
/* The edit window grows when a firm's rules open in it: it scrolls inside,
   never past the screen, so the title and Save stay reachable. */
#edit-acct-modal>div{max-height:calc(100svh - 32px);overflow-y:auto;box-sizing:border-box}
.bconn-routes{list-style:none;margin:10px 0 0;padding:0}
.bconn-routes:empty{display:none}
.bconn-routes li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto auto;gap:6px 12px;align-items:center;padding:9px 0;border-top:1px solid var(--border);font-size:12.5px}
.bconn-routes b{color:var(--text-primary);font-weight:600}
.bconn-routes .how{color:var(--text-secondary);line-height:1.45}
.bconn-routes .bconn-btn{flex:none;padding:0 14px}
.bconn-st{font:400 10.5px/1.4 var(--font-num);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--rs);white-space:nowrap;border:1px solid var(--border);color:var(--text-tertiary)}
.bconn-st.live{color:var(--win);border-color:var(--win-border);background:var(--win-dim)}
.bconn-st.on{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim)}
@media (max-width:640px){.bconn-routes li{grid-template-columns:minmax(0,1fr) auto}.bconn-routes .how{grid-column:1/-1;grid-row:2}}
.bconn-propnote .pn-map{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.bconn-propnote .pn-chip{font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:3px 9px}
.bconn-propnote .pn-chip b{display:inline;color:var(--violet);font-weight:700;margin:0}
/* Enrich mode (reviewing a synced trade) */
.enrich-banner{display:flex;gap:11px;align-items:flex-start;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r-card);padding:13px 15px;margin-bottom:16px;animation:csv-stage-fade var(--dur-base) var(--ease-out)}
.enrich-ic{width:30px;height:30px;flex-shrink:0;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent)}
.enrich-banner b{display:block;font-size:13px;color:var(--text-primary);font-weight:700;margin-bottom:2px}
.enrich-banner span{font-size:12px;color:var(--text-secondary);line-height:1.5}
.enrich-lock{opacity:.6;cursor:not-allowed!important;background:var(--bg-elevated)!important}
.enrich-lock-tg{pointer-events:none;opacity:.55}
.bconn-review-banner{display:flex;align-items:center;gap:12px;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r-card);padding:13px 16px;margin-bottom:16px}
.bconn-review-banner.bconn-arrive{animation:bconn-in var(--dur-panel) var(--ease-out)}
.bconn-review-banner .rv-ic{width:32px;height:32px;flex-shrink:0;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent)}
.bconn-review-banner .rv-tx{flex:1;font-size:13px;color:var(--text-primary)}
.bconn-review-banner .rv-tx span{display:block;font-size:12px;color:var(--text-secondary);margin-top:1px}
.bconn-review-banner .rv-btn{flex-shrink:0;height:32px;padding:0 15px;border-radius:var(--rs);background:var(--accent-grad);border:1px solid var(--pressedge,rgba(0,0,0,.25));color:var(--on-accent);font-size:12px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.35)}
.bconn-review-banner .rv-btn:active{transform:scale(.97)}
.tl-needs-note{display:inline-block;margin-left:7px;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rs);padding:1px 7px;vertical-align:middle;font-family:var(--font-num)}
/* Community — verified identity & reputation badges */
/* ── Community: reputation marks, milestone cards, the cohort link ───────────
   A member's standing travels as one verified mark and one tier word beside
   the name; Funded and the streak show on the member card. Tier colours come
   from the ladder tokens so they flip with the theme. */
.cm-badges{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.cm-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-num);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;border-radius:var(--rs);padding:3px 6px;white-space:nowrap;border:1px solid var(--border);background:var(--tint-1);color:var(--text-secondary)}
.cm-badge svg{width:10px;height:10px;flex-shrink:0}
.cm-verified{padding:0;width:16px;height:16px;justify-content:center;border-radius:50%;border:0;color:var(--text-primary);background:var(--tint-2)}
.cmv2-msg-meta .cm-badge.cm-tier{border:0;background:none;padding:0;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-tertiary)}
.cm-verified svg{width:9px;height:9px}
.cm-funded{color:var(--text-primary);border-color:var(--border-strong)}
.cm-streak{color:var(--accent);background:var(--accent-dim);border-color:var(--accent-border)}
.cm-streak svg{color:var(--accent)}
.cm-tier-silver{color:var(--tier-silver)}
.cm-tier-gold{color:var(--tier-gold);border-color:var(--border-strong)}
.cm-tier-platinum{color:var(--tier-platinum);border-color:var(--border-strong)}
.cm-tier-elite{color:var(--tier-elite);background:var(--accent-dim);border-color:var(--accent-border)}
.cm-badges.lg{gap:6px;flex-wrap:wrap}
.cm-badges.lg .cm-badge{font-size:11px;padding:4px 8px}
.cm-badges.lg .cm-verified{width:20px;height:20px}
.cm-badges.lg .cm-verified svg{width:11px;height:11px}
/* Milestone card: a ruled card in the row, the shield as its seal */
.cm-ms-card{display:flex;align-items:center;gap:12px;max-width:520px;padding:12px 14px;margin-top:4px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs)}
.cm-ms-ic{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-dim)}
.cm-ms-ic svg{width:18px;height:18px}
.cm-ms-body{flex:1;min-width:0}
.cm-ms-text{font-size:14px;color:var(--text-primary);line-height:1.45}
.cm-ms-text b,.cm-ms-text strong{font-weight:600}
.cm-ms-foot{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11.5px;color:var(--text-tertiary)}
.cm-ms-foot svg{width:12px;height:12px;color:var(--accent)}
/* Milestone share prompt */
.cm-ms-prompt-ov{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity var(--dur-panel) var(--ease-out)}
.cm-ms-prompt-ov.show{opacity:1}
.cm-ms-prompt{width:100%;max-width:420px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r);padding:22px;transform:translateY(8px);transition:transform var(--dur-panel) var(--ease-out)}
.cm-ms-prompt-ov.show .cm-ms-prompt{transform:none}
.cm-ms-prompt-h{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-primary)}
.cm-ms-prompt-sub{font-size:13px;color:var(--text-secondary);line-height:1.55;margin:6px 0 16px}
.cm-ms-card.preview{margin:0 0 18px;max-width:none}
.cm-ms-prompt-btns{display:flex;gap:10px}
.cm-ms-prompt-btns .btn{flex:1}
/* The cohort link on a prop account card */
.pf-cohort-link{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rs);padding:3px 10px;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.pf-cohort-link:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.pf-cohort-link:hover{background:var(--accent-border)}}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.ff{grid-column:1/-1}
.fm{display:flex;flex-direction:column;gap:6px}
.fl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;font-family:var(--font-num)}
/* ── Fields: one spec for the input, the select and the notes ─────────────
   The button's height and radius, a 1px hairline on the well, Geist 13 at
   400. Values in the primary ink; placeholders and an unchosen select prompt
   in the tertiary. Focus is the one ring every control wears: the edge turns
   to the accent and the ring is 2px of it (the edge and 1px beyond), in
   --dur-fast. */
.fi,.fs,.ft{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--rs);height:36px;padding:0 12px;font-size:13px;font-weight:400;color:var(--text-primary);font-family:var(--font-body);width:100%;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
/* A long placeholder or value ends on an ellipsis at the field's edge, never cut mid-word */
.fi{text-overflow:ellipsis}
.fi::placeholder,.ft::placeholder{color:var(--text-tertiary);opacity:1;text-overflow:ellipsis}
.fi:is(:focus,.sg-focus),.fs:is(:focus,.sg-focus),.ft:is(:focus,.sg-focus){outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);border-radius:var(--rs)}
.fi.err,.fs.err,.ft.err{border-color:var(--loss);box-shadow:0 0 0 2px var(--loss-dim)}
.pw-wrap{position:relative;display:block;}
.pw-wrap .fi{padding-right:38px;}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-tertiary);padding:4px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color var(--dur-fast);}
.pw-eye:hover{color:var(--accent);}
.pw-eye svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* The select wears no browser chrome: a 12px chevron at 1.5px in the tertiary
   ink, 12px in from the edge. A data URL cannot read a token, so each theme
   draws it in its own --text-tertiary, written as rgb(). */
.fs,select.fi{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='rgb(128,149,166)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;padding-right:32px;cursor:pointer}
:root[data-theme="light"] .fs,:root[data-theme="light"] select.fi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='rgb(83,100,116)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* An unchosen prompt (a disabled empty option, or a required select left
   empty) is tertiary; an "All" that is a real choice stays in the ink. */
:is(.fs,select.fi):has(option[value=""]:checked:disabled),:is(.fs,select.fi):required:invalid{color:var(--text-tertiary)}
/* Was background:#0f1a24 — a hardcoded dark that stayed dark in light mode,
   so the (now dark) option text sat on it at 1.04:1 across 23 dropdowns. */
.fs option,select.fi option{background:var(--bg-elevated);color:var(--text-primary)}
/* Notes: an 18px line 9px in and 7px over the edge, so one line is the
   field's 36px and sits on the inputs' baseline. 72px when alone, 36px when it
   is one row; it grows downwards only, and the browser's grip is not drawn. */
.ft,textarea.fi{padding:9px 12px 7px;line-height:18px;resize:vertical}
.ft{height:auto;min-height:72px}
.ft[rows="1"]{min-height:36px}
.ft::-webkit-resizer,textarea.fi::-webkit-resizer{background:transparent}
.fe{font-size:12px;color:var(--loss);display:none}.fe.show{display:block}
/* ── The segment: words on one hairline, the chosen word underlined ────────
   No fill, no box, no radius, no shadow: one 1px hairline along the bottom
   (inset, so a row that scrolls on a phone never clips the line). Each word
   is 36px tall, Geist 13 at 500, in the secondary ink, the primary ink when
   hovered or chosen. The chosen line is 2px of accent inset 12px to span the
   word, lying on the hairline in place of it. */
.seg{display:flex;width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;background:none;border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--border)}
.seg::-webkit-scrollbar{display:none}
.seg-btn{position:relative;flex:none;height:36px;padding:0 12px;background:none;border:0;border-radius:var(--rs);font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--text-secondary);white-space:nowrap;cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.seg-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--accent);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.seg-btn:hover,.seg-btn.on,.seg-btn[aria-pressed="true"]{color:var(--text-primary)}
.seg-btn.on::after,.seg-btn[aria-pressed="true"]::after{opacity:1}
.seg-btn:focus-visible{outline:2px solid var(--accent)!important;outline-offset:-2px!important;border-radius:var(--rs)}
.tg{display:flex;border:1px solid var(--border-strong);border-radius:var(--rs);overflow:hidden;height:36px}
.tb{flex:1;background:transparent;border:none;color:var(--text-secondary);font-size:13px;font-family:var(--font-body);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.tb+.tb{border-left:1px solid var(--border-strong)}
.tb.on{background:var(--accent-dim);color:var(--accent)}
/* Setup grade colours */
#tg-grade .tb.on{background:var(--accent-dim);color:var(--text-primary);border-color:var(--accent-border)}
/* Emotion colours */
.tg-wide{height:auto;min-height:36px;flex-wrap:wrap}
.tg-wide .tb{flex:1 1 auto;min-width:70px;padding:8px 6px;font-size:12px;line-height:1}
/* Psychology Score */
.psych-row{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:7px}
.ps-btn{height:36px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-tertiary);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);font-family:var(--font-body);padding:0}
.ps-btn:hover{border-color:rgba(255,255,255,.2);color:var(--text-primary);background:var(--tint-1)}
.ps-btn.on{background:var(--accent-dim);color:var(--text-primary);border-color:var(--accent-border)}
.psych-bar-wrap{height:3px;background:var(--border);border-radius:2px;margin:9px 0 7px;overflow:hidden}
.psych-bar-fill{height:100%;width:100%;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s ease,background-color .25s ease}
.psych-ends{display:flex;justify-content:space-between}
.psych-end{font-size:11px;font-weight:500;color:var(--text-tertiary);letter-spacing:.02em}
/* ── Emotion tags ── */
.emotion-chips-wrap{margin-top:12px;}
.emotion-chips-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:7px;}
.emotion-chips{display:flex;flex-wrap:wrap;gap:6px;}
.em-chip{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:4px 12px;font-size:11px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast);user-select:none;}
.em-chip:hover{border-color:var(--border-strong);color:var(--text-primary);}
.em-chip.on.pos{background:var(--win-dim);border-color:var(--win-border);color:var(--win);}
.em-chip.on.neg{background:var(--loss-dim);border-color:var(--loss-border);color:var(--loss);}
/* ── Instrument / Long-Short / Tag breakdown rows ── */
.ins-breakdown-row{display:flex;align-items:center;gap:var(--sp-3);padding:10px 0;border-bottom:1px solid var(--tint-1);}
.ins-breakdown-row:last-child{border-bottom:none;}
.ins-breakdown-label{font-size:13px;font-weight:600;color:var(--text-primary);min-width:90px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ins-breakdown-bar-wrap{flex:1;height:6px;background:var(--tint-2);border-radius:4px;overflow:hidden;}
.ins-breakdown-bar{height:100%;border-radius:4px;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-standard);}
.ins-breakdown-stats{display:flex;gap:var(--sp-2-5);flex-shrink:0;}
.ins-breakdown-stat{font-size:11px;font-weight:600;min-width:42px;text-align:right;}
.ins-breakdown-sub{font-size:11px;font-weight:500;color:var(--text-tertiary);white-space:nowrap;font-variant-numeric:tabular-nums;}
/* ── Monthly chart ── */
@keyframes bar-rise{from{transform:scaleY(0)}}
.rr-badge{display:inline-block;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:4px;padding:4px 12px;font-size:13px;color:var(--accent);font-weight:500;min-width:64px;text-align:center}
.bias-ref-txt{font-size:13px;color:var(--text-secondary);font-style:italic}
/* ── Controls: one spec for every button strength ────────────────────────
   Every strength is the same object: 36px, 16px sides, the small radius, a
   1px edge (transparent where none is drawn) and one label, Geist 13 at 500.
   Colour changes run --dur-fast on --ease-out, a press is a 2% scale, focus is
   the fields' ring: 2px of the accent on the control's own edge, no gap. The strengths and the one disabled look
   follow the variants below. */
.btn{height:36px;padding:0 16px;border:1px solid transparent;border-radius:var(--rs);background:transparent;color:var(--text-primary);font-family:var(--font-body);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:active:not(:disabled){transform:scale(.98)}
/* The global focus rule sets border-radius:inherit; a control keeps its own.
   .sg-hover and .sg-focus let the style guide show these states through the
   same rules. */
.btn:not(.auth-btn):is(:focus-visible,.sg-focus){outline:2px solid var(--accent)!important;outline-offset:0!important;border-radius:var(--rs)}
@media(prefers-reduced-motion:reduce){.btn:active:not(:disabled){transform:none}}
.bic:active{transform:scale(0.88)!important;opacity:.8}
/* ── Ambient glow behind dashboard greeting ──────────────────────────────── */
.dash-welcome-wrap{isolation:isolate}
.dash-welcome-wrap::before{content:none}
.dash-welcome-wrap>*{position:relative;z-index:1}
/* Prop-firm proximity alert — surfaced on the dashboard so a breach/at-risk eval is seen up front */
.dash-prop-alert{display:flex;align-items:center;gap:12px;padding:11px 15px;margin-bottom:var(--sp-5);border-radius:var(--r);border:1px solid;box-shadow:inset 0 1px 0 var(--hi);animation:dpa-in .3s var(--ease-out)}
@keyframes dpa-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dash-prop-alert{animation:none}}
.dash-prop-alert.breach{border-color:var(--loss-border);background:var(--loss-dim)}
.dash-prop-alert.risk{border-color:var(--amber-border);background:var(--amber-dim)}
.dpa-ic{flex-shrink:0;font-size:13px;font-weight:700;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.dash-prop-alert.breach .dpa-ic{color:var(--loss);background:var(--loss-dim)}
.dash-prop-alert.risk .dpa-ic{color:var(--amber);background:var(--amber-dim)}
.dpa-msg{flex:1;font-size:13px;color:var(--text-secondary);line-height:1.45}
.dpa-msg b{color:var(--text-primary);font-weight:700}
.dpa-more{color:var(--text-tertiary);font-size:12px}
.dpa-btn{flex-shrink:0;height:30px;padding:0 14px;border-radius:var(--rs);border:1px solid var(--border-strong);background:var(--bg-elevated);color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:background var(--dur-fast),border-color var(--dur-fast)}
.dpa-btn:hover{background:var(--bg-hover);border-color:rgba(255,255,255,.2)}
/* The strengths. Primary (.btn-p) is the ink on the field, the brand's press.
   Secondary is a tint inside a strong hairline: it is .btn-g, which keeps its
   first name because it is the app's everyday button (row actions, Cancel),
   and a frame is what lets it stand alone. Ghost is a .btn with no strength:
   bare until hovered. Labels are the primary ink on every strength except
   Primary's field-coloured one. */
.btn-p{background:var(--text-primary);border-color:transparent;color:var(--on-accent)}
.btn-full{width:100%}
.btn-d{background:var(--loss-dim);border-color:var(--loss-border);color:var(--loss)}
.btn-s{background:var(--win-dim);border-color:var(--win-border);color:var(--win)}
.btn-o{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.btn-g{background:var(--tint-1);border-color:var(--border-strong);color:var(--text-primary)}
/* AI actions -- violet is the app's intelligence color; one pill recipe for every ✦ action */
.btn-ai{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
:where(.btn):is(:hover,.sg-hover):not(:disabled){background-color:var(--tint-2)}
.btn-p:is(:hover,.sg-hover):not(:disabled){background-color:color-mix(in srgb,var(--text-primary) 92%,var(--bg-base))}
.btn-d:is(:hover,.sg-hover):not(:disabled){background-color:var(--loss-border)}
.btn-s:is(:hover,.sg-hover):not(:disabled){background-color:var(--win-border)}
.btn-o:is(:hover,.sg-hover):not(:disabled){background-color:var(--accent-border)}
.btn-ai:is(:hover,.sg-hover):not(:disabled){background-color:var(--accent-border)}
/* Disabled is one look on every strength: no fill of its own (the field shows
   through), the hairline and the tertiary ink, so it reads switched off; never
   the Primary fill and never a lowered opacity. Hover and press are
   off (the hover and press rules above skip :disabled). Kept at the lowest
   specificity so a context that owns its own spec keeps it. */
:where(.btn):disabled,:where(.btn)[aria-disabled="true"]{background:transparent;border-color:var(--border);color:var(--text-tertiary);box-shadow:none;filter:none;cursor:not-allowed}
/* The sign-in card keeps its own control spec: 18px sides, a 600 press,
   14px fields. */
.auth-paper .btn{padding:0 18px}
.auth-paper .btn-p{font-weight:600}
.auth-paper .btn-g{font-weight:400}
.auth-paper .fi{font-size:14px}
.btn-ai-sm{background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--violet);font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--rs);cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:background var(--dur-fast),border-color var(--dur-fast)}
.btn-ai-sm:hover{background:var(--accent-dim);border-color:var(--accent-border)}
.btn-ai-sm:active{transform:scale(.97)}
.bic{width:28px;height:28px;padding:0;border:1px solid var(--border);background:transparent;color:var(--text-tertiary);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:color var(--dur-fast),border-color var(--dur-fast)}
.bic:hover{color:var(--text-primary);border-color:var(--border-strong)}
.bic.del:hover{color:var(--loss);border-color:var(--loss-border)}
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r)}
#trades-tw{scrollbar-width:none;border-radius:var(--r) var(--r) 0 0}
#trades-tw::-webkit-scrollbar{display:none}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{padding:10px 12px;text-align:left;font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-primary);font-weight:400;border-bottom:1px solid var(--border-strong);white-space:nowrap;background:var(--tint-1);font-family:var(--font-num)}
tbody tr{border-bottom:1px solid var(--tint-1);transition:background var(--dur-fast),box-shadow var(--dur-fast)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--tint-1);box-shadow:inset 3px 0 0 var(--accent-border)}
tbody tr[data-outcome="win"]{box-shadow:inset 3px 0 0 var(--win-border)}
tbody tr[data-outcome="win"]:hover{background:var(--win-dim);box-shadow:inset 3px 0 0 var(--win)}
tbody tr[data-outcome="loss"]{box-shadow:inset 3px 0 0 var(--loss-border)}
tbody tr[data-outcome="loss"]:hover{background:var(--loss-dim);box-shadow:inset 3px 0 0 var(--loss)}
tbody tr[data-outcome="breakeven"]{box-shadow:inset 3px 0 0 rgba(125,139,161,.45)}
tbody tr[data-outcome="breakeven"]:hover{background:rgba(125,139,161,.04);box-shadow:inset 3px 0 0 rgba(125,139,161,.65)}
tbody td{padding:9px 12px;color:var(--text-secondary);white-space:nowrap;vertical-align:middle}
/* Trade Log: pin the Edit/Delete actions to the right edge so they stay reachable
   no matter how far the wide (20-column) table is scrolled sideways. */
#trades-table td.trade-act-cell{position:sticky;right:0;z-index:2;display:flex;gap:var(--sp-1);align-items:center;background:var(--bg-base);box-shadow:-11px 0 13px -9px rgba(0,0,0,.6)}
#trades-table th.trade-act-cell{position:sticky;right:0;z-index:3;text-align:center;background:linear-gradient(var(--tint-1),var(--tint-1)),var(--bg-base);box-shadow:-11px 0 13px -9px rgba(0,0,0,.6)}
tbody tr[data-outcome="win"] td.trade-act-cell,tbody tr[data-outcome="loss"] td.trade-act-cell,tbody tr[data-outcome="breakeven"] td.trade-act-cell{background:var(--bg-base)}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;letter-spacing:.04em}
.p-w{background:var(--win-dim);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--win-border)}
.p-l{background:var(--loss-dim);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--loss-border)}
.p-b{background:var(--tint-1);color:var(--text-secondary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.p-n{background:transparent;color:var(--text-tertiary);box-shadow:inset 0 0 0 1px var(--border)}
.p-lo{background:var(--win-dim);color:var(--win)}
.p-sh{background:var(--loss-dim);color:var(--loss)}
.rp{color:var(--win);font-weight:500}.rn{color:var(--loss)}.rz{color:var(--breakeven)}
.cy{color:var(--win)}.cn2{color:var(--text-tertiary)}
.fb{display:flex;gap:var(--sp-2-5);flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.fb .fm{min-width:130px}
/* === Log Trade premium sections === */
.lt-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;margin-bottom:16px}
.lt-section-lbl{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.10em;color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-num)}
.lt-section-lbl::after{content:'';flex:1;height:1px;background:var(--border)}
.lt-section-icon{opacity:.5;flex-shrink:0}
/* Direction — color coded when selected */
#tg-dir{height:72px;border-radius:var(--r-card)}
#tg-dir .tb{font-size:14px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:7px}
#tg-dir .tb.on{background:var(--accent-dim);color:var(--text-primary)}
/* Outcome visual buttons */
.lt-out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2-5)}
.lt-out-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px 4px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);cursor:pointer;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--text-secondary);transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s var(--ease-spring);min-height:72px}
.lt-out-btn:hover{border-color:var(--border-strong);color:var(--text-primary);background:var(--bg-hover);transform:translateY(-1px)}
.lt-out-btn.on-win{background:var(--win-dim);border-color:var(--win-border);color:var(--win);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 4px 20px rgba(0,0,0,.35)}
.lt-out-btn.on-loss{background:var(--loss-dim);border-color:var(--loss-border);color:var(--loss);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 4px 20px rgba(0,0,0,.35)}
.lt-out-btn.on-be{background:rgba(125,139,161,.1);border-color:rgba(125,139,161,.45);color:var(--text-secondary);box-shadow:0 0 0 3px rgba(125,139,161,.06)}
.lt-out-btn.on-nt{background:rgba(168,180,198,.07);border-color:rgba(168,180,198,.28);color:var(--text-tertiary)}
/* Grade buttons with integrated sublabel */
#tg-grade .grade-tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:12px 6px;min-height:62px}
.grade-letter{font-size:18px;font-weight:700;line-height:1}
.grade-sublabel{font-size:11px;font-weight:500;letter-spacing:.03em}
/* Two-column layout on desktop */
.log-form-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start;margin-bottom:16px}
.log-col{display:flex;flex-direction:column}
/* Save row */
.lt-save-row{display:flex;gap:var(--sp-2-5);margin-bottom:20px}
#save-btn{background:var(--accent-grad)!important;color:var(--on-accent)!important;border-color:var(--accent-border)!important;font-weight:600;box-shadow:0 1px 0 var(--border-strong) inset;transition:background .18s,box-shadow var(--dur-base),transform .14s var(--ease-spring)!important}
#save-btn:hover{background:var(--accent-grad)!important;filter:brightness(1.04);box-shadow:0 6px 32px rgba(0,0,0,.35),0 1px 0 var(--border-strong) inset!important}
#save-btn:active{transform:scale(0.96)!important;box-shadow:0 2px 12px rgba(0,0,0,.35)!important}
@keyframes save-success{0%{box-shadow:0 0 0 0 var(--win-border)}70%{box-shadow:0 0 0 14px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 0 rgba(52,196,138,0)}}
#save-btn.save-pulse{animation:save-success .5s ease-out;background:linear-gradient(135deg,var(--win) 0%,#1d9e63 100%)!important;border-color:var(--win-border)!important}
.sum-bar{display:flex;gap:var(--sp-6);padding:12px 20px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);margin-bottom:14px;align-items:center;flex-wrap:wrap}
.tl-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
#tl-hd-stats{display:flex;gap:var(--sp-2);align-items:center;padding-bottom:6px}
.tl-hd-chip{display:inline-flex;align-items:center;gap:7px;background:none;border:0;border-radius:0;padding:0 14px 0 0;font-size:12px;color:var(--text-secondary)}
.tl-hd-chip b{font-family:var(--font-num);font-size:14px;font-weight:500;color:var(--text-primary);font-variant-numeric:tabular-nums}
.tl-seg{display:inline-flex;background:none;border:1px solid transparent;border-radius:var(--rs);padding:2px;gap:2px;height:32px;box-sizing:border-box}
.tl-seg-btn{border:none;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;font-family:var(--font-body);padding:0 7px;border-radius:0;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.tl-seg-btn:hover:not(.on){color:var(--text-primary)}
.tl-seg-btn.on{background:none;color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:6px}
.tl-seg-btn:active{transform:scale(.97)}
/* ── Trade Log sub-tabs (All Trades / Waiting for input) ── */
.tl-subtabs{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:4px;margin:2px 0 18px;flex-wrap:wrap}
.tl-subtab{position:relative;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:600;font-family:inherit;padding:8px 16px;border-radius:var(--rs);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background var(--dur-fast),color var(--dur-fast)}
.tl-subtab:hover:not(.on){color:var(--text-primary)}
.tl-subtab.on{background:var(--bg-elevated);color:var(--text-primary);box-shadow:var(--el-2)}
.tl-wait-badge{min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;line-height:19px;text-align:center;font-variant-numeric:tabular-nums}
/* waiting-queue cards */
#tl-view-waiting{max-width:900px;margin:0 auto}
.tlw-list{display:flex;flex-direction:column;gap:12px}
.tlw-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:15px 17px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:var(--el-1)}
.tlw-main{display:flex;flex-direction:column;gap:9px;flex:1;min-width:240px}
.tlw-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tlw-src{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);font-family:var(--font-num)}
.tlw-inst{font-family:'SF Mono',ui-monospace,monospace;font-size:14px;font-weight:700;color:var(--text-primary)}
.tlw-date{font-size:12px;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.tlw-dir{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-family:var(--font-num)}
.tlw-facts{display:flex;gap:18px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.tlw-fact{display:flex;flex-direction:column;gap:2px}
.tlw-fact .fl2{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--font-num)}
.tlw-fact .fv2{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.tlw-fact .fv2.win{color:var(--win)}.tlw-fact .fv2.loss{color:var(--loss)}.tlw-fact .fv2.acc{color:var(--win)}
.tlw-missing{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tlw-miss-lbl{font-size:11px;color:var(--text-tertiary);font-weight:600}
.tlw-chip{font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--rs);padding:2px 8px}
.tlw-complete{flex-shrink:0;height:38px;padding:0 18px;border-radius:var(--rm);border:none;background:var(--accent-grad,linear-gradient(135deg,var(--accent),var(--accent-2)));color:var(--on-accent);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:filter var(--dur-fast),transform var(--dur-fast)}
.tlw-complete:hover{filter:brightness(1.08)}
.tlw-complete:active{transform:scale(.97)}
.tlw-empty{text-align:center;padding:64px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.tlw-empty-ic{width:56px;height:56px;border-radius:50%;background:var(--win-dim);color:var(--win);display:flex;align-items:center;justify-content:center}
.tlw-empty-t{font-size:16px;font-weight:700;color:var(--text-primary)}
.tlw-empty-d{font-size:13px;color:var(--text-tertiary);max-width:320px;line-height:1.6}
/* entrance: subtle staggered reveal (reduced-motion aware) */
.tlw-card{animation:tlw-in .34s var(--ease-out) both}
@keyframes tlw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:640px){.tlw-complete{width:100%;justify-content:center}.tlw-card{gap:12px}}
@media(prefers-reduced-motion:reduce){.tlw-card{animation:none}}
.inst-badge{display:inline-block;font-family:'SF Mono',ui-monospace,monospace;font-size:12px;font-weight:700;color:var(--text-primary);background:var(--tint-1);border:1px solid var(--border);border-radius:var(--rs);padding:2px 8px;letter-spacing:.03em}
.sum-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:3px;font-family:var(--font-num)}
.sum-val{font-size:14px;font-weight:500;color:var(--text-primary)}
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2-5);margin-bottom:16px}
.kc{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;position:relative;overflow:hidden}
.kc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--accent-border),transparent);pointer-events:none}
.kl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:8px;font-family:var(--font-num)}
.kv{font-size:28px;font-weight:700;letter-spacing:-.04em;color:var(--text-primary);line-height:1.1}
.dp-kpi-lbl{font-size:11px;color:var(--text-secondary);font-weight:500;margin-bottom:6px;letter-spacing:.01em}
.dp-kpi-val{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);line-height:1.1}
.kv.acc{color:var(--win)}.kv.kwin{color:var(--win)}.kv.kloss{color:var(--loss)}
.cr{display:grid;gap:var(--sp-2-5);margin-bottom:16px}
.cr2{grid-template-columns:3fr 2fr}
.cc{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;box-shadow:inset 0 1px 0 var(--hi);position:relative;overflow:hidden}
.cc::before{content:none}
.cc-t{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:14px;display:flex;align-items:center;gap:7px;font-family:var(--font-num)}
.stt-row-kb{flex-wrap:wrap;gap:var(--sp-2)}
.stt-kbd{display:inline-flex;align-items:center;font-size:11px;font-family:var(--font-num);background:var(--bg-surface);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;padding:3px 9px;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}

/* ── Cookie consent ──────────────────────────────────────────────────────── */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:8000;background:var(--bg-elevated);border-top:1px solid var(--border-strong);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;transform:translateY(100%);transition:transform .3s var(--ease-standard)}
#cookie-banner.show{transform:translateY(0)}
.cookie-text{font-size:12px;color:var(--text-secondary);line-height:1.5;flex:1;min-width:200px}
.cookie-text a{color:var(--accent);text-decoration:none;cursor:pointer}
.cookie-text a:hover{text-decoration:underline}
.cookie-btns{display:flex;gap:var(--sp-2);flex-shrink:0}

/* ── Onboarding ──────────────────────────────────────────────────────────── */
#welcome-modal{display:none;position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px}
#welcome-modal.show{display:flex}
.wm-card{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);width:100%;max-width:480px;padding:36px 32px 28px;position:relative;animation:modal-in .3s var(--ease-spring);max-height:90vh;overflow-y:auto}
.wm-logo{text-align:center;margin-bottom:20px}
.wm-logo-title{font-size:20px;font-weight:700;letter-spacing:.15em;color:var(--text-primary)}
.wm-logo-sub{font-size:11px;color:var(--text-secondary);letter-spacing:.1em;margin-top:2px}
/* step progress dots */
.wm-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:22px}
.wm-step-dot{height:6px;border-radius:4px;background:var(--border-strong);transition:background var(--dur-base)}
.wm-step-dot.on{background:var(--accent);width:22px}
.wm-step-dot:not(.on){width:6px}
.wm-heading{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 6px;text-align:center}
.wm-desc{font-size:13px;color:var(--text-secondary);text-align:center;line-height:1.6;margin:0 0 20px}
/* step 0 — features */
.wm-features{display:flex;flex-direction:column;gap:var(--sp-2-5);margin-bottom:22px}
.wm-feature{display:flex;align-items:flex-start;gap:var(--sp-3);padding:11px 13px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r)}
.wm-feature-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--accent)}
.wm-feature-icon svg{width:18px;height:18px;display:block}
.wm-feature-title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.wm-feature-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}
/* step 1 — quick-start list */
.wm-qs-list{display:flex;flex-direction:column;gap:var(--sp-2-5);margin-bottom:22px}
.wm-qs-item{display:flex;align-items:flex-start;gap:var(--sp-3);padding:11px 13px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r)}
.wm-qs-num{width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
/* nav row */
.wm-pill-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.wm-pill{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:7px 16px;font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast);}
.wm-pill:hover{border-color:var(--border-strong);color:var(--text-primary);}
.wm-pill.selected{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);}
.wm-nav{display:flex;gap:var(--sp-2);margin-top:6px}
.wm-back-btn{flex:0 0 90px;height:44px;font-size:13px}
.wm-next-btn{flex:1;height:44px;font-size:14px;font-weight:600}
@media(max-width:520px){.wm-card{padding:24px 18px 20px}.wm-heading{font-size:18px}}
.ob-checklist{margin-bottom:20px;}
/* ── Dashboard empty state ── */
.dash-empty-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:36px 24px;text-align:center;position:relative;overflow:hidden;}
.dash-empty-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,var(--accent-dim) 0%,transparent 70%);pointer-events:none;}
.dash-empty-icon{width:52px;height:52px;border-radius:var(--r-card);background:var(--accent-dim);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--accent);}
.dash-empty-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:8px;letter-spacing:-.02em;}
.dash-empty-sub{font-size:13px;color:var(--text-secondary);line-height:1.6;max-width:380px;margin:0 auto 22px;}
.dash-empty-btn{height:44px;padding:0 28px;font-size:14px;font-weight:600;}
.ob-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-2-5);margin-bottom:10px;}
.ob-head-title{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-family:var(--font-num)}
.ob-head-sub{font-size:12px;color:var(--text-tertiary);margin-top:3px;}
.ob-hide{background:none;border:none;color:var(--text-tertiary);font-family:var(--font-body);font-size:11px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:var(--rs);flex-shrink:0;}
.ob-hide:hover{color:var(--text-secondary);}
.ob-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2-5);}
@media(max-width:900px){.ob-steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.ob-steps{grid-template-columns:1fr;}}
.ob-step{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 16px 14px;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);position:relative;overflow:hidden;}
.ob-step:hover:not(.done){border-color:var(--border-strong);background:var(--bg-elevated);}
.ob-step.done{background:var(--win-dim);border-color:var(--win-border);cursor:default;pointer-events:none;}
.ob-step-num{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text-tertiary);margin-bottom:10px;}
.ob-step.done .ob-step-num{color:var(--win);}
.ob-step-label{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.45;margin-bottom:14px;}
.ob-step.done .ob-step-label{color:var(--text-tertiary);}
.ob-step-action{font-size:11px;font-weight:600;color:var(--accent);}
.ob-step.done .ob-step-action{display:none;}
.ob-step-done-badge{display:none;font-size:11px;font-weight:600;color:var(--win);}
.ob-step.done .ob-step-done-badge{display:block;}
.ob-item-check{position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;background:var(--win);display:none;align-items:center;justify-content:center;}
.ob-step.done .ob-item-check{display:flex;}
/* ── Legal modal ─────────────────────────────────────────────────────────── */
/* ── Disclaimer acknowledgment modal ────────────────────────────────────── */
#wm-disc{text-align:center;} /* the arrival notice card inside the welcome shell */
.disc-icon{font-size:34px;margin-bottom:16px;}
.disc-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:8px;letter-spacing:-.01em;}
.disc-sub{font-size:12px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:20px;font-family:var(--font-num)}
.disc-body{font-size:13px;color:var(--text-secondary);line-height:1.7;margin-bottom:24px;text-align:left;}
.disc-body strong{color:var(--text-primary);}
.disc-points{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:var(--sp-2-5);}
.disc-points li{display:flex;align-items:flex-start;gap:var(--sp-2-5);font-size:13px;color:var(--text-secondary);line-height:1.5;}
.disc-points li span.dp-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px;}
.disc-confirm-btn{width:100%;height:44px;border-radius:var(--r);background:var(--accent-grad);color:var(--on-accent);border:1px solid var(--accent-border);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:background var(--dur-fast),box-shadow var(--dur-fast),transform .12s var(--ease-spring);margin-bottom:12px;box-shadow:0 2px 12px rgba(0,0,0,.35),0 1px 0 var(--border-strong) inset;}
.disc-confirm-btn:hover{background:linear-gradient(135deg,#4f8ef7 0%,#7577f3 100%);box-shadow:0 6px 24px rgba(0,0,0,.35),0 1px 0 var(--border-strong) inset;}
.disc-confirm-btn:active{transform:scale(0.98);box-shadow:none;}
.disc-legal-links{font-size:11px;color:var(--text-tertiary);}
.disc-legal-links a{color:var(--text-tertiary);text-decoration:underline;cursor:pointer;transition:color var(--dur-fast);}
.disc-legal-links a:hover{color:var(--accent);}
#legal-modal{display:none;position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
#legal-modal.show{display:flex}
.legal-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);width:100%;max-width:680px;padding:36px 40px;position:relative;margin:auto}
.legal-card h2{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.legal-card .legal-updated{font-size:11px;color:var(--text-tertiary);margin-bottom:24px}
.legal-card h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:22px 0 6px}
.legal-card p,.legal-card li{font-size:13px;color:var(--text-secondary);line-height:1.7;margin-bottom:8px}
.legal-card ul{padding-left:18px;margin-bottom:8px}
.legal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;color:var(--text-tertiary);cursor:pointer;padding:4px 8px;line-height:1;transition:color var(--dur-fast)}
.legal-close:hover{color:var(--text-primary)}
.legal-tabs{display:flex;gap:var(--sp-1);margin-bottom:28px;border-bottom:1px solid var(--border);padding-bottom:0}
.legal-tab{font-size:13px;font-weight:500;color:var(--text-tertiary);background:none;border:none;cursor:pointer;padding:8px 16px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast),border-color var(--dur-fast);font-family:var(--font-body)}
.legal-tab.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ── Delete account modal ────────────────────────────────────────────────── */
#del-account-modal{display:none;position:fixed;inset:0;z-index:9200;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);align-items:center;justify-content:center}
#del-account-modal.show{display:flex}
.del-acct-card{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);width:420px;max-width:94vw;padding:32px;text-align:center}
.del-acct-icon{font-size:34px;margin-bottom:16px}
.del-acct-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.del-acct-body{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:20px}
.del-acct-confirm{width:100%;margin-bottom:10px;background:var(--loss-dim);border:1px solid var(--loss-border);color:var(--loss);border-radius:var(--rs);padding:10px;font-size:13px;font-family:var(--font-body);cursor:pointer;transition:background var(--dur-fast)}
.del-acct-confirm:hover{background:var(--loss-border)}
.del-acct-cancel{width:100%;background:none;border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--rs);padding:10px;font-size:13px;font-family:var(--font-body);cursor:pointer;transition:background var(--dur-fast)}
.del-acct-cancel:hover{background:var(--tint-1)}
#del-trading-acct-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);align-items:center;justify-content:center}
#del-trading-acct-modal.show{display:flex}
.dta-card{background:var(--bg-elevated);border:1px solid var(--loss-border);border-radius:var(--r-card);width:440px;max-width:94vw;padding:32px;box-shadow:var(--el-5);}
.dta-icon-wrap{width:52px;height:52px;border-radius:var(--r);background:var(--loss-dim);border:1px solid var(--loss-border);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.dta-title{font-size:16px;font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:8px;}
.dta-sub{font-size:13px;color:var(--text-secondary);text-align:center;line-height:1.6;margin-bottom:20px;}
.dta-warn{background:var(--loss-dim);border:1px solid var(--loss-border);border-radius:var(--rm);padding:12px 14px;margin-bottom:20px;font-size:12px;color:#f7a3a5;line-height:1.6;}
.dta-warn strong{color:var(--loss);}
.dta-confirm-label{font-size:12.5px;color:var(--text-secondary);font-weight:500;margin-bottom:6px}
.dta-confirm-input{width:100%;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--rs);height:38px;padding:0 12px;font-size:13px;color:var(--text-primary);font-family:var(--font-body);box-sizing:border-box;transition:border-color var(--dur-fast);margin-bottom:16px;}
.dta-confirm-input:focus{outline:none;border-color:var(--loss-border);box-shadow:0 0 0 2px rgba(0,0,0,.35);}
.dta-del-btn{width:100%;height:44px;border-radius:var(--rs);border:none;background:var(--loss-dim);border:1px solid var(--loss-border);color:var(--loss);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:opacity var(--dur-fast),background var(--dur-fast);margin-bottom:10px;opacity:.55;}
.dta-del-btn.ready{opacity:1;background:var(--loss-border);}
.dta-del-btn.ready:hover{background:var(--loss-border);}
@keyframes dta-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.dta-confirm-input.shake{animation:dta-shake .4s var(--ease-standard);border-color:var(--loss)!important}
.dta-cancel-btn{width:100%;height:44px;border-radius:var(--rs);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:background var(--dur-fast);}
.dta-cancel-btn:hover{background:var(--tint-1);}
.dta-trade-count{font-weight:700;color:var(--loss);}
.stc{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:15px 16px}
.ins-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
/* ── Premium Insights Redesign — scoped to #pg-insights so .cc/.cc-t stay the
   base recipe (L374/377) everywhere else; this is the only page that opts in ── */
@keyframes ins-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#pg-insights .cc{animation:ins-up .5s ease both;border-radius:var(--r-card);padding:20px 22px;position:relative;overflow:hidden}
#pg-insights .cc-t{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-primary);margin-bottom:6px;display:flex;align-items:center;gap:7px;font-family:var(--font-num)}
#pg-insights .cc-sub{font-size:12.5px;color:var(--text-tertiary);margin-bottom:14px;line-height:1.5}

.itc{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden;animation:ins-up .45s ease both}

/* Insights sub-tabs — segmented control (matches .rev-seg / .pb-tabs) */
/* ── Jump strip — scrolls, never hides ───────────────────────────────────── */
/* Sticky so it stays reachable down a long page, but deliberately quiet: text
   links on a hairline, not pills. Pills would read as tabs and imply the rest
   of the page is hidden, which is the exact confusion this replaced. */
.ifs-meta{font-size:12px;color:var(--text-tertiary);margin-top:6px}
/* ── Jump island ─────────────────────────────────────────────────────────────
   A floating blue pill rather than a full-width bar. Because it only spans
   its own content, the page scrolls past it on both sides, which is what
   makes it read as floating — so it has to stay fully opaque (a translucent
   island shows the content sliding underneath and turns to mud).

   Contrast: pure white on #1e6aa8 is 5.17:1, so the inactive labels sit at
   .92 alpha (≈4.6:1, still AA) and the active state is carried by the white
   pill behind dark-blue text, not by dimming everything else — dimming to
   where the difference is obvious would have taken inactive below AA. */
/* The dock is what sticks; the pill just rides in it. The pill alone was
   sticky before, and because it is only ~335px wide, a chapter heading
   scrolling past got its left half hidden and its right half left showing —
   which reads as a rendering bug rather than as depth.

   So the dock spans the full content width and blurs whatever passes behind
   it. Two constraints shaped this:

   - No sideways bleed. #main is overflow-x:auto, so negative horizontal
     insets buy a horizontal scrollbar. It doesn't need any: content sits
     inside the same padding box as the dock, so a dock at 100% width already
     covers everything there is to cover.
   - No opaque fill. A solid band would flatten the page glow into a visible
     rectangle — the exact artefact fixed two commits ago. Blur alone leaves
     the gradient intact, because a blurred smooth gradient is the same
     gradient.

   The mask fades the blur out at the bottom so there is no hard frost line,
   and it lives on ::before so the pill itself stays perfectly sharp. */
/* ID-scoped on purpose. `#pg-insights > *{position:relative}` stacks the page's
   children above the background glow, and it outranks a bare class — so as soon
   as the dock became a direct child of #pg-insights (moving above the filter),
   it silently lost `sticky` and scrolled away with the page. */
#pg-insights > .ins-jump-dock{position:sticky;top:8px;z-index:var(--z-banner);margin:6px 0 16px}
/* No backdrop-filter band here any more. One existed to stop chapter text
   being sliced as it scrolled behind the pill — but that slicing came from the
   485px chapter subtitles overhanging the 415px pill, and the guide removed
   those subtitles two commits later. The band outlived its reason and kept
   painting: 716px of blurred strip with no pill on it, smearing the page
   across its full width whether or not anything was behind it. That is the
   haze Jack spotted, and I had put it there.
   Measured before removing: the four headings are 46-91px wide and all end by
   x=193, against a pill whose right edge is 517 — the pill covers each of them
   whole. Nothing gets sliced, so there is nothing to blur. */
.ins-jump{position:relative;display:flex;align-items:center;gap:2px;
  width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;
  padding:5px;border-radius:var(--rs);
  background:linear-gradient(180deg,var(--accent),#1e6aa8);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.35),0 2px 6px -2px rgba(0,0,0,.3),
             0 1px 0 rgba(255,255,255,.25) inset}
.ins-jump::-webkit-scrollbar{display:none}
.ins-jump-a{background:none;border:none;border-radius:var(--rs);padding:7px 15px;font-family:inherit;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.92);white-space:nowrap;
  cursor:pointer;transition:color var(--dur-fast),background-color var(--dur-fast)}
.ins-jump-a:hover{color:#fff;background:var(--border-strong)}
.ins-jump-a.on{color:#1e6aa8;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ins-jump-a.on:hover{color:#1e6aa8;background:#fff}
/* Guide tab. Separated from the four jump links because it does something
   different — they move you, this replaces what you're looking at. */
.ins-jump-div{width:1px;align-self:stretch;margin:2px 4px;background:rgba(255,255,255,.28);flex:none}
.ins-jump-a.ins-jump-guide[aria-pressed="true"]{color:#1e6aa8;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* ── Guide ───────────────────────────────────────────────────────────────────
   Takes the hero's place rather than adding to the page. Reads as a document,
   not a dashboard: one column, generous line-height, nothing competing. */
#ins-guide{background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-card);padding:22px 24px;margin-bottom:var(--sp-4)}
#ins-guide[hidden]{display:none}
.ins-guide-head{margin-bottom:20px}
.ins-guide-t{font-family:var(--font-display);font-size:22px;font-weight:600;
  letter-spacing:-.02em;color:var(--text-primary)}
.ins-guide-s{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-top:5px}
.ins-guide-sec{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;
  color:var(--text-tertiary);margin:0 0 10px;display:flex;align-items:center;gap:var(--sp-2-5);font-family:var(--font-num)}
.ins-guide-sec::after{content:'';flex:1;height:1px;background:var(--border)}
.ins-guide-steps{list-style:none;margin:0 0 22px;padding:0;counter-reset:g}
.ins-guide-steps li{counter-increment:g;display:grid;grid-template-columns:26px 92px 1fr;
  align-items:baseline;gap:var(--sp-2-5);padding:9px 0;border-bottom:1px solid var(--border)}
.ins-guide-steps li:last-child{border-bottom:none}
.ins-guide-steps li::before{content:counter(g);font-size:11px;font-weight:700;
  color:var(--accent);font-variant-numeric:tabular-nums}
.ins-guide-steps b{font-size:13px;font-weight:700;color:var(--text-primary)}
.ins-guide-steps span{font-size:12px;color:var(--text-secondary);line-height:1.55}
.ins-guide-lead{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}
.ins-guide-lead b{color:var(--accent)}
.ins-guide-done{margin-top:20px;padding:9px 18px;border-radius:var(--rs);border:1px solid var(--border);
  background:var(--bg-surface);font-family:inherit;font-size:12px;font-weight:600;
  color:var(--text-secondary);cursor:pointer;
  transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast)}
.ins-guide-done:hover{color:var(--text-primary);border-color:var(--border-strong);
  background:var(--bg-elevated)}
@media(max-width:640px){
  #ins-guide{padding:16px 14px}
  .ins-guide-steps li{grid-template-columns:20px 1fr;row-gap:2px}
  .ins-guide-steps span{grid-column:2}
}
.ins-gloss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--sp-2-5);margin:0}
.ins-gloss-item{padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--rm)}
/* R spans the row: it is the unit the rest of the page is written in, so it
   gets read first rather than sitting alphabetically among the others. */
.ins-gloss-item--lead{grid-column:1/-1;border-color:var(--accent-border)}
.ins-gloss-item dt{font-size:11px;font-weight:700;color:var(--text-primary);
  margin-bottom:3px;letter-spacing:.02em}
.ins-gloss-item--lead dt{font-size:13px;color:var(--accent)}
.ins-gloss-item dd{margin:0;font-size:13px;color:var(--text-secondary);line-height:1.55}
.ins-gloss-item dd b{color:var(--text-secondary);font-weight:700}
.ins-gloss-item dd em{color:var(--text-secondary);font-style:italic}
/* The R reminder under the hero figure — one line, so the biggest number on
   the page can be read without going to look the unit up. */
.ins-r-hint{font-size:12.5px;color:var(--text-secondary);line-height:1.5;margin-top:6px}
.ins-r-hint b{color:var(--text-secondary);font-weight:700}
/* ── Chapter headings — the spine of the single flow ─────────────────────── */
.ins-chapter{margin:22px 0 12px}
.ins-chapter:first-of-type{margin-top:8px}
.ins-chapter-t{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
@media(max-width:640px){
  /* Keep the pill a pill — the padding stays even on the shorter labels, or
     the island collapses into a bar again. Four one-word tabs fit 375px. */
  .ins-jump{gap:2px;padding:4px}
  .ins-jump-a{font-size:12px;padding:7px 12px}
  .ins-chapter{margin:16px 0 10px}
  .ins-chapter-t{font-size:18px}
}
.ins-empty-tab{text-align:center;padding:48px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card)}
.ins-empty-t{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.ins-empty-d{font-size:13px;color:var(--text-tertiary);line-height:1.6;max-width:440px;margin:0 auto}
.ins-empty-d b{color:var(--text-secondary);font-weight:600}
/* Edge Score Card */
.es-card{background:var(--bg-elevated);border-color:var(--border)!important;box-shadow:inset 0 1px 0 var(--hi);position:relative}
/* Insights sections carry no colour of their own: the same panel everywhere. */
#ins-monthly-card::before{content:none}
.es-inner{display:flex;gap:32px;align-items:center}
.es-left{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);flex-shrink:0}
.es-gauge-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.es-gauge-wrap::before{content:none}
.es-tier-badge{font-family:var(--font-num);font-size:11px;font-weight:500;letter-spacing:.06em;padding:2px 8px;border-radius:var(--rs);margin-top:8px;background:var(--tint-1);color:var(--text-primary);border:1px solid var(--border-strong);line-height:1.4}
.es-score-label{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;font-family:var(--font-num)}
.es-right{flex:1;min-width:0}
.es-right-title{font-size:11px;font-weight:400;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.10em;margin-bottom:14px;font-family:var(--font-num)}
.es-comp{margin-bottom:12px}
.es-comp:last-child{margin-bottom:0}
.es-comp-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.es-comp-name{font-size:12px;font-weight:600;color:var(--text-primary)}
.es-comp-pts{font-family:var(--font-num);font-size:12px;color:var(--text-tertiary);font-weight:500}
.es-bar-track{height:5px;background:var(--tint-2);border-radius:4px;overflow:hidden}
.es-bar-fill{height:100%;border-radius:4px;transform-origin:left center;animation:es-grow .6s var(--ease-out) both}
@keyframes es-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Edge Score card — violet, matching the Insights hero and the single app-wide score */
.ps-card{background:var(--bg-elevated);border-color:var(--border)!important;box-shadow:inset 0 1px 0 var(--hi);position:relative}
.ps-gauge-wrap::before{content:none!important}
/* The tier is a word in the metal, on the same neutral chip as every tier word. */
.ps-grade-badge{background:var(--tint-1);color:var(--metal-ink);border-color:var(--border-strong)}
.ps-hint{margin-top:14px;font-size:12.5px;color:var(--text-tertiary);line-height:1.55;border-top:1px solid var(--border);padding-top:12px}
.ps-hint b{color:var(--text-secondary)}
.ps-empty{font-size:13px;color:var(--text-tertiary);text-align:center;line-height:1.6;padding:20px 24px}
/* Calendar overlay (opened from the dashboard calendar card) */
.cal-page{max-width:1120px;margin:0 auto}
/* The back pill is the shared secondary button (.btn-g) at the month row's compact 32px spec. */
#pg-calendar .cal-back{display:flex;width:max-content;height:32px;padding:0 12px 0 8px;gap:4px;margin:0 0 16px;font-size:12px;font-weight:500}
#pg-calendar .cal-back svg{flex-shrink:0;color:var(--text-secondary)}
@keyframes calOvIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}

/* Dashboard mini calendar card */
.dash-cal-card{cursor:pointer;display:flex;flex-direction:column;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
@media(hover:hover){.dash-cal-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}.dash-cal-card:hover .dash-cal-open{opacity:1}}
.dash-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dash-cal-titlelbl{font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.10em;font-weight:400;font-family:var(--font-num)}
.dash-cal-headl{display:flex;flex-direction:column;gap:3px}
.dash-cal-hpnl{font-family:var(--font-num);font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-tertiary)}
.dash-cal-nav{display:inline-flex;align-items:center;gap:4px}
.dash-cal-month{font-size:12.5px;font-weight:500;color:var(--text-secondary);min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.dash-cal-arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:var(--rs);background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);font-size:14px;line-height:1;cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.dash-cal-arrow:hover{border-color:var(--border-strong);color:var(--text-primary)}
.dash-cal-arrow:active{transform:scale(.92)}
.dash-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.dash-cal-dow span{text-align:center;font-family:var(--font-num);font-size:11px;font-weight:400;letter-spacing:.10em;color:var(--text-tertiary);text-transform:uppercase}
.dash-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;flex:1;grid-auto-rows:minmax(46px,1fr)}
.dash-cal-cell{position:relative;border-radius:var(--rs);background:var(--bg-surface);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;overflow:hidden;font-variant-numeric:tabular-nums}
.dash-cal-cell.out{background:transparent;border-color:transparent}
.dcc-day{position:absolute;top:3px;left:4px;font-family:var(--font-num);font-size:11px;font-weight:400;line-height:1;color:var(--text-tertiary)}
.dash-cal-cell.dw .dcc-day,.dash-cal-cell.dl .dcc-day{color:var(--text-secondary)}
.dcc-r{font-family:var(--font-num);font-size:12px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
/* The cell carries one figure; the full calendar has the detail. */
.dcc-sub{display:none}
.dcc-num{font-size:11px;font-weight:500;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
/* A day is a rule in the money colour on a faint tint, not a block. */
.dash-cal-cell.dw{background:var(--bg-elevated);border-color:var(--border);border-top:2px solid var(--win);color:var(--win);font-weight:500}
.dash-cal-cell.dl{background:var(--bg-elevated);border-color:var(--border);border-top:2px solid var(--loss);color:var(--loss);font-weight:500}
.dash-cal-cell.today{box-shadow:inset 0 0 0 1px var(--text-secondary)}
.dash-cal-foot{margin-top:13px;padding-top:11px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-tertiary)}
.dash-cal-open{color:var(--accent);font-weight:500}
/* KPI cluster: one emphasised hero stat + three compact supporting tiles */
.dash-kpi-row{display:flex;flex-direction:column;gap:var(--sp-2-5);flex:1}
.dash-kpi-tile{margin:0;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)}
.dash-kpi-tile .dp-kpi-lbl{margin-bottom:0}
.dp-kpi-val.sm{font-size:20px}
/* Dashboard card tightening — sized to content, tokens only (global .card untouched) */
#dash-profit-card .es-inner{gap:var(--sp-6)}
/* Premium discipline (dashboard pilot): structure from hairline + surface, not heavy shadow */
#pg-daily .card{box-shadow:inset 0 1px 0 var(--hi)}
/* The hero must survive the quiet-cards rule above: that selector is 0-1-1,
   .ps-card alone is 0-1-0, so without this the dashboard hero flattens to
   el-1 regardless of source order. Same specificity trap as the jump dock. */
#pg-daily .ps-card{box-shadow:inset 0 1px 0 var(--hi)}
/* Dashboard composition — 4 grid rows, generous 20px gutters (luxury = space between, tight within) */
.dash-r1,.dash-r3{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-bottom:var(--sp-5);align-items:stretch}
.dash-r2{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--sp-5);margin-bottom:var(--sp-5);align-items:stretch}
.dash-r2-side{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.dash-kpi-2x2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.dash-kpi-2x2 .dash-kpi-tile{margin:0}
/* Streak card fills the remaining side-column height so its bottom aligns with the calendar */
.dash-r2-side #dash-streak-card{flex:1;display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.dash-r1,.dash-r2,.dash-r3{grid-template-columns:1fr}}
/* ── Insights: DASHBOARD_STYLE discipline (tight cards, hairlines, one accent) ── */
#pg-insights .cc{padding:11px 14px;box-shadow:var(--el-1)}
#pg-insights .cc-sub{margin-bottom:var(--sp-2)}
/* chapter headers — bold, sentence-case, grouped (mockup style) */
#pg-insights .cr{gap:var(--sp-3);margin-bottom:var(--sp-3)}
#pg-insights .ins-focal{grid-template-columns:1fr 1fr}
#pg-insights .ins-2-1{grid-template-columns:1.7fr 1fr}

/* ═══════════ Insights "Observatory" — 3-layer bento redesign ═══════════ */
#pg-insights{position:relative}
#pg-insights > *{position:relative;z-index:1}
/* single subtle wash behind the header — the one atmospheric touch (mockup-style) */
/* Atmosphere behind the page head. Three things were making this band rather
   than blend:

   1. It faded to `transparent`, which is rgba(0,0,0,0) — so a purple ramping to
      "transparent" ramps toward transparent BLACK and muddies through the
      middle, leaving a visible edge where the stop lands. Every stop now ends
      on the same hue at zero alpha, so only the alpha changes.
   2. Two stops across ~200px of very low alpha quantises visibly on an 8-bit
      display. More intermediate stops on an ease-out curve make each step
      smaller than the eye can pick out.
   3. The element is 340px tall and simply stopped, so whatever alpha remained
      at the bottom was cut off square. A mask dissolves the layer itself.

   Kept taller and weaker than before: the same amount of light spread over more
   distance reads as atmosphere instead of a shape. */
/* Full page height, not a 460px band. The band lit the top 23% of a 1968px
   page and left the remaining 1508px dead flat — so the page opened
   atmospheric and then visibly stopped being designed. Two more fields, much
   fainter, carry it the rest of the way down.

   Radii are in px, not percentages. Percentage radii resolve against the
   element, so on a full-height layer the top glow would stretch taller as the
   page grew and look different on a short account than a long one. Fixed px
   keeps every field the same physical size whatever the page length. */
#pg-insights::before{content:"";position:absolute;inset:-36px 0 -36px 0;z-index:0;pointer-events:none;
  background:
    /* top right — the hero, and the only one you should actually notice */
    radial-gradient(920px 540px at 82% -30px,
      rgba(237,242,247,.115) 0%, rgba(237,242,247,.082) 18%, rgba(237,242,247,.050) 34%,
      rgba(237,242,247,.026) 50%, rgba(237,242,247,.010) 66%, rgba(237,242,247,0) 82%),
    /* top left */
    radial-gradient(780px 470px at 8% 10px,
      rgba(237,242,247,.090) 0%, rgba(237,242,247,.062) 20%, rgba(237,242,247,.037) 38%,
      rgba(237,242,247,.018) 55%, rgba(237,242,247,.006) 70%, rgba(237,242,247,0) 84%),
    /* Three fields down the page, alternating side and hue. Two wasn't enough:
       measured across the width at 16 depths, two left a row at literally zero
       alpha around a third of the way down — the top glow had died and the mid
       field hadn't arrived, so the page went flat and then lit up again, which
       reads as a band. Three holds the floor at 2.2%. */
    radial-gradient(900px 760px at 22% 30%,
      rgba(237,242,247,.050) 0%, rgba(237,242,247,.034) 26%, rgba(237,242,247,.017) 48%,
      rgba(237,242,247,.006) 68%, rgba(237,242,247,0) 86%),
    radial-gradient(880px 720px at 80% 60%,
      rgba(237,242,247,.044) 0%, rgba(237,242,247,.029) 26%, rgba(237,242,247,.014) 50%,
      rgba(237,242,247,.005) 70%, rgba(237,242,247,0) 86%),
    radial-gradient(940px 760px at 30% 90%,
      rgba(237,242,247,.048) 0%, rgba(237,242,247,.031) 26%, rgba(237,242,247,.015) 50%,
      rgba(237,242,247,.005) 70%, rgba(237,242,247,0) 86%);
  /* Radial mask, not linear. The linear one only faded the BOTTOM, so the layer
     still ended square on the left and right — and it has to, because #main
     carries 36px of padding, so this element stops 36px short of the scroll
     container on one side and 47px on the other. Those two unlit strips were
     the vertical seams.
     Bleeding the element sideways is not an option: #main is overflow-x:auto,
     so a negative horizontal inset buys a horizontal scrollbar. Fading every
     edge inward costs a little glow at the corners and removes the boundary
     entirely, which is the right trade for something whose whole job is to be
     unnoticeable. */
  /* Two masks, one per axis, intersected — so each direction is independently
     controllable and measurable.
     The single radial attempt before this failed silently: its X radius worked
     out at 1414px against a 1131px layer, so the horizontal falloff never
     engaged and the edges were still 86% opaque. Measured, not guessed —
     nothing about the CSS looked wrong.
     Vertical: hold to 92%, then fade. The old curve fell away from 44%, which
     was right for a 460px band sitting at the top and wrong the moment the
     layer covered the whole page — it would have dimmed everything below the
     halfway mark, which is most of the page. The fields themselves now do the
     fading; the mask only has to kill the layer's own bottom edge.
     Horizontal: fade in over the first 12% and out over the last 12%, ~135px
     each side — wide enough that the ramp is invisible against a 36px gutter. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 92%,rgba(0,0,0,0) 100%),
                    linear-gradient(to right,rgba(0,0,0,0) 0%,#000 12%,#000 88%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 0%,#000 92%,rgba(0,0,0,0) 100%),
             linear-gradient(to right,rgba(0,0,0,0) 0%,#000 12%,#000 88%,rgba(0,0,0,0) 100%);
  mask-composite:intersect}
/* Light theme overrides `background` outright, so it needs all four fields too
   — otherwise light mode keeps the old two-field version and goes flat below
   the fold while dark mode doesn't. */
:root[data-theme="light"] #pg-insights::before{
  background:
    radial-gradient(920px 540px at 82% -30px,
      rgba(237,242,247,.088) 0%, rgba(237,242,247,.062) 18%, rgba(237,242,247,.038) 34%,
      rgba(237,242,247,.019) 50%, rgba(237,242,247,.007) 66%, rgba(237,242,247,0) 82%),
    radial-gradient(780px 470px at 8% 10px,
      rgba(237,242,247,.078) 0%, rgba(237,242,247,.054) 20%, rgba(237,242,247,.032) 38%,
      rgba(237,242,247,.015) 55%, rgba(237,242,247,.005) 70%, rgba(237,242,247,0) 84%),
    radial-gradient(900px 760px at 22% 30%,
      rgba(237,242,247,.040) 0%, rgba(237,242,247,.027) 26%, rgba(237,242,247,.014) 48%,
      rgba(237,242,247,.005) 68%, rgba(237,242,247,0) 86%),
    radial-gradient(880px 720px at 80% 60%,
      rgba(237,242,247,.035) 0%, rgba(237,242,247,.023) 26%, rgba(237,242,247,.011) 50%,
      rgba(237,242,247,.004) 70%, rgba(237,242,247,0) 86%),
    radial-gradient(940px 760px at 30% 90%,
      rgba(237,242,247,.038) 0%, rgba(237,242,247,.025) 26%, rgba(237,242,247,.012) 50%,
      rgba(237,242,247,.004) 70%, rgba(237,242,247,0) 86%)}

/* the bento grid (varied sizes via col + row spans; dense packing) */
.ins-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);align-items:stretch;margin-bottom:var(--sp-3)}
.ins-bento .cc{margin:0;display:flex;flex-direction:column;min-width:0}
.ins-bento .cc .ins-fill{min-height:0}
.ins-bento .cc .ins-chart{position:relative;height:172px}
/* width variety via column spans; height follows content (no forced grid rows) */
.b-hero,.b-wide,.b-med,.b-col2{grid-column:span 2}
.b-wide3{grid-column:span 3}
.b-tall,.b-sm{grid-column:span 1}
.b-full{grid-column:1/-1}
@media(max-width:1100px){.ins-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-hero,.b-wide,.b-wide3,.b-med,.b-col2,.b-full{grid-column:1/-1}}
@media(max-width:640px){.ins-bento{grid-template-columns:1fr}
  .b-hero,.b-wide,.b-wide3,.b-med,.b-tall,.b-sm,.b-col2,.b-full{grid-column:1/-1}}

/* Small stat tile — the "some small" in the mosaic */
.ins-stat{justify-content:center;text-align:left}
.ins-stat .st-lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-tertiary);font-weight:700;margin-bottom:5px}
.ins-stat .st-val{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:normal;line-height:1;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
/* period-over-period trend pill (recent 30d vs prior 30d) */
.kc .kv-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ins-delta{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--r-card);letter-spacing:0;white-space:nowrap;transform:translateY(-1px)}
.ins-delta.up{background:var(--win-dim);color:var(--win)}
.ins-delta.down{background:var(--loss-dim);color:var(--loss)}
.ins-delta svg{width:9px;height:9px}
/* direction donut + legend */
.ins-donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;height:100%;justify-content:center}
.ins-donut{position:relative;width:130px;height:130px;flex:none}
.ins-donut .dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ins-donut .dc b{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.ins-donut .dc span{font-size:11px;color:var(--text-tertiary);font-weight:600;margin-top:2px}
.ins-dleg{display:flex;flex-direction:column;gap:11px;flex:1;min-width:150px;font-variant-numeric:tabular-nums}
.ins-dleg .drow{display:flex;align-items:center;gap:9px;font-size:12.5px}
.ins-dleg .drow i{width:9px;height:9px;border-radius:4px;flex:none}
.ins-dleg .drow .dn{font-weight:700;color:var(--text-primary)}
.ins-dleg .drow .dv{margin-left:auto;font-weight:700;color:var(--text-primary)}
.ins-dleg .drow .dp{width:40px;text-align:right;color:var(--text-tertiary);font-weight:700}
.ins-dleg .dsep{height:1px;background:var(--border);margin:1px 0}
.ins-dleg .drow.sub .dn{color:var(--text-secondary);font-weight:600}

.ins-stat .st-sub{font-size:11px;color:var(--text-tertiary);margin-top:4px;line-height:1.4}
.ins-stat .st-val.kwin{color:var(--win)}.ins-stat .st-val.kloss{color:var(--loss)}.ins-stat .st-val.acc{color:var(--win)}

/* Hover lift — real pointers only */
@media(hover:hover) and (pointer:fine){
  .ins-bento .cc{transition:border-color .2s,box-shadow .25s,transform .25s var(--ease-out)}
  .ins-bento .cc:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--el-1),0 16px 34px -14px rgba(0,0,0,.5)}
}

/* Sub-tab crossfade */
.ins-panel{animation:ins-panel-in .34s var(--ease-out) both}
@keyframes ins-panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .ins-panel{animation:none}
  .ins-bento .cc:hover{transform:none}
}
/* Eyebrow labels — every dashboard KPI tile opens with one (11px upper, tracked, muted) */
.dp-kpi-lbl{text-transform:uppercase;letter-spacing:.09em;color:var(--text-tertiary);font-weight:600}

/* Streak, compact — laid out for the narrow right column (desktop only; the
   <=720px stacked layout keeps its own centered treatment). */
@media(min-width:761px){
  .streak-compact .streak-inner{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:16px 18px;align-items:start}
  .streak-compact .streak-inner>div:nth-child(1){grid-column:1;grid-row:1}
  .streak-compact .streak-inner>div:nth-child(2){grid-column:1/-1;grid-row:2}
  .streak-compact .streak-stats-col{grid-column:2;grid-row:1;flex-direction:column;gap:12px}
  .streak-compact .streak-main-val{font-size:22px}
  .streak-compact .sk-dot{width:26px;height:26px}
}

.stc{border-radius:var(--r-card);overflow:hidden;position:relative}
.cr .cc:nth-child(1){animation-delay:.04s}.cr .cc:nth-child(2){animation-delay:.1s}
/* ── Insights scroll-reveal ── */
#ins-content .cc,#ins-content .kc,#ins-content .itc{animation:none!important;opacity:0;transform:translateY(20px);transition:none}
#ins-content .kc::before{display:none}
#ins-content .obs-vis{opacity:1!important;transform:translateY(0)!important;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)!important}
/* ── Calendar ──────────────────────────────────────────────────────────────
   Above the grid: one 8px scale (gaps of 16 and 24), and one control spec on
   the month row: the shared .btn-g and .fs at a compact 32px, Geist 12 at 500,
   one hairline and one fill in both themes. The month name steps down to 20/600
   so the page title stays the one headline.
   The grid: the weekday row, the days and the week column share one template
   and one 8px gap both ways. A cell is 12px in on every side; its number, its
   money and its meta share that left edge, and today's ring is drawn round the
   digit without moving it. Colour is money only: the P&L and the R in the
   result colour, the day's fill tinted ~6% by night and ~5% by day, a neutral
   hairline all round. Days outside the month are faint cells, so the month is
   a complete rectangle. A week cell reads like a day: count, money, meta. */
#pg-calendar{--cal-cols:repeat(7,minmax(0,1fr)) 112px;--cal-gap:8px;--cal-in:12px;--cal-row:94px}
#pg-calendar .ph{margin-bottom:24px}
#pg-calendar .cal-hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px}
#pg-calendar .cal-hd .btn{height:32px;font-size:12px;font-weight:500}
#pg-calendar .cal-nav{width:32px;padding:0;color:var(--text-secondary)}
#pg-calendar .cal-nav:hover{color:var(--text-primary)}
#pg-calendar .cal-month{padding:0 4px;font-family:var(--font-display);font-size:20px;font-weight:600;line-height:32px;letter-spacing:-.015em;color:var(--text-primary);white-space:nowrap}
#pg-calendar .cal-today-btn{padding:0 12px;margin-left:8px}
#pg-calendar .cal-hd .asset-filter{flex-wrap:nowrap;gap:4px;margin:0 0 0 16px}
#pg-calendar .cal-acct{display:flex;align-items:center;gap:8px;margin-left:auto}
#pg-calendar .cal-acct-lbl,#pg-calendar .cal-hd .af-lbl{margin:0;font-family:var(--font-num);font-size:11px;font-weight:400;line-height:16px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
#pg-calendar .cal-acct .fs{width:auto;min-width:160px;height:32px;padding:0 32px 0 12px;font-size:12px;font-weight:500;background-color:var(--tint-1)}
/* The month's figures: a ruled strip, 12px in, labels in the one label style. */
#pg-calendar .cal-kpi-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0 0 16px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
#pg-calendar .cal-kpi{min-width:0;padding:0 16px;background:none;border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:none}
#pg-calendar .cal-kpi:first-child{padding-left:0;border-left:0}
#pg-calendar .cal-kpi-lbl{margin:0 0 8px;font-family:var(--font-num);font-size:11px;font-weight:400;line-height:16px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
#pg-calendar .cal-kpi-val{font-family:var(--font-num);font-size:22px;font-weight:500;line-height:24px;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
#pg-calendar .cal-kpi-val.kwin,#pg-calendar .cal-kpi-val.acc{color:var(--win)}
#pg-calendar .cal-kpi-val.kloss{color:var(--loss)}
/* One grid */
#pg-calendar .cal-ghd,#pg-calendar .cal-grid{display:grid;grid-template-columns:var(--cal-cols);column-gap:var(--cal-gap)}
#pg-calendar .cal-ghd{margin:0 0 var(--cal-gap)}
#pg-calendar .cal-grid{row-gap:var(--cal-gap);grid-auto-rows:minmax(var(--cal-row),auto)}
#pg-calendar .cal-dhdr{min-width:0;padding:0 0 0 var(--cal-in);font-family:var(--font-num);font-size:11px;font-weight:400;line-height:16px;letter-spacing:.10em;text-transform:uppercase;text-align:left;color:var(--text-tertiary)}
#pg-calendar .cal-day,#pg-calendar .cal-wkcell{position:relative;display:flex;flex-direction:column;min-width:0;min-height:var(--cal-row);padding:calc(var(--cal-in) - 1px);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);text-align:left;font-variant-numeric:tabular-nums}
#pg-calendar .cal-day{transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
#pg-calendar .cal-day.dwin{background-color:color-mix(in srgb,var(--win) 6%,var(--bg-elevated))}
#pg-calendar .cal-day.dloss{background-color:color-mix(in srgb,var(--loss) 6%,var(--bg-elevated))}
:root[data-theme="light"] #pg-calendar .cal-day.dwin{background-color:color-mix(in srgb,var(--win) 5%,var(--bg-elevated))}
:root[data-theme="light"] #pg-calendar .cal-day.dloss{background-color:color-mix(in srgb,var(--loss) 5%,var(--bg-elevated))}
#pg-calendar .cal-day.out{pointer-events:none;background:transparent;border-color:color-mix(in srgb,var(--border) 50%,transparent)}
#pg-calendar .cal-day.out .cal-dnum{color:var(--text-tertiary)}
#pg-calendar .cal-day.has-t,#pg-calendar .cal-day.no-t{cursor:pointer}
@media(hover:hover){
  #pg-calendar .cal-day.has-t:hover{border-color:var(--border-strong)}
  #pg-calendar .cal-day.no-t:hover{border-color:var(--accent-border);background-color:var(--accent-dim)}
}
/* The cell: number and count on the top line, the money and its meta at the foot */
#pg-calendar .cal-day-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;height:16px;margin:0 0 auto}
#pg-calendar .cal-day-hd+*,#pg-calendar .ws-top+*{margin-top:6px}
#pg-calendar .cal-dnum{position:relative;font-family:var(--font-num);font-size:12px;font-weight:500;line-height:16px;color:var(--text-secondary)}
#pg-calendar .cal-dnum.tod{color:var(--text-primary)}
#pg-calendar .cal-dnum.tod::before{content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:1px solid var(--text-secondary);border-radius:50%;pointer-events:none}
#pg-calendar .cal-tc,#pg-calendar .cal-wl,#pg-calendar .ws-meta{font-family:var(--font-num);font-size:10px;font-weight:400;line-height:14px;letter-spacing:.02em;color:var(--text-secondary);white-space:nowrap}
#pg-calendar .cal-tc{line-height:16px}
#pg-calendar .cal-wl{display:flex;gap:6px;margin-top:2px}
#pg-calendar .ws-r+.ws-meta{margin-top:2px}
#pg-calendar .cal-dpnl,#pg-calendar .ws-pnl{font-family:var(--font-num);font-size:15px;font-weight:500;line-height:18px;letter-spacing:-.01em;white-space:nowrap;color:var(--text-primary)}
#pg-calendar .cal-dpnl.multi,#pg-calendar .ws-pnl.multi{font-size:12px;line-height:16px;white-space:normal}
#pg-calendar .cal-dpnl.pwin,#pg-calendar .ws-pnl.cy{color:var(--win)}#pg-calendar .cal-dpnl.ploss,#pg-calendar .ws-pnl.rn{color:var(--loss)}#pg-calendar .cal-dpnl.pze{color:var(--text-tertiary)}
#pg-calendar .cal-dr,#pg-calendar .ws-r{font-family:var(--font-num);font-size:12px;font-weight:400;line-height:14px;letter-spacing:0;white-space:nowrap}
#pg-calendar .cal-dr.rw{color:var(--win)}#pg-calendar .cal-dr.rl{color:var(--loss)}#pg-calendar .cal-dr.rz{color:var(--breakeven)}
#pg-calendar .ws-top{line-height:16px;margin:0 0 auto}
/* Narrower desktops: the same grid, a tighter inset, week column and ring; once the
   row cannot hold the account, it takes its own line from the left edge. */
@media(max-width:1100px){#pg-calendar{--cal-cols:repeat(7,minmax(0,1fr)) 96px;--cal-in:8px}#pg-calendar .cal-dnum.tod::before{width:20px;height:20px;margin:-10px 0 0 -10px}}
@media(max-width:900px){#pg-calendar .cal-acct{order:1;flex:1 0 100%;margin:0}}
/* Phone: seven columns, one 4px gap, a 6px inset; the number and the day's P&L.
   The month's R is the one hero figure; the other four sit in one row. */
@media(max-width:700px){
  #pg-calendar{--cal-cols:repeat(7,minmax(0,1fr));--cal-gap:4px;--cal-in:6px;--cal-row:50px}
  #pg-calendar .ph{margin-bottom:16px}
  #pg-calendar .cal-hd .asset-filter{order:2;flex:1 0 100%;margin:0}
  #pg-calendar .cal-acct .fs{min-width:0}
  #pg-calendar .cal-kpi-strip{grid-template-columns:repeat(4,auto);justify-content:space-between;row-gap:12px}
  #pg-calendar .cal-kpi{padding:0;border-left:0}
  #pg-calendar .cal-kpi:first-child{grid-column:1/-1}
  #pg-calendar .cal-kpi-lbl{margin-bottom:4px;line-height:14px}
  #pg-calendar .cal-kpi:first-child .cal-kpi-val{font-size:28px;line-height:28px}
  #pg-calendar .cal-kpi:not(:first-child) .cal-kpi-val{font-size:16px;line-height:18px}
  #pg-calendar .cal-ghd>:nth-child(8),#pg-calendar .cal-wkcell,#pg-calendar .cal-tc,#pg-calendar .cal-dr,#pg-calendar .cal-wl{display:none}
  #pg-calendar .cal-dhdr{line-height:14px}
  #pg-calendar .cal-day-hd{height:14px}
  #pg-calendar .cal-day-hd+*{margin-top:4px}
  #pg-calendar .cal-dnum{font-size:11px;line-height:14px}
  #pg-calendar .cal-dnum.tod::before{width:20px;height:20px;margin:-10px 0 0 -10px}
  #pg-calendar .cal-dpnl{font-size:11px;line-height:14px;letter-spacing:-.02em;overflow:hidden}
}
.cal-bd-title{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:12px;margin-top:28px;display:flex;align-items:center;gap:var(--sp-2-5);font-family:var(--font-num)}
.cal-bd-title::after{content:'';flex:1;height:1px;background:var(--border)}
#toast{position:fixed;top:auto;bottom:24px;right:24px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--rs);padding:11px 18px;font-size:13px;color:var(--text-primary);z-index:9999;display:flex;align-items:center;gap:var(--sp-2);opacity:0;transform:translateY(4px);transition:opacity var(--dur-panel-out) var(--ease-in),transform var(--dur-panel-out) var(--ease-in);pointer-events:none}
/* A toast rises 8px as it fades in (240ms, easing out) and leaves in 170ms, falling 4px. One that
   replaces another waits for it to go, so two lines never share the box. */
#toast.show{opacity:1;transform:none;transition:opacity var(--dur-panel) var(--ease-out),transform var(--dur-panel) var(--ease-out)}
#toast.pre{transform:translateY(8px);transition:none}
#toast.has-act{pointer-events:auto}
.sc-mo{position:fixed;inset:0;z-index:10500;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,14,21,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sc-box{width:min(380px,100%);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);padding:26px 24px 22px;box-shadow:var(--el-5);text-align:center}
.sc-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:8px;text-wrap:balance}
.sc-body{font-size:13px;line-height:1.6;color:var(--text-secondary);margin-bottom:22px}
.sc-acts{display:flex;gap:10px}.sc-acts .btn{flex:1;height:40px;justify-content:center}
.toast-act{margin-left:6px;padding:0 0 0 12px;border:0;border-left:1px solid var(--border-strong);background:none;font:600 13px var(--font-body);color:var(--accent);cursor:pointer;line-height:1.4}
.toast-act:hover{text-decoration:underline}
.toast-act[hidden]{display:none}
@media(max-width:768px){#toast{top:auto;bottom:96px;right:12px;left:12px;justify-content:center}}
.toast-check{color:var(--win)}
/* Sidebar live-session pill */
#sb-sess{align-items:center;gap:5px;margin-top:7px;padding:2px 9px;border-radius:var(--r-card);background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.08em}
#sb-sess::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}
#sb-time{white-space:nowrap}
@media(max-width:560px){#sb-sess{display:none!important}}
/* Command palette hint chip */
#cmdk-hint{position:fixed;top:22px;right:76px;z-index:90;display:none;align-items:center;gap:6px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);padding:5px 12px;color:var(--text-secondary);font-size:11px;cursor:pointer;font-family:var(--font-body);transition:color var(--dur-press) var(--ease-standard),border-color var(--dur-press) var(--ease-standard),transform var(--dur-press) var(--ease-out)}
#cmdk-hint:hover{color:var(--text-primary);border-color:var(--accent-border)}
#cmdk-hint:active{transform:scale(.98)}
#cmdk-hint kbd{font-family:'Courier New',monospace;font-size:11px;font-weight:700;letter-spacing:.02em}
@media(max-width:900px){#cmdk-hint{display:none!important}}

.mo{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center}
.mo.show{display:flex}
.md{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:28px;max-width:400px;width:90%}
.md.wide{max-width:520px}
.md-t{font-size:16px;font-weight:500;margin-bottom:10px}
.md-sub{font-size:12px;color:var(--text-secondary);margin-bottom:16px;letter-spacing:.02em}
.md-b{font-size:13px;color:var(--text-secondary);margin-bottom:24px;line-height:1.6}
.md-a{display:flex;gap:var(--sp-2-5);justify-content:flex-end}
#month-ai-mo-body{margin-bottom:20px}
.day-row{display:flex;align-items:center;gap:var(--sp-2-5);padding:9px 0;border-bottom:1px solid var(--tint-1);font-size:13px}
.day-row:last-child{border-bottom:none}
.day-pair{font-weight:500;color:var(--text-primary);min-width:70px}
.sl{font-size:14px;font-style:italic;color:var(--text-secondary);line-height:1.75;margin-bottom:36px;padding:18px 22px;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r)}
.ss{margin-bottom:36px}
.ss p{font-size:14px;color:var(--text-secondary);line-height:1.75}
.s3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2-5)}
.s2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2-5)}
.tl{position:relative;padding-left:28px}
.tl::before{content:'';position:absolute;left:6px;top:18px;bottom:18px;width:1px;background:var(--accent-border)}
hr.sr{border:none;border-top:1px solid var(--border);margin:32px 0}
.empty{text-align:center;padding:44px 20px;font-size:13px;color:var(--text-tertiary)}

/* ── Accounts Overview ────────────────────────────────────────────────────── */
.acov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:14px}
@media(max-width:1100px){.acov-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.acov-grid{grid-template-columns:1fr}}
.acov-card{position:relative;overflow:hidden;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px 14px 18px;box-shadow:var(--el-1)}
.acct-sync-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border-radius:var(--rs);padding:2px 7px;margin-right:6px;white-space:nowrap}
.acct-sync-badge svg{opacity:.85}
.acct-dorm-badge{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-tertiary);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:2px 7px;margin-right:6px;white-space:nowrap}
.acov-dormant-hd{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-secondary);letter-spacing:-.01em;margin-bottom:2px}
.acov-dormant-sub{font-size:12px;color:var(--text-tertiary);margin-bottom:12px}
#acov-dormant-wrap .acov-card{opacity:.72}
#acov-dormant-wrap .acov-card:hover{opacity:1}
.acov-card-top{display:flex;align-items:center;justify-content:space-between}
.acov-card-name{font-size:14px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;padding-right:10px}
.acov-bal-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:5px;font-family:var(--font-num)}
.acov-bal-val{font-size:22px;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;line-height:1.15}
.acov-bal-chg{font-size:13px;margin-top:5px}
.acov-bal-block{margin-top:16px}
.acov-summary{cursor:pointer;border-radius:var(--rs);outline:none;-webkit-tap-highlight-color:transparent}
.acov-summary:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.acov-chevron{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);flex-shrink:0;margin-left:8px}
.acov-detail{display:grid;grid-template-rows:0fr}
.acov-detail-inner{overflow:hidden;min-height:0}
.acov-card.expanded .acov-detail{grid-template-rows:1fr}
.acov-card.expanded .acov-chevron{transform:rotate(180deg)}
@media(hover:hover) and (pointer:fine){.acov-summary:hover .acov-chevron{color:var(--text-secondary)}}
@media(prefers-reduced-motion:no-preference){
  .acov-chevron{transition:transform var(--dur-base) var(--ease-out),color var(--dur-fast) var(--ease-out)}
  .acov-detail{transition:grid-template-rows var(--dur-base) var(--ease-out)}
}
.acov-divider{border-top:1px solid var(--border);margin:16px 0}
.acov-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.acov-stat-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:4px;font-family:var(--font-num)}
.acov-stat-val{font-size:14px;font-weight:600;color:var(--text-primary)}
.acov-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap;gap:var(--sp-1)}
.acov-kpi-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:8px;font-family:var(--font-num)}
.acov-kpi-val{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);line-height:1.1}
/* Accounts portfolio hero — Net P&L leads, supporting stats ride along */
.acov-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.acov-hero-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:6px;font-family:var(--font-num)}
.acov-hero-val{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--text-primary)}
.acov-hero-val.kwin{color:var(--win)}.acov-hero-val.kloss{color:var(--loss)}
.acov-hero-stats{display:flex;gap:var(--sp-5)}
@media(max-width:600px){.acov-hero-val{font-size:28px}.acov-hero-stats{gap:var(--sp-4);width:100%}}
/* Account tile collapsed preview stats */
.acov-preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.acov-pv-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:3px;font-family:var(--font-num)}
.acov-pv-val{font-size:14px;font-weight:700;color:var(--text-primary)}

/* ── Playbooks ────────────────────────────────────────────────────────────── */
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-3)}
.pb-card{position:relative;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px 14px 18px;cursor:pointer;overflow:hidden}
.pb-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--pb-accent,var(--accent))}
@media(hover:hover) and (pointer:fine){.pb-card{transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.pb-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}}
.pb-card-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.pb-card-edit{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--rs);background:transparent;border:1px solid transparent;color:var(--text-tertiary);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pb-card-edit:hover{background:var(--bg-surface);border-color:var(--border);color:var(--text-primary)}
.pb-card-dot{width:10px;height:10px;border-radius:50%;background:var(--pb-accent,var(--accent));flex-shrink:0}
.pb-card-name{font-size:14px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pb-card-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:13px;min-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-card-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-top:1px solid var(--border-subtle);padding-top:11px}
.pb-stat-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;margin-bottom:3px;font-family:var(--font-num)}
.pb-stat-val{font-size:14px;font-weight:700;color:var(--text-primary)}
.pb-card-cl{margin-top:11px;font-size:11px;color:var(--text-tertiary);display:flex;align-items:center;gap:6px}
#pb-editor-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px}
#pb-editor-modal.show{display:flex}
.pb-editor-card{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r);width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--el-5)}
.pb-editor-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.pb-editor-title{font-size:18px;font-weight:700;color:var(--text-primary)}
.pb-x{background:none;border:none;color:var(--text-tertiary);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.pb-x:hover{color:var(--text-primary)}
.pb-editor-body{padding:18px 22px;overflow-y:auto}
.pb-field{margin-bottom:15px}
.pb-field .fl{display:block;margin-bottom:7px}
.pb-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pb-field-row{grid-template-columns:1fr}}
.fl-hint{color:var(--text-tertiary);font-weight:400;font-size:12px;text-transform:none;letter-spacing:0}
.pb-ta{resize:vertical;font-family:inherit;line-height:1.5;width:100%;box-sizing:border-box}
/* AI draft panel (violet — matches the app's AI accent) */
.pb-ai-panel{background:linear-gradient(180deg,var(--accent-dim),var(--accent-dim));border:1px solid var(--accent-border);border-radius:var(--rm);padding:14px 15px;margin-bottom:18px}
.pb-ai-sub{font-size:12px;color:var(--text-tertiary);line-height:1.5;margin:5px 0 10px}
.pb-ai-ta{background:rgba(10,12,20,.5);border-color:var(--accent-border)}
.pb-ai-ta:focus{border-color:var(--accent-border)}
.pb-ai-row{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.pb-ai-status{font-size:12px;line-height:1.4;flex:1;min-width:140px}
.pb-ai-status.ok{color:var(--accent)}
.pb-ai-status.warn{color:var(--amber)}
.pb-ai-drafted{animation:pbDraftFlash 1.1s var(--ease-out)}
@keyframes pbDraftFlash{0%{box-shadow:0 0 0 2px rgba(0,0,0,.35);background:var(--accent-dim)}100%{box-shadow:0 0 0 0 rgba(142,205,246,0);background:transparent}}
@media(prefers-reduced-motion:reduce){.pb-ai-drafted{animation:none}}
/* Modal mode tabs (segmented control) */
.pb-tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:4px;margin-bottom:18px}
.pb-tab{flex:1;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:600;padding:9px 12px;border-radius:var(--rs);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--dur-fast),color var(--dur-fast)}
.pb-tab:hover{color:var(--text-primary)}
.pb-tab.on{background:var(--bg-elevated);color:var(--text-primary);box-shadow:var(--el-2)}
.pb-tab-ai.on{color:var(--accent)}
.pb-pane{animation:pbPaneIn .28s var(--ease-out)}
@keyframes pbPaneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pb-pane{animation:none}}
.pb-ai-skip{margin-top:14px;text-align:center;font-size:12px;color:var(--text-tertiary)}
.pb-linkbtn{background:none;border:none;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;padding:0}
.pb-linkbtn:hover{text-decoration:underline}
/* Playbook performance analytics */
.pb-analytics{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:20px}
.pb-an-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:14px}
.pb-an-title{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:.01em}
.pb-an-sub{font-size:12px;color:var(--text-tertiary);margin-top:3px}
.pb-an-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2-5);margin-bottom:18px}
.pb-an-tile{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.pb-an-tile-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--font-num)}
.pb-an-tile-val{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1.15;margin-top:5px;font-variant-numeric:tabular-nums}
.pb-an-tile-sub{font-size:11px;color:var(--text-tertiary);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-an-compare-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:12px}
.pb-an-compare-title{font-size:12px;font-weight:600;color:var(--text-secondary)}
.pb-an-metrics{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rm);padding:3px}
.pb-an-mchip{border:none;background:transparent;color:var(--text-tertiary);font-size:11px;font-weight:600;font-family:inherit;padding:5px 11px;border-radius:var(--rs);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.pb-an-mchip:hover{color:var(--text-secondary)}
.pb-an-mchip.on{background:var(--bg-elevated);color:var(--text-primary)}
.pb-an-bars{display:flex;flex-direction:column;gap:11px}
.pb-an-bar-row{display:grid;grid-template-columns:130px 1fr 70px;align-items:center;gap:var(--sp-2-5)}
.pb-an-bar-name{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-an-bar-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pb-an-bar-track{height:9px;background:var(--bg);border-radius:4px;overflow:hidden}
.pb-an-bar-fill{height:100%;border-radius:4px;transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease-out)}
.pb-an-bar-val{font-size:12px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.pb-an-bar-fill{transition:none}}
@media(max-width:640px){.pb-an-tiles{grid-template-columns:repeat(2,1fr)}.pb-an-bar-row{grid-template-columns:96px 1fr 58px}}
.pbd-title-wrap{display:flex;align-items:flex-start;gap:11px;min-width:0}
.pbd-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:5px}
.pbd-title{font-size:18px;font-weight:700;color:var(--text-primary);line-height:1.2}
.pbd-sub{font-size:12px;color:var(--text-tertiary);margin-top:3px;line-height:1.45}
.pbd-head-actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.pbd-edit-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:12px;font-weight:600;font-family:inherit;padding:6px 11px;border-radius:var(--rm);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.pbd-edit-btn:hover{border-color:var(--border-strong);color:var(--text-primary)}
.pbd-del-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;background:transparent;border:1px solid var(--border);color:var(--text-tertiary);border-radius:var(--rm);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.pbd-del-btn:hover{border-color:var(--loss-border);color:var(--loss);background:var(--loss-dim)}
/* per-playbook detail rendered as its own in-tab page */
.pbd-back{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:12.5px;font-weight:600;font-family:inherit;padding:7px 13px;border-radius:var(--rm);cursor:pointer;margin-bottom:18px;transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.pbd-back:hover{border-color:var(--border-strong);color:var(--text-primary)}
.pbd-back svg{width:15px;height:15px}
.pbd-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:22px;flex-wrap:wrap}
/* Playbook detail. Was 920px inside the 1680px page cap, so on a wide monitor
   the whole thing sat as a narrow strip with ~380px of dead space each side.
   1280 matches the This Week column, so the two detail views agree.
   Safe to widen here: everything structural is an even grid — .pbd-tiles is
   repeat(4,1fr), .pbd-grid2 is 1fr 1fr, and the hero band is left-aligned with
   no margin-left:auto — so the extra width is shared out rather than opening a
   hole in the middle, which is what limited the This Week column to 1280. */
.pbd-body-page{max-width:1280px}
#pb-detail-view{max-width:1280px;margin:0 auto;animation:pbd-page-in var(--dur-page) var(--ease-out) both}
@keyframes pbd-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#pb-detail-view .pbd-title{font-size:22px;letter-spacing:-.02em}
#pb-detail-view .pbd-dot{width:13px;height:13px;margin-top:6px}
@media (prefers-reduced-motion:reduce){#pb-detail-view{animation:none}}
.pbd-empty{font-size:13px;color:var(--text-tertiary);text-align:center;padding:40px 16px;line-height:1.6}
.pbd-stats{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:18px}
.pbd-hero{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);padding:13px 16px;box-shadow:var(--el-1)}
.pbd-hero-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-family:var(--font-num)}
.pbd-hero-val{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:4px;font-variant-numeric:tabular-nums}
.pbd-hero-sub{font-size:11px;color:var(--text-tertiary);margin-top:5px;line-height:1.4}
.pbd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.pbd-stat{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:11px 12px}
.pbd-stat-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;font-family:var(--font-num)}
.pbd-stat-val{font-size:18px;font-weight:700;color:var(--text-primary);line-height:1.15;margin-top:5px;font-variant-numeric:tabular-nums}
.pbd-chart-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.pbd-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin-bottom:12px}
.pbd-chart-title{font-size:12px;font-weight:700;color:var(--text-primary)}
.pbd-chart-hint{font-weight:400;color:var(--text-tertiary);font-size:12px}
.pbd-chart-stat{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pbd-chart-wrap{position:relative;height:170px}
.pbd-chart-note{font-size:12px;color:var(--text-tertiary);text-align:center;padding:16px 0}
.pbd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pbd-grid2 .pbd-chart-card{margin-bottom:0}
.pbd-dist-row{display:grid;grid-template-columns:58px 1fr 26px;align-items:center;gap:9px;margin-bottom:7px}
.pbd-dist-row:last-child{margin-bottom:0}
.pbd-dist-lbl{font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.pbd-dist-track{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.pbd-dist-fill{height:100%;border-radius:4px;transform-origin:left;transform:scaleX(0);transition:transform .55s var(--ease-out)}
.pbd-dist-c{font-size:11px;color:var(--text-tertiary);text-align:right;font-variant-numeric:tabular-nums}
.pbd-hl{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:9px 0;border-bottom:1px solid var(--tint-1)}
.pbd-hl:last-child{border-bottom:none}
.pbd-hl-lbl{font-size:12px;color:var(--text-secondary)}
.pbd-hl-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pbd-rules{margin-top:14px}
.pbd-rules-sec{margin-bottom:12px}
.pbd-rules-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:5px;font-family:var(--font-num)}
.pbd-rules-txt{font-size:12.5px;color:var(--text-secondary);line-height:1.55;white-space:pre-wrap;max-width:68ch}
.pbd-rules-cl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-secondary);padding:3px 0}
.pbd-rules-cl svg{color:var(--accent);flex-shrink:0}
@media(prefers-reduced-motion:reduce){.pbd-dist-fill{transition:none}}
@media(max-width:600px){.pbd-tiles{grid-template-columns:repeat(2,1fr)}.pbd-grid2{grid-template-columns:1fr}}
.pb-color-row{display:flex;gap:9px;flex-wrap:wrap}
.pb-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent}
@media(prefers-reduced-motion:no-preference){.pb-swatch{transition:transform var(--dur-fast) var(--ease-out)}}
.pb-swatch.on{border-color:var(--text-primary);transform:scale(1.1)}
.pb-checklist-edit{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.pb-cl-item{display:flex;align-items:center;gap:8px}
.pb-cl-item .fi{flex:1}
.pb-cl-del{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:18px;padding:0 4px;flex-shrink:0;line-height:1}
.pb-cl-del:hover{color:var(--loss)}
.pb-add-item{background:none;border:1px dashed var(--border-strong);color:var(--text-secondary);border-radius:var(--rs);padding:7px 12px;font-size:12px;cursor:pointer;width:100%}
.pb-add-item:hover{border-color:var(--accent);color:var(--accent)}
.pb-editor-foot{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--border);flex-shrink:0}
.pb-del-link{background:none;border:none;color:var(--text-tertiary);font-size:12px;cursor:pointer}
.pb-del-link:hover{color:var(--loss)}
.lt-pb-checklist{margin-top:10px;background:rgba(255,255,255,.02);border:1px solid var(--border-subtle);border-radius:var(--rs);padding:10px 12px}
.lt-pb-cl-hd{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;margin-bottom:7px;font-family:var(--font-num)}
.lt-pb-cl-item{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:4px}
.lt-pb-cl-item:last-child{margin-bottom:0}
.lt-pb-cl-item svg{color:var(--accent);margin-top:2px;flex-shrink:0}
/* Trade-row playbook chip */
.tr-pb-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:2px 9px 2px 7px;white-space:nowrap}
.tr-pb-chip .tr-pb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── Today's Game Plan ──────────────────────────────────────────────────── */
.gp-field{margin-bottom:16px}
/* The card's title is the eyebrow every card wears; the fields under it are labelled in words (Geist 13 at 500),
   so the card reads title, label, field instead of three equal uppercase lines. */
.gp-lbl{display:block;font-size:13px;line-height:1.35;color:var(--text-secondary);font-weight:500;margin-bottom:8px;font-family:var(--font-body)}
.gp-pb-chips{display:flex;flex-wrap:wrap;gap:8px}
.gp-pb-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text-secondary);background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--r-card);padding:5px 12px 5px 10px;cursor:pointer;user-select:none}
@media(prefers-reduced-motion:no-preference){.gp-pb-chip{transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}}
.gp-pb-chip:hover{border-color:var(--border-strong)}
.gp-pb-chip .gp-pb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;opacity:.5}
.gp-pb-chip.on{color:var(--text-primary);border-color:var(--pb-accent,var(--accent))}
.gp-pb-chip.on .gp-pb-dot{opacity:1}
.gp-pb-chip.on::after{content:'✓';font-size:11px;color:var(--pb-accent,var(--accent))}
.gp-pb-empty{font-size:13px;color:var(--text-tertiary);line-height:1.5}
.gp-pb-empty a{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.gp-checklist{display:flex;flex-direction:column;gap:2px}
.gp-check-item{display:flex;align-items:flex-start;gap:10px;padding:8px 4px;cursor:pointer;border-radius:var(--rs);font-size:13px;color:var(--text-secondary);line-height:1.45}
.gp-check-item:hover{background:rgba(255,255,255,.02)}
.gp-check-box{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;color:transparent}
@media(prefers-reduced-motion:no-preference){.gp-check-box{transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}}
.gp-check-item.done .gp-check-box{background:var(--win);border-color:var(--win);color:#fff}
.gp-check-item.done .gp-check-txt{color:var(--text-tertiary);text-decoration:line-through;text-decoration-color:var(--border-strong)}
.gp-check-src{font-size:11px;color:var(--text-tertiary);margin-left:6px;font-weight:600}
.gp-progress{margin-top:12px;font-size:12.5px;font-weight:500;color:var(--text-secondary)}
.gp-progress.ready{color:var(--win)}
.acov-kpi-val.kwin{color:var(--win)}.acov-kpi-val.kloss{color:var(--loss)}.acov-kpi-val.acc{color:var(--win)}
.acov-empty-icon{display:block;margin:0 auto 14px;opacity:.3;color:var(--text-tertiary)}

/* ── Risk Management Section ─────────────────────────────────────────────── */
.rm-sec{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;margin-bottom:4px}
.rm-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;user-select:none;font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;transition:color var(--dur-fast),background var(--dur-fast);gap:var(--sp-2);font-family:var(--font-num)}
.rm-hd:hover{color:var(--text-primary);background:rgba(255,255,255,.025)}
.rm-hd-left{display:flex;align-items:center;gap:var(--sp-2)}
.rm-chv{transition:transform .22s cubic-bezier(0,0,.2,1);color:var(--text-tertiary);flex-shrink:0}
.rm-chv.open{transform:rotate(180deg)}
.rm-body{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);border-top:1px solid var(--border)}
.rm-body.cld{display:none}

/* ── Weekly Review ───────────────────────────────────────────────────────── */
/* === Weekly Review Wizard === */
/* ── Weekly Review ───────────────────────────────────────────────────────── */
/* Reviews section toggle — This Week | History (one sidebar entry) */
.rev-seg{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:4px;margin-bottom:10px}
.rev-seg-btn{border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:600;padding:8px 22px;border-radius:var(--rs);cursor:pointer;font-family:inherit;transition:background var(--dur-fast),color var(--dur-fast)}
.rev-seg-btn:hover{color:var(--text-primary)}
.rev-seg-btn.on{background:var(--bg-elevated);color:var(--text-primary);box-shadow:var(--el-2)}
.rev-seg-btn:active{transform:scale(.97)}
/* KPI row */
.wr-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2-5);margin-bottom:16px}
.wr-kpi-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:13px 16px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--el-1);transition:border-color var(--dur-base)}
.wr-kpi-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);border-radius:2px 2px 0 0}
.wr-kpi-val{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);line-height:1.1}
.wr-kpi-sub{font-size:11px;color:var(--text-tertiary);margin-top:5px;letter-spacing:.01em}
/* Trade mini list */
#wr-trade-list{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.wr-trade-row{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 16px;border-bottom:1px solid var(--tint-1);transition:background var(--dur-fast)}
.wr-trade-row:last-child{border-bottom:none}
.wr-trade-row:hover{background:var(--bg-hover)}
.wr-trade-row.wr-tr-win{border-left-color:var(--win)}
.wr-trade-row.wr-tr-loss{border-left-color:var(--loss)}
.wr-trade-row.wr-tr-be{border-left-color:var(--breakeven)}
.wr-trade-row.wr-tr-nt{border-left-color:var(--no-trade)}
.wr-trade-info{display:flex;align-items:center;gap:6px;min-width:0}
.wr-trade-pair{font-size:13px;font-weight:600;color:var(--text-primary);min-width:30px}
.wr-trade-date{font-size:11px;color:var(--text-tertiary);flex:1}
.wr-trade-r{font-size:14px;font-weight:700;min-width:60px;text-align:right;font-variant-numeric:tabular-nums}
.wr-meter-track{display:flex;gap:5px;height:42px}
.wr-seg{flex:1;border:1px solid var(--border);background:var(--bg-surface);border-radius:var(--rs);cursor:pointer;padding:0;position:relative;overflow:hidden}
.wr-seg::after{content:'';position:absolute;inset:0;background:var(--accent);opacity:0;transition:opacity .18s var(--ease-out)}
@media(prefers-reduced-motion:no-preference){.wr-seg{transition:border-color .18s var(--ease-out),transform .14s var(--ease-spring)}}
.wr-seg:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.wr-seg:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
@media(hover:hover) and (pointer:fine){.wr-seg:hover{border-color:var(--border-strong)}}
.wr-seg.fill{border-color:var(--accent)}
.wr-seg.fill::after{opacity:1}
.wr-seg.tip{transform:translateY(-2px)}
.wr-grade-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);cursor:pointer;transition:background .22s var(--ease-spring),border-color .22s var(--ease-spring),box-shadow .22s var(--ease-spring),transform .22s var(--ease-spring);font-family:var(--font-body)}
.wr-grade-btn:hover{border-color:var(--border-strong);background:var(--bg-elevated);transform:translateY(-2px)}
.wr-grade-btn.on-ab{background:var(--win-dim);border-color:var(--win-border);box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 0 2px rgba(0,0,0,.35);transform:translateY(-2px)}
.wr-grade-btn.on-c{background:rgba(125,139,161,.1);border-color:rgba(125,139,161,.4);box-shadow:0 0 0 2px rgba(125,139,161,.06);transform:translateY(-2px)}
.wr-grade-btn.on-df{background:var(--loss-dim);border-color:var(--loss-border);box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 0 2px rgba(0,0,0,.35);transform:translateY(-2px)}
.wr-reflect-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px}
/* Single-page journal layout */
/* The This Week column. Was 900px, which on a wide monitor left ~390px of
   dead space each side INSIDE an already-capped 1680px page — the content
   read as a narrow strip adrift in the middle.
   1280 rather than the full page width, because the hero band pushes its
   supporting stats right with margin-left:auto, so the gap inside that banner
   grows 1:1 with the container: 504px at 900, over 1000px at 1440. 1280 keeps
   it reading as a banner rather than two things at opposite ends of a field.
   The AI review text is unaffected either way — .wr-ai-out caps itself at
   68ch, so the prose measure never follows the container. */
.wr-journal{max-width:1280px;margin:0 auto}
.wr-block{margin-bottom:26px}
.wr-eyebrow{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:12px;display:flex;align-items:center;gap:10px;font-family:var(--font-num)}
.wr-eyebrow::after{content:'';flex:1;height:1px;background:var(--border)}
.wr-trades-det{margin-top:12px}
.wr-trades-det>summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--text-secondary);list-style:none;display:inline-flex;align-items:center;gap:7px;padding:6px 2px}
.wr-trades-det>summary::-webkit-details-marker{display:none}
.wr-trades-det>summary::before{content:'▸';font-size:11px;color:var(--text-tertiary);transition:transform var(--dur-fast)}
.wr-trades-det[open]>summary::before{transform:rotate(90deg)}
@media(hover:hover) and (pointer:fine){.wr-trades-det>summary:hover{color:var(--text-primary)}}
.wr-trades-card{margin:8px 0 0;padding:0}
.wr-ai-sub{font-size:12px;color:var(--text-tertiary);margin-top:2px}
/* No longer sticky — it held the Save button; now it's just two links, so it
   sits at the end of the page instead of floating over the review. */

@media(max-width:768px){#pg-weekly,#pg-reviews{padding-bottom:90px}}
/* History link */
/* Week snapshot: mini R curve + best/worst trade */
.wr-snap-card{display:flex;align-items:center;gap:var(--sp-4);margin:14px 0 0;padding:14px 16px;flex-wrap:wrap}
.wr-snap-curve{flex:1;min-width:180px}
.wr-snap-curve-lbl,.wr-snap-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:8px;font-family:var(--font-num)}
.wr-snap-curve svg{display:block;width:100%;height:54px}
.wr-snap-nocurve{font-size:12px;color:var(--text-tertiary);padding:16px 0}
.wr-snap-tp{display:flex;gap:var(--sp-4)}
.wr-snap-trade-row{display:flex;align-items:center;gap:8px}
.wr-snap-pair{font-size:13px;font-weight:600;color:var(--text-primary)}
.wr-snap-r{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:600px){.wr-snap-card{flex-direction:column;align-items:stretch}.wr-snap-tp{justify-content:space-between}}

/* ── Review History — journal timeline ───────────────────────────────────── */
/* Summary strip */
/* THREE cards, not five. This declared repeat(5,1fr) while the markup only
   ever had three tiles — reviews written, current streak, longest streak — so
   two empty grid columns hung off the right and the row stopped short of the
   page. On a wide monitor that left 845px of nothing, which read as the page
   being narrower than it is. auto-fit rather than a fixed 3 so adding a fourth
   tile later cannot reintroduce the same gap. */
.rh-summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3);margin-bottom:22px}
.rh-sum-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px 13px 17px;box-shadow:var(--el-1);position:relative;overflow:hidden;cursor:default;display:flex;flex-direction:column;justify-content:center;min-height:92px;transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-fast)}
.rh-sum-card:hover{border-color:var(--border-strong);box-shadow:0 4px 20px rgba(0,0,0,.35);transform:translateY(-1px)}
.rh-sum-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:8px;font-family:var(--font-num)}
.rh-sum-val{font-size:22px;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;line-height:1.05;margin-bottom:5px}
.rh-sum-sub{font-size:11px;color:var(--text-tertiary);line-height:1.4}
.rht-month{margin-bottom:4px}
.rht-field--win{--rht-fc:var(--win)}.rht-field--loss{--rht-fc:var(--loss)}.rht-field--amber{--rht-fc:var(--amber)}
.rh-load-week{font-size:12px;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rs);padding:4px 12px;cursor:pointer;font-family:var(--font-body);transition:background var(--dur-fast)}
.rh-load-week:hover{background:var(--accent-border)}
@keyframes rhCardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:900px){.rh-summary-row{grid-template-columns:repeat(3,1fr)}}

/* ── Active section glow ─────────────────────────────────────────────────── */
.section-active{border-color:var(--accent-border)!important;box-shadow:inset 0 1px 0 var(--hi)!important}
/* ── Draft button ────────────────────────────────────────────────────────── */
.btn-draft{background:var(--tint-1)!important;border:1px solid var(--border-strong)!important;color:var(--text-primary)!important;font-weight:500}
.btn-draft:hover{background:var(--tint-2)!important;border-color:var(--border-strong)!important;color:var(--text-primary)!important}
/* Amber-alpha text tuned for dark measured 1.39:1 on light — a near-invisible Save Draft. */

/* ── Auth / Profile / Admin ──────────────────────────────────────────────── */
@keyframes sb-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.sb-pulse{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:sb-pulse 1.2s ease-in-out infinite}
/* ── The load-in (#sb-loading) ────────────────────────────────────────────────
   The field, and in its middle the top bar's lockup at --bi-k times its size
   (the same mark, faces, tracking and gap as #logo). On the phone app.js writes
   it, and until it does only the pen's tip stands on the field. On a wider
   screen, with reduced motion, or without GSAP (.bi-static) the lockup stands
   finished from the first paint. Tokens only, so both themes. */
/* Until the app's startup runs, a stored session shows the load-in instead of the sign-in card (see the head of index.html). */
html[data-boot="app"] #login-screen{display:none!important}
html[data-boot="app"] #sb-loading{display:flex!important}
/* Above the sign-in screens (9000-9002): the load-in covers the card at a signed-in boot, when the startup has already
   lifted data-boot but not yet shown the app, and it comes up over the card after a sign-in. */
#sb-loading{position:fixed;inset:0;z-index:9050;align-items:center;justify-content:center;transition:opacity .24s var(--ease-out)}
#sb-loading.sb-out{opacity:0;pointer-events:none}
.bi-field{position:absolute;inset:0;background:var(--bg-base)}
.bi-lock{--bi-k:2;position:relative;display:flex;align-items:center;gap:calc(10px * var(--bi-k));font-size:calc(14px * var(--bi-k));font-weight:600;letter-spacing:.24em;line-height:1.05;text-transform:uppercase;white-space:nowrap;color:var(--text-primary);will-change:transform}
@media (min-width:900px){.bi-lock{--bi-k:2.5}}
.bi-mark{display:block;flex:none;width:calc(32px * var(--bi-k));height:calc(32px * var(--bi-k));color:var(--text-primary)}
.bi-wm{display:flex;flex-direction:column}
.bi-ln{display:block;overflow:hidden}
.bi-ln>span{display:block}
.bi-sub{margin-top:calc(3px * var(--bi-k));font-family:var(--font-num);font-size:calc(8.5px * var(--bi-k));font-weight:400;letter-spacing:.2em;color:var(--text-tertiary)}
.bi-s{stroke-dasharray:100 100}
.bi-rule{stroke-dasharray:26 26}
/* The phone's first frame, before the stroke (the same query as the phone in app.js): the S and the record undrawn, each
   dash its path's length pushed off the end, and the record's tip and the name out of sight. */
@media (max-width:768px) and (pointer:coarse) and (prefers-reduced-motion:no-preference){.bi-s{stroke-dashoffset:100}.bi-rule{stroke-dashoffset:26}.bi-rdot{opacity:0}.bi-ln>span{transform:translateY(110%)}}
.bi-static .bi-s,.bi-static .bi-rule{stroke-dashoffset:0}.bi-static .bi-rdot{opacity:1}.bi-static .bi-ln>span{transform:none}
@media (prefers-reduced-motion:reduce){#sb-loading{transition:none}}
/* ── ⌘K Command Palette ── */
#cmdk-overlay{display:none;position:fixed;inset:0;z-index:9500;background:rgba(4,7,13,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:flex-start;justify-content:center;padding:14vh 20px 20px}
/* The palette: backdrop and box arrive together (200ms, easing out), the box rising 6px from 98%, and
   leave together in 140ms, easing in. The box keeps one height while you type; the results scroll in it. */
#cmdk-overlay.show{display:flex;animation:cmdk-fade var(--dur-base) var(--ease-out) both}
#cmdk-overlay.out{pointer-events:none;animation:cmdk-fade-out calc(var(--dur-base) * .7) var(--ease-in) both}
#cmdk-panel{width:100%;max-width:560px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);box-shadow:0 1px 0 var(--tint-1) inset,0 24px 60px -12px rgba(0,0,0,.7);overflow:hidden;animation:cmdk-in var(--dur-base) var(--ease-out) both}
#cmdk-overlay.out #cmdk-panel{animation:cmdk-out calc(var(--dur-base) * .7) var(--ease-in) both}
@keyframes cmdk-in{0%{opacity:0;transform:translateY(6px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes cmdk-out{to{opacity:0;transform:translateY(4px) scale(.98)}}
@keyframes cmdk-fade{from{opacity:0}}
@keyframes cmdk-fade-out{to{opacity:0}}
#cmdk-search-row{display:flex;align-items:center;gap:var(--sp-2-5);padding:14px 16px;border-bottom:1px solid var(--border)}
#cmdk-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:var(--font-body);font-size:14px}
#cmdk-input::placeholder{color:var(--text-tertiary)}
.cmdk-esc{font-size:11px;color:var(--text-tertiary);border:1px solid var(--border-strong);border-radius:4px;padding:2px 6px;letter-spacing:.04em}
#cmdk-results{height:340px;max-height:calc(100dvh - 14vh - 110px);overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--rm);cursor:pointer;color:var(--text-secondary);font-size:14px}
.cmdk-item .cmdk-ic{width:16px;height:16px;flex-shrink:0;color:var(--text-tertiary);display:flex;align-items:center;justify-content:center}
.cmdk-item .cmdk-ic svg{width:16px;height:16px}
.cmdk-item.active{background:var(--accent-dim);color:var(--text-primary)}
.cmdk-item.active .cmdk-ic{color:var(--accent)}
.cmdk-empty{padding:26px;text-align:center;color:var(--text-tertiary);font-size:13px}
.plan-pill-admin{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;}
.plan-pill-user{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;}
.plan-pill-early_bird{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;}
.plan-pill-invited{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;}
.plan-pill-standard{background:var(--win-dim);color:var(--win);border:1px solid var(--win-border);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;}
.plan-pill-moderator{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;}
#nav-moderator.on{color:var(--accent);}
.plan-pill-influencer{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;}
/* ── Verified badge ─────────────────────────────────────────────────────── */
.lb-verified{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:var(--accent);border-radius:50%;margin-left:4px;vertical-align:middle;flex-shrink:0;}
.lb-verified svg{width:8px;height:8px;stroke:#fff;stroke-width:2.5;fill:none;}
/* Broker-verified seal (green shield) + Verified-only toggle */
.lb-broker-verified{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;color:var(--win);margin-left:4px;vertical-align:middle;flex-shrink:0;}
.lb-broker-verified svg{width:15px;height:15px}
.lb-controls{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:28px;flex-wrap:wrap}
.lb-controls .lb-tabs{margin-bottom:0;flex:1;min-width:220px}
.lb-verified-toggle{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.lb-verified-toggle svg{width:14px;height:14px}
@media(hover:hover) and (pointer:fine){.lb-verified-toggle:hover{border-color:var(--border-strong);color:var(--text-primary)}}
.lb-verified-toggle.on{background:var(--win-dim);border-color:var(--win-border);color:var(--win)}
/* ── Partnership page ───────────────────────────────────────────────────── */
.partner-page{padding:16px 20px;}
/* The radial blob that used to sit here was decoration, not structure. */
.partner-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r-card);padding:5px 14px;font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
.partner-hero-sub{font-size:14px;color:var(--text-secondary);line-height:1.6;max-width:520px;}
/* Skeleton — shaped like the page it replaces, so the eye learns the layout
   before the data lands. A sentence saying "Loading…" teaches nothing. */
.pskel{animation:pskel-pulse 1.4s ease-in-out infinite}
.pskel-bar{background:var(--bg-hover);border-radius:var(--rs);height:12px}
.pskel-block{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card)}
@keyframes pskel-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.pskel{animation:none;opacity:.75}}
.aff-eb-empty{font-size:12px;color:var(--text-tertiary);padding:22px 0;text-align:center;line-height:1.6}
.aff-el-wrap{width:100%;height:150px;margin:2px 0 10px}
.aff-el{width:100%;height:100%;display:block;overflow:visible}
.aff-el-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.aff-el-axis{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
.aff-el-dot{fill:var(--bg-elevated);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.aff-el-dot.end{fill:var(--accent)}
.aff-el-lbl{font-size:11px;fill:var(--text-tertiary);font-family:var(--font-body)}
/* Funnel: bars proportional to sign-ups; accent, never green (guide rule). */
.aff-fn-row{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--border)}
.aff-fn-row:last-child{border-bottom:none;padding-bottom:0}
.aff-fn-lbl{font-size:12px;color:var(--text-secondary)}
.aff-fn-lbl small{display:block;font-size:11px;color:var(--text-tertiary);margin-top:1px}
.aff-fn-val{font-size:15px;font-weight:700;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums}
.aff-fn-bar{grid-column:1/-1;height:4px;background:var(--bg-surface);border-radius:2px;overflow:hidden}
.aff-fn-bar>i{display:block;height:100%;background:var(--accent);border-radius:2px}
.aff-fn-row.na .aff-fn-lbl,.aff-fn-row.na .aff-fn-val{color:var(--text-tertiary)}
.aff-fn-row.na .aff-fn-bar>i{background:var(--border)}
/* Links zone */
.aff-lk{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.aff-lk:last-child{border-bottom:none;padding-bottom:0}
.aff-lk-main{flex:1;min-width:0}
.aff-lk-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:3px;font-family:var(--font-num)}
.aff-lk-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--text-primary);word-break:break-all;line-height:1.45}
.aff-lk-url.big{font-size:15px;font-weight:600}
.aff-lk-sub{font-size:11px;color:var(--text-tertiary);margin-top:3px;line-height:1.45}
.aff-qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-top:14px;margin-top:4px;border-top:1px solid var(--border)}
.aff-qr-img{width:118px;height:118px;flex-shrink:0;background:#fff;border-radius:8px;padding:6px;border:1px solid var(--border)}
.aff-qr-img svg{width:100%;height:100%;display:block}
.aff-qr-txt{flex:1;min-width:180px;font-size:12.5px;color:var(--text-secondary);line-height:1.55}
.aff-test{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.aff-test-res{font-size:12px;color:var(--text-secondary);line-height:1.5;width:100%}
/* Results zone */
.aff-tr-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.aff-tr-big{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--text-primary)}
.aff-tr-grp{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin:16px 0 4px;font-family:var(--font-num)}
.aff-sp{width:100%;height:64px;display:block;margin-top:6px}
.aff-sp rect{fill:var(--accent);opacity:.85}
.aff-sp rect.z{fill:var(--bg-surface);opacity:1}
.aff-sp-cap{display:flex;justify-content:space-between;font-size:11px;color:var(--text-tertiary);margin-top:4px}
.aff-tr-empty{font-size:12px;color:var(--text-tertiary);line-height:1.6;padding:8px 0}
.aff-kit-copy{background:none;border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--rs);padding:4px 11px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color var(--dur-fast),color var(--dur-fast)}
.aff-kit-copy:hover{border-color:var(--accent);color:var(--accent)}
.aff-kit-rules li{font-size:12.5px;line-height:1.65;color:var(--text-secondary);margin-bottom:7px}
.aff-kit-rules{margin:0;padding-left:18px}
.aff-kit-rules b{color:var(--text-primary)}
/* Slim link bar — the link is the page's most-used element, so it lives in a
   bar under the title rather than inside a hero that needed 36px of padding. */
.partner-linkbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;background:linear-gradient(135deg,var(--accent-dim),rgba(240,180,41,0) 55%),var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5)}
.partner-linkbar-l{display:flex;align-items:center;gap:var(--sp-3);flex:1;min-width:0}
.partner-linkbar-l .partner-badge{margin:0;flex-shrink:0}
.partner-linkbar-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);flex-shrink:0;font-family:var(--font-num)}
.partner-linkbar .partner-link-url{font-size:13px;font-weight:600}
.partner-linkbar-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.partner-linkbar .partner-copy-btn{padding:8px 16px;font-size:12px}
/* Grid children own no margin — the 20px gutter owns the rhythm. */
.partner-page .dash-r2>.partner-info-card,.partner-page .dash-r1>.partner-info-card,.partner-page .dash-r2-side>.partner-info-card,.partner-page .dash-r2-side>.pay-setup{margin-bottom:0}
.partner-page .dash-r2,.partner-page .dash-r1{margin-bottom:var(--sp-5)}
.partner-page .dash-r2:last-child,.partner-page .dash-r1:last-child{margin-bottom:0}
@media(max-width:900px){.partner-page .pt-grid>*{order:0!important}}
/* Talking points: one line, one copy button. Building blocks, not scripts. */
.aff-kit-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.aff-kit-line:last-child{border-bottom:none;padding-bottom:0}
.aff-kit-line>span{font-size:12.5px;line-height:1.55;color:var(--text-secondary)}
.aff-kit-line .aff-kit-copy{flex-shrink:0;margin-top:1px}
.aff-kit-grp{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin:14px 0 2px;font-family:var(--font-num)}
.aff-kit-grp:first-of-type{margin-top:0}
.aff-kit-hero{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:12px}
@media(max-width:600px){.partner-linkbar-l{flex-wrap:wrap}.partner-linkbar-r{width:100%}.partner-linkbar-r button{flex:1}}
.partner-copy-btn{background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);border-radius:var(--rm);padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast);letter-spacing:.04em;}
.partner-copy-btn:hover{background:var(--accent-border);}
.partner-link-url{flex:1;min-width:180px;font-family:'SF Mono',ui-monospace,monospace;font-size:14px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.partner-share-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--rm);padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color var(--dur-fast),color var(--dur-fast);}
.partner-share-btn:hover{border-color:var(--accent-border);color:var(--accent);}
.partner-share-btn svg{width:14px;height:14px;}
.partner-stat{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-4) var(--sp-3);text-align:center;}
.partner-stat-val{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-.02em;}
.partner-stat-sub{font-size:11px;color:var(--text-tertiary);margin-top:5px;line-height:1.4;}
.partner-info-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:0 1px 2px rgba(0,0,0,.06);}
.partner-info-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);}
.partner-info-row:last-child{border-bottom:none;padding-bottom:0;}
.partner-info-label{font-size:12px;color:var(--text-secondary);}
.partner-info-val{font-size:13px;font-weight:600;color:var(--text-primary);}
.partner-status-active{color:var(--win);}
.partner-status-paused{color:var(--amber);}
.partner-status-trial{color:var(--accent);}
.partner-contact-btn{width:100%;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--r);padding:12px;font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:border-color var(--dur-fast),color var(--dur-fast);display:block;text-decoration:none;}
.partner-contact-btn:hover{border-color:var(--accent);color:var(--accent);}
.partner-ref-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--bg);border-radius:var(--rm);margin-bottom:6px;}
.partner-ref-row:last-child{margin-bottom:0;}

@media(max-width:520px){
  .partner-page{padding:10px 12px;overflow-x:hidden;}
  .partner-hero-sub{font-size:13px;}
  .partner-copy-btn{flex-shrink:0;padding:7px 14px;font-size:11px;}
  .partner-stat{padding:14px 10px;}
  .partner-stat-val{font-size:22px;}
  .partner-stat-sub{font-size:11px;}
  .partner-info-card{padding:16px;overflow:hidden;}
  .partner-info-row{flex-wrap:wrap;gap:3px;}
  .partner-info-val{word-break:break-word;text-align:right;}
}
/* ── Admin growth funnel ────────────────────────────────────────────────── */
/* ── Churn risk ─────────────────────────────────────────────────────────── */
.churn-row{display:flex;align-items:center;gap:var(--sp-2-5);padding:9px 12px;border-radius:var(--rm);background:var(--bg-elevated);border:1px solid var(--border);margin-bottom:5px;}
.churn-row:last-child{margin-bottom:0;}
.churn-days{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-card);white-space:nowrap;flex-shrink:0;}
.churn-days.hot{background:var(--loss-dim);color:var(--loss);}
.churn-days.warm{background:var(--amber-dim);color:var(--amber);}
.churn-email-btn{background:none;border:1px solid var(--border-strong);border-radius:var(--rs);padding:4px 10px;font-size:11px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:border-color var(--dur-fast);}
.churn-email-btn:hover{border-color:var(--accent);color:var(--accent);}
/* ── Admin partners table ───────────────────────────────────────────────── */

/* ── Admin Affiliates page ──────────────────────────────────────────────── */
/* ── Affiliate Hub ────────────────────────────────────────────────────────── */
.af2-toolbar{display:flex;gap:var(--sp-2-5);align-items:center;margin-bottom:20px;flex-wrap:wrap}
/* Chrome paints autofilled fields with its own light background
   (rgb(232,240,254)) and no property overrides it directly — an inset
   box-shadow the size of the field is the standard workaround, and the absurd
   transition delay stops Chrome repainting over it. EVERY input in the app was
   affected, login included; the affiliate filter is just where it got noticed.
   --autofill-bg lets any input sitting on a different surface correct itself. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--bg-elevated) inset !important;
  box-shadow:0 0 0 1000px var(--bg-elevated) inset !important;
  -webkit-text-fill-color:var(--text-primary) !important;
  caret-color:var(--text-primary);
  transition:background-color 9999s ease-in-out 0s !important;
}
.af2-search{flex:1;min-width:180px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rm);padding:0 12px;height:36px;font-size:13px;color:var(--text-primary);outline:none;transition:border-color var(--dur-fast)}
.af2-search:focus{border-color:var(--accent)}
.af2-filters{display:flex;gap:var(--sp-1)}
.af2-fb{height:32px;padding:0 13px;border-radius:var(--rm);border:1px solid var(--border);background:none;font-size:12px;font-weight:600;color:var(--text-tertiary);cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.af2-fb:hover,.af2-fb.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}

/* ── Affiliate management hero (orange twin of .mod-hero) ── */
.aff-hero{position:relative;overflow:hidden;border-radius:var(--r-card);padding:22px 24px;margin-bottom:18px;background:linear-gradient(135deg,var(--accent-dim) 0%,var(--accent-dim) 55%,var(--accent-dim) 100%);border:1px solid var(--accent-border);}
.aff-hero::before{content:'';position:absolute;top:-60px;right:-50px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,var(--accent-dim) 0%,transparent 70%);pointer-events:none;}
.aff-hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;position:relative;}
.aff-hero-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;font-family:var(--font-num)}
.aff-hero-eyebrow svg{width:13px;height:13px;flex-shrink:0;}
.aff-hero-title{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);line-height:1.15;}
.aff-hero-sub{font-size:13px;color:var(--text-secondary);margin-top:6px;max-width:470px;line-height:1.5;}
.aff-hero-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 13px;border-radius:var(--r-card);background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);white-space:nowrap;flex-shrink:0;}
.aff-hero-status.closed{background:var(--amber-dim);border-color:var(--amber-border);color:#f3cd7e;}
.aff-hero-status .aff-hero-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.aff-hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px;position:relative;}
.aff-hero-metric{padding:0 22px;border-right:1px solid var(--tint-2);display:flex;flex-direction:column;gap:5px;min-width:0;}
.aff-hero-metric:first-child{padding-left:0;}
.aff-hero-metric:last-child{border-right:none;}
.aff-hero-val{font-size:32px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-primary);}
.aff-hero-val.orange{color:var(--accent);}
.aff-hero-mlabel{font-size:11px;font-weight:500;color:var(--text-secondary);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.aff-hero-foot{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--tint-2);font-size:12px;color:var(--text-tertiary);position:relative;}
.aff-hero-live{width:6px;height:6px;border-radius:50%;background:var(--win);flex-shrink:0;}
.aff-hero-refresh{margin-left:auto;background:var(--tint-1);border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--rm);height:30px;padding:0 13px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);}
.aff-hero-refresh:hover{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);}
.aff-hero-refresh:active{transform:scale(.97);}
.aff-hero-refresh svg{width:13px;height:13px;}
@media(max-width:820px){
  .aff-hero-metrics{grid-template-columns:repeat(2,1fr);gap:16px 0;}
  .aff-hero-metric{padding:12px 0!important;border-right:none!important;border-bottom:1px solid var(--tint-2);}
  .aff-hero-metric:nth-last-child(-n+2){border-bottom:none;}
  .aff-hero-val{font-size:24px;}
}
.aff-animate-in .aff-hero{animation:modRise .42s var(--ease-out) both;}
.aff-animate-in .aff-hero-metric{animation:modRise .42s var(--ease-out) both;}
.aff-animate-in .aff-hero-metric:nth-child(1){animation-delay:.05s;}
.aff-animate-in .aff-hero-metric:nth-child(2){animation-delay:.1s;}
.aff-animate-in .aff-hero-metric:nth-child(3){animation-delay:.15s;}
.aff-animate-in .aff-hero-metric:nth-child(4){animation-delay:.2s;}
@media(prefers-reduced-motion:reduce){.aff-animate-in .aff-hero,.aff-animate-in .aff-hero-metric{animation:none!important;}}

/* ── Admin influencer section ───────────────────────────────────────────── */
/* ── Moderation console ─────────────────────────────────────────────────── */
.mod-tab{min-width:max-content;height:30px;padding:0 12px;border:none;background:none;border-radius:var(--rs);font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background var(--dur-fast),color var(--dur-fast);}
.mod-tab:hover{color:var(--text-primary);}
.mod-ctx{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;padding:8px 12px;border-radius:var(--rm);margin-bottom:12px;}
.mod-ctx-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.mod-ctx-cm{background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.22);color:var(--accent);}
.mod-ctx-cm .mod-ctx-dot{background:var(--accent);}
.mod-ctx-lb{background:var(--accent-dim);border:1px solid var(--accent-border);color:#f3cd7e;}
.mod-ctx-lb .mod-ctx-dot{background:var(--accent);}
.mod-ctx b{font-weight:700;}
.mod-ctx-sub{color:var(--text-tertiary);font-weight:500;}
.mod-item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;margin-bottom:10px;}
.mod-item-top{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap;}
.mod-author{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-primary);cursor:pointer;}
.mod-author:hover{color:var(--accent);}
.mod-av{width:22px;height:22px;border-radius:50%;background:var(--accent-grad);color:var(--on-accent);font-size:11px;font-weight:400;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase;font-family:var(--font-num)}
.mod-chip{font-size:11px;font-weight:600;padding:2px 7px;border-radius:var(--r-card);line-height:1.4;white-space:nowrap;}
.mod-chip-warn{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-border);}
.mod-chip-danger{background:var(--loss-dim);color:var(--loss);border:1px solid var(--loss-border);}
.mod-chip-muted{background:var(--bg-elevated);color:var(--text-tertiary);border:1px solid var(--border);}
.mod-time{font-size:11px;color:var(--text-tertiary);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mod-reason{font-size:11px;color:var(--text-tertiary);margin-bottom:8px;}
.mod-reason b{color:var(--text-secondary);font-weight:600;}
.mod-quote{font-size:13px;line-height:1.55;color:var(--text-secondary);background:var(--bg-base);border:1px solid var(--border);border-left:2px solid var(--border-strong);border-radius:var(--rm);padding:9px 12px;margin-bottom:11px;white-space:pre-wrap;word-break:break-word;}
.mod-reasons{margin:2px 0 10px;}
.mod-reasons div{font-size:12px;color:var(--text-secondary);padding:2px 0;}
.mod-actions{display:flex;gap:7px;flex-wrap:wrap;}
.mod-btn{height:30px;padding:0 12px;border-radius:var(--rm);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border-strong);background:var(--bg-elevated);color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);}
.mod-btn:hover{color:var(--text-primary);border-color:var(--text-tertiary);}
.mod-btn:disabled{opacity:.5;cursor:default;}
.mod-btn-danger{color:var(--loss);border-color:var(--loss-border);}
.mod-btn-danger:hover{background:var(--loss-dim);border-color:var(--loss-border);color:var(--loss);}
.mod-btn-ok{color:var(--win);border-color:var(--win-border);}
.mod-btn-ok:hover{background:var(--win-dim);color:var(--win);}
.mod-btn-warn{color:var(--amber);border-color:var(--amber-border);}
.mod-btn-warn:hover{background:var(--amber-dim);color:var(--amber);}
/* Shared empty state for ALL THREE staff consoles, not just Moderator. Admin and
   Affiliates previously had no helper at all — some lists rendered a bare
   unstyled string ("No affiliates yet.") and others hand-rolled the same box
   inline five times, which had already drifted (48px vs 56px padding). The
   `boxed` variant is for lists that sit directly on the page background and need
   their own surface; without it the state is plain centred text inside an
   existing container. */
.mod-empty{text-align:center;padding:30px 16px;color:var(--text-tertiary);}
.mod-empty.boxed{padding:48px 20px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);}
.mod-empty-icon{font-size:24px;margin-bottom:8px;opacity:.7;}
.mod-empty-title{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;}
.mod-empty-sub{font-size:12px;color:var(--text-tertiary);line-height:1.5;max-width:320px;margin:0 auto;}
.mod-skel{height:74px;border-radius:var(--r);background:linear-gradient(90deg,var(--bg-surface),var(--bg-elevated),var(--bg-surface));background-size:200% 100%;animation:modShimmer 1.3s ease-in-out infinite;margin-bottom:10px;}
@keyframes modShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.mod-log-row{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px;}
.mod-log-row:last-child{border-bottom:none;}
.mod-log-act{font-weight:600;flex-shrink:0;}
.mod-log-meta{color:var(--text-tertiary);flex:1;min-width:0;}
.mod-log-time{color:var(--text-tertiary);font-size:11px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.mod-log-tail{flex-shrink:0;}
.mod-log-undo{background:none;border:1px solid var(--border-strong);color:var(--text-secondary);border-radius:var(--rs);font-size:11px;font-weight:600;padding:2px 9px;cursor:pointer;font-family:inherit;transition:color var(--dur-fast),border-color var(--dur-fast);}
.mod-log-undo:hover{border-color:var(--accent);color:var(--accent);}
.mod-log-undo:active{transform:scale(.96);}
.mod-log-rev{font-size:11px;font-weight:400;color:var(--text-tertiary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:1px 8px;text-transform:uppercase;letter-spacing:.10em;font-family:var(--font-num)}
/* Moderator scorecard (admin roster) */
.mod-sc{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;}
.mod-sc-head{display:flex;align-items:center;gap:10px;}
.mod-sc-id{flex:1;min-width:0;}
.mod-sc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:12px 0 9px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.mod-sc-stat{text-align:center;padding:9px 4px;border-right:1px solid var(--border);}
.mod-sc-stat:last-child{border-right:none;}
.mod-sc-val{font-size:18px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1;}
.mod-sc-val.good{color:var(--win);}
.mod-sc-val.warn{color:var(--amber);}
.mod-sc-val.bad{color:var(--loss);}
.mod-sc-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-top:3px;font-family:var(--font-num)}
.mod-sc-break{font-size:12.5px;color:var(--text-tertiary);line-height:1.5;}
.mod-sc-break b{color:var(--text-secondary);font-weight:600;}
.mod-guide-note{background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r);padding:11px 14px;font-size:12px;line-height:1.6;color:var(--text-secondary);margin-bottom:14px;}
.mod-guide-note b{color:var(--text-primary);}
.mod-guide-sec{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;}
.mod-guide-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:3px;}
.mod-guide-h .mod-chip{margin-left:auto;}
.mod-guide-sub{font-size:11.5px;color:var(--text-tertiary);line-height:1.55;margin-bottom:12px;}
.mod-guide-rule{display:flex;gap:9px;font-size:12px;line-height:1.55;color:var(--text-secondary);padding:5px 0;border-top:1px solid var(--border);}
.mod-guide-rule:first-of-type{border-top:none;}
.mod-guide-rule .ic{flex-shrink:0;width:18px;text-align:center;}
.mod-guide-rule b{color:var(--text-primary);font-weight:600;}
.mod-guide-do{font-size:11.5px;line-height:1.6;color:var(--text-tertiary);margin-top:11px;padding-top:10px;border-top:1px solid var(--border);}
.mod-guide-do b{color:var(--text-secondary);font-weight:600;}
.mod-promote{position:relative;margin-bottom:14px;}
#mod-promote-results{margin-top:6px;}
.mod-roster-mid{flex:1;min-width:0;}
.mod-roster-name{font-size:13px;font-weight:600;color:var(--text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mod-roster-name:hover{color:var(--accent);}
.mod-roster-sub{font-size:11px;color:var(--text-tertiary);margin-top:1px;font-variant-numeric:tabular-nums;}
.mod-av-purple{background:linear-gradient(135deg,var(--accent),var(--accent));}
.mod-promote-hit{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);margin-bottom:6px;}
/* ── Moderator console — hero KPI band + cohesion + entrance (overhaul) ── */
.mod-hero{position:relative;overflow:hidden;border-radius:var(--r-card);padding:22px 24px;margin-bottom:18px;background:linear-gradient(135deg,var(--accent-dim) 0%,var(--accent-dim) 55%,rgba(96,165,250,.05) 100%);border:1px solid var(--accent-border);}
.mod-hero::before{content:'';position:absolute;top:-60px;right:-50px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,var(--accent-dim) 0%,transparent 70%);pointer-events:none;}
.mod-hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;position:relative;}
.mod-hero-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;font-family:var(--font-num)}
.mod-hero-eyebrow svg{width:13px;height:13px;flex-shrink:0;}
.mod-hero-title{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);line-height:1.15;}
.mod-hero-sub{font-size:13px;color:var(--text-secondary);margin-top:6px;max-width:460px;line-height:1.5;}
.mod-hero-role{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 13px;border-radius:var(--r-card);background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);white-space:nowrap;flex-shrink:0;}
.mod-hero-role.is-admin{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);}
.mod-hero-role .mod-hero-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.mod-hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px;position:relative;}
.mod-hero-metric{padding:0 22px;border-right:1px solid var(--tint-2);display:flex;flex-direction:column;gap:5px;min-width:0;}
.mod-hero-metric:first-child{padding-left:0;}
.mod-hero-metric:last-child{border-right:none;}
.mod-hero-val{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-primary);}
.mod-hero-val.blue{color:var(--accent);}
.mod-hero-val.amber{color:var(--amber);}
.mod-hero-val.red{color:var(--loss);}
.mod-hero-val.purple{color:var(--accent);}
.mod-hero-val.zero{color:var(--text-tertiary);}
.mod-hero-mlabel{font-size:11px;font-weight:500;color:var(--text-secondary);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mod-hero-foot{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--tint-2);font-size:12px;color:var(--text-tertiary);position:relative;}
.mod-hero-live{width:6px;height:6px;border-radius:50%;background:var(--win);flex-shrink:0;}
.mod-hero-refresh{margin-left:auto;background:var(--tint-1);border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--rm);height:30px;padding:0 13px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);}
.mod-hero-refresh:hover{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);}
.mod-hero-refresh:active{transform:scale(.97);}
.mod-hero-refresh svg{width:13px;height:13px;transition:transform .5s var(--ease-out);}
.mod-hero-refresh.spin svg{transform:rotate(360deg);}
@media(max-width:820px){
  .mod-hero-metrics{grid-template-columns:repeat(2,1fr);gap:16px 0;}
  .mod-hero-metric{padding:12px 0!important;border-right:none!important;border-bottom:1px solid var(--tint-2);}
  .mod-hero-metric:nth-last-child(-n+2){border-bottom:none;}
  .mod-hero-val{font-size:28px;}
}
.mod-btn:active,.mod-tab:active{transform:scale(.97);}
/* entrance — plays once per session when the tab is first opened */
@keyframes modRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.mod-animate-in .mod-hero{animation:modRise .42s var(--ease-out) both;}
.mod-animate-in .mod-hero-metric{animation:modRise .42s var(--ease-out) both;}
.mod-animate-in .mod-hero-metric:nth-child(1){animation-delay:.05s;}
.mod-animate-in .mod-hero-metric:nth-child(2){animation-delay:.1s;}
.mod-animate-in .mod-hero-metric:nth-child(3){animation-delay:.15s;}
.mod-animate-in .mod-hero-metric:nth-child(4){animation-delay:.2s;}
.mod-animate-in .mod-announce-bar{animation:modRise .42s var(--ease-out) both;animation-delay:.12s;}
.mod-animate-in .modg-nav{animation:modRise .42s var(--ease-out) both;animation-delay:.16s;}
.mod-animate-in .modv-nav{animation:modRise .42s var(--ease-out) both;animation-delay:.2s;}
.mod-animate-in .modp{animation:modRise .42s var(--ease-out) both;animation-delay:.24s;}
/* ── Sub-tab navigation (flat underline, Affiliates-style) ── */
.modv-nav{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.modv-nav::-webkit-scrollbar{display:none;}
.modv-tab{display:inline-flex;align-items:center;gap:7px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-tertiary);font-family:var(--font-body);font-size:13px;font-weight:600;padding:10px 15px;cursor:pointer;white-space:nowrap;flex-shrink:0;margin-bottom:-1px;transition:color var(--dur-fast),border-color var(--dur-fast);}
.modv-tab:hover{color:var(--text-secondary);}
.modv-tab.on{color:var(--accent);border-bottom-color:var(--accent);}
.modv-badge{font-size:11px;font-weight:700;min-width:16px;height:16px;padding:0 5px;border-radius:var(--rm);background:var(--loss-press);color:#fff;display:none;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.modv-badge.show{display:inline-flex;}
.modv-phead{font-size:12px;color:var(--text-tertiary);line-height:1.55;margin-bottom:14px;max-width:560px;}
.modv-compose{display:flex;gap:var(--sp-2);margin-bottom:16px;}
.modv-compose .fi{flex:1;}
/* primary group nav (pills) above the per-group sub-tabs */
.modg-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;}
.modg-tab{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:var(--rm);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);}
.modg-tab:hover{color:var(--text-primary);border-color:var(--border-strong);}
.modg-tab.on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);}
.modg-tab:active{transform:scale(.97);}
.modg-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.modg-dot.cm{background:var(--accent);}
.modg-dot.lb{background:var(--accent);}
.modg-dot.af{background:var(--accent);}
.modg-dot.ov{background:var(--accent);}
/* announcements compose bar under the hero */
.mod-announce-bar{margin-bottom:16px;}
.mod-announce-list{margin-top:10px;max-height:148px;overflow-y:auto;}
.modv-fade{animation:modFade .28s var(--ease-out);}
@keyframes modFade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
/* clickable hero KPIs → jump to their tab */
.mod-hero-metric.clik{cursor:pointer;border-radius:var(--rm);}
.mod-hero-metric.clik:hover .mod-hero-val{filter:brightness(1.18);}
.mod-hero-metric.clik:hover .mod-hero-mlabel{color:var(--text-primary);}
.mod-hero-metric.clik:focus-visible{outline:2px solid var(--accent-border);outline-offset:3px;}
/* ── Two-factor auth (Settings badge + enroll/challenge overlay) ── */
.stt-mfa-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:var(--r-card);margin-left:7px;vertical-align:middle;text-transform:uppercase;}
.stt-mfa-badge.off{background:var(--bg-elevated);color:var(--text-tertiary);border:1px solid var(--border);}
.stt-mfa-badge.on{background:var(--win-dim);color:var(--win);border:1px solid var(--win-border);}
.mfa-ov{position:fixed;inset:0;z-index:var(--z-gate);background:rgba(3,6,12,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:modFade .2s var(--ease-out);}
.mfa-card{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r-card);padding:26px 24px;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(0,0,0,.55);}
.mfa-h{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:-.01em;}
.mfa-sub{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:18px;}
.mfa-qr{background:#fff;border-radius:var(--r);padding:10px;width:172px;height:172px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;}
.mfa-qr svg,.mfa-qr img{width:100%;height:100%;display:block;}
.mfa-qr svg{shape-rendering:crispEdges;}
.mfa-qr img{image-rendering:pixelated;}
.mfa-manual{font-size:11px;color:var(--text-tertiary);text-align:center;margin-bottom:6px;}
.mfa-secret{font-family:monospace;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--text-primary);background:var(--bg-base);border:1px solid var(--border-strong);border-radius:var(--rm);padding:10px 10px;text-align:center;word-break:break-all;margin-bottom:16px;cursor:pointer;}
.mfa-secret:hover{border-color:var(--accent);}
.mfa-code{width:100%;height:48px;text-align:center;font-size:22px;letter-spacing:.45em;text-indent:.45em;font-variant-numeric:tabular-nums;font-weight:700;background:var(--bg-base);border:1px solid var(--border-strong);border-radius:var(--r);color:var(--text-primary);margin-bottom:8px;}
.mfa-code:focus{outline:none;border-color:var(--accent);}
.mfa-err{font-size:12px;color:var(--loss);min-height:16px;margin-bottom:10px;text-align:center;}
.mfa-textarea{width:100%;background:var(--bg-base);border:1px solid var(--border-strong);border-radius:var(--r);color:var(--text-primary);font-family:inherit;font-size:13px;line-height:1.5;padding:10px 12px;resize:vertical;min-height:72px;margin-bottom:8px;box-sizing:border-box;}
.mfa-textarea:focus{outline:none;border-color:var(--accent);}
.mfa-actions{display:flex;gap:var(--sp-2-5);}
.mfa-actions .btn{flex:1;height:40px;}
.mfa-note{font-size:12.5px;color:var(--text-tertiary);line-height:1.5;margin-top:14px;text-align:center;}
@media(prefers-reduced-motion:reduce){
  .mod-animate-in .mod-hero,.mod-animate-in .mod-hero-metric,.mod-animate-in .modv-nav,.mod-animate-in .modp{animation:none!important;}
  .modv-fade{animation:none!important;}
  .mod-btn:active,.mod-tab:active{transform:none;}
  .mod-hero-refresh svg{transition:none!important;}
  .mod-hero-live{animation:none!important;}
}
.inf-admin-section{background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r);padding:14px;margin-bottom:12px;}
.inf-admin-title{font-size:11px;font-weight:400;color:var(--accent);letter-spacing:.10em;text-transform:uppercase;margin-bottom:10px;font-family:var(--font-num)}
#nav-admin.on{color:var(--accent)}
/* ── Affiliate management tabs ──────────────────────────────────────────── */
.aff-tab-nav{display:flex;gap:var(--sp-1);margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.aff-tab-nav::-webkit-scrollbar{display:none;}
.aff-tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-tertiary);font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast);margin-bottom:-1px;white-space:nowrap;flex-shrink:0;}
.aff-tab-btn:hover{color:var(--text-secondary);}
.aff-tab-btn.on{color:var(--accent);border-bottom-color:var(--accent);}
.aff-app-badge{background:var(--loss-border);color:var(--loss);border:1px solid var(--loss-border);border-radius:var(--r-card);font-size:11px;font-weight:700;padding:1px 6px;margin-left:4px;vertical-align:middle;}
/* Application cards */
.aff-app-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;margin-bottom:10px;transition:border-color var(--dur-fast);}
.aff-app-card:hover{border-color:var(--border-strong);}
.aff-app-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:12px;}
.aff-app-name{font-size:14px;font-weight:700;color:var(--text-primary);}
.aff-app-email{font-size:12px;color:var(--text-tertiary);}
.aff-app-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:12px;}
.aff-app-tag{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:4px 10px;font-size:11px;color:var(--text-secondary);}
.aff-app-why{background:var(--accent-dim);border:1px solid var(--accent-dim);border-radius:var(--rm);padding:10px 13px;font-size:12px;color:var(--text-secondary);line-height:1.6;margin-bottom:14px;}
.aff-app-actions{display:flex;gap:var(--sp-2);align-items:center;}
.aff-app-status{font-size:11px;font-weight:400;padding:3px 10px;border-radius:var(--r-card);letter-spacing:.10em;text-transform:uppercase;font-family:var(--font-num)}
/* The follower count used to be the loudest thing on the card (18px accent bold),
   but audience size isn't what the decision turns on — whether it's still awaiting
   you, and whether a moderator already screened it, are. Status now holds that slot;
   followers demote to a peer of platform/content type. */
.aff-app-state{display:flex;align-items:center;gap:6px;white-space:nowrap}
.aff-app-tag-num{font-variant-numeric:tabular-nums;color:var(--text-secondary);font-weight:600}
.aff-app-status.pending{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-border);}
.aff-app-status.approved{background:var(--win-dim);color:var(--win);border:1px solid var(--win-border);}
.aff-app-status.rejected{background:var(--loss-dim);color:var(--loss);border:1px solid var(--loss-border);}
/* Invoice rows (admin view) */
.aff-inv-row{display:grid;grid-template-columns:minmax(0,2fr) 80px 90px 110px 90px 130px;gap:var(--sp-2);align-items:center;padding:11px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);margin-bottom:4px;font-size:13px;}
.aff-inv-head{display:grid;grid-template-columns:minmax(0,2fr) 80px 90px 110px 90px 130px;gap:var(--sp-2);padding:4px 14px;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px;font-family:var(--font-num)}
.aff-inv-status.pending{color:var(--amber);}
.aff-inv-status.paid{color:var(--win);}
.aff-inv-status.rejected{color:var(--loss);}
/* Affiliate card grid */
.aff-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-3);margin-top:4px;}
.aff-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;cursor:pointer;transition:border-color var(--dur-base),box-shadow .18s,transform var(--dur-fast);position:relative;}
.aff-card:hover{border-color:var(--border-strong);box-shadow:0 6px 28px rgba(0,0,0,.32);transform:translateY(-2px);}
.aff-card.aff-card-selected{border-color:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 6px 28px rgba(0,0,0,.35);}
.aff-card-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:14px;}
.aff-card-info{flex:1;min-width:0;}
.aff-card-name{font-size:14px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aff-card-handle{font-size:11px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.aff-card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--border);padding-top:12px;margin-top:4px;}
.aff-card-stat{text-align:center;padding:0 4px;}
.aff-card-stat:not(:last-child){border-right:1px solid var(--border);}
.aff-card-stat-val{font-size:16px;font-weight:700;color:var(--text-primary);}
.aff-card-stat-lbl{font-size:11px;color:var(--text-tertiary);margin-top:2px;letter-spacing:.03em;}
.aff-card-code{display:inline-flex;align-items:center;gap:5px;font-family:monospace;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:4px;padding:2px 8px;margin-top:10px;cursor:pointer;}
.aff-card-code:hover{background:var(--accent-border);}
.aff-card-open{background:none;border:1px solid var(--border-strong);border-radius:var(--rs);padding:4px 10px;font-size:11px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast);flex-shrink:0;align-self:flex-start;white-space:nowrap;}
.aff-card:hover .aff-card-open{border-color:var(--accent-border);color:var(--accent);}
/* Drawer */
.aff-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:8900;opacity:0;pointer-events:none;transition:opacity .25s;}
.aff-drawer-overlay.open{opacity:1;pointer-events:all;}
.aff-drawer{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(0.95);max-width:660px;width:calc(100% - 48px);max-height:86vh;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);z-index:8901;opacity:0;pointer-events:none;transition:transform .22s var(--ease-spring),opacity .18s ease;overflow-y:auto;display:flex;flex-direction:column;}
.aff-drawer.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
.aff-drawer-inner{flex:1;padding:0 0 32px;}
.aff-drawer-head{padding:20px 24px 16px;border-bottom:1px solid var(--bg-elevated);position:sticky;top:0;background:var(--bg-elevated);z-index:2;display:flex;align-items:center;gap:var(--sp-3);}
.aff-drawer-close{margin-left:auto;background:var(--tint-2);border:1px solid var(--border-strong);border-radius:var(--rs);color:var(--text-secondary);cursor:pointer;padding:5px 11px;font-size:14px;line-height:1;transition:color var(--dur-fast);}
.aff-drawer-close:hover{color:var(--text-primary);}
.aff-drawer-section{padding:18px 24px;border-bottom:1px solid var(--bg-elevated);}
.aff-drawer-section:last-child{border-bottom:none;}
.aff-drawer-section-title{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;font-family:var(--font-num)}
    /* Partner File — status spine, money band, ownership zones */
    .aff-spine{display:flex;align-items:flex-start;gap:0;margin-bottom:14px}
    .aff-spine-step{flex:1;min-width:0;position:relative;text-align:center;padding:0 4px}
    .aff-spine-step::before{content:'';position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--border-strong)}
    .aff-spine-step:first-child::before{display:none}
    .aff-spine-step.done::before{background:var(--win-border)}
    .aff-spine-dot{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--border-strong);margin-bottom:6px}
    .aff-spine-step.done .aff-spine-dot{background:var(--win-dim);border-color:var(--win)}
    .aff-spine-step.now .aff-spine-dot{border-color:var(--accent);background:var(--accent-dim)}
    .aff-spine-dot svg{display:block}
    .aff-spine-lbl{font-size:11px;font-weight:600;color:var(--text-secondary);line-height:1.3}
    .aff-spine-step.done .aff-spine-lbl{color:var(--text-primary)}
    .aff-spine-sub{font-size:11px;color:var(--text-tertiary);margin-top:1px}
    .aff-nextact{display:flex;align-items:center;gap:10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:10px 13px}
    .aff-nextact-txt{flex:1;font-size:12px;line-height:1.5;color:var(--text-secondary)}
    .aff-nextact .btn{flex-shrink:0;height:30px;font-size:11px;padding:0 12px}
    .aff-money{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .aff-money-cell{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:11px 12px;text-align:center}
    .aff-money-val{font-size:18px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
    .aff-money-val.win{color:var(--win)}
    .aff-money-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-top:3px;font-family:var(--font-num)}
    .aff-zone-theirs{background:var(--accent-dim)}
    .aff-zone-theirs .aff-drawer-section-title{display:flex;align-items:center;gap:6px}
    .aff-zone-theirs .aff-drawer-section-title::after{content:'read-only';font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:1px 7px;text-transform:none}
    .aff-stage-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:var(--r-card);padding:2px 9px;border:1px solid}
    @media(max-width:560px){
      .aff-money{grid-template-columns:repeat(3,1fr);gap:6px}
      .aff-money-val{font-size:15px}
      .aff-spine-lbl{font-size:11px}
      .aff-spine-sub{display:none}
    }
    .aff-link-row{display:flex;align-items:center;gap:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:8px 10px}
    .aff-link-row code{flex:1;font-size:11.5px;color:var(--accent);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    .aff-link-row .btn{flex-shrink:0;height:28px;padding:0 12px;font-size:11px}
    .aff-link-hint{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--text-tertiary)}
    /* what the affiliate submitted, read-only on the admin side */
    .pay-sub{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:11px 13px;margin-bottom:12px}
    .pay-sub-missing{color:var(--text-tertiary);font-size:12px;line-height:1.5}
    .pay-sub-h{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:8px;font-family:var(--font-num)}
    .pay-sub-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:3px 0}
    .pay-sub-row span{color:var(--text-tertiary);flex-shrink:0}
    .pay-sub-row b{color:var(--text-primary);font-weight:600;text-align:right;word-break:break-all}
    /* the affiliate's own onboarding card */
    .pay-setup{background:var(--bg-surface);border:1px solid var(--accent-border);border-radius:var(--r-card);padding:20px;margin-top:18px}
    .pay-setup-h{margin-bottom:14px}
    .pay-setup-h b{display:block;font-size:15px;font-weight:700;color:var(--text-primary)}
    .pay-setup-h span{display:block;font-size:12.5px;color:var(--text-secondary);margin-top:3px}
    .pay-setup-field{margin-bottom:12px}
    .pay-setup-field label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
    .pay-setup-field input{width:100%;min-height:44px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px;color:var(--text-primary);font-family:inherit;font-size:14px}
    .pay-setup-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
    .pay-hint{margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--text-tertiary)}
    .pay-setup-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .pay-setup-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
    .pay-setup-foot span{font-size:11.5px;color:var(--text-tertiary);line-height:1.45}
    @media(max-width:620px){.pay-setup-methods,.pay-setup-row{grid-template-columns:1fr}}
.aff-drawer-field{margin-bottom:12px;}
.aff-drawer-field label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;letter-spacing:.02em;}
.aff-drawer-field input,.aff-drawer-field select,.aff-drawer-field textarea{width:100%;background:var(--bg-base);border:1px solid var(--border-strong);border-radius:var(--rm);padding:9px 12px;font-size:13px;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color var(--dur-base);box-sizing:border-box;}
.aff-drawer-field input:focus,.aff-drawer-field select:focus,.aff-drawer-field textarea:focus{border-color:var(--accent);}
.aff-drawer-field textarea{resize:vertical;line-height:1.55;min-height:64px;}
.aff-drawer-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2-5);}
.aff-drawer-save{width:calc(100% - 48px);margin:0 24px;height:44px;border-radius:var(--r);background:var(--accent-grad);border:1px solid var(--accent-border);color:var(--on-accent);font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:background var(--dur-fast),box-shadow var(--dur-fast),transform .12s var(--ease-spring);font-family:inherit;box-shadow:0 2px 12px rgba(0,0,0,.35),0 1px 0 var(--border-strong) inset;}
.aff-drawer-save:hover{background:linear-gradient(135deg,#4f8ef7 0%,#7577f3 100%);box-shadow:0 6px 24px rgba(0,0,0,.35),0 1px 0 var(--border-strong) inset;}
.aff-drawer-save:active{transform:scale(0.98);box-shadow:none;}
.aff-drawer-pay-row{display:flex;align-items:center;gap:var(--sp-2);padding:8px 0;border-bottom:1px solid var(--tint-1);}
.aff-drawer-pay-row:last-child{border-bottom:none;}
.aff-add-result-item{display:flex;align-items:center;gap:var(--sp-2-5);padding:9px 12px;border-radius:var(--rm);cursor:pointer;transition:background var(--dur-fast);}
.aff-add-result-item:hover{background:var(--bg-elevated);}
.aff-add-result-name{font-size:13px;font-weight:600;color:var(--text-primary);}
.aff-add-result-email{font-size:11px;color:var(--text-tertiary);}
.aff-add-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2-5);margin-bottom:12px;}
.aff-add-field{margin-bottom:12px;}
.aff-add-field label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;}
.aff-add-field input,.aff-add-field select,.aff-add-field textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:9px 11px;font-size:13px;color:var(--text-primary);font-family:inherit;outline:none;box-sizing:border-box;transition:border-color var(--dur-base);}
.aff-add-field input:focus,.aff-add-field select:focus{border-color:var(--accent);}
.aff-add-field textarea{resize:vertical;min-height:56px;line-height:1.5;}
@media(max-width:700px){.aff-card-grid{grid-template-columns:1fr}.aff-drawer{width:calc(100% - 24px);max-height:90vh;border-radius:var(--r-card)}.aff-drawer-field-row{grid-template-columns:1fr}}
/* Partner invoice section */
.partner-inv-row{display:flex;align-items:center;gap:var(--sp-2-5);padding:10px 0;border-bottom:1px solid var(--border);}
.partner-inv-row:last-child{border-bottom:none;padding-bottom:0;}
/* Payment method tabs */
.inv-pay-tab{flex:1;height:34px;border-radius:var(--rm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);white-space:nowrap;}
.inv-pay-tab.active{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);}
.inv-pay-tab:hover:not(.active){border-color:var(--border-strong);color:var(--text-primary);background:var(--tint-1);}
/* Invoice viewer modal */
.aff-inv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:9100;opacity:0;pointer-events:none;transition:opacity var(--dur-base);}
.aff-inv-overlay.open{opacity:1;pointer-events:all;}
.aff-inv-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(0.95);width:min(720px,calc(100vw - 32px));max-height:90vh;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);z-index:9101;opacity:0;pointer-events:none;transition:transform .22s var(--ease-spring),opacity .18s ease;overflow-y:auto;display:flex;flex-direction:column;}
.aff-inv-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
.aff-inv-modal-head{display:flex;align-items:center;gap:var(--sp-2-5);padding:16px 20px;border-bottom:1px solid var(--bg-elevated);position:sticky;top:0;background:var(--bg-elevated);z-index:2;}
.aff-inv-modal-close{margin-left:auto;background:var(--tint-2);border:1px solid var(--border-strong);border-radius:var(--rs);color:var(--text-secondary);cursor:pointer;padding:5px 11px;font-size:14px;line-height:1;transition:color var(--dur-fast);}
.aff-inv-modal-close:hover{color:var(--text-primary);}
/* The printable invoice document */
.aff-inv-doc{margin:20px;background:#fff;border-radius:var(--r);overflow:hidden;color:#0a141f;}
.aff-inv-doc-header{background:linear-gradient(135deg,var(--bg-base) 0%,var(--bg-elevated) 100%);padding:28px 32px;display:flex;justify-content:space-between;align-items:flex-start;}
.aff-inv-doc-brand{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.02em;}
.aff-inv-doc-brand span{color:var(--accent);}
.aff-inv-doc-title{text-align:right;}
.aff-inv-doc-title h2{font-size:28px;font-weight:800;color:#fff;letter-spacing:.05em;margin:0;}
.aff-inv-doc-title p{font-size:12px;color:rgba(255,255,255,.5);margin:4px 0 0;}
.aff-inv-doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:24px 32px 0;}
.aff-inv-doc-from,.aff-inv-doc-to{padding-bottom:20px;}
.aff-inv-doc-from{border-right:1px solid #edf2f7;padding-right:24px;}
.aff-inv-doc-to{padding-left:24px;}
.aff-inv-doc-meta-label{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px;font-family:var(--font-num)}
.aff-inv-doc-meta-name{font-size:14px;font-weight:700;color:#0a141f;margin-bottom:3px;}
.aff-inv-doc-meta-sub{font-size:12px;color:var(--text-tertiary);line-height:1.5;}
.aff-inv-doc-details{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#eaeff3;border-top:1px solid #edf2f7;border-bottom:1px solid #edf2f7;padding:0 32px;}
.aff-inv-doc-detail{padding:14px 0;text-align:center;}
.aff-inv-doc-detail:not(:last-child){border-right:1px solid #edf2f7;}
.aff-inv-doc-detail-label{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px;font-family:var(--font-num)}
.aff-inv-doc-detail-val{font-size:14px;font-weight:700;color:#0a141f;}
.aff-inv-doc-table{margin:0 32px;border:1px solid #edf2f7;border-radius:var(--rm);overflow:hidden;margin-top:20px;}
.aff-inv-doc-table-head{display:grid;grid-template-columns:1fr 100px;background:#eaeff3;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);}
.aff-inv-doc-table-row{display:grid;grid-template-columns:1fr 100px;padding:14px 16px;border-top:1px solid #edf2f7;}
.aff-inv-doc-table-row:first-child{border-top:none;}
.aff-inv-doc-total{margin:0 32px;margin-top:1px;display:flex;justify-content:flex-end;}
.aff-inv-doc-total-box{background:var(--bg-base);border-radius:0 0 8px 8px;padding:14px 20px;min-width:200px;display:flex;justify-content:space-between;align-items:center;}
.aff-inv-doc-bank{margin:20px 32px 0;padding:16px;background:#eaeff3;border:1px solid #edf2f7;border-radius:var(--rm);}
.aff-inv-doc-bank-label{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px;font-family:var(--font-num)}
.aff-inv-doc-bank-val{font-size:12px;color:#3a4658;white-space:pre-wrap;line-height:1.7;}
.aff-inv-doc-notes{margin:12px 32px 0;padding:12px 16px;background:#fff8ed;border:1px solid #fed7aa;border-radius:var(--rm);font-size:12px;color:#92400e;line-height:1.6;}
.aff-inv-doc-footer{margin:20px 32px 28px;display:flex;justify-content:space-between;align-items:center;}
.aff-inv-doc-status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-card);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.aff-inv-doc-status-badge.paid{background:#dcfce7;color:#1d9e63;border:1px solid #bfefd1;}
.aff-inv-doc-status-badge.pending{background:#fef3c7;color:#8f5e12;border:1px solid #f6dca3;}
/* Updated grid — 6 cols: affiliate, amount, period, submitted, status, actions */
.aff-inv-row{display:grid;grid-template-columns:minmax(0,2fr) 80px 90px 110px 90px 220px;gap:var(--sp-2);align-items:center;padding:11px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);margin-bottom:4px;font-size:13px;}
.aff-inv-head{display:grid;grid-template-columns:minmax(0,2fr) 80px 90px 110px 90px 220px;gap:var(--sp-2);padding:4px 14px;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px;font-family:var(--font-num)}
@media(max-width:700px){
  .aff-inv-row,.aff-inv-head{grid-template-columns:minmax(0,1fr) 80px 90px;}
  .aff-inv-row>*:nth-child(n+4),.aff-inv-head>*:nth-child(n+4){display:none;}
  .aff-inv-modal{border-radius:var(--r-card);}
  .aff-inv-doc{margin:12px;}
  .aff-inv-doc-header{padding:20px;}
  .aff-inv-doc-meta,.aff-inv-doc-table,.aff-inv-doc-bank,.aff-inv-doc-notes,.aff-inv-doc-footer,.aff-inv-doc-total{margin-left:16px;margin-right:16px;}
  .aff-inv-doc-meta{grid-template-columns:1fr;}
  .aff-inv-doc-from{border-right:none;padding-right:0;}
}
@media print{
  .aff-inv-doc{margin:0;border-radius:0;box-shadow:none;}
  .aff-inv-modal-head{display:none!important;}
}

/* ── Admin section ──────────────────────────────────────────────────────── */
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--win);display:inline-block;flex-shrink:0}
.admin-kpi-label{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;font-family:var(--font-num)}
.admin-kpi-val{font-size:22px;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;line-height:1.1}
.admin-kpi-sub{font-size:11px;color:var(--text-tertiary)}
.admin-health-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2-5)}
/* Admin input+button rows — label above, input+button side by side */
.admin-field-row{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--tint-1);}
.admin-field-row:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.admin-field-label{font-size:11px;font-weight:400;color:var(--text-secondary);letter-spacing:.10em;text-transform:uppercase;margin-bottom:6px;display:block;font-family:var(--font-num)}
.admin-field-inner{display:flex;gap:var(--sp-2);align-items:center;}
.admin-field-inner .fi{flex:1;height:36px;font-size:13px;}
/* Consistent ghost button for secondary admin actions */
.btn-admin{height:28px;padding:0 14px;font-size:12px;font-weight:500;background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary);border-radius:var(--rs);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);font-family:var(--font-body);}
.btn-admin:hover{color:var(--text-primary);border-color:rgba(255,255,255,.2);background:var(--tint-1);}
.admin-evt{display:flex;align-items:flex-start;gap:var(--sp-2-5);padding:9px 0;border-bottom:1px solid var(--tint-1);font-size:13px;color:var(--text-secondary)}
.admin-evt:last-child{border-bottom:none}
.admin-evt-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.admin-evt-detail{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-evt-time{font-size:11px;color:var(--text-tertiary);flex-shrink:0}
.eng-badge{border-radius:4px;font-size:11px;padding:2px 6px;font-weight:600;white-space:nowrap;flex-shrink:0}
.eng-new{background:var(--win-dim);border:1px solid var(--win-border);color:var(--win)}
.eng-inactive{background:var(--amber-dim);border:1px solid var(--amber-border);color:var(--amber)}
.eng-never{background:var(--loss-dim);border:1px solid var(--loss-border);color:var(--loss)}
.admin-announce-item{display:flex;align-items:flex-start;gap:var(--sp-2-5);padding:9px 0;border-bottom:1px solid var(--tint-1)}
.admin-announce-item:last-child{border-bottom:none}
.admin-announce-body{flex:1;font-size:13px;color:var(--text-secondary)}
.admin-announce-meta{font-size:11px;color:var(--text-tertiary);margin-top:2px}
#ann-banner{display:none;position:relative;z-index:10;margin:-4px 0 28px;max-width:560px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);box-shadow:inset 0 1px 0 var(--hi);overflow:hidden;align-items:stretch;gap:0;padding:0}
#ann-banner.ann-show{animation:ann-in .45s var(--ease-spring) forwards}
@keyframes ann-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.ann-accent-bar{width:3px;flex-shrink:0;background:linear-gradient(180deg,var(--accent) 0%,var(--accent) 100%);border-radius:0}
.ann-body{flex:1;padding:13px 14px;min-width:0}
.ann-label{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;display:flex;align-items:center;gap:6px;font-family:var(--font-num)}
.ann-label-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
@keyframes ann-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
#ann-banner-text{font-size:13px;color:var(--text-primary);line-height:1.5;display:block}
.ann-dismiss-wrap{display:flex;align-items:flex-start;padding:10px 12px 0 0;flex-shrink:0}
#ann-banner-dismiss{background:none;border:none;cursor:pointer;color:var(--text-tertiary);padding:4px;line-height:1;border-radius:var(--rs);transition:background var(--dur-fast),color var(--dur-fast);display:flex;align-items:center;justify-content:center}
#ann-banner-dismiss:hover{background:var(--tint-2);color:var(--text-primary)}
@media(max-width:720px){#ann-banner{margin:0 0 20px}}
.admin-remove-confirm{display:none;flex-direction:column;gap:var(--sp-2);background:var(--loss-dim);border:1px solid var(--loss-border);border-radius:var(--rm);padding:12px;margin-top:6px;font-size:13px;color:var(--text-secondary)}
@media(max-width:900px){.admin-health-row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.admin-health-row{grid-template-columns:1fr}}

/* ── Admin Premium Upgrade ─────────────────────────────────────────────────── */
.admin-platform-hero{background:linear-gradient(135deg,var(--accent-dim) 0%,var(--accent-dim) 55%,var(--accent-dim) 100%);border:1px solid var(--accent-border);border-radius:var(--r-card);padding:22px 24px;margin-bottom:16px;position:relative;overflow:hidden}
.admin-platform-hero::before{content:'';position:absolute;top:-60px;right:-50px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,var(--accent-dim) 0%,transparent 70%);pointer-events:none}
.admin-platform-hero{margin-bottom:18px}
.adm-hero-refresh{margin-left:auto;background:var(--tint-1);border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--rm);height:28px;padding:0 12px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
.adm-hero-refresh:hover{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.adm-hero-refresh:active{transform:scale(.97)}
.adm-nav{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.adm-nav::-webkit-scrollbar{display:none}
.adm-tab{display:inline-flex;align-items:center;gap:7px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-tertiary);font-family:var(--font-body);font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer;white-space:nowrap;flex-shrink:0;margin-bottom:-1px;transition:color var(--dur-fast),border-color var(--dur-fast)}
.adm-tab:hover{color:var(--text-secondary)}
.adm-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* ── Console tab motion ────────────────────────────────────────────────────
   These consoles are opened many times a day by one or two people, so motion is
   deliberately minimal: a "layout animation" on the underline so the active
   marker slides between tabs instead of teleporting, and a short crossfade on
   the panel that replaces it. No stagger, no bounce, no entrance choreography —
   at this frequency that becomes irritating within a week.
   The sliding bar REPLACES the per-tab border-bottom on the active tab, so the
   two can't double up. */
/* ── One nav system across the three consoles ──────────────────────────────
   PILLS = primary level (Admin's sections, Affiliates' sections, Moderator's
   groups). UNDERLINE = secondary level (Moderator's sub-tabs only). Previously
   Admin and Affiliates used underlines for their PRIMARY nav while Moderator used
   pills for the same job, which is why moving between the consoles felt
   inconsistent. Pills read as "pick a place", underline reads as "pick a view
   within this place". */
/* padding-bottom is load-bearing: these navs inherit overflow-x:auto from their
   original underline-tab styling, and an overflow container clips vertically too —
   with 0 padding the pill's bottom border was being sliced off. flex-wrap also
   means they no longer need to scroll horizontally, so the overflow is moot. */
.adm-nav,.aff-tab-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  border-bottom:none;margin:0 0 16px;padding:2px 0 4px;overflow:visible}
.adm-tab,.aff-tab-btn{height:34px;padding:0 15px;border-radius:var(--rm);
  border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);
  border-bottom:1px solid var(--border)}
.adm-tab:hover,.aff-tab-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}
.adm-tab.on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.aff-tab-btn.on{background:rgba(224,144,15,.12);border-color:rgba(224,144,15,.42);color:var(--accent)}

/* ── "Needs you" ────────────────────────────────────────────────────────────
   Sits above the primary nav in all three staff consoles. Neutral surface on
   purpose — it must not compete with the hero above it; the only colour is the
   per-row tier dot, because colour here means urgency and nothing else. */
.ny-block{margin:0 0 14px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--bg-surface);overflow:hidden}
.ny-head{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--border)}
.ny-t{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--font-num)}
.ny-n{min-width:19px;height:19px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--loss-press);color:#fff;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums}
.ny-refresh{margin-left:auto;background:none;border:none;color:var(--text-tertiary);cursor:pointer;
  font-size:14px;line-height:1;padding:2px 4px;border-radius:var(--rs)}
.ny-refresh:hover{color:var(--text-primary)}
.ny-refresh.spin{animation:nySpin .65s linear}
@keyframes nySpin{to{transform:rotate(360deg)}}
.ny-list{display:flex;flex-direction:column}
.ny-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--border);padding:11px 13px;cursor:pointer;color:inherit;
  transition:background var(--dur-fast)}
.ny-row:last-child{border-bottom:none}
.ny-row:hover{background:var(--bg-elevated)}
.ny-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} /* routine */
.ny-label{font-size:13px;font-weight:600;color:var(--text-primary)}
.ny-sub{font-size:12px;color:var(--text-tertiary)}
.ny-age{margin-left:auto;font-size:11.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}
.ny-go{color:var(--text-tertiary);font-size:13px;flex-shrink:0}
.ny-row:hover .ny-go{color:var(--text-primary)}
.ny-empty{padding:13px;font-size:12.5px;color:var(--text-tertiary);display:flex;align-items:center;gap:7px}
.ny-empty .ny-ok{color:var(--win);font-weight:700}
.ny-loading{color:var(--text-tertiary)}
@media (max-width:640px){
  .ny-sub{display:none}   /* label + age carry it on a phone */
}

/* Queue summary line — states the shape of the list before the list itself, so you
   don't have to read rows to work out whether this needs you now or later. */
.mod-queue-sum{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px;
  padding:9px 13px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-surface);
  font-size:12.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.mod-queue-sum b{color:var(--text-primary);font-weight:700;font-size:14px}
.mod-queue-sum .mqs-warn{color:#f6c455;font-weight:600}

.modv-nav{position:relative}
.tab-slider{position:absolute;bottom:-1px;height:2px;border-radius:2px;pointer-events:none;
  opacity:0;transform:translateX(0);width:0;
  transition:transform 180ms var(--ease-out),opacity 120ms linear}
.modv-nav .tab-slider{background:var(--accent)}
/* hand the underline over to the slider once it's active */
.has-slider .modv-tab.on{border-bottom-color:transparent}
@keyframes tabPanelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tab-panel-in{animation:tabPanelIn var(--dur-toggle) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .tab-slider{transition:none}
  .tab-panel-in{animation:none}
}
.adm-tab:active{transform:scale(.98)}
.adm-animate-in .admin-platform-hero{animation:modRise .42s var(--ease-out) both}
.adm-animate-in .adm-nav{animation:modRise .42s var(--ease-out) both;animation-delay:.12s}
.adm-animate-in [data-adm-tab]{animation:modRise .42s var(--ease-out) both;animation-delay:.18s}
@media(prefers-reduced-motion:reduce){.adm-animate-in .admin-platform-hero,.adm-animate-in .adm-nav,.adm-animate-in [data-adm-tab]{animation:none!important}}
.admin-hero-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;font-family:var(--font-num)}
.admin-hero-eyebrow svg{width:13px;height:13px;flex-shrink:0}
.admin-hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;position:relative}
.admin-hero-title{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);line-height:1.15}
.admin-hero-subtitle{font-size:13px;color:var(--text-tertiary);margin-top:6px;max-width:470px;line-height:1.5}
.admin-hero-status{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 13px;border-radius:var(--r-card);background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);white-space:nowrap;flex-shrink:0}
.admin-hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px}
.admin-hero-metric{padding:0 22px;border-right:1px solid var(--tint-2);display:flex;flex-direction:column;gap:5px;min-width:0}
.admin-hero-metric:first-child{padding-left:0}
.admin-hero-metric:last-child{border-right:none}
.admin-hero-val{font-size:32px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.admin-hero-val.green{color:var(--win)}
.admin-hero-val.blue{color:var(--accent)}
.admin-hero-val.purple{color:var(--accent)}
.admin-hero-val.amber{color:var(--amber)}
.admin-hero-metric-label{font-size:11px;font-weight:500;color:var(--text-secondary);letter-spacing:.01em}
.admin-hero-footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--tint-1);font-size:12px;color:var(--text-tertiary);display:flex;align-items:center;gap:var(--sp-2)}
.admin-hero-live{width:6px;height:6px;border-radius:50%;background:var(--win);flex-shrink:0}
.admin-hero-updated{margin-left:auto;font-size:11px;color:var(--text-tertiary);white-space:nowrap}
.admin-hero-refresh-btn{margin-left:12px;white-space:nowrap;flex-shrink:0}
.admin-kpi-card-v2{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:var(--sp-1);transition:border-color var(--dur-base),transform var(--dur-fast),box-shadow var(--dur-fast)}
.admin-kpi-card-v2::before{display:none}
.admin-kpi-card-v2:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
/* Admin Overview — grouped metric sections (lead card + quiet supports) */
.adm-ov-sec{margin-bottom:24px}
.adm-ov-sec:last-child{margin-bottom:0}
.adm-ov-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:10px}
.adm-ov-head-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;font-family:var(--font-num)}
.adm-ov-rule{flex:1;height:1px;background:var(--border);transform:translateY(-3px)}
.adm-ov-note{font-size:11px;color:var(--text-tertiary);white-space:nowrap}
.adm-ov-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-2-5);align-items:stretch}
.adm-ov-lead{padding:16px 18px;justify-content:space-between}
.adm-ov-lead .admin-kpi-val{font-size:34px;line-height:1}
.adm-ov-lead .admin-kpi-val .adm-ov-of{font-size:16px;font-weight:600;color:var(--text-tertiary);letter-spacing:0}
.adm-ov-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:8px}
.adm-ov-bar>i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#c98a1a,var(--accent));transform-origin:left;transform:scaleX(0);transition:transform 900ms cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.adm-ov-bar>i{transition:none}}
.adm-ov-link{background:none;border:none;padding:0;font-size:11px;font-weight:600;color:var(--text-tertiary);cursor:pointer;white-space:nowrap;transition:color var(--dur-fast)}
.adm-ov-link:hover{color:var(--accent)}
.adm-ov-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-card);white-space:nowrap;flex-shrink:0;background:var(--win-dim);color:var(--win)}
.adm-ov-pill.idle{background:var(--border);color:var(--text-tertiary)}
@media(max-width:900px){.adm-ov-grid{grid-template-columns:1fr 1fr}.adm-ov-lead{grid-column:1/-1}.adm-ov-lead .admin-kpi-val{font-size:28px}}
@media(max-width:520px){.adm-ov-grid{grid-template-columns:1fr}.adm-ov-note{display:none}}
.admin-rev-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2-5);margin-bottom:14px}
.admin-rev-tile{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:var(--sp-1);}
.admin-rev-label{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;font-family:var(--font-num)}
.admin-rev-val{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1.1}
.admin-rev-sub{font-size:11px;color:var(--text-tertiary)}
@media(max-width:900px){.admin-rev-tiles{grid-template-columns:repeat(2,1fr)}}
/* Growth tab */
.growth-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.growth-card-sub{font-size:12.5px;color:var(--text-tertiary);margin-top:3px}
.growth-head-stat{text-align:right;flex-shrink:0}
.growth-head-val{font-size:24px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.growth-head-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;margin-top:4px;font-family:var(--font-num)}
.growth-chart-wrap{position:relative;height:200px;margin-top:16px}
.growth-empty{font-size:13px;color:var(--text-tertiary);padding:14px 0}
/* Conversion funnel */
.conv-range{display:flex;gap:6px;margin:14px 0 4px}
.conv-rb{height:28px;padding:0 12px;font-size:11.5px;font-weight:600;color:var(--text-tertiary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.conv-rb.on{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim)}
@media(hover:hover) and (pointer:fine){.conv-rb:not(.on):hover{color:var(--text-secondary)}}
.conv-steps{display:flex;align-items:stretch;gap:8px;margin-top:16px}
.conv-step{flex:1;min-width:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rm);padding:14px 14px 12px;position:relative}
.conv-step-val{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.conv-step-lbl{font-size:11px;font-weight:600;color:var(--text-secondary);margin-top:6px}
.conv-step-sub{font-size:11px;color:var(--text-tertiary);margin-top:2px;line-height:1.4}
.conv-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:62px;gap:3px}
.conv-arrow-pct{font-size:13px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.conv-arrow-line{width:100%;height:1px;background:var(--border-strong)}
.conv-arrow-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-weight:400;font-family:var(--font-num)}
.conv-note{font-size:11px;color:var(--text-tertiary);margin-top:14px;line-height:1.5}
/* Sources table — partners with conversion, organic with visits only */
.src-tbl{display:flex;flex-direction:column}
.src-row{display:grid;grid-template-columns:1fr 68px 68px 62px;align-items:center;gap:var(--sp-2);padding:9px 0;border-bottom:1px solid var(--tint-1)}
.src-row:last-child{border-bottom:none}
.src-row b{font-size:13px;font-weight:600;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums}
.src-head{padding-bottom:7px;border-bottom:1px solid var(--border)}
.src-head span,.src-head b{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--font-num)}
.src-name{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-name.partner{color:var(--accent);font-weight:600}
.src-conv-ok{color:var(--win)}
.src-conv-thin{color:var(--text-tertiary)}
.src-conv-thin i,.src-conv-ok i{font-style:normal;color:var(--text-tertiary);font-size:11px;cursor:help}
.src-muted{color:var(--text-tertiary)!important;font-weight:400!important}
.src-row-thin b{font-weight:500}
.src-sub{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin:18px 0 2px;font-family:var(--font-num)}
.src-note{font-size:11px;color:var(--text-tertiary);margin-top:12px;line-height:1.5}
@media(max-width:560px){
  .src-row{grid-template-columns:1fr 52px 52px 50px;gap:6px}
  .src-row b,.src-name{font-size:12px}
}
@media(max-width:720px){
  .conv-steps{flex-direction:column;gap:4px}
  .conv-arrow{width:100%;flex-direction:row;gap:8px;padding:2px 0}
  .conv-arrow-line{width:auto;flex:1}
  .conv-step-val{font-size:22px}
}
@media(max-width:600px){.growth-chart-wrap{height:170px}.growth-head-val{font-size:22px}}
@media(max-width:600px){.admin-rev-tiles{grid-template-columns:1fr 1fr}}
.admin-uf-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.admin-uf-chip{font-size:11px;font-weight:600;letter-spacing:.01em;padding:5px 11px;min-height:28px;border-radius:var(--rs);background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.admin-uf-chip:hover{background:var(--tint-2);color:var(--text-primary)}
.admin-uf-chip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.admin-uf-chip .admin-uf-n{opacity:.6;font-variant-numeric:tabular-nums;margin-left:4px}
.admin-uf-chip.active .admin-uf-n{opacity:.85}
.admin-uf-count{font-size:11px;color:var(--text-tertiary);margin-bottom:8px;font-variant-numeric:tabular-nums}
.admin-loadmore{display:block;width:100%;margin-top:10px;padding:9px;min-height:36px;font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.admin-loadmore:hover{background:var(--tint-2);color:var(--text-primary)}
.admin-pin-btn{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:6px;margin-left:2px;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.35;transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.admin-user-row-v2:hover .admin-pin-btn{opacity:.7}
.admin-pin-btn:hover{background:var(--tint-2);color:var(--text-secondary);opacity:1}
.admin-pin-btn.on{color:var(--accent);opacity:1}
.admin-user-row-v2{display:flex;align-items:center;gap:var(--sp-3);padding:11px 10px;border-radius:var(--rm);cursor:pointer;transition:background var(--dur-fast);margin:0 -10px}
.admin-user-row-v2:not(:last-child){border-bottom:1px solid var(--tint-1)}
.admin-user-row-v2:hover{background:var(--tint-1)}
.admin-user-mid{flex:1;min-width:0}
.admin-user-row-name{font-size:13px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.admin-user-row-email{font-size:11px;color:var(--text-tertiary);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-user-row-stats{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.admin-wr-wrap{display:flex;align-items:center;gap:5px}
.admin-wr-track{width:52px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;flex-shrink:0}
.admin-wr-fill{height:100%;border-radius:2px}
.admin-wr-label{font-size:11px;font-weight:600}
.admin-r-chip{font-size:11px;font-weight:600;padding:1px 7px;border-radius:4px;flex-shrink:0}
.admin-r-chip.pos{background:var(--win-dim);color:var(--win);border:1px solid var(--win-border)}
.admin-r-chip.neg{background:var(--loss-dim);color:var(--loss);border:1px solid var(--loss-border)}
.admin-r-chip.neu{background:rgba(125,139,161,.1);color:var(--text-secondary);border:1px solid rgba(125,139,161,.15)}
.admin-impr-badge{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;flex-shrink:0}
.admin-impr-badge.up{background:var(--win-dim);color:var(--win)}
.admin-impr-badge.dn{background:var(--loss-dim);color:var(--loss)}
.admin-impr-badge.st{background:rgba(125,139,161,.08);color:var(--text-secondary)}
/* User detail modal */
/* ── Leaderboard ──────────────────────────────────────────────────────────── */
.lb-tabs{display:flex;gap:var(--sp-1);margin-bottom:28px;background:var(--bg-surface);border-radius:var(--r);padding:4px;border:1px solid var(--border)}
.lb-tab{flex:1;padding:8px 6px;border:none;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:500;border-radius:var(--rs);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);white-space:nowrap}
.lb-tab.on{background:var(--bg-elevated);color:var(--text-primary);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.lb-podium{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:var(--sp-2-5);margin-bottom:28px;align-items:end}
.lb-pod{border-radius:var(--r-card);padding:20px 10px 16px;text-align:center;border:1px solid transparent;position:relative;overflow:hidden;transition:transform var(--dur-base)}
.lb-pod:hover{transform:translateY(-2px)}
.lb-pod.p1{background:var(--accent-dim);border-color:var(--accent-border);box-shadow:var(--el-2),inset 0 1px 0 var(--hi)}
.lb-pod.p2{background:var(--tint-1);border-color:var(--border-strong);box-shadow:var(--el-2)}
.lb-pod.p3{background:var(--tint-1);border-color:var(--border);box-shadow:var(--el-2)}
.lb-pod-pos{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.lb-pod.p1 .lb-pod-pos{color:var(--accent)}
.lb-pod.p2 .lb-pod-pos{color:var(--text-secondary)}
.lb-pod.p3 .lb-pod-pos{color:var(--text-tertiary)}
.lb-pod-crown{font-size:22px;display:block;margin-bottom:6px;animation:lb-float 3s ease-in-out infinite}
.lb-pod-av{margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.lb-pod-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.lb-pod.p1 .lb-pod-name{font-size:13px}
.lb-pod-score{font-weight:700;line-height:1.1;margin-bottom:4px}
.lb-pod.p1 .lb-pod-score{font-size:24px;color:var(--text-primary)}
.lb-pod.p2 .lb-pod-score{font-size:22px;color:var(--text-secondary)}
.lb-pod.p3 .lb-pod-score{font-size:20px;color:var(--text-secondary)}
.lb-pod-label{font-size:11px;color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.lb-tier{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-card)}
.lb-tier.stone   {background:rgba(125,139,161,.15);color:var(--tier-stone);border:1px solid rgba(125,139,161,.25)}
.lb-tier.iron    {background:var(--accent-dim);color:var(--tier-iron);border:1px solid var(--accent-border)}
.lb-tier.bronze  {background:rgba(205,127,50,.12);color:var(--tier-bronze);border:1px solid rgba(205,127,50,.3)}
.lb-tier.silver  {background:rgba(168,180,198,.1);color:var(--tier-silver);border:1px solid rgba(168,180,198,.25)}
.lb-tier.gold    {background:var(--accent-dim);color:var(--tier-gold);border:1px solid var(--accent-border)}
.lb-tier.platinum{background:var(--accent-dim);color:var(--tier-platinum);border:1px solid var(--accent-border)}
.lb-tier.elite   {background:linear-gradient(90deg,var(--accent-border),var(--accent-border));color:var(--tier-elite);border:1px solid var(--accent-border);animation:elite-pulse 2.5s ease-in-out infinite}
.lb-row{display:flex;align-items:center;gap:var(--sp-3);padding:12px 14px;border-radius:var(--r);margin-bottom:6px;background:var(--bg-surface);border:1px solid var(--border);transition:border-color var(--dur-fast),transform .12s}
.lb-row:hover{border-color:var(--border-strong);transform:translateX(2px)}
.lb-row.me{border-color:var(--accent-border);background:var(--accent-dim)}
.lb-row-rank{width:28px;text-align:center;font-size:13px;font-weight:700;color:var(--text-tertiary);flex-shrink:0}
.lb-row-mid{flex:1;min-width:0}
.lb-row-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.lb-row-right{text-align:right;flex-shrink:0}
.lb-row-score{font-size:18px;font-weight:700;color:var(--text-primary)}
.lb-row-sub{font-size:11px;color:var(--text-tertiary);margin-top:1px}
.lb-bar{height:3px;border-radius:2px;overflow:hidden;margin-top:5px;display:flex;gap:1px}
.lb-bar-seg{height:100%;border-radius:2px;flex-shrink:0}
.lb-empty{text-align:center;padding:40px 20px;color:var(--text-tertiary);font-size:13px;background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--r-card)}
.lb-my-rank-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r-card);padding:5px 12px;font-size:12px;font-weight:600;color:var(--accent)}
.lb-section-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--tint-1)}
.lb-highlights-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2-5)}
.lb-hl-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 12px;text-align:center}
.lb-hl-icon{font-size:18px;margin-bottom:6px}
.lb-hl-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.lb-hl-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-hl-stat{font-size:11px;color:var(--accent);font-weight:500;margin-top:2px}
@media(max-width:720px){.lb-highlights-grid{grid-template-columns:repeat(2,1fr)}}
@keyframes lb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes elite-pulse{0%,100%{box-shadow:none}}
@media(max-width:720px){
  .lb-podium{grid-template-columns:1fr 1.05fr 1fr;gap:6px}
  .lb-pod{padding:14px 6px 12px}
  .lb-pod.p1 .lb-pod-score{font-size:20px}
  .lb-pod.p2 .lb-pod-score{font-size:16px}
  .lb-pod.p3 .lb-pod-score{font-size:16px}
  .lb-pod-name{font-size:11px}
  .lb-tab{font-size:11px;padding:7px 4px}
}

.admin-ud-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:16px}
.admin-ud-overlay.open{display:flex}
.admin-ud-modal{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.55);position:relative}
.admin-ud-header{padding:20px 44px 16px 20px;display:flex;align-items:center;gap:var(--sp-3);border-bottom:1px solid var(--tint-2)}
.admin-ud-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.admin-ud-sub{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.admin-ud-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--tint-2);border:none;color:var(--text-secondary);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast);line-height:1}
.admin-ud-close:hover{background:var(--border-strong);color:var(--text-primary)}
.admin-ud-body{padding:16px 20px 22px}
.admin-ud-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-bottom:4px}
.admin-ud-kpi{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);padding:10px;text-align:center}
.admin-ud-kpi-val{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1.1}
.admin-ud-kpi-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.10em;margin-top:3px;font-family:var(--font-num)}
.admin-ud-section{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--tint-1);font-family:var(--font-num)}
.admin-ud-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-2);align-items:center;margin-bottom:8px}
.admin-ud-compare-block{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);padding:10px 8px;text-align:center}
.admin-ud-compare-val{font-size:16px;font-weight:700}
.admin-ud-compare-lbl{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.admin-ud-compare-arrow{text-align:center;font-size:20px;color:var(--text-tertiary)}
.admin-ud-stat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--tint-1);font-size:12px}
.admin-ud-stat-row:last-of-type{border-bottom:none}
.admin-ud-stat-label{color:var(--text-secondary)}
.admin-ud-stat-val{font-weight:600;color:var(--text-primary)}
.admin-ud-psych-bar{height:5px;background:var(--border);border-radius:4px;overflow:hidden;margin:6px 0 4px}
.admin-ud-psych-fill{height:100%;width:100%;border-radius:4px;transition:transform var(--dur-slow) ease}
@media(max-width:900px){.admin-hero-metrics{grid-template-columns:repeat(2,1fr)}.admin-hero-metric{padding:12px 0 !important;border-right:none !important;border-bottom:1px solid var(--tint-2)}.admin-hero-metric:nth-last-child(-n+2){border-bottom:none !important}}
@media(max-width:600px){.admin-hero-val{font-size:28px}.admin-hero-footer{flex-wrap:wrap;row-gap:10px}#admin-hero-footer-text{flex:1 1 calc(100% - 20px);min-width:0}.admin-hero-updated{margin-left:0}.admin-hero-refresh-btn{margin-left:auto}.admin-ud-kpi-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Trade log month grouping ──────────────────────────────────────────── */
.trade-month-hdr td{background:var(--bg-elevated);cursor:pointer;padding:9px 14px !important;border-bottom:1px solid var(--border) !important}
.trade-month-hdr:hover td{background:var(--bg-hover)}
.tm-toggle{display:inline-flex;align-items:center;gap:var(--sp-3);padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}

/* ── Dev mode toggle ───────────────────────────────────────────────────── */
.dev-toggle-on{background:var(--accent-dim) !important;color:var(--accent) !important;border-color:var(--accent-border) !important}

/* ── Multi-Asset: type badge ── one badge for every market (Accounts, finished) */
.acct-type-badge{display:inline-flex;align-items:center;flex-shrink:0}

/* ── Multi-Asset: account type selector (sidebar) ──────────────────────── */
.acct-type-tg{display:flex;border:1px solid var(--border-strong);border-radius:4px;overflow:hidden;height:26px;margin-bottom:5px}
.acct-type-tb{flex:1;background:transparent;border:none;color:var(--text-tertiary);font-size:11px;font-family:var(--font-body);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);letter-spacing:.03em}
.acct-type-tb+.acct-type-tb{border-left:1px solid var(--border-strong)}
.acct-type-tb.on{background:var(--accent-dim);color:var(--accent)}

/* ── Mirror trade to accounts ──────────────────────────────────────────── */
#mirror-acct-row{margin-top:6px;padding:10px 12px;background:var(--accent-dim);border:1px solid var(--accent-dim);border-radius:var(--rs);}
.mirror-toggle-row{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;user-select:none;}
.mirror-toggle-row input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.mirror-toggle-lbl{font-size:12px;color:var(--text-secondary);font-weight:500;}
#mirror-acct-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.mirror-acct-item{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;padding:5px 8px;border-radius:4px;transition:background .12s;}
.mirror-acct-item:hover{background:var(--tint-1);}
.mirror-acct-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.mirror-acct-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mirror-acct-lbl{font-size:12px;color:var(--text-primary);}
.mirror-acct-type{font-size:11px;color:var(--text-tertiary);margin-left:4px;}

/* ── Multi-Asset: asset filter strip ───────────────────────────────────── */
.asset-filter{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.af-btn{height:28px;padding:0 8px;border-radius:var(--rs);border:1px solid transparent;background:none;color:var(--text-tertiary);font-size:12px;font-family:var(--font-body);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);white-space:nowrap}
.af-btn:hover{color:var(--text-primary)}
.af-btn.on{background:none;color:var(--text-primary);border-color:transparent;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:6px}

/* ── Multi-Asset: position calculator panel ─────────────────────────────── */
.calc-panel{background:var(--bg-surface);border:1px solid var(--accent-border);border-radius:var(--rs);padding:14px 16px;margin-top:10px}
.calc-panel-title{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);font-weight:400;margin-bottom:12px;display:flex;align-items:center;gap:7px;font-family:var(--font-num)}
.calc-panel-title::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.calc-readout{font-size:12px;color:var(--text-secondary);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:4px;padding:8px 12px;margin-top:10px;line-height:1.6;min-height:36px}

/* ── Dashboard Streak Card ─────────────────────────────────────────────── */
/* ── Dashboard equity curve ── */
.dash-eq-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dash-eq-lbl{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.10em;font-weight:400;font-family:var(--font-num)}
.dash-eq-stat{font-family:var(--font-num);font-size:12.5px;font-weight:500}
.dash-eq-empty{text-align:center;padding:20px 0;font-size:13px;color:var(--text-tertiary)}
/* ── Dashboard meters ── */
.dash-meter-sub{font-size:11px;color:var(--text-tertiary)}
.streak-card{position:relative;overflow:hidden}
.streak-card::before{display:none}
.streak-inner{display:grid;grid-template-columns:96px 1fr 130px;gap:var(--sp-5);align-items:center}
.streak-col-label{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:8px;font-family:var(--font-num)}
/* Streak counts are not money: ink. The dots beneath are the record. */
.streak-main-val{font-family:var(--font-num);font-size:22px;font-weight:500;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.streak-main-val.sv-win,.streak-main-val.sv-loss{color:var(--text-primary)}
.streak-main-val.sv-none{color:var(--text-secondary)}
.streak-main-sub{font-size:12px;color:var(--text-tertiary);margin-top:5px}
.streak-dots{display:flex;gap:var(--sp-1);align-items:center;margin-bottom:6px}
.sk-dot{width:30px;height:30px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:11px;font-weight:500;flex-shrink:0}
.sk-dot.win{background:var(--win-dim);color:var(--text-primary);border:1px solid var(--border);border-bottom:2px solid var(--win)}
.sk-dot.loss{background:var(--loss-dim);color:var(--text-primary);border:1px solid var(--border);border-bottom:2px solid var(--loss)}
.sk-dot.be{background:rgba(125,139,161,.1);color:var(--text-tertiary);border:1px solid rgba(125,139,161,.2)}
.sk-dot.nt{background:var(--tint-1);color:var(--text-tertiary);border:1px solid var(--border)}
.sk-dot.empty{background:var(--tint-1);border:1px dashed var(--border-strong)}
.streak-form-sub{font-size:12px;color:var(--text-tertiary)}
.streak-stats-col{display:flex;flex-direction:column;gap:14px}
.streak-stat{text-align:right}
.streak-stat-val{font-family:var(--font-num);font-size:20px;font-weight:500;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.streak-stat-val.sv-win,.streak-stat-val.sv-loss{color:var(--text-primary)}
@media(max-width:720px){
  .streak-inner{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px 10px}
  .streak-inner>div:first-child{grid-column:1/-1;text-align:center;border-bottom:1px solid var(--border);padding-bottom:14px}
  .streak-inner>div:nth-child(2){grid-column:1/-1;text-align:center;order:3}
  .streak-stats-col{grid-column:1/-1;flex-direction:row;justify-content:center;gap:var(--sp-6);order:2}
  .streak-stat{text-align:center}
  .streak-dots{justify-content:center;gap:3px}
  .sk-dot{width:22px;height:22px;border-radius:4px;font-size:11px}
}

/* ── Custom scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
/* On touch, :hover latches after a tap — a card that lifts on hover stays
   lifted until you tap something else, which reads as a stuck UI. These are
   the rules that MOVE something on hover; colour-only hovers are harmless
   and deliberately left alone. Reset rather than gate, so the rules stay
   where they were written. */
@media (hover:none){
  #fab-log:hover,
  #help-btn:hover,
  .admin-kpi-card-v2:hover,
  .aff-card:hover,
  .btn:hover,
  .card:hover,
  .cc:hover,
  .cmv2-bubble-img:hover,
  .cmv2-bubble.img-only .cmv2-bubble-img:hover,
  .cmv2-msg-action.emoji:hover,
  .cmv2-msg-action:hover,
  .cmv2-rx-chip:hover,
  .ins-bento .cc:hover,
  .kc:hover,
  .lb-pod:hover,
  .lb-row:hover,
  .lt-out-btn:hover,
  .nb-card:hover,
  .prog-reset:hover svg,
  .review-star:hover,
  .rh-sum-card:hover,
  .sk-dot:hover,
  .trade-chart-btn:hover,
  .wr-grade-btn:hover,
  .wr-nav-btn:hover,
  /* ── Card hover — add subtle accent tinge to shadow ────────────────────── */
.card:hover{transform:none}
}

/* Form controls don't inherit font-family from body — a bare <button> computes
   to the UA default, which is Arial. 41 buttons across 9 pages were rendering
   in Arial beside Inter. This was being fixed one selector at a time; doing it
   once at the root means new controls can't reintroduce it. */
button,input,select,textarea,optgroup{font-family:inherit}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH
   ════════════════════════════════════════════════════════════════════════ */

/* Text selection */
::selection{background:var(--accent-border);color:var(--text-primary)}

/* Logo — old money: clean white, wide tracked, no gradient */
#logo{color:var(--text-primary);-webkit-text-fill-color:var(--text-primary);background:none;
      font-size:14px;font-weight:600;letter-spacing:.24em;font-variant:normal}
#logo .logo-wm>span{color:var(--text-tertiary);-webkit-text-fill-color:var(--text-tertiary);
           letter-spacing:.13em;font-size:10px;font-weight:400;margin-top:4px}

/* Press feedback — one tactile language for every button-like control */
.af-btn:active,.aff-tab-btn:active,.btn-admin:active,.churn-email-btn:active,.cmv2-rx-chip:active,.dl-btn:active,.dta-cancel-btn:active,.em-chip:active,.inv-pay-tab:active,.lt-out-btn:active,.partner-contact-btn:active,.partner-copy-btn:active,.partner-copy-link-btn:active,.ps-btn:active,.trade-chart-btn:active,.wr-grade-btn:active,.wr-nav-btn:active,.wr-plan-btn:active,.wr-this-week-btn:active,.wr-view-history-btn:active{transform:scale(.97)}

/* Modal entrance animation */
@keyframes modal-in{from{opacity:0;transform:scale(.95) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mo.show .md{animation:modal-in .22s var(--ease-spring)}
@keyframes modal-out{to{opacity:0;transform:scale(.96) translateY(6px)}}
.mo.closing{opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);pointer-events:none}
.mo.closing .md{animation:modal-out var(--dur-fast) var(--ease-standard) both}
#del-trading-acct-modal.closing,#welcome-modal.closing{opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);pointer-events:none}
#del-trading-acct-modal.closing .dta-card,#welcome-modal.closing .wm-card{animation:modal-out var(--dur-fast) var(--ease-standard) both}
.admin-ud-overlay.open .admin-ud-modal{animation:modal-in .22s var(--ease-spring)}

/* Page title — weight upgrade + short accent underline */
.pt{font-family:var(--font-display);font-weight:600;letter-spacing:-.005em;position:relative;padding-bottom:8px}
.pt::after{content:'';position:absolute;bottom:0;left:0;width:32px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:2px;opacity:.8}

/* ── KPI card signature top accent bar ─────────────────────────────────────
   Same treatment as the admin platform hero — a thin gradient line at the
   very top of each stat card, colored by what it represents.             */
.kc,.stc,.admin-kpi-card-v2{position:relative;overflow:hidden}
.kc::before,.stc::before,.admin-kpi-card-v2::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--border-strong);transition:background .3s;
  border-radius:var(--r) var(--r) 0 0}

/* KPI cards: outcome-colored top gradient glow */
.kc:has(.kv.kwin)::before{background:linear-gradient(90deg,transparent,var(--win-border),transparent)}
.kc:has(.kv.kloss)::before{background:linear-gradient(90deg,transparent,var(--loss-border),transparent)}
.kc::before{content:none}
.stc::before,.admin-kpi-card-v2::before{background:var(--border-strong)}

/* ── Win/Loss value text ──────────────────────────────────────────── */
.kv.kwin{font-weight:800}
.kv.kloss{font-weight:800}

/* ── Table row outcome left accent border ──────────────────────────────── */


/* ── Loading skeleton shimmer ──────────────────────────────────────────── */
@keyframes sk-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.sk-row{border-radius:var(--rs);background:linear-gradient(90deg,var(--bg-surface) 25%,var(--tint-2) 50%,var(--bg-surface) 75%);background-size:200% 100%;animation:sk-shimmer 1.5s ease-in-out infinite;margin-bottom:8px}
.sk-block{border-radius:var(--rs);background:linear-gradient(90deg,var(--bg-surface) 25%,var(--tint-2) 50%,var(--bg-surface) 75%);background-size:200% 100%;animation:sk-shimmer 1.5s ease-in-out infinite}

/* ── Floating action button (mobile quick-log) ─────────────────────────── */
#fab-log{position:fixed;bottom:26px;right:20px;width:54px;height:54px;border-radius:50%;background:var(--accent-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.35);border:none;color:var(--on-accent);font-size:28px;line-height:1;cursor:pointer;z-index:145;display:none;align-items:center;justify-content:center;transition:transform var(--dur-fast),box-shadow var(--dur-fast);font-family:var(--font-body);padding-bottom:2px}
#fab-log:hover{filter:brightness(1.07)}
#fab-log:active{transform:translateY(1px)}
#fab-log.fab-hidden{display:none!important}
@media(max-width:768px){#fab-log{display:none!important}}

/* ── Achievement system ─────────────────────────────────────────────────── */
.ach-level-wrap{display:flex;align-items:center;gap:var(--sp-3);padding:12px 14px;background:var(--tint-1);border:1px solid var(--tint-2);border-radius:var(--r);margin-bottom:14px}
/* Slim rank-strip variant (dashboard bottom) — no card header, no double chrome */
.ach-slim{padding:12px 16px}
.ach-slim .ach-level-wrap{background:none;border:none;border-radius:0;padding:0;margin:0;cursor:pointer}
.ach-slim .ach-level-wrap:hover .ach-strip-cta{color:var(--text-primary)}
.ach-eyebrow{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:5px;font-family:var(--font-num)}
.ach-strip-cta{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:11px;font-weight:600;color:var(--text-secondary);white-space:nowrap;transition:color var(--dur-fast)}
.ach-level-badge{width:38px;height:38px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:15px;font-weight:500;flex-shrink:0;color:var(--text-primary);background:var(--tint-1);border:1px solid var(--border-strong);box-shadow:inset 0 1px 0 var(--hi)}
.ach-level-info{flex:1;min-width:0}
.ach-level-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between}
.ach-xp-tag{font-family:var(--font-num);font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.ach-xp-bar-outer{height:4px;background:var(--tint-2);border-radius:2px;overflow:hidden;margin-bottom:4px}
.ach-xp-bar-inner{height:100%;width:100%;border-radius:2px;background:var(--text-tertiary);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.ach-xp-sub{font-size:11px;color:var(--text-tertiary)}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.ach-chev{font-size:11px;transition:transform var(--dur-base) var(--ease-out)}
#dash-badges-card.open .ach-chev{transform:rotate(180deg)}
.ach-collapse{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:opacity .2s var(--ease-out)}
.ach-collapse.open{max-height:1400px;opacity:1;margin-top:14px}
@media(prefers-reduced-motion:reduce){.ach-collapse{transition:none}}
.ach-track{background:var(--tint-1);border:1px solid var(--tint-2);border-radius:var(--r);padding:11px 12px;transition:border-color var(--dur-base),background var(--dur-base)}
.ach-track:hover{border-color:var(--border-strong)}
.ach-track-hd{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.ach-track-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ach-track-icon svg{width:18px;height:18px}
.ach-track-name{font-size:11px;font-weight:600;color:var(--text-secondary);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* One gem silhouette for every rank, with the tier colour carrying the
   progression — the way real ladders do it, where the metal denotes the rank
   and the badge shape stays constant. Seven different borrowed emoji
   (🪨⚔️🥉🥈🥇💎👑) rendered differently on every OS, couldn't be coloured or
   sized by tokens, and were the loudest "not a designed product" signal in the
   app — on the reward system, where it is trying hardest to feel special.
   currentColor means it inherits --tier-* and flips with the theme for free. */
.tier-mark{width:1em;height:1em;flex:none;vertical-align:-.11em;margin-right:.36em}
.ach-tier-pill{font-family:var(--font-num);font-size:11px;font-weight:500;letter-spacing:.06em;padding:2px 8px;border-radius:var(--rs);white-space:nowrap;flex-shrink:0;border:1px solid var(--border-strong);line-height:1.4}
.ach-prog-outer{height:3px;background:var(--tint-2);border-radius:2px;overflow:hidden;margin-bottom:5px}
.ach-prog-inner{height:100%;width:100%;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-standard)}
.ach-prog-label{font-size:11px;color:var(--text-tertiary);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Toast glow on colour states ──────────────────────────────────────── */
#toast.tok{box-shadow:0 8px 32px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25)}
#toast.terr{box-shadow:0 8px 32px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25)}

/* ── Tag chip input (Log form) ─────────────────────────────────────────── */
.tag-input-wrap{display:flex;flex-wrap:wrap;gap:5px;align-items:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:5px 10px;min-height:38px;cursor:text;transition:border-color var(--dur-fast)}
.tag-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.tag-raw-input{border:none;background:transparent;color:var(--text-primary);font-family:var(--font-body);font-size:13px;outline:none;flex:1;min-width:80px;padding:2px 0}
.tag-chip{display:inline-flex;align-items:center;gap:3px;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r);padding:2px 8px 2px 9px;font-size:11px;font-weight:500;color:#93bbfd;white-space:nowrap}
.tag-chip-x{cursor:pointer;opacity:.5;font-size:14px;line-height:1;padding:0 1px;transition:opacity .1s}
.tag-chip-x:hover{opacity:1}
/* Tag display in Trade Log */
.trade-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.trade-tag{display:inline-block;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rm);padding:1px 7px;font-size:11px;font-weight:500;color:#93bbfd;white-space:nowrap}

/* ── Dashboard Welcome ──────────────────────────────────────────────────── */
.dash-top-row{display:flex;align-items:flex-start;margin-bottom:28px;gap:var(--sp-4)}
.dash-top-left{flex-shrink:0;width:260px}
.dash-top-spacer{flex-shrink:0;min-width:120px}
.dash-welcome-wrap{flex:1;text-align:center;padding:0;position:relative;margin-bottom:0}
.dw-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-card);margin-bottom:10px;border:1px solid transparent;transition:opacity .3s}
.dw-badge.dw-b-fire{background:rgba(251,113,48,.12);border-color:rgba(251,113,48,.3);color:#fb7130}
.dw-badge.dw-b-green{background:var(--win-dim);border-color:var(--win-border);color:var(--win)}
.dw-badge.dw-b-amber{background:var(--accent-dim);border-color:var(--accent-border);color:var(--text-primary)}
.dw-badge.dw-b-blue{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.dw-badge.dw-b-purple{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.dw-badge.dw-b-muted{background:var(--tint-1);border-color:var(--tint-2);color:var(--text-tertiary)}
/* align-items:baseline, not center. This is one sentence, so its parts must
   sit on a shared baseline; centring aligns them by BOX height instead, and
   any span whose box differs — a different font, or an emoji — floats off the
   line. That is what made the name look detached from the words around it. */
.dw-greeting{font-family:var(--font-display);font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--text-primary);display:flex;align-items:baseline;justify-content:center;gap:0;flex-wrap:wrap}
/* The name is part of the sentence, in the same face: the italic alone marks
   it. No gradient text anywhere in the product. */
.dw-name-grad{font-weight:500;font-style:italic}
.dw-spark{font-size:18px;display:inline-block;-webkit-text-fill-color:initial}
@keyframes dw-spark-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
.dw-spark{animation:dw-spark-pulse 3s ease-in-out infinite}
.dw-subtitle{font-size:14px;color:var(--text-secondary);margin-top:8px;font-weight:400;letter-spacing:.005em;min-height:1.4em;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.55}
@keyframes dw-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.dash-welcome-wrap.dw-anim .dw-badge{animation:dw-fade-up .35s var(--ease-spring) both}
.dash-welcome-wrap.dw-anim .dw-greeting{animation:dw-fade-up .42s var(--ease-spring) .06s both}
.dash-welcome-wrap.dw-anim .dw-subtitle{animation:dw-fade-up .42s var(--ease-spring) .14s both}

/* ── Settings Page ────────────────────────────────────────────────────────── */
.stt-section{margin-bottom:24px}
.stt-section-title{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:10px;padding-left:2px;display:flex;align-items:center;gap:7px;font-family:var(--font-num)}
.stt-section-title svg{width:13px;height:13px;flex-shrink:0;opacity:.75}
.stt-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.stt-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:16px 18px}
.stt-row-info{flex:1;min-width:0}
.stt-row-label{font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:3px}
/* 1.4 was the only prose line-height in the app below the 1.5 floor, and this
   class carries 19 of the 21 offending elements — every explanatory line in
   Settings. */
.stt-row-sub{font-size:12px;color:var(--text-tertiary);line-height:1.55}
.stt-divider{border-top:1px solid var(--border);margin:0 18px}
/* Toggle switch */
.stt-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.stt-toggle input{opacity:0;width:0;height:0;position:absolute}
.stt-toggle-track{width:42px;height:24px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:999px;transition:background-color var(--dur-toggle) var(--ease-standard),border-color var(--dur-toggle) var(--ease-standard);position:relative}
.stt-toggle input:checked + .stt-toggle-track{background:var(--accent);border-color:var(--accent)}
.stt-toggle-track.on{background:var(--accent);border-color:var(--accent)}
.stt-toggle-track.on .stt-toggle-thumb{transform:translateX(18px)}
.stt-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--dur-toggle) var(--ease-standard);box-shadow:var(--el-2)}
/* An empty star is a control, not a divider — border-strong put it at 1.53:1
   on white. --star-empty is tuned to clear 3:1 at 24px in both themes. */
.review-star{background:none;border:none;font-size:24px;cursor:pointer;color:var(--star-empty);padding:0 2px;line-height:1;transition:color .12s,transform .1s}
.review-star:hover,.review-star.on{color:var(--accent)}
.review-star:hover{transform:scale(1.15)}
.review-body-ta{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--rm);padding:12px 14px;color:var(--text-primary);font-family:inherit;font-size:13px;line-height:1.6;resize:vertical;min-height:100px;outline:none;box-sizing:border-box;transition:border-color var(--dur-fast)}
.review-body-ta:focus{border-color:var(--accent)}
.stt-toggle input:checked + .stt-toggle-track .stt-toggle-thumb{transform:translateX(18px)}
.stt-sess-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:14px 18px 16px}
.stt-sess-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:6px 14px;border-radius:var(--r-card);border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);user-select:none}
.stt-sess-pill.on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.stt-sess-pill .sp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;transition:opacity var(--dur-fast)}
.stt-sess-pill.on .sp-dot{opacity:1}
/* Trading sessions: the Futures / Forex segment over the chosen set's sessions,
   each pill carrying its hours in the member's own time. */
.stt-row.stt-sess-row{flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding-bottom:4px}
#stt-sess-grid{padding:0}
.stt-sess-pill .sp-hrs{font-family:var(--font-num);font-size:11px;font-weight:400;color:var(--text-tertiary);margin-left:4px}
.stt-sess-pill.on .sp-hrs{color:inherit}
.dw-sess-hint{display:none;font-size:12px;color:var(--text-tertiary);margin-top:10px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border-strong);}
.dw-sess-hint:hover{color:var(--text-secondary)}

/* ── Mobile hamburger button ──────────────────────────────────────────────── */
#mob-menu-btn{display:none;position:fixed;top:14px;left:14px;z-index:200;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rm);
  width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text-primary);flex-shrink:0}
#mob-search-btn{display:none;position:fixed;top:14px;right:14px;z-index:200;
  background:transparent;border:1px solid transparent;border-radius:var(--rm);
  width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text-primary);flex-shrink:0}
#mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;backdrop-filter:blur(2px)}
#mob-overlay.show{display:block}

/* ── Mobile expandable trade rows ───────────────────────────────────────── */
.mob-trade-row{cursor:pointer;transition:background var(--dur-fast)}
.mob-trade-row:active{background:var(--tint-1)}
.mob-trade-row.mob-row-open td:last-child span{transform:rotate(90deg);display:inline-block}
.mob-exp-card{padding:12px 14px 10px;background:var(--accent-dim);border-top:1px solid var(--accent-dim);border-bottom:1px solid var(--border)}
.mob-exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2) 10px;margin-bottom:10px}
.mob-exp-item{min-width:0}
.mob-exp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-weight:600;margin-bottom:2px}
.mob-exp-val{font-size:12px;color:var(--text-primary)}
.mob-exp-notes{font-size:12px;color:var(--text-secondary);line-height:1.5;padding:8px 10px;background:rgba(255,255,255,.02);border-radius:var(--rs);margin-bottom:10px;font-style:italic}
.desk-trade-row{cursor:pointer;transition:background .12s}
.desk-trade-row:hover td{background:var(--bg-hover)}
.cell-empty-cta{font-size:11px;font-weight:600;color:var(--text-tertiary);cursor:pointer;padding:2px 6px;border-radius:4px;transition:opacity var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.desk-trade-row:hover .cell-empty-cta{opacity:.85}
.cell-empty-cta:hover{opacity:1!important;background:var(--accent-dim);color:var(--accent)}
.desk-exp-chevron{margin-left:8px;font-size:11px;color:var(--text-tertiary);display:inline-block;transition:transform var(--dur-fast)}
.desk-trade-row.desk-row-open .desk-exp-chevron{transform:rotate(90deg)}
.desk-exp-card{padding:16px 20px;background:var(--accent-dim);border-top:1px solid var(--accent-dim);border-bottom:1px solid var(--border);display:flex;gap:var(--sp-5);align-items:flex-start;flex-wrap:wrap}
.desk-exp-notes-col{flex:1;min-width:260px}
.desk-exp-chart{max-width:320px;border-radius:var(--rm);border:1px solid var(--border-strong);cursor:pointer}
/* A trade's detail opens on the height tween every opening thing uses (grid
   rows 0fr to 1fr inside the cell, 240ms out): its tinted band opens, and what
   is in it fades in and rises 4px from +60ms. Closing takes 170ms, easing in.
   The row under the pointer eases into its highlight. */
.tx-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .17s cubic-bezier(.4,0,1,1)}
.tx-wrap.on{grid-template-rows:1fr;transition:grid-template-rows .24s var(--ease-out)}
.tx-clip{min-height:0;overflow:hidden}
.tx-clip>*>*{opacity:0;transform:translateY(4px);transition:opacity .1s cubic-bezier(.4,0,1,1),transform .17s cubic-bezier(.4,0,1,1)}
.tx-wrap.on>.tx-clip>*>*{opacity:1;transform:none;transition:opacity .16s var(--ease-out) .06s,transform .16s var(--ease-out) .06s}
.desk-trade-row td{transition:background-color .14s var(--ease-standard)}
@media(prefers-reduced-motion:reduce){.tx-clip>*>*{transform:none}.tx-wrap.on>.tx-clip>*>*{transition-delay:0s!important}}
.trade-chart-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:22px 16px;border:1.5px dashed var(--border-strong);border-radius:var(--r);cursor:pointer;color:var(--text-secondary);font-size:13px;font-weight:500;background:rgba(255,255,255,.02);transition:border-color .18s,background .18s,transform var(--dur-fast);user-select:none;text-align:center;min-height:96px}
.trade-chart-btn:hover{border-color:var(--accent-border);background:var(--accent-dim);transform:translateY(-1px)}
.trade-chart-sub{font-size:11px;color:var(--text-tertiary);font-weight:400;margin-top:1px}
.trade-chart-thumb{max-width:100%;max-height:200px;border-radius:var(--rm);margin-top:10px;display:block;cursor:pointer;border:1px solid var(--border-strong);}
.trade-chart-del{display:inline-block;margin-top:6px;font-size:11px;color:var(--loss);cursor:pointer;opacity:.7;}
.trade-chart-del:hover{opacity:1;}
.mob-exp-actions{display:flex;gap:var(--sp-2)}

/* ── Mobile layout (≤768px) ───────────────────────────────────────────────── */
@media(max-width:768px){
  html,body{height:100%;overflow:hidden;overflow-x:hidden;max-width:100vw}
  #app{height:100dvh;overflow:hidden;flex-direction:column} /* dvh tracks the URL bar; svh left a gap when it retracted */
  #main{flex:1;min-height:0;margin-left:0;padding:16px 14px;padding-top:62px;padding-bottom:80px;
        overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
        width:100%;box-sizing:border-box}

  /* ── Mobile nav (rebuilt): the old rules here hid #sidebar — a nav the
     two-tier rebuild deleted — leaving the rail overlapping content and a
     hamburger wired to a ghost. Rail and pin retire below 768; the bottom
     tab bar + sheet take over. ── */
  #rail{display:none}
  #nav-pin-btn{display:none}
  #mob-menu-btn{display:none!important}
  #mob-search-btn{display:flex;width:44px;height:44px;top:6px;right:8px}
  #topbar{padding-right:64px}
  #sb-tz-label{display:none}
  nav#mobtab{display:flex} /* 0-1-1: outranks the base display:none, which sits later in source */
  body.nav-pinned #main{margin-left:0}
  #main{padding-bottom:calc(92px + max(0px,env(safe-area-inset-bottom)))}
  /* navpanel presents as a bottom sheet */
  #navpanel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:72svh;
    border-right:0;border-top:1px solid var(--border);border-radius:18px 18px 0 0;
    padding-top:10px;padding-bottom:calc(78px + max(0px,env(safe-area-inset-bottom)));
    transform:translateY(102%);opacity:1;box-shadow:0 -18px 50px rgba(0,0,0,.45);
    transition:transform .28s var(--ease-standard);z-index:155}
  body.nav-open #navpanel{transform:translateY(0)}
  div#navpanel::before{display:block} /* 0-1-1+pseudo: outranks the base display:none that sits later in source */
  .np-ghost::before{content:"";display:block;height:4px;margin:2px auto 8px;flex-shrink:0}
  #navpanel-subs{overflow-y:auto;-webkit-overflow-scrolling:touch}
  #navpanel-foot{display:none} /* desktop pin/hint footer has no meaning in a sheet */
  /* Modal law: no overlay box exceeds the phone. Overlays are per-ID (no
     shared class), so the guard targets their direct child boxes. */
  #acct-form>div,#broker-choose-modal>div,#welcome-modal>div,
  #legal-modal>div,#del-account-modal>div,#del-trading-acct-modal>div,
  #share-modal-overlay>div,#aff-inv-overlay>div,#pb-editor-modal>div{
    max-width:calc(100vw - 24px);max-height:calc(100svh - 90px);overflow-y:auto;box-sizing:border-box}
  #nav-scrim{z-index:150}

  /* Page headers */
  .pt{font-size:20px}
  .ph{margin-bottom:16px}

  /* Dashboard top row */
  .dash-top-row{flex-direction:column;align-items:center;gap:var(--sp-2);margin-bottom:16px}
  .dash-welcome-wrap{text-align:center;width:100%}
  .dash-top-left{width:100%;text-align:left}
  .dash-top-spacer{display:none}
  .dw-greeting{font-size:18px}
  .dw-badge{font-size:11px}
  .dw-subtitle{margin-left:0;margin-right:0;font-size:14px}

  .kpi-row{grid-template-columns:repeat(2,1fr)}

  /* Streak card — dots even tighter on very small screens */
  .streak-dots{gap:2px;flex-wrap:wrap;row-gap:3px} /* wrap beats sideways scroll */
  .tl-seg{max-width:100%;overflow-x:auto;scrollbar-width:none} /* segment group scrolls in place */
  .tl-seg::-webkit-scrollbar{display:none}
  #pg-insights .ins-hd,#pg-insights .fm{max-width:100%;min-width:0}
  #pg-insights .fm{flex-wrap:wrap;row-gap:6px}
  /* Overflow law: media never widens a page */
  #main img,#main svg,#main video{max-width:100%}
  /* The greeting glow bleeds -80px horizontally; at full-width that IS the
     page's sideways scroll (a pseudo, invisible to element audits). Vertical
     bleed keeps the pulse alive; horizontal stops at the wrap. */
  .dash-welcome-wrap::before{inset:-30px 0}
  /* Settings form rows carry inline 1fr 1fr grids; two inputs in 347px
     collide with their own icons. Stack them. */
  #pg-settings .stt-row [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .sk-dot{width:20px;height:20px;font-size:11px}

  /* Stats grids */
  .s3{grid-template-columns:repeat(2,1fr)}
  .s2{grid-template-columns:1fr 1fr}
  .cr2,.cre{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr}

  /* Account overview */
  .acov-grid{grid-template-columns:1fr}
  .acov-stats{grid-template-columns:repeat(2,1fr)}

  /* Weekly review */
  .wr-kpi-row{grid-template-columns:repeat(2,1fr)}
  .rh-summary-row{grid-template-columns:1fr 1fr}
  .rm-body{grid-template-columns:1fr}

  /* Settings page */
  .stt-row{flex-direction:column;align-items:flex-start;gap:var(--sp-2-5)}
  .stt-row > div:last-child{width:100%}
  #pg-settings .fi{width:100% !important}
  #pg-settings button{width:100%}
  #pg-settings .stt-row > .stt-toggle{width:auto}
  #pg-settings .seg-btn{width:auto} /* a segment's words keep their width: full-width buttons pushed Forex out of sight */

  /* Form bar — 2 per row on mobile */
  .fb{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .fb .fm{min-width:0;width:100%;box-sizing:border-box}
  .fb .fm .fi,.fb .fm .fs{width:100%;box-sizing:border-box;font-size:13px;height:36px}
  /* Instrument field spans full width */
  .fb .fm:last-child{grid-column:1/-1}
  /* Date inputs match select appearance */
  input[type="date"].fi,input[type="time"].fi{-webkit-appearance:none;appearance:none;box-sizing:border-box;}

  /* Trade log — hide analysis columns, show key data only */
  #trades-tw{width:100%;overflow-x:visible}
  #trades-tw table{width:100%;min-width:0}
  /* Hide analysis columns on mobile — keep Date,Account,Instrument,Dir,Outcome,R,P&L,Edit */
  #trades-tw th:nth-child(5),#trades-tw td:nth-child(5){display:none !important}
  #trades-tw th:nth-child(6),#trades-tw td:nth-child(6){display:none !important}
  #trades-tw th:nth-child(7),#trades-tw td:nth-child(7){display:none !important}
  #trades-tw th:nth-child(8),#trades-tw td:nth-child(8){display:none !important}
  #trades-tw th:nth-child(9),#trades-tw td:nth-child(9){display:none !important}
  #trades-tw th:nth-child(10),#trades-tw td:nth-child(10){display:none !important}
  #trades-tw th:nth-child(11),#trades-tw td:nth-child(11){display:none !important}
  #trades-tw th:nth-child(12),#trades-tw td:nth-child(12){display:none !important}
  #trades-tw th:nth-child(13),#trades-tw td:nth-child(13){display:none !important}
  #trades-tw th:nth-child(14),#trades-tw td:nth-child(14){display:none !important}
  #trades-tw th:nth-child(15),#trades-tw td:nth-child(15){display:none !important}
  #trades-tw th:nth-child(16),#trades-tw td:nth-child(16){display:none !important}
  #trades-tw th:nth-child(20),#trades-tw td:nth-child(20){display:none !important}

  /* All scrollable table wrappers */
  .tw{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rs)}
  table{font-size:12px;width:100%}
  thead th{padding:8px 6px;font-size:11px;white-space:nowrap}
  td{padding:8px 6px}
  /* Summary bar wraps on mobile */
  .sum-bar{flex-wrap:wrap;gap:var(--sp-2)}

  /* Modals — full screen on mobile */
  .md{width:95vw !important;max-width:95vw !important;margin:16px auto;max-height:90svh;overflow-y:auto}

  /* Prevent iOS auto-zoom on focus — needs to be ≥16px */
  input,textarea,select{font-size:16px !important}

  /* Admin user detail modal — centred card on mobile */
  .admin-ud-overlay{align-items:center;padding:16px}
  .admin-ud-modal{border-radius:var(--r-card);max-width:100% !important;max-height:88svh;width:100%}

  /* Achievements — single column so track names don't truncate */
  .ach-grid{grid-template-columns:1fr}
  .ach-track-hd{gap:var(--sp-2-5)}
  .ach-prog-label{white-space:normal}

  /* ── Insights tab ── */
  /* Header: stack title + controls vertically */
  .ins-hd{flex-direction:column;align-items:flex-start;gap:var(--sp-2-5);margin-bottom:16px}
  .ins-hd > div:last-child{width:100%}
  .ins-hd .fm{min-width:0!important;flex:1}
  /* Edge Score: stack gauge above breakdown */
  .es-inner{flex-direction:column;gap:var(--sp-4);align-items:center}
  .es-right{width:100%;min-width:0}
  /* Chart cards: tighter padding */
  #ins-content .cc{padding:14px 16px}
}

/* ── Small phones (≤480px) ────────────────────────────────────────────────── */
@media(max-width:480px){
  /* Longhands only: the `padding` shorthand here silently reset padding-bottom
     to 12px on every phone (<=480px covers all of them), which erased the
     tab-bar clearance set at 768 and buried the last ~50px of every page
     under the fixed bar. */
  #main{padding-left:10px;padding-right:10px;padding-top:60px}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .s3{grid-template-columns:1fr}
  .wr-kpi-row{grid-template-columns:1fr}
  .lt-out-grid{grid-template-columns:repeat(2,1fr)}
  .rh-summary-row{grid-template-columns:1fr}
  .tw{width:100%}
  #trades-tw{width:100%}
  /* Insights: tighter padding + psych zones stack fully */
  #ins-content .cc{padding:12px 14px}
}

/* ── Log Trade — mobile fixes ─────────────────────────────────────────────── */
@media(max-width:768px){
  .log-form-cols{grid-template-columns:1fr}
  /* Form container full-width and properly boxed */
  #pg-log > div{width:100%;box-sizing:border-box}

  /* Bigger touch targets — Apple HIG recommends 44px minimum */
  #pg-log .fi,#pg-log .fs,#pg-log .ft{height:44px;font-size:14px}
  #pg-log .ft{height:auto;min-height:88px}
  #pg-log .tg{height:44px}
  #pg-log .tg-wide{height:auto;min-height:44px}
  #pg-log .tg-wide .tb{padding:10px 6px}
  #pg-log .tb{font-size:14px}
  #pg-log #save-btn,#pg-log #draft-btn,#pg-log #cancel-btn{height:48px;font-size:14px}

  /* Psychology buttons — 5 per row (2 rows) instead of 10 in one */
  .psych-row{grid-template-columns:repeat(5,1fr);gap:6px}
  .ps-btn{height:44px;font-size:14px}

  /* Single-column stacked layout on mobile */
  #pg-log .fg{grid-template-columns:1fr;gap:14px}
  /* Full-width container */
  #pg-log > div{max-width:100%}

  /* Details expander button — full width, comfortable height */
  #log-det-btn{height:44px;font-size:14px}

  /* Time input — iOS ignores width:100% without max-width */
  #f-time{width:100%;max-width:100%;min-width:0}
}

/* ── Community: one frame, two panes ─────────────────────────────────────────
   The rooms on the left (a search field, the channels, the trader's cohort
   rooms, the private room), the open room on the right (its header, the feed,
   the composer). Phones show one pane at a time: the page's data-view says
   which. The page itself is a fixed-height column; only the feed scrolls. */
.cm-page{display:flex;flex-direction:column;height:calc(100vh - 112px);min-height:480px}
.cm-ph{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:20px}
.cm-frame{flex:1;min-height:0;display:grid;grid-template-columns:272px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 1px 0 var(--hi)}

/* The rooms */
.cm-rooms{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--border)}
.cm-rooms-top{flex:none;height:56px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--border)}
.cm-search{position:relative;display:flex;align-items:center;width:100%}
.cm-search-ic{position:absolute;left:11px;width:14px;height:14px;color:var(--text-tertiary);pointer-events:none}
.cm-search input{width:100%;height:36px;padding:0 30px 0 33px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--rs);color:var(--text-primary);font-family:var(--font-body);font-size:13px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.cm-search input::placeholder{color:var(--text-tertiary);opacity:1}
.cm-search input::-webkit-search-cancel-button{display:none}
.cm-search input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cm-search-x{position:absolute;right:4px;width:28px;height:28px;border:0;background:none;color:var(--text-tertiary);font-size:18px;line-height:1;border-radius:var(--rs);cursor:pointer}
.cm-search-x:hover{color:var(--text-primary);background:var(--bg-hover)}
.cm-rooms-list{flex:1;min-height:0;overflow-y:auto;padding:0 12px 8px}
.cm-rooms.searching .cm-rooms-list,.cm-rooms.searching .cm-rooms-foot{display:none}
.cm-group{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);padding:14px 10px 6px}
.cm-rooms-list .cm-group:first-child{padding-top:10px}
.cm-room-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;width:100%;padding:8px 10px;border:0;background:none;border-radius:var(--rs);text-align:left;cursor:pointer;color:var(--text-secondary);font-family:var(--font-body);transition:background-color var(--dur-press) var(--ease-standard)}
.cm-room-row:hover{background:var(--bg-hover)}
.cm-room-row:active{transform:scale(.995)}
.cm-room-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cm-room-row.on{background:var(--accent-dim)}
.cm-room-row.on .cm-room-time,.cm-room-row.on .cm-room-prev{color:var(--text-secondary)}
.cm-room-name{font-size:13.5px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cm-room-row.unread .cm-room-name{font-weight:600}
.cm-room-time{font-family:var(--font-num);font-size:11px;color:var(--text-tertiary);white-space:nowrap;justify-self:end}
.cm-room-prev{font-size:12.5px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.cm-room-prev b{font-weight:500;color:var(--text-secondary)}
.cm-room-row.unread .cm-room-prev{color:var(--text-secondary)}
.cm-room-n{justify-self:end;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--tint-2);color:var(--text-primary);font-family:var(--font-num);font-size:11px;line-height:18px;text-align:center}
.cm-room-n[hidden]{display:none}
/* Who is in the room now, from presence: the rail's foot is a list of people, not a void */
.cm-online-list{flex:none;padding:4px 12px 10px;border-top:1px solid var(--border)}
.cm-online-list[hidden]{display:none}
.cm-online-list .cm-group{display:flex;align-items:center;gap:6px;padding:10px 10px 4px}
.cm-online-row{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 10px;border:0;background:none;border-radius:var(--rs);font-family:var(--font-body);font-size:12.5px;color:var(--text-secondary);text-align:left;cursor:pointer;transition:background-color var(--dur-press) var(--ease-standard),color var(--dur-press) var(--ease-standard)}
.cm-online-row:hover{background:var(--bg-hover);color:var(--text-primary)}
.cm-online-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cm-online-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-online-more{padding:4px 8px 0;font-size:11.5px;color:var(--text-tertiary)}
.cm-rooms-foot{flex:none;display:none;align-items:center;gap:6px;padding:10px 16px 12px;border-top:1px solid var(--border);font-size:12px;color:var(--text-tertiary)}
.cm-foot-link{background:none;border:0;padding:0;font:inherit;color:var(--text-secondary);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--border-strong);transition:color var(--dur-fast) var(--ease-standard)}
.cm-foot-link:hover{color:var(--text-primary)}

/* The room */
.cm-room{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.cm-head{flex:none;display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-bottom:1px solid var(--border)}
.cm-head .cm-back{display:none}
.cm-head-main{flex:1;min-width:0}
.cm-head-name{font-size:17px;font-weight:600;color:var(--text-primary);line-height:1.2}
.cm-head-desc{font-size:12.5px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cm-head-side{flex:none;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.cm-head-act{flex:none;display:flex;align-items:center}
.cm-head-side .n,.cm-room .n{font-family:var(--font-num)}
.cm-online{display:inline-flex;align-items:center;gap:5px;color:var(--text-secondary)}
.cm-online[hidden],.cm-head-sep[hidden]{display:none}
.cm-live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:cm-pulse 2.4s var(--ease-standard) infinite}
@keyframes cm-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cm-ico{width:32px;height:32px;flex:none;border:0;background:none;color:var(--text-tertiary);border-radius:var(--rs);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color var(--dur-press) var(--ease-standard),color var(--dur-press) var(--ease-standard)}
.cm-ico svg{width:17px;height:17px}
.cm-ico:hover{background:var(--bg-hover);color:var(--text-primary)}
.cm-ico:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.cm-ico-sm{width:26px;height:26px;font-size:18px;line-height:1}
.cmv2-notif-btn.active{color:var(--accent)}
@media(min-width:760px){.cmv2-notif-btn{display:none}}

/* The feed */
.cm-feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 20px 4px;overscroll-behavior:contain}
.cm-room.searching .cm-feed,.cm-room.searching .cm-typing,.cm-room.searching .cm-compose{display:none}
.cm-older{display:flex;justify-content:center;padding:4px 0 10px}
.cm-older-btn{background:none;border:0;padding:4px 8px;font:inherit;font-size:12px;color:var(--text-tertiary);cursor:pointer;border-radius:var(--rs)}
.cm-older-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.cm-day{display:flex;align-items:center;gap:12px;padding:16px 0 8px;font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
.cm-day::before,.cm-day::after{content:"";flex:1;height:1px;background:var(--border)}
.cm-day.cm-new{color:var(--accent);padding-top:10px}
.cm-day.cm-new::before,.cm-day.cm-new::after{background:var(--accent-border)}
.cmv2-msg{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start;padding:4px 12px;margin:12px -12px 0;border-radius:var(--rs);transition:background-color var(--dur-press) var(--ease-standard)}
.cmv2-msg.cont{padding-top:2px;padding-bottom:2px;margin-top:0}
.cm-day+.cmv2-msg,.cm-older+.cmv2-msg{margin-top:2px}
@media(hover:hover){.cmv2-msg:hover{background:var(--tint-1)}}
.cmv2-msg.long-pressed{background:var(--tint-1)}
.cmv2-msg.cm-flash{animation:cm-flash 1.2s var(--ease-standard)}
@keyframes cm-flash{0%,40%{background:var(--accent-dim)}100%{background:transparent}}
.cmv2-msg.cm-gone{opacity:0;transform:scale(.985);transition:opacity var(--dur-base) var(--ease-in),transform var(--dur-base) var(--ease-in)}
.cmv2-msg-av{width:32px;height:32px;margin-top:1px;cursor:pointer;border-radius:50%}
.cmv2-msg-av:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cm-gutter-time{font-family:var(--font-num);font-size:10.5px;color:var(--text-tertiary);text-align:right;padding-top:4px;opacity:0;white-space:nowrap;transition:opacity var(--dur-fast) var(--ease-out)}
@media(hover:hover){.cmv2-msg:hover .cm-gutter-time{opacity:1}}
.cmv2-msg-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.cmv2-msg-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:3px;max-width:100%}
.cmv2-msg-name{font-size:13.5px;font-weight:600;color:var(--text-primary);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.cmv2-msg-name:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.cmv2-msg-time{font-family:var(--font-num);font-size:11px;color:var(--text-tertiary)}
.cmv2-bubble{font-size:14px;line-height:1.55;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere;max-width:72ch}
.cmv2-bubble-img{display:block;max-width:360px;width:100%;margin-top:6px;border-radius:var(--rs);border:1px solid var(--border);cursor:zoom-in}
.cmv2-reply-quote{display:flex;flex-direction:column;gap:1px;max-width:min(60ch,100%);box-sizing:border-box;margin:4px 0 8px;padding:5px 10px;border-left:2px solid var(--border-strong);background:var(--tint-1);border-radius:0 var(--rs) var(--rs) 0;cursor:pointer}
.cmv2-reply-quote:hover{background:var(--tint-2)}
.cmv2-reply-quote-name{font-size:11.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmv2-reply-quote-text{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
/* Reactions under the body */
.cmv2-msg-rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cmv2-msg-rx:empty{display:none}
.cmv2-rx-chip{height:24px;padding:0 8px;display:inline-flex;align-items:center;gap:5px;background:var(--tint-1);border:1px solid var(--border);border-radius:var(--rs);font-size:13px;line-height:1;cursor:pointer;font-family:var(--font-body);color:var(--text-primary);transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.cmv2-rx-chip:hover{border-color:var(--border-strong)}
.cmv2-rx-chip.mine{background:var(--accent-dim);border-color:var(--accent-border)}
.cmv2-rx-chip-count{font-family:var(--font-num);font-size:11px;color:var(--text-secondary)}
.cmv2-rx-chip.mine .cmv2-rx-chip-count{color:var(--accent)}
@keyframes cmv2-chip-pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cmv2-chip-bump{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.cmv2-rx-chip-new{animation:cmv2-chip-pop var(--dur-toggle) var(--ease-out) both}
.cmv2-rx-chip-bump{animation:cmv2-chip-bump var(--dur-toggle) var(--ease-standard)}
/* The actions pill: reactions, reply, report, delete */
.cmv2-msg-actions{position:absolute;top:-12px;right:12px;z-index:2;display:flex;align-items:center;gap:1px;padding:2px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--rs);box-shadow:var(--el-3);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out)}
@media(hover:hover){.cmv2-msg:hover .cmv2-msg-actions,.cmv2-msg:focus-within .cmv2-msg-actions{opacity:1;pointer-events:auto}}
.cmv2-msg.long-pressed .cmv2-msg-actions{opacity:1;pointer-events:auto}
.cmv2-msg-action{width:28px;height:28px;border:0;background:none;padding:0;color:var(--text-tertiary);border-radius:var(--rs);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;transition:background-color var(--dur-press) var(--ease-standard),color var(--dur-press) var(--ease-standard)}
.cmv2-msg-action svg{width:14px;height:14px;pointer-events:none}
.cmv2-msg-action.emoji{font-size:15px}
.cmv2-msg-action:hover{background:var(--bg-hover);color:var(--text-primary)}
.cmv2-msg-action.emoji.reacted{background:var(--accent-dim)}
.cmv2-msg-action.del:hover{color:var(--loss)}
.cmv2-msg-action-sep{width:1px;height:16px;background:var(--border);margin:0 3px;flex:none}
/* Jump to the latest message when scrolled up */
.cm-jump{position:sticky;bottom:6px;display:flex;width:max-content;margin:-30px auto 0;transform:translateY(8px);align-items:center;gap:5px;height:30px;padding:0 12px 0 9px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:999px;color:var(--text-secondary);font:inherit;font-size:12px;font-weight:500;cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--dur-panel) var(--ease-out),transform var(--dur-panel) var(--ease-out)}
.cm-jump svg{width:14px;height:14px}
.cm-jump.on{opacity:1;pointer-events:auto;transform:none}
.cm-jump.fresh{color:var(--accent);border-color:var(--accent-border)}
.cm-jump:hover{color:var(--text-primary)}
/* Trade card: the record, in the row */
.cmv2-trade-card{width:100%;max-width:440px;margin-top:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);overflow:hidden}
.cmv2-tc-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border)}
.cmv2-tc-inst{font-size:14px;font-weight:600;color:var(--text-primary)}
.cmv2-tc-dir{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
.cmv2-tc-date{margin-left:auto;font-family:var(--font-num);font-size:11px;color:var(--text-tertiary);white-space:nowrap}
.cmv2-tc-body{padding:10px 12px 11px}
.cmv2-tc-main{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cmv2-tc-out{font-family:var(--font-num);font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
.cmv2-tc-r{font-family:var(--font-num);font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1}
.cmv2-tc-r.pos,.cmv2-tc-pnl.pos,.cm-tp-r.pos,.cm-pp-val.pos{color:var(--win)}
.cmv2-tc-r.neg,.cmv2-tc-pnl.neg,.cm-tp-r.neg,.cm-pp-val.neg{color:var(--loss)}
.cmv2-tc-r.ze,.cm-tp-r.ze{color:var(--text-secondary)}
.cmv2-tc-pnl{font-family:var(--font-num);font-size:13px}
.cmv2-tc-meta{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:8px;font-size:11.5px;color:var(--text-tertiary)}
.cmv2-tc-meta b{font-weight:400;color:var(--text-tertiary)}
.cmv2-tc-meta .n{color:var(--text-primary)}
.cmv2-tc-notes{margin:8px -12px 0;padding:8px 12px 0;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-secondary);line-height:1.5}
/* Empty and loading states */
.cmv2-empty-chat{flex:1;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 20px;color:var(--text-tertiary)}
.cmv2-empty-title{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}
.cmv2-empty-sub{font-size:13px;line-height:1.6}
.cm-typing{flex:none;height:18px;padding:0 20px;font-size:12px;line-height:18px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The composer */
.cm-compose{flex:none;padding:4px 20px 12px}
.cm-reply-bar{display:none;align-items:center;gap:10px;margin:6px 0 8px;padding:6px 6px 6px 10px;border-left:2px solid var(--accent);background:var(--tint-1);border-radius:0 var(--rs) var(--rs) 0}
.cm-reply-bar.show{display:flex}
.cm-reply-bar-body{flex:1;min-width:0}
.cm-reply-bar-name{font-size:11.5px;color:var(--text-tertiary)}
.cm-reply-bar-name span:last-child{font-weight:600;color:var(--accent)}
.cm-reply-bar-text{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cm-compose-att{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 8px}
.cmv2-att-thumb{position:relative;width:52px;height:52px;border-radius:var(--rs);overflow:hidden;border:1px solid var(--border);flex-shrink:0}
.cmv2-att-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cmv2-att-thumb-rm{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;background:var(--scrim);color:var(--text-primary);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cmv2-trade-pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 4px 0 10px;background:var(--tint-1);border:1px solid var(--border);border-radius:var(--rs);font-family:var(--font-num);font-size:12px;color:var(--text-primary)}
.cm-tp-lbl{font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
.cmv2-trade-pill-rm{width:22px;height:22px;border:0;background:none;color:var(--text-tertiary);font-size:16px;line-height:1;cursor:pointer;border-radius:var(--rs)}
.cmv2-trade-pill-rm:hover{color:var(--text-primary);background:var(--bg-hover)}
.cm-field{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 4px 4px 14px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--rs);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.cm-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cm-field.multi{align-items:flex-end}
.cm-input{flex:1;min-width:0;background:none;border:0;outline:none;resize:none;font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--text-primary);padding:8px 0;min-height:36px;max-height:140px;margin-bottom:1px}
.cm-input::placeholder{color:var(--text-tertiary);opacity:1}
.cm-field-tools{display:flex;align-items:center;gap:2px;flex:none;padding-bottom:1px}
.cm-send{width:32px;height:32px;margin-left:4px;border:0;border-radius:var(--rs);background:none;color:var(--text-tertiary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color var(--dur-press) var(--ease-standard),color var(--dur-press) var(--ease-standard),transform var(--dur-press) var(--ease-out)}
.cm-send svg{width:16px;height:16px}
.cm-send:hover{background:var(--bg-hover);color:var(--text-primary)}
.cm-field.has .cm-send{background:var(--text-primary);color:var(--on-accent)}
.cm-field.has .cm-send:hover{background:color-mix(in srgb,var(--text-primary) 92%,var(--bg-base))}
.cm-send:active:not(:disabled){transform:scale(.96)}
.cm-send:disabled{opacity:.4;cursor:not-allowed}
.cm-send:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cm-compose-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;font-size:11.5px;color:var(--text-tertiary);line-height:1.4}
.cm-legal a{color:var(--text-secondary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--border-strong);cursor:pointer}
.cm-legal a:hover{color:var(--text-primary)}
.cm-hint{flex:none;white-space:nowrap;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.cm-compose:focus-within .cm-hint{opacity:1}
.cm-legal-short{display:none}

/* Search results */
.cm-search-results{display:none;flex:1;min-height:0;overflow-y:auto}
.cm-search-results.open{display:block}
.cm-sr-head{padding:12px 20px 6px;font-size:12px;color:var(--text-tertiary)}
.cmv2-sr-empty{padding:40px 20px;text-align:center;font-size:13px;color:var(--text-tertiary);line-height:1.6}
.cmv2-sr-item{display:block;width:100%;padding:10px 20px;border:0;border-top:1px solid var(--border);background:none;text-align:left;cursor:pointer;font-family:var(--font-body);color:var(--text-primary);transition:background-color var(--dur-press) var(--ease-standard)}
.cmv2-sr-item:hover{background:var(--tint-1)}
.cmv2-sr-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cmv2-sr-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.cm-sr-room{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--accent)}
.cmv2-sr-name{font-size:12.5px;font-weight:600;color:var(--text-primary)}
.cmv2-sr-time{font-family:var(--font-num);font-size:11px;color:var(--text-tertiary);margin-left:auto}
.cmv2-sr-text{display:block;font-size:13.5px;color:var(--text-secondary);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cmv2-sr-text mark{background:var(--accent-dim);color:var(--accent);border-radius:2px;padding:0 1px}
.cm-rooms .cm-search-results{flex:1;min-height:0}
.cm-rooms .cmv2-sr-item{padding:10px 14px}
.cm-rooms .cm-sr-head{padding:8px 14px 4px}

/* Sheets: guidelines, the member card, the trade picker */
.cm-ov{display:none;position:fixed;inset:0;z-index:9600;align-items:center;justify-content:center;padding:20px;background:var(--scrim);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
.cm-ov.open{display:flex}
.cm-sheet{width:100%;max-width:460px;max-height:min(80vh,calc(100svh - 90px));display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;animation:cm-sheet-in var(--dur-panel) var(--ease-out) both}
.cm-sheet-sm{max-width:400px}
@keyframes cm-sheet-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cm-sheet-h{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px 20px;border-bottom:1px solid var(--border)}
.cm-sheet-t{font-size:15px;font-weight:600;color:var(--text-primary)}
.cm-sheet-x{font-size:20px;line-height:1;width:28px;height:28px}
.cm-sheet-b{overflow-y:auto;padding:16px 20px 20px}
.cm-sheet-list{overflow-y:auto;padding:4px 0 8px}
.cm-rule{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--border);font-size:13px;color:var(--text-secondary);line-height:1.5}
.cm-rule:first-child{border-top:0;padding-top:0}
.cm-rule b{color:var(--text-primary);font-weight:600}
.cm-rules-legal{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border);font-size:12px;color:var(--text-tertiary);line-height:1.55}
.cm-rules-legal a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong);cursor:pointer}
/* The member card */
.cmv2-pp-head{display:flex;align-items:center;gap:14px}
.cmv2-pp-info{flex:1;min-width:0}
.cmv2-pp-name{font-size:16px;font-weight:600;color:var(--text-primary);line-height:1.2}
.cmv2-pp-since{font-size:12px;color:var(--text-tertiary);margin-top:3px}
.cmv2-pp-badges{margin-top:8px}
.cm-pp-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cm-pp-stat{padding:0 12px;border-left:1px solid var(--border);min-width:0}
.cm-pp-stat:first-child{padding-left:0;border-left:0}
.cm-pp-val{font-family:var(--font-num);font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--text-primary);white-space:nowrap}
.cm-pp-lbl{font-family:var(--font-num);font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-top:6px;white-space:nowrap}
/* The trade picker */
.cmv2-trade-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;width:100%;padding:10px 20px;border:0;border-top:1px solid var(--border);background:none;text-align:left;cursor:pointer;font-family:var(--font-body);color:var(--text-primary);transition:background-color var(--dur-press) var(--ease-standard)}
.cmv2-trade-pick:first-child{border-top:0}
.cmv2-trade-pick:hover{background:var(--tint-1)}
.cmv2-trade-pick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cm-tp-l1{grid-column:1;display:flex;align-items:baseline;gap:8px;min-width:0}
.cmv2-trade-pick-pair{font-size:13.5px;font-weight:600;color:var(--text-primary)}
.cm-tp-dir,.cm-tp-out{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
.cm-tp-out{color:var(--text-secondary)}
.cm-tp-r{grid-column:2;grid-row:1/3;font-family:var(--font-num);font-size:14px;white-space:nowrap}
.cm-tp-l2{grid-column:1;display:flex;gap:8px;min-width:0;font-size:12px;color:var(--text-tertiary)}
.cm-tp-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lightbox */
#cmv2-lightbox{display:none;position:fixed;inset:0;z-index:9800;background:rgba(5,14,21,.92);align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#cmv2-lightbox.open{display:flex}
#cmv2-lightbox img{max-width:100%;max-height:90vh;border-radius:var(--rs);object-fit:contain}
.cmv2-lightbox-close{position:fixed;top:16px;right:16px;width:40px;height:40px;color:#edf2f7;font-size:24px;line-height:1}
.cmv2-lightbox-close:hover{background:rgba(237,242,247,.12);color:#edf2f7}
/* Phone: the long-press sheet */
.cmv2-ctx-overlay{display:none;position:fixed;inset:0;z-index:9650;background:var(--scrim);align-items:flex-end;justify-content:center}
.cmv2-ctx-overlay.open{display:flex}
.cmv2-ctx-card{width:100%;max-width:520px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding:10px 12px calc(10px + max(0px,env(safe-area-inset-bottom)));animation:cm-ctx-in var(--dur-page) var(--ease-out) both}
@keyframes cm-ctx-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.cmv2-ctx-rx{display:flex;justify-content:space-between;padding:4px 2px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.cmv2-ctx-rx-btn{width:44px;height:44px;border:0;background:none;font-size:24px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-press) var(--ease-standard)}
.cmv2-ctx-rx-btn:active{background:var(--bg-hover)}
.cmv2-ctx-rx-btn.selected{background:var(--accent-dim)}
.cmv2-ctx-action{display:flex;align-items:center;gap:12px;width:100%;height:46px;padding:0 8px;border:0;background:none;border-radius:var(--rs);font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-primary);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-press) var(--ease-standard)}
.cmv2-ctx-action svg{width:18px;height:18px;color:var(--text-secondary)}
.cmv2-ctx-action:active{background:var(--bg-hover)}
.cmv2-ctx-action.del,.cmv2-ctx-action.del svg{color:var(--loss)}
/* Swipe-to-reply mark */
.cmv2-swipe-ind{position:fixed;z-index:9500;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}
@keyframes cmv2-ind-pop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}
.cmv2-swipe-ind.pop{animation:cmv2-ind-pop var(--dur-toggle) var(--ease-out)}
/* Admin report badge on the rail */
.cmv2-report-badge{margin-left:auto;background:var(--loss-press);color:#fff;font-size:11px;font-weight:700;min-width:16px;height:16px;border-radius:var(--rm);padding:0 4px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* Narrower desktops */
@media(max-width:1023px){
  .cm-frame{grid-template-columns:232px minmax(0,1fr)}
  .cm-hint{display:none}
}
/* Phones and small tablets: one pane at a time */
@media(max-width:759px){
  .cm-page{height:calc(100dvh - 124px - max(0px,env(safe-area-inset-bottom)));min-height:360px;margin:0 -14px -30px}
  #pg-community[data-view="room"] .cm-ph{display:none}
  .cm-ph{margin:0 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
  .cm-ph-guide{display:none}
  .cm-frame{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);border:0;border-radius:0;box-shadow:none}
  .cm-rooms,.cm-room{grid-area:1/1}
  .cm-rooms{border-right:0}
  #pg-community[data-view="rooms"] .cm-room{display:none}
  #pg-community[data-view="room"] .cm-rooms{display:none}
  #pg-community[data-view="room"] .cm-room{animation:cm-room-in var(--dur-page) var(--ease-out) both}
  @keyframes cm-room-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
  .cm-head .cm-back{display:inline-flex}
  .cm-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:6px;height:auto;min-height:56px;padding:6px 4px 6px 6px}
  .cm-head .cm-back{grid-row:1/3}
  .cm-head-main{grid-column:2;grid-row:1}
  .cm-head-name{font-size:16px}
  .cm-head-desc{display:none}
  .cm-head-side{grid-column:2;grid-row:2;font-size:11.5px;gap:6px;margin-top:1px}
  .cm-head-act{grid-column:3;grid-row:1/3}
  .cm-feed{padding:8px 12px 6px}
  .cmv2-msg{margin:0 -6px;padding:5px 6px}
  .cmv2-msg-actions{display:none}
  .cmv2-msg.long-pressed .cmv2-msg-actions{display:flex;position:absolute;top:auto;bottom:calc(100% - 6px);right:6px}
  .cm-compose{padding:6px 12px 10px}
  .cm-input{font-size:16px}
  .cm-hint{display:none}
  .cm-legal-long{display:none}
  .cm-legal-short{display:inline}
  .cm-rooms-foot{display:flex}
  .cm-sheet{max-width:calc(100vw - 24px);max-height:calc(100svh - 90px)}
  /* Online now as one line: the heading, then the discs */
  .cm-online-list{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:10px 14px}
  .cm-online-list .cm-group{padding:0;margin-right:4px}
  .cm-online-row{width:auto;height:24px;padding:0;gap:0;border-radius:50%}
  .cm-online-name{display:none}
  .cm-online-more{padding:0;font-size:11px}
  .cm-pp-strip{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .cm-pp-stat:nth-child(odd){padding-left:0;border-left:0}
}
@media(max-width:640px){.cm-page{height:calc(100dvh - 122px - max(0px,env(safe-area-inset-bottom)));margin:0 -10px -30px}.cm-ph{margin:0 10px}}
@media(prefers-reduced-motion:reduce){
  .cm-live-dot,.cmv2-msg.cm-flash,.cmv2-rx-chip-new,.cmv2-rx-chip-bump,.cmv2-swipe-ind.pop{animation:none}
  .cm-sheet,.cmv2-ctx-card,#pg-community[data-view="room"] .cm-room{animation-duration:1ms}
  .cm-jump{transition:opacity 1ms}
}

/* ── Share card: the record as an image, chosen and previewed in a sheet ──── */
.sh-sheet{max-width:900px;max-height:min(88vh,calc(100svh - 40px))}
.sh-head{min-width:0}
.sh-sub{display:block;font-size:12px;font-weight:400;color:var(--text-tertiary);margin-top:3px}
.sh-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:16px 20px 8px;overflow-y:auto}
.sh-ctl{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.sh-lbl{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
.sh-ctl .seg{width:100%}
.sh-ctl .seg-btn{padding:0 10px}
.sh-ctl-checks{flex-direction:row;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.sh-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);cursor:pointer}
.sh-check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1px solid var(--border-strong);border-radius:4px;background:var(--bg-surface);cursor:pointer;position:relative;flex:none;transition:background-color var(--dur-toggle) var(--ease-standard),border-color var(--dur-toggle) var(--ease-standard)}
.sh-check input:checked{background:var(--accent);border-color:var(--accent)}
.sh-check input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sh-check input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sh-stage{display:flex;flex-direction:column;align-items:center}
.sh-preview{max-width:100%;max-height:560px;aspect-ratio:9/16;border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;background:var(--bg-base)}
.sh-preview canvas{display:block;width:100%;height:100%}
.sh-dims{margin-top:8px;font-family:var(--font-num);font-size:11px;letter-spacing:.04em;color:var(--text-tertiary);text-align:center}
.sh-actions{flex:none;display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border)}
.sh-actions .btn[hidden]{display:none}
@media(max-width:759px){
  .sh-sheet{max-height:calc(100svh - 24px)}
  .sh-body{grid-template-columns:minmax(0,1fr);gap:14px}
  .sh-stage{order:-1}
  .sh-preview{max-height:320px}
  .sh-actions{flex-wrap:wrap}
  .sh-actions .btn{flex:1 1 40%}
  .sh-actions .btn-p{flex-basis:100%;order:-1}
}

/* ── Add to Home Screen banner (iOS) ───────────────────────────────────── */
#a2hs-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:8900;background:var(--bg-elevated);border-top:1px solid var(--border-strong);padding:14px 16px 20px;box-shadow:0 -8px 32px rgba(0,0,0,.4)}
#a2hs-banner.show{display:flex;gap:var(--sp-3);align-items:flex-start}
.a2hs-icon{width:44px;height:44px;border-radius:var(--r);flex-shrink:0;object-fit:cover}
.a2hs-body{flex:1;min-width:0}
.a2hs-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:3px}
.a2hs-sub{font-size:12px;color:var(--text-secondary);line-height:1.5}
.a2hs-sub svg{display:inline;vertical-align:middle;margin:0 2px}
.a2hs-dismiss{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:20px;line-height:1;padding:0;flex-shrink:0;margin-top:-2px}
.a2hs-dismiss:hover{color:var(--text-secondary)}

/* ── Help Chatbot ───────────────────────────────────────────────────────── */
#help-btn{display:none;position:fixed;bottom:24px;right:24px;z-index:8800;width:48px;height:48px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.35);align-items:center;justify-content:center;transition:transform var(--dur-fast),box-shadow var(--dur-fast);color:var(--on-accent)}
@media(max-width:768px){#help-btn{display:none!important}#help-panel{bottom:94px;left:50%;right:auto;transform:translateX(-50%);width:calc(100vw - 32px);height:480px}}

/* ── Prop Firm Mode ─────────────────────────────────────────────────────── */
.pf-fields{padding-top:12px;border-top:1px solid var(--border-subtle);margin-bottom:14px}
.pf-inp-lbl{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;display:block;margin-bottom:5px;font-family:var(--font-num)}
.pf-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.pf-header-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:12px;flex-wrap:wrap}
.pf-phase-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-card);background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border)}
.pf-status{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;padding:2px 9px;border-radius:var(--r-card);font-family:var(--font-num)}
.pf-status.pass{background:var(--win-dim);color:var(--win);border:1px solid var(--win-border)}
.pf-status.breach{background:var(--loss-dim);color:var(--loss);border:1px solid var(--loss-border)}
.pf-status.risk{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-border)}
.pf-status.active{background:rgba(168,180,198,.08);color:var(--text-secondary);border:1px solid var(--border-subtle)}
.pf-meter-row{margin-bottom:9px}
.pf-meter-top{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}
.pf-meter-name{color:var(--text-secondary)}
.pf-meter-val{font-weight:600;color:var(--text-primary)}
.pf-track{height:5px;background:var(--bg-hover);border-radius:4px;overflow:hidden}
.pf-bar{height:100%;width:100%;border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.pf-forecast{margin-top:11px;padding-top:10px;border-top:1px solid var(--border-subtle);font-size:11px;line-height:1.5;color:var(--text-secondary)}
.pf-forecast b{color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums}
.pf-forecast.pass{color:var(--win)}
.pf-forecast.breach{color:var(--loss)}
.pf-forecast.off{color:var(--text-tertiary)}
.pf-forecast.risk{color:var(--amber)}
.pf-tpl{padding-bottom:12px;margin-bottom:2px;border-bottom:1px solid var(--border-subtle)}
.pf-tpl-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:6px}
.pf-tpl-chip{font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:5px 12px;cursor:pointer;transition:color .16s ease,border-color .16s ease,background .16s ease,transform .12s ease}
.pf-tpl-chip:hover{color:var(--text-primary);border-color:var(--accent)}
.pf-tpl-chip:active{transform:scale(.96)}
.pf-tpl-chip.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.pf-tpl-note{font-size:11px;line-height:1.5;color:var(--text-tertiary);margin-top:8px}
@keyframes pfFill{0%{background:var(--accent-dim)}100%{background:transparent}}
.pf-fill-flash{animation:pfFill .7s ease-out}
@media (prefers-reduced-motion:reduce){.pf-fill-flash{animation:none}.pf-tpl-chip{transition:none}}
#help-btn.visible{display:flex}
#help-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,0,0,.35)}
#help-btn svg{width:22px;height:22px}
#help-panel{display:none;position:fixed;bottom:84px;right:24px;z-index:8800;width:360px;height:480px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);box-shadow:0 16px 64px rgba(0,0,0,.6);flex-direction:column;overflow:hidden}
#help-panel.open{display:flex}
/* ── Mobile expandable FAB ─────────────────────────────────────────────────── */
/* ── Mobile bottom tab bar — the rail's section model, thumb-first ────────
   Five slots: Home and Log are one tap; Journal / Social / You open the
   navpanel as a bottom sheet. Shown only ≤768px. */
#mobtab{display:none;position:fixed;left:0;right:0;bottom:0;z-index:140;
  padding:0 6px max(4px,env(safe-area-inset-bottom));
  background:rgba(13,20,32,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border);align-items:stretch;justify-content:space-around}
:root[data-theme="light"] #mobtab{background:rgba(230,238,245,.95)}
.mt-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;color:var(--text-tertiary);font-family:inherit;font-size:11px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;padding:8px 0 10px;min-height:56px;transition:color var(--dur-press) var(--ease-standard)}
.mt-btn svg{width:22px;height:22px;transition:transform var(--dur-press) var(--ease-out)}
.mt-btn.active{color:var(--accent)}
/* A tab gives under the thumb; the lit tab takes the line's colour (150ms) and the line above it slides
   there from the last one (180ms). */
.mt-btn:active{color:var(--text-primary)}
.mt-btn.active:active{color:var(--accent)}
.mt-btn:active svg{transform:translateY(1px)}
.mt-ind{position:absolute;top:-1px;left:0;width:22px;height:2px;border-radius:2px;background:var(--accent);opacity:0;pointer-events:none;transform:translateX(var(--mt-x,0px));transition:transform var(--dur-toggle) var(--ease-standard),opacity var(--dur-press) var(--ease-standard)}
.mt-ind.now{transition:opacity var(--dur-press) var(--ease-standard)}
#mobtab.has-ind .mt-ind{opacity:1}
.mt-cta{flex:0 0 64px;display:flex;align-items:flex-start;justify-content:center;background:none;border:none;cursor:pointer;padding:0}
.mt-cta-circle{position:relative;width:50px;height:50px;border-radius:50%;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.35);margin-top:-16px;border:4px solid var(--bg-base);transition:transform var(--dur-fast) var(--ease-out)}
/* The tab bar's + keeps the rail's states: a fill step on hover (where there
   is one), .96 and a deeper step while pressed, back in 150ms. */
.mt-cta-circle::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bg-base);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out)}
@media(hover:hover){.mt-cta:hover .mt-cta-circle::after{opacity:.08}}
.mt-cta:active .mt-cta-circle{transform:scale(.96);transition-duration:.1s}
.mt-cta:active .mt-cta-circle::after{opacity:.16;transition-duration:.1s}
@media(prefers-reduced-motion:reduce){.mt-cta:active .mt-cta-circle{transform:none}}
.mt-cta-circle svg{width:24px;height:24px}
/* Sheet grab handle, mobile only (activated in the 768 block) */
#navpanel::before{content:"";display:none;width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:2px auto 8px;flex-shrink:0}

#mob-fab{display:none;position:fixed;bottom:24px;right:20px;z-index:8850;flex-direction:column;align-items:flex-end;gap:14px}
/* FAB retired: the tab bar centre CTA is the mobile Log entry now */
#mob-fab.fab-hidden{display:none!important}
#mob-fab-toggle{width:54px;height:54px;border-radius:50%;background:var(--accent-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.35);border:none;color:var(--on-accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .22s var(--ease-spring);flex-shrink:0}
#mob-fab-toggle:active{transform:scale(.93)!important}
#mob-fab.open #mob-fab-toggle{transform:rotate(45deg)}
.mob-fab-item{display:flex;align-items:center;gap:var(--sp-2-5);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease}
.mob-fab-item.mob-show{opacity:1;pointer-events:auto;transform:translateY(0)}
.mob-fab-label{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--rm);padding:5px 12px;font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.mob-fab-sub{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;transition:transform var(--dur-fast),box-shadow var(--dur-fast)}
.mob-fab-sub:active{transform:scale(.9)}
#mob-fab-help-btn{background:var(--accent-grad);box-shadow:0 1px 0 rgba(0,0,0,.35),0 3px 10px rgba(0,0,0,.35)}
#mob-fab-guide-btn{background:var(--accent-grad);box-shadow:0 1px 0 rgba(0,0,0,.35),0 3px 10px rgba(0,0,0,.35)}

/* ── App Guide ─────────────────────────────────────────────────────────── */
#app-guide{display:none;position:fixed;inset:0;z-index:9700;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
#app-guide.show{display:flex}
.gd-card{width:100%;max-width:880px;height:min(660px,calc(100vh - 48px));background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);box-shadow:0 1px 0 var(--tint-1) inset,0 24px 60px -12px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;animation:cmdk-in .18s var(--ease-out)}
.gd-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.gd-head-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;white-space:nowrap}
.gd-search{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rm);padding:7px 10px}
.gd-search svg{width:13px;height:13px;color:var(--text-tertiary);flex-shrink:0}
.gd-search input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:var(--font-body);font-size:13px;min-width:0}
.gd-search input::placeholder{color:var(--text-tertiary)}
.gd-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:22px;line-height:1;padding:2px 8px;border-radius:var(--rs)}
.gd-close:hover{color:var(--text-primary)}
.gd-body{flex:1;display:flex;min-height:0}
.gd-nav{width:230px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:10px}
.gd-nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--rm);font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.gd-nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:.75}
.gd-nav-item:hover{color:var(--text-primary)}
.gd-nav-item.on{background:var(--accent-dim);color:var(--text-primary)}
.gd-content{flex:1;overflow-y:auto;padding:24px 28px}
.gd-content h2{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;margin:0 0 12px}
.gd-content p{font-size:13px;line-height:1.7;color:var(--text-secondary);margin:0 0 12px}
.gd-content strong{color:var(--text-primary);font-weight:600}
.gd-tip{display:flex;gap:9px;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r);padding:11px 13px;font-size:12px;line-height:1.6;color:var(--text-secondary);margin-top:14px}
.gd-tip b{color:var(--accent);font-weight:700;flex-shrink:0}
.gd-goto{display:inline-flex;align-items:center;gap:6px;margin-top:16px;height:32px;padding:0 14px;font-size:12px}
.gd-empty{padding:30px;text-align:center;color:var(--text-tertiary);font-size:13px}
/* App Guide as a full page (nav Guide entry) — same content, page-sized */
.gd-page-search{max-width:440px;margin:0 0 16px}
.gd-page-body{display:flex;min-height:360px;height:calc(100vh - 250px);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
@media(max-width:720px){.gd-page-body{flex-direction:column;height:auto}.gd-page-body .gd-nav{width:auto;display:flex;gap:4px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border)}.gd-page-body .gd-nav-item{flex-shrink:0}}
@media(max-width:760px){
  #app-guide{padding:0}
  .gd-card{height:100%;max-width:none;border-radius:0;border:none}
  .gd-head-title{display:none}
  .gd-body{flex-direction:column}
  .gd-nav{width:auto;display:flex;gap:4px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px 10px;flex-shrink:0}
  .gd-nav-item{flex-shrink:0}
  .gd-content{padding:18px 16px}
}

/* Contextual page-header help — a small ? that opens the guide at that page's section */
.pt-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:10px;vertical-align:2px;border-radius:50%;border:1px solid var(--border-strong);background:none;color:var(--text-tertiary);font-family:var(--font-body);font-size:11px;font-weight:700;line-height:1;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast);}
.pt-help:hover{color:var(--accent);border-color:var(--accent-border);}

/* Help menu popover (App Guide / Support chat) */
#help-menu{display:none;position:fixed;bottom:82px;right:24px;z-index:8900;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.5);padding:6px;min-width:200px}
#help-menu.show{display:block;animation:cmdk-in .16s var(--ease-out)}
.hm-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--rm);font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer}
.hm-item:hover{background:var(--accent-dim);color:var(--text-primary)}
.hm-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text-tertiary)}
.hm-item:hover svg{color:var(--accent)}
.wm-guide-link{display:block;width:100%;background:none;border:none;margin-top:12px;font-family:var(--font-body);font-size:12px;color:var(--text-tertiary);cursor:pointer;text-align:center}
.wm-guide-link:hover{color:var(--accent)}
#mob-fab-log-btn{background:var(--accent-grad);box-shadow:0 1px 0 rgba(0,0,0,.35),0 3px 10px rgba(0,0,0,.35)}
.hc-header{display:flex;align-items:center;gap:var(--sp-2-5);padding:14px 16px;border-bottom:1px solid var(--border-subtle);flex-shrink:0}
.hc-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hc-avatar svg{width:16px;height:16px;color:var(--on-accent)}
.hc-title{flex:1;font-size:14px;font-weight:700;color:var(--text-primary)}
.hc-sub{font-size:11px;color:var(--text-tertiary);margin-top:1px}
.hc-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px;border-radius:var(--rs);line-height:0}
.hc-close:hover{color:var(--text-secondary);background:var(--bg-hover)}
.hc-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:var(--sp-2-5);scroll-behavior:smooth}
.hc-messages::-webkit-scrollbar{width:4px}
.hc-messages::-webkit-scrollbar-track{background:transparent}
.hc-messages::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}
.hc-msg{max-width:85%;padding:9px 12px;border-radius:var(--r);font-size:13px;line-height:1.55;word-break:break-word}
.hc-msg.bot{align-self:flex-start;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
    .hc-p + .hc-p,.hc-li + .hc-p{margin-top:7px}
    .hc-li{display:flex;gap:8px;align-items:baseline;margin-top:5px}
    .hc-li-mark{flex-shrink:0;opacity:.55;font-variant-numeric:tabular-nums}
    .hc-msg.user .hc-li-mark{opacity:.75}
.hc-msg.user{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.hc-msg.typing{align-self:flex-start}
.hc-typing-dots{display:flex;gap:var(--sp-1);padding:4px 2px}
.hc-typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);animation:hcDot .9s infinite}
.hc-typing-dots span:nth-child(2){animation-delay:.2s}
.hc-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes hcDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.hc-footer{padding:10px 12px;border-top:1px solid var(--border-subtle);display:flex;gap:var(--sp-2);flex-shrink:0;align-items:flex-end}
#hc-input{flex:1;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r);padding:8px 12px;font-size:13px;color:var(--text-primary);resize:none;max-height:96px;line-height:1.5;font-family:inherit;outline:none}
#hc-input:focus{border-color:var(--accent)}
#hc-input::placeholder{color:var(--text-tertiary)}
#hc-send{width:36px;height:36px;border-radius:var(--rm);background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity var(--dur-fast)}
#hc-send:disabled{opacity:.4;cursor:default}
#hc-send svg{width:16px;height:16px;color:var(--on-accent)}
/* ── Keyboard focus (WCAG 2.4.7) — one ring for every interactive element ── */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:inherit}
.fi:focus-visible,.fs:focus-visible,.ft:focus-visible,.acct-inp:focus-visible,.af2-search:focus-visible,.af2-qp-input:focus-visible,.dta-confirm-input:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ══ Roadmap — member feature requests, public backing, visible loop ══
   Tokens only, so both themes come from the existing layers. Status is
   encoded twice (chip + 3px left edge) matching the trade-log edge idiom. */
.rd-head-cta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.rd-sub-count{font-size:var(--fs-sm);color:var(--text-tertiary)}
.rd-tabs{display:flex;gap:4px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:3px;margin:var(--sp-4) 0 var(--sp-4);overflow-x:auto;max-width:max-content}
.rd-tab{flex:none;font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text-tertiary);background:none;border:none;border-radius:var(--rm);padding:7px 13px;cursor:pointer;white-space:nowrap;transition:color var(--dur-fast),background var(--dur-fast)}
.rd-tab:hover{color:var(--text-secondary)}
.rd-tab.on{color:var(--text-primary);background:var(--bg-elevated);box-shadow:var(--el-1)}
.rd-tab .n{font-weight:500;color:var(--text-tertiary);margin-left:5px;font-variant-numeric:tabular-nums}
/* The 860px caps are gone: the column itself is now the constraint, so the
   board fills its side of the split instead of hugging the left of the page. */
.rd-list{display:flex;flex-direction:column;gap:var(--sp-2-5)}
.rd-main{min-width:0}
.rd-aside{position:sticky;top:var(--sp-4);align-self:start}
@media(max-width:900px){.rd-aside{position:static}}

/* Supporting panels. Deliberately quieter than the board: smaller type, no
   hero number, accent reserved for the count so green/red stay money-only. */
.rd-panel{padding:16px 18px}
.rd-panel-h{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.rd-panel-t{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.rd-panel-sub{font-size:11px;color:var(--text-tertiary);margin-left:auto;white-space:nowrap}
.rd-mb-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;
           background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;font-family:inherit}
.rd-mb-row:last-child{border-bottom:none}
.rd-mb-row:hover .rd-mb-t{color:var(--accent)}
.rd-mb-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--rs)}
.rd-mb-rank{flex:none;width:18px;font-size:11px;font-weight:700;color:var(--text-tertiary);
            font-variant-numeric:tabular-nums;padding-top:1px}
.rd-mb-b{flex:1;min-width:0}
.rd-mb-t{font-size:12.5px;font-weight:600;color:var(--text-secondary);line-height:1.4;transition:color .15s}
.rd-mb-n{flex:none;font-size:11px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:1px}
.rd-up-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.rd-up-row:last-child{border-bottom:none}
.rd-up-dot{flex:none;width:6px;height:6px;border-radius:50%}
.rd-up-dot.planned{background:var(--text-tertiary)}
.rd-up-dot.building{background:var(--accent)}
.rd-up-t{flex:1;min-width:0;font-size:12.5px;color:var(--text-secondary);line-height:1.4}
.rd-up-s{flex:none;font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--font-num)}
.rd-panel-empty{font-size:11.5px;color:var(--text-tertiary);line-height:1.5;padding:4px 0 2px}
/* Highlight the card a side-panel row points at, so the jump is legible. */
@keyframes rd-flash{0%{box-shadow:0 0 0 0 var(--accent-border)}35%{box-shadow:0 0 0 3px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 0 transparent}}
.rd-flash{animation:rd-flash 1.1s var(--ease-out)}
@media(prefers-reduced-motion:reduce){.rd-flash{animation:none;outline:2px solid var(--accent);outline-offset:2px}}
.rd-card{display:flex;gap:var(--sp-4);align-items:flex-start;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-4) var(--sp-5);box-shadow:inset 2px 0 0 var(--rd-edge,transparent)}
.rd-card[data-st="planned"]{--rd-edge:var(--accent)}
.rd-card[data-st="building"]{--rd-edge:var(--accent)}
.rd-card[data-st="shipped"]{--rd-edge:var(--win)}
.rd-card[data-st="declined"]{opacity:.75}
.rd-back{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:8px 6px 7px;cursor:pointer;font-family:inherit;color:var(--text-secondary);transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.rd-back:hover{border-color:var(--accent-border);color:var(--accent)}
.rd-back:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}
.rd-back .rn{font-size:var(--fs-lg);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.rd-back .rl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;font-family:var(--font-num)}
.rd-back.on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.rd-back.on .rn{color:var(--accent)}
.rd-back:disabled{cursor:default;opacity:.85}
.rd-main{flex:1;min-width:0}
.rd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.rd-title{font-size:var(--fs-base);font-weight:600;color:var(--text-primary);line-height:1.4}
.rd-chip{flex:none;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:var(--rs);padding:3px 9px;border:1px solid var(--border-strong);color:var(--text-secondary);background:var(--bg-surface);white-space:nowrap}
.rd-chip.planned{color:var(--accent);background:var(--accent-dim);border-color:var(--accent-border)}
.rd-chip.building{color:var(--accent);background:var(--accent-dim);border-color:var(--accent-border)}
.rd-chip.shipped{color:var(--win);background:var(--win-dim);border-color:var(--win)}
.rd-chip.declined{color:var(--text-tertiary);border-style:dashed}
.rd-detail{font-size:var(--fs-md);color:var(--text-secondary);line-height:1.55;margin-top:5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.rd-meta{display:flex;align-items:center;gap:8px;margin-top:var(--sp-2-5);font-size:var(--fs-sm);color:var(--text-tertiary);flex-wrap:wrap}
.rd-meta .rd-name{color:var(--text-secondary);font-weight:500}
.rd-founding{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--rs);padding:1px 7px;font-family:var(--font-num)}
.rd-dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong)}
.rd-del{background:none;border:none;color:var(--text-tertiary);font-size:var(--fs-sm);cursor:pointer;padding:0;font-family:inherit;text-decoration:underline;text-underline-offset:2px}
.rd-del:hover{color:var(--loss)}
.rd-note{display:flex;gap:9px;margin-top:var(--sp-2-5);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r);padding:9px 12px;font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.5}
.rd-note b{color:var(--text-primary);font-weight:600;flex:none}
/* composer — expands under the header, never a bare box sitting on the page */
.rd-composer{display:none;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-card);padding:var(--sp-5);margin-bottom:var(--sp-4);box-shadow:inset 0 1px 0 var(--hi)}
.rd-composer.open{display:block}
.rd-kinds{display:flex;gap:6px;margin-bottom:var(--sp-3)}
.rd-kind{font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text-tertiary);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:5px 13px;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.rd-kind.on{color:var(--text-primary);background:var(--accent-dim);border-color:var(--accent-border)}
.rd-count{font-size:var(--fs-xs);color:var(--text-tertiary);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}
.pdiag{margin-top:var(--sp-3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.pdiag-l{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;font-size:13px;line-height:1.5;border-bottom:1px solid var(--border)}
.pdiag-l:last-child{border-bottom:none}
.pdiag-i{flex-shrink:0;width:16px;text-align:center;font-size:12px;line-height:1.45}
.pdiag-l.ok   .pdiag-i{color:var(--win)}
.pdiag-l.bad  .pdiag-i{color:var(--loss)}
.pdiag-l.wait .pdiag-i{color:var(--text-tertiary)}
.pdiag-t{flex:1;min-width:0;color:var(--text-secondary)}
.pdiag-t b{color:var(--text-primary);font-weight:600;display:block;margin-bottom:1px}
.rd-dupes{display:none;margin-top:var(--sp-2)}
.rd-dupes.on{display:block}
.rd-dupes-h{font-size:var(--fs-xs);font-weight:600;color:var(--text-tertiary);margin-bottom:6px}
.rd-dupe{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-surface);margin-bottom:6px;font-size:13px}
.rd-dupe-t{flex:1;min-width:0;color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-dupe-n{font-size:var(--fs-xs);color:var(--text-tertiary);white-space:nowrap}
.rd-dupe-b{flex-shrink:0;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--rs);border:1px solid var(--border-strong);background:none;color:var(--text-secondary);cursor:pointer}
.rd-dupe-b:hover{border-color:var(--accent);color:var(--accent)}
.rd-dupe-b.on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.rd-count.over{color:var(--loss)}
.rd-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.rd-as{font-size:var(--fs-xs);color:var(--text-tertiary)}
.rd-empty{text-align:center;color:var(--text-tertiary);font-size:var(--fs-base);border:1px dashed var(--border-strong);border-radius:var(--r-card);padding:40px var(--sp-5)}
.rd-empty b{color:var(--text-secondary);font-weight:600}
/* admin controls — visible to admins only, quiet by design */
.rd-adm{display:flex;align-items:center;gap:8px;margin-top:var(--sp-2-5);padding-top:var(--sp-2-5);border-top:1px dashed var(--border);flex-wrap:wrap}
.rd-adm-lbl{font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--font-num)}
.rd-adm select{font-family:inherit;font-size:var(--fs-sm);color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--rm);padding:5px 8px}
.rd-adm input{flex:1;min-width:140px;font-family:inherit;font-size:var(--fs-sm);color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--rm);padding:5px 9px}
.rd-adm .btn{height:28px;font-size:var(--fs-xs);padding:0 12px}
.rd-adm-remove{background:none;border:none;font-family:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--text-tertiary);cursor:pointer;padding:0 4px;text-decoration:underline;text-underline-offset:2px}
.rd-adm-remove:hover{color:var(--loss)}
.rd-adm-remove:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:4px}
@media(max-width:600px){
  .rd-card{padding:var(--sp-3) var(--sp-4);gap:var(--sp-3)}
  .rd-back{min-width:46px}
  .rd-top{flex-direction:column-reverse;gap:6px}
}

/* ── Numerals. The face the numbers wear: DM Mono at 500, never bold. A
   jeweller, not a scoreboard. Same specificity as the rules they override,
   placed last so order decides. ─────────────────────────────────────── */
.wr-hb-val,.wr-hb-sval,.kv,.dp-kpi-val,.dash-kpi-hero .dp-kpi-val,.dp-kpi-val.sm,.itc-val,.ins-verdict-cost,.ins-vp-val,.dash-cal-hpnl,.ins-stat .st-val,.ins-donut .dc b,.stv,.cal-kpi-val,.acov-bal-val,.acov-kpi-val,.acov-hero-val,.pb-an-tile-val,.pbd-hero-val,.wr-kpi-val,.wr-kpi-hero .wr-kpi-val,.rh-sum-val,.rhc-sval,.aff-tr-big,.partner-stat-val,.aff-hero-val,.mod-hero-val,.admin-kpi-val,.adm-ov-lead .admin-kpi-val,.admin-hero-val,.admin-rev-val,.growth-head-val,.conv-step-val,.lb-pod-score,.lb-pod.p1 .lb-pod-score{font-family:var(--font-num);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stt-kbd,.partner-code{font-family:var(--font-num)}
/* ── Primitives, applied once. Tabs are underlines, never pills. Chips are cut
   square and neutral. Toasts are a line with a bar. The lockup's sub-line is
   set in the numeral face. Placed last so order decides. ───────────────── */
.ins-tabs,.tl-subtabs,.pb-tabs,.lb-tabs,.rd-tabs{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0;gap:2px;max-width:none;box-shadow:none}
.ins-tab,.tl-subtab,.pb-tab,.lb-tab,.rd-tab,.modg-tab{flex:none;height:auto;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;padding:9px 14px;color:var(--text-tertiary);font-size:12.5px;font-weight:600;letter-spacing:.01em;box-shadow:none}
.ins-tab.on,.tl-subtab.on,.pb-tab.on,.lb-tab.on,.rd-tab.on,.modg-tab.on,.modv-tab.on,.legal-tab.on,.adm-tab.on,.aff-tab-btn.on{background:transparent;color:var(--text-primary);border-color:transparent;border-bottom-color:var(--accent);box-shadow:none}
.ins-tab:hover,.tl-subtab:hover:not(.on),.pb-tab:hover,.lb-tab:hover,.rd-tab:hover,.modg-tab:hover,.modv-tab:hover,.adm-tab:hover,.aff-tab-btn:hover{color:var(--text-primary);background:transparent}
.chip-n{display:inline-block;font-family:var(--font-num);font-size:11px;font-weight:500;letter-spacing:.06em;padding:2px 7px;border-radius:var(--rs);border:1px solid var(--border-strong);background:var(--tint-1);color:var(--text-primary);line-height:1.4}
.inst-badge{font-family:var(--font-num);font-weight:500;letter-spacing:.04em;background:var(--tint-1)}
.pill{border-radius:var(--rs)}
#toast{border-left-width:1px;border-radius:var(--rs)}
#toast.terr{border-left-color:var(--loss)}
.toast-check{display:none}
#topbar #logo .logo-wm>span{font-family:var(--font-num);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
/* The session strip. The rotating motto ("Reset and reload, Trader") took the
   hero slot and set a coaching tone; the date, the session and the day's
   summary carry the header now. */
#dash-welcome{display:none!important}
#pg-daily .dash-top-left .pt{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.005em}
#pg-daily #prog-date{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--text-primary);letter-spacing:-.005em;margin-top:2px}
/* The session summary is a sentence, not a serial number. */
#pg-daily .stl-summary{font-size:13px;color:var(--text-secondary);margin-top:8px}
#pg-daily .stl-summary b{color:var(--text-primary);font-weight:500}
/* The Edge Score as a sub-dial: a thin ring on a tick track, the numeral in ink. */
#ps-svg,#es-svg,.sg-dial{overflow:visible}
#ps-svg .ps-track,#es-svg .ps-track,.sg-dial .ps-track{stroke:var(--tint-2);stroke-width:4}
#ps-svg .ps-ticks,#es-svg .ps-ticks,.sg-dial .ps-ticks{stroke:var(--border-strong)}
/* The dial face: inset, with a hairline edge. No metal ring — on this dial the
   blue arc is the instrument's edge already; the metal stays on the reserve
   gauge, where it is the scale the needle reads against. */
.ps-face{fill:var(--dial-face);stroke:var(--border-strong);stroke-width:1}
#ps-svg #ps-score-txt,#es-svg #es-score-txt,.sg-dial .sg-dial-n{fill:var(--text-primary);font-family:var(--font-num);font-weight:500}
#ps-svg #ps-score-sub,#es-svg #es-score-sub,.sg-dial .sg-dial-s{fill:var(--text-tertiary);font-family:var(--font-num);letter-spacing:.08em}
.sig6{text-align:center;font-family:var(--font-num);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-tertiary);padding:36px 0 6px;user-select:none}
.sig6 b{font-weight:400;color:var(--text-secondary)}
/* ── The power reserve (daily-loss gauge) ── */
.pr-gauge{display:block;overflow:visible}
.pr-gauge .pr-tick{stroke:var(--border-strong);stroke-width:1}
.pr-gauge .pr-tick.major{stroke:var(--text-tertiary)}
.pr-gauge .pr-track{fill:none;stroke:var(--border-strong);stroke-width:1}
.pr-gauge .pr-red{fill:none;stroke:var(--loss);stroke-width:2;opacity:.8}
.pr-gauge .pr-needle{transform-box:view-box;transform-origin:60px 64px;transition:transform .3s var(--ease-out);animation:pr-sweep .5s var(--ease-out)}
.pr-gauge .pr-bezel{fill:none;stroke:var(--text-secondary);stroke-width:3.5;stroke-linecap:round}
.pr-gauge .pr-bezel-shade{fill:none;stroke:var(--lo);stroke-width:3.5;stroke-linecap:round}
.pr-gauge .pr-hand{stroke:var(--text-primary);stroke-width:2;stroke-linecap:round}
.pr-gauge .pr-tail{stroke:var(--text-primary);stroke-width:3;stroke-linecap:round;opacity:.7}
.pr-gauge .pr-cap{fill:url(#stj-metal);stroke:var(--lo);stroke-width:1}
@keyframes pr-sweep{from{transform:rotate(-75deg)}}
@media(prefers-reduced-motion:reduce){.pr-gauge .pr-needle{transition:none;animation:none}}
.pr-row{display:flex;align-items:center;gap:14px}
#pg-daily[data-now="breach"] #dash-reserve .pr-row,#pg-daily[data-now="risk"] #dash-reserve .pr-row{justify-content:center;gap:40px;padding:22px 0 10px}
#pg-daily[data-now="breach"] #dash-reserve .pr-val,#pg-daily[data-now="risk"] #dash-reserve .pr-val{font-size:34px}
#pg-daily[data-now="breach"] #dash-reserve .pr-sub,#pg-daily[data-now="risk"] #dash-reserve .pr-sub{font-size:13px}
.pr-host{flex:none;line-height:0}
.pr-figs{min-width:0}
.pr-val{font-family:var(--font-num);font-size:20px;font-weight:500;color:var(--text-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pr-sub{font-size:12.5px;color:var(--text-secondary);margin-top:3px;line-height:1.4}
.pf-reserve .pr-row{margin-top:2px}
/* On the dashboard the reserve is a figure among the figures: the dial at
   150, the reading at the hero's weight. */
#dash-reserve .pr-row{flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-top:0}
#dash-reserve .pr-figs{text-align:center}
#dash-reserve .pr-val{font-size:24px;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
#dash-reserve .pr-sub{font-size:12.5px;margin-top:4px}
/* ── Style guide (admin) ── */
.sg-sec{margin-bottom:28px}
.sg-h{font-family:var(--font-num);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sg-h span{color:var(--text-tertiary);letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:12px}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sg-sw{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg-surface)}
.sg-sw i{display:block;height:44px;border-bottom:1px solid var(--border)}
.sg-sw b{display:block;font-size:12px;font-weight:600;color:var(--text-primary);padding:7px 9px 1px}
.sg-sw small{display:block;font-family:var(--font-num);font-size:11px;color:var(--text-tertiary);padding:0 9px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sg-col{display:flex;flex-direction:column;gap:14px}
.sg-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.sg-two{grid-template-columns:1fr}}
.sg-type-h{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);line-height:1.15}
.sg-type-s{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--text-primary);line-height:1.45}
.sg-type-b{font-size:13px;color:var(--text-secondary);line-height:1.6;max-width:60ch}
.sg-eb{font-family:var(--font-num);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
.sg-num{font-family:var(--font-num);font-weight:500;font-size:28px;letter-spacing:-.01em;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.sg-num.up{color:var(--win)}.sg-num.down{color:var(--loss)}
.sg-scale{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline}
.sg-scale span{font-family:var(--font-num);color:var(--text-secondary)}
.sg-lbl{font-size:11px;color:var(--text-tertiary);margin-top:6px}
.sg-law{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:14px}
.sg-law b{font-family:var(--font-num);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--text-primary);white-space:nowrap;padding-top:2px}
.sg-toast{display:inline-flex;align-items:center;gap:8px;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--rs);padding:10px 14px;font-size:13px;box-shadow:var(--el-2)}
.sg-well{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px}
.sg-rule{height:2px;width:180px;border-radius:1px;background:var(--metal-rule)}
.sg-row.sg-wide{gap:28px;align-items:flex-start}.sg-hero-sm{font-size:44px}
.sg-nav-demo{width:170px}.sg-nav-demo .nav-sub{animation:none}
.sg-states .fi{width:180px}
.sg-lint{font-family:var(--font-num);font-size:11.5px;line-height:1.55;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px;white-space:pre-wrap}
/* Reviews: This Week / History was the last segmented pill; tabs underline. */
.rev-seg{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0;gap:0}
.rev-seg-btn{border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 14px;color:var(--text-tertiary);font-size:12.5px}
.rev-seg-btn.on{background:transparent;box-shadow:none;color:var(--text-primary);border-bottom-color:var(--accent)}
.rev-seg-btn:active{transform:none}
/* ── Dashboard composition: a place, not a grid of tiles ──
   Named areas over the existing cards; the old row wrappers become
   display:contents so nothing in the renderers had to move. */
#pg-daily.on{display:grid}
#pg-daily{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px;row-gap:0;align-items:stretch;
  grid-template-areas:"head head head head" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "expect expect reserve edge" "curve curve curve side" "cal cal plan today" "ach ach streak streak"}
#pg-daily > .dash-r1,#pg-daily > .dash-r2,#pg-daily .dash-r2 > .dash-r2-side,#pg-daily > .dash-r3{display:contents}
#pg-daily > .dash-top-row{grid-area:head;margin:0 0 18px}
#pg-daily .dash-top-left{width:auto;flex:1}
#pg-daily .dash-top-spacer{display:none}
#dash-asset-filter{grid-area:filter;justify-self:end;align-self:start;margin:4px 0 0;flex-wrap:nowrap;white-space:nowrap}
#dash-prop-alert{grid-area:alert}#ob-checklist{grid-area:ob}#dash-empty-state{grid-area:empty}
#dash-expect{grid-area:expect}#dash-reserve{grid-area:reserve}#dash-profit-card{grid-area:edge}
#dash-curve-card{grid-area:curve}#dash-side{grid-area:side}
#dash-cal-card{grid-area:cal}#cd-bias{grid-area:plan}#dp-today-card{grid-area:today}#dash-badges-card{grid-area:ach}#dash-streak-card{grid-area:streak}
#pg-daily > .card,#pg-daily > .cc,#pg-daily .dash-r1 > .card,#pg-daily .dash-r2 > .card,#pg-daily .dash-r2-side > .card,#pg-daily .dash-r2-side > #dash-kpi-row,#pg-daily .dash-r3 > .card,#dash-side,#dash-empty-state,#dash-prop-alert,#ob-checklist{margin:0 0 14px!important}
.dash-plan-line{font-size:13px;color:var(--text-secondary);margin-top:10px;line-height:1.4}
.dash-plan-line:empty{display:none}
.dash-plan-line b{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--metal-ink);margin-right:8px;font-weight:400}
/* The figures */
.dash-fig{padding:18px 20px;display:flex;flex-direction:column;gap:3px;min-width:0}
/* The one eyebrow: 11px DM Mono, tracked, never bold. */
.dash-fig-eb{font-family:var(--font-num);font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.dash-fig-eb span{letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:12px;color:var(--text-tertiary)}
.dash-eb-link{letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--accent);cursor:pointer;margin-left:auto}
.dash-fig-v{font-family:var(--font-num);font-weight:500;font-size:26px;letter-spacing:-.01em;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.dash-fig-v.hero{font-size:clamp(44px,4.4vw,62px);font-weight:400;letter-spacing:-.03em;line-height:1;align-self:flex-start;position:relative;padding-bottom:14px;margin-top:6px}
.dash-fig-v.hero::after{content:"";position:absolute;left:2px;right:0;bottom:0;height:2px;border-radius:1px;background:var(--metal-rule);box-shadow:0 1px 0 rgba(0,0,0,.45);transform-origin:left}
.dash-fig-v.up{color:var(--win)}.dash-fig-v.down{color:var(--loss)}
.dash-fig-s{font-size:13px;color:var(--text-secondary);margin-top:8px}
.dash-fig-d{font-family:var(--font-num);font-size:12px;color:var(--text-tertiary);margin-top:3px}
.dash-fig-d.up{color:var(--win)}.dash-fig-d.down{color:var(--loss)}
.dash-fig-sel{font:inherit;font-size:12px;letter-spacing:0;text-transform:none;color:var(--text-secondary);background:transparent;border:none;border-bottom:1px solid var(--border-strong);padding:0 2px 1px;cursor:pointer;max-width:160px}
/* The prop-firm block in the add-account modal shows only in Prop Firm mode. */
.pf-fields{display:none}.pf-fields.on{display:block}
.pf-tg-sm{height:26px;width:80px}
/* In a breach or near a limit the hero steps down. (Expectancy's eight figures are a table that follows the card's width: Finish IV.) */
#pg-daily[data-now="breach"] .dash-fig-v.hero,#pg-daily[data-now="risk"] .dash-fig-v.hero{font-size:clamp(36px,3vw,44px)}
/* The head: an eyebrow and the date, the greeting in the serif beside it */
#pg-daily .dash-top-left .pt{font-family:var(--font-num);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);line-height:1.4}
#pg-daily #prog-date{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--text-primary);margin-top:6px}
/* Edge Score: a figure among the figures, not the hero */
#pg-daily #dash-profit-card{border-color:var(--border)!important;box-shadow:inset 0 1px 0 var(--hi)}
#pg-daily #dash-profit-card::before{content:none}
#pg-daily #dash-profit-card .es-right{display:none}
#pg-daily #dash-profit-card .es-inner{gap:0;justify-content:center;height:100%}
#pg-daily #dash-profit-card #ps-svg{width:116px;height:116px}
/* Without the reserve the Edge panel is wide enough to show what drives it. */
#pg-daily.no-reserve #dash-profit-card .es-right{display:block}
#pg-daily.no-reserve #dash-profit-card .es-inner{gap:28px;justify-content:flex-start}
/* Beside the curve */
#dash-side{display:flex;flex-direction:column;gap:14px;min-width:0}
#dash-side>#dash-review{flex:1 1 auto;min-height:0}
#dash-side>#dash-sentence{flex:0 0 auto}
.dash-sent{font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.38;color:var(--text-primary);letter-spacing:-.012em}
/* Tiers are words. The chip is the same neutral square whatever the metal. */
.lb-tier,.lb-tier.stone,.lb-tier.iron,.lb-tier.bronze,.lb-tier.silver,.lb-tier.gold,.lb-tier.platinum,.lb-tier.elite{background:var(--tint-1);color:var(--metal-ink);border:1px solid var(--border-strong);border-radius:var(--rs);font-family:var(--font-num);font-weight:500;letter-spacing:.06em}
@media(max-width:1180px){#pg-daily{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"head head" "filter filter" "alert alert" "ob ob" "empty empty" "expect expect" "reserve edge" "curve curve" "side side" "cal cal" "plan today" "ach streak"}#dash-asset-filter{justify-self:start;margin:0 0 20px}#dash-side{flex-direction:row}#dash-side > .cc{flex:1}}
@media(max-width:700px){#pg-daily{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "filter" "alert" "ob" "empty" "expect" "reserve" "edge" "curve" "side" "cal" "plan" "today" "ach" "streak"}#dash-side{flex-direction:column}}
/* No prop account with a daily loss rule: the figures row closes up. */
#pg-daily.no-reserve{grid-template-areas:"head head head head" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "expect expect edge edge" "curve curve curve side" "cal cal plan today" "ach ach streak streak"}
@media(max-width:1180px){#pg-daily.no-reserve{grid-template-areas:"head head" "filter filter" "alert alert" "ob ob" "empty empty" "expect expect" "edge edge" "curve curve" "side side" "cal cal" "plan today" "ach streak"}}
@media(max-width:700px){#pg-daily.no-reserve{grid-template-areas:"head" "filter" "alert" "ob" "empty" "expect" "edge" "curve" "side" "cal" "plan" "today" "ach" "streak"}}
/* ── Now: the situational surface ──
   The dashboard composes itself around the situation the engine detects
   (body[data-situation] → #pg-daily[data-now]). Each situation names the
   panels on the page, their order and width; everything else is off the page.
   One lit object per situation (.now-lead). Generated from the situation table
   in the build script; edit the table, not these lines. */
#dash-log{grid-area:log;margin:0 0 20px}
.dash-log-row{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:var(--r);background:var(--bg-surface);border:1px solid var(--border-strong);box-shadow:inset 0 1px 0 rgba(0,0,0,.25)}
.dash-log-row:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.dash-log-k{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
#dash-log-in{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text-primary);font-family:var(--font-num);font-size:14px;letter-spacing:.01em;text-overflow:ellipsis}
#dash-log-in::placeholder{color:var(--text-tertiary);text-overflow:ellipsis}
/* Phones keep the input at 16px (no zoom on focus); the placeholder alone steps down so the example fits whole */
@media(max-width:480px){#dash-log-in::placeholder{font-size:14px}}
.dash-log-hint{font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.dash-log-prev{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 4px 0;min-height:36px}
.dash-log-prev:empty{display:none}
/* The line under the logger opens on the height tween every opening thing
   uses (grid rows 0fr to 1fr, 180ms out; closing 130ms, easing in), so the
   page below rides it. The hint and a line of chips are one height (36px). */
.dash-log-pw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .13s cubic-bezier(.4,0,1,1)}
.dash-log-pw.open{grid-template-rows:1fr;transition:grid-template-rows .18s var(--ease-out)}
.dash-log-pclip{min-height:0;overflow:hidden}
.dash-log-pc{font-family:var(--font-num);font-size:12px;color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--rs);padding:3px 8px;background:var(--tint-1)}
.dash-log-pc.up{color:var(--win)}.dash-log-pc.dn{color:var(--loss)}.dash-log-pc.note{font-family:var(--font-body);color:var(--text-secondary)}.dash-log-pc.enter{border-color:var(--accent-border);color:var(--accent)}
#dash-log.off .dash-log-row{background:transparent;border-style:dashed}
#dash-log.off .dash-log-k,#dash-log.off .dash-log-hint,#dash-log.off #dash-log-in::placeholder{color:var(--text-tertiary)}
#dash-session{grid-area:session}#dash-streak3{grid-area:streak3}#dash-week{grid-area:week}#dash-month{grid-area:month}#dash-first{grid-area:first}
#dash-review{grid-area:review}#dash-sentence{grid-area:sentence}
#dash-session,#dash-streak3,#dash-week,#dash-month,#dash-first{display:none}
#pg-daily[data-now="between"] #dash-session,#pg-daily[data-now="streak"] #dash-streak3,#pg-daily[data-now="breach"] #dash-streak3,#pg-daily[data-now="week"] #dash-week,#pg-daily[data-now="month"] #dash-month,#pg-daily[data-now="first"] #dash-first{display:block}
#pg-daily[data-now="waiting"] #dash-side{display:contents}
.now-line{font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.38;letter-spacing:-.012em;color:var(--text-primary);margin-top:10px}
.now-line b{font-weight:600;font-variant-numeric:tabular-nums}
.now-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px 18px;margin-top:14px}
.now-kv .l{font-family:var(--font-num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
.now-kv .v{font-family:var(--font-num);font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.now-kv .v.up{color:var(--win)}.now-kv .v.down{color:var(--loss)}
.now-sub{font-size:13px;color:var(--text-secondary);margin-top:14px}
#pg-daily[data-now="between"] #stl-summary{display:none}
.dash-log-leg{font-size:12px;color:var(--text-tertiary);line-height:1.6}
.dash-log-leg b{font-family:var(--font-num);font-weight:500;color:var(--text-secondary)}
.fb-clear{align-self:flex-end;min-width:0}
.fb-clear .btn{height:32px;font-size:12px;padding:0 12px}
.fb-clear .btn[hidden]{display:none}
.st-note{font-size:11px;line-height:1.5;color:var(--si3);margin-top:10px}
.now-rules-eb{margin-top:18px}
.now-rules{display:grid;gap:7px;margin-top:8px}
.now-rule{position:relative;padding-left:16px;font-size:13px;line-height:1.45;color:var(--text-primary)}
.now-rule::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--text-tertiary)}
.now-rule.more{color:var(--text-tertiary)}
.now-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.now-three div{border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;background:var(--tint-1)}
.now-three b{font-family:var(--font-num);font-size:22px;font-weight:400;display:block;color:var(--loss)}
.now-three small{font-size:12px;color:var(--text-tertiary);display:block;margin-top:4px}
.now-teach{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.now-teach .t{border:1px solid var(--border-strong);border-radius:var(--r);padding:16px;background:var(--tint-1);cursor:pointer}
.now-teach .t:hover{border-color:var(--accent-border)}
.now-teach .t b{display:block;font-size:14px;color:var(--text-primary);margin-bottom:6px}
.now-teach .t span{font-size:12.5px;color:var(--text-secondary)}
.dash-today-streak{font-size:12.5px;color:var(--text-secondary);margin:0 0 8px}.dash-today-streak:empty{display:none}
#pg-daily .now-lead{border-color:var(--border-strong)!important;box-shadow:var(--el-hero)}
#pg-daily .now-lead .now-line{font-size:22px;line-height:1.3;max-width:52ch}
@media(min-width:1181px){
#pg-daily[data-now="between"] #dash-session{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:48px;align-content:start}
#pg-daily[data-now="between"] #dash-session>*{grid-column:1}
#pg-daily[data-now="between"] #dash-session>.now-rules-eb{grid-column:2;grid-row:1;margin-top:0}
#pg-daily[data-now="between"] #dash-session>.now-rules{grid-column:2;grid-row:2/span 3}
}
.now-rules .now-sub{margin-top:0}
#pg-daily[data-now="waiting"] #dash-review,#pg-daily[data-now="waiting"] #dash-sentence{margin-bottom:18px}
.rec-t-frame .lb{background:var(--bg-surface);padding:0 3px;border-radius:2px}
.rec-t-meta span{white-space:nowrap}
.cmp-fill .rec{display:none}
#pg-daily.alert-single[data-now="breach"] #dash-prop-alert,#pg-daily.alert-single[data-now="risk"] #dash-prop-alert{display:none!important}
.dr-acts{align-items:center;justify-content:space-between}.dr-acts[hidden]{display:none}
.dr-reset{font-size:13px;color:var(--text-secondary)}
@media(max-width:560px){.tb-sync{font-size:0;width:26px;padding:0;display:inline-flex;align-items:center;justify-content:center}.tb-sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-primary)}.tb-sync[hidden]{display:none}}
.pb-ai-sub{color:var(--text-secondary)!important}
#pg-daily[data-now="breach"] #sess-pills,#pg-daily[data-now="breach"] #stl-summary{display:none}
.asset-filter[hidden],.af-btn[hidden]{display:none!important}
.dash-fig-eb{row-gap:4px}
.rec-t-end{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--text-primary);transform:translate(-50%,-50%);pointer-events:none}
.rec-t-frame .lb.unit{top:auto;bottom:5px;left:8px;right:auto;transform:none;color:var(--text-tertiary)}
.rec-t-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-tertiary)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(button,a[href],[role="button"],summary,[tabindex]:not([tabindex="-1"]),.rail-sec,.nav-sub):focus-visible{outline:2px solid var(--accent-border)!important;outline-offset:2px!important}
@media(max-width:560px){#tb-clock:has(#tb-sync:not([hidden])) #sb-tz-label{display:none}.tb-sync{max-width:34vw}}
/* The headline keeps two lines' height, so new words that wrap differently move nothing below it. */
.dr-line{margin:6px 0 2px;min-height:2lh}.dr-line[hidden]{display:none}
/* A line of words changing in place (_textSwap): the old words on a copy laid over the new, fading out while the
   new fade in, so no frame is empty. */
.sw-host{position:relative}
.sw-ghost{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.now-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
#pg-daily[data-now="breach"] .dash-fig-v.hero.up{color:var(--text-primary)}
@media(max-width:700px){.now-three,.now-teach{grid-template-columns:1fr}.dash-log-hint{display:none}}
/* Phones: the hint and the chips float as a panel under the logger's line, anchored to the logger's own box, so
   the first keystroke never moves the page. The panel is opaque from its first frame and unrolls from the field
   on the same clock as the desktop line (clip 180ms out; rolling back up in 130ms, easing in); the clip's open
   edge sits outside the panel so its shadow shows. It floats only while the field has focus, so a line typed
   and left never covers the page. */
@media(max-width:700px){#dash-log{position:relative;z-index:6}.dash-log-pw{position:absolute;left:0;right:0;top:calc(100% + 6px);grid-template-rows:1fr;clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;transition:clip-path .13s var(--ease-in),visibility 0s linear .13s}.dash-log-pw.open{clip-path:inset(-8px -24px -40px -24px);visibility:visible;pointer-events:auto;transition:clip-path .18s var(--ease-out),visibility 0s}#dash-log:not(:focus-within) .dash-log-pw.open{clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;transition:clip-path .13s var(--ease-in),visibility 0s linear .13s}.dash-log-prev{min-height:0;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:var(--el-1)}}
/* Now: one layout per situation. The lead spans the full width directly under the logger; the rest follows in a secondary grid. Generated from one table (Phase 8). */
#pg-daily[data-now="live"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "reserve reserve today today" "expect expect expect expect" "curve curve side side" "plan plan plan plan"}
#pg-daily[data-now="live"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "today today today today" "expect expect side side" "curve curve curve curve" "plan plan plan plan"}
@media(max-width:1180px){#pg-daily[data-now="live"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "reserve reserve" "today today" "expect expect" "curve curve" "side side" "plan plan"}#pg-daily[data-now="live"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "today today" "expect expect" "curve curve" "side side" "plan plan"}}
@media(max-width:700px){#pg-daily[data-now="live"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "reserve" "today" "expect" "curve" "side" "plan"}#pg-daily[data-now="live"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "today" "expect" "curve" "side" "plan"}}
#pg-daily[data-now="live"] #dash-badges-card,#pg-daily[data-now="live"] #dash-profit-card,#pg-daily[data-now="live"] #dash-cal-card,#pg-daily[data-now="live"] #dash-streak-card,#pg-daily[data-now="live"] #dash-session,#pg-daily[data-now="live"] #dash-streak3,#pg-daily[data-now="live"] #dash-week,#pg-daily[data-now="live"] #dash-month,#pg-daily[data-now="live"] #dash-first{display:none!important}
#pg-daily[data-now="between"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "session session session session" "expect expect today reserve" "curve curve curve side" "plan plan plan plan"}
#pg-daily[data-now="between"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "session session session session" "expect expect today today" "curve curve curve side" "plan plan plan plan"}
@media(max-width:1180px){#pg-daily[data-now="between"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "session session" "expect expect" "today reserve" "curve curve" "side side" "plan plan"}#pg-daily[data-now="between"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "session session" "expect expect" "today today" "curve curve" "side side" "plan plan"}}
@media(max-width:700px){#pg-daily[data-now="between"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "session" "expect" "today" "reserve" "curve" "side" "plan"}#pg-daily[data-now="between"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "session" "expect" "today" "curve" "side" "plan"}}
#pg-daily[data-now="between"] #dash-profit-card,#pg-daily[data-now="between"] #dash-cal-card,#pg-daily[data-now="between"] #dash-badges-card,#pg-daily[data-now="between"] #dash-streak-card,#pg-daily[data-now="between"] #dash-streak3,#pg-daily[data-now="between"] #dash-week,#pg-daily[data-now="between"] #dash-month,#pg-daily[data-now="between"] #dash-first{display:none!important}
#pg-daily[data-now="breach"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "reserve reserve reserve reserve" "today today streak3 streak3"}
#pg-daily[data-now="breach"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "today today streak3 streak3"}
@media(max-width:1180px){#pg-daily[data-now="breach"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "reserve reserve" "today today" "streak3 streak3"}#pg-daily[data-now="breach"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "today today" "streak3 streak3"}}
@media(max-width:700px){#pg-daily[data-now="breach"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "reserve" "today" "streak3"}#pg-daily[data-now="breach"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "today" "streak3"}}
#pg-daily[data-now="breach"] #dash-profit-card,#pg-daily[data-now="breach"] #dash-cal-card,#pg-daily[data-now="breach"] #dash-badges-card,#pg-daily[data-now="breach"] #dash-streak-card,#pg-daily[data-now="breach"] #dash-session,#pg-daily[data-now="breach"] #dash-week,#pg-daily[data-now="breach"] #dash-month,#pg-daily[data-now="breach"] #dash-first,#pg-daily[data-now="breach"] #dash-expect,#pg-daily[data-now="breach"] #dash-curve-card,#pg-daily[data-now="breach"] #dash-side,#pg-daily[data-now="breach"] #cd-bias{display:none!important}
#pg-daily[data-now="risk"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "reserve reserve reserve reserve" "today today expect expect" "plan plan plan plan" "curve curve curve side"}
#pg-daily[data-now="risk"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "today today expect expect" "plan plan plan plan" "curve curve curve side"}
@media(max-width:1180px){#pg-daily[data-now="risk"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "reserve reserve" "today today" "expect expect" "plan plan" "curve curve" "side side"}#pg-daily[data-now="risk"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "today today" "expect expect" "plan plan" "curve curve" "side side"}}
@media(max-width:700px){#pg-daily[data-now="risk"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "reserve" "today" "expect" "plan" "curve" "side"}#pg-daily[data-now="risk"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "today" "expect" "plan" "curve" "side"}}
#pg-daily[data-now="risk"] #dash-profit-card,#pg-daily[data-now="risk"] #dash-cal-card,#pg-daily[data-now="risk"] #dash-badges-card,#pg-daily[data-now="risk"] #dash-streak-card,#pg-daily[data-now="risk"] #dash-session,#pg-daily[data-now="risk"] #dash-streak3,#pg-daily[data-now="risk"] #dash-week,#pg-daily[data-now="risk"] #dash-month,#pg-daily[data-now="risk"] #dash-first{display:none!important}
#pg-daily[data-now="streak"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "streak3 streak3 streak3 streak3" "today today reserve plan" "expect expect curve curve"}
#pg-daily[data-now="streak"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "streak3 streak3 streak3 streak3" "today today plan plan" "expect expect curve curve"}
@media(max-width:1180px){#pg-daily[data-now="streak"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "streak3 streak3" "today reserve" "plan plan" "expect expect" "curve curve"}#pg-daily[data-now="streak"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "streak3 streak3" "today today" "plan plan" "expect expect" "curve curve"}}
@media(max-width:700px){#pg-daily[data-now="streak"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "streak3" "today" "reserve" "plan" "expect" "curve"}#pg-daily[data-now="streak"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "streak3" "today" "plan" "expect" "curve"}}
#pg-daily[data-now="streak"] #dash-profit-card,#pg-daily[data-now="streak"] #dash-cal-card,#pg-daily[data-now="streak"] #dash-badges-card,#pg-daily[data-now="streak"] #dash-streak-card,#pg-daily[data-now="streak"] #dash-session,#pg-daily[data-now="streak"] #dash-week,#pg-daily[data-now="streak"] #dash-month,#pg-daily[data-now="streak"] #dash-first,#pg-daily[data-now="streak"] #dash-side{display:none!important}
#pg-daily[data-now="waiting"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "review review review review" "expect expect today reserve" "curve curve curve sentence" "plan plan plan plan"}
#pg-daily[data-now="waiting"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "review review review review" "expect expect today today" "curve curve curve sentence" "plan plan plan plan"}
@media(max-width:1180px){#pg-daily[data-now="waiting"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "review review" "expect expect" "today reserve" "curve curve" "sentence sentence" "plan plan"}#pg-daily[data-now="waiting"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "review review" "expect expect" "today today" "curve curve" "sentence sentence" "plan plan"}}
@media(max-width:700px){#pg-daily[data-now="waiting"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "review" "expect" "today" "reserve" "curve" "sentence" "plan"}#pg-daily[data-now="waiting"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "review" "expect" "today" "curve" "sentence" "plan"}}
#pg-daily[data-now="waiting"] #dash-profit-card,#pg-daily[data-now="waiting"] #dash-cal-card,#pg-daily[data-now="waiting"] #dash-badges-card,#pg-daily[data-now="waiting"] #dash-streak-card,#pg-daily[data-now="waiting"] #dash-session,#pg-daily[data-now="waiting"] #dash-streak3,#pg-daily[data-now="waiting"] #dash-week,#pg-daily[data-now="waiting"] #dash-month,#pg-daily[data-now="waiting"] #dash-first{display:none!important}
#pg-daily[data-now="week"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "week week week week" "expect expect side side" "curve curve curve curve" "plan plan ach ach"}
#pg-daily[data-now="week"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "week week week week" "expect expect side side" "curve curve curve curve" "plan plan ach ach"}
@media(max-width:1180px){#pg-daily[data-now="week"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "week week" "expect expect" "side side" "curve curve" "plan plan" "ach ach"}#pg-daily[data-now="week"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "week week" "expect expect" "side side" "curve curve" "plan plan" "ach ach"}}
@media(max-width:700px){#pg-daily[data-now="week"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "week" "expect" "side" "curve" "plan" "ach"}#pg-daily[data-now="week"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "week" "expect" "side" "curve" "plan" "ach"}}
#pg-daily[data-now="week"] #dash-reserve,#pg-daily[data-now="week"] #dash-profit-card,#pg-daily[data-now="week"] #dash-cal-card,#pg-daily[data-now="week"] #dp-today-card,#pg-daily[data-now="week"] #dash-streak-card,#pg-daily[data-now="week"] #dash-session,#pg-daily[data-now="week"] #dash-streak3,#pg-daily[data-now="week"] #dash-month,#pg-daily[data-now="week"] #dash-first{display:none!important}
#pg-daily[data-now="month"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "month month month month" "expect expect curve curve" "side side plan plan" "today reserve ach ach"}
#pg-daily[data-now="month"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "month month month month" "expect expect curve curve" "side side plan plan" "today today ach ach"}
@media(max-width:1180px){#pg-daily[data-now="month"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "month month" "expect expect" "curve curve" "side side" "plan plan" "today reserve" "ach ach"}#pg-daily[data-now="month"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "month month" "expect expect" "curve curve" "side side" "plan plan" "today today" "ach ach"}}
@media(max-width:700px){#pg-daily[data-now="month"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "month" "expect" "curve" "side" "plan" "today" "reserve" "ach"}#pg-daily[data-now="month"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "month" "expect" "curve" "side" "plan" "today" "ach"}}
#pg-daily[data-now="month"] #dash-profit-card,#pg-daily[data-now="month"] #dash-cal-card,#pg-daily[data-now="month"] #dash-streak-card,#pg-daily[data-now="month"] #dash-session,#pg-daily[data-now="month"] #dash-streak3,#pg-daily[data-now="month"] #dash-week,#pg-daily[data-now="month"] #dash-first{display:none!important}
#pg-daily[data-now="first"]{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "first first first first"}
#pg-daily[data-now="first"].no-reserve{grid-template-areas:"head head head head" "log log log log" "alert alert alert alert" "ob ob ob ob" "empty empty empty empty" "first first first first"}
@media(max-width:1180px){#pg-daily[data-now="first"]{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "first first"}#pg-daily[data-now="first"].no-reserve{grid-template-areas:"head head" "log log" "filter filter" "alert alert" "ob ob" "empty empty" "first first"}}
@media(max-width:700px){#pg-daily[data-now="first"]{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "first"}#pg-daily[data-now="first"].no-reserve{grid-template-areas:"head" "log" "filter" "alert" "ob" "empty" "first"}}
#pg-daily[data-now="first"] #dash-expect,#pg-daily[data-now="first"] #dash-reserve,#pg-daily[data-now="first"] #dash-profit-card,#pg-daily[data-now="first"] #dash-curve-card,#pg-daily[data-now="first"] #dash-side,#pg-daily[data-now="first"] #dash-cal-card,#pg-daily[data-now="first"] #cd-bias,#pg-daily[data-now="first"] #dp-today-card,#pg-daily[data-now="first"] #dash-badges-card,#pg-daily[data-now="first"] #dash-streak-card,#pg-daily[data-now="first"] #dash-session,#pg-daily[data-now="first"] #dash-streak3,#pg-daily[data-now="first"] #dash-week,#pg-daily[data-now="first"] #dash-month,#pg-daily[data-now="first"] #dash-empty-state{display:none!important}
/* ── The record: the spine, the zooms, the trade as an object ── */
#pg-trades.rec-zoomed > :not([data-rec]):not(.ph){display:none}
/* The synced-trades banner keeps its place whatever the zoom, so the spine
   and the figures under it never move when the zoom changes. */
#pg-trades.rec-zoomed>#bconn-review-banner{display:flex}
#pg-trades.rec-waiting #rec-zoom{display:none}
#rec-spine{padding:20px 22px 16px;margin:0 0 18px}
#rec-spine .dash-fig-eb{flex-wrap:wrap}
.rec-ctl{margin-left:auto;display:flex;gap:10px;align-items:center;letter-spacing:0;text-transform:none}
.rec-seg{display:inline-flex;border:1px solid transparent;border-radius:var(--rs);overflow:visible;background:none}
.rec-seg button{background:none;border:0;border-radius:0;color:var(--text-secondary);font:500 12px var(--font-body);padding:4px 10px;cursor:pointer}
.rec-seg button.on{background:none;color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:6px}
/* The account select is set like the range words beside it: Geist 12 at 500, the same height. Phones hold every
   select at 16px so iPhones do not zoom on focus; there the select keeps 16px and is drawn at the words' 12px
   (a .75 scale from its left edge, the box given back by the margin), so the pair still reads as one row. */
#rec-acct{font:500 12px var(--font-body);height:24px;padding:0 2px}
@media(max-width:768px){#rec-acct{width:160px;max-width:none;height:32px;transform:scale(.75);transform-origin:0 50%;margin:-4px -40px -4px 0}}
.rec-chart{position:relative;height:220px;margin-top:14px;cursor:ew-resize;touch-action:none;user-select:none;outline:none;border-radius:var(--rs)}
.rec-chart:focus-visible{box-shadow:0 0 0 2px var(--accent-border)}
.rec-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rec-chart.draw path.ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:rec-draw .9s var(--ease-out) forwards}
.rec-chart.draw path.ar{opacity:0;animation:rec-fade .5s .45s var(--ease-out) forwards}
@keyframes rec-draw{to{stroke-dashoffset:0}}@keyframes rec-fade{to{opacity:1}}
.rec-hline{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);pointer-events:none;transform:translateX(-.5px)}
.rec-hdot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-elevated);margin:-5px 0 0 -5px;pointer-events:none;box-sizing:border-box}
.rec-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-tertiary)}
.rec-ax{display:flex;justify-content:space-between;font-family:var(--font-num);font-size:11px;letter-spacing:.06em;color:var(--text-tertiary);margin-top:10px}
.rec-figs{display:grid;grid-template-columns:repeat(6,1fr);margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.rec-figs>div{padding:0 14px;border-left:1px solid var(--border);min-width:0}.rec-figs>div:first-child{padding-left:0;border-left:0}
.rec-figs .l{font-family:var(--font-num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px;line-height:1.3;min-height:2.6em}
.rec-figs .v{font-family:var(--font-num);font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.rec-figs .v.up{color:var(--win)}.rec-figs .v.down{color:var(--loss)}
.rec-asof{display:flex;align-items:baseline;gap:10px;margin-top:14px;font-size:13px;color:var(--text-secondary);flex-wrap:wrap}
.rec-asof b{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--text-primary)}
.rec-asof-eb{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
.rec-zoom{display:flex;gap:2px;align-items:center;border-bottom:1px solid var(--border);margin:0 0 18px;overflow-x:auto;scrollbar-width:none}
.rec-zoom::-webkit-scrollbar{display:none}
.rec-zoom-btn,.rec-zoom-link{flex:none;white-space:nowrap}
.rec-zoom-btn{background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 14px;color:var(--text-tertiary);font-size:12.5px;font-weight:600;font-family:inherit;letter-spacing:.01em;cursor:pointer}
.rec-zoom-btn:hover{color:var(--text-primary)}
.rec-zoom-btn.on{color:var(--text-primary);border-bottom-color:var(--accent)}
/* One line under the chosen zoom, sliding between words in 180ms (_recZoomInk);
   the words change ink in 150ms. */
.rec-zoom{position:relative}
.rec-zoom-btn{transition:color var(--dur-fast) var(--ease-out)}
.rec-ink{position:absolute;left:0;top:0;width:1px;border-bottom:2px solid var(--accent);transform-origin:0 0;pointer-events:none;transition:transform .18s var(--ease-out)}
.rec-zoom.has-ink .rec-zoom-btn.on{border-bottom-color:transparent}
.rec-zoom-link{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--accent);cursor:pointer;padding:9px 0}
#rec-body:empty{display:none}
.rec-zh{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.rec-zh b{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
.rec-zh span{font-size:13px;color:var(--text-secondary)}
.rec-zh a{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--accent);cursor:pointer}
.rec-trades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.now-queue{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:14px}
.now-queue .rec-trade{max-width:440px}
.rec-quick{display:grid;gap:8px;margin:10px 0 6px}
.rec-q-g{display:flex;gap:6px}
.rec-q-gb{flex:1;height:30px;border:1px solid var(--border-strong);border-radius:var(--rs);background:transparent;color:var(--text-secondary);font:500 12px var(--font-num);cursor:pointer}
.rec-q-gb:hover{color:var(--text-primary)}
.rec-q-gb.on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--text-primary)}
.rec-q-note{height:34px;font-size:12.5px}
.rec-q-save{height:32px;justify-content:center}
.now-queue .rec-trade{min-width:0;background:transparent;box-shadow:none;border:1px solid var(--border)}
.rec-none{padding:22px;color:var(--text-tertiary);font-size:13px}
.rec-trade{padding:18px 20px;min-width:0;margin:0}
/* A trade inside Now's lead panel is a ruled entry, not a card in a card. */
.now-lead .rec-trade{border-width:1px 0 0;border-radius:0;background:none;padding-inline:0;box-shadow:none}
.rec-t-top{display:flex;align-items:baseline;gap:10px;min-width:0}
.rec-t-top b{font-size:16px;font-weight:600;color:var(--text-primary)}
.rec-t-top span{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rec-t-r{margin-left:auto;font-family:var(--font-num);font-size:24px;font-weight:400;letter-spacing:-.02em;color:var(--text-primary);flex:none}
.rec-t-r.up{color:var(--win)}.rec-t-r.down{color:var(--loss)}
.rec-t-meta{font-family:var(--font-num);font-size:11px;letter-spacing:.06em;color:var(--text-tertiary);margin-top:6px}
.rec-t-frame{height:110px;margin:14px 0 12px;border-radius:var(--rs);background:var(--bg-surface);border:1px solid var(--border);position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(0,0,0,.25)}
.rec-t-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rec-t-frame svg{position:absolute;inset:0;width:100%;height:100%}
.rec-t-frame .lb{position:absolute;right:8px;font-family:var(--font-num);font-size:11px;letter-spacing:.06em;transform:translateY(-50%)}
.rec-t-th{font-size:13px;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rec-t-th.none{color:var(--text-tertiary)}
.rec-t-tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.rec-t-tags span{font-family:var(--font-num);font-size:11px;color:var(--text-secondary);border:1px solid var(--border-strong);border-radius:var(--rs);padding:2px 7px}
.rec-t-tags span.g{color:var(--text-primary);background:var(--tint-1)}
.rec-t-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--text-tertiary)}
.rec-t-foot a{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--accent);cursor:pointer}
.rec-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 18px}
.rec-week.seven{grid-template-columns:repeat(7,minmax(0,1fr))}
.rec-day{border-radius:var(--r);border:1px solid var(--border);background:var(--tint-1);padding:14px;cursor:pointer;position:relative;overflow:hidden;min-width:0}
.rec-day::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:transparent}
.rec-day.up::before{background:var(--win)}.rec-day.down::before{background:var(--loss)}
.rec-day.on{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-dim)}
.rec-day .dn{font-family:var(--font-num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.rec-day .v{font-family:var(--font-num);font-size:20px;margin-top:8px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.rec-day .v.up{color:var(--win)}.rec-day .v.down{color:var(--loss)}
.rec-day .c{font-size:12px;color:var(--text-secondary);margin-top:4px}
.rec-all{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rec-all .card{margin:0;padding:18px 20px}
.rec-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px 18px;margin-top:14px}
.rec-kv .l{font-family:var(--font-num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
.rec-kv .v{font-family:var(--font-num);font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.rec-kv .v.up{color:var(--win)}.rec-kv .v.down{color:var(--loss)}
.rec-bars{margin-top:12px}
.rec-bar{display:grid;grid-template-columns:minmax(0,150px) 1fr 72px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--border);font-size:13px;color:var(--text-secondary)}
.rec-bar:first-child{border-top:0}
.rec-bar .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-bar .nm small{color:var(--text-tertiary);margin-left:6px}
.rec-bar .bb{height:6px;background:var(--border);border-radius:3px;overflow:hidden;position:relative}
.rec-bar .bb i{position:absolute;top:0;bottom:0;background:var(--text-secondary)}
.rec-bar .bb i.up{background:var(--win)}.rec-bar .bb i.down{background:var(--loss)}
.rec-bar .n2{font-family:var(--font-num);text-align:right;color:var(--text-primary);font-variant-numeric:tabular-nums}
.rec-bar .n2.up{color:var(--win)}.rec-bar .n2.down{color:var(--loss)}
@media(max-width:1100px){.rec-trades{grid-template-columns:repeat(2,minmax(0,1fr))}.rec-all{grid-template-columns:1fr}}
@media(max-width:900px){.rec-figs{grid-template-columns:repeat(3,1fr);row-gap:14px}.rec-figs>div:nth-child(4){padding-left:0;border-left:0}.rec-chart{height:160px}.rec-ctl{margin-left:0;width:100%}.rec-week,.rec-week.seven{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.rec-trades{grid-template-columns:1fr}.rec-figs{grid-template-columns:repeat(2,1fr)}.rec-figs>div:nth-child(3),.rec-figs>div:nth-child(5){padding-left:0;border-left:0}.rec-figs>div:nth-child(4){padding-left:14px;border-left:1px solid var(--border)}}
@media(prefers-reduced-motion:reduce){.rec-chart.draw path.ln,.rec-chart.draw path.ar{animation:none;stroke-dashoffset:0;opacity:1}}
/* No emoji in the chrome: rule icons, channel emoji and dialog glyphs are hidden. */
.disc-icon,.del-acct-icon{display:none}
/* ── Phone: the record's zoom row wraps (the statement and the calendar keep their own phone blocks) ── */
@media(max-width:700px){
  .rec-zoom{flex-wrap:wrap;overflow-x:visible}.rec-zoom-btn{padding:9px 11px}.rec-zoom-link{flex:1 0 100%;margin-left:0;text-align:right;padding:6px 0 10px}
}
/* ── List rows (Needs review) ── */
.cmp-list{display:flex;flex-direction:column}
.cmp-fill.landed{animation:cmp-land 1.2s var(--ease-out) both}
@keyframes cmp-land{from{box-shadow:inset 0 -1px 0 var(--metal)}to{box-shadow:inset 0 -1px 0 transparent}}
@media(prefers-reduced-motion:reduce){.cmp-fill.landed{animation:none}}
.cmp-empty{font-size:13px;color:var(--text-tertiary);padding:2px 0}
/* ── The statement (on paper) ──
   The frame sits on the paper's own column: the page head, the toolbar and the
   sheet share one 860px measure, one left edge and one right edge. The toolbar
   is one control spec in both themes: the shared .btn and select at 36px, the
   small radius, a 1px hairline and no fill. The month is a control value in a
   fixed box, so the chevrons never move as the month's name changes. */
#pg-statement .st-ph,#pg-statement .st-controls{max-width:860px;margin-inline:auto}
.st-controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.st-month{display:inline-flex;align-items:center;gap:8px}
.st-month-lbl{flex:none;width:136px;text-align:center;font-family:var(--font-display);font-size:15px;font-weight:500;line-height:20px;color:var(--text-primary);white-space:nowrap}
#pg-statement .st-controls .btn{border-color:var(--border-strong)}
.st-nav{flex:none;width:36px;padding:0;color:var(--text-secondary)}
.st-nav:hover{color:var(--text-primary)}
.st-nav svg{display:block}
#pg-statement select.st-acct{width:auto;min-width:170px;background-color:transparent}
.st-print{margin-left:auto;white-space:nowrap}
/* The paper: one label voice (DM Mono 10px caps at .14em in the label grey),
   one hero (expectancy, the net figures on its baseline), one line on it (the
   hero's), and a ledger on the figures' own four-column pitch. */
.st-sheet{--sp:#ffffff;--si:#0e1a26;--si2:#46586a;--si3:#596a7a;--sr:rgba(14,26,38,.13);--srs:rgba(14,26,38,.07);--sb:#1a5f98;--sw:#157a55;--sl:#c93448;
  background:var(--sp);color:var(--si);max-width:860px;margin:0 auto;padding:44px 48px 36px;border:1px solid var(--sr);border-radius:var(--rs);box-shadow:0 1px 2px rgba(0,0,0,.18),0 24px 48px -24px rgba(0,0,0,.6);font-family:var(--font-body)}
.st-mast{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--sr);margin-bottom:24px}
.st-eb,.st-mast-r,.st-fig .l,.st-h,.st-tbl th,.st-seal-r{font-family:var(--font-num);font-size:10px;font-weight:400;line-height:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--si3)}
.st-title{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--si);margin:10px 0 4px}
.st-sub{font-size:13px;color:var(--si2)}
.st-mast-r{text-align:right;line-height:20px;white-space:nowrap}
.st-mast-r b{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--si)}
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px;align-items:baseline}
/* Each label floats above its figure, so a figure's first baseline is its
   value: the grid's baseline alignment then sets the net figures on the
   hero's baseline, and every other row stays as it was. */
.st-fig .l{float:left;width:100%;margin-bottom:6px}
.st-fig .v{font-family:var(--font-num);font-size:20px;font-weight:500;color:var(--si);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.st-fig .v.up{color:var(--sw)}.st-fig .v.down{color:var(--sl)}
.st-fig .v.hero{font-size:56px;font-weight:400;letter-spacing:-.03em;line-height:1;display:inline-block;position:relative;padding-bottom:12px}
.st-fig .v.hero::after{content:"";position:absolute;left:1px;right:0;bottom:0;height:2px;border-radius:1px;background:var(--metal-rule-p)}
.st-fig .s{font-size:11px;color:var(--si3);margin-top:6px}
.st-fig.wide{grid-column:span 2}
.st-h{padding-bottom:8px;border-bottom:1px solid var(--sr)}
/* The ledger: no outer inset, so Day starts and Record ends on the figures'
   edges; Trades, Net R, P&L and Record end where the four figure columns end. */
.st-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:24px}
.st-tbl th{padding:12px 0 8px;border-bottom:1px solid var(--sr);background:none;text-align:right;white-space:nowrap}
.st-tbl td{padding:10px 0;border-bottom:1px solid var(--srs);color:var(--si2);line-height:16px;vertical-align:baseline;text-align:right;white-space:nowrap}
.st-tbl th:first-child,.st-tbl td.d{text-align:left}
.st-tbl th:nth-child(n+2),.st-tbl td:nth-child(n+2){padding-left:12px}
.st-tbl th:nth-child(n+3){width:25.6%}
.st-tbl td.n{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--si)}
.st-tbl td.n.up{color:var(--sw)}.st-tbl td.n.down{color:var(--sl)}
.st-tbl td.d{font-family:var(--font-num);color:var(--si)}
.st-tbl td.rec{font-family:var(--font-num);font-size:12px;color:var(--si3)}
.st-dn{display:none}
.st-tbl tbody tr:hover{background:none;box-shadow:none}
.st-tbl tr:has(+ .tot) td{border-bottom-color:var(--sr)}
.st-tbl tr.tot td{border-top:1px solid var(--sr);border-bottom:none;color:var(--si);font-weight:500}
.st-seal{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--sr);border-radius:var(--rs);padding:14px 16px}
.st-seal-l{font-family:var(--font-display);font-size:13px;color:var(--si)}
.st-seal-l b{font-family:var(--font-num);font-weight:500}
.st-seal-r{white-space:nowrap}
.st-empty{text-align:center;padding:48px 20px 40px;color:var(--si3);font-size:13px}
.st-empty b{display:block;font-family:var(--font-display);font-size:20px;color:var(--si);font-weight:600;margin-bottom:6px}
/* On a phone: a 16px gutter (#main's 14px side padding at 768 and 10px at 480, plus this). */
@media(max-width:768px){#pg-statement{padding-left:2px;padding-right:2px}}
@media(max-width:700px){
  .st-sheet{padding:26px 18px 22px}
  .st-grid{grid-template-columns:1fr 1fr}
  .st-title{font-size:24px}
  .st-fig .v.hero{font-size:48px}
  .st-mast{flex-direction:column;align-items:flex-start;gap:12px}
  .st-mast-r{text-align:left}
  /* The toolbar: the month across the sheet's width with a chevron on each
     edge, then the account and Print as two equal halves. */
  .st-controls{gap:8px;margin-bottom:16px}
  .st-month{flex:1 0 100%}
  .st-month-lbl{flex:1;width:auto}
  #pg-statement select.st-acct,.st-print{flex:0 0 calc(50% - 4px);min-width:0;margin-left:0}
  .st-tbl{font-size:12px}
  .st-seal{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:480px){
  #pg-statement{padding-left:6px;padding-right:6px}
  /* The ledger: four columns, the record note one line under its date with
     the figures on the date's line, every row 44px. */
  .st-tbl th:nth-child(5),.st-tbl td:nth-child(5){display:none}
  .st-tbl th:nth-child(n+2){width:22%}
  .st-tbl td{height:44px;padding-top:0;padding-bottom:0;vertical-align:middle}
  .st-dn{display:block;font-size:11px;line-height:14px;font-weight:400;color:var(--si3)}
  .st-tbl tr:has(.st-dn) td.n{padding-bottom:14px}
}
@media(max-width:359px){#pg-statement select.st-acct,.st-print{flex-basis:100%}}
@media print{
  body.print-statement{background:#fff!important}
  body.print-statement>#app{display:block!important;height:auto!important}
  body.print-statement #rail,body.print-statement #topbar,body.print-statement #mobtab,body.print-statement #fab-log,body.print-statement #mob-fab,body.print-statement #navpanel,body.print-statement #nav-scrim,body.print-statement .st-controls,body.print-statement .st-ph,body.print-statement .sig6,body.print-statement #toast{display:none!important}
  body.print-statement #main{margin:0!important;padding:0!important;height:auto!important;overflow:visible!important;background:#fff!important}
  body.print-statement .pg{display:none!important}
  body.print-statement #pg-statement{display:block!important;opacity:1!important;transform:none!important;max-width:none!important;padding:0!important}
  body.print-statement .st-sheet{box-shadow:none;border:none;max-width:none;padding:0;border-radius:0}
}
/* The Insights jump bar was a filled pill; it becomes the same underline tabs. */
.ins-jump{display:inline-flex;width:auto;max-width:100%;pointer-events:auto;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--border-strong);border-radius:var(--r);padding:4px 6px;box-shadow:inset 0 1px 0 var(--hi),0 10px 24px -16px rgba(0,0,0,.7)}
/* The dock is sticky. The old floating island carried its own gradient ground;
   an underline family needs the page ground behind it or content shows through. */
/* The dock is only a sticky slot now; the bar inside is a floating island on
   the left, sized to its labels. Clicks pass through the empty part of the slot. */
#pg-insights > .ins-jump-dock{top:-24px;padding-top:6px;background:transparent;pointer-events:none}
/* The sticky edge is #main's content box (its padding-top), 24px under the 52px
   topbar on desktop; the negative top closes that gap so nothing scrolls through it. */
@media(max-width:768px){#pg-insights > .ins-jump-dock{top:-10px}}
@media(max-width:480px){#pg-insights > .ins-jump-dock{top:-8px}}
.ins-jump-a{border-radius:0;border-bottom:2px solid transparent;margin-bottom:0;padding:8px 14px 6px;color:var(--text-secondary);font-size:12.5px;font-weight:600}
.ins-jump-a:hover{color:var(--text-primary);background:transparent}
.ins-jump-a.on,.ins-jump-a.on:hover,.ins-jump-a.ins-jump-guide[aria-pressed="true"]{color:var(--text-primary);background:transparent;box-shadow:none;border-bottom-color:var(--accent)}
.ins-jump-div{background:var(--border-strong);margin:8px 6px}
/* After the base rules on purpose: all five tabs fit a 375px phone. */
@media(max-width:480px){.ins-jump{gap:0}.ins-jump-a{padding:9px 6px;font-size:12px}.ins-jump-div{margin:8px 3px}}
/* ── Finish II, the pages ──────────────────────────────────────────────
   The same finish the dashboard and the sign-in got: the metal rule on the
   active tab and under each page's hero figure, every figure in the mono at
   500 (heroes at 400), stat tiles as hairline strips instead of boxes, and
   glass under every overlay. Overrides on purpose: the rules they refine sit
   earlier in the file and are left in place. */
/* Tabs: the active place carries the rule. border-image paints only the
   bottom because the other three widths are zero. */
.ins-tab.on,.tl-subtab.on,.pb-tab.on,.lb-tab.on,.rd-tab.on,.modg-tab.on,.modv-tab.on,.legal-tab.on,.adm-tab.on,.aff-tab-btn.on,.rev-seg-btn.on,.ins-jump-a.on,.ins-jump-a.on:hover,.ins-jump-a.ins-jump-guide[aria-pressed="true"]{border-width:0 0 2px;border-style:solid;border-color:transparent;border-image:var(--metal-rule) 1}
/* Figures wear the mono */
.kv,.kv.kwin,.kv.kloss,.acov-kpi-val,.cal-kpi-val,.rh-sum-val,.pb-an-tile-val,.wr-hb-sval,.sum-val,.st-val,.ins-verdict-cost{font-family:var(--font-num);font-weight:500;letter-spacing:-.02em}
/* Page heroes: Accounts (net P&L) and the week (expectancy) */
.acov-hero-val,.wr-hb-val{font-family:var(--font-num);font-size:clamp(40px,4vw,54px);font-weight:400;letter-spacing:-.03em;line-height:1;display:inline-block;position:relative;padding-bottom:10px;margin-top:4px}
.acov-hero-val::after,.wr-hb-val::after{content:"";position:absolute;left:1px;right:0;bottom:0;height:2px;border-radius:1px;background:var(--metal-rule);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.acov-hero-stats>div,.wr-hb-stat{padding-left:18px;border-left:1px solid var(--border)}
.acov-kpi-val,.wr-hb-sval{font-size:22px}
/* Strips, not tiles */
.cal-kpi-strip,.rh-summary-row,.pb-an-tiles{gap:0;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cal-kpi,.rh-sum-card,.pb-an-tile{background:none;border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:none;padding:0 18px}
.cal-kpi:first-child,.rh-sum-card:first-child,.pb-an-tile:first-child{padding-left:0;border-left:0}
.rh-sum-card::before{content:none}
.cal-kpi-val,.rh-sum-val,.pb-an-tile-val{font-size:22px}
.sum-bar{background:transparent;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;padding:12px 0;gap:0}
.sum-bar>div{padding:0 18px;border-left:1px solid var(--border)}
.sum-bar>div:first-child{padding-left:0;border-left:0}
.sum-val{font-size:16px}
@media(max-width:900px){.rh-sum-card:nth-child(odd){padding-left:0;border-left:0}.rh-sum-card{padding-top:6px;padding-bottom:6px}}
@media(max-width:640px){.cal-kpi:nth-child(odd),.pb-an-tile:nth-child(odd){padding-left:0;border-left:0}.cal-kpi,.pb-an-tile{padding-top:6px;padding-bottom:6px}.sum-bar>div{padding:4px 12px}}
#kpi-row{gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg-surface);box-shadow:inset 0 1px 0 var(--hi)}
#kpi-row .kc{background:none;border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:none;transform:none}
#kpi-row .kc:first-child{border-left:0}
#kpi-row .kv{font-size:30px;font-weight:400;letter-spacing:-.03em}
/* Glass under every overlay: blur where something floats above the page, never as decoration */
#acct-form,#broker-choose-modal,.cm-ms-prompt-ov,#welcome-modal,#legal-modal,#del-account-modal,#del-trading-acct-modal,.mo,#pb-editor-modal,#cmdk-overlay{background:var(--scrim);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
/* ── Finish III, the instrument (composition) ──────────────────────────────
   The rules above were edited in place; this block carries only what is
   composition: the room between the dashboard's panels, the one raised
   instrument, hover where something responds, and the labels that became
   one class. */
#pg-daily{column-gap:20px}
#pg-daily > .card,#pg-daily > .cc,#pg-daily .dash-r1 > .card,#pg-daily .dash-r2 > .card,#pg-daily .dash-r2-side > .card,#pg-daily .dash-r2-side > #dash-kpi-row,#pg-daily .dash-r3 > .card,#dash-side,#dash-empty-state,#dash-prop-alert,#ob-checklist{margin:0 0 20px!important}
#dash-side{gap:20px}
#pg-daily > .dash-top-row{margin:0 0 20px}
#cd-bias>div:first-child{margin-bottom:14px}
@media(hover:hover){.dash-cal-card:hover{border-color:var(--border-strong)!important;transform:translateY(-1px)}}
.af-lbl{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-right:3px}
.dash-today-pnl{font-family:var(--font-num);font-size:13px;font-weight:500;color:var(--text-tertiary)}
#ps-arc,#es-arc{stroke-width:4}
/* Motion: a changed figure ticks and gets a metal hairline for a moment; on
   the first open of a page the hero's rule draws in from the left. */
.fig-tick{animation:fig-tick .3s var(--ease-out)}
@keyframes fig-tick{from{box-shadow:inset 0 -1px 0 var(--metal)}to{box-shadow:inset 0 -1px 0 transparent}}
.pg.arrive .dash-fig-v.hero::after{animation:rule-in .5s var(--ease-out) .12s both}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* In a breach the page changes register: the reserve becomes the raised
   object and the hero stops celebrating above the alert. */
/* The other two auth screens, on the same card and the same inks */
#set-pass-screen{z-index:9001}#access-denied-screen{z-index:9002}
.auth-p{font-size:13px;color:var(--text-secondary);line-height:1.55;margin:0 0 18px}
.auth-hint{font-size:12px;color:var(--text-tertiary);line-height:1.5;margin:-4px 0 14px}
.auth-paper .btn-g{color:var(--text-primary);border-color:var(--border-strong);background:var(--auth-field);text-decoration:none}

/* Staff › Emails: the list on the left, the email as it arrives on the right. */
.em-wrap{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:var(--sp-5);align-items:start}
.em-list{position:sticky;top:76px}
.em-grp{margin:0 0 var(--sp-4)}
.em-eb{margin:0 0 6px;font-family:var(--font-num);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary)}
.em-item{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:var(--rs);padding:8px 10px;margin:0 0 2px;font:inherit;cursor:pointer;transition:background var(--dur-fast)}
.em-item b{display:block;font-size:13px;font-weight:500;color:var(--text-primary)}
.em-item span{display:block;font-size:12px;color:var(--text-tertiary)}
@media (hover:hover){.em-item:hover{background:var(--bg-hover)}}
.em-item.on{background:var(--tint-2);border-color:var(--border)}
.em-item.on span{color:var(--text-secondary)}
.em-item:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}
.em-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-3)}
.em-meta{min-width:0;flex:1 1 260px}
.em-subj{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}
.em-when{margin:2px 0 0;font-size:12px;color:var(--text-tertiary)}
.em-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.em-seg{pointer-events:auto}
.em-stage{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4);display:flex;justify-content:center}
.em-frame{display:block;width:100%;max-width:680px;min-height:560px;border:0;border-radius:var(--rs);background:transparent}
.em-frame{color-scheme:light}
.em-frame.dark{color-scheme:dark}
.em-frame.phone{max-width:390px}
.em-text{margin:0;width:100%;max-width:680px;white-space:pre-wrap;word-break:break-word;font-family:var(--font-num);font-size:13px;line-height:1.6;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);padding:var(--sp-4)}
.em-note{margin:0;color:var(--text-secondary)}
@media (max-width:900px){.em-wrap{grid-template-columns:minmax(0,1fr)}.em-list{position:static}}
/* ── Day: one field, one ink, one line ───────────────────────────────────────
   Night is one navy in tones with one accent. Day mirrors it: the tokens carry
   one ice blue in tones with navy ink, and these rules are the finish that goes
   with them. None of them reaches night. Sheets are flat. (The filters, the
   segmented filters, the session row and the phone search button are words or
   bare icons in both themes, defined once in their own rules.) */
:root[data-theme="light"] #navpanel{box-shadow:none}
:root[data-theme="light"] .mt-cta-circle{box-shadow:0 2px 10px rgba(14,26,38,.22)}
:root[data-theme="light"] .rv-btn{box-shadow:none;border-color:transparent}
:root[data-theme="light"] .auth-paper{--auth-field:var(--bg-surface);box-shadow:none;border:1px solid var(--border)}
:root[data-theme="light"] .ins-bento .cc:hover{box-shadow:none}
:root[data-theme="light"] .pt::after{background:var(--accent);opacity:1;width:24px;height:1.5px;border-radius:0}
:root[data-theme="light"] .dash-fig-v.hero::after,:root[data-theme="light"] .acov-hero-val::after,:root[data-theme="light"] .wr-hb-val::after{box-shadow:none}
/* Fields are the lightest tone, edged with a hairline. */
:root[data-theme="light"] .dash-log-row:not(:focus-within){box-shadow:none}
:root[data-theme="light"] .rec-t-frame{background:var(--bg-base);box-shadow:none}
/* Quiet buttons and counts: a hairline, or nothing. */
:root[data-theme="light"] .rec-q-gb:not(.on){border-color:var(--border)}
:root[data-theme="light"] .bconn-review-banner{background:var(--bg-elevated);border-color:var(--border)}
/* The statement is a sheet of the same paper on screen, and white on a printer. */
:root[data-theme="light"] .st-sheet{--sp:var(--bg-elevated);box-shadow:none}
@media print{:root[data-theme="light"] body.print-statement .st-sheet{--sp:white}}
/* ── Questions: one ruled list, the answer under its row, the evidence below ──
   The ten answers are a ledger grouped under the evidence's four words: each row
   is the question, the sentence that answers it and the figure the sentence
   states, in a column the eye can run down. A row opens where it stands (its own
   content unfolds; the rows beneath make room). The open answer and the
   evidence's verdict card share one layout (_qAnsHtml). The evidence keeps one
   card padding, one gutter and one label style. Scoped to #pg-insights. */
#pg-insights .ins-hd{margin-bottom:22px}
.ins-hd-ctl{display:flex;align-items:flex-end;gap:var(--sp-2-5);flex-wrap:wrap}
#pg-insights .ins-hd .fm.ins-acct{min-width:180px;margin:0}
/* Share stats and the account select: one height, size, fill, border, in both themes */
#pg-insights .ins-hd .ins-ctl{height:34px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--text-primary);background-color:transparent;border:1px solid var(--border-strong);border-radius:var(--rs);box-shadow:none;transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
#pg-insights .ins-hd .btn.ins-ctl{padding:0 14px;gap:8px;white-space:nowrap}
#pg-insights .ins-hd .ins-ctl:hover{background-color:var(--tint-1);border-color:var(--border-strong);color:var(--text-primary)}
#pg-insights .ins-hd .ins-ctl:focus-visible{outline:2px solid var(--accent);outline-offset:0}
#pg-insights .ins-hd select.ins-ctl:focus-visible{outline:none}
.ins-ctl-i{flex:none;color:var(--text-secondary)}
#pg-insights .ins-hd select.ins-ctl{padding:0 34px 0 12px;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(237,242,247,0.62)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
:root[data-theme="light"] #pg-insights .ins-hd select.ins-ctl{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(14,26,38,0.62)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="light"] #pg-insights .ins-hd .btn-g.ins-ctl{color:var(--text-primary);border-color:var(--border-strong)}
/* Phones: the app's 36px control height. The select keeps 16px text only because iPhones zoom into a smaller
   field; the button keeps the list's 13px. */
@media(max-width:768px){#pg-insights .ins-hd .ins-ctl{height:36px}#pg-insights .ins-hd .btn.ins-ctl{font-size:13px}}
@media(max-width:480px){#pg-insights{padding-left:6px;padding-right:6px}}

/* Section heads: the questions and the evidence wear the same quiet label on a hairline */
#pg-insights .q-block{margin:0;container-type:inline-size}
#pg-insights .q-sec-h{margin:0;padding-bottom:10px;border-bottom:1px solid var(--border-strong)}
.q-list{margin-top:6px}
.q-list .q-card:first-child{border-top:0}
#pg-insights .qa-eb,#pg-insights .qa-cl,#pg-insights .af-lbl,#pg-insights .cc-t,#pg-insights .es-right-title,#pg-insights .es-score-label,#pg-insights .kl,#pg-insights .ins-stat .st-lbl,#pg-insights .ins-chapter-t{font-family:var(--font-num);font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);line-height:1.4}

/* A row: question | sentence | figure | way in */
.q-card{position:relative;margin:0;border-top:1px solid var(--border)}
.q-card:last-child{border-bottom:1px solid var(--border)}
.q-row{position:relative;display:grid;grid-template-columns:minmax(0,15fr) minmax(0,26fr) 112px 16px;grid-template-areas:"q a f c";column-gap:24px;align-items:baseline;padding:16px 0}
.q-card:not(.locked)>.q-row{cursor:pointer}
.q-row::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px;border-radius:var(--rs);background:var(--tint-1);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-standard)}
.q-card:not(.locked):not(.open)>.q-row:hover::before{opacity:1}
.q-q{grid-area:q;position:relative;margin:0;font-size:15px;font-weight:500;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary)}
.q-card.locked .q-q{color:var(--text-secondary)}
.q-qb{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;text-align:left;cursor:pointer}
.q-qb:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
/* Keyboard focus marks the whole row, the same shape the pointer's hover takes */
@supports selector(:has(*)){
  .q-qb:focus-visible{outline:none}
  .q-row:has(.q-qb:focus-visible)::before{opacity:1;box-shadow:inset 0 0 0 2px var(--accent)}
}
.q-sum{grid-area:a;position:relative;display:grid;grid-template-rows:1fr;min-width:0}
.q-sum-in{min-height:0;overflow:hidden}
.q-a{margin:0;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.q-a.none{color:var(--text-tertiary)}
.q-gate{display:flex;align-items:center;gap:12px;margin-top:6px;font-family:var(--font-num);font-size:11px;letter-spacing:.02em;color:var(--text-tertiary)}
progress.q-prog{display:block;flex:none;width:96px;height:2px;margin:0;border:0;appearance:none;-webkit-appearance:none;background:var(--border-strong);color:var(--text-tertiary)}
progress.q-prog::-webkit-progress-bar{background:var(--border-strong)}progress.q-prog::-webkit-progress-value{background:var(--text-tertiary)}progress.q-prog::-moz-progress-bar{background:var(--text-tertiary)}
.q-fig{grid-area:f;position:relative;justify-self:end;text-align:right;white-space:nowrap;font-family:var(--font-num);font-size:18px;font-weight:400;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.q-fig.dn,.qa-fig.dn,.qa-cv.dn,.qb-v.dn{color:var(--loss)}
.q-chv{grid-area:c;position:relative;align-self:start;width:16px;height:16px;margin-top:3px;color:var(--text-tertiary);transition:transform var(--dur-base) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.q-row:hover .q-chv{color:var(--text-primary)}
.q-card.open .q-chv{transform:rotate(180deg);color:var(--text-primary)}

/* Opening, in place: the row's own summary folds away as its answer unfolds,
   on the same clock, so the rows beneath move once and smoothly. The height runs
   0fr to 1fr in 260ms on the in-place curve, which starts from rest, so the rows
   below ride the height from zero instead of jumping on the first frame; the
   answer fades in from +60ms and lands with the height. The fold back is shorter. */
.q-sum{transition:grid-template-rows .2s var(--ease-standard),opacity .2s var(--ease-out) .06s}
.q-fig{transition:opacity .2s var(--ease-out) .06s}
.q-more{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s var(--ease-standard),visibility 0s linear .2s}
.q-more-in{min-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .12s var(--ease-standard),transform .2s var(--ease-standard)}
.q-card.open .q-sum{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .26s var(--ease-standard),opacity .12s var(--ease-in)}
.q-card.open .q-fig{opacity:0;transition:opacity .12s var(--ease-in)}
.q-card.open .q-more{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .26s var(--ease-standard),visibility 0s}
.q-card.open .q-more-in{opacity:1;transform:none;transition:opacity .2s var(--ease-out) .06s,transform .2s var(--ease-out) .06s}
.q-ans{padding:0 0 24px}
@media(prefers-reduced-motion:reduce){.q-sum,.q-fig,.q-more,.q-more-in,.q-chv,.q-row::before,.q-card.open .q-sum,.q-card.open .q-fig,.q-card.open .q-more,.q-card.open .q-more-in{transition-duration:1ms!important;transition-delay:0s!important}.q-more-in{transform:none}}

/* The answer: one layout for the open row and the evidence's verdict card */
.qa-hd{margin:0 0 20px}
.qa-eb{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 8px}
.qa-eb span{font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--text-tertiary)}
.qa-q{margin:0;font-size:15px;font-weight:500;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary)}
.qa-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;row-gap:28px;align-items:stretch}
.qa-body.solo{grid-template-columns:minmax(0,1fr)}
/* Both columns are as tall as the row; the last block of each sits on the row's foot, so the runners-up and the
   actions end on one line and no pocket hangs under the shorter column. */
.qa-main,.qa-ev{min-width:0;display:flex;flex-direction:column}
.qa-fig{font-family:var(--font-num);font-size:40px;font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.qa-none-t{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}
.qa-line{margin:12px 0 0;max-width:54ch;font-size:15px;font-weight:400;line-height:1.55;color:var(--text-primary)}
.qa-cmp{display:grid;grid-template-columns:auto auto auto;justify-content:start;column-gap:20px;row-gap:4px;margin-top:24px}
.qa-cl{grid-row:1;align-self:end;padding-top:10px;border-top:1px solid var(--border-strong)}
.qa-cl.on{padding-top:9px;border-top:2px solid var(--accent)}
.qa-cv{grid-row:2;align-self:baseline;font-family:var(--font-num);font-size:20px;font-weight:400;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.qa-cm{grid-row:3;font-family:var(--font-num);font-size:12px;line-height:1.4;color:var(--text-tertiary)}
.qa-c1{grid-column:1}.qa-c2{grid-column:3}
.qa-vs{grid-row:2;grid-column:2;align-self:baseline;font-size:12px;color:var(--text-tertiary)}
.qa-more{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:16px;margin-top:auto;padding-top:24px}
.qa-mr{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding:9px 0;border-top:1px solid var(--border);font-size:13px;line-height:1.4}
.qa-mr:last-child{border-bottom:1px solid var(--border)}
.qa-mr-v{font-family:var(--font-num);text-align:right;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.qa-mr-l{min-width:0;color:var(--text-secondary)}
.qa-mr-n{font-family:var(--font-num);font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-tertiary);white-space:nowrap}
.qa-ev .q-none{margin:0;font-size:13px;line-height:1.5;color:var(--text-tertiary)}
/* The chart: bars from zero, the subject on the line in full ink, the rest stepped back */
.qb-r{display:grid;grid-template-columns:minmax(0,128px) minmax(0,1fr) 72px;column-gap:16px;align-items:center;padding:8px 0;border-top:1px solid var(--border)}
.qb-r:last-child{border-bottom:1px solid var(--border)}
.qb+.qb{margin-top:16px}
.qb-n{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--text-secondary)}
.qb-n small{margin-left:6px;font-family:var(--font-num);font-size:11px;color:var(--text-tertiary)}
.qb-b{display:block;width:100%;height:6px;overflow:visible}
.qb-t{fill:var(--tint-1)}
.qb-f{fill:var(--text-tertiary);fill-opacity:.5}
.qb-z{stroke:var(--border-strong);stroke-width:1}
.qb-v{font-family:var(--font-num);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.qb-r.on .qb-n,.qb-r.on .qb-v{color:var(--text-primary)}
.qb-r.on .qb-f{fill:var(--accent);fill-opacity:1}
.qa-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}
.qa-acts{display:flex;flex-wrap:wrap;gap:10px}
.qa-comp{flex:1 1 320px;margin:0;max-width:60ch;font-size:12px;line-height:1.5;color:var(--text-tertiary)}
/* Inside a column the actions sit on the answer's own grid, at the column's foot, with no second rule over them */
.qa-main>.qa-foot,.qa-ev>.qa-foot{margin-top:auto;padding-top:24px;border-top:0}

/* Narrow: the same rows, the question and its figure on one line, the sentence under them */
@container (max-width:760px){
  .q-row{grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"q f c" "a f c";column-gap:12px}
  .q-figw{align-self:start}
  .q-sum-in>:first-child{margin-top:4px}
  .qa-body{grid-template-columns:minmax(0,1fr)}
  /* One column: the answer, the chart, then the actions, whichever column holds them on a wide screen */
  .qa-body:not(.solo){display:flex;flex-direction:column;row-gap:0}
  .qa-body:not(.solo)>.qa-main{display:contents}
  .qa-body:not(.solo)>.qa-ev{margin-top:28px}
  .qa-main>.qa-foot{order:1}
  .qa-cmp{column-gap:12px}
  .qa-acts{flex:1 1 100%;flex-direction:column}
  .qa-acts .btn{width:100%}
  .qa-comp{flex-basis:100%}
}
@media(max-width:760px){.qa-fig{font-size:32px}}

/* The chapter words and the filter: one ruled row of underline words, flat */
/* The rule is an inset shadow, so the chosen word's 2px line can sit on it with
   no negative margins (the words scroll sideways on a narrow phone, which clips). */
#pg-insights>.ins-jump-dock{display:flex;align-items:stretch;flex-wrap:wrap;gap:0 24px;margin:0 0 16px;padding-top:6px;background:none;box-shadow:inset 0 -1px 0 var(--border);pointer-events:auto}
#pg-insights>.ins-jump-dock.pinned{background:var(--atmos),var(--bg-base);background-attachment:fixed}
#pg-insights .ins-jump{display:flex;flex:0 1 auto;align-items:stretch;gap:24px;margin:0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none;max-width:none}
#pg-insights .ins-jump-a{flex:none;margin:0;padding:10px 0 8px;background:none;border:0;border-bottom:2px solid transparent;border-image:none;border-radius:0;box-shadow:none;font-size:13px;font-weight:500;letter-spacing:0;color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-standard),border-color .18s var(--ease-standard)}
#pg-insights .ins-jump-a:hover{color:var(--text-primary);background:none}
#pg-insights .ins-jump-a.on,#pg-insights .ins-jump-a.on:hover,#pg-insights .ins-jump-a.ins-jump-guide[aria-pressed="true"]{color:var(--text-primary);background:none;box-shadow:none;border-image:none;border-bottom:2px solid var(--accent)}
#pg-insights .ins-jump-div{flex:none;align-self:center;width:1px;height:14px;margin:0;background:var(--border-strong)}
#pg-insights #ins-asset-filter{display:flex;flex:0 0 auto;align-items:stretch;gap:16px;margin:0 0 0 auto;padding:0}
#pg-insights #ins-asset-filter[hidden]{display:none!important}
#pg-insights #ins-asset-filter .af-lbl{align-self:center;margin:0}
#pg-insights #ins-asset-filter .af-btn{height:auto;margin:0;padding:10px 0 8px;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:13px;font-weight:500;color:var(--text-secondary);text-decoration:none}
#pg-insights #ins-asset-filter .af-btn:hover{color:var(--text-primary)}
#pg-insights #ins-asset-filter .af-btn.on{color:var(--text-primary);text-decoration:none;border-bottom:2px solid var(--accent)}
#pg-insights .ins-jump-a:focus-visible,#pg-insights #ins-asset-filter .af-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:700px){
  #pg-insights>.ins-jump-dock{box-shadow:none}
  #pg-insights .ins-jump{flex:1 1 100%;gap:18px;box-shadow:inset 0 -1px 0 var(--border)}
  #pg-insights #ins-asset-filter{flex:1 1 100%;margin:0;box-shadow:inset 0 -1px 0 var(--border)}
}
/* One padding inside every card, one gutter between them */
#pg-insights .cc,#pg-insights #ins-guide{padding:24px}
#pg-insights .ins-bento,#pg-insights .cr{gap:16px;margin-bottom:16px}
/* Figures in the evidence's charts wear the mono, at the weights it has. Several
   are drawn with inline weights by their renderers, hence the importance. */
#pg-insights .ins-breakdown-stat,#pg-insights .ins-breakdown-sub,#pg-insights .ins-dleg .dv,#pg-insights .ins-dleg .dp,#pg-insights .ins-donut .dc b,#pg-insights #ins-tod-viz b,#pg-insights #grade-breakdown strong,#pg-insights #grade-breakdown span[style*="font-weight:700"],#pg-insights #dow-strips span[style*="text-align:right"],#pg-insights #ins-monthly-chart div[style*="font-weight:700"],#pg-insights #ins-plan-losers div[style*="font-size:24px"],#pg-insights #postloss-viz div[style*="font-size:20px"],#pg-insights #ins-psych-kpis div[style*="font-size:24px"],#pg-insights #ins-best-tb td:nth-child(n+3),#pg-insights #ins-worst-tb td:nth-child(n+3){font-family:var(--font-num)!important;font-weight:500!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#pg-insights #ins-st-avgr{font-family:var(--font-num);font-variant-numeric:tabular-nums}
@media(max-width:768px){#pg-insights #ins-content .cc,#pg-insights #ins-guide{padding:16px}}
/* The cards are there when the page arrives: one composed arrival, no reveal on scroll */
#pg-insights #ins-content .cc,#pg-insights #ins-content .kc,#pg-insights #ins-content .itc{opacity:1;transform:none}
/* ── Insights: the answers and the instruments, side by side ────────────────
   The ten answers are a ruled list on the left; on the right a rail holds the
   two instruments, expectancy with its curve and the Edge Score with its four
   readings, and stays while the answers scroll. The four chapters of charts
   follow at full width under the same ruled row of words, which pins under
   the top bar; nothing on the page is folded away. Below 1100px the rail sits
   above the answers as two cards side by side, one above the other on a phone. */
#pg-insights .ps{max-width:64ch}
.ins-top{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,32%,380px);grid-template-areas:"q rail";column-gap:32px;align-items:start;margin:0 0 8px}
.ins-top[hidden]{display:none}
.ins-top>.q-block{grid-area:q}
/* 36px: the pinned row's foot (its dock pins 24px above #main's content edge and stands 44px) plus one gutter */
.ins-rail{grid-area:rail;position:sticky;top:36px;display:flex;flex-direction:column;gap:16px;min-width:0}
#pg-insights .ins-rail .cc{margin:0}
/* Expectancy, the page's one hero figure, on the rule the other pages' heroes sit on */
#ins-exp-card .ins-hero-fig{position:relative;display:inline-block;max-width:100%;margin-top:2px;padding-bottom:10px}
#ins-exp-card .ins-hero-fig::after{content:"";position:absolute;left:1px;right:0;bottom:0;height:2px;border-radius:1px;background:var(--metal-rule)}
#ins-exp-card .st-val{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-family:var(--font-num);font-size:clamp(44px,4vw,56px);font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#ins-exp-card .ifs-meta{margin-top:10px;font-size:12px;line-height:1.5;color:var(--text-tertiary)}
.ins-rail-eb{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:18px 0 0;font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);line-height:1.4}
.ins-rail-eb span{font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none}
#ins-exp-card .ins-rail-chart{position:relative;height:140px;margin-top:10px}
#ins-exp-card .ins-r-hint{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--border);font-size:12px;line-height:1.5;color:var(--text-secondary)}
/* The Edge Score: the dial and its four readings */
#ins-edge-card .es-inner{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center}
#ins-edge-card .es-left{gap:0}
#ins-edge-card #es-svg{width:112px;height:112px}
#ins-edge-card .es-tier-badge{margin-top:10px}
#ins-edge-card #kpi-row{display:flex;flex-direction:column;justify-content:center;align-self:stretch;gap:0;height:auto;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
#ins-edge-card #kpi-row .kc{display:block;padding:9px 0;background:none;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none}
#ins-edge-card #kpi-row .kc:first-child{border-top:0;padding-top:0}
#ins-edge-card #kpi-row .kc:last-child{padding-bottom:0}
#ins-edge-card #kpi-row .kl{margin:0 0 3px}
#ins-edge-card #kpi-row .kl small{display:block;margin-top:1px;font-family:var(--font-body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--text-tertiary)}
#ins-edge-card #kpi-row .kv-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#ins-edge-card #kpi-row .kv,#ins-edge-card #kpi-row .kv.kwin,#ins-edge-card #kpi-row .kv.kloss{font-family:var(--font-num);font-size:18px;font-weight:400;letter-spacing:-.01em;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#pg-insights .ins-delta{padding:0;background:none;font-family:var(--font-num);font-size:11px;font-weight:400;color:var(--text-tertiary);transform:none}
#pg-insights .ins-delta.up,#pg-insights .ins-delta.down{background:none;color:var(--text-tertiary)}
:root[data-theme="light"] #pg-insights #ins-edge-card{background:var(--bg-elevated)}
.es-more{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;font-weight:500;color:var(--accent);cursor:pointer;text-decoration:none}
.es-more svg{width:14px;height:14px;flex:none;transform:rotate(-90deg)}
.es-more:hover{color:var(--text-primary)}
.es-more:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
/* The score's five parts as one strip under the Edge heading, and how it is scored on request */
#ins-score-card #es-components{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 24px;margin-top:4px}
#ins-score-card .es-comp{margin:0;min-width:0}
#ins-score-card .es-comp-name{font-weight:500}
#ins-score-card .es-hint{grid-column:1/-1;margin-top:4px;font-size:13px;line-height:1.5;color:var(--text-secondary)}
#ins-score-card .es-hint-l{color:var(--text-primary);font-weight:600}
.es-how-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer}
.es-how-btn:hover{color:var(--text-primary)}
.es-how-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.es-how-btn svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-standard)}
.es-how-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.es-how{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.es-how[hidden]{display:none}
.es-how-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 24px;margin:0}
.es-how-grid dt{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.es-how-grid dt span{margin-left:4px;font-family:var(--font-num);font-weight:400;color:var(--text-tertiary)}
.es-how-grid dd{margin:0;font-size:12px;line-height:1.5;color:var(--text-secondary)}
.es-how-tiers{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-family:var(--font-num);font-size:11px;letter-spacing:.02em;color:var(--text-tertiary)}
.es-how-tiers span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.es-how-tiers .tier-mark{width:10px;height:10px}
.es-how-tiers .stone{color:var(--tier-stone)}.es-how-tiers .iron{color:var(--tier-iron)}.es-how-tiers .bronze{color:var(--tier-bronze)}.es-how-tiers .silver{color:var(--tier-silver)}.es-how-tiers .gold{color:var(--tier-gold)}.es-how-tiers .platinum{color:var(--tier-platinum)}.es-how-tiers .elite{color:var(--tier-elite)}
/* Chapter heads: the word, then the one line that says what the chapter is for */
#pg-insights .ins-chapter{margin:40px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
#pg-insights .ins-chapter-t{margin-bottom:6px}
#pg-insights .ins-chapter-q{margin:0;max-width:60ch;font-family:var(--font-body);font-size:19px;font-weight:500;line-height:1.38;letter-spacing:-.012em;color:var(--text-primary)}
/* The figure and, under it, the chapter whose charts carry the answer: the same word as the ruled row */
.q-figw{grid-area:f;position:relative;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;transition:opacity .2s var(--ease-out) .06s}
.q-ch{font-size:12px;line-height:1.3;color:var(--text-tertiary);white-space:nowrap}
.q-card.open .q-figw{opacity:0;transition:opacity .12s var(--ease-in)}
/* The eyebrow's note, and the one line that explains the readings' arrows */
#pg-insights .cc-t .cc-t-note{margin-left:auto;font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-tertiary)}
.es-note{margin-top:12px;font-size:11px;line-height:1.4;color:var(--text-tertiary)}
.es-note[hidden]{display:none}
/* The phone's strip: hidden until the rail moves under the list */
.ins-strip{display:none}
/* The lead row: what is costing most is the page's verdict, so its sentence reads in full ink */
.q-card.lead .q-a{color:var(--text-primary)}
.q-card.lead .q-fig{font-size:22px}
/* Six words on a phone's ruled row */
@media(max-width:480px){#pg-insights .ins-jump{gap:14px}#pg-insights .ins-jump-a{font-size:12px}}
@media(max-width:380px){#pg-insights .ins-jump{gap:10px}}
@media(max-width:1100px){
  .ins-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"rail" "q";row-gap:24px}
  .ins-rail{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media(max-width:768px){#ins-exp-card .ins-rail-chart{height:120px}}
@media(max-width:640px){
  /* The strip leads, then the answers, then the full instruments (the curve without its figure, the dial with its readings) */
  .ins-top{grid-template-areas:"strip" "q" "rail"}
  .ins-strip{display:grid;grid-area:strip;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:16px;padding:16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);box-shadow:inset 0 1px 0 var(--hi)}
  .ins-strip-cell{min-width:0}
  .ins-strip-cell+.ins-strip-cell{padding-left:16px;border-left:1px solid var(--border)}
  .ins-strip .cc-t{margin-bottom:8px}
  .ins-strip-fig{font-family:var(--font-num);font-size:34px;font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
  .ins-strip-fig-s{font-size:26px;padding-top:7px}
  .ins-strip-meta{margin-top:8px;font-size:12px;line-height:1.4;color:var(--text-tertiary)}
  .ins-rail{grid-area:rail;grid-template-columns:minmax(0,1fr)}
  #ins-exp-card .cc-t,#ins-exp-card .ins-hero-fig,#ins-exp-card .ifs-meta{display:none}
  #ins-exp-card .ins-rail-eb{margin-top:0}
  #ins-edge-card #es-svg{width:100px;height:100px}
  #pg-insights .ins-chapter-q{font-size:16px}
  #ins-score-card #es-components{grid-template-columns:minmax(0,1fr)}
}
/* ── Finish IV, Now on one grid ─────────────────────────────────────────────
   One inset for every card on Now (24px, 20px on a phone), 20px between every
   pair of blocks, one 16px gutter on a phone, and each card's header one 18px
   row with the right-hand figure on the title's baseline. From 1181px the
   header spans the column (the session row runs edge to edge, FILTER rides
   the date's line), the day's two cards share a row and Expectancy takes the
   full width: the hero in a left column, the eight figures a 4x2 table beside
   it. Today's trades and Needs review are tables: one grid, 40px rows. */
#pg-daily #dash-expect,#pg-daily #dash-reserve,#pg-daily #dp-today-card,#pg-daily #dash-curve-card,#pg-daily #dash-sentence,#pg-daily #dash-review,#pg-daily #cd-bias,#pg-daily #dash-session,#pg-daily #dash-streak3,#pg-daily #dash-week,#pg-daily #dash-month,#pg-daily #dash-first,#pg-daily #dash-profit-card,#pg-daily #dash-cal-card,#pg-daily #dash-streak-card,#pg-daily #dash-badges-card{padding:24px}
@media(max-width:700px){#pg-daily #dash-expect,#pg-daily #dash-reserve,#pg-daily #dp-today-card,#pg-daily #dash-curve-card,#pg-daily #dash-sentence,#pg-daily #dash-review,#pg-daily #cd-bias,#pg-daily #dash-session,#pg-daily #dash-streak3,#pg-daily #dash-week,#pg-daily #dash-month,#pg-daily #dash-first,#pg-daily #dash-profit-card,#pg-daily #dash-cal-card,#pg-daily #dash-streak-card,#pg-daily #dash-badges-card{padding:20px}}
@media(max-width:768px){#pg-daily{padding-left:2px;padding-right:2px}}
@media(max-width:480px){#pg-daily{padding-left:6px;padding-right:6px}}
#pg-daily .dash-top-left{align-self:stretch}
@media(min-width:1181px){#pg-daily #dash-asset-filter{grid-area:head;justify-self:end;align-self:start;position:relative;z-index:2;margin:36px -8px 0 0}}
/* Card headers */
#pg-daily .dash-fig-eb,#pg-daily .dash-card-hd,#pg-daily .dash-eq-hd{line-height:18px;min-height:18px}
.dash-card-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;margin-bottom:8px}
.dash-card-hd>*{white-space:nowrap}
.dash-card-hd>.dash-fig-eb{margin-bottom:0}
#pg-daily .dash-card-hd .prog-reset{line-height:18px;align-items:baseline;margin:-2px 0}
#pg-daily .dash-card-hd .prog-reset svg{align-self:center}
#pg-daily .dash-eq-hd{align-items:baseline;gap:12px}
#pg-daily .dash-eq-lbl{color:var(--text-tertiary)}
/* The game plan's fields: space between them, none after the last, so the card ends on its inset. */
#pg-daily #cd-bias .gp-field{margin-bottom:0}
#pg-daily #cd-bias .gp-field+.gp-field{margin-top:16px}
/* The curve fills its card: when the cards beside it run taller, the chart grows instead of leaving a gap under it. */
.dash-eq-wrap{position:relative;height:236px}
#pg-daily #dash-curve-card{display:flex;flex-direction:column}
#pg-daily #dash-eq-wrap{height:auto;flex:1 1 236px;min-height:236px}
/* Expectancy: the hero, then the eight figures as one table. The table is two
   columns in a narrow card, four under the hero in a wider one, and beside
   the hero once the card is wide enough for both. */
#pg-daily #dash-expect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);align-content:start;row-gap:3px;column-gap:0;container:dx/inline-size}
#pg-daily #dash-expect>*{grid-column:1/-1;min-width:0}
#pg-daily #dash-expect>#dx-val{justify-self:start}
#pg-daily #dash-kpi-row{display:block;margin:17px 0 -10px;padding:10px 0 0;border-top:1px solid var(--border)}
#pg-daily #dash-kpi-row .dash-kpi-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#pg-daily #dash-kpi-row .dash-kpi-line+.dash-kpi-line{border-top:1px solid var(--border)}
#pg-daily #dash-kpi-row .dash-kpi-tile{background:none;border:0;border-left:1px solid var(--border);box-shadow:none;border-radius:0;margin:0;padding:10px 0 10px 20px;gap:8px;min-width:0}
#pg-daily #dash-kpi-row .dash-kpi-tile:nth-child(odd){padding-left:0;border-left:0}
#pg-daily #dash-kpi-row .dp-kpi-lbl{font-family:var(--font-num);font-size:11px;font-weight:400;letter-spacing:.10em;line-height:14px;color:var(--text-tertiary);margin:0;min-height:0;white-space:nowrap}
#pg-daily #dash-kpi-row .dp-kpi-val.sm{font-family:var(--font-num);font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:22px;font-variant-numeric:tabular-nums}
@container dx (max-width:301px){#pg-daily #dash-kpi-row .dp-kpi-lbl{white-space:normal}}
@container dx (min-width:640px){
#pg-daily #dash-kpi-row .dash-kpi-line{grid-template-columns:repeat(4,minmax(0,1fr))}
#pg-daily #dash-kpi-row .dash-kpi-tile:nth-child(3){padding-left:20px;border-left:1px solid var(--border)}}
@container dx (min-width:900px){
#pg-daily #dash-expect>#dx-val,#pg-daily #dash-expect>.dash-fig-s,#pg-daily #dash-expect>#dx-delta{grid-column:1}
#pg-daily #dash-expect>#dash-kpi-row{grid-column:2;grid-row:2/span 3;align-self:center;margin:-10px 0;padding:0;border-top:0}
#pg-daily #dash-kpi-row .dash-kpi-tile:first-child{padding-left:20px;border-left:1px solid var(--border)}}
/* Today's trades: symbol, direction, result, R, $, then Open at the end. */
#pg-daily #dp-today-card{container-type:inline-size}
#pg-daily #dp-today-list{display:grid;grid-template-columns:minmax(0,max-content) repeat(4,max-content) minmax(0,1fr) max-content;column-gap:14px}
#pg-daily #dp-today-list>*{grid-column:1/-1}
@container (max-width:340px){#pg-daily #dp-today-list{column-gap:10px}}
@container (max-width:300px){.today-trade-pnl{display:none}}
@container (max-width:220px){.today-trade-dir{display:none}}
.today-trade-row{display:grid;grid-template-columns:subgrid;align-items:baseline;align-content:center;height:40px;min-width:0;border-top:1px solid var(--border)}
.today-trade-row:first-child{border-top-color:transparent}
/* A new row opens its height (240ms out) and its cells rise 4px into view
   from +60ms. The wrapper and its clip are subgrids, so the cells stay on the
   list's columns while it opens. */
#pg-daily #dp-today-list>.tt-open{display:grid;grid-template-columns:subgrid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--ease-out)}
#pg-daily #dp-today-list>.tt-open.on{grid-template-rows:1fr}
.tt-clip{grid-column:1/-1;display:grid;grid-template-columns:subgrid;min-height:0;overflow:hidden}
.tt-clip>.today-trade-row{grid-column:1/-1;border-top-color:var(--border)}
.tt-open:first-child .today-trade-row{border-top-color:transparent}
.tt-clip>.today-trade-row>*{opacity:0;transform:translateY(4px);transition:opacity .16s var(--ease-out) .06s,transform .16s var(--ease-out) .06s}
.tt-open.on .today-trade-row>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tt-clip>.today-trade-row>*{transition-delay:0s!important}}
.today-trade-inst{grid-column:1;min-width:0;font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-trade-dir{grid-column:2;font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.today-trade-outcome{grid-column:3;justify-self:stretch;text-align:center;font-size:11px;font-weight:500;line-height:16px;padding:0 7px;border:1px solid var(--border-strong);border-radius:4px;color:var(--text-secondary);white-space:nowrap}
.today-trade-outcome.o-none{color:var(--text-tertiary)}
.today-trade-r{grid-column:4;justify-self:end;font-family:var(--font-num);font-size:13px;font-weight:500;color:var(--text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}
.today-trade-pnl{grid-column:5;justify-self:end;font-family:var(--font-num);font-size:12px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}
.today-trade-r.up,.today-trade-pnl.up{color:var(--win)}
.today-trade-r.down,.today-trade-pnl.down{color:var(--loss)}
.today-trade-edit{grid-column:7;justify-self:end;font-size:12px;color:var(--text-tertiary);cursor:pointer;background:none;border:0;padding:0;font-family:var(--font-body);transition:color var(--dur-fast)}
.today-trade-edit:hover{color:var(--accent)}
/* Needs review: symbol, direction, date, then the R at the end. The hover fill
   reaches 8px past the inset so the words sit on it. */
#pg-daily #dash-review-list:has(>.cmp-fill){display:grid;grid-template-columns:minmax(0,max-content) repeat(2,max-content) minmax(0,1fr) max-content;column-gap:14px}
#pg-daily #dash-review-list>*{grid-column:1/-1}
.cmp-fill{position:relative;display:grid;grid-template-columns:subgrid;align-items:baseline;align-content:center;height:40px;margin:0 -8px;padding:0 8px;border-radius:var(--rs);font-size:13px;color:var(--text-secondary);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.cmp-fill+.cmp-fill::before{content:"";position:absolute;left:8px;right:8px;top:0;border-top:1px solid var(--border);transition:opacity var(--dur-fast) var(--ease-out)}
.cmp-fill b{grid-column:1;min-width:0;color:var(--text-primary);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-fill .d{grid-column:2;font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.cmp-fill .t{grid-column:3;font-family:var(--font-num);font-size:11px;color:var(--text-tertiary);white-space:nowrap}
.cmp-fill .n{grid-column:5;justify-self:end;font-family:var(--font-num);font-size:13px;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-fill .n.up{color:var(--win)}.cmp-fill .n.down{color:var(--loss)}
@media(hover:hover){.cmp-fill:hover{background:var(--tint-1)}.cmp-fill:hover::before,.cmp-fill:hover+.cmp-fill::before{opacity:0}}

/* ── The record, finished: one row height, one chip, one gutter ─────────────
   Every Trade Log row is 56px with every cell on the midline, date over time
   in two lines with the open-chevron on the time line. Prices, R and P&L are
   DM Mono, tabular, right-aligned under right-aligned heads. The six row chips
   (instrument, notes, direction, grade, psych, outcome) are one 20px hairline
   chip; green and red stay on R, P&L and the Win/Loss chip. The table's
   sixteen columns fit a 1440 screen, so R and P&L are in view without a
   sideways scroll. */
#trades-table{font-size:13px}
#trades-table thead th{height:40px;padding:0 6px;vertical-align:middle}
#trades-table thead th:first-child{padding-left:16px}
/* Column widths at 1440: the words and chips hold their widths, the figures
   take whatever room is left, so all sixteen fit the frame with R and P&L in view */
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(1){width:84px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(2){width:106px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(3){width:92px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(4){width:40px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(5),#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(6){width:66px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(10),#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(12){width:50px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(11){width:58px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(13){width:70px}
#trades-table thead tr:not(.tl-mob-hd)>th:nth-child(16){width:72px}
#trades-table th.tl-num,#trades-table td.tl-num{text-align:right}
#trades-table th.tl-mid,#trades-table td.tl-mid{text-align:center}
#trades-table tbody tr.desk-trade-row>td,#trades-table tbody tr.mob-trade-row>td{height:56px;padding:0 6px;vertical-align:middle;line-height:1.3}
#trades-table tbody tr.desk-trade-row>td:first-child,#trades-table tbody tr.mob-trade-row>td:first-child{padding-left:16px}
/* Date over time */
#trades-table .tl-d{font-size:13px;line-height:17px;color:var(--text-primary);white-space:nowrap}
#trades-table .tl-t{display:flex;align-items:center;gap:6px;height:15px;margin-top:2px;font-family:var(--font-num);font-size:11px;line-height:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--text-tertiary);white-space:nowrap}
#trades-table .tl-t:empty{display:none}
#trades-table .desk-exp-chevron{margin:0;font-family:var(--font-body);font-size:13px;line-height:1;color:var(--text-tertiary);transition:transform var(--dur-fast) var(--ease-standard)}
/* Account: the account's dot, then its name, cut short with an ellipsis */
#trades-table .tl-ac{display:inline-flex;align-items:center;gap:7px;max-width:100%;vertical-align:middle;color:var(--text-secondary)}
#trades-table .tl-ac-dot{width:6px;height:6px;border-radius:50%;flex:none}
#trades-table .tl-ac-n{min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One chip for all six */
#trades-table .inst-badge,#trades-table .tl-needs-note,#trades-table .pill,#trades-table .chip-n{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:20px;min-width:20px;margin:0;padding:0 6px;border:1px solid var(--border-strong);border-radius:var(--rs);background:none;box-shadow:none;font-family:var(--font-num);font-size:11px;font-weight:500;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums;text-transform:none;color:var(--text-primary);white-space:nowrap;vertical-align:middle}
#trades-table .tl-needs-note{text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
#trades-table .tl-c-inst{white-space:nowrap}
#trades-table .tl-c-inst .tl-needs-note{margin-left:4px}
#trades-table .tl-chips{display:inline-flex;gap:4px;vertical-align:middle}
#trades-table .pill.p-w{color:var(--win)}
#trades-table .pill.p-l{color:var(--loss)}
#trades-table .pill.p-b{color:var(--text-secondary)}
#trades-table .pill.p-n{color:var(--text-tertiary)}
#trades-table .cell-empty-cta{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--rs);font-size:11px;font-weight:500;color:var(--text-tertiary);white-space:nowrap;vertical-align:middle}
#trades-table .cell-empty-cta:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
/* Figures */
#trades-table td.tl-num{font-family:var(--font-num);font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums}
#trades-table td.tl-num .rp,#trades-table td.tl-num .rn{font-weight:500}
#trades-table .tl-none{color:var(--text-tertiary)}
/* The pinned actions: on the midline, two 26px buttons; the edge shadow only
   when the table is wider than its frame */
:root #trades-table td.trade-act-cell{display:table-cell;height:56px;padding:0 10px 0 6px;text-align:center;vertical-align:middle;white-space:nowrap;box-shadow:none}
:root #trades-table th.trade-act-cell{padding-right:10px;box-shadow:none}
#trades-table td.trade-act-cell .bic{width:26px;height:26px;vertical-align:middle}
#trades-table td.trade-act-cell .bic+.bic{margin-left:4px}
:root #trades-tw.tl-over #trades-table td.trade-act-cell,:root #trades-tw.tl-over #trades-table th.trade-act-cell{box-shadow:-11px 0 13px -9px rgba(0,0,0,.6)}
:root[data-theme="light"] #trades-tw.tl-over #trades-table td.trade-act-cell,:root[data-theme="light"] #trades-tw.tl-over #trades-table th.trade-act-cell{box-shadow:-11px 0 13px -9px rgba(0,0,0,.18)}
:root #trades-table tbody tr.desk-trade-row:hover>td.trade-act-cell{background:var(--bg-hover)}
/* An opened trade and its notes read as one object on the surface tone, its
   outcome line running down the side of both */
:root #trades-table tbody tr.desk-row-open,:root #trades-table tbody tr.mob-row-open{background:var(--bg-surface)}
:root #trades-table tbody tr.desk-row-open>td.trade-act-cell{background:var(--bg-surface)}
#trades-table tr[data-oc="win"] .desk-exp-card,#trades-table tr[data-oc="win"] .mob-exp-card{box-shadow:inset 3px 0 0 var(--win-border)}
#trades-table tr[data-oc="loss"] .desk-exp-card,#trades-table tr[data-oc="loss"] .mob-exp-card{box-shadow:inset 3px 0 0 var(--loss-border)}
#trades-table td.tl-exp-td{height:auto;padding:0;white-space:normal}
#trades-table .desk-exp-card{padding:4px 24px 18px 90px;background:var(--bg-surface);border-top:0;border-bottom:1px solid var(--border);gap:24px}
#trades-table .tl-exp-notes{max-width:72ch;font-size:13px;line-height:1.55;color:var(--text-primary);white-space:normal}
#trades-table .tl-exp-none{font-size:12px;line-height:1.55;font-style:italic;color:var(--text-tertiary)}
#trades-table .trade-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
#trades-table .tl-exp-notes+.trade-tags,#trades-table .tl-exp-none+.trade-tags{margin-top:12px}
#trades-table .trade-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:20px;padding:0 6px;border:1px solid var(--border-strong);border-radius:var(--rs);background:none;font-family:var(--font-num);font-size:11px;font-weight:500;line-height:1;letter-spacing:.02em;color:var(--text-secondary)}
#trades-table .desk-exp-chart{max-width:320px;border-radius:var(--rm);border:1px solid var(--border-strong)}
/* The month row: name, count, the four figures, Review at the right */
:root #trades-table .trade-month-hdr>td{height:44px;padding:0 12px 0 16px !important}
#trades-table .tm-row{display:flex;align-items:center;gap:14px;min-width:0}
#trades-table .tm-toggle{gap:8px}
#trades-table .tm-chv{display:inline-block;width:10px;font-size:12px;line-height:1;text-align:center;color:var(--text-secondary);transition:transform var(--dur-base) var(--ease-standard)}
#trades-table .tm-chv.shut{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){#trades-table .tm-chv,#trades-table .desk-exp-chevron,#trades-table .tl-chv{transition:none}}
#trades-table .tm-name{font-size:13px;font-weight:600;color:var(--text-primary)}
#trades-table .tm-count{font-family:var(--font-num);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-tertiary);white-space:nowrap}
#trades-table .tm-figs{display:inline-flex;align-items:baseline;gap:14px;font-family:var(--font-num);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
#trades-table .tm-figs .rp,#trades-table .tm-figs .rn{font-weight:500}
#trades-table .tm-review{margin-left:auto}
#trades-table .tl-more-row>td{padding:20px 0;text-align:center}
#trades-table .tl-more{height:36px;padding:0 24px;border:1px solid var(--border);border-radius:var(--rm);background:var(--bg-card);color:var(--text-secondary);font:500 13px var(--font-body);cursor:pointer;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
#trades-table .tl-more:hover{color:var(--text-primary);border-color:var(--border-strong)}
/* The summary strip: counts in ink, signed R and P&L in their colours, as in the spine */
#trades-sum .sum-val.rp{color:var(--win)}
#trades-sum .sum-val.rn{color:var(--loss)}
#trades-sum .sum-val.tl-dim{color:var(--text-tertiary)}
#trades-sum .sum-val.tl-amber{color:var(--amber)}
#trades-sum .sum-val.tl-sum-multi{font-size:14px}
/* The zoom row and the sub-tabs: words with the line under the chosen one,
   the first word on the page's edge */
#pg-trades .rec-zoom{gap:24px}
#pg-trades .rec-zoom-btn{padding:9px 0}
#pg-trades .tl-subtabs{gap:24px}
#pg-trades .tl-subtabs .tl-subtab{padding:9px 0}
/* The filter row: one control height, the day theme's select chevrons drawn in
   navy ink, the night date pickers drawn for a dark field */
#pg-trades .fb .fi,#pg-trades .fb .fs{height:32px;font-size:12px}
#pg-trades .fb .tl-seg{padding-left:0}
#pg-trades .fb .tl-seg .tl-seg-btn:first-child{padding-left:0}
#pg-trades .fb .tl-fm-pair{min-width:90px}
#pg-trades .fb .tl-fm-tag{min-width:100px}
#pg-trades .fb .tl-fm-pb{min-width:110px}
#pg-trades .fb input[type="date"]{color-scheme:dark}
:root[data-theme="light"] #pg-trades .fb input[type="date"]{color-scheme:light}
:root[data-theme="light"] #pg-trades .fb .fs{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(14,26,38,0.55)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* ── The record on a phone: a 16px gutter, the six-column Trade Log ── */
@media(max-width:768px){
  #pg-trades{padding-left:2px;padding-right:2px}
  #pg-trades .fb .fi,#pg-trades .fb .fs,#pg-trades .fb .tl-seg{height:36px}
  #trades-tw{overflow-x:auto}
  #trades-tw tr.tl-mob-hd>th,#trades-tw tr.mob-trade-row>td{display:table-cell !important}
  #trades-table thead th{height:36px;padding:0 5px}
  #trades-table thead th:first-child{width:auto;padding-left:12px}
  #trades-table tbody tr.mob-trade-row>td{padding:0 5px}
  #trades-table tbody tr.mob-trade-row>td:first-child{padding-left:12px}
  #trades-table .tl-chv-c,#trades-table tbody tr.mob-trade-row>td.tl-chv-c{width:22px;padding:0 10px 0 2px;text-align:center}
  #trades-table .tl-chv{display:inline-block;font-size:15px;line-height:1;color:var(--text-tertiary);transition:transform var(--dur-fast) var(--ease-standard)}
  #trades-table .mob-trade-row.mob-row-open .tl-chv{transform:rotate(90deg)}
  #trades-table .tl-c-inst .tl-needs-note{display:flex;width:max-content;margin:4px 0 0}
  :root #trades-table .trade-month-hdr>td{height:auto;padding:10px 12px !important}
  #trades-table .tm-row{flex-wrap:wrap;column-gap:10px;row-gap:6px}
  #trades-table .tm-review{order:2}
  #trades-table .tm-figs{order:3;flex:1 0 100%;gap:14px;padding-left:18px}
  #trades-table .mob-exp-card{padding:4px 12px 14px;background:var(--bg-surface);border-top:0;border-bottom:1px solid var(--border)}
  #trades-table .mob-exp-grid{gap:12px 10px;margin-bottom:12px}
  #trades-table .mob-exp-lbl{margin-bottom:4px;font-family:var(--font-num);font-size:11px;font-weight:400;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
  #trades-table .mob-exp-val{font-size:13px;line-height:20px;color:var(--text-primary);white-space:normal}
  #trades-table .mob-exp-val.tl-fig{font-family:var(--font-num);font-size:12px;font-variant-numeric:tabular-nums}
  #trades-table .mob-exp-notes{margin:0 0 12px;padding:0;background:none;font-size:13px;line-height:1.55;font-style:normal;color:var(--text-primary);white-space:normal}
  #trades-table .tl-exp-tags{margin:0 0 12px}
  #trades-table .tl-exp-shot{margin:0 0 12px}
  #trades-table .tl-exp-img{display:block;max-width:100%;border-radius:var(--rm);border:1px solid var(--border-strong);cursor:pointer}
  #trades-table .tl-exp-btn{flex:1;height:36px;gap:6px;justify-content:center;font-size:12px}
  #trades-table .tl-exp-del{color:var(--loss)}
  #trades-sum{display:grid !important;grid-template-columns:repeat(4,auto);row-gap:12px;padding:12px 0}
  #trades-sum>div{min-width:0;padding:0 8px;border-left:1px solid var(--border)}
  #trades-sum>div:nth-child(4n+1){padding-left:0;border-left:0}
  #trades-sum .sum-lbl{white-space:nowrap}
}
@media(max-width:700px){
  #pg-trades .rec-zoom{flex-wrap:nowrap;overflow-x:auto;gap:16px}
  #pg-trades .rec-zoom-btn{padding:9px 0}
  #pg-trades .rec-zoom-link{flex:none;margin-left:auto;padding:9px 0 9px 4px;text-align:right}
}
@media(max-width:480px){
  #pg-trades{padding-left:6px;padding-right:6px}
  #pg-trades .rec-zoom{gap:14px}
  #rec-spine{padding:16px 16px 14px}
  #pg-trades .bconn-review-banner{flex-wrap:wrap;row-gap:12px}
  #pg-trades .bconn-review-banner .rv-tx{flex:1 1 0;min-width:0}
  #pg-trades .bconn-review-banner .rv-btn{flex:1 0 100%;height:36px}
}
@media(max-width:380px){
  #pg-trades .rec-zoom{gap:10px}
  #pg-trades .rec-zoom-btn,#pg-trades .rec-zoom-link{font-size:12px}
  #pg-trades .fb .tl-seg-btn{padding:0 5px}
  #pg-trades .fb .tl-seg .tl-seg-btn:first-child{padding-left:0}
  #trades-table thead th{padding:0 4px;letter-spacing:.06em}
  #trades-table tbody tr.mob-trade-row>td{padding:0 4px}
  #trades-table thead th:first-child,#trades-table tbody tr.mob-trade-row>td:first-child{padding-left:10px}
}
/* ── Reviews: the week read back, and its history ──
   One column and one spacing scale on both tabs. 16px from the page head to the
   tabs, whose rule runs the column's full width as the only rule there; 24px from
   that rule to whatever follows, and from the toolbar to the first card; 16px
   between cards in a group; 32px above every section label and 12px from a label
   to its card. Cards are 16px in. On a phone the gutter is 16px (#main's 14px or
   10px plus the page's own) and the title sits 24px under the top bar.
   One control spec: the week toolbar is the shared .btn-g and select at 36px and
   the small radius. The week sits in a fixed box between two chevron buttons on
   the column's left edge, so the chevrons never move with the dates; This week
   and the account select stand against the right edge.
   One type system: every label in one style (DM Mono 11/16, .10em caps,
   tertiary), every figure in DM Mono, tabular, every caption Geist 12/16.
   Expectancy is the one hero (44px, 34px on a phone); every other figure is
   20px. Colour is money: R figures wear the result colour; a win rate, a
   mindset score and a count stay in the ink.
   The hero and the R-curve card share one right-hand grid: two 160px columns,
   each opened by a 1px rule at the same x, so WIN RATE sits over BEST TRADE and
   TOTAL R over WORST TRADE. The hero's columns sit on one foot (the captions
   share a baseline); the curve card's labels share the card label's top. On a
   phone the grid drops under the figure (and the curve) behind a hairline 16px
   above it, keeps its one interior rule, and starts on the figure's own x. */
#pg-weekly .ph,#pg-reviews .ph{margin-bottom:16px}
/* The tabs: words with the line under the chosen one, the first word on the column's edge */
#pg-weekly .rev-seg,#pg-reviews .rev-seg{display:flex;gap:24px;margin:0 0 24px}
#pg-weekly .rev-seg-btn,#pg-reviews .rev-seg-btn{padding:9px 0}
/* The toolbar */
#pg-weekly .wr-topbar{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;max-width:1280px;margin:0 auto 24px}
#pg-weekly .wr-weeknav{display:flex;align-items:center;gap:8px;min-width:0}
#pg-weekly .wr-nav-btn{flex:none;width:36px;padding:0;color:var(--text-secondary)}
#pg-weekly .wr-nav-btn:hover{color:var(--text-primary)}
#pg-weekly .wr-nav-btn svg{display:block}
#pg-weekly .wr-hero-date{flex:none;width:240px;font-family:var(--font-display);font-size:15px;font-weight:500;line-height:20px;letter-spacing:0;text-align:center;color:var(--text-primary);white-space:nowrap}
#pg-weekly .wr-this-week-btn{flex:none;margin-left:auto;white-space:nowrap}
#pg-weekly select.wr-acc-sel{flex:none;width:auto;min-width:180px;max-width:240px;font-weight:500;background-color:var(--tint-1)}
/* The cards and the rhythm between them */
#pg-weekly .wr-journal .card{margin:0;padding:16px}
#pg-weekly .wr-journal .wr-snap-card,#pg-weekly .wr-journal .wr-ps-card{margin-top:16px}
#pg-weekly .wr-block{margin:32px 0 0}
#pg-weekly .wr-eyebrow{margin:0 0 12px;line-height:16px;gap:12px}
/* One right-hand grid for the hero and the curve */
#pg-weekly .wr-heroband,#pg-weekly .wr-snap-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:0}
#pg-weekly .wr-hb-main,#pg-weekly .wr-snap-curve{min-width:0;padding-right:24px}
#pg-weekly .wr-hb-side,#pg-weekly .wr-snap-tp{display:grid;grid-template-columns:160px 160px;gap:0;width:auto;margin:0}
#pg-weekly .wr-hb-stat,#pg-weekly .wr-snap-trade{min-width:0;padding:0 0 0 24px;border-left:1px solid var(--border)}
#pg-weekly .wr-hb-main,#pg-weekly .wr-hb-stat{display:flex;flex-direction:column;justify-content:flex-end}
/* Labels, figures, captions */
#pg-weekly .wr-hb-lbl,#pg-weekly .wr-hb-slbl,#pg-weekly .wr-snap-curve-lbl,#pg-weekly .wr-snap-lbl,#pg-weekly .wr-ps-lbl{margin:0 0 8px;font-family:var(--font-num);font-size:11px;font-weight:400;line-height:16px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
#pg-weekly #wr-k-exp{margin:0;font-family:var(--font-num);font-size:44px;font-weight:400;line-height:44px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#pg-weekly #wr-k-wr,#pg-weekly #wr-k-r,#pg-weekly .wr-snap-r,#pg-weekly .wr-ps-v{margin:0;font-family:var(--font-num);font-size:20px;font-weight:500;line-height:24px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#pg-weekly #wr-k-r.acc,#pg-weekly .wr-snap-r.up{color:var(--win)}
#pg-weekly #wr-k-r.kloss,#pg-weekly .wr-snap-r.dn{color:var(--loss)}
#pg-weekly .wr-hb-sub,#pg-weekly .wr-hb-ssub,#pg-weekly .wr-snap-pair,#pg-weekly .wr-ps-sub{margin:4px 0 0;font-family:var(--font-body);font-size:12px;font-weight:400;line-height:16px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The curve: the zero line a strong hairline's dash, the line in the result colour */
#pg-weekly .wr-snap-curve svg{display:block;width:100%;height:54px}
#pg-weekly .wr-snap-zero{stroke:var(--border-strong)}
#pg-weekly .wr-snap-ln{stroke:var(--win)}
#pg-weekly .wr-snap-ln.dn{stroke:var(--loss)}
#pg-weekly .wr-snap-nocurve{padding:0;font-size:12px;line-height:16px;color:var(--text-tertiary)}
/* How you traded */
#pg-weekly .wr-ps-row{display:flex;align-items:baseline;gap:8px}
#pg-weekly .wr-ps-row .wr-ps-sub{margin:0}
#pg-weekly .wr-ps-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#pg-weekly .wr-em{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--border);border-radius:var(--rs);background:var(--tint-1);font-size:12px;font-weight:500;line-height:16px;color:var(--text-secondary)}
#pg-weekly .wr-em b{font-family:var(--font-num);font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* Your review: the read, its disclaimer, then one rule above the footer */
#pg-weekly .wr-ai-idle-t{margin:0 0 4px;font-size:16px;font-weight:600;line-height:22px}
#pg-weekly .wr-ai-idle-p{max-width:560px;margin:0 0 16px;font-size:13px;line-height:20px}
#pg-weekly .wr-ai-note:empty{display:none}
#pg-weekly .wr-ai-out p.wr-disc{margin-top:16px;padding-top:0;border-top:0;font-size:12px;line-height:16px}
#pg-weekly .wr-ai-foot{gap:12px;margin-top:16px;padding-top:16px;font-size:12px;line-height:16px}
/* All trades this week: the disclosure on the column's edge, the list one ruled card */
#pg-weekly .wr-trades-det>summary{padding:0;line-height:20px}
#pg-weekly .wr-journal .wr-trades-card{margin-top:12px;padding:0;overflow:hidden}
#pg-weekly #wr-trade-list{background:none;border:0;border-radius:0}
#pg-weekly .wr-trade-r{font-family:var(--font-num);font-weight:500;letter-spacing:-.01em}
/* The history: the strip is three equal columns split by interior rules, framed
   by the tabs' rule above and its own below; the empty state centres on the column. */
#pg-reviews .rh-summary-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 24px;padding:0 0 24px;border-top:0;border-bottom:1px solid var(--border)}
#pg-reviews .rh-sum-card{display:block;min-height:0;padding:0 24px;background:none;border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:none;transform:none;transition:none}
#pg-reviews .rh-sum-card:first-child{padding-left:0;border-left:0}
#pg-reviews .rh-sum-card:last-child{padding-right:0}
#pg-reviews .rh-sum-card:hover{border-color:var(--border);box-shadow:none;transform:none}
#pg-reviews .rh-sum-lbl{margin:0 0 8px;font-family:var(--font-num);font-size:11px;font-weight:400;line-height:16px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary)}
#pg-reviews .rh-sum-val{margin:0;font-family:var(--font-num);font-size:20px;font-weight:500;line-height:24px;letter-spacing:-.01em;color:var(--text-primary);font-variant-numeric:tabular-nums}
#pg-reviews .rh-sum-sub{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--text-tertiary)}
#pg-reviews .rhc-empty{padding:48px 0 40px}
#pg-reviews .rhc-empty h3{margin:16px 0 8px;font-size:16px;font-weight:600;line-height:22px}
#pg-reviews .rhc-empty p{max-width:360px;margin:0 auto 24px;font-size:13px;line-height:20px}
#pg-reviews .rhc{padding:16px}
#pg-reviews .rhc-open{flex:none}
#pg-reviews .rhc-sval.up{color:var(--win)}
#pg-reviews .rhc-sval.dn{color:var(--loss)}
/* Phone */
/* Phone: below 768 every select is 16px (no zoom on focus), so the account select drops to 400 to sit with the 13px buttons */
@media(max-width:768px){#pg-weekly,#pg-reviews{padding:14px 2px 90px}#pg-weekly select.wr-acc-sel{font-weight:400}}
@media(max-width:640px){
  #pg-weekly .wr-topbar{flex-wrap:wrap}
  #pg-weekly .wr-weeknav{flex:1 0 100%}
  #pg-weekly .wr-hero-date{flex:1 1 auto;width:auto;min-width:0}
  #pg-weekly .wr-this-week-btn{margin-left:0}
  #pg-weekly select.wr-acc-sel{flex:1 1 0;min-width:0;max-width:none}
  #pg-weekly .wr-heroband,#pg-weekly .wr-snap-card{grid-template-columns:minmax(0,1fr)}
  #pg-weekly .wr-hb-main,#pg-weekly .wr-snap-curve{padding:0 0 16px}
  #pg-weekly .wr-hb-side,#pg-weekly .wr-snap-tp{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:16px;border-top:1px solid var(--border)}
  #pg-weekly .wr-hb-stat:first-child,#pg-weekly .wr-snap-trade:first-child{padding-left:0;border-left:0}
  #pg-weekly .wr-hb-stat+.wr-hb-stat,#pg-weekly .wr-snap-trade+.wr-snap-trade{padding-left:16px}
  #pg-weekly #wr-k-exp{font-size:34px;line-height:36px}
  #pg-reviews .rh-summary-row{grid-template-rows:repeat(3,auto);row-gap:0}
  #pg-reviews .rh-sum-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);justify-content:stretch;align-content:start;padding:0 12px}
  #pg-reviews .rh-sum-card:first-child{padding-left:0}
  #pg-reviews .rh-sum-card:last-child{padding-right:0}
  #pg-reviews .rh-sum-lbl,#pg-reviews .rh-sum-sub{text-wrap:balance}
  #pg-reviews .rhc-empty{width:100%;max-width:342px;margin-inline:auto;padding:40px 0 32px}
  #pg-reviews .rhc-empty p{max-width:34ch}
  #pg-reviews .rhc-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
}
@media(max-width:480px){#pg-weekly,#pg-reviews{padding:16px 6px 90px}}
/* ── Accounts, finished: one inset, one badge, one button, shared lines ──────
   Every card on the page is 16px in with 20px between cards (16 on a phone).
   Figures are DM Mono (the change line 12, the stat rows 14 at 500), words
   Geist. The hero's side stats are a label row over a value row, bottom-
   aligned so the values sit on the hero figure's baseline. The market, sync,
   dormant and Beta marks are one 20px hairline badge in the muted ink, and
   the account's colour is its 8px dot. Every broker card ends on one
   Secondary button on a shared line, three cards to a row; below 900px each
   broker is one ruled row with its button on the right. On a phone: a 16px
   gutter, the title 24px under the top bar, the subtitle on its own line. */
#pg-accounts .acc-ph{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start}
#pg-accounts .acc-ph-tx{display:contents}
#pg-accounts .acc-ph .pt{grid-column:1;grid-row:1;min-width:0}
#pg-accounts .acc-ph .ps{grid-column:1;grid-row:2}
/* centred on the title's line box (28px x 1.15 against the 36px control) */
#pg-accounts #acc-add-btn{grid-column:2;grid-row:1;margin-top:-2px}
#pg-accounts .tl-subtabs{gap:24px;margin:0 0 20px}
#pg-accounts .tl-subtabs .tl-subtab{padding:9px 0}
/* The hero. The figure is DM Mono at line-height 1 over its 10px rule, and
   DM Mono's baseline sits .16em above the foot of a line-height-1 box, so a
   22px side value lands on the figure's baseline when its row is lifted by
   10px + .16 x (figure - 22px). */
#pg-accounts .acov-hero{align-items:flex-end;gap:16px 24px;padding:16px;margin-bottom:20px}
#pg-accounts .acov-hero-lbl{line-height:16px;margin-bottom:8px}
#pg-accounts .acov-hero-stats{display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:auto auto;gap:0 20px;padding-bottom:calc(10px + (clamp(40px,4vw,54px) - 22px) * .16)}
#pg-accounts .acov-hero-stats>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;padding-left:20px;border-left:1px solid var(--border)}
#pg-accounts .acov-kpi-lbl{align-self:end;line-height:16px;margin-bottom:6px}
#pg-accounts .acov-kpi-val{font-size:22px;line-height:1}
/* The account cards: one hairline edge, 16px in */
#pg-accounts .acov-grid{gap:20px;margin-bottom:20px}
#pg-accounts .acov-card{padding:16px}
#pg-accounts .acov-card-top{gap:8px;min-height:20px}
#pg-accounts .acov-card-name{font-weight:600;line-height:20px;padding-right:0}
#pg-accounts .acov-card .acct-dot{width:8px;height:8px;background:var(--acct,var(--text-tertiary))}
#pg-accounts .acov-chevron{margin-left:0}
#pg-accounts .acov-bal-lbl,#pg-accounts .acov-pv-lbl,#pg-accounts .acov-stat-lbl{line-height:16px;margin-bottom:4px}
#pg-accounts .acov-bal-val{line-height:28px}
#pg-accounts .acov-bal-chg{font-family:var(--font-num);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;font-variant-numeric:tabular-nums;margin-top:2px}
#pg-accounts .acov-bal-chg.src{font-family:var(--font-body);color:var(--text-tertiary)}
#pg-accounts .acov-preview-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
#pg-accounts .acov-pv-val,#pg-accounts .acov-stat-val{font-family:var(--font-num);font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;font-variant-numeric:tabular-nums}
#pg-accounts .acov-bal-chg.kwin,#pg-accounts .acov-pv-val.kwin{color:var(--win)}
#pg-accounts .acov-bal-chg.kloss,#pg-accounts .acov-pv-val.kloss{color:var(--loss)}
/* the open card's totals keep the three columns of the row above, on a phone too */
#pg-accounts .acov-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#pg-accounts #acov-profit-card{padding:16px}
/* One badge: 20px, a hairline, the muted ink, no fill, the label face */
#pg-accounts .acct-type-badge,#pg-accounts .acct-kind-badge,#pg-accounts .acct-sync-badge,#pg-accounts .acct-dorm-badge,#pg-accounts .bconn-beta,#pg-accounts .bconn-soon-chip,#pg-accounts .bconn-st{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:20px;margin:0;padding:0 5px 0 6px;border:1px solid var(--border-strong);border-radius:var(--rs);background:none;color:var(--text-secondary);font-family:var(--font-num);font-size:11px;font-weight:400;line-height:1;letter-spacing:.10em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
#pg-accounts .bconn-st.on{color:var(--text-primary)}
/* Broker connections: the label with its badge, the callout, three to a row */
#pg-accounts .bconn-sec{margin-top:0}
#pg-accounts .bconn-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 8px;margin-bottom:16px}
#pg-accounts .bconn-head>div{display:contents}
#pg-accounts .bconn-head .cc-t{grid-column:1;grid-row:1;margin:0;line-height:20px;color:var(--text-secondary)}
#pg-accounts .bconn-beta{grid-column:2;grid-row:1;justify-self:start}
#pg-accounts .bconn-sub{grid-column:1/-1;grid-row:2;margin-top:6px}
#pg-accounts .bconn-propnote{gap:12px;padding:16px;margin-bottom:20px}
#pg-accounts .bconn-propnote>div>b{font-size:14px;font-weight:600;line-height:20px;margin-bottom:4px}
#pg-accounts .bconn-firm{gap:8px 12px;margin-top:12px}
#pg-accounts .bconn-firm .fs{width:280px;max-width:100%}
/* The firm's routes share one set of columns, so every chip and button stands on one line */
#pg-accounts .bconn-routes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto auto;column-gap:12px;margin-top:12px}
#pg-accounts .bconn-routes:empty{display:none}
#pg-accounts .bconn-routes li{grid-column:1/-1;grid-template-columns:subgrid;padding:8px 0}
#pg-accounts .bconn-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#pg-accounts .bconn-card{background:var(--bg-elevated);padding:16px;gap:16px}
#pg-accounts .bconn-top{align-items:flex-start;gap:12px}
#pg-accounts .bconn-ic{background:none}
#pg-accounts .bconn-name{font-size:14px;font-weight:600;line-height:20px}
#pg-accounts .bconn-meta{font-size:12px;line-height:18px;margin-top:2px}
#pg-accounts .bconn-prov .bconn-actions{margin-top:auto}
#pg-accounts .bconn-prov .bconn-actions .btn{flex:1}
#pg-accounts .bconn-prov .bconn-soon-chip{margin-top:auto;align-self:flex-start}
/* the connected dot keeps its colour without the dark halo it wore by day */
#pg-accounts .bconn-dot.ok{box-shadow:none}
/* A connected broker's actions take the same 36px Secondary, so no button on the page is filled but + Add account */
#pg-accounts .bconn-card .bconn-btn{height:36px;border-color:var(--border-strong);background:var(--tint-1);color:var(--text-primary);font-size:13px;font-weight:500;filter:none}
#pg-accounts .bconn-card .bconn-btn.ghost{width:36px}
#pg-accounts .bconn-card .bconn-btn.ghost.txt{width:auto}
@media(hover:hover) and (pointer:fine){#pg-accounts .bconn-card .bconn-btn:hover:not(:disabled){background:var(--tint-2);border-color:var(--border-strong);filter:none}}
/* A card is not a control: the button answers the pointer, the card holds still */
@media(hover:hover) and (pointer:fine){#pg-accounts .bconn-card:hover{transform:none}#pg-accounts .bconn-prov:hover{border-color:var(--border)}}
@media(max-width:900px){
  #pg-accounts .bconn-grid{display:block;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
  #pg-accounts .bconn-card{border:0;border-radius:0;background:none;box-shadow:none}
  #pg-accounts .bconn-card+.bconn-card{border-top:1px solid var(--border)}
  #pg-accounts .bconn-prov{flex-direction:row;align-items:center;gap:12px;min-height:72px;padding:12px 16px}
  #pg-accounts .bconn-prov .bconn-ic{display:none}
  #pg-accounts .bconn-prov .bconn-top{flex:1;min-width:0}
  #pg-accounts .bconn-prov .bconn-actions{flex:none;margin:0}
  #pg-accounts .bconn-prov .bconn-actions .btn{flex:none}
  #pg-accounts .bconn-prov .bconn-soon-chip{margin:0;align-self:center}
}
@media(max-width:640px){
  #pg-accounts .bconn-routes{grid-template-columns:minmax(0,1fr) auto}
  #pg-accounts .bconn-routes li{row-gap:4px}
  #pg-accounts .bconn-routes li>b{grid-column:1;grid-row:1}
  #pg-accounts .bconn-routes .how{grid-column:1;grid-row:2}
  #pg-accounts .bconn-routes .bconn-st{grid-column:1;grid-row:3;justify-self:start}
  #pg-accounts .bconn-routes li>:last-child{grid-column:2;grid-row:1/4}
}
@media(max-width:768px){
  #pg-accounts{padding:12px 2px 0}
  #pg-accounts .acc-ph .ps{grid-column:1/-1}
  #pg-accounts #acc-add-btn{margin-top:-6px}
  #pg-accounts .acov-hero{margin-bottom:16px}
  #pg-accounts .acov-grid{gap:16px;margin-bottom:16px}
}
@media(max-width:600px){
  #pg-accounts .acov-hero-stats{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;padding-bottom:0}
  #pg-accounts .acov-hero-stats>div{padding-left:12px}
  #pg-accounts .acov-hero-stats>div:first-child{padding-left:0;border-left:0}
  #pg-accounts .acov-kpi-val{font-size:20px}
  #pg-accounts .bconn-propnote{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;align-items:center}
  #pg-accounts .bconn-propnote>div:last-child{display:contents}
  #pg-accounts .bconn-propnote-ic{grid-column:1;grid-row:1;width:20px;height:20px;border:0;border-radius:0;background:none}
  #pg-accounts .bconn-propnote>div>b{grid-column:2;grid-row:1;margin:0}
  #pg-accounts .bconn-propnote>div>p,#pg-accounts .bconn-firm,#pg-accounts .bconn-routes{grid-column:1/-1}
  #pg-accounts .bconn-propnote>div>p{margin-top:8px}
  #pg-accounts .bconn-firm{display:grid;gap:6px}
  #pg-accounts .bconn-firm .fs{width:100%}
}
@media(max-width:480px){#pg-accounts{padding-left:6px;padding-right:6px}}

/* ── The avatar: one primitive for every size ─────────────────────────────
   A photo, an icon on the field, or the member's initials on their disc. The
   size rides on --av; the initials' disc colour on --av-bg / --av-ink. */
.av{--av:34px;width:var(--av);height:var(--av);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;vertical-align:middle;line-height:1}
.av-in{background:var(--av-bg,var(--bg-hover));color:var(--av-ink,var(--text-primary));font-family:var(--font-body);font-weight:600;font-size:calc(var(--av) * .38);letter-spacing:.01em}
.av-ic{background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--accent)}
.av-ic svg{width:calc(var(--av) * .62);height:calc(var(--av) * .62);display:block}
.av-img{display:block;object-fit:cover;background:var(--bg-hover)}
.rail-av #sb-avatar .av-ic{box-shadow:none}
/* A founding member's disc: the record line, lit, at the foot of the ring. */
.av-f{position:relative;display:inline-flex;flex:none;width:var(--av);height:var(--av);vertical-align:middle}
.av-lit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;overflow:visible}
.prf-big .av-lit{stroke-width:2.2px}
.cm-badge.cm-founding{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim)}
.cmv2-pp-found{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.rd-chip.preview{color:var(--accent);background:var(--accent-dim);border-color:var(--accent-border)}
.rd-chip.pick{color:var(--text-primary);background:var(--tint-2);border-color:var(--border-strong);margin-left:6px}
.rd-adm-pick{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-secondary);white-space:nowrap}
.rd-adm-pick input{accent-color:var(--accent)}
.st-found{display:block;font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--si);margin-top:4px;text-align:right}

/* ── Profile page ─────────────────────────────────────────────────────────
   The card is the live preview; the editor beside it is ruled into two
   sections (the name, the picture) with the actions at the foot. */
.prf{display:grid;grid-template-columns:300px minmax(0,640px);gap:40px;align-items:start}
.prf-card{position:sticky;top:76px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:36px 24px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.prf-big{border-radius:50%;box-shadow:0 0 0 1px var(--border-strong);margin-bottom:18px}
.prf-big .av-ic{box-shadow:none}
.prf-card-text{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:center}
.prf-card-name{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--text-primary);overflow-wrap:anywhere}
.prf-card-name.empty{color:var(--text-tertiary);font-weight:500}
.prf-card-email{font-size:12.5px;color:var(--text-tertiary);margin-top:5px;overflow-wrap:anywhere}
.prf-card-rule{width:32px;height:1px;background:var(--border-strong);margin:18px 0 14px}
.prf-standing{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-secondary);line-height:1.7}
.prf-standing:empty{display:none}
.prf-edit{min-width:0}
.prf-sec{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--border)}
.prf-sec .fl{display:block;margin-bottom:10px}
.prf-name{max-width:420px}
.prf-hint{font-size:12.5px;color:var(--text-tertiary);line-height:1.55;margin-top:8px}
.prf-seg{margin-bottom:18px}
.prf-pane[hidden]{display:none}
.prf-pane .prf-hint{margin-top:0}
.prf-group{margin-bottom:18px}
.prf-group:last-child{margin-bottom:0}
.prf-group-t{font-family:var(--font-num);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:8px}
.prf-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:540px}
.prf-tile{appearance:none;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--rs);color:var(--text-secondary);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:11px 4px 9px;font-family:var(--font-body);transition:background-color var(--dur-press) var(--ease-standard),border-color var(--dur-press) var(--ease-standard),color var(--dur-press) var(--ease-standard)}
.prf-tile svg{width:30px;height:30px;display:block}
.prf-tile-n{font-size:11px;line-height:1;color:var(--text-tertiary)}
.prf-tile:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-strong)}
.prf-tile.on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.prf-tile.on .prf-tile-n{color:var(--text-primary)}
.prf-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prf-drop{display:flex;align-items:center;gap:18px;background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--r);padding:18px 20px;transition:border-color var(--dur-press) var(--ease-standard),background-color var(--dur-press) var(--ease-standard)}
.prf-drop.over{border-color:var(--accent);background:var(--accent-dim)}
.prf-photo-cur:empty{display:none}
.prf-drop-body{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-width:0}
.prf-drop-body .prf-hint{flex-basis:100%}
.prf-link{appearance:none;background:none;border:0;padding:0;font-family:var(--font-body);font-size:13px;color:var(--text-secondary);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.prf-link:hover{color:var(--text-primary)}
.prf-actions{display:flex;justify-content:flex-end;gap:10px}
.prf-actions .btn[hidden],.prf-link[hidden]{display:none}
.prf-sec[hidden]{display:none}
.prf-group-hint{font-weight:400;letter-spacing:.06em;text-transform:none;color:var(--text-tertiary);margin-left:10px}
.prf-wall-row{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer}
.prf-wall-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.prf-wall-text .prf-hint{margin-top:0}
.prf-wall-l{font-size:13px;font-weight:500;color:var(--text-primary)}
@media(max-width:1100px){
  .prf{grid-template-columns:minmax(0,1fr);gap:28px}
  .prf-card{position:static;flex-direction:row;text-align:left;padding:20px 22px;gap:20px}
  .prf-card .prf-big{margin:0}
  .prf-card-text{align-items:flex-start}
  .prf-card-rule{display:none}
  .prf-standing{margin-top:10px}
}
@media(max-width:768px){
  .prf-card{padding:16px 16px;gap:16px}
  .prf-card-name{font-size:18px}
  .prf-sec{padding-bottom:22px;margin-bottom:22px}
  .prf-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prf-drop{flex-direction:column;align-items:flex-start;padding:16px}
  .prf-actions{flex-direction:column-reverse}
  .prf-actions .btn{width:100%;height:44px}
}

/* The admin Users list: the count beside the sort and the export, and the
   pager under the list. */
.adm-ul-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:6px 0 8px}
.adm-ul-bar .admin-uf-count{margin:0}
.adm-ul-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-sort{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-tertiary)}
.adm-sort .fs{height:32px;width:auto;min-width:150px;font-size:12px}
.adm-ul-tools .btn{height:32px;font-size:12px;padding:0 12px}
.adm-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0 2px;flex-wrap:wrap}
.adm-pager[hidden]{display:none}
.adm-pg-btn{height:32px;font-size:12px;padding:0 14px}
.adm-pg-btn:disabled{opacity:.45;cursor:default}
.adm-pg-at{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);font-family:var(--font-num)}
.adm-pg-in{width:72px;height:32px;text-align:center;font-family:var(--font-num);font-size:12px;padding:0 6px}
.churn-more{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 2px 2px;font-size:12px;color:var(--text-tertiary);border-top:1px solid var(--border);margin-top:6px}
.churn-more .btn{height:30px;font-size:12px;padding:0 12px}
.lb-more{padding:14px 4px 4px;font-size:12px;color:var(--text-tertiary);text-align:center}
/* Roadmap: a page of cards at a time, and a plain line when the board holds
   the ideas that matter rather than every one ever posted. */
.rd-more{display:flex;justify-content:center;padding:14px 0 2px}
.rev-note{font-size:11px;color:var(--text-tertiary);margin-top:8px}
.rd-cap{padding:14px 4px 4px;font-size:12px;color:var(--text-tertiary);text-align:center}
/* A flagged trader on the board: the tag in ink on the amber tint and border
   (never amber on amber); the row is set back by its score bar and score, never
   by fading its words or picture, which must keep their contrast. */
.lb-tier.review{background:var(--amber-dim);color:var(--text-primary);border:1px solid var(--amber-border)}
.lb-row.flagged .lb-bar,.lb-pod.flagged .lb-bar{opacity:.55}
.lb-row.flagged .lb-row-score,.lb-pod.flagged .lb-pod-score{color:var(--text-secondary)}

/* The System tab's member photos card: how many are still kept inside
   profiles, and the move of them to Storage (app.js avatarMoveRun). */
.avm-card{margin-bottom:16px}
.avm-card .avm-t{margin:0 0 4px}
.avm-sub{font-size:12.5px;color:var(--text-tertiary);line-height:1.6;margin:0 0 12px;max-width:78ch}
.avm-row{display:flex;align-items:center;gap:var(--sp-2-5);flex-wrap:wrap}
.avm-count{font-size:13px;color:var(--text-secondary)}
.avm-count b{color:var(--text-primary);font-weight:600}
.avm-row .btn-admin{margin-left:auto}
.avm-row .btn-admin:disabled{opacity:.45;cursor:default}
.avm-status{font-size:12px;color:var(--text-secondary);line-height:1.6;margin-top:10px}
.avm-status:empty{display:none}
.avm-status.bad{color:var(--loss)}