/* ===================================================================
   QUANT TERMINAL — design system
   Dark trading-desk aesthetic. No external fonts/libs.
   =================================================================== */
:root{
  --bg:#070a0f;
  --bg2:#0b1018;
  --panel:#0e141d;
  --panel2:#111925;
  --line:#1c2733;
  --line2:#283544;
  --txt:#cdd9e5;
  --txt-dim:#7d8c9c;
  --txt-mut:#6b7b8c;
  --dim:#7d8c9c;            /* alias — several rules reference var(--dim)/var(--mut) */
  --mut:#6b7b8c;
  --accent:#4fd1c5;     /* teal */
  --accent2:#5b9dff;    /* blue */
  --pos:#3ddc84;        /* green */
  --neg:#ff5470;        /* red   */
  --warn:#ffb454;       /* amber */
  --purple:#b388ff;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(79,209,197,.06),transparent 60%),
    radial-gradient(900px 500px at 0% 0%,rgba(91,157,255,.05),transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:1480px;margin:0 auto;padding:14px 18px 40px}
h1,h2,h3{margin:0;font-weight:600}
b{color:var(--txt)}

/* ----------------------------- TOPBAR ----------------------------- */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:10px 16px;margin-bottom:10px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:12px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{font-size:22px;color:var(--accent);text-shadow:0 0 18px rgba(79,209,197,.5)}
.brand-txt h1{font-size:17px;letter-spacing:3px}
.brand-txt .sub{font-size:10.5px;color:var(--txt-mut);letter-spacing:.5px}
.asset-sel{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.asset-search{flex:0 0 auto;width:92px;font-family:var(--mono);font-size:11px;color:var(--txt);
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;transition:.15s}
.asset-search:focus{outline:none;border-color:var(--accent);width:140px}
.asset-search::placeholder{color:var(--txt-mut)}
.asset-tabs{display:flex;gap:6px;min-width:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:3px}
.asset-tabs::-webkit-scrollbar{height:5px}
.asset-tabs::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.asset-tabs button{flex:0 0 auto}
.asset-tabs button.hidden{display:none}
.asset-tabs .no-match{font-family:var(--mono);font-size:11px;color:var(--txt-mut);padding:6px 4px;white-space:nowrap}
.asset-tabs button{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:1px;
  color:var(--txt-dim);background:var(--bg2);border:1px solid var(--line);
  padding:6px 14px;border-radius:8px;cursor:pointer;transition:.12s;
}
.asset-tabs button:hover{color:var(--txt);border-color:var(--line2)}
.asset-tabs button.active{
  color:#04181a;background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 16px rgba(79,209,197,.35);
}
.head-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.live-price{display:flex;align-items:baseline;gap:8px;font-family:var(--mono)}
.live-price .hp-sym{color:var(--txt-mut);font-size:11px}
.live-price .hp-val{font-size:18px;font-weight:600}
.live-price .hp-chg{font-size:12px}
.refresh{
  display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:1px;color:var(--txt);background:var(--bg2);
  border:1px solid var(--line2);border-radius:8px;padding:7px 12px;cursor:pointer;
}
.refresh:hover{border-color:var(--accent)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--txt-mut);transition:.2s}
.status-dot.ok{background:var(--pos);box-shadow:0 0 10px var(--pos)}
.status-dot.busy{background:var(--warn);box-shadow:0 0 10px var(--warn);animation:pulse 1s infinite}
.status-dot.err{background:var(--neg);box-shadow:0 0 10px var(--neg)}
@keyframes pulse{50%{opacity:.3}}
.updated{font-family:var(--mono);font-size:10.5px;color:var(--txt-mut)}

/* ----------------------------- LEGEND ----------------------------- */
.legend{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:10.5px;color:var(--txt-mut);margin:0 4px 12px;
}
.legend-title{font-family:var(--mono);letter-spacing:1px;color:var(--txt-dim)}
.legend-h{margin-right:10px}
.legend-src{margin-left:auto;font-family:var(--mono);color:var(--txt-mut)}
.chip{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.6px;
  padding:2px 7px;border-radius:5px;border:1px solid;
}
.chip.live{color:var(--pos);border-color:rgba(61,220,132,.4);background:rgba(61,220,132,.08)}
.chip.proxy{color:var(--warn);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.08)}
.chip.demo{color:var(--txt-dim);border-color:var(--line2);background:rgba(255,255,255,.03)}
.chip.computed,.chip.derived{color:var(--accent2);border-color:rgba(91,157,255,.4);background:rgba(91,157,255,.08)}

