/* ============================================================
   PODFOLIO — design system (ported from the Claude Design handoff)
   Tokens, node card, connectors, modal shell, top bar, controls,
   onboarding, login. One sheet — this is the visual contract.
   ============================================================ */

:root{
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --r-ctl:8px; --r-node:11px; --r-modal:16px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- THEME TOKENS ---- */
.t-light{
  --canvas:oklch(0.984 0.002 250); --surface:oklch(1 0 0); --surface-2:oklch(0.972 0.003 250);
  --border:oklch(0.905 0.004 250); --border-str:oklch(0.84 0.006 250); --line:oklch(0.88 0.004 250);
  --ink:oklch(0.27 0.012 250); --ink-2:oklch(0.52 0.010 250); --ink-3:oklch(0.68 0.008 250);
  --accent:var(--accent-l, oklch(0.52 0.11 248)); --accent-soft:oklch(0.95 0.025 248);
  --amber:oklch(0.72 0.135 67); --amber-soft:oklch(0.95 0.05 75); --amber-line:oklch(0.74 0.12 60);
  --pos:oklch(0.55 0.09 155); --pos-soft:oklch(0.95 0.04 155); --neg:oklch(0.55 0.13 27);
  --sell:oklch(0.55 0.115 27); --sell-soft:oklch(0.96 0.03 27); --buy:oklch(0.50 0.09 248); --buy-soft:oklch(0.96 0.025 248);
  --dot-fine:oklch(0.66 0.012 250); --scrim:oklch(0.27 0.012 250 / 0.34);
  --on-accent:#fff;
}
.t-dark{
  --canvas:oklch(0.205 0.008 252); --surface:oklch(0.245 0.009 252); --surface-2:oklch(0.275 0.009 252);
  --border:oklch(0.33 0.010 252); --border-str:oklch(0.42 0.012 252); --line:oklch(0.36 0.010 252);
  --ink:oklch(0.95 0.004 252); --ink-2:oklch(0.72 0.008 252); --ink-3:oklch(0.55 0.008 252);
  --accent:var(--accent-d, oklch(0.72 0.10 250)); --accent-soft:oklch(0.30 0.05 250);
  --amber:oklch(0.79 0.125 72); --amber-soft:oklch(0.34 0.07 68); --amber-line:oklch(0.82 0.11 72);
  --pos:oklch(0.74 0.09 156); --pos-soft:oklch(0.32 0.05 156); --neg:oklch(0.70 0.13 27);
  --sell:oklch(0.70 0.12 27); --sell-soft:oklch(0.32 0.06 27); --buy:oklch(0.72 0.10 250); --buy-soft:oklch(0.30 0.05 250);
  --dot-fine:oklch(0.56 0.010 252); --scrim:oklch(0.12 0.008 252 / 0.58);
  --on-accent:oklch(0.16 0.01 252);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ font-family:var(--sans); background:var(--canvas); color:var(--ink); line-height:1.5; overflow:hidden; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
body.no-motion *, body.no-motion *::before, body.no-motion *::after{ transition:none !important; animation:none !important; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ position:fixed; inset:0; display:flex; flex-direction:column; background:var(--canvas); }

/* density */
.app[data-density="compact"]{ --node-pad:9px 11px; --node-w:184px; --pod-w:230px; --sub-w:222px; --lvl:38px; --hgap:6px; }
.app[data-density="regular"]{ --node-pad:12px 14px; --node-w:206px; --pod-w:264px; --sub-w:252px; --lvl:56px; --hgap:7px; }
.app[data-density="comfy"]{ --node-pad:14px 17px; --node-w:228px; --pod-w:292px; --sub-w:280px; --lvl:58px; --hgap:10px; }

/* ---- top bar (the whisper) ---- */
.topbar{ position:relative; flex:none; height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:var(--canvas); border-bottom:1px solid color-mix(in oklch,var(--border) 70%,transparent); z-index:20; }
.tb-left{ display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{ width:11px; height:11px; background:var(--ink-2); transform:rotate(45deg); border-radius:2px; }
.brand-word{ font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.tb-div{ width:1px; height:18px; background:var(--border); }
.pv{ font-size:15px; font-weight:500; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.pv .c{ color:var(--ink-3); font-weight:400; }
.pv .scope{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-left:9px; letter-spacing:.02em; }
.tb-right{ display:flex; align-items:center; gap:11px; }
.alerts-pip{ display:flex; align-items:center; gap:6px; height:28px; padding:0 11px 0 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-family:var(--mono); font-size:11px; color:var(--ink-2); transition:border-color .15s; }
.alerts-pip:hover{ border-color:var(--border-str); }
.alerts-pip .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px color-mix(in oklch,var(--amber) 20%,transparent); }
.alerts-pip.clear{ color:var(--ink-3); } .alerts-pip.clear .dot{ background:var(--dot-fine); box-shadow:none; }
.mode-toggle{ display:flex; align-items:center; gap:0; border:1px solid var(--border-str); border-radius:7px; overflow:hidden; }
.mode-toggle button{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; padding:6px 10px; background:var(--surface); color:var(--ink-3); border:0; }
.mode-toggle button.on{ background:var(--accent); color:var(--on-accent); }
.tb-user{ font-family:var(--mono); font-size:10px; color:var(--ink-3); text-decoration:none; }
.tb-user:hover{ color:var(--ink-2); }
.iconbtn{ width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink-3); display:flex; align-items:center; justify-content:center; }
.iconbtn:hover{ border-color:var(--border-str); color:var(--ink); }
.iconbtn svg{ width:14px; height:14px; }

/* ---- canvas stage ---- */
.stage{ position:relative; flex:1; overflow:hidden; cursor:grab; touch-action:none; }
.stage.grabbing{ cursor:grabbing; }
.viewport{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.viewport.animate{ transition:transform .42s var(--ease); }

/* single-view shell: dismissable left pane (watchlist + Podster) + stage */
.app-body{ flex:1; display:flex; min-height:0; }
.app-body > .stage{ min-width:0; }
.left-pane{ position:relative; flex:none; width:320px; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid color-mix(in oklch,var(--border) 70%,transparent); transition:width .25s var(--ease); overflow:hidden; }
.app-body.pane-collapsed .left-pane{ width:0; border-right:0; }
.pane-head{ flex:none; display:flex; align-items:center; padding:12px 13px; border-bottom:1px solid color-mix(in oklch,var(--border) 70%,transparent); }
.pane-title{ flex:1; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
/* the collapse arrow floats at the pane's top-right rather than sitting in a column */
.pane-toggle{ position:absolute; top:9px; right:9px; z-index:6; width:26px; height:26px; border-radius:7px; border:0; background:transparent; color:var(--ink-3); display:flex; align-items:center; justify-content:center; }
.pane-toggle:hover{ color:var(--ink); background:var(--surface-2); }
.pane-toggle svg{ width:12px; height:12px; }
.pane-body{ flex:1; overflow-y:auto; padding:12px 13px; }

/* Podster — gradient orb (shared by the topbar trigger) + accent sparkle */
.pd-orb{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--accent),color-mix(in oklch,var(--accent) 55%,#7c5cff)); box-shadow:0 4px 12px -4px color-mix(in oklch,var(--accent) 60%,transparent); }
.pd-mark{ color:var(--accent); }

/* Podster trigger — centered in the top bar */
.tb-podster{ position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; height:34px; padding:0 14px 0 6px; border-radius:999px; border:1px solid color-mix(in oklch,var(--accent) 35%,var(--border)); background:var(--surface); color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.tb-podster:hover, .tb-podster.on{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 12%,transparent); }
.tb-podster .pd-orb{ width:24px; height:24px; font-size:12px; box-shadow:none; }

/* watchlist compact action bar — add/search tuck behind icons; filters inline */
.wl-bar{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.wl-ico{ width:28px; height:28px; flex:none; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink-3); display:flex; align-items:center; justify-content:center; }
.wl-ico:hover{ color:var(--ink); border-color:var(--border-str); }
.wl-ico.on{ color:var(--accent); border-color:var(--accent); background:color-mix(in oklch,var(--accent) 10%,transparent); }
.wl-ico svg{ width:13px; height:13px; }
.wl-filters{ display:flex; gap:5px; margin-left:auto; }
.wl-f{ font-size:10.5px; color:var(--ink-3); border:1px solid var(--border); border-radius:7px; padding:4px 8px; background:var(--surface); }
.wl-f:hover{ color:var(--ink); border-color:var(--border-str); }
.wl-f.active{ color:var(--ink); border-color:var(--accent); background:color-mix(in oklch,var(--accent) 10%,transparent); }
.wl-search{ padding:7px 10px; margin-bottom:8px; }
.wl-search-ic{ display:inline-flex; align-items:center; color:var(--ink-3); flex:none; }
.wl-search-ic svg{ width:13px; height:13px; }
.wl-collapsed{ display:none !important; }
.wl-nomatch{ font-size:12px; color:var(--ink-3); text-align:center; padding:16px 4px; }
/* sortable column header (click to order) */
.wl-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 8px 6px; border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent); margin-bottom:4px; }
.wl-head-r{ display:flex; gap:13px; padding-right:24px; }
.wl-sort{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); background:none; border:0; cursor:pointer; padding:0; }
.wl-sort:hover{ color:var(--ink-2); } .wl-sort.on{ color:var(--ink); }
/* reopen affordance when the pane is dismissed — a clear, labeled pill */
.pane-open{ position:absolute; top:12px; left:12px; z-index:15; display:none; align-items:center; gap:7px; height:32px; padding:0 13px; border-radius:9px; border:1px solid var(--border-str); background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:500; box-shadow:0 8px 22px -12px color-mix(in oklch,var(--ink) 50%,transparent); }
.pane-open:hover{ color:var(--ink); border-color:var(--ink-3); }
.pane-open svg{ width:12px; height:12px; }
.app-body.pane-collapsed .pane-open{ display:inline-flex; }
.wl-empty{ padding:22px 4px; text-align:center; }
.wl-empty-h{ font-size:14px; font-weight:600; color:var(--ink); }
.wl-empty-p{ font-size:12px; color:var(--ink-3); font-weight:300; margin-top:6px; line-height:1.5; }

/* watchlist: add-ticker typeahead + live rows */
.chip-field{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--border-str); border-radius:11px; background:var(--surface); transition:border-color .15s, box-shadow .15s; }
.chip-field:focus-within{ border-color:color-mix(in oklch,var(--accent) 42%,var(--border)); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 13%,transparent); }
.chip-input{ flex:1; min-width:90px; border:0; outline:none; background:none; font-family:var(--sans); font-size:13px; color:var(--ink); padding:3px 2px; }
.chip-input.mono{ font-family:var(--mono); letter-spacing:.04em; }
.chip-input::placeholder{ color:var(--ink-3); font-family:var(--sans); letter-spacing:0; }
.ta-menu{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40; max-height:240px; overflow-y:auto; background:var(--surface); border:1px solid var(--border-str); border-radius:11px; box-shadow:0 16px 40px -18px color-mix(in oklch,var(--ink) 50%,transparent); padding:6px; }
.ta-item{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; cursor:pointer; }
.ta-item:hover, .ta-item.active{ background:var(--surface-2); }
.ta-item .ta-sym{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink); flex:none; min-width:48px; }
.ta-item .ta-co{ font-size:11.5px; color:var(--ink-2); font-weight:300; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.invalid-flash{ animation:wl-shake .3s; }
@keyframes wl-shake{ 25%{ transform:translateX(-3px);} 75%{ transform:translateX(3px);} }
.wl-add{ margin-bottom:10px; }
.wl-rows{ display:flex; flex-direction:column; gap:2px; }
.wl-row{ position:relative; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; padding:8px; border-radius:9px; cursor:pointer; }
.wl-row:hover{ background:var(--surface-2); }
.wl-id{ min-width:0; display:flex; flex-direction:column; }
.wl-sym{ font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink); }
.wl-name{ font-size:10.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-spark-wrap{ display:flex; align-items:center; width:56px; color:var(--ink-3); }
.wl-spark-wrap.pos{ color:var(--pos); } .wl-spark-wrap.neg{ color:var(--neg); }
.wl-spark{ width:56px; height:16px; }
.wl-num{ display:flex; flex-direction:column; align-items:flex-end; }
.wl-price{ font-family:var(--mono); font-size:12px; color:var(--ink); }
.wl-chg{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.wl-chg.pos{ color:var(--pos); } .wl-chg.neg{ color:var(--neg); }
/* remove (✕) floats over the row's top-right corner; shown on hover only */
.wl-rm{ position:absolute; top:-5px; right:-5px; z-index:3; width:18px; height:18px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--ink-3); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; box-shadow:0 2px 6px -2px color-mix(in oklch,var(--ink) 45%,transparent); }
.wl-row:hover .wl-rm{ opacity:1; }
.wl-rm:hover{ color:var(--ink); border-color:var(--border-str); }
.wl-rm svg{ width:9px; height:9px; }

/* Podster sizing card */
.pd-rationale{ font-size:13px; line-height:1.55; color:var(--ink-2); font-weight:300; margin-bottom:14px; }
.pd-amount{ display:flex; align-items:baseline; gap:8px; padding:13px 14px; border:1px solid var(--border-str); border-radius:12px; background:var(--surface-2); }
.pd-amount:focus-within{ border-color:color-mix(in oklch,var(--accent) 42%,var(--border)); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 13%,transparent); }
.pd-cur{ font-family:var(--mono); font-size:18px; color:var(--ink-3); }
.pd-amt-input{ flex:1; min-width:0; border:0; outline:none; background:none; font-family:var(--mono); font-size:22px; font-weight:500; color:var(--ink); }
.pd-cash{ font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap; }
.pd-opts{ display:flex; gap:8px; margin-top:11px; }
.pd-opt{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; }
.pd-opt:hover{ border-color:var(--border-str); }
.pd-opt-amt{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink); }
.pd-opt-label{ font-size:10px; color:var(--ink-3); }
.pd-sug{ margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 30%,var(--border)); border-radius:999px; padding:2px 7px; }
.pd-newpod{ width:100%; border:1px solid var(--border-str); border-radius:8px; padding:7px 10px; margin-top:2px; }

