:root{
  --bg:#070303; --frame:#0a0405; --card:#0d0607; --card-2:#130909; --raise:#1a0c0d;
  --line:#2a1113; --line-2:#3d181b; --line-3:#5a1f23;
  --ink:#f6eeee; --dim:#c4b3b4; --faint:#9a8788;
  /* two reds by job: --red is type and strokes (5.4:1+ on every ground),
     --fill carries white labels (4.78:1). */
  --red:#ff3b3b; --fill:#e0201f; --fill-2:#c81616;
  --red-a:rgba(255,59,59,.12); --red-b:rgba(255,59,59,.28); --glow:rgba(255,40,40,.55);
  --up:#3ddc84; --up-a:rgba(61,220,132,.12);
  --dn:#ff4d4d; --dn-a:rgba(255,77,77,.12);
  /* one family: Geist carries tabular figures, so prices use it too */
  --ui:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --num:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --side:272px; --r:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* hidden must win over any display rule - the nav badges showed "0" without this */
[hidden]{display:none!important}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; height:100svh; overflow:hidden; position:relative;
}
/* the backdrop: a red bloom and a dotted grid the frame floats over */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(255,40,40,.42), transparent 62%),
    radial-gradient(700px 600px at -6% 110%, rgba(200,20,20,.28), transparent 60%),
    radial-gradient(rgba(255,90,90,.16) 1px, transparent 1.4px) 0 0/34px 34px;
}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.n{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:var(--fill);color:#fff}
.pos{color:var(--up)} .neg{color:var(--dn)}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ── the frame ────────────────────────────────────── */
.app{
  position:relative; z-index:1; height:calc(100svh - 28px - var(--anb,0px)); margin:14px;
  display:grid; grid-template-columns:var(--side) minmax(0,1fr);
  background:linear-gradient(180deg,rgba(18,7,8,.94),rgba(9,4,5,.97));
  border:1px solid var(--line-2); border-radius:26px; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,60,60,.04), inset 0 1px 0 rgba(255,120,120,.14);
}

/* ── sidebar ──────────────────────────────────────── */
.side{
  display:flex; flex-direction:column; min-height:0; overflow-y:auto; scrollbar-width:none;
  padding:26px 20px 20px; border-right:1px solid var(--line);
  background:radial-gradient(420px 360px at 0% 0%, rgba(255,50,50,.12), transparent 70%);
}
.side::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:11px}
.brand-mk{width:36px;height:36px;border-radius:10px;background:var(--fill);display:grid;place-items:center;box-shadow:0 6px 20px rgba(224,32,31,.45)}
.brand-mk svg{width:20px;height:20px;color:#fff}
.brand-t{min-width:0}
.brand-t b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.brand-t span{display:block;font-size:12px;color:var(--faint)}
.hello{margin:26px 0 22px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hello h2{font-size:26px;font-weight:400;letter-spacing:-.03em;line-height:1.15;color:var(--dim)}
.hello h2 b{font-weight:600;color:var(--ink)}
.hello p{font-size:12.5px;color:var(--faint);margin-top:8px}
.nav-l{font-size:12px;color:var(--faint);margin:16px 6px 8px;letter-spacing:.02em}
.nav-l:first-of-type{margin-top:0}
.nav a{
  display:flex; align-items:center; gap:13px; padding:11px 14px; margin-bottom:3px;
  border-radius:12px; font-size:14px; font-weight:450; color:var(--dim); position:relative;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav a:hover{background:var(--card-2);color:var(--ink)}
.nav a.on{
  background:linear-gradient(90deg,var(--fill),#b3141a); color:#fff; font-weight:500;
  box-shadow:0 8px 26px rgba(224,32,31,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav a .bdg{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:7px;display:grid;place-items:center;font-family:var(--num);font-size:11px;font-weight:600;background:var(--red-a);color:var(--red);border:1px solid var(--red-b)}
.nav a.on .bdg{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}
.nav a .tag{margin-left:auto;padding:2px 8px;border-radius:6px;font-size:11px;background:var(--raise);color:var(--dim)}
.promo{
  margin-top:auto; padding:18px; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#3a0d0f,#170708 70%); border:1px solid var(--line-3);
}
.promo::after{content:'';position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,60,60,.5),transparent 70%)}
.promo b{display:block;font-size:15px;font-weight:600;position:relative;z-index:1}
.promo p{font-size:12px;color:var(--dim);margin:5px 0 13px;line-height:1.55;position:relative;z-index:1}
.promo button{position:relative;z-index:1;width:100%;padding:11px;border-radius:11px;background:var(--fill);color:#fff;font-size:13px;font-weight:600;transition:background .2s}
.promo button:hover{background:var(--fill-2)}

/* ── main column ──────────────────────────────────── */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:12px;padding:18px 26px 14px;flex-wrap:wrap}
.burger{display:none;width:44px;height:44px;flex:0 0 auto;border-radius:14px;border:1px solid var(--line-2);place-items:center;color:var(--dim)}
.pills{display:flex;gap:6px}
.pill{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line-2); background:var(--card);
  font-size:13px; color:var(--dim); transition:border-color .2s,color .2s,background .2s;
}
.pill:hover{border-color:var(--red);color:var(--ink)}
.pill.on{background:var(--fill);border-color:var(--fill);color:#fff;box-shadow:0 6px 18px rgba(224,32,31,.35)}
.search{
  flex:1 1 280px; max-width:440px; margin-left:auto; display:flex; align-items:center; gap:10px;
  padding:0 16px; height:44px; border-radius:999px; border:1px solid var(--line-2); background:var(--card);
  transition:border-color .2s;
}
.search:focus-within{border-color:var(--red)}
.search svg{color:var(--red)}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:13.5px}
.search input::placeholder{color:var(--faint)}
.search kbd{font-family:var(--num);font-size:10.5px;color:var(--faint);border:1px solid var(--line-2);border-radius:6px;padding:2px 6px}
/* a round control stays round: without flex:0 0 auto these shrink along the
   row and come out as ovals. Every top control is 44px tall, one clean line. */
.ibtn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-2);background:var(--card);display:grid;place-items:center;color:var(--dim);position:relative;transition:border-color .2s,color .2s}
.ibtn[hidden]{display:none}
.ibtn:hover{border-color:var(--red);color:var(--red)}
.ibtn .dot{position:absolute;top:10px;right:11px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.who{display:flex;align-items:center;gap:10px;flex:0 0 auto;height:44px;padding:0 14px 0 4px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);transition:border-color .2s}
.who:hover{border-color:var(--red)}
.who i{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--fill),#5a0f12);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:13px;color:#fff}
.who b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.who span{display:block;font-size:11px;color:var(--faint)}

/* live ticker */
.tape{flex:0 0 auto;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(13,6,7,.6);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tape-run{display:flex;width:max-content;animation:run 60s linear infinite}
.tape:hover .tape-run{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.tk{display:flex;align-items:center;gap:10px;padding:11px 22px;border-right:1px solid var(--line);white-space:nowrap;cursor:pointer}
.tk b{font-size:13px;font-weight:500}
.tk .n{font-size:13px}
.tk .c{font-size:12px}

.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 26px 30px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}

/* the trade view: market strip, then chart beside ticket + account */
.strip-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.strip-h h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.strip-h .sub{font-size:12px;color:var(--faint)}
.strip-h .r{margin-left:auto;display:flex;gap:6px}
.tcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.g-trade{align-items:stretch}
.g-trade .chart-card{min-height:0}
.g-trade .chart{flex:1 1 auto;height:auto;min-height:clamp(340px,46vh,560px)}
.acct .card-h{margin-bottom:10px}
.acct .row1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.acct .big{font-size:28px;font-weight:600;letter-spacing:-.03em}
.acct .big small{font-size:.55em;color:var(--faint);font-weight:500}
.acct .meters{margin-top:14px;gap:10px}
.acct-cta{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}
.acct-cta .go{padding:12px;border-radius:12px;background:var(--fill);color:#fff;font-size:13px;font-weight:600;transition:background .2s}
.acct-cta .go:hover{background:var(--fill-2)}

/* cards */
.grid{display:grid;gap:16px;margin-bottom:16px}
.g-top{grid-template-columns:minmax(300px,.9fr) minmax(0,1.6fr)}
.g-trade{grid-template-columns:minmax(0,1fr) 340px}
.g-bot{grid-template-columns:minmax(0,1fr) 330px}
.card{
  background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line);
  border-radius:var(--r); padding:22px; position:relative; min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,110,110,.06);
}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.card-h h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.card-h .sub{font-size:12px;color:var(--faint)}
.card-h .r{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;color:var(--dim);transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--red);color:var(--ink)}
.chip.on{background:var(--fill);border-color:var(--fill);color:#fff}
.chip.sm{padding:5px 11px;font-size:12px}
.circ{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--dim);transition:border-color .2s,color .2s}
.circ:hover{border-color:var(--red);color:var(--red)}