/* ------------------------------ GRID ------------------------------ */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;min-height:120px;
}
.panel.hero{grid-column:1 / -1}
.phead{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.phead h2{font-size:12.5px;letter-spacing:2px;color:var(--txt)}
.phead .hint{font-size:10px;letter-spacing:.5px;color:var(--txt-mut);font-weight:400;margin-left:8px}
.phead .chip{margin-left:auto}
.pbody{padding:14px;flex:1}
.loading{color:var(--txt-mut);font-family:var(--mono);font-size:11px;padding:18px 4px}
.err-box{color:var(--neg);font-family:var(--mono);font-size:11px;padding:8px;
  border:1px dashed rgba(255,84,112,.4);border-radius:8px;background:rgba(255,84,112,.05)}

@media(max-width:1080px){.grid{grid-template-columns:1fr}}

/* --------------------------- METRIC ROWS --------------------------- */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.metric{
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;
}
.metric .k{font-size:10px;letter-spacing:.5px;color:var(--txt-mut);text-transform:uppercase;display:flex;gap:5px;align-items:center}
.metric .v{font-family:var(--mono);font-size:19px;font-weight:600;margin-top:3px;letter-spacing:-.3px}
.metric .v small{font-size:11px;color:var(--txt-dim);font-weight:400}
.metric .note{font-size:9.5px;color:var(--txt-mut);margin-top:2px}
.pos{color:var(--pos)!important}.neg{color:var(--neg)!important}
.warn{color:var(--warn)!important}.muted{color:var(--txt-mut)!important}
.accent{color:var(--accent)!important}.accent2{color:var(--accent2)!important}

.tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px;
  padding:1px 6px;border-radius:4px;border:1px solid currentColor;opacity:.95}
.tag.pos{background:rgba(61,220,132,.1)}.tag.neg{background:rgba(255,84,112,.1)}
.tag.warn{background:rgba(255,180,84,.1)}.tag.muted{background:rgba(255,255,255,.03)}

.section-lbl{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--txt-dim);
  text-transform:uppercase;margin:16px 0 8px;border-top:1px solid var(--line);padding-top:10px;
  display:flex;align-items:center;gap:8px}
.section-lbl:first-child{margin-top:0;border-top:0;padding-top:0}
.row{display:flex;gap:10px}.row.wrap{flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center}
.subnote{font-size:10px;color:var(--txt-mut);margin-top:8px;line-height:1.5}

/* ----------------------------- GAUGES ----------------------------- */
.gauge-wrap{display:flex;align-items:center;gap:16px}
.gauge svg{display:block}
.gauge-read{font-family:var(--mono)}
.gauge-read .big{font-size:30px;font-weight:700;letter-spacing:-1px}
.gauge-read .lbl{font-size:10px;color:var(--txt-mut);letter-spacing:1px;text-transform:uppercase}

/* --------------------------- HERO/COMPOSITE ------------------------ */
.composite-lay{display:grid;grid-template-columns:300px 1fr 320px;gap:18px;align-items:stretch}
@media(max-width:1080px){.composite-lay{grid-template-columns:1fr}}
.stance-box{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:14px}
.stance-word{font-family:var(--mono);font-size:30px;font-weight:800;letter-spacing:1px;line-height:1}
.stance-sub{font-size:11px;color:var(--txt-mut);margin-top:6px;letter-spacing:.5px}
.conf-bar{height:7px;border-radius:4px;background:var(--line);margin-top:12px;width:100%;overflow:hidden}
.conf-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.contrib{display:flex;flex-direction:column;gap:9px;justify-content:center}
.contrib-row{display:grid;grid-template-columns:96px 1fr 54px;align-items:center;gap:10px;font-size:11px}
.contrib-row .cl{color:var(--txt-dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.5px}
.contrib-track{position:relative;height:10px;background:var(--bg);border:1px solid var(--line);border-radius:6px}
.contrib-track .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--line2)}
.contrib-track i{position:absolute;top:0;bottom:0;border-radius:4px}
.contrib-val{font-family:var(--mono);text-align:right;font-size:11px}
.playbook{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:13px}
.playbook h4{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--txt-dim);margin:0 0 9px;text-transform:uppercase}
.pb-line{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:11.5px}
.pb-line:last-child{border-bottom:0}
.pb-line .pk{color:var(--txt-dim)}
.pb-line .pv{font-family:var(--mono);font-weight:600;text-align:right}