/* watchlist: holdings awaiting organization into a pod */
.wl-unorg{ margin-top:16px; border:1px dashed var(--amber-line); border-radius:12px; background:color-mix(in oklch,var(--amber-soft) 22%,var(--surface)); padding:10px 11px; }
.wl-unorg-h{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.wl-unorg-row{ display:flex; align-items:center; gap:9px; padding:5px 2px; }
.wl-unorg-val{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.wl-org-btn{ margin-left:auto; font-size:11px; font-weight:500; color:var(--accent); background:none; border:1px solid color-mix(in oklch,var(--accent) 30%,var(--border)); border-radius:999px; padding:4px 11px; cursor:pointer; }
.wl-org-btn:hover{ background:var(--accent-soft); }

/* Podster chat panel */
/* Podster pull-down tray (slides from under the top bar; retains history) */
.podster-tray{ position:fixed; top:54px; left:50%; width:min(880px,calc(100vw - 40px)); height:min(820px,calc(100vh - 80px)); max-height:calc(100vh - 70px); display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border-str); border-top:0; border-radius:0 0 16px 16px; box-shadow:0 30px 70px -28px color-mix(in oklch,var(--ink) 55%,transparent); z-index:40; transform:translate(-50%,-14px); opacity:0; pointer-events:none; transition:transform .24s var(--ease), opacity .2s; }
.podster-tray.open{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.pt-head{ flex:none; display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); }
.pt-head .c-eyebrow{ flex:1; }
.pt-actions{ display:flex; align-items:center; gap:6px; }
.pt-btn{ font-size:11.5px; color:var(--ink-2); border:1px solid var(--border); border-radius:7px; padding:4px 10px; background:var(--surface); cursor:pointer; }
.pt-btn:hover{ color:var(--ink); border-color:var(--border-str); }
.pt-close{ width:26px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--ink-3); }
.pt-close svg{ width:13px; height:13px; }
.pc-context{ flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:11px 16px; border-bottom:1px solid var(--border); }
.pc-ctx-label{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-right:3px; }
.pc-chip{ font-family:var(--mono); font-size:11px; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 10px; cursor:pointer; }
.pc-chip:hover{ border-color:var(--border-str); }
.pc-chip.on{ color:var(--accent); border-color:color-mix(in oklch,var(--accent) 40%,var(--border)); background:var(--accent-soft); }
.pc-thread{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.pc-hint{ font-size:12.5px; color:var(--ink-3); font-weight:300; line-height:1.55; text-align:center; padding:14px 16px; max-width:520px; margin:0 auto; }
.pc-msg{ display:flex; }
.pc-msg.user{ justify-content:flex-end; }
.pc-bubble{ max-width:min(84%,640px); font-size:13.5px; line-height:1.6; padding:10px 13px; border-radius:13px; }
.pc-msg.user .pc-bubble{ background:var(--accent); color:var(--on-accent, #fff); border-bottom-right-radius:5px; }
.pc-msg.podster .pc-bubble{ background:var(--surface-2); color:var(--ink); border:1px solid var(--border); border-bottom-left-radius:5px; }
.pc-thinking .pc-bubble{ color:var(--ink-3); }
.pc-steps{ font-size:11px; color:var(--ink-3); margin-bottom:6px; }
.pc-dots{ color:var(--ink-3); letter-spacing:2px; animation:pc-pulse 1.1s ease-in-out infinite; }
@keyframes pc-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }
.pc-input{ flex:none; display:flex; gap:9px; align-items:flex-end; padding:12px 14px; border-top:1px solid var(--border); }
.pc-ta{ flex:1; resize:none; max-height:120px; border:1px solid var(--border-str); border-radius:10px; padding:9px 11px; font-family:var(--sans); font-size:13px; line-height:1.4; color:var(--ink); background:var(--surface); }
.pc-ta:focus{ outline:none; border-color:color-mix(in oklch,var(--accent) 42%,var(--border)); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 13%,transparent); }
.pc-send{ flex:none; }

/* ===== ticker detail view (the canvas swap) ===== */
.tv-wrap{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.tv-wrap .tradingview-widget-container,
.tv-wrap .tradingview-widget-container__widget,
.tv-wrap iframe{ width:100% !important; height:100% !important; }

.detail-pane{ display:none; position:absolute; inset:0; overflow-y:auto; padding:22px 26px 40px; touch-action:pan-y; }
.stage.detail-active .viewport,
.stage.detail-active .zoomctl,
.stage.detail-active .panhint,
.stage.detail-active .guide,
.stage.detail-active .pane-open{ display:none !important; }
.stage.detail-active .detail-pane{ display:block; }
.dp{ max-width:1100px; margin:0 auto; }

.dp-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
/* options chain popup */
.chain-card{ width:780px; max-width:96vw; height:84vh; }
.chain-head{ display:flex; align-items:center; gap:12px; }
.chain-head .c-eyebrow{ flex:none; }
.chain-bar{ flex:1; display:flex; align-items:center; gap:10px; }
.chain-exp{ font-family:var(--mono); font-size:11.5px; color:var(--ink); background:var(--surface); border:1px solid var(--border-str); border-radius:7px; padding:4px 8px; }
.chain-status{ font-family:var(--mono); font-size:10px; }
.chain-live{ color:var(--pos); } .chain-closed{ color:var(--ink-3); }
.chain-body{ flex:1; overflow:hidden; padding:0; display:flex; }
.chain-scroll{ flex:1; overflow:auto; }
.chain-tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px; }
.chain-tbl th, .chain-tbl td{ padding:4px 6px; text-align:right; white-space:nowrap; }
.chain-tbl .ch-grp th{ position:sticky; top:0; background:var(--surface); color:var(--ink-3); font-size:9px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding-top:9px; z-index:1; }
.chain-tbl .ch-sub th{ position:sticky; top:24px; background:var(--surface); color:var(--ink-3); font-weight:500; font-size:9px; border-bottom:1px solid var(--border); z-index:1; }
.chain-tbl .ch-k{ text-align:center; font-weight:600; color:var(--ink); background:var(--surface-2); }
.chain-tbl td{ color:var(--ink-2); border-bottom:1px solid color-mix(in oklch,var(--border) 45%,transparent); }
.chain-tbl td.ch-itm{ color:var(--ink); background:color-mix(in oklch,var(--accent) 5%,transparent); }
.chain-tbl tr.ch-atm td{ background:color-mix(in oklch,var(--accent) 12%,transparent); }
.chain-tbl tr.ch-atm .ch-k{ background:color-mix(in oklch,var(--accent) 22%,transparent); }
.dp-ident{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dp-sym{ font-family:var(--mono); font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.dp-name{ font-size:12px; color:var(--ink-2); }
.dp-meta{ font-size:10.5px; color:var(--ink-3); }
.dp-quote{ display:flex; align-items:baseline; gap:9px; margin-left:4px; }
.dp-px{ font-family:var(--mono); font-size:22px; font-weight:500; color:var(--ink); }
.dp-chg{ font-family:var(--mono); font-size:13px; color:var(--ink-3); }
.dp-chg.pos,.dp-v.pos,.dp-ret i.pos{ color:var(--pos); } .dp-chg.neg,.dp-v.neg,.dp-ret i.neg{ color:var(--neg); }
.dp-actions{ margin-left:auto; display:flex; gap:8px; }

.dp-chart{ height:360px; margin-bottom:18px; }
.dp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.dp-col-side{ display:flex; flex-direction:column; gap:16px; }
.dp-card{ border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:15px 16px; }
.dp-card-h{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
.dp-card-b{ min-height:40px; }
.dp-spin{ display:flex; justify-content:center; padding:18px; }
.dp-note{ font-size:12px; color:var(--ink-3); line-height:1.5; }
.dp-note a,.dp-src a{ color:var(--accent); }
.dp-src{ font-size:10px; color:var(--ink-3); margin-top:10px; }

/* metrics grid (fundamentals / technicals / options) */
.dp-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; }
.dp-kv{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12px; border-bottom:1px solid var(--border); padding-bottom:5px; }
.dp-k{ color:var(--ink-3); } .dp-v{ font-family:var(--mono); color:var(--ink); font-weight:500; }
.dp-rets{ display:flex; gap:14px; margin-top:12px; }
.dp-ret{ display:flex; flex-direction:column; gap:2px; font-size:10px; color:var(--ink-3); }
.dp-ret i{ font-family:var(--mono); font-size:11.5px; font-style:normal; color:var(--ink); }

/* news list */
.dp-news{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.dp-news-it{ display:flex; flex-direction:column; gap:3px; }
.dp-news-meta{ display:flex; align-items:center; gap:7px; }
.dp-imp{ font-family:var(--mono); font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:999px; border:1px solid var(--border-str); color:var(--ink-3); }
.dp-imp.i1{ background:var(--neg); border-color:var(--neg); color:#fff; }
.dp-imp.i2{ color:var(--ink); border-color:var(--ink-3); }
.dp-ev{ font-size:10px; color:var(--ink-3); text-transform:capitalize; }
.dp-news-dt{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-left:auto; }
.dp-news-t{ font-size:13px; color:var(--ink); line-height:1.35; }
.dp-news-t a{ color:var(--ink); text-decoration:none; } .dp-news-t a:hover{ color:var(--accent); }
.dp-news-s{ font-size:11.5px; color:var(--ink-2); line-height:1.45; }

@media (max-width:880px){ .dp-cols{ grid-template-columns:1fr; } }

/* watchlist: Show Universe nav + active row */
.wl-nav{ margin-bottom:9px; }
.wl-univ{ width:100%; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); border:1px solid var(--border); border-radius:9px; padding:8px 11px; background:var(--surface); }
.wl-univ svg{ width:14px; height:14px; flex:none; }
.wl-univ:hover{ border-color:var(--border-str); color:var(--ink); }
.wl-univ.active{ border-color:var(--accent); color:var(--ink); background:color-mix(in oklch, var(--accent) 10%, transparent); }
.wl-row.active{ background:color-mix(in oklch, var(--accent) 9%, transparent); }

/* strategy estimate blocks (stock vs LEAPS vs covered call vs CSP) */
.st-block{ border:1px solid var(--border); border-radius:12px; padding:13px 14px; margin-top:12px; }
.st-block.rec{ border-color:color-mix(in oklch,var(--accent) 35%,var(--border)); background:color-mix(in oklch,var(--accent-soft) 35%,var(--surface)); }
.st-head{ display:flex; align-items:center; gap:9px; }
.st-kind{ font-size:13.5px; font-weight:600; color:var(--ink); }
.st-rec{ margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 30%,var(--border)); border-radius:999px; padding:2px 8px; }
.st-headline{ font-size:12.5px; color:var(--ink-2); font-weight:300; line-height:1.5; margin-top:6px; }
.st-list{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.st-list li{ font-size:11.5px; line-height:1.45; padding-left:16px; position:relative; color:var(--ink-2); font-weight:300; }
.st-pro::before{ content:'+'; position:absolute; left:2px; color:var(--pos); font-weight:600; }
.st-con::before{ content:'–'; position:absolute; left:3px; color:var(--neg); font-weight:600; }
.st-target{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:9px; }
.st-soon{ font-size:11px; color:var(--ink-3); font-weight:300; margin-top:9px; padding:7px 9px; border:1px dashed var(--border-str); border-radius:8px; }
.st-contract{ margin-top:10px; padding:9px 11px; border:1px solid var(--border-str); border-radius:9px; background:var(--surface-2); }
.st-ct-sym{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink); }
.st-ct-meta{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:3px; }

/* fit/zoom cluster */
.zoomctl{ position:absolute; right:18px; bottom:18px; z-index:15; display:flex; flex-direction:column; gap:7px; opacity:.32; transition:opacity .25s; }
.stage:hover .zoomctl{ opacity:.6; }
.zoomctl.active{ opacity:1; }
.zoomctl button{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:color-mix(in oklch,var(--surface) 88%,transparent); color:var(--ink-2); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(5px); }
.zoomctl button:hover{ border-color:var(--border-str); color:var(--ink); }
.zoomctl button svg{ width:15px; height:15px; }
.zoomctl .zlabel{ font-family:var(--mono); font-size:10px; color:var(--ink-3); text-align:center; }
.panhint{ position:absolute; left:18px; bottom:32px; z-index:15; font-family:var(--mono); font-size:10px; color:var(--ink-3); display:flex; align-items:center; gap:7px; opacity:0; transition:opacity .3s; pointer-events:none; }
.panhint.show{ opacity:.7; }

/* build identifier — a quiet footnote on every page */
.build-tag{ position:fixed; left:13px; bottom:9px; z-index:5; font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; color:var(--ink-3); opacity:.6; pointer-events:none; user-select:none; }

/* guidance pill (fresh-from-template landing) */
.guide{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:11px; background:var(--surface); border:1px solid var(--border); box-shadow:0 14px 36px -18px color-mix(in oklch,var(--ink) 45%,transparent); z-index:16; }
.guide .g-dot{ width:8px; height:8px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1.5px var(--dot-fine); flex:none; }
.guide-text{ font-size:12.5px; color:var(--ink-2); } .guide-text b{ color:var(--ink); font-weight:500; }

/* ============================================================
   THE TREE  (single canonical node card + connectors)
   ============================================================ */
.tree, .tree ul{ position:relative; }
.tree ul{ display:flex; justify-content:center; padding-top:var(--lvl,48px); }
.tree li{ list-style:none; display:flex; flex-direction:column; align-items:center; position:relative; padding:var(--lvl,48px) var(--hgap,10px) 0; }
.tree li::before, .tree li::after{ content:''; position:absolute; top:0; right:50%; width:50%; height:var(--lvl,48px); border-top:1px solid var(--line); }
.tree li::after{ right:auto; left:50%; border-left:1px solid var(--line); }
.tree li:only-child{ padding-top:0; }
.tree li:only-child::before, .tree li:only-child::after{ display:none; }
.tree li:first-child::before, .tree li:last-child::after{ border:0; }
.tree li:last-child::before{ border-right:1px solid var(--line); border-radius:0 8px 0 0; }
.tree li:first-child::after{ border-radius:8px 0 0 0; }
.tree ul ul::before{ content:''; position:absolute; top:0; left:50%; border-left:1px solid var(--line); height:var(--lvl,48px); }
.tree li:has(> .node.s-draft)::before, .tree li:has(> .node.s-draft)::after{ border-color:var(--border-str); border-top-style:dashed; border-left-style:dashed; }

.node{ position:relative; display:grid; grid-template-columns:14px 11px 1fr auto; align-items:center; gap:11px; width:var(--node-w,188px); padding:var(--node-pad,12px 14px); border-radius:var(--r-node); background:var(--surface); border:1px solid var(--border); color:var(--ink); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .12s; }
.node:hover{ border-color:var(--border-str); box-shadow:0 2px 12px -6px color-mix(in oklch,var(--ink) 50%,transparent); }
.node:active{ transform:scale(.985); }
.node .chev{ width:14px; height:14px; color:var(--ink-3); display:flex; align-items:center; justify-content:center; border-radius:4px; }
.node .chev:hover{ background:var(--surface-2); color:var(--ink); }
.node .chev svg{ width:8px; height:8px; transition:transform .2s var(--ease); }
.node .chev.collapsed svg{ transform:rotate(-90deg); }
.node .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.node .nm{ font-size:14px; font-weight:500; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node .wt{ font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink-2); align-self:center; }
.node.pod{ width:var(--pod-w,264px); padding:14px 16px; }
.node.pod .nm{ font-size:16px; font-weight:600; white-space:normal; line-height:1.22; text-wrap:balance; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.node.sub{ width:var(--sub-w,236px); padding:13px 15px; }
.node.sub .nm{ font-size:14.5px; white-space:normal; line-height:1.22; text-wrap:balance; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.node.pod .chev, .node.pod .dot, .node.sub .chev, .node.sub .dot{ align-self:center; }
.node.leaf{ width:106px; grid-template-columns:8px 1fr auto; gap:8px; padding:9px 11px; border-radius:9px; }
.node.leaf .nm{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0; }
.node.leaf .wt{ font-size:10.5px; color:var(--ink-3); }

/* status dots — the one system */
.dot.d-draft{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--dot-fine); }
.dot.d-fine{ background:var(--dot-fine); }
.dot.d-live{ background:var(--accent); }
.dot.d-trip{ background:var(--amber); box-shadow:0 0 0 4px color-mix(in oklch,var(--amber) 22%,transparent); }

/* lifecycle treatments */
.node.s-draft{ background:transparent; border-style:dashed; border-color:var(--border-str); }
.node.s-draft .nm{ color:var(--ink-3); font-weight:400; }
.node.s-draft .wt{ color:var(--ink-3); }
.node.s-executed{ border-color:var(--border-str); }
.node.s-executed::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--accent); }
.node.s-tripped{ border-color:var(--amber-line); background:color-mix(in oklch,var(--amber-soft) 55%,var(--surface)); }
.node.s-tripped::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--amber); }
.node.selected{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 16%,transparent); }

