/* ============================================================
   TERMINAL NOIR — shared design system
   Luxury trading-desk aesthetic: near-black, gold accent,
   green/red P/L semantics, mono numerics, hairline borders.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* warm true-neutral surfaces — flat, no gradients */
  --bg:#0c0c0d; --bg2:#111113;
  --panel:#161618; --panel2:#1c1c1f; --raised:#232327;
  --line:#26262a; --line2:#33333a;
  --txt:#ececed; --mut:#9596a0; --dim:#616169;
  /* one refined, flat amber accent (no neon, no glow) */
  --gold:#caa24e; --gold2:#e3c074; --gold-dim:#2b2412;
  --up:#46c08a; --down:#e8606e; --warn:#d8a23c; --info:#6aa9ff;
  /* grades */
  --A:#46c08a; --B:#6aa9ff; --C:#caa24e; --D:#7a8699;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --radius:12px; --r-sm:9px; --r-xs:7px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -28px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--txt); font-family:var(--sans); font-size:14px; line-height:1.55;
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--gold); text-decoration:none}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.up{color:var(--up)} .down{color:var(--down)} .mut{color:var(--mut)} .muted{color:var(--mut);font-size:12px}
.right{margin-left:auto}

/* ---------- topbar / nav ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(12,12,13,.86);
  backdrop-filter:blur(16px) saturate(1.1); border-bottom:1px solid var(--line); }
.topbar-inner{max-width:1320px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.18em; font-size:14px; color:var(--txt)}
.brand .dot{width:7px; height:7px; border-radius:50%; background:var(--gold)}
.brand small{color:var(--mut); font-weight:500}
.nav{display:flex; gap:2px; margin-right:auto}  /* push the right-side cluster to the edge */
.nav a{font-size:12.5px; font-weight:600; letter-spacing:.02em; padding:7px 13px; border-radius:var(--r-xs);
  color:var(--mut); border:1px solid transparent; transition:.15s}
.nav a:hover{color:var(--txt); background:var(--panel2)}
.nav a.active{color:var(--gold2); background:var(--gold-dim); border-color:rgba(202,162,78,.22)}
/* the right-side cluster (user · logout · arm · clock) is grouped by .nav's
   margin-right:auto; neutralize the clock's own auto-margin so it stays contiguous */