/* ----------------------------- CHARTS ----------------------------- */
.chart{width:100%;display:block;margin-top:4px}
.chart-cap{display:flex;justify-content:space-between;font-size:10px;color:var(--txt-mut);
  font-family:var(--mono);margin-top:3px}
.legend-inline{display:flex;gap:14px;font-size:10px;color:var(--txt-dim);font-family:var(--mono);margin-top:6px}
.legend-inline i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ----------------------------- INPUTS ----------------------------- */
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:10px;color:var(--txt-mut);letter-spacing:.5px;text-transform:uppercase}
.field input[type=number],.field input[type=text]{
  font-family:var(--mono);font-size:13px;color:var(--txt);background:var(--bg);
  border:1px solid var(--line2);border-radius:7px;padding:6px 9px;width:100%;
}
.field input:focus{outline:none;border-color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent);background:transparent}
.inline-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:6px}

/* --------------------------- CONNECTORS --------------------------- */
.connector{border:1px dashed var(--line2);border-radius:10px;padding:11px;background:rgba(255,255,255,.012)}
.connector.live{border-style:solid;border-color:var(--line)}
.connector .ctitle{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600}
.connector .cdesc{font-size:10px;color:var(--txt-mut);margin-top:5px;line-height:1.5}
.connector .cdata{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
.connector .cd{font-family:var(--mono)}
.connector .cd .cv{font-size:16px;font-weight:600}
.connector .cd .ck{font-size:9px;color:var(--txt-mut);letter-spacing:.5px;text-transform:uppercase}

/* ----------------------------- FOOTER ----------------------------- */
.foot{margin-top:16px;padding:12px 6px;display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--line);font-size:10.5px;color:var(--txt-mut)}
.foot .disclaimer{color:var(--txt-dim)}
.foot b{color:var(--warn)}

.bars{display:flex;align-items:flex-end;gap:2px;height:34px}
.bars i{flex:1;background:var(--line2);border-radius:1px;min-height:1px}

/* asset tabs: single scrollable strip (search filters them) */
.asset-tabs button{padding:5px 11px}

/* ----------------------------- NEWS ----------------------------- */
.news-list{display:flex;flex-direction:column;gap:0;max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;background:var(--bg2)}
.news-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:11.5px;text-decoration:none;color:var(--txt)}
.news-item:last-child{border-bottom:0}
.news-item:hover{background:rgba(255,255,255,.03)}
.news-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.news-src{font-family:var(--mono);font-size:9px;color:var(--txt-mut);flex:0 0 78px;text-transform:uppercase;letter-spacing:.3px}
.news-ttl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-score{font-family:var(--mono);font-size:10px;flex:0 0 auto}

/* --------------------------- BACKTEST --------------------------- */
.bt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px}
.eq-legend{display:flex;gap:16px;font-size:10px;color:var(--txt-dim);font-family:var(--mono);margin-top:6px}
.eq-legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ------------------------- PAPER TRADING ------------------------- */
.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;margin-top:4px}
.ledger th{text-align:left;color:var(--txt-mut);font-weight:600;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line2)}
.ledger td{padding:6px 8px;border-bottom:1px solid var(--line)}
.ledger tr:last-child td{border-bottom:0}
.ledger .num{text-align:right}
.btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;color:var(--txt);background:var(--bg2);border:1px solid var(--line2);border-radius:7px;padding:6px 12px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.danger:hover{border-color:var(--neg);color:var(--neg)}
.btn.go{border-color:var(--accent);color:var(--accent)}
.btn.long{border-color:rgba(61,220,132,.45);color:var(--pos);font-weight:700}
.btn.long:hover{border-color:var(--pos);background:rgba(61,220,132,.08)}
.btn.short{border-color:rgba(255,84,112,.45);color:var(--neg);font-weight:700}
.btn.short:hover{border-color:var(--neg);background:rgba(255,84,112,.08)}
.btn.tc-on{background:rgba(61,220,132,.15);border-color:var(--pos);box-shadow:0 0 12px rgba(61,220,132,.25)}
.btn.tc-on-neg{background:rgba(255,84,112,.15);border-color:var(--neg);box-shadow:0 0 12px rgba(255,84,112,.25)}