@media (prefers-reduced-motion: no-preference){
  .node.flash::after{ content:''; position:absolute; inset:-1px; border-radius:var(--r-node); pointer-events:none; animation:flash 1.6s var(--ease); }
  @keyframes flash{ from{ box-shadow:0 0 0 5px color-mix(in oklch,var(--accent) 30%,transparent); } to{ box-shadow:0 0 0 9px transparent; } }
}

.collapse-chip{ margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.02em; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:4px 12px; background:var(--surface-2); white-space:nowrap; cursor:pointer; }
.collapse-chip:hover{ border-color:var(--border-str); color:var(--ink-2); }

/* ============================================================
   MODAL SHELL  (the one shell every popup uses)
   ============================================================ */
.scrim{ position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(2px); z-index:50; }
.modal{ position:fixed; inset:0; z-index:51; display:flex; align-items:center; justify-content:center; padding:28px; pointer-events:none; }
.card{ position:relative; width:460px; max-width:100%; max-height:92vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-modal); overflow:hidden; pointer-events:auto;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 40px 80px -30px color-mix(in oklch,var(--ink) 55%,transparent); }
.card.in{ animation:rise .26s var(--ease); }
@keyframes rise{ from{ transform:translateY(10px) scale(.99); } to{ transform:none; } }
.card.wide{ width:548px; } .card.narrow{ width:430px; }

