/* ── Variables ── */
:root {
  --bg:#0b0e15;
  --s:#13181f; --s2:#181e28; --s3:#1d2535;
  --b:#232d3f; --b2:#2c3a52;
  --a:#4f8ef7; --a2:#7c5af5;
  --g:#27c96f; --g2:#1fa85a;
  --r:#e84545; --r2:#c0392b;
  --y:#f5a623; --y2:#d4891a;
  --t:#edf0f7; --t2:#909baf; --t3:#49566a;
  --radius:12px; --radius-sm:8px; --radius-xs:5px;
  --shadow:0 2px 12px rgba(0,0,0,.35);
  --shadow-lg:0 4px 24px rgba(0,0,0,.5);
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { background:var(--bg); color:var(--t); font-family:var(--font); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }

/* ═══════════════════════════════
   MOBILE (default)
═══════════════════════════════ */
.app { display:flex; flex-direction:column; height:100%; height:100dvh; overflow:hidden; }

/* Header */
.hdr {
  background:var(--s); border-bottom:1px solid var(--b);
  padding:11px 16px; display:flex; align-items:center;
  justify-content:space-between; flex-shrink:0; gap:10px;
}
.logo {
  font-size:16px; font-weight:800; letter-spacing:-.3px;
  background:linear-gradient(135deg,var(--a),var(--a2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.hdr-right { display:flex; gap:6px; align-items:center; }
.hdr-meta { display:none; }
.bdg {
  background:var(--s2); border:1px solid var(--b); padding:3px 8px;
  border-radius:20px; font-size:10px; color:var(--t2);
  display:flex; align-items:center; gap:4px; font-weight:600;
}
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--g); animation:pulse 2s infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(39,201,111,.4)} 50%{opacity:.7;box-shadow:0 0 0 4px rgba(39,201,111,0)} }

/* Nav */
.nav { background:var(--s); border-bottom:1px solid var(--b); display:flex; flex-shrink:0; }
.ntab {
  flex:1; padding:11px 6px; font-size:12px; font-weight:600;
  cursor:pointer; color:var(--t3); border-bottom:2px solid transparent;
  text-align:center; transition:color .2s,border-color .2s; user-select:none;
}
.ntab.active { color:var(--a); border-bottom-color:var(--a); }
.ntab:active { background:rgba(255,255,255,.02); }

/* Controls */
.ctrl { background:var(--s); border-bottom:1px solid var(--b); padding:12px 16px; flex-shrink:0; }
.ctrl-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.ctrl-row { display:flex; gap:8px; align-items:center; }
.cg { display:flex; flex-direction:column; gap:4px; }
.cg label { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
select, input[type=number], input[type=text] {
  background:var(--s2); border:1px solid var(--b); color:var(--t);
  padding:9px 11px; border-radius:var(--radius-sm); font-size:13px;
  outline:none; width:100%; -webkit-appearance:none;
  transition:border-color .2s, background .2s;
}
select:focus, input:focus { border-color:var(--a); background:var(--s3); }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23909baf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
}

/* Buttons */
.btn {
  padding:10px 18px; border-radius:var(--radius-sm); border:none;
  cursor:pointer; font-size:13px; font-weight:700;
  transition:all .18s; white-space:nowrap; letter-spacing:.01em;
}
.bp { background:linear-gradient(135deg,var(--a),var(--a2)); color:#fff; box-shadow:0 2px 8px rgba(79,142,247,.3); }
.bp:hover { opacity:.92; box-shadow:0 4px 14px rgba(79,142,247,.4); transform:translateY(-1px); }
.bp:active { opacity:.8; transform:scale(.98) translateY(0); box-shadow:none; }
.bp:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.bs { background:var(--s2); border:1px solid var(--b); color:var(--t2); }
.bs:hover { border-color:var(--b2); color:var(--t); background:var(--s3); }
.bs:active { opacity:.8; }

/* Steps */
.steps { display:flex; gap:6px; align-items:center; margin-top:8px; }
.step-badge { padding:4px 8px; border-radius:var(--radius-xs); font-size:10px; font-weight:700; flex:1; text-align:center; letter-spacing:.02em; }
.step-done   { background:rgba(39,201,111,.12); color:var(--g); }
.step-active { background:rgba(79,142,247,.12); color:var(--a); }
.step-wait   { background:var(--s2); color:var(--t3); }
.step-arrow  { color:var(--t3); font-size:10px; }

/* Progress */
.progress-row { margin-top:8px; }
.prog-bar-bg { height:3px; background:var(--b); border-radius:2px; overflow:hidden; margin-bottom:5px; }
.prog-bar-fill { height:100%; background:linear-gradient(90deg,var(--a),var(--a2)); border-radius:2px; transition:width .4s ease; width:0%; }
.prog-label { font-size:11px; color:var(--t3); }

/* Body */
.body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px 40px; }
.body::-webkit-scrollbar { width:5px; }
.body::-webkit-scrollbar-track { background:transparent; }
.body::-webkit-scrollbar-thumb { background:var(--b2); border-radius:3px; }

/* Placeholder */
.ph { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:55vh; text-align:center; padding:24px; gap:12px; }
.ph-icon { font-size:52px; filter:drop-shadow(0 4px 12px rgba(79,142,247,.3)); }
.ph-title { font-size:20px; font-weight:800; color:var(--t2); letter-spacing:-.3px; }
.ph-text { font-size:13px; color:var(--t3); max-width:320px; line-height:1.7; }
.ph-disc { font-size:11px; color:var(--t3); opacity:.5; }

/* ── Cards ── */
.card {
  background:var(--s); border:1px solid var(--b);
  border-radius:var(--radius); padding:14px; margin-bottom:10px;
  box-shadow:var(--shadow);
}
.ctit { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--t3); margin-bottom:10px; font-weight:800; }