/* ------------------------ PLAIN-ENGLISH VERDICT ------------------------ */
.plain-verdict{margin-top:13px;padding:11px 15px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:9px;background:rgba(79,209,197,.045);font-size:13.5px;color:var(--txt);line-height:1.55}
.plain-verdict b{color:var(--accent)}

/* ----------------------------- TRADE CHECK ----------------------------- */
.tc-verdict{font-family:var(--mono);font-size:24px;font-weight:800;letter-spacing:.5px;
  margin:16px 0 4px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tc-verdict .tc-vsub{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--dim);letter-spacing:0}
.tc-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.tc-row{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--dim);
  padding:8px 11px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;line-height:1.5}
.tc-row b{color:var(--txt)}
.tc-ic{font-family:var(--mono);font-weight:700;flex:0 0 16px;text-align:center}
.tc-ic.pass{color:var(--pos)} .tc-ic.warn{color:var(--warn)} .tc-ic.fail{color:var(--neg)}

/* ----------------------------- ACCOUNTS ----------------------------- */
/* signed-out: quiet, premium "Continue with Google" */
.gbtn{display:flex;align-items:center;gap:10px;height:38px;padding:0 18px;
  background:#111418;border:1px solid #2a2f36;border-radius:9px;
  color:#fff;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:all .18s ease;white-space:nowrap}
.gbtn:hover{background:#171b21;border-color:#4a5058;transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,.35)}
.gbtn:active{transform:translateY(0) scale(.98)}
.gbtn svg{flex:0 0 18px}
.gbtn-arrow{opacity:0;transform:translateX(-4px);transition:all .18s ease;color:var(--txt-dim);font-size:14px}
.gbtn:hover .gbtn-arrow{opacity:1;transform:none}
.gbtn-spin{display:none;width:14px;height:14px;border:2px solid #2a2f36;border-top-color:var(--accent);
  border-radius:50%;animation:gspin .7s linear infinite}
.gbtn.loading .gbtn-arrow{display:none}
.gbtn.loading .gbtn-spin{display:block}
@keyframes gspin{to{transform:rotate(360deg)}}

/* signed-in: 32px avatar + glass dropdown */
.avatar-wrap{position:relative}
.avatar-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:block}
.avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);display:block;object-fit:cover;transition:all .18s ease}
.avatar-btn:hover .avatar{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 0 14px rgba(79,209,197,.25)}
.avatar-fb{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4fd1c5,#5b9dff);
  color:#04181a;font-weight:700;font-size:14px;font-family:var(--mono)}
.auth-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:232px;z-index:130;
  background:rgba(14,20,29,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line2);border-radius:13px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease}
.auth-menu.open{opacity:1;visibility:visible;transform:none}
.am-head{display:flex;gap:10px;align-items:center;padding:8px 10px 4px}
.am-head .avatar{width:34px;height:34px;flex:0 0 34px}
.am-id{display:flex;flex-direction:column;min-width:0}
.am-id b{font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-id span{font-size:11px;color:var(--txt-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-sync{font-family:var(--mono);font-size:9px;color:var(--pos);letter-spacing:.8px;padding:2px 10px 6px}
.am-sep{height:1px;background:var(--line);margin:4px 6px}
.am-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;
  color:var(--txt);font-size:13px;font-family:var(--sans);padding:9px 10px;border-radius:8px;cursor:pointer;transition:background .12s}
.am-item:hover{background:rgba(255,255,255,.05)}
.am-ic{width:16px;text-align:center;color:var(--txt-dim);font-size:12px}
.am-note{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.5px;color:var(--txt-mut);
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px}
.am-out{color:var(--neg)} .am-out .am-ic{color:var(--neg)}
.scr-star{color:var(--txt-mut);font-size:12px;cursor:pointer;transition:.12s}
.scr-star:hover{color:var(--warn);transform:scale(1.25)}
.scr-star.on{color:var(--warn)}

/* ---------------------- STICKY TOPBAR + JUMP/HELP ---------------------- */
.topbar{position:sticky;top:8px;z-index:80;backdrop-filter:blur(10px)}
.tc-jump{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.8px;color:#04181a;
  background:linear-gradient(180deg,#6fe0d5,#3cc3b6);border:none;border-radius:8px;padding:8px 13px;cursor:pointer;
  box-shadow:0 4px 14px rgba(79,209,197,.3);transition:.15s;white-space:nowrap}
.tc-jump:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(79,209,197,.45)}
.help-btn{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--txt-dim);background:var(--bg2);
  border:1px solid var(--line2);border-radius:50%;width:30px;height:30px;cursor:pointer;flex:0 0 auto}
.help-btn:hover{color:var(--accent);border-color:var(--accent)}
.panel.flash{outline:2px solid var(--accent);box-shadow:0 0 34px rgba(79,209,197,.35);transition:.3s}

/* --------------------------- TREND SCAN STRIP --------------------------- */
.screener{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:7px 11px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:10px}
.scr-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;color:var(--txt-mut);flex:0 0 auto}
.scr-row{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:thin}
.scr-chip{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--txt-dim);
  background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer;white-space:nowrap;transition:.12s}