.topbar-inner .right{margin-left:0}
.nav-user{display:flex; align-items:center; gap:9px}
.nav-who{font-family:var(--mono); font-size:11.5px; color:var(--mut); letter-spacing:.02em; white-space:nowrap}
.nav-logout{font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--r-xs); cursor:pointer;
  color:var(--mut); border:1px solid var(--line, #2a2c33); background:transparent; transition:.15s; white-space:nowrap}
.nav-logout:hover{color:#0c0d10; background:var(--gold); border-color:var(--gold)}
.clock{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--mut)}
.clock .live{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 10px var(--up);animation:pulse 2s infinite}
.clock .closed{width:7px;height:7px;border-radius:50%;background:var(--down)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- badges ---------- */
.badge{font-size:10.5px; padding:3px 9px; border-radius:999px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}
.badge.gold{background:var(--gold-dim); color:var(--gold2); border:1px solid rgba(245,177,61,.25)}
.badge.live{background:#3a1620; color:#ff9aa6; border:1px solid rgba(255,93,108,.25)}
.badge.paper{background:#10243a; color:#8fc3ff}
.badge.rt,.badge.open{background:#0f2a1e; color:#7ee0b3; border:1px solid rgba(63,214,160,.22)}
.badge.delayed,.badge.preview,.badge.warn{background:#34290f; color:var(--gold2); border:1px solid rgba(245,177,61,.22)}

/* ---------- layout ---------- */
.wrap{max-width:1320px; margin:0 auto; padding:24px 22px 60px; position:relative; z-index:1}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); font-weight:500}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.01em; margin:0}
h1{font-family:var(--serif); font-weight:500; letter-spacing:-.005em}

/* ---------- buttons / inputs ---------- */
button,.btn{font:inherit; font-weight:600; cursor:pointer; border:1px solid var(--line2); background:var(--panel2);
  color:var(--txt); padding:9px 15px; border-radius:var(--r-xs); transition:.15s; letter-spacing:.01em}
button:hover,.btn:hover{border-color:#3a4351; background:var(--raised)}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary,.btn.primary{background:var(--gold); border-color:var(--gold); color:#1a1408; font-weight:700}
button.primary:hover{background:var(--gold2); border-color:var(--gold2)}
button.ghost{background:transparent}
.row-act{padding:6px 11px; font-size:12px}
input,select,textarea{font:inherit; background:#0c0e12; border:1px solid var(--line2); color:var(--txt);
  padding:8px 11px; border-radius:var(--r-xs); transition:.15s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,177,61,.14)}
textarea{width:100%; min-height:190px; resize:vertical; font-family:var(--mono); font-size:13px; line-height:1.7}
label.fld{display:flex; flex-direction:column; gap:4px; font-size:10px; color:var(--mut); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
label.fld input{width:130px} label.fld select{width:auto}
.chk{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mut); cursor:pointer}
.seg{display:flex; border:1px solid var(--line2); border-radius:var(--r-xs); overflow:hidden}
.seg label{padding:8px 12px; font-size:12px; cursor:pointer; color:var(--mut)}
.seg label:has(input:checked){background:var(--gold); color:#0c0d10; font-weight:700}
.seg input{display:none}

/* ---------- controls toolbar ---------- */
.controls{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 18px; font-size:12px}
.chip{background:var(--panel); border:1px solid var(--line); padding:5px 11px; border-radius:var(--r-xs); color:var(--mut); font-family:var(--mono); font-size:11.5px}
.chip b{color:var(--txt)}
.chip.warn{background:#34290f;color:var(--gold2);border-color:rgba(245,177,61,.25)}
.chip.open{background:#0f2a1e;color:#7ee0b3;border-color:rgba(63,214,160,.22)}
.viewbar{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin:0 0 16px}

/* account header tiles */
.acct{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.kv{display:flex; flex-direction:column; line-height:1.18}
.kv b{font-size:15px; font-family:var(--mono); font-variant-numeric:tabular-nums}
.kv span{font-size:9.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.08em; margin-top:1px}

/* ---------- scan progress ---------- */
.scanbar{display:none; align-items:center; gap:11px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 15px; margin-bottom:16px; font-family:var(--mono); font-size:12.5px; color:var(--mut)}
.scanbar.on{display:flex}
.spinner{width:15px;height:15px;border:2px solid #2a3343;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- opportunity rows (scanner) ---------- */
.opps{display:flex; flex-direction:column; gap:9px}
.row{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .15s, transform .15s}
.row:not(.head):hover{border-color:var(--line2); transform:translateY(-1px)}
.row.head{background:transparent; border:none; border-radius:0; overflow:visible}
.rgrid{display:grid; gap:12px; align-items:center; padding:14px 16px}
.row.head .rgrid{padding:4px 16px; color:var(--dim); font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; font-family:var(--mono)}
.rank{font-family:var(--mono); color:var(--dim); text-align:center; font-size:13px}
.grade{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:19px; color:#08120d}
.gA{background:var(--A); color:#06190f} .gB{background:var(--B); color:#06122c}
.gC{background:var(--C); color:#1a1206} .gD{background:var(--D); color:#0b0f16}
.sym b{font-size:16px; font-weight:700; letter-spacing:.01em} .sym .px{font-size:12px; color:var(--mut)}
.chg.up,.chg.down{font-family:var(--mono)}
.callcell .k{font-weight:700; font-family:var(--mono); font-size:13px} .callcell .s{font-size:11px; color:var(--mut)}
.scorewrap{display:flex; flex-direction:column; gap:5px}
.scorebar{height:7px; background:#1a212c; border-radius:6px; overflow:hidden; display:flex}
.scorebar i{height:100%}
.sb-setup,.sb-a{background:var(--up)} .sb-delta,.sb-b{background:var(--info)}
.sb-liq,.sb-c{background:var(--gold)} .sb-val,.sb-d{background:#b58bff}
.scoreval{font-family:var(--mono); font-size:12px; color:var(--mut)}
.metrics,.plan,.sig{font-size:11px; color:var(--mut); line-height:1.55}
.metrics b,.plan b,.sig b{color:var(--txt); font-family:var(--mono)}
.acts{display:flex; gap:6px; justify-content:flex-end} .acts button{padding:7px 10px; font-size:12px}
.flag{display:inline-block; font-size:9.5px; padding:2px 7px; border-radius:5px; margin-right:4px; background:#1a212c; color:var(--dim); font-family:var(--mono); letter-spacing:.04em}
.flag.on{background:#0f2a1e; color:#7ee0b3}
.tag{display:inline-block; font-size:10px; background:#1a212c; color:var(--mut); padding:2px 8px; border-radius:6px; margin:0 4px 4px 0; font-family:var(--mono)}
.detail{display:none; border-top:1px solid var(--line); padding:16px; background:rgba(0,0,0,.18)}
.detail.on{display:grid; grid-template-columns:1fr 360px; gap:18px}
.alts{width:100%; border-collapse:collapse; font-size:12px}
.alts th,.alts td{text-align:right; padding:7px 9px; border-bottom:1px solid var(--line); font-family:var(--mono)}
.alts th{color:var(--mut); font-weight:600; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; font-family:var(--sans)}
.alts td:first-child,.alts th:first-child{text-align:left}
.alts tr:hover td{background:rgba(255,255,255,.02)}
.alts .pick{color:var(--gold); cursor:pointer; font-weight:700; font-family:var(--sans)}
.chartbox{background:#0c0e12; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px}
.chart-tf{display:flex; gap:6px; margin:0 0 7px}
.chart-tf .tf{padding:3px 11px; font-size:11px; font-weight:600; background:transparent; border:1px solid var(--line2); color:var(--mut); border-radius:var(--r-xs)}
.chart-tf .tf.on{background:var(--gold); color:#0c0d10; border-color:var(--gold)}

/* ---------- full-screen chart overlay (bigchart.js) ---------- */
.bcov{position:fixed; inset:0; z-index:80; background:rgba(4,5,7,.82); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; padding:24px; overflow:auto}
.bcov.on{display:flex}
.bc-card{width:min(960px,96vw); background:var(--panel2); border:1px solid var(--line2); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.bc-head{display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.bc-back{background:transparent; border:none; color:var(--mut); font-size:24px; padding:0 6px; line-height:1; cursor:pointer}
.bc-id{min-width:110px}
.bc-sym{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.01em}
.bc-name{font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em}
.bc-q{display:flex; align-items:baseline; gap:10px}
.bc-last{font-family:var(--mono); font-size:20px; font-weight:700}
.bc-chg{font-family:var(--mono); font-size:13px; font-weight:600}
.bc-ba{margin-left:auto; display:flex; gap:16px; font-family:var(--mono); font-size:12px; color:var(--mut)}
.bc-ba b{color:var(--txt)}
.bc-close{background:transparent; border:1px solid var(--line2); color:var(--mut); border-radius:var(--r-xs); padding:4px 10px; cursor:pointer}
.bc-tf{display:flex; gap:6px; padding:10px 16px 0}
.bc-tfb{padding:4px 12px; font-size:11.5px; font-weight:600; background:transparent; border:1px solid var(--line2); color:var(--mut); border-radius:var(--r-xs); cursor:pointer}
.bc-tfb.on{background:var(--gold); color:#0c0d10; border-color:var(--gold)}
.bc-body{padding:12px 16px 18px; position:relative}
.bc-cv{width:100%; display:block}
.bc-plabel{font-family:var(--mono); font-size:11px; color:var(--mut); letter-spacing:.1em; text-transform:uppercase; margin:12px 0 2px; display:flex; gap:8px}
.bc-msg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mut); font-family:var(--mono); font-size:13px}
.clk{cursor:pointer} .clk:hover{color:var(--gold)}
@media(max-width:640px){ .bc-card{width:100vw; min-height:100vh; border-radius:0} .bc-ba{width:100%; margin-left:0; justify-content:flex-start} }

/* ---------- full option-chain overlay (chainview.js) ---------- */
.chv-card{position:relative; display:flex; flex-direction:column; width:min(1180px,98vw); max-height:calc(100vh - 52px); overflow:hidden;
  background:var(--panel2); border:1px solid var(--line2);
  border-radius:var(--radius); box-shadow:var(--shadow)}
/* filter bar: side toggle + expiration + strikes-around-ATM */
.chv-filters{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 16px; border-bottom:1px solid var(--line)}
.chv-seg{display:flex; border:1px solid var(--line2); border-radius:var(--r-xs); overflow:hidden}
.chv-seg button{border:0; border-radius:0; background:transparent; color:var(--mut); padding:6px 13px; font-size:11.5px; font-weight:600}
.chv-seg button+button{border-left:1px solid var(--line2)}
.chv-seg button:hover{background:var(--raised)}
.chv-seg button.on{background:var(--gold); color:#0c0d10}
.chv-fl{display:flex; align-items:center; gap:6px; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); font-weight:600}
.chv-fl select{padding:6px 9px; font-size:12px}
/* contract cells are tappable to open a buy ticket */
.chv-tbl tbody td{cursor:pointer}
.chv-tbl tbody td.kstrike{cursor:default}
/* buy ticket (bottom sheet inside the chain card) */
.chv-ticket{position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end; justify-content:center; background:rgba(4,5,7,.55)}
.chv-ticket[hidden]{display:none}
.cht-card{width:100%; max-width:460px; background:var(--panel2); border:1px solid var(--line2);
  border-radius:var(--radius) var(--radius) 0 0; padding:16px 16px 18px; box-shadow:0 -24px 60px -20px #000}
.cht-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.cht-desc{font-family:var(--mono); font-weight:700; font-size:14px; color:var(--txt)}
.cht-x{background:transparent; border:1px solid var(--line2); color:var(--mut); padding:4px 9px}
.cht-grid{display:flex; gap:10px}
.cht-f{display:flex; flex-direction:column; gap:4px; flex:1; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); font-weight:600}
.cht-f input{width:100%}
.cht-acct{margin:11px 0 3px; font-size:12px; color:var(--mut)}
.cht-acct b{color:var(--txt)}
.cht-warn{color:var(--down)}
.cht-cost{font-family:var(--mono); font-size:12px; color:var(--mut); min-height:15px; margin-bottom:13px}
.cht-act{display:flex; gap:10px; justify-content:flex-end}
.acts .chainbtn{color:var(--gold)}
.chv-head{display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.chv-meta{margin-left:auto; display:flex; gap:16px; font-family:var(--mono); font-size:12px; color:var(--mut)}
.chv-meta b{color:var(--txt)}
.chv-exps{display:flex; gap:6px; padding:10px 16px 10px; flex:0 0 auto; flex-wrap:nowrap; overflow-x:auto;
  border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch}
.chv-exp{flex:0 0 auto; padding:5px 11px; font-size:11px; font-weight:600; font-family:var(--mono); background:transparent;
  border:1px solid var(--line2); color:var(--mut); border-radius:var(--r-xs); cursor:pointer; white-space:nowrap}
.chv-exp.on{background:var(--gold); color:#0c0d10; border-color:var(--gold)}
.chv-exp small{opacity:.7}
.chv-sides{display:flex; align-items:center; flex:0 0 auto; padding:7px 16px; border-bottom:1px solid var(--line);
  font-family:var(--sans); font-weight:700; font-size:9px; text-transform:uppercase; letter-spacing:.14em}
.chv-sides .cs-c{flex:1; text-align:left; color:var(--up)}
.chv-sides .cs-k{flex:0 0 auto; color:var(--mut)}
.chv-sides .cs-p{flex:1; text-align:right; color:var(--down)}
.chv-body{padding:0 16px 18px; overflow:auto; flex:1 1 auto; min-height:0}
.chv-tbl{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums; min-width:760px}
.chv-tbl thead th{position:sticky; top:0; z-index:2; background:var(--panel2); color:var(--mut); font-family:var(--sans);
  font-weight:600; font-size:9px; text-transform:uppercase; letter-spacing:.05em; padding:7px 6px; border-bottom:1px solid var(--line2); text-align:right}
.chv-tbl td{padding:5px 6px; border-bottom:1px solid var(--line); text-align:right; color:var(--mut)}
.chv-tbl td.itm{background:rgba(63,214,160,.06); color:var(--txt)}
.chv-tbl .kstrike{text-align:center; font-weight:700; color:var(--txt); background:rgba(255,255,255,.03);
  border-left:1px solid var(--line2); border-right:1px solid var(--line2)}
.chv-tbl tr.atm .kstrike{background:var(--gold-dim); color:var(--gold2)}
.chv-tbl tbody tr:hover td{background:rgba(255,255,255,.03)}
.chv-link{font-size:11px; color:var(--gold); cursor:pointer; display:inline-block; margin-top:8px}
.chv-link:hover{text-decoration:underline}
@media(max-width:640px){
  .chv-card{width:100vw; max-height:100vh; border-radius:0}
  .chv-meta{margin-left:0; width:100%; gap:14px}
  .chv-body{padding:0 8px 16px}
  /* compact mobile chain: 7 columns (Δ·Bid·Ask | Strike | Bid·Ask·Δ) fit the
     viewport with no horizontal scroll */
  .chv-tbl.chv-mini{min-width:0; font-size:12.5px; table-layout:fixed}
  .chv-tbl.chv-mini thead th{font-size:9.5px; padding:7px 3px}
  .chv-tbl.chv-mini td{padding:7px 3px}
  .chv-tbl.chv-mini .kstrike{width:64px}
}

/* ---------- account cards (deck monitor) ---------- */
.deck-sech{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin:6px 0 12px}
.acard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; box-shadow:var(--shadow)}
.ahead{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:15px 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015)}
.ahead h2{font-size:16px}
.brk{font-size:9.5px; padding:3px 9px; border-radius:6px; font-weight:700; font-family:var(--mono); letter-spacing:.05em; text-transform:uppercase}
.brk.schwab{background:#10243a; color:#8fc3ff} .brk.public{background:#2d1840; color:#e0a6ff}
.chartbox img{width:100%; border-radius:6px; display:block} .chartbox a{font-size:11px; color:var(--mut)}
.empty{text-align:center; color:var(--mut); padding:70px 20px; font-size:14px}

/* ---------- tables (positions / accounts) ---------- */
.pos{width:100%; border-collapse:collapse; font-size:13px}
.pos th,.pos td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.pos th{color:var(--mut); font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; font-family:var(--sans)}
.pos td:first-child,.pos th:first-child,.pos td:nth-child(2),.pos th:nth-child(2){text-align:left}
/* account positions on the deck: fixed proportional columns so every card aligns */
.acard .pos{table-layout:fixed}
.acard .pos th:nth-child(1),.acard .pos td:nth-child(1){width:8%}
.acard .pos th:nth-child(2),.acard .pos td:nth-child(2){width:21%}
.acard .pos th:nth-child(3),.acard .pos td:nth-child(3){width:6%}
.acard .pos th:nth-child(4),.acard .pos td:nth-child(4){width:10%}
.acard .pos th:nth-child(5),.acard .pos td:nth-child(5){width:10%}
.acard .pos th:nth-child(6),.acard .pos td:nth-child(6){width:9%}
.acard .pos th:nth-child(7),.acard .pos td:nth-child(7){width:9%}
.acard .pos th:nth-child(8),.acard .pos td:nth-child(8){width:11%}
.acard .pos th:nth-child(9),.acard .pos td:nth-child(9){width:16%}
.acard .pos td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sigb{font-size:10px; padding:3px 8px; border-radius:6px; font-weight:700; white-space:nowrap; font-family:var(--mono); letter-spacing:.03em}
.sigb.tp{background:#0f2a1e; color:#7ee0b3} .sigb.sl{background:#3a1620; color:#ff9aa6} .sigb.hold{background:#1a212c; color:var(--mut)}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(4,5,7,.66); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:60}
.modal.on{display:flex}
.card{background:var(--panel2); border:1px solid var(--line2); border-radius:var(--radius);
  padding:22px; width:min(740px,94vw); max-height:88vh; overflow:auto; box-shadow:0 30px 80px -30px #000}
.card h3{font-family:var(--display); margin:0 0 12px}
/* lock the background page from scrolling while any full-screen overlay or
   modal is open (chain / chart / modals all toggle `.on`) */
html:has(.bcov.on), body:has(.bcov.on),
html:has(.modal.on), body:has(.modal.on){overflow:hidden}

/* ---------- reveal animation ---------- */
[data-reveal]{opacity:0; transform:translateY(14px); animation:reveal .6s cubic-bezier(.2,.7,.2,1) forwards}
[data-reveal]{animation-delay:calc(var(--i,0) * 70ms)}
@keyframes reveal{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){[data-reveal]{animation:none; opacity:1; transform:none}}

/* ---------- tablet ---------- */
@media(max-width:1040px){
  .wrap{padding:20px 16px 50px}
}
/* ---------- mobile (phones + small tablets) ---------- */
@media(max-width:760px){
  /* >=16px keeps iOS Safari from auto-zooming the page on input focus */
  input,select,textarea{font-size:16px}
  .topbar-inner{padding:10px 13px; gap:9px; row-gap:8px}
  .brand{font-size:13px}
  .nav{order:3; flex:1 1 100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  #acct,#pubacct,#strategyTag,#asof{display:none}
  .clock{font-size:11px}
  .wrap{padding:16px 12px 56px}
  .controls{gap:8px}
  .controls label.fld{flex:1 1 130px}
  .controls label.fld input{width:100%}
  .controls > button{flex:1 1 100%}
  .controls .right,.viewbar .right{margin-left:0}
  .viewbar{gap:10px}
  .chips{gap:6px}

  /* scanner rows -> stacked card (same child order across options/stocks/penny) */
  .row.head{display:none}
  .opps{gap:11px}
  .row:not(.head):hover{transform:none}
  .rgrid{grid-template-columns:auto 1fr auto !important; gap:11px 12px !important; padding:15px 14px !important; align-items:center}
  .rgrid>*{min-width:0}
  .rgrid>:nth-child(1){display:none}                 /* rank */
  .rgrid>:nth-child(2){grid-column:1; grid-row:1}    /* grade */
  .rgrid>:nth-child(3){grid-column:2; grid-row:1}    /* symbol */
  .rgrid>:nth-child(8){grid-column:3; grid-row:1; justify-self:end}  /* actions */
  .rgrid>:nth-child(4){grid-column:1/-1; grid-row:2} /* best-call / signals */
  .rgrid>:nth-child(5){grid-column:1/-1}             /* score */
  .rgrid>:nth-child(6){grid-column:1/-1; padding-top:2px; border-top:1px solid var(--line)} /* plan */
  .rgrid>:nth-child(7){grid-column:1/-1}             /* sizing */
  .rgrid>.hide-sm{display:block}
  .grade{width:40px; height:40px; font-size:18px}
  .acts{gap:8px} .acts button{padding:10px 16px; font-size:13px}  /* tap targets */
  .detail.on{grid-template-columns:1fr}
  .alts{font-size:11px} .alts th,.alts td{padding:6px 6px}

  /* tables */
  .pos{font-size:11.5px} .pos th,.pos td{padding:7px 7px}
  .acard{overflow-x:auto}
  .totals{gap:9px !important}
  .totals .tot{flex:1 1 calc(50% - 5px) !important; min-width:0 !important}
  .ahead{gap:10px !important; padding:13px 14px !important}
  .ahead .right{margin-left:0; width:100%; display:flex; gap:14px !important; flex-wrap:wrap}

  /* modal full-width */
  .card{width:95vw; padding:16px; max-height:92vh}

  /* home */
  .hero{padding:22px !important}
  .pv{font-size:clamp(40px,13vw,60px)}
  .grid2{grid-template-columns:1fr !important}
  .cta-row{grid-template-columns:1fr !important}
  .tiles{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:380px){
  .tiles{grid-template-columns:1fr !important}
  .totals .tot{flex:1 1 100% !important}
}

/* ============================================================
   Additive feature styles (#1,#2,#3,#6,#7,#8,#9) — Terminal Noir
   ============================================================ */

/* #7 regime banner (home deck) */
.regime-banner{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 18px; margin-bottom:18px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel);
  font-family:var(--mono); font-size:12px; box-shadow:var(--shadow)}
.regime-banner .rdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.regime-banner .rlabel{font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:11.5px}
.regime-banner .rmetric{color:var(--mut)} .regime-banner .rmetric b{color:var(--txt)}
.regime-banner .right{color:var(--dim); font-size:10.5px; letter-spacing:.06em}
.regime-risk-on .rdot{background:var(--up); box-shadow:0 0 12px var(--up)} .regime-risk-on .rlabel{color:var(--up)}
.regime-neutral .rdot{background:var(--gold); box-shadow:0 0 12px var(--gold)} .regime-neutral .rlabel{color:var(--gold2)}
.regime-risk-off .rdot{background:var(--down); box-shadow:0 0 12px var(--down)} .regime-risk-off .rlabel{color:var(--down)}

/* #2 alert bell toggle */
.bell{background:transparent; border:1px solid var(--line2); color:var(--mut);
  padding:6px 10px; border-radius:var(--r-xs); font-size:14px; line-height:1; cursor:pointer; transition:.15s}
.bell:hover{border-color:var(--gold); color:var(--txt)}
.bell.on{background:var(--gold-dim); border-color:rgba(245,177,61,.45); color:var(--gold2); box-shadow:0 0 14px -6px var(--gold)}

/* #3 mini chart canvas */
.minichart{width:100%; height:180px; display:block; background:#0c0e12;
  border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px}

/* #6 earnings flag / badge */
.flag.er,.badge.er{background:#34290f; color:var(--gold2); border:1px solid rgba(245,177,61,.3);
  font-family:var(--mono); letter-spacing:.03em}
.flag.er{font-size:9.5px; padding:2px 7px; border-radius:5px}
.badge.er{font-size:10px; padding:3px 8px; border-radius:6px; font-weight:700; white-space:nowrap}

/* #8 chain analytics block (options detail) */
.chainan{margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(0,0,0,.18)}
.chainan .cgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:8px}
.chainan .cell{display:flex; flex-direction:column; gap:2px}
.chainan .cell b{font-family:var(--mono); font-size:16px; color:var(--txt); font-variant-numeric:tabular-nums}
.chainan .cell span{font-size:9.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.07em}
.unusual{display:inline-block; font-size:10px; font-family:var(--mono); padding:2px 8px; margin:0 4px 4px 0;
  border-radius:6px; background:#34290f; color:var(--gold2); border:1px solid rgba(245,177,61,.3)}
.unusual.put{background:#3a1620; color:#ff9aa6; border-color:rgba(255,93,108,.3)}

/* #9 gappers chip list (stocks / penny / movers) */
.gappers{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px}
.gapchip{display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:var(--r-xs);
  border:1px solid var(--line); background:var(--panel); font-family:var(--mono); font-size:11.5px}
.gapchip .gsym{font-weight:700; color:var(--txt)}
.gapchip .gpx{color:var(--mut)}
.gapchip .gpct{font-weight:700}
.gapchip .gpct.up{color:var(--up)} .gapchip .gpct.down{color:var(--down)}
.gapchip .gext{color:var(--dim); font-size:10px}
.gapbtn.on{background:var(--gold); border-color:var(--gold); color:#0c0d10; font-weight:700}

/* live quote cells (#1) flash on update via .change up/down already styled */
.qlive .price{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* scan progress bar + error state */
.pbar{height:6px;background:#1a212c;border-radius:6px;overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .35s ease}
.scanbar.err{border-color:var(--down);color:var(--down)}
.scanbar.err .spinner{display:none}
.scanbar.err .pbar i{background:var(--down)}
.scanbar.done .pbar i{background:var(--up)}

/* ============================================================
   Theme toggle (light / dark) — theme.js sets <html data-theme>.
   Dark is the default; the block below overrides tokens + the few
   hard-coded tinted surfaces for light mode.
   ============================================================ */
:root{ color-scheme:dark }
.theme-toggle{display:inline-grid; place-items:center; width:32px; height:30px; padding:0;
  background:transparent; border:1px solid var(--line2); color:var(--mut); border-radius:var(--r-xs); cursor:pointer; transition:.15s}
.theme-toggle:hover{color:var(--txt); border-color:var(--gold)}
.theme-toggle svg{width:15px; height:15px; display:block}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f5f1; --bg2:#efede7;
  --panel:#ffffff; --panel2:#faf9f4; --raised:#eeece5;
  --line:#e6e3da; --line2:#d6d1c6;
  --txt:#1b1a18; --mut:#6b6a62; --dim:#9a988e;
  --gold:#b07d2a; --gold2:#8a6212; --gold-dim:#f3e8ce;
  --up:#1d9a66; --down:#cf3a48; --warn:#a9781f; --info:#2f74c0;
  --A:#1d9a66; --B:#2f74c0; --C:#b07d2a; --D:#7a8699;
  --shadow:0 1px 2px rgba(20,18,12,.06), 0 16px 36px -24px rgba(20,18,12,.22);
}
/* surfaces that hard-code a dark value */
[data-theme="light"] .topbar{background:rgba(246,245,241,.86)}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#fff; color:var(--txt)}
[data-theme="light"] .minichart,[data-theme="light"] .chartbox,[data-theme="light"] .chartbox img{background:#fff}
[data-theme="light"] .detail,[data-theme="light"] .chainan{background:rgba(0,0,0,.025)}
[data-theme="light"] .alts tr:hover td,[data-theme="light"] .chv-tbl tbody tr:hover td,[data-theme="light"] .pos tr:hover td{background:rgba(0,0,0,.03)}
[data-theme="light"] .chv-tbl .kstrike{background:rgba(0,0,0,.035)}
[data-theme="light"] .chv-tbl td.itm{background:rgba(29,154,102,.09)}
[data-theme="light"] .ptable thead th{background:#f1efe7}
[data-theme="light"] .ahead{background:#f7f6f1}
[data-theme="light"] .scorebar,[data-theme="light"] .alloc,[data-theme="light"] .pbar{background:#e7e4db}
/* semantic tinted chips/badges → light tints */
[data-theme="light"] .badge.rt,[data-theme="light"] .badge.open,[data-theme="light"] .chip.open,[data-theme="light"] .sigb.tp,[data-theme="light"] .flag.on,[data-theme="light"] .side.BUY{background:#e3f3eb; color:#147a52; border-color:rgba(29,154,102,.28)}
[data-theme="light"] .badge.live,[data-theme="light"] .sigb.sl,[data-theme="light"] .side.SELL{background:#fde6e9; color:#bf2f3e; border-color:rgba(207,58,72,.28)}
[data-theme="light"] .badge.paper,[data-theme="light"] .atag.stk{background:#e7f0fb; color:#2c6cb0}
[data-theme="light"] .badge.delayed,[data-theme="light"] .badge.preview,[data-theme="light"] .badge.warn,[data-theme="light"] .chip.warn,[data-theme="light"] .unusual{background:#f5ebd3; color:#8a6212; border-color:rgba(176,125,42,.3)}
[data-theme="light"] .unusual.put{background:#fde6e9; color:#bf2f3e; border-color:rgba(207,58,72,.3)}
[data-theme="light"] .sigb.hold,[data-theme="light"] .flag{background:#ecebe3; color:var(--mut)}