/* Disclaimer */
.disc {
  background:linear-gradient(135deg,rgba(245,166,35,.05),rgba(245,166,35,.02));
  border:1px solid rgba(245,166,35,.15); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:11px; color:var(--t3); line-height:1.5; margin-bottom:12px;
}

/* ── Hero trade box ── */
.hero {
  background:linear-gradient(135deg,rgba(79,142,247,.1),rgba(124,90,245,.1));
  border:1px solid rgba(79,142,247,.25); border-radius:var(--radius);
  padding:16px; margin-bottom:10px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--a),var(--a2));
}
.hero-label { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--a); margin-bottom:6px; font-weight:800; }
.hero-trade { font-size:15px; font-weight:800; font-family:monospace; line-height:1.4; word-break:break-word; margin-bottom:8px; letter-spacing:-.2px; }
.hero-rationale { font-size:13px; color:var(--t2); line-height:1.6; margin-bottom:12px; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hstat { background:rgba(0,0,0,.2); border-radius:var(--radius-sm); padding:10px 12px; border:1px solid rgba(255,255,255,.04); }
.hstat-label { font-size:9px; text-transform:uppercase; color:var(--t3); font-weight:700; letter-spacing:.05em; }
.hstat-val { font-size:13px; font-weight:700; margin-top:3px; word-break:break-word; }

/* ── Snapshot grid ── */
.snap-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.sni { background:var(--s2); border-radius:var(--radius-sm); padding:10px 12px; border:1px solid var(--b); transition:border-color .2s; }
.sni:hover { border-color:var(--b2); }
.snl { font-size:9px; text-transform:uppercase; color:var(--t3); font-weight:700; letter-spacing:.06em; }
.snv { font-size:18px; font-weight:800; margin-top:3px; line-height:1.1; letter-spacing:-.5px; }
.snv-sm { font-size:12px; font-weight:700; margin-top:4px; line-height:1.3; }
.sns { font-size:10px; color:var(--t2); margin-top:3px; }

/* ── Score ring ── */
.score-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.score-ring {
  width:62px; height:62px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:3px solid; flex-shrink:0; box-shadow:var(--shadow);
}
.score-num { font-size:20px; font-weight:900; line-height:1; letter-spacing:-1px; }
.score-sub { font-size:8px; text-transform:uppercase; color:var(--t2); letter-spacing:.05em; }
.score-info { flex:1; min-width:0; }
.score-name { font-size:17px; font-weight:800; letter-spacing:-.3px; }
.score-family { font-size:11px; color:var(--t2); margin-top:2px; }

/* ── Dimension bars ── */
.dim-list { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.dim-row { display:flex; align-items:center; gap:8px; }
.dim-label { font-size:11px; color:var(--t2); width:82px; flex-shrink:0; }
.dim-bar-bg { flex:1; height:5px; background:var(--b); border-radius:3px; overflow:hidden; }
.dim-bar-fill { height:100%; border-radius:3px; transition:width .5s ease; }
.dim-val { font-size:11px; font-weight:700; width:26px; text-align:right; flex-shrink:0; }

/* ── Text callout boxes ── */
.thb {
  background:var(--s2); border-left:3px solid var(--a);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 14px; font-size:13px; line-height:1.6; margin-bottom:8px;
  border-top:1px solid var(--b); border-right:1px solid var(--b); border-bottom:1px solid var(--b);
}
.fib {
  background:var(--s2); border-left:3px solid var(--r);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 14px; font-size:13px; line-height:1.6;
  border-top:1px solid var(--b); border-right:1px solid var(--b); border-bottom:1px solid var(--b);
}

/* ── Detail list ── */
.detail-list { display:flex; flex-direction:column; gap:7px; margin:10px 0; }
.dl-item {
  background:var(--s2); border-radius:var(--radius-sm); padding:11px 13px;
  border:1px solid var(--b); transition:border-color .15s;
}
.dl-item:hover { border-color:var(--b2); }
.dl-label { font-size:9px; text-transform:uppercase; color:var(--t3); font-weight:700; margin-bottom:3px; letter-spacing:.06em; }
.dl-val { font-size:13px; font-weight:600; line-height:1.4; word-break:break-word; }
.dl-val-mono { font-family:monospace; font-size:12px; line-height:1.4; word-break:break-all; color:var(--a); }
.avoid-box {
  background:rgba(232,69,69,.05); border:1px solid rgba(232,69,69,.2);
  border-radius:var(--radius-sm); padding:11px 13px; margin:8px 0;
}
.hist-box {
  background:var(--s2); border-radius:var(--radius-sm); padding:12px 14px;
  margin-top:8px; border:1px solid var(--b);
}

/* ── Tags ── */
.tag { display:inline-block; padding:3px 9px; border-radius:20px; font-size:10px; margin:2px; font-weight:700; letter-spacing:.02em; }
.tg { background:rgba(39,201,111,.1);  color:var(--g);  border:1px solid rgba(39,201,111,.2); }
.tr { background:rgba(232,69,69,.1);   color:var(--r);  border:1px solid rgba(232,69,69,.2); }
.tn { background:rgba(245,166,35,.1);  color:var(--y);  border:1px solid rgba(245,166,35,.2); }
.ta { background:rgba(79,142,247,.1);  color:var(--a);  border:1px solid rgba(79,142,247,.2); }

/* ── Scorecard ── */
.sc-list { display:flex; flex-direction:column; gap:6px; }
.sc-row {
  background:var(--s2); border-radius:var(--radius-sm); padding:10px 12px;
  display:flex; align-items:center; gap:10px; border:1px solid var(--b);
  transition:border-color .15s;
}
.sc-row:hover { border-color:var(--b2); }
.sc-rank { font-size:11px; color:var(--t3); width:16px; flex-shrink:0; font-weight:700; }
.sc-name { flex:1; font-weight:700; font-size:13px; min-width:0; }
.sc-bar-wrap { width:60px; flex-shrink:0; }
.sc-bar-bg { height:4px; background:var(--b); border-radius:2px; overflow:hidden; }
.sc-bar-fill { height:100%; border-radius:2px; }
.sc-score { font-size:16px; font-weight:900; width:32px; text-align:right; flex-shrink:0; letter-spacing:-1px; }
.sc-verdict { font-size:9px; font-weight:800; padding:3px 8px; border-radius:20px; flex-shrink:0; letter-spacing:.03em; }

/* ── Strategy pills ── */
.strat-pills { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none; }
.strat-pills::-webkit-scrollbar { display:none; }
.pill {
  padding:6px 13px; border-radius:20px; background:var(--s2);
  border:1px solid var(--b); color:var(--t2); font-size:11px; font-weight:700;
  cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .15s;
}
.pill:hover { border-color:var(--b2); color:var(--t); }
.pill.active { background:rgba(79,142,247,.12); border-color:var(--a); color:var(--a); }

/* ── No-trade ── */
.ntb { background:rgba(232,69,69,.05); border:1px solid rgba(232,69,69,.18); border-radius:var(--radius-sm); padding:12px 14px; }
.ntb li { padding:4px 0; font-size:13px; color:var(--t2); display:flex; gap:8px; list-style:none; line-height:1.4; }
.ntb li::before { content:"!"; color:var(--r); flex-shrink:0; font-weight:900; }
.no-trade-banner { background:rgba(232,69,69,.07); border:1px solid rgba(232,69,69,.25); border-radius:var(--radius); padding:14px; margin-bottom:10px; }

/* ── Risk ── */
.risk-list { display:flex; flex-direction:column; gap:7px; }
.risk-item { background:var(--s2); border-radius:var(--radius-sm); padding:11px 13px; border:1px solid var(--b); }
.risk-label { font-size:10px; font-weight:800; color:var(--y); margin-bottom:3px; letter-spacing:.03em; text-transform:uppercase; }
.risk-text { font-size:12px; color:var(--t2); line-height:1.5; }

/* ── Bias chips ── */
.bias-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.bchip { padding:5px 14px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.02em; }
.bbull { background:rgba(39,201,111,.1);  color:var(--g);  border:1px solid rgba(39,201,111,.25); }
.bbear { background:rgba(232,69,69,.1);   color:var(--r);  border:1px solid rgba(232,69,69,.25); }
.bneut { background:rgba(245,166,35,.1);  color:var(--y);  border:1px solid rgba(245,166,35,.25); }

/* ── Loading ── */
.loading { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:50vh; gap:16px; }
.spin { width:36px; height:36px; border:2px solid var(--b2); border-top-color:var(--a); border-radius:50%; animation:sp .7s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.stream-box {
  background:var(--s2); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:10px; color:var(--t3); font-family:monospace;
  max-height:70px; overflow-y:auto; margin-top:8px; word-break:break-all;
  border:1px solid var(--b); line-height:1.5;
}

/* ── Dashboard cards ── */
.dash-grid { display:flex; flex-direction:column; gap:10px; }
.dash-card {
  background:var(--s); border:1px solid var(--b); border-radius:var(--radius);
  padding:14px; cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .15s;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.dash-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; bottom:0;
  background:linear-gradient(180deg,var(--a),var(--a2)); opacity:0; transition:opacity .2s;
}
.dash-card:hover { border-color:rgba(79,142,247,.4); box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.dash-card:hover::before { opacity:1; }
.dash-card:active { transform:scale(.99); }
.dash-card-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.dash-rank {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--a),var(--a2));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(79,142,247,.3);
}
.dash-rank-gold   { background:linear-gradient(135deg,#f7d048,#e09900); box-shadow:0 2px 8px rgba(247,208,72,.3); }
.dash-rank-silver { background:linear-gradient(135deg,#c0c8d8,#8a96a8); box-shadow:0 2px 8px rgba(192,200,216,.2); }
.dash-rank-bronze { background:linear-gradient(135deg,#d4834a,#a0521a); box-shadow:0 2px 8px rgba(212,131,74,.2); }
.dash-info { flex:1; min-width:0; }
.dash-ticker { font-size:18px; font-weight:900; letter-spacing:-.5px; }
.dash-strategy { font-size:11px; color:var(--t2); margin-top:2px; font-weight:600; }
.dash-score-wrap { text-align:right; flex-shrink:0; }
.dash-score { font-size:22px; font-weight:900; line-height:1; letter-spacing:-1px; }
.dash-score-label { font-size:9px; text-transform:uppercase; color:var(--t3); font-weight:700; letter-spacing:.06em; }
.dash-structure {
  font-family:monospace; font-size:12px;
  background:rgba(79,142,247,.06); padding:9px 11px;
  border-radius:var(--radius-sm); color:var(--a);
  margin-bottom:8px; word-break:break-all; line-height:1.4;
  border:1px solid rgba(79,142,247,.15);
}
.dash-thesis { font-size:12px; color:var(--t2); line-height:1.55; margin-bottom:9px; }
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.dash-stat { background:var(--s2); border-radius:var(--radius-sm); padding:7px 9px; border:1px solid var(--b); }
.dash-stat-label { font-size:9px; text-transform:uppercase; color:var(--t3); font-weight:700; letter-spacing:.04em; }
.dash-stat-val { font-size:12px; font-weight:700; margin-top:3px; word-break:break-word; }
.dash-score-bars { display:flex; gap:8px; margin:8px 0; }
.dash-score-bar { flex:1; }
.dash-score-bar-label { font-size:9px; color:var(--t3); margin-bottom:3px; font-weight:700; letter-spacing:.03em; }
.dash-score-bar-bg { height:4px; background:var(--b); border-radius:2px; overflow:hidden; }
.dash-score-bar-fill { height:100%; border-radius:2px; }
.dash-key-risk {
  font-size:11px; color:var(--y);
  background:rgba(245,166,35,.06); padding:7px 9px;
  border-radius:var(--radius-sm); margin-top:7px;
  border:1px solid rgba(245,166,35,.12); line-height:1.4;
}

/* ── Earnings ── */
.earn-list { display:flex; flex-direction:column; gap:10px; }
.earn-card { background:var(--s); border:1px solid var(--b); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.earn-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.earn-ticker { font-size:20px; font-weight:900; letter-spacing:-.5px; }
.earn-price { font-size:12px; color:var(--t2); margin-top:2px; font-weight:600; }
.earn-badge { padding:5px 10px; border-radius:var(--radius-sm); font-size:10px; font-weight:800; text-align:right; letter-spacing:.02em; }
.earn-hot  { background:rgba(232,69,69,.1);   color:var(--r);  border:1px solid rgba(232,69,69,.25); }
.earn-soon { background:rgba(245,166,35,.1);  color:var(--y);  border:1px solid rgba(245,166,35,.25); }
.earn-far  { background:rgba(39,201,111,.08); color:var(--g);  border:1px solid rgba(39,201,111,.2); }
.earn-none { background:var(--s2); color:var(--t3); border:1px solid var(--b); }
.iv-row { display:flex; align-items:center; gap:8px; margin:6px 0; }
.iv-label { font-size:10px; color:var(--t3); width:46px; flex-shrink:0; font-weight:700; }
.iv-bar-bg { flex:1; height:5px; background:var(--b); border-radius:3px; overflow:hidden; }
.iv-bar-fill { height:100%; border-radius:3px; }
.iv-val { font-size:12px; font-weight:800; width:40px; text-align:right; flex-shrink:0; }
.earn-play-box {
  background:var(--s2); border-left:3px solid var(--a);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:10px 13px; font-size:13px; line-height:1.55; margin:8px 0;
  border-top:1px solid var(--b); border-right:1px solid var(--b); border-bottom:1px solid var(--b);
}
.earn-struct {
  font-family:monospace; font-size:11px; color:var(--a);
  background:rgba(79,142,247,.06); padding:9px 11px;
  border-radius:var(--radius-sm); margin:6px 0; word-break:break-all;
  line-height:1.4; border:1px solid rgba(79,142,247,.15);
}
.earn-warn { font-size:11px; color:var(--y); margin-top:6px; line-height:1.4; font-weight:600; }

/* ═══════════════════════════════════════════
   DESKTOP — 900px+
   Left sidebar + right content, clean layout
═══════════════════════════════════════════ */
@media (min-width:900px) {
  html, body { overflow:hidden; }

  .app {
    display:grid;
    grid-template-rows:52px 44px 1fr;
    grid-template-columns:280px 1fr;
    height:100vh;
  }

  /* Header — full width, taller */
  .hdr {
    grid-column:1 / -1; grid-row:1;
    padding:0 24px; height:52px; border-bottom:1px solid var(--b);
    background:var(--s);
  }
  .logo { font-size:15px; }

  /* Header market meta strip */
  .hdr-meta {
    display:flex; gap:20px; align-items:center;
    font-size:11px; color:var(--t3); margin-left:24px; flex:1;
  }
  .hdr-meta-item { display:flex; flex-direction:column; gap:1px; }
  .hdr-meta-label { font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--t3); font-weight:700; }
  .hdr-meta-val { font-size:12px; font-weight:800; }

  /* Nav — full width */
  .nav {
    grid-column:1 / -1; grid-row:2;
    height:44px; background:var(--s); border-bottom:1px solid var(--b);
  }
  .ntab {
    flex:0 0 auto; padding:0 22px; height:44px;
    display:flex; align-items:center; gap:7px; font-size:12px;
  }
  .ntab.active { background:rgba(79,142,247,.04); }

  /* Left sidebar */
  .ctrl {
    grid-column:1; grid-row:3;
    border-right:1px solid var(--b); border-bottom:none;
    padding:18px 16px; overflow-y:auto;
    background:var(--s); display:flex; flex-direction:column; gap:14px;
  }
  .ctrl::-webkit-scrollbar { width:4px; }
  .ctrl::-webkit-scrollbar-thumb { background:var(--b2); border-radius:2px; }

  /* Sidebar form layout — always single column */
  .ctrl-grid { grid-template-columns:1fr; gap:10px; margin-bottom:0; }
  .ctrl-row { flex-direction:column; gap:8px; }
  .ctrl-row .bp, .ctrl-row .bs { width:100%; justify-content:center; padding:11px 16px; }

  /* Steps become vertical */
  .steps { flex-direction:column; gap:5px; margin-top:4px; }
  .step-badge { text-align:left; padding:5px 10px; font-size:10px; }
  .step-arrow { display:none; }

  /* Sidebar section labels */
  .sidebar-section-label {
    font-size:9px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--t3); font-weight:800; padding-bottom:8px;
    border-bottom:1px solid var(--b); margin-bottom:2px;
  }

  /* Main content area */
  .body {
    grid-column:2; grid-row:3;
    overflow-y:auto; padding:20px 24px 32px;
    background:var(--bg);
  }

  /* Hide/show ctrl panels inside sidebar — JS controls visibility */
  #ctrl-dashboard, #ctrl-analyze, #ctrl-earnings { display:none; }
  #ctrl-dashboard.ctrl-active,
  #ctrl-analyze.ctrl-active,
  #ctrl-earnings.ctrl-active { display:flex; flex-direction:column; gap:12px; }

  /* ── Desktop grid layouts ── */

  /* Snapshot — 4 per row, expanding */
  .snap-grid { grid-template-columns:repeat(4,1fr); gap:10px; }

  /* Hero stats — all 4 in a row */
  .hero-stats { grid-template-columns:repeat(4,1fr); gap:10px; }

  /* Detail items — 2 column */
  .detail-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

  /* Dashboard cards — 2 column */
  .dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* Earnings — 2 column */
  .earn-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* More whitespace in cards */
  .card { padding:16px 18px; margin-bottom:12px; }
  .hero { padding:18px 20px; margin-bottom:12px; }
  .dash-card { padding:16px 18px; }
  .earn-card { padding:16px 18px; }

  /* Wider text */
  .dash-ticker { font-size:20px; }
  .earn-ticker { font-size:22px; }
  .snv { font-size:20px; }

  /* Divider between sidebar sections */
  .ctrl-divider { height:1px; background:var(--b); margin:2px 0; }
}

@media (min-width:1200px) {
  .app { grid-template-columns:300px 1fr; }
  .dash-grid { grid-template-columns:repeat(3,1fr); }
  .earn-list { grid-template-columns:repeat(3,1fr); }
  .snap-grid { grid-template-columns:repeat(5,1fr); }
}

@media (min-width:1600px) {
  .app { grid-template-columns:320px 1fr; }
  .dash-grid { grid-template-columns:repeat(4,1fr); }
  .snap-grid { grid-template-columns:repeat(6,1fr); }
  .body { padding:24px 32px 40px; }
}