.scr-chip b{color:var(--txt)}
.scr-chip:hover{border-color:var(--line2)}
.scr-chip.on{border-color:var(--accent);box-shadow:0 0 10px rgba(79,209,197,.2)}

/* -------------------------- LIQUIDATION TAPE -------------------------- */
.liq-tape{display:flex;flex-direction:column;gap:3px;max-height:172px;overflow-y:auto;
  border:1px solid var(--line);border-radius:9px;background:var(--bg2);padding:6px;margin-top:4px}
.liq-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:5px}
.liq-row.neg{background:rgba(255,84,112,.06)} .liq-row.pos{background:rgba(61,220,132,.06)}
.liq-side{font-size:9px;font-weight:700;letter-spacing:.5px;flex:0 0 78px}
.liq-row.neg .liq-side{color:var(--neg)} .liq-row.pos .liq-side{color:var(--pos)}
.liq-row b{color:var(--txt);flex:0 0 56px}
.liq-usd{margin-left:auto;font-weight:600}
.liq-ago{color:var(--txt-mut);font-size:10px;flex:0 0 36px;text-align:right}

/* ---------------------------- ONBOARDING TOUR ---------------------------- */
#tourOverlay{position:fixed;inset:0;z-index:200;background:rgba(4,7,11,.55);backdrop-filter:blur(2px)}
.tour-box{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);width:min(480px,92vw);z-index:300;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--accent);border-radius:14px;
  padding:18px 20px;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 30px rgba(79,209,197,.15)}
.tour-step{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:1.5px;margin-bottom:6px}
.tour-box h3{font-size:16px;margin-bottom:6px}
.tour-box p{font-size:13px;color:var(--txt-dim);line-height:1.6;margin-bottom:14px}
.tour-nav{display:flex;justify-content:space-between}
.tour-hl{position:relative;z-index:201;outline:2px solid var(--accent);box-shadow:0 0 44px rgba(79,209,197,.4);border-radius:12px}
.pos-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin-bottom:10px}
.flat-state{color:var(--txt-mut);font-family:var(--mono);font-size:11px;padding:12px;border:1px dashed var(--line2);border-radius:9px;text-align:center}

/* ------------------------- PLANS · UPGRADE · LOCKS ------------------------- */
.plan-pill{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.6px;padding:3px 7px;
  border-radius:6px;border:1px solid var(--line2);color:var(--txt-dim);background:rgba(255,255,255,.03);align-self:center}
