/* ============================================================
   HM5 theme — one palette, one face, one tempo for every page.
   Loaded LAST on every page (the shell appends it to the end of
   <body>), so it sits over each page's own tokens. Each page kept
   its own variable names over the years; this maps every one of
   them onto the same colors, so the Tape, the Desk, the Playbook,
   Play, Start Here and the sign-up pages all read as one product.
   ============================================================ */
:root{
  /* surfaces: deep navy, never pure black — numbers sit calmer on it */
  --bg:#0b1017; --bg2:#0e141c; --surface:#111823; --card:#111823; --panel:#111823; --surface-1:#111823; --surface-2:#0e141c; --surface-3:#151c27;
  --line:#2d3848; --border:#2d3848; --line-2:#3f4c61; --border-soft:#263040;
  --hm5-bg:#0b1017; --hm5-surface:#111823; --hm5-line:#2d3848; --hm5-line-2:#3f4c61;
  --gm-bg:#0b1017; --gm-surface:#111823;
  /* text: three steps, all readable */
  --text:#f2f5fa; --white:#f2f5fa;
  --text-2:#c8d0db; --text-dim:#c8d0db; --dim:#c8d0db; --gray:#c8d0db; --hm5-dim:#c8d0db; --gm-dim:#c8d0db;
  --text-3:#b0b9c6; --text-faint:#b0b9c6; --faint:#b0b9c6; --gray2:#b0b9c6; --hm5-faint:#b0b9c6; --gm-faint:#b0b9c6; --text-4:#98a2b1;
  /* the five brand colors, one value each */
  --green:#00e28f; --up:#00e28f; --hm5-green:#00e28f; --gm-green:#00e28f; --green-soft:#1f9d5a;
  --cyan:#22c3ff; --hm5-cyan:#22c3ff; --gm-cyan:#22c3ff; --link:#22c3ff;
  --yellow:#ffd166; --gold:#ffd166; --hm5-yellow:#ffd166; --gm-gold:#ffd166;
  --magenta:#dc5ae6; --hm5-magenta:#dc5ae6; --gm-magenta:#dc5ae6; --pink:#dc5ae6;
  --red:#ff4d5e; --down:#ff4d5e; --hm5-red:#ff4d5e; --gm-red:#ff4d5e;
  /* one face */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --font-micro:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --cal-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --hm5-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --gm-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  /* one tempo */
  --ease:cubic-bezier(.2,.8,.3,1); --fast:.15s; --calm:.28s;
}
html{background:#0b1017}
body{background-color:#0b1017;color:#f2f5fa;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
code,pre,kbd{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3{letter-spacing:-.02em}
/* the same lift on every button and link that looks like one */
a,button,.btn,.go,.tf,.db-tab,.nav-tab,.pv-path,.pv-w,.bk-tile,.ls-tile,.gm-quest,.dr-choice,.tk-band{transition:transform var(--fast) var(--ease),background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.btn:not(:disabled):hover,.go:hover,.pv-path:hover,.ls-tile:hover,.gm-quest:hover,.bk-tile:hover{transform:translateY(-1px)}
/* one corner radius family: cards 16, controls 10 */
.card,.listcard,.board-card,.gm-card,.pv-w,.pv-path,.bk-tile,.step,.arena,.ls-course,.ls-check,.ls-drill,.ls-note,.g,.promise > div,.stat > div,.acct-bar,.pmodal-box,.tut-card{border-radius:16px}
.btn,.go,.gm-wgo,.gm-wcalm,.ls-btn,.dr-send,.next,.tf,.hm5-nav-cta,.hm5-nav-coach{border-radius:10px}
/* selection and focus in the brand green */
::selection{background:rgba(0,226,143,.3)}
:focus-visible{outline:2px solid #00e28f;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================
   LIGHT — the Apple look. White surfaces, near-black type, one blue.
   The charts are their own document and never read these tokens.
   ============================================================ */
:root[data-theme="light"]{
  --bg:#f5f5f7; --bg2:#ffffff; --surface:#ffffff; --card:#ffffff; --panel:#ffffff; --surface-1:#ffffff; --surface-2:#fbfbfd; --surface-3:#f5f5f7;
  --line:#d5d5dc; --border:#d5d5dc; --line-2:#bdbdc6; --border-soft:#dedee5;
  --hm5-bg:#f5f5f7; --hm5-surface:#ffffff; --hm5-line:#d5d5dc; --hm5-line-2:#bdbdc6; --hm5-sel:rgba(0,0,0,.055); --hm5-glass:rgba(251,251,253,.84); --hm5-text:#1d1d1f; --gm-text:#1d1d1f;
  --gm-bg:#f5f5f7; --gm-surface:#ffffff;
  --text:#1d1d1f; --white:#1d1d1f;
  --text-2:#55555b; --text-dim:#55555b; --dim:#55555b; --gray:#55555b; --hm5-dim:#55555b; --gm-dim:#55555b;
  --text-3:#6a6a70; --text-faint:#6a6a70; --faint:#6a6a70; --gray2:#6a6a70; --hm5-faint:#6a6a70; --gm-faint:#6a6a70; --text-4:#85858b;
  --green:#1d9d4a; --up:#1d9d4a; --hm5-green:#1d9d4a; --gm-green:#1d9d4a; --green-soft:#34c759;
  --cyan:#0071e3; --hm5-cyan:#0071e3; --gm-cyan:#0071e3; --link:#0071e3;
  --yellow:#b8860b; --gold:#b8860b; --hm5-yellow:#b8860b; --gm-gold:#b8860b; --hm5-gold:#8a6508; --hm5-gold-bg:rgba(184,134,11,.08); --hm5-gold-line:rgba(184,134,11,.45);
  --magenta:#a84dc4; --hm5-magenta:#a84dc4; --gm-magenta:#a84dc4; --pink:#a84dc4;
  --red:#d70015; --down:#d70015; --hm5-red:#d70015; --gm-red:#d70015;
  --hm5-accent:#0071e3; --hm5-accent-ink:#ffffff;
}
:root[data-theme="light"],:root[data-theme="light"] body{background:#f5f5f7;color:#1d1d1f}
:root[data-theme="light"] ::selection{background:rgba(0,113,227,.22)}
:root[data-theme="light"] :focus-visible{outline-color:#0071e3}
/* the pages grew up dark: white paint and hairlines on black do not show on white.
   These give every card an edge and every hard-coded white word a color. */
:root[data-theme="light"] .card,:root[data-theme="light"] .listcard,:root[data-theme="light"] .board-card,:root[data-theme="light"] .gm-card,:root[data-theme="light"] .gm,
:root[data-theme="light"] .pv-w,:root[data-theme="light"] .pv-path,:root[data-theme="light"] .bk-tile,:root[data-theme="light"] .step,:root[data-theme="light"] .arena,
:root[data-theme="light"] .ls-course,:root[data-theme="light"] .ls-check,:root[data-theme="light"] .ls-drill,:root[data-theme="light"] .ls-note,:root[data-theme="light"] .g,
:root[data-theme="light"] .promise > div,:root[data-theme="light"] .stat > div,:root[data-theme="light"] .acct-bar,:root[data-theme="light"] .pmodal-box,:root[data-theme="light"] .tut-card,
:root[data-theme="light"] details.tk,:root[data-theme="light"] .post,:root[data-theme="light"] .ev,:root[data-theme="light"] .callout,:root[data-theme="light"] .info,:root[data-theme="light"] .success,
:root[data-theme="light"] .form-section,:root[data-theme="light"] .table-wrap,:root[data-theme="light"] .lrow,:root[data-theme="light"] .result{background-color:#ffffff;border-color:#e5e5ea;box-shadow:0 1px 3px rgba(0,0,0,.05)}
:root[data-theme="light"] [style*="color:#fff"],:root[data-theme="light"] [style*="color: #fff"],:root[data-theme="light"] [style*="color:#ffffff"],:root[data-theme="light"] [style*="color:white"]{color:#1d1d1f!important}
:root[data-theme="light"] [style*="color:var(--text)"]{color:#1d1d1f!important}
:root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3,:root[data-theme="light"] h4{color:#1d1d1f}
:root[data-theme="light"] table{background:#ffffff}
:root[data-theme="light"] th{background:#f5f5f7;color:#6e6e73;border-bottom:1px solid #e5e5ea}
:root[data-theme="light"] td{border-color:#ececf0}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#ffffff;color:#1d1d1f;border-color:#d2d2d7}
:root[data-theme="light"] .btn,:root[data-theme="light"] .tf,:root[data-theme="light"] .nav-tab{color:#1d1d1f}
/* the shared pieces */
:root[data-theme="light"] .gm-road .rm{background:rgba(184,134,11,.06);border-color:rgba(184,134,11,.35)}
:root[data-theme="light"] .gm-road .seg{background:rgba(0,0,0,.14)}
:root[data-theme="light"] .gm-road .gm-next a.calm{background:rgba(0,0,0,.05);border-color:#d2d2d7;color:#1d1d1f}
:root[data-theme="light"] .deskbar{background:rgba(255,255,255,.92)!important;border-bottom-color:#e5e5ea!important}
:root[data-theme="light"] .deskbar::after{display:none}
:root[data-theme="light"] .db-tab{color:color-mix(in srgb,var(--g,#6e6e73) 62%,#1d1d1f)}
:root[data-theme="light"] .db-tab.here,:root[data-theme="light"] .db-tab.open{color:color-mix(in srgb,var(--g,#1d1d1f) 78%,#1d1d1f)}
:root[data-theme="light"] .db-kicker{color:#86868b}
:root[data-theme="light"] .deskpanel{background:#ffffff;border-bottom-color:#e5e5ea;box-shadow:0 24px 50px -20px rgba(0,0,0,.25)}
:root[data-theme="light"] .dp-t b{color:#1d1d1f} :root[data-theme="light"] .dp-t i{color:#6e6e73}
:root[data-theme="light"] .hm5-learntip,:root[data-theme="light"] #gmStepTip{background:#ffffff;color:#1d1d1f;border:1px solid #e5e5ea;box-shadow:0 12px 30px rgba(0,0,0,.18)}
:root[data-theme="light"] .hm5-tabbar{background:rgba(255,255,255,.94);border-top-color:#e5e5ea} :root[data-theme="light"] .hm5-tabbar a{color:#6e6e73}
:root[data-theme="light"] .hm5-bpill{color:#6e6e73;border-color:#d2d2d7;background:#fff}
:root[data-theme="light"] #hm5AlertCenter{background:#fff;color:#1d1d1f;border-color:#e5e5ea}
:root[data-theme="light"] .tk-band{background:#ffffff}
:root[data-theme="light"] .gm-welcome{background:rgba(245,245,247,.86)}

/* the Desk's own header and tab row */
:root[data-theme="light"] .topbar{background:#ffffff!important;border-bottom-color:#e5e5ea!important}
:root[data-theme="light"] .nav-tabs{border-bottom-color:#e5e5ea!important}
:root[data-theme="light"] .nav-tabs::after{display:none}
:root[data-theme="light"] .nav-tab{color:#6e6e73} :root[data-theme="light"] .nav-tab.active,:root[data-theme="light"] .nav-tab:hover{color:#1d1d1f}
:root[data-theme="light"] .brand-tagline{color:#86868b}
:root[data-theme="light"] .help-btn{color:#8a6508;border-color:rgba(184,134,11,.45)}
:root[data-theme="light"] .db-page b,:root[data-theme="light"] .gm-road .here b{color:#1d1d1f}
:root[data-theme="light"] .mon-pos tr.grp td{background:#f5f5f7}
:root[data-theme="light"] .tk-band{background:#ffffff!important}
:root[data-theme="light"] details.tk{background:#ffffff!important}
:root[data-theme="light"] .tk-body,:root[data-theme="light"] .tk-plain{background:#fbfbfd}
:root[data-theme="light"] .hm5-tape .tp-i{border-right-color:#e5e5ea}
:root[data-theme="light"] .hero,:root[data-theme="light"] .brief{background:#ffffff!important;border:1px solid #e5e5ea}
/* the Desk's first-visit tutorial */
:root[data-theme="light"] #tutorialOverlay{background:rgba(245,245,247,.86)}
:root[data-theme="light"] .tut-card{background:#ffffff!important;border:1px solid #e5e5ea!important;box-shadow:0 30px 70px rgba(0,0,0,.18)!important}
:root[data-theme="light"] .tut-title{color:#1d1d1f!important;text-transform:none!important;letter-spacing:-.02em!important}
:root[data-theme="light"] .tut-step-num{color:#8a6508}
:root[data-theme="light"] .tut-body,:root[data-theme="light"] .tut-body strong{color:#1d1d1f}
:root[data-theme="light"] .tut-skip,:root[data-theme="light"] .tut-btn{color:#1d1d1f;border-color:#d2d2d7;background:#fff}
:root[data-theme="light"] .tut-btn.primary,:root[data-theme="light"] .tut-btn.next{background:#0071e3;color:#fff;border-color:#0071e3}
/* the section bar as a segmented control */
:root[data-theme="light"] .db-tray{background:rgba(118,118,128,.14)}
:root[data-theme="light"] .db-tray .db-tab.here,:root[data-theme="light"] .db-tray .db-tab.open{background:#ffffff;color:#1d1d1f;box-shadow:0 1px 4px rgba(0,0,0,.15)}

/* EASIER ON THE EYES (owner, 2026-10-05). For members who do not see small grey type well: the
   two dimmer text steps and the hairlines above were raised a notch in both themes, and the
   smallest labels on cards (the captions over each number) are a size larger and a step brighter. */
.pc-t i,.tk-t i{font-size:11.5px;color:var(--text-dim,var(--text-2));opacity:1}
.pc-t b,.tk-t b{letter-spacing:0}


/* ============================================================
   DESIGN SYSTEM v2 (owner, 2026-10-07: "look like the industry leader in every aspect").
   Quiet chrome, loud data. Three surfaces, two text greys, one accent; hairlines
   instead of painted borders; a display face for headlines, a mono face for every
   number; one motion curve; skeletons instead of spinners. Loaded last, so it
   sits over every page's own tokens and over the v1 block above.
   ============================================================ */
:root{
  --bg:#0a0e14; --bg2:#0d1219; --surface:#10161f; --card:#10161f; --panel:#10161f; --surface-1:#10161f; --surface-2:#0d1219; --surface-3:#151d28;
  --hm5-bg:#0a0e14; --hm5-surface:#10161f; --gm-bg:#0a0e14; --gm-surface:#10161f;
  --line:rgba(255,255,255,.085); --border:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16); --border-soft:rgba(255,255,255,.06);
  --hm5-line:rgba(255,255,255,.085); --hm5-line-2:rgba(255,255,255,.16);
  --text:#eef2f7; --white:#eef2f7;
  --text-2:#aab4c3; --text-dim:#aab4c3; --dim:#aab4c3; --gray:#aab4c3; --hm5-dim:#aab4c3; --gm-dim:#aab4c3;
  --text-3:#7f8a9b; --text-faint:#8a95a6; --faint:#8a95a6; --gray2:#8a95a6; --hm5-faint:#8a95a6; --gm-faint:#8a95a6; --text-4:#6b7686;
  /* the market's colors: a calmer green and red that hold up for hours, one blue accent, one gold */
  --green:#1fd18a; --up:#1fd18a; --hm5-green:#1fd18a; --gm-green:#1fd18a; --green-soft:#17a06a;
  --red:#f2566a; --down:#f2566a; --hm5-red:#f2566a; --gm-red:#f2566a;
  --cyan:#3db5ff; --hm5-cyan:#3db5ff; --gm-cyan:#3db5ff; --link:#3db5ff; --hm5-accent:#3db5ff;
  --yellow:#f6c453; --gold:#f6c453; --hm5-yellow:#f6c453; --gm-gold:#f6c453;
  --magenta:#d56ae8; --hm5-magenta:#d56ae8; --gm-magenta:#d56ae8; --pink:#d56ae8;
  /* type: Inter for the interface, Inter Tight for headlines, JetBrains Mono for numbers */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hm5-font:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --gm-font:var(--hm5-font); --sans:var(--hm5-font); --cal-sans:var(--hm5-font); --font-micro:var(--hm5-font);
  /* depth: three levels */
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 8px 24px rgba(0,0,0,.35); --shadow-3:0 24px 64px rgba(0,0,0,.55);
  --r-card:16px; --r-ctl:10px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.3,1); --fast:.15s; --calm:.28s;
}
html{background:#0a0e14}
body{background-color:#0a0e14;color:#eef2f7;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.hero-h,.gm-wcard h3,.hm5-side-name{font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.025em}
h1{font-weight:800} h2{font-weight:800} h3{font-weight:700}
/* every number in one mono face, tabular: prices, tickers, strikes, P/L, the running tape */
.tk-t b,.tb-list .tk-t b,.tk-tick,.st-px,.st-ba,.st-chg,.chLast,#chLast,.tos-last,.tos-under td,.ch-table td,.mon-pos td,.bt-num b,.bt-num small,.hm5-ticker,.hm5-ticker *,.row .r,.bot-goal-n b,.acct-bar b,.hero-when,.rg-v,.fg-v,td.px,.tp b,.tp input,
.tk input,.tos-price input,.ho-c,.tb-n{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:0}
/* pills, badges and chips are words first: Inter, bold, full ink, a crisp hairline (owner, 2026-10-07: "a haze to them") */
.pill,.badge,.chip,.scn-chip,.stk,.bk-badge{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-variant-numeric:tabular-nums;opacity:1;-webkit-font-smoothing:antialiased;text-shadow:none}
.tk-t b,.tb-list .tk-t b{font-weight:600}
/* hairlines, not painted borders; depth only where something floats */
.card,.listcard,.board-card,.gm-card,.w,.bk-tile,.ls-tile,.pv-w,.pv-path,.acct-bar,.tos-card,.slot,.st-bar,.st-chain{border-color:var(--line)!important;box-shadow:var(--shadow-1)}
.pmodal-box,.hm5-dlg-box,.ov-box,.gm-wcard,.tos-menu,.hm5-learntip{box-shadow:var(--shadow-3)}
/* labels are whole: a pill, badge or chip never wraps or cuts */
.pill,.badge,.chip,.scn-chip,.stk,.bk-badge,.tb-head span,.tb-tab,.nav-tab,.ptab,.hm5-door-l{white-space:nowrap}
/* one tempo everywhere */
.card,.w,.row,.bk-tile,.tb-list details.tk,.tb-tab,.ptab,.nav-tab{transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease)}
/* skeletons: the shape of what is coming, never a spinner */
.hm5-skel{display:block;border-radius:8px;min-height:14px;background:linear-gradient(90deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.045) 100%);background-size:200% 100%;animation:hm5-shimmer 1.3s linear infinite}
@keyframes hm5-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* the live price breathes once a second; nothing else moves on its own */
.st-feed.live,.badge.live,.hm5-live{animation:hm5-breathe 2.4s var(--ease) infinite}
@keyframes hm5-breathe{0%,100%{box-shadow:0 0 0 0 rgba(31,209,138,0)}50%{box-shadow:0 0 0 4px rgba(31,209,138,.18)}}
/* a number that just changed ticks: a brief wash, then calm */
.hm5-tick-up{animation:hm5-tickup .6s var(--ease)} .hm5-tick-dn{animation:hm5-tickdn .6s var(--ease)}
@keyframes hm5-tickup{0%{background:rgba(31,209,138,.35)}100%{background:transparent}} @keyframes hm5-tickdn{0%{background:rgba(242,86,106,.35)}100%{background:transparent}}
/* door tiles use the icon font now */
.hm5-tile i.ti{font-size:21px;line-height:1;display:block} .hm5-side-title .hm5-tile i.ti{font-size:18px}
/* phones: every control is a thumb target, the running tape stays off the thumbs */
@media (max-width:620px){ .btn,.go,.tf,.nav-tab,.ptab,.tb-tab,.hm5-door,.seg button{min-height:44px} .tp button{min-height:40px} }

/* ---------- LIGHT, tuned on its own (not the dark theme inverted) ---------- */
:root[data-theme="light"]{
  --bg:#f3f4f6; --bg2:#ffffff; --surface:#ffffff; --card:#ffffff; --panel:#ffffff; --surface-1:#ffffff; --surface-2:#f8f9fb; --surface-3:#eef0f3;
  --hm5-bg:#f3f4f6; --hm5-surface:#ffffff; --gm-bg:#f3f4f6; --gm-surface:#ffffff;
  --line:rgba(15,23,42,.10); --border:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.18); --border-soft:rgba(15,23,42,.07); --hm5-line:rgba(15,23,42,.10); --hm5-line-2:rgba(15,23,42,.18);
  --text:#0f172a; --white:#0f172a; --hm5-text:#0f172a; --gm-text:#0f172a;
  --text-2:#475569; --text-dim:#475569; --dim:#475569; --gray:#475569; --hm5-dim:#475569; --gm-dim:#475569;
  --text-3:#64748b; --text-faint:#64748b; --faint:#64748b; --gray2:#64748b; --hm5-faint:#64748b; --gm-faint:#64748b; --text-4:#7c8899;
  --green:#0f9f6e; --up:#0f9f6e; --hm5-green:#0f9f6e; --gm-green:#0f9f6e; --green-soft:#16b981;
  --red:#d6334a; --down:#d6334a; --hm5-red:#d6334a; --gm-red:#d6334a;
  --cyan:#0b74de; --hm5-cyan:#0b74de; --gm-cyan:#0b74de; --link:#0b74de; --hm5-accent:#0b74de; --hm5-accent-ink:#ffffff;
  --yellow:#a16207; --gold:#a16207; --hm5-yellow:#a16207; --gm-gold:#a16207; --hm5-gold:#854d0e; --hm5-gold-bg:rgba(161,98,7,.08); --hm5-gold-line:rgba(161,98,7,.4);
  --magenta:#9d3fc2; --hm5-magenta:#9d3fc2; --gm-magenta:#9d3fc2; --pink:#9d3fc2;
  --shadow-1:0 1px 2px rgba(15,23,42,.06); --shadow-2:0 8px 24px rgba(15,23,42,.08); --shadow-3:0 24px 64px rgba(15,23,42,.18);
}
:root[data-theme="light"],:root[data-theme="light"] body{background:#f3f4f6;color:#0f172a}
:root[data-theme="light"] .hm5-skel{background:linear-gradient(90deg,rgba(15,23,42,.05) 0%,rgba(15,23,42,.10) 50%,rgba(15,23,42,.05) 100%);background-size:200% 100%}
:root[data-theme="light"] ::selection{background:rgba(11,116,222,.2)} :root[data-theme="light"] :focus-visible{outline-color:#0b74de}

/* ============================================================
   DESIGN SYSTEM v3 — "a Robinhood clone by the same design team" (owner, 2026-10-08).
   Near-black surfaces that step up without shadows, solid hairline borders, Inter for
   everything including numbers (tabular), market green #00C805 and red #FF5A36, one
   electric accent #CCFF00 used only on the primary action, small radii (4/6/8/10),
   flat panels, quiet controls, big numbers. Loaded last, over v1 and v2 above.
   Color meaning: green = bullish/confirmed, red = bearish/invalidated, yellow = attention,
   purple = exit/reversal, gray = neutral. Never color for decoration.
   ============================================================ */
:root{
  --bg:#0B0D10; --bg2:#0B0D10; --surface:#111318; --card:#111318; --panel:#111318; --surface-1:#111318; --surface-2:#15171C; --surface-3:#1B1E23;
  --hm5-bg:#0B0D10; --hm5-surface:#111318; --gm-bg:#0B0D10; --gm-surface:#111318;
  --line:#292C32; --border:#292C32; --line-2:#34373D; --border-soft:#202329; --hm5-line:#292C32; --hm5-line-2:#34373D;
  --hm5-sel:rgba(255,255,255,.06); --hm5-glass:#0B0D10;
  --text:#F5F5F5; --white:#F5F5F5; --hm5-text:#F5F5F5; --gm-text:#F5F5F5;
  --text-2:#B4B8C0; --text-dim:#B4B8C0; --dim:#B4B8C0; --gray:#B4B8C0; --hm5-dim:#B4B8C0; --gm-dim:#B4B8C0;
  --text-3:#969AA3; --text-faint:#969AA3; --faint:#969AA3; --gray2:#969AA3; --hm5-faint:#969AA3; --gm-faint:#969AA3; --text-4:#7A7E87;
  --green:#00C805; --up:#00C805; --hm5-green:#00C805; --gm-green:#00C805; --green-soft:#0A9A18;
  --red:#FF5A36; --down:#FF5A36; --hm5-red:#FF5A36; --gm-red:#FF5A36;
  --cyan:#6EB5FF; --hm5-cyan:#6EB5FF; --gm-cyan:#6EB5FF; --link:#6EB5FF;
  --yellow:#FFD60A; --gold:#FFD60A; --hm5-yellow:#FFD60A; --gm-gold:#FFD60A; --hm5-gold:#FFD60A; --hm5-gold-bg:rgba(255,214,10,.08); --hm5-gold-line:rgba(255,214,10,.35);
  --magenta:#AF52DE; --hm5-magenta:#AF52DE; --gm-magenta:#AF52DE; --pink:#AF52DE;
  --neon:#CCFF00; --hm5-accent:#CCFF00; --hm5-accent-ink:#0B0D10;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --font-sans:var(--font); --font-ui:var(--font); --font-display:var(--font); --font-micro:var(--font);
  --font-mono:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --hm5-font:var(--font); --gm-font:var(--font); --sans:var(--font); --cal-sans:var(--font);
  --shadow-1:none; --shadow-2:0 8px 24px rgba(0,0,0,.4); --shadow-3:0 24px 64px rgba(0,0,0,.6);
  --r-card:8px; --r-ctl:6px; --r-pill:999px;
}
html{background:#0B0D10} body{background-color:#0B0D10;color:#F5F5F5;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,.hero-h,.gm-wcard h3,.hm5-side-name{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.015em}
h1{font-weight:700} h2{font-weight:600} h3{font-weight:600}
/* numbers: Inter, tabular, no second face */
.tk-t b,.tb-list .tk-t b,.tk-tick,.st-px,.st-ba,.st-chg,.chLast,#chLast,.tos-last,.tos-under td,.ch-table td,.mon-pos td,.bt-num b,.bt-num small,.hm5-ticker,.hm5-ticker *,.row .r,.tk input,.tos-price input,.ho-c,.tb-n,code,pre,kbd{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif!important;font-variant-numeric:tabular-nums;letter-spacing:0}
/* flat panels: one solid hairline, small corners, no shadow */
.card,.listcard,.board-card,.gm-card,.w,.bk-tile,.ls-tile,.pv-w,.pv-path,.acct-bar,.tos-card,.slot,.st-bar,.st-chain,.step,.arena,.ls-course,.ls-check,.ls-drill,.ls-note,.g,.promise > div,.stat > div,.tut-card,.tb-list details.tk,.tk-band,.pc,.post,.ev,.form-section,.table-wrap{border-radius:8px!important;box-shadow:none!important;border-color:var(--line)!important}
.pmodal-box,.hm5-dlg-box,.ov-box,.gm-wcard,.tos-menu,.hm5-learntip,.hm5-take-box,.hm5-jump .jp-in,.hm5-langpanel .lp-in{border-radius:10px!important;box-shadow:var(--shadow-3)}
.btn,.go,.gm-wgo,.gm-wcalm,.ls-btn,.dr-send,.next,.tf,.pl-go,.ot button,.seg button,.tb-tab,.ptab{border-radius:6px!important}
.pill,.badge,.chip,.scn-chip,.stk,.bk-badge{border-radius:4px!important}
/* the one electric accent: primary actions. Green stays the market's color, not the button color */
.btn.primary,.btn-primary,.gm-wgo,.ls-btn.primary,.pv-cta:not(.pv-cta-2),.pv-offer-cta,.hm5-take-go,.dr-send,.tut-btn.primary,.tut-btn.next,.tr-go{background:var(--neon)!important;color:#0B0D10!important;border-color:var(--neon)!important;font-weight:600}
::selection{background:rgba(204,255,0,.25)} :focus-visible{outline:2px solid var(--neon);outline-offset:2px}
/* breathing and tick washes in the market colors */
@keyframes hm5-breathe{0%,100%{box-shadow:0 0 0 0 rgba(0,200,5,0)}50%{box-shadow:0 0 0 4px rgba(0,200,5,.18)}}
@keyframes hm5-tickup{0%{background:rgba(0,200,5,.3)}100%{background:transparent}} @keyframes hm5-tickdn{0%{background:rgba(255,90,54,.3)}100%{background:transparent}}
/* ---------- LIGHT v3: white, near-black type, the same market colors ---------- */
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg2:#FFFFFF; --surface:#FFFFFF; --card:#FFFFFF; --panel:#FFFFFF; --surface-1:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EEF0F3;
  --hm5-bg:#FFFFFF; --hm5-surface:#FFFFFF; --gm-bg:#FFFFFF; --gm-surface:#FFFFFF; --hm5-glass:#FFFFFF; --hm5-sel:rgba(0,0,0,.05);
  --line:#E3E5E8; --border:#E3E5E8; --line-2:#D0D3D8; --border-soft:#EDEEF1; --hm5-line:#E3E5E8; --hm5-line-2:#D0D3D8;
  --text:#0B0D10; --white:#0B0D10; --hm5-text:#0B0D10; --gm-text:#0B0D10;
  --text-2:#4B4F57; --text-dim:#4B4F57; --dim:#4B4F57; --gray:#4B4F57; --hm5-dim:#4B4F57; --gm-dim:#4B4F57;
  --text-3:#6B6F78; --text-faint:#6B6F78; --faint:#6B6F78; --gray2:#6B6F78; --hm5-faint:#6B6F78; --gm-faint:#6B6F78; --text-4:#8A8E97;
  --green:#00A02C; --up:#00A02C; --hm5-green:#00A02C; --gm-green:#00A02C; --green-soft:#16B981;
  --red:#E8431F; --down:#E8431F; --hm5-red:#E8431F; --gm-red:#E8431F;
  --cyan:#0B74DE; --hm5-cyan:#0B74DE; --gm-cyan:#0B74DE; --link:#0B74DE;
  --yellow:#B7860B; --gold:#B7860B; --hm5-yellow:#B7860B; --gm-gold:#B7860B; --hm5-gold:#8A6508; --hm5-gold-bg:rgba(183,134,11,.08); --hm5-gold-line:rgba(183,134,11,.4);
  --magenta:#8E3FBF; --hm5-magenta:#8E3FBF; --gm-magenta:#8E3FBF; --pink:#8E3FBF;
  --neon:#CCFF00; --hm5-accent:#CCFF00; --hm5-accent-ink:#0B0D10;
  --shadow-1:none; --shadow-2:0 8px 24px rgba(15,23,42,.08); --shadow-3:0 24px 64px rgba(15,23,42,.18);
}
:root[data-theme="light"],:root[data-theme="light"] body{background:#FFFFFF;color:#0B0D10}
:root[data-theme="light"] ::selection{background:rgba(0,160,44,.18)} :root[data-theme="light"] :focus-visible{outline-color:#0B74DE}

/* ---------- v3 DENSITY PASS (stage 2): every page's own decoration flattened to the same instrument panel ----------
   Gradients, glows, painted borders and 16-22px corners on the Tape, the Desk, the courses and the shell's rail
   become one surface, one hairline, 8px corners. Words first, color only where it means something. */
.pt-disclaimer,.liveroom,.hero,.brief,.mnote,.gm-card,.lv-head,.hm5-cl,.cp,.ovcol,.bln,.fg-comp,.ptd-open,.ptd-sub,.stage,.warn,.callout,.notice,.hm5-foot-sub{background-image:none!important;box-shadow:none!important;border-radius:8px!important;border:1px solid var(--line)!important;background-color:var(--surface)!important}
.topbar{background-image:none!important;box-shadow:none!important;background-color:var(--bg)!important;border-bottom:1px solid var(--line)!important}
header.shead{background-image:none!important;box-shadow:none!important;border-radius:8px 8px 0 0!important}
.hp-2,.hero-page i{background-image:none!important;-webkit-background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--text)!important}
.pt-disclaimer{color:var(--text-2)!important} .pt-disclaimer *{color:inherit!important;text-shadow:none!important} .pt-disclaimer b,.pt-disclaimer strong,.pt-disclaimer h1,.pt-disclaimer h2,.pt-disclaimer h3{color:var(--text)!important}
.ptd-open,.ptd-sub,.stage{background-color:transparent!important}
a.cp.on,details.hm5-cl.next,a.cl-try,.hm5-coach,.hm5-coach.on{box-shadow:none!important}
.hm5-coach,.hm5-coach.on{border-radius:10px!important}
/* the rail: a hairline list, no colored dots or tiles */
.hm5-sp{border-radius:6px!important} .hm5-sp i{background:var(--hm5-line-2)!important} .hm5-sp.on i{background:var(--hm5-text)!important} .hm5-sp.on{background:var(--hm5-sel)!important}
.hm5-side .hm5-tile,.hm5-side-foot .hm5-tile{background:transparent!important;color:var(--hm5-dim)!important;filter:none!important;box-shadow:none!important;border:0!important}
.hm5-side-title .hm5-tile{background:transparent!important;color:var(--hm5-text)!important}
.hm5-side-tog{border-color:var(--hm5-line)!important;background:transparent!important} .hm5-side-tog i{border-color:var(--hm5-dim)!important}
/* big numbers at Robinhood weight, labels small and quiet */
.hero-h,.pv-offer-amt,.amt,.acct-amt,.mon-total b,.bt-num b{font-weight:500!important;letter-spacing:-.02em}
.pill,.badge,.chip,.scn-chip,.stk{font-weight:600!important;text-transform:none}
/* the running tape: tiny, flat */
.hm5-ticker{background:var(--hm5-bg)!important;border-top:1px solid var(--hm5-line)!important;font-size:11.5px!important}

/* ---------- v3 SQUARE (owner, 2026-10-08: "no more round bubble pills"): Legend-style tags and controls ----------
   Every pill, chip, tab, badge and small button in the product squares off to 3-4px; cards and sheets to 8px.
   Progress bars stay bars. The top bar's Account and trial buttons keep Robinhood's own pill shape. */
.pill,.badge,.chip,.scn-chip,.stk,.bk-badge,.bk-soon,.tk-dir,.tk-flags > *,.tk-flags .scn-chip,.sm-tag,.sms-pill,.sms-back,.sms-tabs button,.tb-tab .tb-n,.db-tab,.bfilter,.bf-clear,.bt-ck,.bt-how b,.hm5-waiting .wn,.mypos-row .close,.mypos-row .wtag,.pw-chg,.pw-law,.pw-tok div,.sa-count,.tk-take,.tk-post,.tut-k em,.tut-tg,#smsQ,
.ptab,.ptab-n,.stpill,.tos-live,.tos-delayed,.tp-chip,.pc-do .tp-chip,.pc-btn,.pc-sort button,.pc-legp,.exit-chips button,.oe-chips button,.ch-exps button,.card-title,.mon-row > summary b,.mon-cip-h b,.bulk-tools button,.oe-sim,.hm5-oe-sim,
.cp .cp-t,.cp .cp-t i,.hm5-foot-sub button,.hm5-topflash .tf-go,.hm5-toppanel .tp-score,.hm5-toppanel .tp-share,.hm5-toppanel .tp-tags i,.hm5-tour .tr-go,.hm5-tour .tr-off,.hm5-nav-coach,
.st-feed,.sc .sc-dir,.slot-h .link,.ov-pm,.pl-go,.hm5-take-go,.hm5-bpill,.gm-wgo,.gm-wcalm,.tr-go,.tr-off,.ls-btn,.dr-send,.next,.go,.btn,.tf,.seg,.seg button,.ot button,.al button,.ks div,.tk input,.slot-h input,.st-sym,.bias span,.nav-tab,.hm5-door,.hm5-mi,.hm5-sp,.jp-r{border-radius:4px!important}
.pill,.badge,.chip,.scn-chip,.stk,.tk-dir,.sm-tag,.tp-chip,.stpill,.st-feed,.sc .sc-dir,.hm5-toppanel .tp-tags i{border-radius:3px!important;font-weight:600!important;letter-spacing:.02em}
.chap,.lesson,.rules,.step,.hm5-tour .tr-in,.hm5-toppanel .tp-in,.hm5-topflash .tf-in,.hm5-langpanel .lp-in,.hm5-msheet .ms-in,.hm5-veil-c,.w,.slot,.st-bar,.st-chain,.pl,.ov-box,.toast{border-radius:8px!important}
.fg-bar,.ivbar,.ivbar i,.mvbar,.mvbar i,.az-band-bar,.az-band-bar em,.fgc>span,.fgc>span>em{border-radius:2px!important}
.seg{overflow:hidden} .seg button{border-radius:0!important}
/* ---------- v3 SWEEP (2026-10-08, final pass): the stragglers the survey found on each page ----------
   The Tape's calendar badges, agenda rows, breadth bar, live-room buttons and the yellow paper-only box; the
   roadmap pill under the bar; the Desk's toast; the course bar, level progress, test button and try link;
   the Community's tier and reaction chips. Same rule as everything else: square, flat, one hairline. */
.kbadge,.sa-badge,.paperonly,.sub,.asof,.tf-toggle,.tf-toggle *,.tutwrap,.tutwrap summary,.rlist.scrollcap,.lr-btn,.rm,.gm-road .rm,.toast,.hm5-cbar,.lv-prog,.lv-test,.hm5-term,.cl-try,.tier,button.react,.react,.sms-pill,.sm-tag,.scn-chip,.bt-ck{border-radius:4px!important;box-shadow:none!important;background-image:none!important;text-shadow:none!important}
.kbadge,.sa-badge,.tier,.scn-chip{border-radius:3px!important;font-weight:600!important}
.aghead,.agrow,.aghead.now,.agrow.today,.agrow.quiet{background-image:none!important;box-shadow:none!important} .aghead.now,.agrow.today{background-color:var(--surface-3)!important}
.paperonly{background-color:var(--surface)!important;color:var(--text-2)!important;border:1px solid var(--line)!important} .paperonly b,.paperonly strong{color:var(--text)!important}
.breadthbar{border-radius:2px!important;box-shadow:none!important} .breadthbar i{border-radius:0!important}
.lv-prog{border-radius:2px!important} .lv-prog i,.lv-prog span{border-radius:0!important}
.hm5-cbar{border-radius:0!important;background-image:none!important}
.cta,.cta.ghost,a.cta,button.cta,span.tag,.tag,details.earlier,details.earlier summary{border-radius:4px!important;box-shadow:none!important;background-image:none!important;text-shadow:none!important}
.cta:not(.ghost){background:var(--neon)!important;color:#0B0D10!important;border-color:var(--neon)!important;font-weight:600!important}
.cta.ghost{background:transparent!important;color:var(--text)!important;border:1px solid var(--line)!important}