.mag-band{ height:4px; flex:none; }
.mag-band.accent{ background:var(--accent); } .mag-band.amber{ background:var(--amber); }

.c-head{ position:relative; flex:none; padding:17px 20px 15px; border-bottom:1px solid var(--border); }
.c-eyebrow{ display:flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.c-eyebrow .dot{ width:7px; height:7px; border-radius:50%; }
.c-eyebrow .gl{ width:13px; height:13px; display:flex; }
.c-titlerow{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:10px; padding-right:28px; }
.c-titleleft{ min-width:0; flex:1; }
.c-name{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink); line-height:1.2; }
.c-sub{ font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.c-weight{ text-align:right; white-space:nowrap; }
.c-weight .wm{ font-family:var(--mono); font-size:16px; font-weight:500; color:var(--ink); }
.c-weight .we{ display:block; font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin-top:3px; }
.level-pill{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--border-str); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.c-x{ position:absolute; top:15px; right:16px; width:25px; height:25px; border-radius:7px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:12px; background:var(--surface); }
.c-x:hover{ color:var(--ink); border-color:var(--border-str); }

.c-body{ overflow-y:auto; flex:1; }
.c-sec{ padding:15px 20px; border-bottom:1px solid var(--border); }
.c-sec:last-child{ border-bottom:0; }
.label{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

.c-foot{ flex:none; display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:13px 16px; border-top:1px solid var(--border); background:var(--surface-2); }
.c-foot .spacer{ flex:1; }
.sec-actions{ display:flex; flex-wrap:wrap; gap:7px; }

/* buttons */
.btn{ font-family:var(--sans); font-size:12.5px; font-weight:500; padding:9px 14px; border-radius:var(--r-ctl); border:1px solid var(--border-str); background:var(--surface); color:var(--ink-2); white-space:nowrap; transition:border-color .15s, color .15s; display:inline-flex; align-items:center; gap:7px; }
.btn:hover{ border-color:var(--ink-3); color:var(--ink); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover{ filter:brightness(1.05); border-color:var(--accent); color:var(--on-accent); }
.btn.sm{ font-size:11.5px; padding:7px 11px; }
.btn.ghost{ background:none; border-color:var(--border); }
.btn.disabled,.btn:disabled{ opacity:.42; cursor:not-allowed; pointer-events:none; }
.btn.danger{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* thesis block */
.thesis-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.committed{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 32%,var(--border)); padding:3px 8px; border-radius:999px; white-space:nowrap; }
.thesis-body{ font-size:14px; line-height:1.6; color:var(--ink); font-weight:300; margin-top:11px; text-wrap:pretty; }
.thesis-body.empty{ color:var(--ink-3); font-style:italic; }
.thesis-meta{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:11px; }

/* stats grid */
.stats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px 14px; }
.stat .k{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.stat .v{ font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--ink); margin-top:4px; font-variant-numeric:tabular-nums; }
.stat .v.pos{ color:var(--pos); } .stat .v.neg{ color:var(--neg); }

/* children list */
.child{ display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid color-mix(in oklch,var(--border) 55%,transparent); cursor:pointer; }
.child:last-child{ border-bottom:0; }
.child .dot{ width:8px; height:8px; border-radius:50%; }
.child .cname{ font-size:13px; color:var(--ink); font-weight:500; }
.child .cw{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.child:hover .cname{ color:var(--accent); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); }
.breadcrumb i{ color:var(--ink-3); font-style:normal; }
.breadcrumb b{ color:var(--ink); font-weight:500; }

/* trip-wire line in detail */
.tw-line{ display:flex; gap:11px; }
.tw-line .twd{ width:8px; height:8px; border-radius:50%; margin-top:4px; flex:none; background:var(--dot-fine); }
.tw-line.fired .twd{ background:var(--amber); box-shadow:0 0 0 3px color-mix(in oklch,var(--amber) 22%,transparent); }
.tw-line .twt{ font-size:12.5px; line-height:1.5; color:var(--ink-2); font-weight:300; margin-top:4px; }
.tw-line.fired .twt{ color:var(--ink); }

/* gate */
.gate{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:12px; border:1px solid var(--border); }
.gate .ico{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; }
.gate .ico svg{ width:16px; height:16px; }
.gate .gt{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
.gate .gs{ font-size:11.5px; color:var(--ink-3); margin-top:2px; font-weight:300; }
.gate .badge{ margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; }
.gate.locked{ background:var(--surface-2); } .gate.locked .ico{ background:color-mix(in oklch,var(--ink-3) 14%,transparent); color:var(--ink-2); } .gate.locked .badge{ color:var(--ink-3); border:1px solid var(--border-str); }
.gate.unlocked{ background:var(--accent-soft); border-color:color-mix(in oklch,var(--accent) 34%,var(--border)); } .gate.unlocked .ico{ background:color-mix(in oklch,var(--accent) 18%,transparent); color:var(--accent); } .gate.unlocked .badge{ color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 40%,var(--border)); }

/* writing surface */
.surface{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 15px; min-height:120px; font-size:14.5px; line-height:1.65; color:var(--ink); font-weight:300; }
.surface:focus{ outline:none; border-color:color-mix(in oklch,var(--accent) 40%,var(--border)); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 14%,transparent); }
.surface[contenteditable]:empty:before{ content:attr(data-ph); color:var(--ink-3); }
.assist-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.chip-btn{ font-family:var(--sans); font-size:11.5px; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 11px; white-space:nowrap; cursor:pointer; }
.chip-btn:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip-btn.accent{ color:var(--accent); background:var(--accent-soft); border-color:color-mix(in oklch,var(--accent) 30%,var(--border)); }
.fal-input{ margin-top:9px; border:1px solid var(--border); border-radius:10px; padding:11px 13px; font-size:13px; line-height:1.5; min-height:42px; background:var(--surface-2); color:var(--ink); font-weight:300; }
.fal-input:focus{ outline:none; border-color:var(--border-str); }
.fal-input:empty:before{ content:attr(data-ph); color:var(--ink-3); }

/* generate candidate */
.cand{ border:1px solid var(--border); border-radius:11px; padding:11px 12px; background:var(--surface); margin-top:10px; }
.cand.accepted{ border-color:color-mix(in oklch,var(--accent) 36%,var(--border)); background:color-mix(in oklch,var(--accent-soft) 45%,var(--surface)); }
.cand.rejected{ opacity:.5; }
.cand.editing .wt-box{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 16%,transparent); color:var(--accent); }
.cand-top{ display:flex; align-items:center; gap:10px; }
.acc{ width:19px; height:19px; border-radius:50%; border:1.5px solid var(--border-str); background:none; flex:none; display:flex; align-items:center; justify-content:center; color:transparent; }
.acc svg{ width:10px; height:10px; }
.cand.accepted .acc{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cand-id{ flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; }
.cand-id .tk{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink); }
.cand.rejected .tk{ text-decoration:line-through; }
.cand-id .nm{ font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wt-box{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink); border:1px solid var(--border-str); border-radius:7px; padding:4px 9px; white-space:nowrap; background:var(--surface); }
.wt-box input{ font-family:var(--mono); font-size:12px; font-weight:500; color:inherit; width:34px; border:0; outline:none; background:none; text-align:right; }
.cand-ctrls{ display:flex; gap:4px; flex:none; }
.icon-btn{ width:24px; height:24px; border-radius:7px; border:1px solid transparent; background:none; color:var(--ink-3); display:flex; align-items:center; justify-content:center; }
.icon-btn:hover{ border-color:var(--border); color:var(--ink); } .icon-btn svg{ width:13px; height:13px; }
.undo-link{ font-size:11px; color:var(--accent); background:none; border:0; font-weight:500; }
.cand-meta{ display:flex; align-items:center; gap:9px; margin-top:9px; flex-wrap:wrap; }
.spark{ width:50px; height:17px; color:var(--ink-3); }
.rs{ font-family:var(--mono); font-size:10.5px; color:var(--ink-2); }
.chg{ font-family:var(--mono); font-size:10.5px; } .chg.neg{ color:var(--neg); } .chg.pos{ color:var(--pos); }
.fred-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border); border-radius:5px; padding:2px 6px; }
.macro{ font-size:11px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; flex:1 1 160px; min-width:0; }
.cand-wire{ margin-top:8px; display:flex; align-items:center; gap:8px; }
.wire-chip{ flex:1; min-width:0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:5px 9px; }
.wire-chip b{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-right:5px; }
.disclaimer{ display:flex; gap:8px; align-items:flex-start; padding:10px 20px; background:var(--surface-2); border-bottom:1px solid var(--border); font-size:11px; line-height:1.45; color:var(--ink-3); }
.disclaimer .i{ width:13px; height:13px; border-radius:50%; border:1px solid var(--ink-3); font-size:8.5px; display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; font-family:var(--mono); }
.disclaimer b{ color:var(--ink-2); font-weight:500; }
.work-banner{ display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.spin{ width:15px; height:15px; border-radius:50%; border:2px solid color-mix(in oklch,var(--accent) 22%,transparent); border-top-color:var(--accent); animation:rot .8s linear infinite; flex:none; }
@keyframes rot{ to{ transform:rotate(360deg); } }
.sk{ background:linear-gradient(90deg,var(--surface-2) 25%,color-mix(in oklch,var(--ink) 7%,var(--surface-2)) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:shim 1.4s ease infinite; border-radius:6px; }
@keyframes shim{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
.sk-row{ border:1px solid var(--border); border-radius:11px; padding:12px; margin-top:10px; }

/* diff orders */
.ord{ display:grid; grid-template-columns:18px 1fr auto auto; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid color-mix(in oklch,var(--border) 50%,transparent); }
.ord:last-child{ border-bottom:0; }
.ord .side{ width:18px; height:18px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex:none; font-family:var(--mono); font-size:11px; font-weight:600; }
.ord.sell .side{ background:var(--sell-soft); color:var(--sell); } .ord.buy .side{ background:var(--buy-soft); color:var(--buy); }
.ord .tk{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink); }
.ord .pod{ font-size:11px; color:var(--ink-3); }
.ord .sh{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); text-align:right; white-space:nowrap; }
.ord .dl{ font-family:var(--mono); font-size:13px; font-weight:500; text-align:right; white-space:nowrap; min-width:74px; }
.ord.sell .dl{ color:var(--sell); } .ord.buy .dl{ color:var(--buy); }
.summary{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:11px; overflow:hidden; }
.sm{ background:var(--surface); padding:11px 13px; }
.sm .k{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.sm .v{ font-family:var(--mono); font-size:15px; font-weight:500; color:var(--ink); margin-top:5px; }
.sm .v.warn{ color:var(--amber-line); } .sm .sub{ font-size:10.5px; color:var(--ink-3); margin-top:3px; }
.turn-pill{ font-family:var(--mono); font-size:8px; padding:1px 5px; border-radius:4px; }
.turn-pill.low{ background:var(--accent-soft); color:var(--accent); } .turn-pill.high{ background:var(--amber-soft); color:var(--amber-line); }
.magnitude{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border); background:color-mix(in oklch,var(--amber-soft) 40%,var(--surface)); }
.magnitude .mi{ color:var(--amber-line); width:18px; height:18px; flex:none; }
.mg-text{ font-size:12px; line-height:1.5; color:var(--ink); font-weight:300; } .mg-text b{ font-weight:600; }
.confirm{ padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2); flex:none; }
.cf-row{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.cf-check{ width:18px; height:18px; border-radius:5px; border:1.6px solid var(--border-str); flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; color:transparent; background:var(--surface); }
.cf-check.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cf-check svg{ width:11px; height:11px; }
.cf-text{ font-size:12.5px; line-height:1.5; color:var(--ink); font-weight:300; } .cf-text b{ font-weight:600; }
.kind-tag{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:999px; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 34%,var(--border)); background:var(--accent-soft); }
.kind-tag.high{ color:var(--amber-line); border-color:color-mix(in oklch,var(--amber) 44%,var(--border)); background:var(--amber-soft); }
.kind-tag svg{ width:11px; height:11px; }
.mode-chip{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; padding:5px 11px; border-radius:7px; color:var(--ink-2); border:1px solid var(--border-str); }
.mode-chip .mdot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.mode-chip.live{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); display:flex; align-items:center; gap:11px; padding:12px 16px 12px 13px; border-radius:12px; background:var(--surface); border:1px solid color-mix(in oklch,var(--accent) 34%,var(--border)); box-shadow:0 16px 40px -18px color-mix(in oklch,var(--ink) 50%,transparent); z-index:60; opacity:0; transition:opacity .3s, transform .3s var(--ease); }
.toast.in{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .tk-ico{ width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; flex:none; }
.toast .tk-ico svg{ width:12px; height:12px; }
.toast-text{ font-size:13px; color:var(--ink); font-weight:500; }
.toast-text small{ display:block; font-size:11px; color:var(--ink-3); font-weight:300; margin-top:1px; }

/* alerts queue */
.alert{ border:1px solid var(--border); border-radius:12px; padding:13px 14px; margin-top:10px; background:var(--surface); }
.alert.trip{ border-color:color-mix(in oklch,var(--amber) 40%,var(--border)); background:color-mix(in oklch,var(--amber-soft) 30%,var(--surface)); }
.al-top{ display:flex; align-items:center; gap:10px; }
.al-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.al-dot.trip{ background:var(--amber); box-shadow:0 0 0 3px color-mix(in oklch,var(--amber) 22%,transparent); }
.al-dot.due{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--dot-fine); }
.al-node{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.al-age{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink-3); white-space:nowrap; }
.al-what{ font-size:12.5px; line-height:1.5; color:var(--ink); font-weight:300; margin-top:9px; }
.al-what b{ font-weight:600; }
.al-actions{ display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
.empty-queue{ text-align:center; padding:40px 20px; }
.empty-queue .eq-dot{ width:11px; height:11px; border-radius:50%; background:var(--dot-fine); margin:0 auto 14px; }
.empty-queue .eq-t{ font-size:14px; font-weight:500; color:var(--ink); }
.empty-queue .eq-d{ font-size:12.5px; color:var(--ink-3); font-weight:300; margin-top:7px; line-height:1.5; max-width:30ch; margin-inline:auto; }

/* options (on-trip behavior) */
.opt-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt{ border:1px solid var(--border); border-radius:12px; padding:12px 13px; cursor:pointer; }
.opt.sel{ border-color:color-mix(in oklch,var(--accent) 40%,var(--border)); background:var(--accent-soft); }
.opt-top{ display:flex; align-items:center; gap:9px; }
.radio{ width:16px; height:16px; border-radius:50%; border:1.6px solid var(--border-str); flex:none; position:relative; }
.opt.sel .radio{ border-color:var(--accent); } .opt.sel .radio::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); }
.opt-title{ font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; }
.opt-tag{ margin-left:auto; font-family:var(--mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:2px 7px; }
.opt-desc{ font-size:11.5px; color:var(--ink-3); line-height:1.45; margin-top:8px; font-weight:300; }
.warn{ display:flex; gap:11px; margin-top:11px; padding:12px 13px; border-radius:11px; background:color-mix(in oklch,var(--amber-soft) 55%,var(--surface)); border:1px solid color-mix(in oklch,var(--amber) 42%,var(--border)); }
.warn .wi{ color:var(--amber-line); width:17px; height:17px; flex:none; margin-top:1px; }
.warn-text{ font-size:12px; line-height:1.5; color:var(--ink); font-weight:300; } .warn-text b{ font-weight:600; }
.ack{ display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:11.5px; color:var(--ink-2); cursor:pointer; }
.ack .cf-check{ width:15px; height:15px; border-radius:4px; border-color:var(--amber-line); }
.ack .cf-check.on{ background:var(--amber); border-color:var(--amber); color:var(--on-accent); }

/* trip-wire builder clause */
.readout{ display:flex; gap:11px; padding:14px 15px; border-radius:12px; background:var(--accent-soft); border:1px solid color-mix(in oklch,var(--accent) 26%,var(--border)); }
.readout .ri{ width:26px; height:26px; border-radius:7px; background:color-mix(in oklch,var(--accent) 16%,transparent); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; } .readout .ri svg{ width:15px; height:15px; }
.readout .rt{ font-size:13.5px; line-height:1.55; color:var(--ink); font-weight:300; } .readout .rt b{ font-weight:600; } .readout .rt .and{ font-family:var(--mono); font-size:10px; color:var(--accent); padding:0 3px; }
.clause{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:11px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--border-str); border-radius:8px; padding:5px 9px; white-space:nowrap; }
.pill.subject{ color:var(--accent); border-color:color-mix(in oklch,var(--accent) 36%,var(--border)); background:var(--accent-soft); }
.pill.val{ font-family:var(--mono); }
.ct{ font-size:12px; color:var(--ink-3); }
.join{ display:flex; align-items:center; gap:9px; margin:9px 0 9px 8px; }
.join .conj{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 38%,var(--border)); border-radius:999px; padding:3px 11px; cursor:pointer; background:none; } .join .conj .alt{ color:var(--ink-3); }
.join .jl{ flex:1; height:1px; background:var(--border); }
.cadence-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cad-sub{ font-size:11.5px; color:var(--ink-3); font-weight:300; }
.sel-pill{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--border-str); border-radius:9px; padding:9px 13px; white-space:nowrap; cursor:pointer; }