.plan-free{color:var(--txt-dim)} .plan-trial{color:var(--warn);border-color:rgba(255,180,84,.4)}
.plan-pro{color:var(--accent);border-color:rgba(79,209,197,.45);background:rgba(79,209,197,.07)}
.plan-founder{color:var(--purple);border-color:rgba(179,136,255,.45);background:rgba(179,136,255,.08)}
.plan-desk{color:var(--accent2);border-color:rgba(91,157,255,.45);background:rgba(91,157,255,.08)}
.am-note.up{color:#04181a;background:var(--accent);border-color:var(--accent);font-weight:700}
.am-up{color:var(--accent)}
/* locked asset tab */
.asset-tabs button.locked{opacity:.55} .asset-tabs button.locked:hover{opacity:.8}
.asset-tabs .lk{font-size:8px;margin-left:3px;opacity:.8}
/* upgrade button */
.btn-upgrade{display:inline-block;font-family:var(--sans);font-weight:700;font-size:13px;cursor:pointer;
  color:#04181a;background:linear-gradient(180deg,#6fe0d5,#3cc3b6);border:0;border-radius:10px;
  padding:10px 18px;box-shadow:0 6px 20px rgba(79,209,197,.28);transition:.15s}
.btn-upgrade:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(79,209,197,.4)}
/* locked panel body */
.lock-card{text-align:center;padding:30px 18px}
.lock-card .lc-ic{font-size:30px;opacity:.85;margin-bottom:8px}
.lock-card .lc-title{font-weight:700;font-size:16px;margin-bottom:6px}
.lock-card .lc-desc{color:var(--txt-dim);font-size:13px;max-width:440px;margin:0 auto 16px;line-height:1.55}
.lock-card .lc-note{font-size:10px;color:var(--txt-mut);font-family:var(--mono);margin-top:10px}
/* upsell modal */
.upsell-overlay{position:fixed;inset:0;z-index:400;background:rgba(4,8,12,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:upfade .15s ease}
@keyframes upfade{from{opacity:0}to{opacity:1}}
.upsell-box{position:relative;max-width:380px;width:100%;text-align:center;background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line2);border-radius:16px;padding:30px 26px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.upsell-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--txt-mut);font-size:20px;cursor:pointer;line-height:1}
.upsell-ic{font-size:32px;margin-bottom:8px}
.upsell-title{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase;margin-bottom:8px}
.upsell-msg{color:var(--txt);font-size:14.5px;line-height:1.55;margin-bottom:18px}
.upsell-later{margin-top:12px;font-size:12px;color:var(--txt-mut);cursor:pointer}
.upsell-later:hover{color:var(--txt-dim)}

/* ------------------------- CASH "waiting for" readout ------------------------- */
.wait-box{margin-top:14px;background:linear-gradient(180deg,rgba(255,180,84,.06),rgba(255,180,84,.02));
  border:1px solid rgba(255,180,84,.32);border-radius:12px;padding:13px 15px}
.wait-h{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--warn);margin-bottom:9px}
.wait-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.wait-row:last-of-type{border-bottom:0}
.wait-name{flex:1;font-size:12.5px;color:var(--txt-dim)}
.wait-dir{font-family:var(--mono);font-size:12px;font-weight:600;min-width:78px}
.wait-val{font-family:var(--mono);font-size:12.5px;font-weight:700;min-width:48px;text-align:right}
.wait-flip{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--txt)}
.wait-flip b{color:var(--txt)}

/* ------------------------- boot splash (demo first-load) ------------------------- */
#qtBoot{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:
    radial-gradient(1000px 500px at 50% 38%,rgba(79,209,197,.07),transparent 60%),
    var(--bg);
  font-family:var(--mono);
  transition:opacity .5s ease, visibility .5s ease;
}
#qtBoot.qt-hide{opacity:0;visibility:hidden;pointer-events:none}
.qtb-mark{animation:qtbFold .7s cubic-bezier(.2,.8,.2,1) both, qtbPulse 2.2s ease-in-out 1s infinite}
.qtb-word{font-weight:700;letter-spacing:2.5px;font-size:clamp(18px,4.5vw,24px);color:#e8edf2;
  animation:qtbWord .7s ease .3s both}