/* holding */
.hold .lbl{font-size:13px;color:var(--dim)}
.hold .big{font-size:clamp(34px,3.4vw,44px);font-weight:600;margin:10px 0 6px;letter-spacing:-.03em}
.hold .big small{font-size:.55em;color:var(--faint);font-weight:500}
.ret{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint)}
.ret .pc{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-family:var(--num);font-weight:600;font-size:12.5px}
.ret .pc.pos{background:var(--up-a)} .ret .pc.neg{background:var(--dn-a)}
.meters{margin-top:18px;display:grid;gap:12px}
.mt-h{display:flex;font-size:12px;color:var(--faint);margin-bottom:6px}
.mt-h b{margin-left:auto;font-family:var(--num);font-weight:500;color:var(--dim)}
.bar{height:6px;border-radius:3px;background:var(--raise);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:3px;transition:width .6s var(--ease)}
.bar.t i{background:linear-gradient(90deg,#1f9d5a,var(--up))}
.bar.d i{background:linear-gradient(90deg,#8e1216,var(--red));box-shadow:0 0 10px var(--glow)}
.flag{display:none;margin-top:14px;padding:10px 12px;border-radius:12px;font-size:12.5px;line-height:1.5}
.flag.win{display:block;background:var(--up-a);border:1px solid rgba(61,220,132,.4);color:var(--up)}
.flag.bust{display:block;background:var(--red-a);border:1px solid var(--red-b);color:var(--red)}

/* price cards */
.pcards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,1fr);gap:12px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pcards::-webkit-scrollbar{display:none}
.pc-card{
  /* a column with the sparkline pinned to the bottom: a two-line instrument
     name used to push the spark past the card's clipped edge and cut it off */
  display:flex; flex-direction:column;
  position:relative; overflow:hidden; border-radius:18px; padding:13px 14px 0; cursor:pointer;
  background:linear-gradient(180deg,#160a0b,#0c0506); border:1px solid var(--line);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.pc-card:hover{border-color:var(--line-3)}
.pc-card.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red-b),0 12px 30px rgba(224,32,31,.18)}
.pc-card::before{content:'';position:absolute;inset:auto auto -40px -40px;width:180px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--tint,rgba(255,59,59,.25)),transparent 70%);pointer-events:none}
.pc-top{display:flex;align-items:center;gap:10px;position:relative}
.coin{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;font-family:var(--num);font-weight:700;font-size:13px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.coin.rd{border-radius:50%;width:28px;height:28px;font-size:11px}
.pc-top em{font-style:normal;display:block;font-size:11px;color:var(--faint);letter-spacing:.02em}
.pc-top b{display:block;font-size:14px;font-weight:500;line-height:1.2}
.pc-lbl{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--faint);position:relative}
.pc-lbl::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--acc,var(--red))}
.pc-px{font-size:21px;font-weight:600;margin:2px 0 6px;position:relative;letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff 55%,#9a8586);-webkit-background-clip:text;background-clip:text;color:transparent}
.pct{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;white-space:nowrap;font-family:var(--num);font-size:12px;font-weight:600;position:relative}
.pct.pos{background:var(--up-a);color:var(--up)} .pct.neg{background:var(--dn-a);color:var(--dn)}
.spark{display:block;width:calc(100% + 28px);height:44px;margin:6px -14px 0;margin-top:auto;flex:0 0 auto}
.pc-row{display:flex;align-items:center;gap:8px}

/* chart card */
.chart-card{display:flex;flex-direction:column;padding:20px 20px 12px}
.ch-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ch-id{display:flex;align-items:center;gap:10px}
.ch-t b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.ch-t span{display:block;font-size:12px;color:var(--faint)}
.ch-px{font-size:26px;font-weight:600;letter-spacing:-.02em;padding:2px 6px;margin:0 -6px;border-radius:8px;transition:background .3s}
.ch-px.up{background:var(--up-a);transition:none} .ch-px.dn{background:var(--dn-a);transition:none}
.ch-stats{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.cs span{display:block;font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.cs b{display:block;font-family:var(--num);font-size:13px;font-weight:500;margin-top:1px}
.ch-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.seg{display:flex;padding:3px;border-radius:999px;border:1px solid var(--line-2);background:var(--card)}
.seg button{padding:6px 12px;border-radius:999px;font-size:12px;color:var(--faint);transition:background .2s,color .2s}
.seg button.on{background:var(--raise);color:var(--ink)}
.tfr{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
.tfr button{min-width:42px;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--num);font-size:12px;color:var(--dim);transition:border-color .2s,color .2s,background .2s}
.tfr button:hover{border-color:var(--red);color:var(--ink)}
.tfr button.on{background:var(--fill);border-color:var(--fill);color:#fff;box-shadow:0 6px 16px rgba(224,32,31,.35)}
.chart{position:relative;height:clamp(300px,42vh,460px)}
.chart-load{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;background:var(--card);border-radius:12px;transition:opacity .4s}
.chart-load.gone{opacity:0;pointer-events:none}

/* ticket */
.tkt .bs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.bs button{padding:13px 8px;border-radius:14px;border:1px solid var(--line-2);background:var(--card);font-size:14px;font-weight:600;color:var(--dim);transition:all .2s var(--ease)}
.bs button small{display:block;font-family:var(--num);font-size:12px;font-weight:500;margin-top:2px;opacity:.85}
.bs button.on.b{background:var(--up-a);border-color:var(--up);color:var(--up)}
.bs button.on.s{background:var(--red-a);border-color:var(--red);color:var(--red)}
.lab{display:flex;font-size:12px;color:var(--faint);margin-bottom:6px}
.lab span{margin-left:auto}
.qty{display:flex;gap:6px;margin-bottom:12px}
.qty button{flex:0 0 44px;border-radius:12px;border:1px solid var(--line-2);font-size:18px;color:var(--dim);transition:border-color .2s,color .2s}
.qty button:hover{border-color:var(--red);color:var(--red)}
.inp{width:100%;padding:11px 13px;border-radius:12px;background:var(--bg);border:1px solid var(--line-2);font-family:var(--num);font-size:14px;transition:border-color .2s}
.inp:focus{outline:none;border-color:var(--red)}
.inp::placeholder{color:var(--faint)}
.qty .inp{text-align:center}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.types button{padding:9px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;color:var(--dim);transition:all .2s}
.types button.on{background:var(--red-a);border-color:var(--red);color:var(--red);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.send{width:100%;padding:15px;border-radius:14px;font-size:14px;font-weight:600;background:var(--up);color:#03170c;transition:filter .2s,transform .2s}
.send.s{background:var(--fill);color:#fff;box-shadow:0 10px 26px rgba(224,32,31,.35)}
.send:hover{filter:brightness(1.07)}
.tnote{margin-top:10px;font-size:12px;color:var(--faint);text-align:center}
.toast{margin-top:10px;padding:10px 12px;border-radius:12px;font-size:12.5px;background:var(--card);border:1px solid var(--line-2);color:var(--dim);opacity:0;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:none}
.toast.ok{border-color:rgba(61,220,132,.45);color:var(--up)}
.toast.bad{border-color:var(--red-b);color:var(--red)}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:12px 14px;text-align:left;font-size:12px;font-weight:500;color:var(--faint);border-bottom:1px solid var(--line);white-space:nowrap;background:rgba(19,9,9,.6)}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{color:var(--ink)}
th.sort::after{content:' \2195';opacity:.5}
td{padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,59,59,.04)}
td.n,th.r{text-align:right} th.r{text-align:right}
.sym{display:flex;align-items:center;gap:10px}
.sym b{font-weight:500}
.sym .tk2{color:var(--faint);font-size:12px}
.tag2{display:inline-block;padding:4px 10px;border-radius:999px;font-family:var(--num);font-size:12px;font-weight:600}
.tag2.pos{background:var(--up-a);color:var(--up)} .tag2.neg{background:var(--dn-a);color:var(--dn)}
/* the long/short badge: its own name, because .side is the sidebar and the
   sidebar's light-theme gradient was bleeding into the markets table */
.sdt{font-weight:600}
.sdt.b{color:var(--up)} .sdt.s{color:var(--red)}
.mini{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:12px;color:var(--dim);transition:border-color .2s,color .2s}
.mini:hover{border-color:var(--red);color:var(--red)}
.mini.go{border-color:var(--red-b);color:var(--red)}
.empty{padding:34px 14px;text-align:center;font-size:13px;color:var(--faint)}
.tspark{width:96px;height:30px;display:block;margin-left:auto}
.flash-up{animation:fu .5s}.flash-dn{animation:fd .5s}
@keyframes fu{from{background:var(--up-a)}}@keyframes fd{from{background:var(--dn-a)}}

/* watchlist card */
.wl-row{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:10px;transition:background .15s}
.wl-row:last-child{border-bottom:0}
.wl-row:hover{background:rgba(255,59,59,.05)}
.wl-row .nm{flex:1;min-width:0}
.wl-row .nm b{display:block;font-size:13.5px;font-weight:500}
.wl-row .nm span{display:block;font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-row .pr{text-align:right}
.wl-row .pr b{display:block;font-family:var(--num);font-size:13.5px;font-weight:500}
.wl-row .pr span{display:block;font-family:var(--num);font-size:12px}

.foot{display:flex;gap:16px;flex-wrap:wrap;padding:6px 2px 0;font-size:12px;color:var(--faint)}
.foot a:hover{color:var(--red)}
.foot .end{margin-left:auto;display:flex;gap:16px}

/* ── modal ────────────────────────────────────────── */
.veil{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(5,1,2,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .26s var(--ease)}
.veil.open{opacity:1;pointer-events:auto}
.sheet{width:min(460px,100%);max-height:calc(100svh - 40px);overflow-y:auto;background:linear-gradient(180deg,#180a0b,#0d0607);border:1px solid var(--line-2);border-radius:24px;padding:28px;transform:translateY(16px) scale(.985);transition:transform .3s var(--ease);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(224,32,31,.12),inset 0 1px 0 rgba(255,120,120,.12)}
.veil.open .sheet{transform:none}
.sheet-top{display:flex;align-items:flex-start;gap:14px}
.sheet h2{flex:1;font-size:22px;font-weight:500;letter-spacing:-.02em}
.sheet-sub{font-size:13px;color:var(--dim);margin:6px 0 20px;line-height:1.6}
.sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.size{padding:12px 4px 10px;border-radius:14px;border:1px solid var(--line-2);background:var(--card);text-align:center;transition:all .2s}
.size:hover{border-color:var(--red)}
.size b{display:block;font-family:var(--num);font-size:14px;font-weight:600}
.size span{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}
.size.on{background:var(--fill);border-color:var(--fill);box-shadow:0 8px 20px rgba(224,32,31,.35)}
.size.on b,.size.on span{color:#fff}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.terms div{padding:11px 13px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.terms span{display:block;font-size:11.5px;color:var(--faint)}
.terms b{display:block;font-family:var(--num);font-size:15px;font-weight:600;margin-top:2px}
.tabs{display:flex;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line);margin-bottom:16px}
.tab{flex:1;padding:9px;border-radius:999px;font-size:13px;color:var(--faint);transition:all .2s}
.tab.on{background:var(--fill);color:#fff;font-weight:500}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--faint);margin-bottom:6px}
.err{display:none;margin-bottom:12px;padding:10px 13px;border-radius:12px;background:var(--red-a);border:1px solid var(--red-b);font-size:13px;color:var(--red)}
.err.show{display:block}
.submit{width:100%;padding:15px;border-radius:14px;background:var(--fill);color:#fff;font-size:14.5px;font-weight:600;box-shadow:0 10px 30px rgba(224,32,31,.35);transition:background .2s,transform .2s}
.submit:hover{background:var(--fill-2)}
.submit[disabled]{opacity:.6;pointer-events:none}
.fine{margin-top:13px;font-size:12px;color:var(--faint);text-align:center;line-height:1.6}
.fine a{border-bottom:1px solid var(--line-2)}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}


/* ── sparklines: skeleton while loading, then all draw in together ── */
.spark{position:relative;overflow:hidden}
/* loading: the faint wave carries a short red pulse along its length -
   no block sweeping over the card, which read as a flash */
.spark .skl{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1.6}
.spark .skr{fill:none;stroke:rgba(255,80,80,.55);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:.14 .86;animation:run2 1.6s linear infinite}
@keyframes run2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
.spark.draw .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.65,0,.35,1) forwards}
.spark.draw .ar{opacity:0;animation:fade .9s .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.spark .miss{position:absolute;inset:auto 0 12px;text-align:center;font-size:11px;color:var(--faint)}

/* ── market strip: expanded cards or a compact row ── */
/* compact row: a flex line of content-width cards, not grid tracks. As tracks
   the card could end up narrower than its own text and clip the change pill
   against its overflow:hidden, which is what happened. */
.pcards.cmp{display:flex;align-items:stretch;padding-right:2px}
.pcards.cmp .pc-card{display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;flex:0 0 auto}
.pcards.cmp .pc-card::before{width:120px;height:90px;inset:auto auto -50px -40px}
.pcards.cmp .pc-top b,.pcards.cmp .pc-lbl,.pcards.cmp .spark{display:none}
.pcards.cmp .pc-top em{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0}
.pcards.cmp .coin{width:28px;height:28px;border-radius:8px;font-size:11px}
.pcards.cmp .pc-px{font-size:15px;margin:0;white-space:nowrap;flex:0 0 auto}
.pcards.cmp .pct{margin-left:2px;padding:3px 8px;font-size:11.5px;flex:0 0 auto}
.pcards.cmp .pc-top{flex:0 0 auto}
.pcards.cmp .pc-card::before{opacity:.55}
.seg.icons button{display:grid;place-items:center;width:34px;height:30px;padding:0}
.seg.icons svg{width:16px;height:16px}


/* ── command palette ─────────────────────────────── */
.search{cursor:pointer;text-align:left;color:var(--faint);font-size:13.5px}
.search span{flex:1}
.search:hover{border-color:var(--line-3);color:var(--dim)}
kbd{font-family:var(--ui);font-size:11px;font-weight:500;color:var(--dim);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--card-2)}
.cmd{position:fixed;inset:0;z-index:95;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(5,1,2,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.cmd.open{opacity:1;pointer-events:auto}
.cmd-box{width:min(640px,100%);max-height:min(620px,76vh);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#170a0b,#0d0607);border:1px solid var(--line-2);border-radius:20px;box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 70px rgba(224,32,31,.1),inset 0 1px 0 rgba(255,120,120,.1) scale(.985);transition:transform .22s var(--ease)}
.cmd.open .cmd-box{transform:none}
.cmd-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmd-in svg{color:var(--red);width:20px;height:20px}
.cmd-in input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:16px;color:var(--ink)}
.cmd-in input::placeholder{color:var(--faint)}
.cmd-f{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cmd-list{flex:1 1 auto;overflow-y:auto;padding:6px 8px 8px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.cmd-g{font-size:11.5px;font-weight:500;color:var(--faint);padding:12px 10px 6px;letter-spacing:.02em}
.cmd-o{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;text-align:left;color:var(--dim);transition:background .12s}
.cmd-o.hi{background:rgba(255,59,59,.09);color:var(--ink)}
.cmd-o .nm{flex:1;min-width:0}
.cmd-o .nm b{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.cmd-o .nm span{display:block;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-o .pr{text-align:right}
.cmd-o .pr b{display:block;font-family:var(--num);font-size:13.5px;font-weight:500;color:var(--ink)}
.cmd-o .pr span{display:block;font-family:var(--num);font-size:12px}
.cmd-o .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--card);color:var(--dim);flex:0 0 auto}
.cmd-o.hi .ic{border-color:var(--red-b);color:var(--red)}
.cmd-o .nm b .cur{display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);vertical-align:middle}
.cmd-more{padding:4px 10px 6px 56px;font-size:12px;color:var(--faint)}
.cmd-o .go{opacity:0;color:var(--red);font-size:12px}
.cmd-o.hi .go{opacity:1}
.cmd-none{padding:30px 10px;text-align:center;color:var(--faint);font-size:13.5px}
.cmd-foot{display:flex;gap:16px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);flex-wrap:wrap}
.cmd-foot span{display:inline-flex;align-items:center;gap:6px}
.cmd-foot .end{margin-left:auto}
@media (max-width:680px){.cmd{padding:10px}.cmd-box{max-height:88svh}.cmd-foot span:not(.end){display:none}}

/* ── narrow ───────────────────────────────────────── */
@media (max-width:1320px){
  .g-top{grid-template-columns:1fr}
  .g-bot{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;z-index:60;top:14px;bottom:14px;left:14px;width:var(--side);border-radius:22px;border:1px solid var(--line-2);background:#0e0506;transform:translateX(calc(-100% - 30px));transition:transform .35s var(--ease);box-shadow:30px 0 80px rgba(0,0,0,.6)}
  .side.open{transform:none}
  .burger{display:grid}
  .g-trade{grid-template-columns:1fr}
}
@media (max-width:680px){
  .app{margin:0;height:calc(100svh - var(--anb,0px));border-radius:0;border:0}
  .top{padding:12px 14px;gap:8px}
  .who span,.who b,.ibtn.bell{display:none}
  .search kbd{display:none}
  .who{padding:4px}
  .search{order:3;flex-basis:100%;max-width:none;margin-left:0}
  .scroll{padding:16px 14px 24px}
  .card{padding:16px;border-radius:18px}
  .ch-stats{display:none}
  .sizes{grid-template-columns:repeat(3,1fr)}
  .tfr button{min-width:44px;height:40px}
  .seg button,.chip,.mini{padding:10px 14px}
  .side{left:0;top:0;bottom:0;border-radius:0}
  .foot a{padding:12px 0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ── sidebar close (narrow screens only - there is no collapse on wide) ── */
.side-x{display:none;margin-left:auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2);place-items:center;color:var(--dim)}
@media (max-width:1080px){.side-x{display:grid}}

/* ── papyrus: the light theme ─────────────────────── */
[data-theme="light"]{
  --bg:#e9dfcb; --frame:#f3ecdc; --card:#f8f3e7; --card-2:#fcf9f1; --raise:#eadfc9;
  --line:#d9ccb2; --line-2:#c8b898; --line-3:#b09a76;
  --ink:#1c130e; --dim:#57483b; --faint:#83705d;
  --red:#b8120f; --fill:#c9161a; --fill-2:#a80f12;
  --red-a:rgba(201,22,26,.10); --red-b:rgba(201,22,26,.28); --glow:rgba(201,22,26,.25);
  --up:#1d7f47; --up-a:rgba(29,127,71,.12); --dn:#b8120f; --dn-a:rgba(184,18,15,.10);
}
[data-theme="light"] html,html[data-theme="light"]{color-scheme:light}
[data-theme="light"] body::before{
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(201,22,26,.16), transparent 62%),
    radial-gradient(700px 600px at -6% 110%, rgba(160,90,40,.14), transparent 60%),
    radial-gradient(rgba(120,80,40,.14) 1px, transparent 1.4px) 0 0/34px 34px;
}
[data-theme="light"] .app{background:linear-gradient(180deg,rgba(250,246,238,.96),rgba(243,236,221,.98));box-shadow:0 30px 90px rgba(80,50,20,.22), 0 0 0 1px rgba(201,22,26,.05), inset 0 1px 0 rgba(255,255,255,.7)}
[data-theme="light"] .side{background:radial-gradient(420px 360px at 0% 0%, rgba(201,22,26,.08), transparent 70%)}
[data-theme="light"] .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="light"] .promo{background:linear-gradient(160deg,#fbe7e2,#f6ddd2 70%);border-color:var(--line-3)}
[data-theme="light"] .promo b{color:var(--ink)} [data-theme="light"] .promo p{color:var(--dim)}
[data-theme="light"] .tape{background:rgba(248,243,231,.7)}
[data-theme="light"] .nav a.on{box-shadow:0 8px 22px rgba(201,22,26,.25), inset 0 1px 0 rgba(255,255,255,.25)}
[data-theme="light"] ::selection{background:var(--fill);color:#fff}

/* ── terminal.css content inside the shell ────────── */
:root{--panel:var(--card);--line2:var(--line-2);--line-soft:var(--line);--red-2:var(--fill-2);--red-dim:var(--red-a);--green:var(--up);--green-dim:var(--up-a)}
[data-theme="light"]{--panel:var(--card);--line2:var(--line-2);--line-soft:var(--line);--red-2:var(--fill-2);--red-dim:var(--red-a);--green:var(--up);--green-dim:var(--up-a)}
.scroll.pg{font-family:var(--ui)}
.scroll.pg .view{display:block}
.scroll.pg .vwrap{padding:0;overflow:visible;gap:16px;display:flex;flex-direction:column}
.scroll.pg .panel,.scroll.pg .hcard,.scroll.pg .metric,.scroll.pg .comp,.scroll.pg .feat,.scroll.pg .ev-card,.scroll.pg .rl-rail,.scroll.pg .cert,.scroll.pg .lb-pod,.scroll.pg .cal-sess,.scroll.pg .sc-step,.scroll.pg .dj-card,.scroll.pg .sup-row{
  background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,110,110,.06)}
.scroll.pg .hcard,.scroll.pg .ev-card,.scroll.pg .cert,.scroll.pg .lb-pod,.scroll.pg .cal-sess,.scroll.pg .sc-step{border-radius:18px}
.scroll.pg .panel__head{padding:16px 22px 12px;border-bottom:1px solid var(--line);font-family:var(--ui)}
.scroll.pg .panel__head h2{font-size:16.5px;font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.scroll.pg .panel__kanji{color:var(--red);opacity:.7}
.scroll.pg .cph{padding:6px 0 2px}
.scroll.pg .cph h1{font:600 26px/1.15 var(--ui);letter-spacing:-.03em;text-transform:none;color:var(--ink)}
.scroll.pg .cph p{font-family:var(--ui);font-size:13px;color:var(--faint);margin-top:4px}
.scroll.pg .hcard span,.scroll.pg .metric__l{font-family:var(--ui);letter-spacing:.06em;color:var(--faint)}
.scroll.pg .hcard b{font-family:var(--num)}
.scroll.pg .trades th{font-family:var(--ui);letter-spacing:.06em;color:var(--faint);background:transparent}
.scroll.pg .trades td{font-family:var(--num)}
.scroll.pg .mini-btn,.scroll.pg .cbtn,.scroll.pg .seg button,.scroll.pg .mx-tabs button,.scroll.pg .market-tabs button,.scroll.pg .desk-tabs button{font-family:var(--ui);letter-spacing:.02em;text-transform:none;font-size:12.5px}
.scroll.pg .mini-btn,.scroll.pg .cbtn{border-radius:999px;padding:8px 14px;border:1px solid var(--line-2);color:var(--dim);background:var(--card)}
.scroll.pg .mini-btn:hover,.scroll.pg .cbtn:hover{border-color:var(--red);color:var(--ink)}
.scroll.pg .cbtn--primary,.scroll.pg .tbar__execute{background:var(--fill);border-color:var(--fill);color:#fff;border-radius:999px;font-weight:600}
.scroll.pg .cbtn--primary:hover{background:var(--fill-2)}
.scroll.pg .seg,.scroll.pg .mx-tabs{border-radius:999px;border:1px solid var(--line-2);background:var(--card);padding:3px}
.scroll.pg .seg button.on,.scroll.pg .mx-tabs button.on{background:var(--fill);color:#fff;border-radius:999px;border-bottom:0}
.scroll.pg .t-field span,.scroll.pg .setrow__l h3,.scroll.pg .trow span{font-family:var(--ui);text-transform:none;letter-spacing:0}
.scroll.pg .t-field input,.scroll.pg .t-field select,.scroll.pg .pg-form input,.scroll.pg .pg-form select,.scroll.pg .rl-search input,.scroll.pg .setrow__c input{border-radius:12px;background:var(--card-2);border:1px solid var(--line-2);font-family:var(--ui)}
.scroll.pg .pg-note,.scroll.pg .sim-note,.scroll.pg .t-calc,.scroll.pg .rl-note{font-family:var(--ui);color:var(--faint)}
.scroll.pg .tag,.scroll.pg .st,.scroll.pg .state-chip,.scroll.pg .ref-chip{border-radius:999px}
.scroll.pg .empty-row td{color:var(--faint);text-align:center;font-family:var(--ui)}
.scroll.pg a{color:var(--red)}
.scroll.pg .nav-k,.scroll.pg .tbar__vr{display:none}
/* bell + account menu live in the shell header */
.top{position:relative}
.top .bell-panel{position:absolute;right:26px;top:64px;z-index:40;width:340px;border-radius:18px;border:1px solid var(--line-2);background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.top .acct-menu{position:absolute;right:26px;top:64px;z-index:40;min-width:280px;border-radius:18px;border:1px solid var(--line-2);background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.45);padding:8px;display:flex;flex-direction:column;gap:2px}
.top .acct-menu a,.top .acct-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:10px;font-size:13px;color:var(--dim)}
.top .acct-menu a:hover,.top .acct-menu button:hover{background:var(--card-2);color:var(--ink)}
.top .acct-menu__who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.top .acct-menu__who b{display:block;font-size:13px} .top .acct-menu__who span{font-size:11px;color:var(--faint)}
.top .acct-menu__lbl{display:block;padding:8px 12px 4px;font-size:11px;color:var(--faint)}
.top .acct-desk{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border-radius:10px}
.top .acct-desk.on{background:var(--red-a)}
.top .acct-desk__dot{width:8px;height:8px;border-radius:50%;background:var(--up)} .top .acct-desk__dot.is-funded{background:var(--red)}
.top .acct-desk__t b{display:block;font-size:12.5px;font-family:var(--num)} .top .acct-desk__t em{font-style:normal;font-size:11px;color:var(--faint)}
.top .acct-desk__on{margin-left:auto;font-size:10px;color:var(--red);letter-spacing:.1em}
.eq{display:flex;gap:14px;align-items:center;padding:0 16px;height:44px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-size:12px;color:var(--faint)}
.eq b{font-family:var(--num);font-size:13px;color:var(--ink);font-weight:600}
.eq b.pos{color:var(--up)} .eq b.neg{color:var(--dn)}
.who.btn{cursor:pointer;text-align:left}
.status{display:flex;gap:18px;align-items:center;padding:8px 26px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);flex:0 0 auto}
.status b{color:var(--dim);font-family:var(--num);font-weight:500}
.status .grow{flex:1}
/* superseded by the priority rules at the end of this file */
#themeBtn .ic-sun{display:none} #themeBtn .ic-moon{display:block}
[data-theme="light"] #themeBtn .ic-sun{display:block} [data-theme="light"] #themeBtn .ic-moon{display:none}
.side.open{transform:none}

/* ── compact sidebar ─────────────────────────────── */
:root{--side:228px}
.side{padding:18px 14px 16px}
.brand{gap:9px} .brand-mk{width:30px;height:30px;border-radius:9px} .brand-mk svg{width:17px;height:17px}
.brand-t b{font-size:14.5px} .brand-t span{font-size:11px}
.hello{margin:14px 0 10px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hello b{font-size:13px;font-weight:600;color:var(--ink)} .hello span{font-size:11px;color:var(--faint);font-family:var(--num)}
.nav-l{font-size:10.5px;margin:10px 8px 3px;letter-spacing:.06em;text-transform:uppercase}
.nav a{gap:10px;padding:7px 10px;margin-bottom:1px;border-radius:9px;font-size:13px}
.nav a svg.i{width:16px;height:16px}
.nav a.on{box-shadow:0 4px 14px rgba(224,32,31,.28), inset 0 1px 0 rgba(255,255,255,.14)}
.promo{padding:13px 14px;border-radius:14px}
.promo b{font-size:13.5px} .promo p{font-size:11.5px;margin:4px 0 10px} .promo button,.promo a{padding:9px;font-size:12.5px}
/* ── light theme: surfaces that were hardcoded dark ── */
[data-theme="light"] .pc-card{background:linear-gradient(180deg,var(--card-2),var(--card))}
[data-theme="light"] .pc-card::before{opacity:.45}
[data-theme="light"] .pc-px{background:linear-gradient(90deg,var(--ink) 55%,#6b5a4c);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .spark .skl{stroke:rgba(0,0,0,.08)}
[data-theme="light"] .promo{background:linear-gradient(160deg,#f6e2dc,#efd9cf 70%)}
[data-theme="light"] .sheet,[data-theme="light"] .cmd-box{background:linear-gradient(180deg,var(--card-2),var(--card));color:var(--ink)}
[data-theme="light"] .veil,[data-theme="light"] .cmd{background:rgba(60,40,30,.42)}
[data-theme="light"] .send{color:#fff}
[data-theme="light"] .tape{background:rgba(248,243,231,.75)}
[data-theme="light"] .tape .tk b,[data-theme="light"] .tape .tk .n{color:var(--ink)}
@media (max-width:1080px){[data-theme="light"] .side{background:#f6f0e3}}
[data-theme="light"] .top .bell-panel,[data-theme="light"] .top .acct-menu{box-shadow:0 20px 60px rgba(80,50,20,.25)}
[data-theme="light"] .card{background:linear-gradient(180deg,var(--card-2),var(--card))}
[data-theme="light"] .chart-load{background:var(--card)}

/* ── fine details pass: content components in both themes ── */
/* tables: the root's dark header bar was leaking into every table */
.scroll.pg th{background:transparent;font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:10px 14px}
.scroll.pg td{font-family:var(--num);font-size:12.5px;padding:11px 14px}
.scroll.pg .trades th{background:transparent}
.scroll.pg .trades .empty-row td{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--faint);padding:26px 14px;font-family:var(--ui)}
.scroll.pg .trades tbody tr:nth-child(odd){background:transparent}
.scroll.pg .trades tbody tr:hover td{background:var(--red-a)}
[data-theme="light"] .scroll.pg th{background:rgba(120,90,60,.08)}
[data-theme="light"] .scroll.pg tbody tr:hover{background:rgba(201,22,26,.05)}
.scroll.pg .ph-tbl thead th,.scroll.pg .ph-tbl tbody th{background:var(--raise);color:var(--dim);font-size:11px;letter-spacing:.03em;text-transform:none}
.scroll.pg .ph-tbl thead th em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:2px}
.scroll.pg .ph-tbl td{font-size:12.5px;font-family:var(--num)}
.scroll.pg .ph-tbl td s{font-size:11px;color:var(--faint)}
/* key/value rule rows (payouts, billing, scaling, metrics) had no layout at all */
.scroll.pg .ev-rules{padding:6px 22px 10px}
.scroll.pg .ev-rules .trow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.scroll.pg .ev-rules .trow:last-child{border-bottom:0}
.scroll.pg .ev-rules .trow span{color:var(--faint)}
.scroll.pg .ev-rules .trow b{font-weight:500;color:var(--ink);text-align:right;font-family:var(--num)}
/* segmented controls and tabs: one pill per option, no double borders */
.scroll.pg .seg,.scroll.pg .mx-tabs,.scroll.pg .market-tabs,.scroll.pg .desk-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0;border:0;background:transparent;border-radius:0}
.scroll.pg .seg button,.scroll.pg .mx-tabs button,.scroll.pg .market-tabs button,.scroll.pg .nf-filters button,.scroll.pg .chips a{padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--dim);font-family:var(--ui);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;box-shadow:none;transition:border-color .2s,color .2s,background .2s}
.scroll.pg .seg button:hover,.scroll.pg .mx-tabs button:hover,.scroll.pg .chips a:hover{border-color:var(--red);color:var(--ink)}
.scroll.pg .seg button.on,.scroll.pg .mx-tabs button.on,.scroll.pg .market-tabs button.on,.scroll.pg .nf-filters button.on,.scroll.pg .chips a.on{background:var(--fill);border-color:var(--fill);color:#fff;box-shadow:none}
.scroll.pg .mx-ctrls{gap:10px 14px;margin-bottom:4px}
.scroll.pg .acctsel{border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;font-family:var(--ui);font-size:11px;letter-spacing:.06em;background:var(--card)}
/* buttons keep white text: links inside the content are red, buttons are not links */
.scroll.pg a{color:var(--red)}
.scroll.pg a.cbtn,.scroll.pg a.mini-btn,.scroll.pg a.tbar__execute,.scroll.pg .cfg-go,.scroll.pg .cmp-card .go,.scroll.pg .ev-card,.scroll.pg .nx a,.scroll.pg .nf,.scroll.pg .gate__go{color:var(--dim)}
.scroll.pg a.cbtn--primary,.scroll.pg a.tbar__execute,.scroll.pg .cfg-go,.scroll.pg .cmp-card .go,.scroll.pg .promo a,.scroll.pg .acct-cta .go{color:#fff}
.scroll.pg .cfg-go,.scroll.pg .cmp-card .go{border-radius:12px;background:var(--fill);font-family:var(--ui);font-weight:600;letter-spacing:0;text-transform:none;font-size:13.5px}
/* headings written in the old mono-uppercase voice read as one family now */
.scroll.pg .evh h1,.scroll.pg .mxh p,.scroll.pg .pt-hero h1{font:600 26px/1.15 var(--ui);letter-spacing:-.03em;text-transform:none;color:var(--ink)}
.scroll.pg .evh p{font-family:var(--ui);font-size:13px;color:var(--faint)}
.scroll.pg .stage-hd h2,.scroll.pg .rail-hd span,.scroll.pg .cfg-st__h span,.scroll.pg .dt-h,.scroll.pg .grp__h,.scroll.pg .comp__top h3,.scroll.pg .feat h2,.scroll.pg .rl-art h3,.scroll.pg .setrow__l h3{font-family:var(--ui);text-transform:none;letter-spacing:0;font-weight:500}
.scroll.pg .stage-hd h2,.scroll.pg .grp__h{font-size:16.5px}
.scroll.pg .cfg-st__h b{border-radius:6px;background:var(--fill);color:#fff}
.scroll.pg .rail-hd i,.scroll.pg .cfg-st__h em,.scroll.pg .dt-h i,.scroll.pg .cmp-card .sub,.scroll.pg .cmp-card .per,.scroll.pg .cfg-sum .tot span,.scroll.pg .cfg-sum .row{font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--faint)}
.scroll.pg .cmp-card{border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card))}
.scroll.pg .cmp-card.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red-b)}
.scroll.pg .cmp-card h3{font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:16px;font-weight:600}
.scroll.pg .cmp-card .px,.scroll.pg .cfg-sum .tot b,.scroll.pg .hcard b,.scroll.pg .pt-bal{font-family:var(--num);font-weight:600;letter-spacing:-.02em}
.scroll.pg .cmp-card .rec{border-radius:999px;background:var(--fill);color:#fff;font-family:var(--ui);letter-spacing:.04em;font-size:10px}
.scroll.pg .hcard span,.scroll.pg .metric__l,.scroll.pg .t-field span,.scroll.pg .setrow__l h3{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500}
.scroll.pg .hcard{padding:16px 18px} .scroll.pg .hcard b{font-size:22px}
.scroll.pg .hero-cards{gap:12px}
/* form bits */
.scroll.pg .t-calc,.scroll.pg .auth-err{position:static;display:block;font-family:var(--ui);font-size:12px;line-height:1.5}
.scroll.pg .pg-form{padding:18px 22px 20px;gap:14px}
.scroll.pg .po-desk{border-radius:12px}
.scroll.pg .cfg-ad label,.scroll.pg .ann-chk{font-family:var(--ui);font-size:12.5px}
.scroll.pg input[type=checkbox]{accent-color:var(--fill)}
/* panels breathe a little more in the shell */
.scroll.pg .panel > .pg-note,.scroll.pg .panel > p.sim-note,.scroll.pg .panel > .pg-ctas{padding-left:22px;padding-right:22px}
.scroll.pg .pg-ctas{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:18px}
.scroll.pg .idrow,.scroll.pg .linkrow,.scroll.pg .linkmeta{padding-left:22px;padding-right:22px}
.scroll.pg .ev-grid{gap:10px}
.scroll.pg .ev-card{padding:16px 18px}
.scroll.pg .ev-card b{font-family:var(--ui);font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink)}
.scroll.pg .ev-card i{font-style:normal;color:var(--faint);font-size:12px}
.scroll.pg .ev-card .ev-px{color:var(--red)}
.scroll.pg .setrail button{font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:13px;padding:10px 16px;border-left:2px solid transparent}
.scroll.pg .setrail button.on{border-left-color:var(--red)}
.scroll.pg .setrow{padding:16px 22px}
.scroll.pg .setrow__l p,.scroll.pg .rl-art p{font-family:var(--ui);font-size:12.5px}
.scroll.pg .rl-art{padding:16px 20px}
.scroll.pg .rl-nav button,.scroll.pg .rl-count,.scroll.pg .rl-note{font-family:var(--ui);text-transform:none;letter-spacing:0}
.scroll.pg .ref-chip{border-radius:999px;font-family:var(--ui)} .scroll.pg .ref-chip i{font-style:normal;color:var(--faint)}
.scroll.pg .bi-who b{display:block;font-size:14px;font-weight:600} .scroll.pg .bi-who span{display:block;font-size:12px;color:var(--faint)}
.scroll.pg .inv-head{padding:16px 22px}
.scroll.pg canvas.ov-curve{width:100%}
/* light: canvas curves and meters keep contrast */
[data-theme="light"] .scroll.pg .risk-meter{background:rgba(120,90,60,.15)}

/* no hover lifts anywhere: a raised card inside a scroller loses its top border */
.pc-card:hover,.card:hover,.scroll.pg .cmp-card:hover,.scroll.pg .ev-card:hover,.scroll.pg .hcard:hover,.scroll.pg .comp:hover,.scroll.pg .dj-card:hover,.scroll.pg .cert:hover,.scroll.pg .nx a:hover,.tk:hover,.chip:hover,.circ:hover{transform:none;translate:none}
.pc-card:hover{border-color:var(--line-3);box-shadow:0 0 0 1px var(--red-b)}
.scroll.pg .cmp-card:hover,.scroll.pg .ev-card:hover{border-color:var(--red)}
.pcards{padding-top:2px}

.nav-sp{height:1px;background:var(--line);margin:12px 6px 6px}
[data-theme="light"] .scroll:not(.pg) th{background:rgba(120,90,60,.08)}

/* ── desk bar: switcher + equity + P&L, every page ── */
.eq{gap:16px;padding:0 16px 0 6px;height:44px}
.eq .eq__l{font-size:11.5px;color:var(--faint)}
.dsw{position:relative;margin-right:6px}
.dsw__btn{display:flex;align-items:center;gap:9px;height:36px;padding:0 12px 0 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s}
.dsw__btn:hover{border-color:var(--red)}
.dsw__btn svg.i{width:14px;height:14px;color:var(--faint)}
.dsw__t b{display:block;font-family:var(--num);font-size:12.5px;font-weight:600;line-height:1.1}
.dsw__t small{display:block;font-size:10.5px;color:var(--faint);line-height:1.2;margin-top:1px}
.dsw__dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);flex:0 0 auto}
.dsw__dot.is-funded{background:var(--red);box-shadow:0 0 8px var(--red)}
.dsw__dot.off{background:var(--faint);box-shadow:none}
.dsw__menu{position:absolute;left:0;top:44px;z-index:45;min-width:300px;padding:6px;border-radius:16px;border:1px solid var(--line-2);background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
[data-theme="light"] .dsw__menu{box-shadow:0 20px 60px rgba(80,50,20,.25)}
.dsw__opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;text-align:left;color:var(--ink);cursor:pointer}
.dsw__opt:hover{background:var(--card-2)} .dsw__opt.on{background:var(--red-a);cursor:default}
.dsw__opt b{display:block;font-family:var(--num);font-size:12.5px;font-weight:600} .dsw__opt small{display:block;font-size:11px;color:var(--faint)}
.dsw__opt em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.dsw__new{display:block;margin-top:4px;padding:9px 10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--red)}
.top .eq{margin-right:auto}
/* superseded by the priority rules at the end of this file */
/* promo card: quiet paper card in light mode, no gradient bleed */
[data-theme="light"] .promo{background:var(--card-2);border:1px solid var(--line-2)}
[data-theme="light"] .promo::after{display:none}
.promo{margin-top:22px;flex:0 0 auto}
.side{padding-bottom:22px}
/* ── draggable TP / SL pills on the chart ── */
.tpsl{position:absolute;inset:0;pointer-events:none;z-index:6}
.tpsl__pill{position:absolute;right:64px;transform:translateY(-50%);display:flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line-2);font-size:12px;color:var(--ink);pointer-events:auto;cursor:ns-resize;user-select:none;touch-action:none;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:box-shadow .15s}
.tpsl__pill b{font-size:11px;letter-spacing:.06em}
.tpsl__pill--tp{border-color:var(--up)} .tpsl__pill--tp b{color:var(--up)}
.tpsl__pill--sl{border-color:var(--red)} .tpsl__pill--sl b{color:var(--red)}
.tpsl__pill em{font-style:normal;font-size:11px;color:var(--faint)}
.tpsl__pill i{font-style:normal;font-weight:600}
/* the cross is drawn, not typed: a text glyph sits off-centre in its em box
   however the box itself is centred */
.tpsl__pill u{text-decoration:none;margin-left:2px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--faint);border:1px solid var(--line-2);line-height:1;cursor:pointer}
.tpsl__pill u svg{display:block;width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.tpsl__pill u:hover{color:var(--red);border-color:var(--red)}
.tpsl__pill.add{border-style:dashed;background:var(--card-2);color:var(--dim);cursor:grab;padding:5px 10px}
.tpsl__pill.add b{color:inherit;letter-spacing:0;font-weight:500}
.tpsl__pill.dragging{box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 3px var(--red-a);cursor:grabbing;z-index:2}
.tpsl__pill.bad{border-color:var(--warn,#c07f28)}
[data-theme="light"] .tpsl__pill{box-shadow:0 8px 24px rgba(80,50,20,.22)}
@media (max-width:600px){.tpsl__pill{right:56px;padding:8px 10px 8px 12px;font-size:13px} .tpsl__pill em{display:none}}
/* ── compact root desk: more on screen, same type sizes where it matters ── */
.home .top{padding:10px 20px 8px;gap:10px}
.home .tk{padding:7px 16px;gap:8px}
.home .scroll{padding:12px 20px 20px}
.home .strip-h{margin-bottom:8px} .home .strip-h h3,.home .card-h h3{font-size:15px}
.home .pcards{margin-bottom:12px;gap:10px;grid-auto-columns:minmax(184px,1fr)}
.home .pc-card{padding:10px 12px 0} .home .pc-px{font-size:18px;margin:1px 0 4px} .home .pc-lbl{margin-top:6px}
.home .spark{height:36px;margin:4px -12px 0;width:calc(100% + 24px)}
.home .grid{gap:12px;margin-bottom:12px} .home .tcol{gap:12px}
.home .card{padding:16px} .home .card-h{margin-bottom:10px;gap:8px}
.home #s-book{margin-bottom:12px}
.home .chart-card{padding:14px 14px 8px} .home .ch-head{margin-bottom:6px;gap:12px} .home .ch-tools{margin-bottom:4px}
.home .ch-px{font-size:22px} .home .ch-t b{font-size:15px} .home .ch-stats{gap:14px}
.home .g-trade .chart{min-height:clamp(300px,40vh,480px)}
.home .tfr button{height:30px;min-width:38px;padding:0 8px} .home .seg button{padding:5px 10px}
.home .chip{padding:6px 12px} .home .circ{width:32px;height:32px}
.home .tkt .bs{margin-bottom:10px} .home .bs button{padding:10px 8px;border-radius:12px}
.home .lab{margin-bottom:4px} .home .qty{margin-bottom:9px} .home .qty button{flex-basis:40px}
.home .inp{padding:9px 12px} .home .types{margin-bottom:9px} .home .types button{padding:7px} .home .two{margin-bottom:9px}
.home .send{padding:12px;border-radius:12px} .home .tnote{margin-top:8px} .home .toast{margin-top:8px}
.home .acct .big{font-size:24px} .home .acct .meters{margin-top:10px;gap:8px} .home .acct-cta{margin-top:10px} .home .acct-cta .go{padding:10px}
.home .flag{margin-top:10px}
.home th{padding:9px 12px} .home td{padding:9px 12px} .home .empty{padding:22px 14px}
.home .wl-row{padding:8px 4px;gap:10px}
.home .foot{padding-top:4px}
/* compact root: ticket pairs, account strip under the chart on wide screens */
.home .tk-row .qty{margin-bottom:0} .home .tk-row .types{margin-bottom:0;gap:4px} .home .tk-row .types button{padding:7px 4px;font-size:12px}
.home .tk-row .qty button{flex-basis:34px;font-size:16px} .home .tk-row .inp{padding:8px 6px}
.home .pc-px{font-size:17px} .home .spark{height:30px}
@media (min-width:1081px){
  .home .g-trade{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"chart tkt" "acct acct"}
  .home .g-trade .chart-card{grid-area:chart} .home .tcol{display:contents} .home .tkt{grid-area:tkt}
  .home .g-trade .chart{min-height:clamp(300px,38vh,440px)}
  .home .acct{grid-area:acct;display:grid;grid-template-columns:auto auto minmax(160px,1fr) minmax(160px,1fr) auto;align-items:center;gap:8px 22px;padding:14px 18px}
  .home .acct .card-h{margin:0;display:block} .home .acct .card-h h3{font-size:14px} .home .acct .card-h .sub{display:block;margin-top:2px} .home .acct .card-h .r{display:none}
  .home .acct .row1{flex-direction:column;align-items:flex-start;gap:2px} .home .acct .big{font-size:22px;line-height:1.1}
  .home .acct .meters{display:contents} .home .acct .meters>div{min-width:0}
  .home .acct .flag{grid-column:1/-1;margin:0}
  .home .acct-cta{margin:0;grid-template-columns:auto auto} .home .acct-cta .go{padding:10px 16px;white-space:nowrap}
}
@media (min-width:1081px) and (max-width:1320px){
  .home .acct{grid-template-columns:auto auto 1fr 1fr;gap:8px 16px} .home .acct-cta{grid-column:1/-1;justify-content:start;display:flex}
}
/* pills keep clear of the price axis; off-screen levels pin to the edge with an arrow */
.tpsl{overflow:hidden;--axis:70px}
.tpsl__pill{right:var(--axis)}
.tpsl__pill.off-up::before,.tpsl__pill.off-down::before{content:'';width:0;height:0;border:5px solid transparent;margin-right:2px}
.tpsl__pill.off-up::before{border-bottom-color:currentColor;border-top:0}
.tpsl__pill.off-down::before{border-top-color:currentColor;border-bottom:0}
.tpsl__pill.off-up,.tpsl__pill.off-down{opacity:.85}
.ch-auto{position:absolute;left:8px;bottom:26px;z-index:7;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;transition:border-color .2s,color .2s,background .2s}
.ch-auto:hover,.ch-auto.on{border-color:var(--red);color:var(--red)}
@media (max-width:600px){.tpsl__pill{right:var(--axis)}}
/* ticket: stats grid under the button, current position pinned to the foot */
.home .tkt{display:flex;flex-direction:column}
.tk-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.tk-cell{padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.tk-cell span{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.tk-cell b{display:block;font-size:13px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-cell b small{font-size:11px;font-weight:500;color:var(--faint)}
.tk-cell.bad b{color:var(--red)} .tk-cell.good b{color:var(--up)}
.tk-pos{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:12px}
.home .tk-pos{margin-top:auto}
.tk-pos.empty{justify-content:center;font-size:12px;color:var(--faint)}
.tk-pos__l{flex:1;min-width:0} .tk-pos__l b{display:block;font-size:12px;letter-spacing:.04em} .tk-pos__l span{display:block;font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-pos.long .tk-pos__l b{color:var(--up)} .tk-pos.short .tk-pos__l b{color:var(--red)}
.tk-pos__pl{font-size:14px;font-weight:600}
/* subpage panels clip their header band and last row to the radius */
.scroll.pg .panel{overflow:hidden}
/* smoke under the frame: two slow blurred plumes, never in front of anything */
body::after{content:'';position:fixed;inset:-25%;z-index:0;pointer-events:none;opacity:.85;
  background:radial-gradient(46% 38% at 30% 78%, rgba(255,60,50,.20), rgba(255,60,50,.07) 45%, transparent 78%),radial-gradient(38% 34% at 76% 22%, rgba(255,120,60,.13), rgba(255,120,60,.05) 48%, transparent 80%),radial-gradient(34% 30% at 62% 90%, rgba(120,20,30,.26), rgba(120,20,30,.08) 46%, transparent 78%);
  animation:smoke 46s ease-in-out infinite alternate;will-change:transform,opacity;transform:translateZ(0)}
[data-theme="light"] body::after{background:radial-gradient(46% 38% at 30% 78%, rgba(201,22,26,.12), rgba(201,22,26,.05) 45%, transparent 78%),radial-gradient(38% 34% at 76% 22%, rgba(205,140,60,.14), rgba(205,140,60,.05) 48%, transparent 80%),radial-gradient(34% 30% at 62% 90%, rgba(150,90,40,.13), rgba(150,90,40,.05) 46%, transparent 78%);opacity:1}
@keyframes smoke{0%{transform:translate3d(0,0,0) scale(1);opacity:.85}50%{transform:translate3d(3%,-2%,0) scale(1.07);opacity:1}100%{transform:translate3d(-2%,3%,0) scale(1.03);opacity:.9}}
.app{box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,80,80,.06)}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
/* every subpage card clips its header band and last row to the radius */
.scroll.pg .hcard,.scroll.pg .metric,.scroll.pg .comp,.scroll.pg .feat,.scroll.pg .ev-card,.scroll.pg .rl-rail,.scroll.pg .lb-pod,.scroll.pg .cal-sess,.scroll.pg .sc-step,.scroll.pg .dj-card,.scroll.pg .sup-row{overflow:hidden}
/* account menu: plain type, roomy rows */
.top .acct-menu{padding:8px;min-width:300px}
.top .acct-menu a,.top .acct-menu button,.top .acct-menu .acct-desk{font-family:var(--ui);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;border-bottom:0;border-left:0;padding:10px 12px;border-radius:10px;color:var(--dim)}
.top .acct-menu__who{padding:10px 12px 12px;margin-bottom:6px}
.top .acct-menu__who b{font-size:14.5px;font-weight:600;font-family:var(--ui);color:var(--ink)} .top .acct-menu__who span{font-family:var(--ui);font-size:12.5px;color:var(--faint);margin-top:2px}
.top .acct-menu__lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:6px 12px 6px}
.top .acct-menu .acct-desk{display:flex;align-items:center;gap:10px;margin:0 0 8px;border:1px solid var(--line-2);background:var(--card-2)}
.top .acct-menu .acct-desk.on{border-color:var(--red-b);background:var(--red-a)}
.top .acct-menu .acct-desk span{font-family:var(--ui);text-transform:none;letter-spacing:0}
.top .acct-menu .acct-desk b{display:block;font-family:var(--num);font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0}
.top .acct-menu .acct-desk small{display:block;font-size:12px;color:var(--faint);text-transform:none;letter-spacing:0;font-family:var(--ui)}
.top .acct-menu .acct-desk em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.top .acct-menu .acct-desk__dot{width:8px;height:8px}
.top .acct-menu a+a{margin-top:1px}
.top .acct-menu #acctLogout{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--red)}
/* invoice sheet */
.inv-wrap{max-width:820px}
.inv-sheet{background:#fff;color:#111;border-radius:18px;padding:40px 44px;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.25);font-family:var(--ui)}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:22px;border-bottom:2px solid #c9161a}
.inv-brand{display:flex;align-items:center;gap:12px} .inv-brand img{width:38px;height:38px;border-radius:10px} .inv-brand b{display:block;font-size:16px;letter-spacing:.02em} .inv-brand span{display:block;font-size:12px;color:#777}
.inv-title{text-align:right} .inv-title h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0} .inv-ref{display:block;font-family:var(--num);font-size:13px;color:#666;margin-top:4px}
.inv-meta{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;padding:22px 0}
.inv-meta span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#888} .inv-meta b{display:block;font-size:14px;margin-top:3px} .inv-meta em{display:block;font-style:normal;font-size:12.5px;color:#555;margin-top:2px}
.inv-st--completed{color:#1d7a46} .inv-st--pending{color:#b26a00} .inv-st--failed,.inv-st--cancelled{color:#c9161a}
.inv-lines{width:100%;border-collapse:collapse;font-size:13.5px} .inv-lines th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#888;padding:10px 0;border-bottom:1px solid #ddd} .inv-lines td{padding:12px 0;border-bottom:1px solid #eee;vertical-align:top} .inv-lines .r{text-align:right} .inv-lines .dim{color:#888} .inv-lines tfoot td{border-bottom:0;padding:7px 0;color:#555} .inv-lines tfoot .tot td{font-weight:600;color:#111;font-size:15px;border-top:1px solid #ddd;padding-top:12px}
.inv-foot{margin-top:26px;font-size:12.5px;color:#555;line-height:1.6} .inv-foot .dim{color:#999;margin-top:8px} .inv-foot a{color:#c9161a}
@media print{.inv-sheet{box-shadow:none;border:0;border-radius:0;padding:0} .side,.top,.tape,.cert-acts,.eq,.foot{display:none!important} .app{margin:0;height:auto;box-shadow:none;background:#fff} .scroll{padding:0;overflow:visible} body{background:#fff} body::before,body::after{display:none}}

/* ── beta notice under the desk bar (includes/beta-bar.php) ── */
/* the announcement strip: one thin full-bleed line above the shell, the same
   shape the marketing site uses. It takes its height out of .app through --anb. */
.anb{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;
  height:34px;padding:0 44px 0 20px;background:var(--red-a);border-bottom:1px solid var(--red-b);
  font-size:11.5px;line-height:1.4;color:var(--dim);letter-spacing:.01em}
.anb[hidden]{display:none}
.anb__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anb__t b{color:var(--ink);font-weight:600}
.anb__go{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;color:var(--red);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.anb__go:hover{color:var(--ink)}
.anb__i{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anb__x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  display:grid;place-items:center;border-radius:50%;color:var(--faint);opacity:.7}
.anb__x:hover{opacity:1;color:var(--ink)}
.anb__x svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (max-width:820px){ .anb{gap:10px;padding:0 38px 0 14px;font-size:11px} .anb__i{display:none} }
@media (max-width:520px){ .anb__t b{display:none} }
.beta{display:flex;align-items:center;gap:12px;margin:0 26px 6px;padding:9px 12px 9px 14px;border:1px solid var(--red-b);border-radius:14px;background:var(--red-a);font-size:12.5px;color:var(--dim);flex:0 0 auto;line-height:1.4}
.beta p{flex:1 1 auto;min-width:0} .beta b{color:var(--ink);font-weight:600}
.beta__tag{flex:0 0 auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--fill);border-radius:6px;padding:3px 7px;font-weight:700}
.beta__go{flex:0 0 auto;padding:6px 13px;border-radius:999px;background:var(--fill);color:#fff;font-weight:600;font-size:12px;white-space:nowrap}
.beta__go:hover{background:var(--fill-2)}
.beta__x{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--faint)} .beta__x:hover{color:var(--ink);background:var(--raise)}
@media (max-width:720px){.beta{flex-wrap:wrap;margin:0 14px 6px}.beta p{flex-basis:calc(100% - 90px)}}

/* ── phone pass (max-width 680px): header, beta, root desk, subpages ── */
@media (max-width:680px){
  /* header: one row - burger, desk switcher (shrinks), icons */
  .top,.home .top{padding:10px 12px 8px;gap:6px;flex-wrap:nowrap}
  .burger{width:40px;height:40px;flex:0 0 auto}
  .top .eq{flex:1 1 auto;min-width:0;margin-right:0;padding:0;gap:0}
  .dsw{flex:1 1 auto;min-width:0;margin-right:0}
  .dsw__btn{width:100%;max-width:260px;min-width:0;height:40px;gap:7px;padding:0 10px}
  .dsw__t{flex:1 1 auto;min-width:0}
  .dsw__t b,.dsw__t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dsw__btn svg.i{flex:0 0 auto}
  .dsw__menu{position:fixed;left:10px;right:10px;top:60px;min-width:0;max-height:70svh;overflow-y:auto}
  .top .search{order:0;flex:0 0 40px;width:40px;max-width:40px;height:40px;padding:0;margin-left:0;justify-content:center}
  .top .search span,.top .search kbd{display:none}
  .top .ibtn{width:40px;height:40px;flex:0 0 auto}
  .top .ibtn .dot{top:8px;right:9px}
  .top .who,.top .eq,.top .search{height:40px}
  .top .who{flex:0 0 auto;padding:2px}
  .top .who i{width:36px;height:36px}
  .top > span[style]{display:none}
  .top .acct-menu,.top .bell-panel{position:fixed;top:60px;right:10px;left:auto;width:auto;min-width:0;max-width:calc(100vw - 20px);max-height:calc(100svh - 80px);overflow-y:auto}
  .top .acct-menu{width:300px}
  .top .bell-panel{width:340px}
  /* beta notice: two lines of copy beside its button */
  .beta{flex-wrap:nowrap;margin:0 12px 6px;padding:5px 4px 5px 12px;gap:8px;font-size:11.5px;line-height:1.35;border-radius:12px}
  .beta__tag{display:none}
  .beta p{flex:1 1 auto;min-width:0;flex-basis:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .beta__go{display:inline-flex;align-items:center;height:40px;padding:0 12px;font-size:12px}
  .beta__x{width:34px;height:40px}
  /* ticker tape */
  .tk,.home .tk{padding:7px 12px;gap:7px}
  .tk b,.tk .n{font-size:12.5px}
  /* status line: one quiet row */
  .status{gap:12px;padding:6px 14px;font-size:10.5px;white-space:nowrap;overflow:hidden}
  .status span,.status b{display:inline}
  /* root desk */
  .home .scroll{padding:12px 12px 20px}
  .home .strip-h .sub{display:none}
  .home .strip-h h3{white-space:nowrap}
  .home .circ{width:40px;height:40px}
  .home .seg.icons button{width:40px;height:40px}
  .home .card{padding:14px}
  .home .chart-card{padding:12px 10px 8px}
  .home .ch-head{gap:8px 10px}
  .home .ch-tools{gap:8px}
  .home .ch-tools .seg button{height:40px;padding:0 14px}
  .home .tfr{margin-left:0;flex:1 1 100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .home .tfr button{height:40px;min-width:0;padding:0}
  .home .g-trade .chart{min-height:clamp(300px,50svh,440px)}
  .ch-auto{left:6px;bottom:32px;padding:0 12px;min-height:36px}
  /* order ticket: quantity and type stack, every control 44px */
  .home .tk-row{grid-template-columns:1fr;gap:10px}
  .home .tk-row .qty button,.home .qty button{flex-basis:48px;min-height:44px;font-size:18px}
  .home .inp,.home .tk-row .inp{min-height:44px;font-size:16px;padding:9px 12px}
  .home .tk-row .types button,.home .types button{min-height:44px;padding:0 6px;font-size:13px}
  .home .send{min-height:50px}
  .home .bs button{min-height:56px}
  .home .acct-cta .go,.home .acct-cta .chip{min-height:44px}
  .home #btabs .chip,.home .card-h .chip:not(.sm),.home #wlf .chip{min-height:40px;padding:0 14px}
  .home #bbody button{min-height:40px}
  .home .foot{padding-bottom:6px}
}
/* the TP / SL pills on a phone: tag, P&L and remove only; the price sits on the axis label */
@media (max-width:600px){
  .tpsl__pill{gap:6px;padding:5px 5px 5px 10px;font-size:12.5px;min-height:34px;max-width:calc(100% - var(--axis) - 76px)}
  .tpsl__pill > span.n,.tpsl__pill em{display:none}
  .tpsl__pill u{width:24px;height:24px;font-size:15px}
  .tpsl__pill.add{padding:5px 10px}
}
/* subpages on a phone: two-up stat tiles, tighter panels, tables scroll inside their card */
@media (max-width:680px){
  .scroll.pg{padding:14px 12px 22px}
  .scroll.pg .cph h1,.scroll.pg .evh h1{font-size:23px}
  .scroll.pg .hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .scroll.pg .hcard{padding:14px}
  .scroll.pg .hcard b{font-size:19px;overflow-wrap:anywhere}
  .scroll.pg .hcard span{overflow-wrap:anywhere}
  .scroll.pg .panel__head{padding:14px 16px 10px;flex-wrap:wrap;gap:8px}
  .scroll.pg .ev-rules{padding:4px 16px 8px}
  .scroll.pg .panel > .pg-note,.scroll.pg .panel > p.sim-note,.scroll.pg .panel > .pg-ctas,.scroll.pg .idrow,.scroll.pg .linkrow,.scroll.pg .linkmeta{padding-left:16px;padding-right:16px}
  .scroll.pg .pg-form{padding:14px 16px 16px}
  .scroll.pg .setrow{padding:14px 16px}
  .scroll.pg .trades-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .scroll.pg .trades .empty-row td{white-space:normal;text-align:left}
  .scroll.pg .mini-btn,.scroll.pg .cbtn,.scroll.pg .seg button,.scroll.pg .mx-tabs button{min-height:40px}
  .scroll.pg a.mini-btn,.scroll.pg a.cbtn{display:inline-flex;align-items:center;justify-content:center}
  .scroll.pg .t-field input,.scroll.pg .t-field select,.scroll.pg .pg-form input,.scroll.pg .pg-form select,.scroll.pg .setrow__c input,.scroll.pg .setrow__c select{font-size:16px;min-height:44px}
  .scroll.pg .cmp,.scroll.pg .cmp--2{grid-template-columns:1fr}
  .scroll.pg .stage-hd{flex-wrap:wrap;gap:4px 10px}
  /* invoice sheet */
  .inv-sheet{padding:22px 18px;border-radius:14px}
  .inv-head{flex-direction:column;gap:14px}
  .inv-title{text-align:left}
  .inv-meta{grid-template-columns:1fr 1fr;gap:16px}
  .inv-meta > div:first-child{grid-column:1/-1}
  .inv-meta em{overflow-wrap:anywhere}
  .inv-lines th,.inv-lines td{white-space:normal;overflow-wrap:anywhere}
  .inv-lines .r{white-space:nowrap;padding-left:10px}
}
@media (max-width:400px){
  .dsw__btn{padding:0 8px;gap:6px}
  .dsw__btn svg.i{display:none}
}
/* the drawer on a phone: wider, thumb-sized rows, a 40px close */
@media (max-width:680px){
  .side{width:min(300px,86vw);overscroll-behavior:contain;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .side-x{width:40px;height:40px}
  .nav a{padding:10px 12px;min-height:40px}
}
@media (max-width:680px){
  /* an empty table drops its header row so the message fits the card */
  .scroll.pg .trades:has(tbody > .empty-row:only-child) thead{display:none}
  .scroll.pg .seg button{white-space:nowrap}
}
/* drawer backdrop on phones and tablets */
.side-bg{display:none}
@media (max-width:1080px){
  .side-bg{display:block;position:fixed;inset:0;z-index:55;background:rgba(5,1,2,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .side-bg[hidden]{display:none}
  body.side-open{overflow:hidden}
}
[data-theme="light"] .side-bg{background:rgba(60,40,15,.4)}
/* beta banner: the long line on desktop, a short one on phones */
.beta__short{display:none}
@media (max-width:680px){.beta__long{display:none}.beta__short{display:inline}}
/* ── the account bar's risk chips ── */
.eq__sep{width:1px;height:22px;background:var(--line-2);flex:0 0 auto}
.eq__risk{display:flex;align-items:center;gap:7px}
.eq__risk b.neg{color:var(--red)}
.eq__bar{display:block;width:44px;height:4px;border-radius:2px;background:var(--raise);overflow:hidden;flex:0 0 auto}
.eq__bar u{display:block;height:100%;width:0;background:var(--up);text-decoration:none;transition:width .3s}
.eq__bar u.low{background:var(--red)}
.eq__bar.t u{background:var(--red)}

/* ── notifications panel ── */
.top .bell-panel{width:390px;padding:0;overflow:hidden}
.bell-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);font-family:var(--ui)}
.bell-head b{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.bell-head .r{margin-left:auto;display:flex;gap:6px}
.bell-count{font-size:11px;font-weight:600;color:var(--red);background:var(--red-a);border:1px solid var(--red-b);border-radius:999px;padding:2px 8px}
.bell-list{max-height:min(460px,60svh);overflow-y:auto;scrollbar-width:thin}
.bell-day{position:sticky;top:0;z-index:1;padding:8px 16px 5px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);background:var(--card)}
.bell-item{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);position:relative;transition:background .15s}
.bell-item:hover{background:var(--card-2)}
.bell-item.is-new::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red)}
.bell-k{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:13px;background:var(--raise);color:var(--dim)}
.bell-item.k-breach .bell-k{background:var(--red-a);color:var(--red)}
.bell-item.k-paid .bell-k,.bell-item.k-funded .bell-k,.bell-item.k-pass .bell-k{background:var(--up-a);color:var(--up)}
.bell-t{flex:1;min-width:0}
.bell-t b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.bell-t span{display:block;font-size:12px;color:var(--faint);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bell-item em{font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap;flex:0 0 auto;padding-top:2px}
.bell-empty{padding:34px 20px;text-align:center}
.bell-empty b{display:block;font-size:13.5px;margin-bottom:5px}
.bell-empty span{font-size:12px;color:var(--faint)}
.bell-skel{padding:14px 16px;display:grid;gap:12px}
.bell-skel i{display:block;height:34px;border-radius:10px;background:linear-gradient(90deg,var(--raise),var(--card-2),var(--raise));background-size:200% 100%;animation:bell-sweep 1.2s linear infinite}
@keyframes bell-sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:680px){.top .bell-panel{width:min(390px,calc(100vw - 20px))}}
/* ── the account bar, by priority ───────────────────────────────
   1 the account chip, 2 P&L, 3 the nearest limit, 4 equity, 5 the target.
   Each step down drops the least useful thing, never the account chip. */
/* an item never squeezes below its own text: a squeezed one used to overlap
   the next, so the bar sheds whole items instead (fit() in deskbar.php) */
.eq__i{display:flex;align-items:center;gap:7px;min-width:0;flex:0 0 auto;white-space:nowrap}
.eq__i[hidden]{display:none}
.eq .eq__i.eq--gone{display:none}
.dsw__nums{display:none;grid-template-columns:1fr 1fr;gap:6px;padding:8px;margin-top:4px;border-top:1px solid var(--line)}
.dsw__nums span{display:block;padding:7px 9px;border-radius:10px;background:var(--card-2);min-width:0}
.dsw__nums em{display:block;font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.dsw__nums b{display:block;font-family:var(--num);font-size:13px;font-weight:600;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1400px){.eq .eq__bar{display:none}}
@media (max-width:1240px){.eq__i[data-pri="5"]{display:none}}
@media (max-width:1080px){.eq__i[data-pri="4"]{display:none}}
@media (max-width:900px){
  .eq{display:flex;gap:10px;padding:0 10px;height:40px}
  .eq .eq__l{display:none}
  .eq__i[data-pri="2"],.eq__i[data-pri="3"]{display:flex}
  .eq__i b{font-size:13px}
  .dsw__nums{display:grid}
}
@media (max-width:720px){.eq__i[data-pri="3"]{display:none}}
@media (max-width:420px){
  .eq{gap:8px;padding:0 6px}
  .dsw__btn{max-width:132px;padding:0 8px 0 8px}
  .dsw__t b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dsw__t small{display:none}
}
/* the account chip is priority 1: the numbers give way to it, not the reverse */
.eq{min-width:0}
.dsw{flex:0 0 auto;min-width:0}
.dsw__btn{min-width:0;max-width:100%}
.dsw__t{min-width:0}
.dsw__t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .dsw{min-width:124px}
  .dsw__t b{max-width:120px}
  .eq__i[data-pri="2"]{flex:0 1 auto;min-width:0;justify-content:flex-end}
  .eq__i[data-pri="2"] b{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:420px){.dsw{min-width:112px}.dsw__t b{max-width:104px}}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE + RENDERING PASS - 23 Sep 2026
   Every width from 320 to 2560, landscape phones, tablets, and a downgrade
   path for cheap hardware. Layout and rendering cost only: no copy, no data,
   no behaviour. Both themes come from the tokens, as before.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the header stays one row from 681px up ────────────────────────────────
   .top wraps, and the account bar had no ceiling, so between about 850 and
   1350px it pushed the avatar onto a second line and the header stood 130-136px
   tall. The bar now shrinks instead, and because its chips are in priority
   order (chip, P&L, nearest limit, equity, target) the overflow rule drops the
   least useful one first - the same order the media queries below use. The two
   thresholds move up to match the room the header actually has. */
@media (min-width:681px){
  .top,.home .top{flex-wrap:nowrap}
  /* no overflow:hidden here: the account dropdown is absolutely positioned
     inside this bar and a clip made it open invisibly. The bar sheds whole
     items via fit() instead, so there is nothing left to clip. */
  .top .eq{flex:0 1 auto;min-width:0}
  .top .who{flex:0 0 auto}
}
@media (max-width:1500px){.eq__i[data-pri="5"]{display:none}}
@media (max-width:1320px){.eq__i[data-pri="4"]{display:none}}

/* ── a table of sentences must wrap ────────────────────────────────────────
   td{white-space:nowrap} above is right for the number tables and wrong for
   prose: the rule book on /evaluations measured 2,054px wide at every
   viewport because of it, so it scrolled sideways on a 2,560px monitor. */
.ev-rules td,.ev-rules th,.wrap-cells td,.wrap-cells th{white-space:normal}
.ev-rules__f{white-space:nowrap}

/* ── thumbs: tablets, landscape phones and any coarse pointer ──────────────
   The phone pass stops at 680px, so a 768 tablet and a 740x360 landscape
   phone kept 30px controls. Anything a finger uses is 40px from here down. */
@media (max-width:1080px),(pointer:coarse){
  .scroll.pg .mini-btn,.scroll.pg .cbtn,.scroll.pg .seg button,.scroll.pg .mx-tabs button,
  .scroll.pg .market-tabs button,.scroll.pg .desk-tabs button,.scroll.pg .tbar__execute,
  .scroll.pg .chip,.scroll.pg .mini,.scroll.pg .hc-seg button,.scroll.pg .hc-more,
  .scroll.pg .ec-chip,.scroll.pg .jl-chip,.scroll.pg .jl-tab{min-height:40px}
  .scroll.pg a.mini-btn,.scroll.pg a.cbtn,.scroll.pg a.chip,.scroll.pg a.mini,
  .scroll.pg a.tbar__execute{display:inline-flex;align-items:center;justify-content:center}
  .scroll.pg .t-field input,.scroll.pg .t-field select,.scroll.pg .pg-form input,
  .scroll.pg .pg-form select,.scroll.pg .pg-form textarea,.scroll.pg .setrow__c input,
  .scroll.pg .setrow__c select,.scroll.pg .rl-search input{min-height:44px;font-size:16px}
  .top .ibtn,.burger{width:40px;height:40px}
  .top .who,.top .eq,.top .search{height:40px}
  .pro-go{height:40px}
  .side-x{width:40px;height:40px}
  .beta__go{min-height:40px;display:inline-flex;align-items:center}
  .beta__x{width:40px;height:40px}
  .dsw__btn{min-height:40px}
  .nav a{min-height:40px}
  .acct-menu a,.acct-menu button,.acct-menu .acct-desk{min-height:44px}
  .bell-head .mini-btn{min-height:40px;display:inline-flex;align-items:center}
  /* the root desk keeps its own class names */
  .home .tfr button{height:40px;min-width:40px}
  .home .ch-tools .seg button{height:40px}
  .home .circ{width:40px;height:40px}
  .home .seg.icons button{width:40px;height:40px}
  .home .qty button{min-height:44px}
  .home .inp{min-height:44px;font-size:16px}
  .home .types button{min-height:44px}
  .home .send{min-height:48px}
  .home .bs button{min-height:52px}
  .home #btabs .chip,.home .card-h .chip:not(.sm),.home #wlf .chip{min-height:40px}
  .home #bbody button{min-height:40px}
  .home .acct-cta .go,.home .acct-cta .chip{min-height:44px}
  .mrg button{min-height:44px}
  .ch-auto{min-height:40px;padding:0 13px}
  .wl-row{min-height:44px}
  /* the settings rail, the notification filters and the two search fields
     that the sweep still found under 40px */
  .scroll.pg .setrail button{min-height:44px}
  .scroll.pg .nf-filters button,.scroll.pg .chips a,.scroll.pg .chips button{min-height:40px}
  .scroll.pg .sup-self input,.scroll.pg .sup-find,.scroll.pg .panel__head input{min-height:44px;font-size:16px}
  .scroll.pg .jl-check input,.scroll.pg .t-field input[type="checkbox"]{width:22px;height:22px}
  /* the small pills in the root page's tables: 32px at tablet and landscape
     widths, because the sizing lived in the 680px phone block */
  .scroll .mini,.scroll .chip,.scroll .seg button{min-height:40px}
  .scroll a.mini,.scroll a.chip{display:inline-flex;align-items:center;justify-content:center}
  /* includes/onboarding-prompt.php belongs to another session; this only
     gives its two controls a thumb's height on touch, nothing else.
     onboarding-prompt.css loads after shell.css, so the selector carries the
     parent to win on specificity rather than on order. */
  .onbp .onbp__go{min-height:40px;display:inline-flex;align-items:center}
  .onbp .onbp__x{width:40px;height:40px}
}

/* ── 320px: the narrowest phone still sold ──────────────────────────────── */
@media (max-width:359px){
  .scroll.pg{padding:12px 10px 20px}
  .home .scroll{padding:10px 10px 18px}
  .scroll.pg .cph h1,.scroll.pg .evh h1{font-size:21px}
  .scroll.pg .panel__head{padding:12px 13px 9px}
  .scroll.pg .panel > .pg-note,.scroll.pg .panel > p.sim-note,.scroll.pg .panel > .pg-ctas,
  .scroll.pg .idrow,.scroll.pg .linkrow,.scroll.pg .linkmeta{padding-left:13px;padding-right:13px}
  .scroll.pg .pg-form,.scroll.pg .setrow{padding-left:13px;padding-right:13px}
  .scroll.pg .hero-cards{grid-template-columns:1fr!important}
  .scroll.pg .hcard b{font-size:18px}
  .scroll.pg h2,.scroll.pg .panel__head h2{font-size:15px;min-width:0;overflow-wrap:anywhere}
  .beta{margin:0 10px 6px}
  .top{padding:10px 10px 8px}
}

/* ── landscape phones: height is the scarce axis ───────────────────────────
   740x360 and 844x390 sit above the 680px phone breakpoint, so the desktop
   chrome was being drawn into 360px of height. */
@media (max-height:520px) and (orientation:landscape){
  .app{margin:0;height:calc(100svh - var(--anb,0px));border-radius:0;border:0}
  /* the header wrapped to three rows at 740px wide and took 112px of a 360px
     screen. One row, same items, same priority order. */
  .top,.home .top{padding:6px 12px;gap:6px;flex-wrap:nowrap}
  .top .eq{flex:1 1 auto;min-width:0;margin-right:0;padding:0 6px}
  .dsw{flex:1 1 auto;min-width:0;margin-right:0}
  .dsw__btn{width:100%;max-width:230px;min-width:0;height:40px;padding:0 10px;gap:7px}
  .dsw__t{flex:1 1 auto;min-width:0}
  .dsw__t b,.dsw__t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .search{order:0;flex:0 0 40px;width:40px;max-width:40px;height:40px;padding:0;margin-left:0;justify-content:center}
  .top .search span,.top .search kbd{display:none}
  .top .who span,.top .who b{display:none}
  .top .who{flex:0 0 auto;padding:2px}
  .top .who i{width:34px;height:34px}
  .top > span[style]{display:none}
  .tk,.home .tk{padding:5px 14px}
  .status{padding:4px 14px}
  .beta{margin:0 12px 4px;padding:4px 4px 4px 12px;font-size:11.5px;line-height:1.35}
  .beta__tag{display:none}
  .beta p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
  .scroll{padding:12px 16px 18px}
  .scroll.pg{padding:12px 16px 18px}
  .home .scroll{padding:10px 14px 16px}
  .side{top:0;bottom:0;left:0;border-radius:0;width:min(272px,62vw)}
  .cmd{padding:5vh 16px 12px}
  .cmd-box{max-height:88svh}
  .top .acct-menu,.top .bell-panel{max-height:calc(100svh - 70px);overflow-y:auto}
  .dsw__menu{max-height:calc(100svh - 70px)}
  .bell-list{max-height:calc(100svh - 150px)}
  /* the chart and the ticket both want height, so give them the width */
  .home .g-trade{grid-template-columns:minmax(0,1fr) minmax(250px,300px);
    grid-template-areas:"chart tkt" "acct acct";align-items:start}
  .home .g-trade .chart-card{grid-area:chart}
  .home .tcol{display:contents}
  .home .tkt{grid-area:tkt}
  .home .acct{grid-area:acct}
  .home .g-trade .chart{min-height:clamp(180px,56svh,300px)}
  .home .ch-stats{display:none}
  .g-top,.g-bot{grid-template-columns:1fr}
  /* the price strip above the chart loses its sparkline so the chart starts
     higher up the page */
  .home .spark{display:none}
  .home .pc-card{padding:8px 10px 8px}
  .home .pc-px{font-size:15px}
}
@media (max-height:400px) and (orientation:landscape){
  .home .g-trade .chart{min-height:clamp(160px,58svh,260px)}
  .scroll.pg .cph h1,.scroll.pg .evh h1{font-size:21px}
}

/* ── above 1600px: spend the room on the chart, not on the paragraphs ───── */
@media (min-width:1600px){
  .scroll.pg .vwrap{max-width:1400px;margin-left:auto;margin-right:auto;width:100%}
  .scroll.pg .cph{max-width:1400px;margin-left:auto;margin-right:auto;width:100%}
  .scroll.pg .cph p,.scroll.pg .panel > .pg-note,.scroll.pg .panel > p.sim-note{max-width:80ch}
  .home .g-trade{grid-template-columns:minmax(0,1fr) 360px}
  .home .g-trade .chart{min-height:clamp(380px,46vh,700px)}
  .home .scroll{padding:14px 26px 22px}
}
@media (min-width:2000px){
  .scroll{padding:26px 40px 34px}
  .scroll.pg .vwrap,.scroll.pg .cph{max-width:1560px}
  .home .g-trade{grid-template-columns:minmax(0,1fr) 380px}
  .home .g-trade .chart{min-height:clamp(440px,52vh,900px)}
}
@media (min-width:2400px){
  .scroll.pg .vwrap,.scroll.pg .cph{max-width:1720px}
  .home .g-trade{grid-template-columns:minmax(0,1fr) 400px}
}

/* ── motion: nothing decorative loops when reduce is asked for ────────────
   The blanket rule higher up shortens durations; these stop the infinite
   loops outright so a weak GPU is not handed a permanent composited layer. */
@media (prefers-reduced-motion:reduce){
  .tape-run,.bell-skel i,.spark .skr,.spark.draw .ln,.spark.draw .ar,
  .pro-go__sheen,.ec-sk,.jl-save.is-saving::before,.mzc__typing i,
  .mrg .flame i,.fire-core,button.fire-css > .fire-core{animation:none!important}
  .pro-go__sheen{opacity:0}
  body::after{animation:none}
  .spark.draw .ln{stroke-dashoffset:0} .spark.draw .ar{opacity:1}
}
/* a touch device is usually the weak GPU in the room: keep the plume's look,
   drop its per-frame compositing */
@media (pointer:coarse){
  body::after{animation:none;will-change:auto}
}

/* ── the low-end downgrade ────────────────────────────────────────────────
   html.mz-low is set by a one-line inline script on every page that owns its
   own markup, when hardwareConcurrency <= 4, deviceMemory <= 4 or
   connection.saveData is on. It removes the layers a weak GPU pays for every
   frame: the plume, the sheen, the marquee, every backdrop blur and every
   large shadow. Nothing it hides carries information. */
html.mz-low body::after{display:none}
html.mz-low body::before{background:
  radial-gradient(900px 520px at 78% -8%, rgba(255,40,40,.32), transparent 62%),
  radial-gradient(700px 600px at -6% 110%, rgba(200,20,20,.20), transparent 60%)}
html[data-theme="light"].mz-low body::before{background:
  radial-gradient(900px 520px at 78% -8%, rgba(201,22,26,.14), transparent 62%),
  radial-gradient(700px 600px at -6% 110%, rgba(160,90,40,.12), transparent 60%)}
html.mz-low .pro-go__sheen{display:none}
html.mz-low .tape-run{animation:none}
html.mz-low .tape{mask-image:none;-webkit-mask-image:none}
html.mz-low .cmd,html.mz-low .veil,html.mz-low .side-bg,html.mz-low .jl-drawer__bg,
html.mz-low .mzc-sheet{backdrop-filter:none;-webkit-backdrop-filter:none}
html.mz-low .cmd{background:rgba(5,1,2,.9)}
html.mz-low .veil{background:rgba(5,1,2,.92)}
html.mz-low .side-bg{background:rgba(5,1,2,.68)}
html.mz-low .jl-drawer__bg{background:rgba(6,3,3,.72)}
html.mz-low .app{box-shadow:0 0 0 1px rgba(255,80,80,.06)}
html.mz-low .side{box-shadow:none}
html.mz-low .cmd-box,html.mz-low .acct-menu,html.mz-low .bell-panel,html.mz-low .dsw__menu,
html.mz-low .mzc,html.mz-low .mzc-launch,html.mz-low .jl-drawer__panel,
html.mz-low .brand-mk,html.mz-low .pro-go,html.mz-low .nav a.on,html.mz-low .card,
html.mz-low .scroll.pg .panel,html.mz-low .scroll.pg .hcard{box-shadow:none}
html.mz-low .bell-skel i,html.mz-low .spark .skr,html.mz-low .ec-sk,
html.mz-low .jl-save.is-saving::before,html.mz-low .mzc__typing i,
html.mz-low .mrg .flame i,html.mz-low .fire-core,
html.mz-low button.fire-css > .fire-core{animation:none}
html.mz-low .mrg .flame,html.mz-low .fire-burst{display:none}
html.mz-low .spark.draw .ln{animation:none;stroke-dashoffset:0}
html.mz-low .spark.draw .ar{animation:none;opacity:1}
html.mz-low *{transition-duration:.12s!important}
html.mz-low .mx-load{display:none}
html.mz-low .jl-drawer__panel{animation:none}
html.mz-low .mzc{animation:none}
html.mz-low #mxPanes.is-swapping{transition:none!important}


/* ── the account bar drops a chip rather than crushing it ──────────────────
   With the header on one row, flex shrink squeezed the P&L and the nearest
   limit down to 0-64px between 700 and 900px instead of dropping them. The
   priority order is unchanged - the chip never gives way - and the full set is
   already mirrored into the account menu below 900px, so nothing is lost. */
@media (max-width:900px) and (min-width:681px){
  .eq__i{flex:0 0 auto}
  .eq__i[data-pri="2"]{flex:0 1 auto;min-width:74px}
}
/* below 900px the header gives the account chip its room by dropping the name
   beside the avatar, exactly as the phone pass already does under 680px. The
   name is in the account menu, one tap away. */
@media (max-width:900px) and (min-width:681px){
  .top .who span,.top .who b{display:none}
  .top .who{padding:2px;flex:0 0 auto}
  .top .who i{width:36px;height:36px}
  .top .eq{flex:0 1 auto}
}
/* the nearest-limit chip needs about 180px; below 800 the header no longer has
   it, so priority 3 gives way there rather than at 720 */
@media (max-width:800px) and (min-width:681px){.eq__i[data-pri="3"]{display:none}}
/* the two tight bands (just under 700, and 1081-1200 where the sidebar is back
   but the window is not yet wide) get their last few pixels from the gaps
   rather than from a clipped figure */
@media (max-width:1240px) and (min-width:681px){.top,.home .top{gap:10px}.eq{gap:12px}}
@media (max-width:1200px) and (min-width:1081px){.eq{gap:10px}.top,.home .top{gap:8px}}
@media (max-width:700px) and (min-width:681px){.eq{gap:8px}}
@media (max-width:1140px) and (min-width:1081px){.eq{gap:8px}.top,.home .top{gap:6px}.eq__i{gap:5px}}
/* 1081-1100 is the tightest band on the whole scale: the sidebar is back but
   the window is not yet wide. The account code ellipsizes by a few characters
   there rather than the nearest-limit figure losing its last digit. */
@media (min-width:1081px) and (max-width:1100px){.dsw__t b{max-width:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* ── phones under 440px: the chip was sitting on top of the Pro button ─────
   At 320-414 the account chip plus the P&L ran 70px past the account bar and
   overlapped the header buttons, because .eq spills rather than clips. The
   priority order decides it, as everywhere else: the P&L gives way (it is in
   the account menu, which already mirrors the full set below 900px) and the
   chip keeps its place. */
@media (max-width:440px){.eq__i[data-pri="2"]{display:none}}
/* the chip had a 112-124px floor, so on a 320px screen it stayed 118px wide
   inside a 66px bar and drew straight over the Pro button. It now takes
   whatever the bar has and ellipsizes the account code, and the bar clips as a
   last resort so nothing can ever sit on the header buttons again. */
@media (max-width:680px){
  .top .eq{overflow:visible}
  /* the later .dsw{flex:0 0 auto} in the account-bar block was beating the
     phone rule that made the chip shrinkable, so it sized to its content */
  .dsw{flex:1 1 auto;min-width:0;max-width:100%}
  .dsw__btn{min-width:0;max-width:260px;width:100%;padding:0 9px;gap:6px}
  .dsw__t{min-width:0}
  .dsw__t b{max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:365px){.top,.home .top{gap:5px}.dsw__btn{padding:0 7px}}
/* the signed-out gate is the last blurred layer a cheap device would pay for */
html.mz-low .gate{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
/* the account bar never wraps a label onto two lines: it drops an item instead */
.eq,.eq__i,.eq__i b,.eq__i .eq__l,.dsw__t b,.dsw__t small{white-space:nowrap}
.dsw__t small{overflow:hidden;text-overflow:ellipsis}
.eq__i .eq__l{flex:0 0 auto}
.eq__i b{flex:0 0 auto}
/* "Start here" is the one nav item we want a new trader to notice */
.nav a.nav-start{background:linear-gradient(135deg,rgba(224,32,31,.16),rgba(255,122,24,.10));border:1px solid var(--red-b,rgba(224,32,31,.4));color:var(--ink);position:relative;overflow:hidden}
.nav a.nav-start .lbl{font-weight:600}
.nav a.nav-start::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:nav-sheen 5.5s cubic-bezier(.4,0,.2,1) infinite}
.nav a.nav-start:hover{border-color:var(--red);background:linear-gradient(135deg,rgba(224,32,31,.26),rgba(255,122,24,.16))}
.nav a.nav-start.on{background:var(--fill);border-color:var(--red);color:#fff}
@keyframes nav-sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(160%)}}
html.mz-low .nav a.nav-start::after,@media (prefers-reduced-motion:reduce){.nav a.nav-start::after{animation:none;opacity:0}}
.nav-sp--start{height:1px;background:var(--line);margin:10px 6px 12px}
/* the sidebar's one call to action: Start here, on every page */
a.promo--start{display:block;text-decoration:none;color:inherit}
a.promo--start .promo__go{position:relative;z-index:1;display:block;text-align:center;padding:10px;border-radius:11px;background:var(--fill);color:#fff;font-size:13px;font-weight:600;transition:background .2s}
a.promo--start:hover .promo__go{background:var(--fill-2)}
a.promo--start p{margin:4px 0 11px}
a.promo--start::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-120%);animation:nav-sheen 6s cubic-bezier(.4,0,.2,1) infinite}
html.mz-low a.promo--start::before{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){a.promo--start::before{animation:none;opacity:0}}

/* 24 Sep: the P&L in the account bar keeps its breathing room and is never cut; the account name gives way first */
.top .eq{padding-right:14px}
.top .eq .eq__i[data-pri="2"]{flex:0 0 auto;min-width:auto}
.top .eq .eq__i[data-pri="2"] b{overflow:visible;text-overflow:clip}
/* the account chip has a floor. Without one it absorbs all the shrink in the
   row, collapses its own text to zero width and lets the second line spill out
   sideways, and because nothing overflows the bar, fit() never sees a problem. */
.top .eq .dsw{flex:0 1 auto;min-width:clamp(128px,13vw,190px)}
@media (max-width:680px){ .top .eq{padding-right:12px;gap:8px} .top .eq .eq__i[data-pri="2"] b{font-size:12.5px} }

/* phones: the theme toggle moves into the account menu, so the account chip and its P&L have room */
.top .acct-menu .acct-theme{display:none}
@media (max-width:560px){ .top #themeBtn{display:none} .top .acct-menu .acct-theme{display:block} }
@media (max-width:680px){ .top .eq .dsw{flex:1 1 0;min-width:0} .top .eq .dsw__btn{max-width:none} }

/* the free $1K welcome account card on /evaluations */
.wlc{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 24px;border-color:color-mix(in srgb,var(--red) 35%,var(--line-2));background:radial-gradient(520px 200px at 0% 0%,color-mix(in srgb,var(--red) 14%,transparent),transparent 70%),var(--card)}
.wlc__k{position:absolute;right:-8px;top:-30px;font:700 150px/1 'Noto Sans JP',sans-serif;color:var(--red);opacity:.07;pointer-events:none}
.wlc__tag{display:inline-block;font:700 10.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.wlc h2{font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
.wlc p{margin:0;color:var(--dim);font-size:13.5px}
.wlc__a{display:flex;flex-direction:column;align-items:flex-end;gap:6px;position:relative}
.wlc__a .cbtn{white-space:nowrap}
.wlc__e{font-size:12px;color:var(--dn);max-width:280px;text-align:right}
.wlc--ok{border-color:color-mix(in srgb,var(--up) 40%,var(--line-2));background:radial-gradient(520px 200px at 0% 0%,color-mix(in srgb,var(--up) 12%,transparent),transparent 70%),var(--card)}
.wlc--ok .wlc__tag{color:var(--up)} .wlc--ok .wlc__a{flex-direction:row}
@media (max-width:680px){.wlc{grid-template-columns:1fr;padding:18px}.wlc__a{align-items:stretch}.wlc__a .cbtn{width:100%;text-align:center}.wlc__e{text-align:left}}

/* account dots by status: live green, funded gold, breached red, passed/ended grey (red read as an error on a funded account) */
.dsw__dot.is-funded,.top .acct-desk__dot.is-funded,.acct-desk__dot.is-funded{background:#d9a21b;box-shadow:0 0 8px rgba(217,162,27,.7)}
.dsw__dot.is-breached,.top .acct-desk__dot.is-breached,.acct-desk__dot.is-breached{background:var(--dn,var(--red));box-shadow:none}
.dsw__dot.is-ended,.top .acct-desk__dot.is-ended,.acct-desk__dot.is-ended{background:var(--faint);box-shadow:none}

/* ── fair play (includes/fairplay.php): the same box on the claim card, referrals and rules ── */
.fp{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--red) 38%,var(--line-2));border-radius:16px;padding:16px 18px;background:color-mix(in srgb,var(--red) 5%,var(--card))}
.fp__head{display:flex;gap:12px;align-items:flex-start}
.fp__k{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--red);color:#fff;font:700 18px/1 'Noto Sans JP',sans-serif}
.fp__head b{display:block;font-size:15px;letter-spacing:-.01em}
.fp__head span{display:block;margin-top:2px;font-size:13px;color:var(--ink);opacity:.85}
.fp ul{margin:12px 0 0;padding-left:20px;display:grid;gap:5px;font-size:13px;color:var(--dim)}
.fp__foot{margin:12px 0 0;font-size:12.5px;color:var(--faint)}
.fp--compact{padding:12px 14px} .fp--compact .fp__k{width:28px;height:28px;font-size:15px} .fp--compact ul{font-size:12.5px}
/* claim card: fair play and the acceptance sit under the offer */
.wlc{grid-template-columns:minmax(0,1fr) auto}
.wlc__fp{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;position:relative}
.wlc__ok{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink);cursor:pointer}
.wlc__ok input{margin-top:2px;accent-color:var(--red)}
.wlc #welcomeClaim[disabled]{opacity:.5;cursor:not-allowed}
.wlc--inv{border-color:var(--line-2);background:var(--card)}
/* referrals: the invite panel */
.inv{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;padding:22px 24px;border-color:color-mix(in srgb,var(--red) 30%,var(--line-2));background:radial-gradient(520px 220px at 0% 0%,color-mix(in srgb,var(--red) 12%,transparent),transparent 70%),var(--card)}
.inv__k{position:absolute;right:-10px;bottom:-40px;font:700 170px/1 'Noto Sans JP',sans-serif;color:var(--red);opacity:.06;pointer-events:none}
.inv__tag{display:block;font:700 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.inv__share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.inv__code{margin-left:auto;font-size:12px;color:var(--faint)} .inv__code b{color:var(--ink)}
.inv__steps{margin:16px 0 0;padding-left:20px;display:grid;gap:6px;font-size:13.5px;color:var(--dim)} .inv__steps b{color:var(--ink)}
.inv__n{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;position:relative}
.inv__n div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card-2)}
.inv__n span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.inv__n b{display:block;font:600 24px var(--num);margin-top:4px} .inv__n i{display:block;font-style:normal;font-size:11.5px;color:var(--faint)}
@media (max-width:900px){.inv{grid-template-columns:1fr;padding:18px}.inv__code{margin-left:0;width:100%}}


/* ── market cards: the sparkline sits on the card's bottom edge whatever the
      title costs. A two-line instrument name used to push it past the card's
      clipped edge and cut the line off. .home .spark overrides the base rule,
      so the pin is written at the same weight and placed last. ───────────── */
.pcards .pc-card{display:flex;flex-direction:column}
.pcards .spark{margin-top:auto;flex:0 0 auto}
.pcards.cmp .pc-card{flex-direction:row}

/* claim card: the profile checklist before a free account can be claimed */
.wlc__prof{gap:8px}
.wlc__prof b{font-size:14px}
.wlc__prof ul{margin:0;padding-left:20px;font-size:13px;color:var(--ink)}
.wlc__pf{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.wlc__pf label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--dim)}
.wlc__pf input{min-width:200px;padding:9px 11px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);font:500 13px var(--ui)}
.wlc__prof > .cbtn{align-self:flex-start}


/* ── paper theme: panel headers and sticky bars sit on the page, not on a band ──
   On the dark desk a tinted header reads as depth. On paper it reads as dirt:
   the panel body is the app's own surface (#f8f3e9), the header was painted
   --head (#efe8db) and the journal's sticky bar --bg (#e9dfcb), so both drew a
   grey-tan strip across the page. The header keeps its bottom border, which is
   what separated it in the first place, and the sticky bar takes the surface
   colour it is sitting on so it still hides content scrolling under it. */
[data-theme="light"] .scroll.pg .panel__head{background:transparent}
[data-theme="light"] .scroll.pg .jl-top{background:var(--card)}
[data-theme="light"] .scroll.pg .desk-tabs{background:transparent}