/* misc */
.note{ display:flex; gap:9px; padding:11px 13px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); }
.note .ni{ width:15px; height:15px; color:var(--ink-3); flex:none; margin-top:1px; }
.note-text{ font-size:11.5px; line-height:1.5; color:var(--ink-2); font-weight:300; } .note-text b{ color:var(--ink); font-weight:500; }
.hidden{ display:none !important; }
.intro{ font-size:12.5px; color:var(--ink-2); font-weight:300; line-height:1.5; }

/* ============================================================
   ONBOARDING + LOGIN  (calm centered cards, not a wall)
   ============================================================ */
.ob{ position:fixed; inset:0; display:flex; flex-direction:column; background:var(--canvas); }
.ob-rail{ height:54px; flex:none; display:flex; align-items:center; gap:13px; padding:0 24px; border-bottom:1px solid color-mix(in oklch,var(--border) 70%,transparent); }
.steps{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.step-pip{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; color:var(--ink-3); }
.step-pip .n{ width:18px; height:18px; border-radius:50%; border:1px solid var(--border-str); display:flex; align-items:center; justify-content:center; font-size:9px; }
.step-pip.done .n{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.step-pip.cur .n{ border-color:var(--accent); color:var(--accent); }
.step-pip.cur{ color:var(--ink); }
.step-sep{ width:14px; height:1px; background:var(--border); }
.ob-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:26px; overflow-y:auto; }
.ob-card{ width:460px; max-width:100%; }
.ob-card.wide{ width:720px; }
.ob-eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ob-h{ font-size:23px; font-weight:600; letter-spacing:-.015em; color:var(--ink); margin-top:10px; line-height:1.2; }
.ob-p{ font-size:13.5px; line-height:1.6; color:var(--ink-2); font-weight:300; margin-top:11px; }
.ob-p b{ color:var(--ink); font-weight:500; }
.ob-foot{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.ob-foot .spacer{ flex:1; }
.ob-back{ font-size:12.5px; color:var(--ink-3); cursor:pointer; background:none; border:0; font-weight:500; text-decoration:none; }
.ob-back:hover{ color:var(--ink-2); }
.ob-err{ margin-top:12px; font-size:12px; color:var(--neg); }

/* broker picker */
.broker-choice{ margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.path-opt{ display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:13px; padding:15px 16px; cursor:pointer; background:none; text-align:left; width:100%; font-family:inherit; }
.path-opt:hover{ border-color:var(--border-str); }
.path-opt.sel{ border-color:color-mix(in oklch,var(--accent) 42%,var(--border)); background:var(--accent-soft); }
.path-ico{ width:42px; height:42px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex:none; color:var(--ink-2); font-family:var(--mono); font-size:15px; font-weight:500; }
.path-opt.sel .path-ico{ background:color-mix(in oklch,var(--accent) 14%,transparent); border-color:transparent; color:var(--accent); }
.path-ico svg{ width:21px; height:21px; }
.path-body{ flex:1; min-width:0; }
.path-name{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.path-desc{ display:block; font-size:12px; color:var(--ink-3); line-height:1.45; margin-top:3px; font-weight:300; }
.path-go{ color:var(--ink-3); width:16px; height:16px; flex:none; }
.path-tag{ font-family:var(--mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:2px 7px; white-space:nowrap; }

/* alpaca key form */
.key-form{ margin-top:20px; display:flex; flex-direction:column; gap:11px; }
.field .fl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px; }
.field input{ width:100%; border:1px solid var(--border-str); border-radius:10px; padding:11px 13px; background:var(--surface); font-family:var(--mono); font-size:13px; color:var(--ink); outline:none; }
.field input:focus{ border-color:color-mix(in oklch,var(--accent) 40%,var(--border)); }
.trust{ display:flex; gap:10px; margin-top:16px; padding:13px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); }
.trust .t-ico{ width:17px; height:17px; flex:none; color:var(--accent); margin-top:1px; }
.trust-text{ font-size:11.5px; line-height:1.55; color:var(--ink-2); font-weight:300; }
.trust-text b{ color:var(--ink); font-weight:500; }
.why{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.why-row{ display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--ink-2); line-height:1.45; font-weight:300; }
.why-row .wk{ width:15px; height:15px; flex:none; color:var(--accent); margin-top:1px; }

/* template picker */
.fork-note{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:8px 13px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); font-size:11.5px; color:var(--ink-2); font-weight:300; }
.fork-note .fk{ width:14px; height:14px; color:var(--accent); flex:none; }
.fork-note b{ color:var(--ink); font-weight:500; }
.tpl-grid{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tpl{ border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:16px; cursor:pointer; transition:border-color .15s, box-shadow .15s; display:flex; flex-direction:column; text-align:left; font-family:inherit; }
.tpl:hover{ border-color:var(--border-str); box-shadow:0 8px 26px -14px color-mix(in oklch,var(--ink) 45%,transparent); }
.tpl.blank{ border-style:dashed; background:transparent; }
.tpl-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tpl-name{ font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.tpl-meta{ font-family:var(--mono); font-size:9px; color:var(--ink-3); margin-top:4px; letter-spacing:.02em; }
.tpl-pods{ font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:3px 8px; white-space:nowrap; }
.skel{ margin-top:15px; display:flex; flex-direction:column; gap:7px; flex:1; }
.skel-row{ display:flex; align-items:center; gap:9px; }
.skel-dot{ width:6px; height:6px; border-radius:50%; background:var(--dot-fine); flex:none; opacity:.5; }
.skel-name{ font-size:11px; color:var(--ink-2); width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
.skel-bar{ height:8px; border-radius:3px; background:color-mix(in oklch,var(--ink) 11%,transparent); }
.skel-w{ font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin-left:auto; }
.tpl-foot{ margin-top:15px; padding-top:13px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.tpl-stamp{ font-family:var(--mono); font-size:9px; color:var(--ink-3); }
.tpl-adopt{ font-size:11.5px; font-weight:500; color:var(--accent); display:inline-flex; align-items:center; gap:5px; }
.blank-center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:11px; padding:18px 0; }
.blank-ico{ width:46px; height:46px; border-radius:13px; border:1px dashed var(--border-str); display:flex; align-items:center; justify-content:center; color:var(--ink-3); }
.blank-ico svg{ width:22px; height:22px; }
.blank-desc{ font-size:11.5px; color:var(--ink-3); font-weight:300; line-height:1.45; max-width:22ch; }

/* login — a minimal centered splash: logo + name + one button */
.login-screen{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:22px; margin-bottom:38px; }
.login-logo{ width:60px; height:60px; background:var(--ink-2); transform:rotate(45deg); border-radius:14px; }
.login-name{ font-size:42px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.google-btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:11px; border:1px solid var(--border-str); background:var(--surface); color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.google-btn:hover{ border-color:var(--ink-3); box-shadow:0 8px 26px -14px color-mix(in oklch,var(--ink) 45%,transparent); }
.google-btn svg{ width:18px; height:18px; }

/* settings popover */
.settings-pop{ position:absolute; top:46px; right:20px; z-index:40; width:230px; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:13px 14px; box-shadow:0 18px 50px -22px color-mix(in oklch,var(--ink) 50%,transparent); }
.sp-sec{ margin-top:12px; } .sp-sec:first-child{ margin-top:0; }
.sp-row{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.seg{ display:flex; border:1px solid var(--border-str); border-radius:7px; overflow:hidden; }
.seg button{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; padding:5px 8px; background:var(--surface); color:var(--ink-3); border:0; }
.seg button.on{ background:var(--accent); color:var(--on-accent); }
.swatches{ display:flex; gap:8px; }
.swatch{ width:18px; height:18px; border-radius:50%; border:1px solid var(--border-str); cursor:pointer; padding:0; }
.swatch.on{ box-shadow:0 0 0 2px var(--canvas), 0 0 0 4px var(--accent); }

/* account: top-bar avatar button */
.avatar-btn{ width:28px; height:28px; border-radius:50%; border:1px solid var(--border-str); background:var(--accent-soft); color:var(--accent); font-family:var(--sans); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.avatar-btn:hover{ border-color:var(--accent); }

/* account modal: key/value rows, health badge, danger actions */
.kv{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid color-mix(in oklch,var(--border) 55%,transparent); }
.kv:last-of-type{ border-bottom:0; }
.kvk{ font-size:12px; color:var(--ink-3); }
.kvv{ font-size:12.5px; color:var(--ink); text-align:right; }
.kvv.mono{ font-family:var(--mono); font-size:12px; }
.reveal{ font-family:var(--sans); font-size:10.5px; color:var(--accent); background:none; border:0; margin-left:6px; }
.health{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border-str); border-radius:999px; padding:2px 7px; margin-left:6px; }
.health.ok{ color:var(--pos); border-color:color-mix(in oklch,var(--pos) 40%,var(--border)); }
.health.bad{ color:var(--amber-line); border-color:color-mix(in oklch,var(--amber) 44%,var(--border)); }
.test-result{ margin-top:12px; font-size:12px; color:var(--ink-2); font-weight:300; }
.test-result.bad{ color:var(--amber-line); }
.btn.danger-outline{ background:none; border-color:color-mix(in oklch,var(--neg) 34%,var(--border)); color:var(--neg); justify-content:center; }
.btn.danger-outline:hover{ border-color:var(--neg); color:var(--neg); }
.btn.danger{ background:var(--neg); border-color:var(--neg); color:#fff; }
.t-dark .btn.danger{ color:oklch(0.16 0.01 252); }

/* onboarding rail identity */
.ob-rail-right{ margin-left:auto; display:flex; align-items:center; gap:20px; }
.ob-account{ display:flex; align-items:center; gap:9px; }
button.ob-account{ background:none; border:0; font:inherit; cursor:pointer; padding:4px 7px; border-radius:9px; }
button.ob-account:hover{ background:var(--surface-2); }
.ob-cv{ width:12px; height:12px; color:var(--ink-3); display:flex; } .ob-cv svg{ width:8px; height:8px; }
.ob-avatar{ width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; }
.ob-name{ font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; }
.ob-email{ font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.ob-signout{ font-size:12px; color:var(--ink-3); text-decoration:none; font-weight:500; }
.ob-signout:hover{ color:var(--ink); }

/* ============================================================
   MOBILE  (modals become bottom sheets, per the mobile pass)
   ============================================================ */
@media (max-width:640px){
  .modal{ align-items:flex-end; padding:0; }
  .card, .card.wide, .card.narrow{ width:100%; max-width:none; max-height:88vh; border-radius:22px 22px 0 0; border-left:0; border-right:0; border-bottom:0;
    box-shadow:0 -20px 50px -24px color-mix(in oklch,var(--ink) 55%,transparent); }
  .card::before{ content:''; width:36px; height:4px; border-radius:3px; background:var(--border-str); margin:9px auto 4px; flex:none; order:-1; }
  .topbar{ padding:0 14px; }
  .tb-podster{ padding:0; width:32px; height:32px; justify-content:center; gap:0; }
  .tb-podster span:last-child{ display:none; }   /* orb only on narrow screens */
  .podster-tray{ top:52px; }
  .pv .scope{ display:none; }
  .tpl-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .ob-rail-right{ gap:12px; }
  .ob-name, .ob-email{ display:none; }  /* keep the avatar + Sign out on small screens */
  .ob-card.wide{ width:100%; }
}