.qtb-track{position:relative;width:min(230px,60vw);height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.qtb-bar{position:absolute;top:0;height:100%;width:42%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:qtbBar 1.5s ease-in-out infinite}
.qtb-status{font-size:11px;letter-spacing:3px;color:var(--txt-mut)}
.qtb-dot{animation:qtbDot 1.3s infinite}
.qtb-dot:nth-child(2){animation-delay:.18s}
.qtb-dot:nth-child(3){animation-delay:.36s}
@keyframes qtbFold{0%{opacity:0;transform:scale(.88) translateY(10px)}100%{opacity:1;transform:none}}
@keyframes qtbPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes qtbWord{0%{opacity:0;transform:translateY(7px);letter-spacing:7px}100%{opacity:1;transform:none;letter-spacing:2.5px}}
@keyframes qtbBar{0%{left:-42%}100%{left:102%}}
@keyframes qtbDot{0%,100%{opacity:.2}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .qtb-mark,.qtb-word,.qtb-bar,.qtb-dot{animation:none}
  .qtb-mark,.qtb-word{opacity:1}
}

/* mobile: ledger tables scroll sideways instead of clipping (CLOSE button was unreachable) */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll .ledger{min-width:560px}

/* ===================================================================
   MOBILE — the app terminal itself (≤920px tablets · ≤560px phones)
   Desktop is untouched: every rule below lives inside a media query.
   =================================================================== */
@media (max-width:920px){
  /* topbar: the single flex row forced ~584px of min-content width and
     pushed the page into horizontal scroll — let it wrap instead */
  .topbar{flex-wrap:wrap;gap:10px 14px;padding:10px 12px}
  /* asset picker drops to its own full-width row; tabs stay one
     swipeable non-wrapping strip (overflow-x:auto set on desktop) */
  .asset-sel{order:1;flex:1 1 100%;min-width:0}
  .asset-tabs{flex:1;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;min-width:0}
  /* trend-scan chips swipe inside their own strip, never widen the page */
  .scr-row{-webkit-overflow-scrolling:touch;padding-bottom:3px}
  #app{padding:12px 14px 36px}
}

@media (max-width:560px){
  /* backstop: the page itself never pans sideways (clip ≠ scroll container,
     so it can't eat inner sticky/scroll behaviour) */
  html,body{overflow-x:clip}
  #app{padding:10px 10px 32px}

  /* ---- header condenses: brand row → tabs row → controls row.
     Static (not sticky): three wrapped rows would cover half the phone. */
  .topbar{position:static;gap:8px 10px;padding:10px}
  .logo{font-size:18px}
  .brand-txt h1{font-size:15px;letter-spacing:2px}
  .brand-txt .sub{display:none}   /* decorative tagline only — no functionality lost */
  .head-right{flex:1 1 100%;margin-left:0;justify-content:flex-start;gap:8px}
  .live-price{flex:1 1 100%}
  .updated{margin-left:auto}      /* keeps avatar/auth menu anchored at the right edge */

  /* ---- thumb-sized tap targets (~40px) on every control */
  .btn,.refresh,.tc-jump,.gbtn,.btn-upgrade{min-height:40px}
  .help-btn{width:40px;height:40px}
  .asset-tabs button{min-height:40px;padding:8px 13px}
  .asset-search{min-height:40px;font-size:16px}   /* 16px stops iOS focus-zoom */
  .field input[type=number],.field input[type=text]{min-height:40px;font-size:16px}
  .scr-chip{min-height:38px;padding:5px 10px}

  /* ---- trend-scan strip: label above, chips swipe full-width below */
  .screener{flex-wrap:wrap;padding:8px 10px}
  .scr-row{flex:1 1 100%}

  /* ---- panels: tighter padding, gauges wrap instead of overflowing */
  .pbody{padding:12px}
  .phead{padding:9px 12px}
  .gauge-wrap{flex-wrap:wrap}
  .gauge svg{max-width:100%;height:auto}          /* viewBox keeps the aspect */
  .inline-fields{grid-template-columns:1fr 1fr}
  .contrib-row{grid-template-columns:84px 1fr 48px;gap:8px}
  .tc-verdict{font-size:20px}
  .stance-word{font-size:26px}

  /* ---- form rows (Trade Check · manual trade · impact calc): the JS
     markup carries inline flex/min-width tuned for desktop, so !important
     is required here. Fields go ~half-width; action buttons stretch. */
  .pbody .row{flex-wrap:wrap}
  .pbody .row .field{flex:1 1 40%!important;min-width:40%!important}
  .pbody .row>.btn{flex:1 1 auto}
}

/* ⚡ alert-activation CTA (under the verdict; signed-in, zero subscriptions, dismissible) */
.alert-cta{margin-top:10px;padding:10px 13px;border:1px solid rgba(255,180,84,.35);border-left:3px solid var(--warn);
  border-radius:9px;background:rgba(255,180,84,.05);font-size:12.5px;color:var(--txt);line-height:1.5;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.alert-cta b{color:var(--warn)}
.alert-cta a{color:var(--accent);white-space:nowrap}
.alert-cta-x{flex:0 0 auto;background:none;border:none;color:var(--mut);font-size:16px;cursor:pointer;padding:2px 6px;line-height:1}
.alert-cta-x:hover{color:var(--txt)}