:root{
--ico-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 8a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 3.6 1.65 1.65 0 0010 2.09V2a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 8v0a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
--ico-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");

  --bg:#0a0c0a; --panel:#111411; --panel-2:#161a15; --panel-3:#0d100c;
  --line:#20261e; --line-soft:#191e18;
  --ink:#eceee9; --ink-2:#b3b9ae; --mute:#7d857a; --faint:#4c5449;
  --accent:#e0602a; --up:#4ecf8f; --down:#f0526a; --warn:#e8b23c; --violet:#8b7bf0; --cyan:#4bb8c4;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit}
a{color:var(--up);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#242a21;border-radius:6px;border:3px solid var(--bg)}

/* ============ shell ============ */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:var(--s5);
  padding:0 var(--s5);height:52px;background:rgba(10,12,10,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.brand i{width:11px;height:11px;border-radius:50%;border:2.5px solid var(--accent);display:block}
.nav{display:flex;gap:2px;margin-left:var(--s5);flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{padding:6px 11px;border-radius:6px;color:var(--mute);font-size:13.5px;white-space:nowrap;transition:color .12s,background .12s}
.nav button:hover{color:var(--ink-2)}
.nav button.on{color:var(--ink);background:var(--panel-2)}
.rolebox{display:flex;align-items:center;gap:var(--s3)}
.roleswitch{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:2px}
.roleswitch button{padding:4px 10px;border-radius:5px;font-size:12px;color:var(--mute)}
.roleswitch button.on{background:var(--accent);color:#fff;font-weight:600}
.who{font-family:var(--mono);font-size:11.5px;color:var(--mute);white-space:nowrap}

.strip{display:flex;align-items:center;gap:var(--s3);padding:6px var(--s5);font-size:11.5px;
  background:#1a1208;border-bottom:1px solid #33210e;color:#d9a05f;position:sticky;top:52px;z-index:50}
.strip b{color:#f0b46a;font-family:var(--mono);letter-spacing:.06em}
.strip .sp{margin-left:auto;display:flex;gap:var(--s3);align-items:center}
.tog{border:1px solid #4a3115;border-radius:5px;padding:3px 9px;font-size:11px;color:#d9a05f}
.tog.on{background:#e0602a;border-color:#e0602a;color:#fff}
.units{display:inline-flex;border:1px solid #4a3115;border-radius:5px;overflow:hidden}
.units button{padding:3px 8px;font-size:11px;font-family:var(--mono);color:#d9a05f}
.units button.on{background:#e0602a;color:#fff}

/* page-level alarm bar */
.alarm{display:flex;align-items:center;gap:var(--s4);padding:10px var(--s5);
  background:rgba(240,82,106,.09);border-bottom:1px solid rgba(240,82,106,.28);font-size:13px;color:#f4a3b0;
  position:sticky;top:79px;z-index:45}
.alarm b{color:#ff8095}
.alarm .r{margin-left:auto;display:flex;gap:var(--s2)}

main{max-width:1280px;margin:0 auto;padding:var(--s6) var(--s5) 120px}
h1{font-size:22px;font-weight:650;letter-spacing:-.02em;margin:0}
.h1row{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.h1row .sub{color:var(--mute);font-size:13px}
.h1row .right{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.sec{margin-top:var(--s6)}
.sechead{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.sechead h2{font-size:14px;font-weight:600;margin:0;letter-spacing:-.01em}
.sechead .note{font-size:12px;color:var(--mute)}
.sechead .right{margin-left:auto;font-size:12px;color:var(--mute);display:flex;gap:var(--s3);align-items:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.pad{padding:var(--s5)}
.lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.hr{height:1px;background:var(--line-soft);margin:var(--s5) 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--ink-2)} .warnc{color:var(--warn)}

/* stat tiles */
.tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tiles>div{background:var(--panel);padding:var(--s4) var(--s5)}
.tiles .big{font-family:var(--mono);font-size:25px;letter-spacing:-.02em;margin-top:6px}
.tiles .meta{font-size:11.5px;color:var(--mute);margin-top:4px;font-family:var(--mono)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.g{background:var(--up);box-shadow:0 0 0 3px rgba(78,207,143,.14)}
.dot.a{background:var(--warn);box-shadow:0 0 0 3px rgba(232,178,60,.14)}
.dot.r{background:var(--down);box-shadow:0 0 0 3px rgba(240,82,106,.14)}
.dot.n{background:#3d453a;box-shadow:0 0 0 3px rgba(120,130,115,.1)}

/* buttons */
.btn{border:1px solid var(--line);border-radius:7px;padding:7px 13px;font-size:12.5px;color:var(--ink-2);transition:.12s;white-space:nowrap}
.btn:hover{border-color:#333c2e;color:var(--ink);background:var(--panel-2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.pri:hover{background:#ef6c33;border-color:#ef6c33}
.btn.pri[disabled]{background:#2a2119;border-color:#33291f;color:#6b5b4c;cursor:not-allowed}
.btn.dgr{color:#d9788b;border-color:#3a222a}
.btn.dgr:hover{background:#1e1216;border-color:#57303a;color:var(--down)}
.btn.sm{padding:4px 9px;font-size:11.5px}
.btn.gh{border-color:transparent;color:var(--mute)}
.btn.gh:hover{border-color:var(--line);color:var(--ink-2)}

/* form controls — custom, never native */
.field{margin-bottom:var(--s4)}
.field>label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--mute);margin-top:6px;line-height:1.5}
.inp{width:100%;background:#0b0e0a;border:1px solid var(--line);border-radius:7px;padding:8px 11px;
  color:var(--ink);font-family:var(--mono);font-size:13px;transition:border-color .12s}
.inp:hover{border-color:#2b3327}
.inp:focus{outline:none;border-color:var(--accent)}
.inp.bad{border-color:#5a2a34}
.inp::placeholder{color:#4c5449}
.sel{position:relative;display:inline-block;width:100%}
.sel select{appearance:none;width:100%;background:#0b0e0a;border:1px solid var(--line);border-radius:7px;
  padding:8px 32px 8px 11px;color:var(--ink);font-family:var(--mono);font-size:13px;cursor:pointer}
.sel select:focus{outline:none;border-color:var(--accent)}
.sel:after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-3px);
  border:4px solid transparent;border-top-color:var(--mute);pointer-events:none}
.chk{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:5px 0;font-size:13px;color:var(--ink-2)}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk i{width:16px;height:16px;border:1px solid #2e3629;border-radius:4px;flex:none;margin-top:2px;
  background:#0b0e0a;display:grid;place-items:center;transition:.12s}
.chk i:after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .12s;margin-top:-2px}
.chk input:checked+i{background:var(--accent);border-color:var(--accent)}
.chk input:checked+i:after{transform:rotate(-45deg) scale(1)}
.chk input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.chk:hover i{border-color:#3d4737}
.sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.sw input{position:absolute;opacity:0}
.sw u{width:34px;height:19px;border-radius:11px;background:#252c22;position:relative;transition:.15s;flex:none;display:block}
.sw u:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#6f776c;transition:.15s}
.sw input:checked+u{background:rgba(78,207,143,.28)}
.sw input:checked+u:after{left:17px;background:var(--up)}
.segm{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#0b0e0a}
.segm button{padding:6px 12px;font-size:12.5px;color:var(--mute);border-right:1px solid var(--line)}
.segm button:last-child{border-right:none}
.segm button.on{background:var(--panel-2);color:var(--ink)}
.segm button:hover:not(.on){color:var(--ink-2)}

/* tables */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  font-weight:600;padding:0 var(--s4) var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink-2)}
th .ar{color:var(--accent);margin-left:4px}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.hoverable:hover{background:var(--panel-2);cursor:pointer}
.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.nul{color:var(--faint);font-family:var(--mono);cursor:help;border-bottom:1px dotted #3a4136}
.thin{color:#5d6659}

/* chips */
.chip{display:inline-block;font-size:10.5px;font-family:var(--mono);padding:2px 7px;border-radius:4px;border:1px solid var(--line);white-space:nowrap}
.chip.live{color:var(--up);border-color:rgba(78,207,143,.28);background:rgba(78,207,143,.08)}
.chip.idle{color:var(--warn);border-color:rgba(232,178,60,.28);background:rgba(232,178,60,.07)}
.chip.mock{color:var(--violet);border-color:rgba(139,123,240,.3);background:rgba(139,123,240,.08)}
.chip.strat{color:var(--accent);border-color:rgba(224,96,42,.3);background:rgba(224,96,42,.08)}
.chip.bad{color:var(--down);border-color:rgba(240,82,106,.3);background:rgba(240,82,106,.08)}
.chip.cy{color:var(--cyan);border-color:rgba(75,184,196,.3);background:rgba(75,184,196,.08)}
.side{font-size:10.5px;font-weight:700;letter-spacing:.07em;padding:3px 7px;border-radius:4px;text-align:center;display:inline-block}
.side.long{color:var(--up);background:rgba(78,207,143,.1)}
.side.short{color:var(--down);background:rgba(240,82,106,.1)}

/* confidence bar for small-n stats */
.ci{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px}
.cibar{width:54px;height:5px;border-radius:3px;background:#232a21;position:relative;overflow:hidden;flex:none}
.cibar i{position:absolute;top:0;height:100%;background:#4a5444;display:block}
.cibar i.g{background:rgba(78,207,143,.5)} .cibar i.r{background:rgba(240,82,106,.5)}

/* positions */
.poswrap{display:flex;flex-direction:column;gap:var(--s2)}
.pos{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.pos.risk{border-color:#3a1f26}
.posrow{display:grid;grid-template-columns:minmax(150px,1.15fr) 64px 1.05fr .7fr 1.2fr 108px 26px;
  gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);cursor:pointer;transition:background .12s}
.posrow:hover{background:var(--panel-2)}
.sym{font-family:var(--mono);font-weight:600;font-size:14px}
.symsub{font-size:11px;color:var(--mute);margin-top:2px}
.cell .k{font-size:10.5px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.cell .v{font-family:var(--mono);font-size:13.5px;margin-top:3px}
.pnl{font-family:var(--mono);font-size:17px;text-align:right;letter-spacing:-.01em}
.pnlsub{font-family:var(--mono);font-size:11px;color:var(--mute);text-align:right;margin-top:2px}
.chev{color:var(--mute);transition:transform .18s;text-align:center}
.pos.open .chev{transform:rotate(90deg)}
.guard{font-size:11.5px;font-family:var(--mono)}
.guard b{font-weight:600}
.detail{display:none;border-top:1px solid var(--line-soft);background:var(--panel-3);padding:var(--s5)}
.pos.open .detail{display:block}

/* ladder */
.ladderhead{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.ladderhead .t{font-size:12.5px;font-weight:600}
.ladderhead .s{font-size:11.5px;color:var(--mute);font-family:var(--mono)}
.ladderhead .r{margin-left:auto;font-size:11.5px;color:var(--mute);font-family:var(--mono)}
svg.ladder{width:100%;display:block;overflow:visible}
.lg-axis{stroke:var(--line);stroke-width:1}
.lg-tick{stroke:#2a3126;stroke-width:1}
.lg-txt{font-family:var(--mono);font-size:10px;fill:var(--mute)}
.lg-txt.on{fill:var(--ink-2)}
.lg-cap{font-family:var(--sans);font-size:9.5px;fill:var(--mute);letter-spacing:.05em}
.rung-armed{fill:var(--up)} .rung-idle{fill:none;stroke:#394134;stroke-width:1.5} .stopnow{fill:var(--down)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);font-size:11.5px;color:var(--mute)}
.legend span{display:flex;align-items:center;gap:6px}
.swatch{width:9px;height:9px;border-radius:2px;display:block}
.finding{margin-top:var(--s4);padding:var(--s3) var(--s4);border-left:2px solid var(--warn);
  background:rgba(232,178,60,.05);font-size:12.5px;color:var(--ink-2);border-radius:0 6px 6px 0}
.finding b{color:var(--warn);font-weight:600}
.finding.ok{border-left-color:var(--up);background:rgba(78,207,143,.05)}
.finding.ok b{color:var(--up)}
.finding.no{border-left-color:var(--down);background:rgba(240,82,106,.05)}
.finding.no b{color:var(--down)}
.tl{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.tl div{font-family:var(--mono);font-size:11px;color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:3px 8px}
.tl div b{color:var(--ink-2);font-weight:500}

/* event timeline */
.events{margin-top:var(--s4);border-left:1px solid var(--line);padding-left:var(--s4)}
.ev{position:relative;padding:5px 0;font-size:12px;color:var(--ink-2);display:grid;grid-template-columns:78px 1fr;gap:var(--s3)}
.ev:before{content:"";position:absolute;left:calc(-1 * var(--s4) - 4px);top:12px;width:7px;height:7px;border-radius:50%;background:#39412f;border:1px solid var(--panel-3)}
.ev.g:before{background:var(--up)} .ev.r:before{background:var(--down)} .ev.a:before{background:var(--warn)}
.ev time{font-family:var(--mono);font-size:11px;color:var(--mute)}

/* incidents */
.inc{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:var(--s2);overflow:hidden}
.inc.sev1{border-left:2px solid var(--down)} .inc.sev2{border-left:2px solid var(--warn)}
.inc.done{border-left:2px solid #2f3a30;opacity:.6}
.inchead{display:grid;grid-template-columns:1fr auto auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);cursor:pointer}
.inchead:hover{background:var(--panel-2)}
.inct{font-size:13.5px;font-weight:600}
.incm{font-size:11.5px;color:var(--mute);margin-top:4px;font-family:var(--mono)}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px}
.spark i{width:4px;background:#3a4235;border-radius:1px;display:block}
.spark i.hot{background:var(--down)}
.count{font-family:var(--mono);font-size:18px;text-align:right;min-width:44px}
.incbody{display:none;border-top:1px solid var(--line-soft);background:var(--panel-3)}
.inc.open .incbody{display:block}
.fix{padding:var(--s5);border-bottom:1px solid var(--line-soft)}
.fixt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--up);font-weight:600;margin-bottom:var(--s3)}
.math{font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--ink-2);
  background:#0a0d09;border:1px solid var(--line-soft);border-radius:7px;padding:var(--s3) var(--s4);white-space:pre-wrap}
.math em{color:var(--mute);font-style:normal} .math b{color:var(--ink);font-weight:600} .math .hl{color:var(--down)}
.acts{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.insts{padding:var(--s3) var(--s5) var(--s5)}
.inst{display:grid;grid-template-columns:130px 1fr auto;gap:var(--s4);padding:7px 0;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.inst:last-child{border-bottom:none}
.inst b{color:var(--ink-2);font-weight:500}
.raw{margin-top:var(--s3)}
.raw summary{font-size:11.5px;color:var(--mute);cursor:pointer;list-style:none}
.raw summary::-webkit-details-marker{display:none}
.raw summary:before{content:"▸ ";color:var(--faint)}
.raw[open] summary:before{content:"▾ "}
.raw pre{font-family:var(--mono);font-size:11px;color:#6d7568;background:#080a07;border:1px solid var(--line-soft);
  border-radius:6px;padding:var(--s3);margin:var(--s2) 0 0;overflow-x:auto}

/* calendar */
.calwrap{display:grid;grid-template-columns:1fr 168px;gap:var(--s4)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dow{font-size:10px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;text-align:center;padding-bottom:4px;font-weight:600}
.day{border:1px solid var(--line-soft);border-radius:7px;padding:7px 8px;min-height:62px;position:relative;
  background:var(--panel);cursor:pointer;transition:border-color .12s}
.day:hover{border-color:#333c2e}
.day.void{background:transparent;border-color:transparent;cursor:default;min-height:0}
.day.future{background:#0c0e0b;border-style:dashed;border-color:#181d17;cursor:default;min-height:44px}
.day.today{border-color:var(--accent)}
.day.sel{border-color:var(--ink-2);box-shadow:0 0 0 1px var(--ink-2)}
.day .dn{font-family:var(--mono);font-size:11px;color:var(--mute)}
.day .dv{font-family:var(--mono);font-size:13px;margin-top:4px;letter-spacing:-.01em}
.day .dm{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:2px;display:flex;align-items:center;gap:4px}
.weekrail{display:flex;flex-direction:column;gap:5px}
.wk{border:1px solid var(--line-soft);border-radius:7px;padding:7px 9px;background:var(--panel)}
.wk .n{font-size:10.5px;color:var(--mute)}
.wk .v{font-family:var(--mono);font-size:13px;margin-top:3px}
.wk .d{font-size:10px;color:var(--faint);font-family:var(--mono);margin-top:2px}

/* equity chart */
.eqwrap{position:relative}
svg.eq{width:100%;display:block;overflow:visible;cursor:crosshair}
.eq-grid{stroke:#171c15;stroke-width:1}
.eq-zero{stroke:#39412f;stroke-width:1;stroke-dasharray:3 3}
.eq-lbl{font-family:var(--mono);font-size:9.5px;fill:var(--mute)}
.eqtip{position:absolute;pointer-events:none;background:#1a1e18;border:1px solid #2c3428;border-radius:7px;
  padding:8px 11px;font-size:11.5px;font-family:var(--mono);color:var(--ink-2);box-shadow:0 10px 28px rgba(0,0,0,.6);
  display:none;z-index:10;white-space:nowrap}
.eqtip b{color:var(--ink)}

/* filter bar */
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.fpill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;font-size:12.5px;color:var(--ink-2);background:#0c0f0b;cursor:pointer;transition:.12s}
.fpill:hover{border-color:#333c2e}
.fpill.act{border-color:rgba(224,96,42,.45);background:rgba(224,96,42,.08);color:var(--ink)}
.fpill b{font-family:var(--mono);font-weight:500;color:var(--accent)}
.fpill .x{color:var(--mute);font-size:14px;line-height:1}
.savedviews{display:flex;gap:var(--s2);flex-wrap:wrap}

/* pagination */
.pager{display:flex;align-items:center;gap:var(--s3);justify-content:center;padding:var(--s4);color:var(--mute);font-size:12.5px}
.pager .pg{font-family:var(--mono)}
.pgin{width:52px;text-align:center;background:#0b0e0a;border:1px solid var(--line);border-radius:5px;
  padding:4px;color:var(--ink);font-family:var(--mono);font-size:12px}

/* bot editor */
.botcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:var(--s2);overflow:hidden}
.bothead{display:grid;grid-template-columns:minmax(140px,1fr) 60px 1fr 1fr 1fr auto auto;gap:var(--s4);
  align-items:center;padding:var(--s4) var(--s5);cursor:pointer}
.bothead:hover{background:var(--panel-2)}
.botbody{display:none;border-top:1px solid var(--line-soft);background:var(--panel-3);padding:var(--s5)}
.botcard.open .botbody{display:block}
.editgrid{display:grid;grid-template-columns:300px 1fr;gap:var(--s6)}
.rungrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s4)}
.rungrid .field{margin-bottom:0}

/* pipeline / signal trace */
.pipe{display:flex;align-items:stretch;gap:0;margin:var(--s3) 0}
.stage{flex:1;border:1px solid var(--line);border-right:none;padding:9px 12px;background:#0c0f0b;position:relative}
.stage:first-child{border-radius:7px 0 0 7px}
.stage:last-child{border-right:1px solid var(--line);border-radius:0 7px 7px 0}
.stage .sn{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600}
.stage .sv{font-family:var(--mono);font-size:12px;margin-top:4px;color:var(--ink-2)}
.stage.pass{background:rgba(78,207,143,.05);border-color:rgba(78,207,143,.2)}
.stage.pass .sv{color:var(--up)}
.stage.block{background:rgba(240,82,106,.07);border-color:rgba(240,82,106,.3)}
.stage.block .sv{color:var(--down)}
.stage.skip{opacity:.4}

/* quarantine board */
.qcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--s4) var(--s5);margin-bottom:var(--s2)}
.qcard.q{border-left:2px solid var(--down)}
.qcard.w{border-left:2px solid var(--warn)}
.qcard.ok{border-left:2px solid var(--up)}
.qtop{display:grid;grid-template-columns:150px 1fr auto;gap:var(--s4);align-items:center}
.prog{height:6px;border-radius:3px;background:#1b211a;overflow:hidden;position:relative;margin-top:7px}
.prog i{display:block;height:100%;background:var(--up)}
.prog i.a{background:var(--warn)}

/* onboarding */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:30px 1fr auto;gap:var(--s4);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:none}
.step .mk{width:22px;height:22px;border-radius:50%;border:1.5px solid #2e3629;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;color:var(--mute)}
.step.done .mk{background:rgba(78,207,143,.14);border-color:rgba(78,207,143,.4);color:var(--up)}
.step.now .mk{border-color:var(--accent);color:var(--accent)}
.step .t{font-size:13px}
.step.done .t{color:var(--mute)}
.step .d{font-size:11.5px;color:var(--mute);margin-top:2px}

/* usage bars */
.usage{display:flex;flex-direction:column;gap:var(--s3)}
.ur{display:grid;grid-template-columns:150px 1fr 100px;gap:var(--s4);align-items:center;font-size:12.5px}
.ubar{height:6px;border-radius:3px;background:#1b211a;overflow:hidden}
.ubar i{display:block;height:100%;background:#455040}
.ubar i.hi{background:var(--warn)} .ubar i.max{background:var(--down)}

/* annotations */
.anno{position:relative;display:none}
body.notes .anno{display:inline-block}
.anno .pin{width:17px;height:17px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;font-family:var(--mono);vertical-align:middle;margin-left:7px;cursor:pointer}
.anno .bub{display:none;position:absolute;left:0;top:24px;z-index:70;width:300px;background:#1c1509;
  border:1px solid #4a3115;border-radius:8px;padding:var(--s3) var(--s4);font-size:12px;line-height:1.55;
  color:#e2c395;font-family:var(--sans);font-weight:400;letter-spacing:0;text-transform:none;
  box-shadow:0 12px 34px rgba(0,0,0,.65)}
.anno.open .bub{display:block}
.anno .bub b{color:#f0b46a}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(4,6,4,.72);backdrop-filter:blur(3px);z-index:80;display:none;
  align-items:center;justify-content:center;padding:var(--s5)}
.scrim.on{display:flex}
.modal{background:var(--panel);border:1px solid #2b3327;border-radius:12px;max-width:640px;width:100%;
  max-height:82vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.modalhead{padding:var(--s5) var(--s5) var(--s3);border-bottom:1px solid var(--line-soft)}
.modalhead h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em}
.modalhead p{margin:6px 0 0;font-size:12.5px;color:var(--mute)}
.modalbody{padding:var(--s5)}
.modalfoot{padding:var(--s4) var(--s5);border-top:1px solid var(--line-soft);display:flex;gap:var(--s2);justify-content:flex-end}
.diff{font-family:var(--mono);font-size:12.5px;line-height:1.9}
.diff .o{color:var(--mute);text-decoration:line-through}
.diff .n{color:var(--up)}

/* toast */
.toast{position:fixed;bottom:var(--s5);left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#1a1e18;border:1px solid #2c3428;border-radius:8px;padding:11px 18px;font-size:13px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);z-index:90;transition:.2s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.empty{padding:var(--s7) var(--s5);text-align:center}
.empty .t{font-size:14px;color:var(--ink-2)}
.empty .s{font-size:12.5px;color:var(--mute);margin-top:6px;max-width:420px;margin-left:auto;margin-right:auto}
.empty .a{margin-top:var(--s4)}
.view{display:none} .view.on{display:block}

@media (max-width:1080px){
  .editgrid{grid-template-columns:1fr}
  .calwrap{grid-template-columns:1fr}
  .weekrail{flex-direction:row;flex-wrap:wrap}
  .wk{flex:1;min-width:120px}
}
@media (max-width:860px){
  .grid2,.grid3{grid-template-columns:1fr}
  .posrow,.bothead{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .tiles{grid-template-columns:1fr 1fr!important}
  .pipe{flex-direction:column}
  .stage{border-right:1px solid var(--line);border-bottom:none}
  .stage:first-child{border-radius:7px 7px 0 0}
  .stage:last-child{border-radius:0 0 7px 7px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ═════════ v2 additions ═════════ */

/* paper mode — must be impossible to mistake for live */
.chip.paper{color:var(--violet);border-color:rgba(139,123,240,.4);background:rgba(139,123,240,.12)}
.paperbar{display:flex;align-items:center;gap:var(--s4);padding:9px var(--s5);
  background:rgba(139,123,240,.09);border-bottom:1px solid rgba(139,123,240,.3);font-size:12.5px;color:#c3b8f7}
.paperbar b{color:#d4cbff}
.paperbar .r{margin-left:auto;display:flex;gap:var(--s2)}
.botcard.paper{border-left:2px solid var(--violet)}
.botcard.paper .bothead{background:rgba(139,123,240,.035)}
.btn.paperbtn{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:600}
.btn.paperbtn:hover{background:#9a8bf5;border-color:#9a8bf5}
.strike{text-decoration:line-through;color:var(--faint)}

/* order state machine */
.osm{display:flex;align-items:center;gap:0;margin:var(--s3) 0}
.osm .st{flex:1;text-align:center;position:relative;padding:var(--s3) 6px}
.osm .st:before{content:"";position:absolute;top:20px;left:0;right:0;height:1px;background:var(--line)}
.osm .st:first-child:before{left:50%} .osm .st:last-child:before{right:50%}
.osm .st i{position:relative;display:block;width:11px;height:11px;border-radius:50%;margin:0 auto 9px;
  background:var(--bg);border:1.5px solid #2e3629;z-index:1}
.osm .st.done i{background:var(--up);border-color:var(--up)}
.osm .st.now i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(224,96,42,.18)}
.osm .st.fail i{background:var(--down);border-color:var(--down)}
.osm .st .n{font-size:11px;color:var(--mute)}
.osm .st.done .n,.osm .st.now .n{color:var(--ink-2)}
.osm .st .m{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:3px}

/* time-kill plane */
svg.plane{width:100%;display:block;overflow:visible}
.pl-ax{stroke:var(--line);stroke-width:1}
.pl-gr{stroke:#171c15;stroke-width:1}
.pl-lb{font-family:var(--mono);font-size:9.5px;fill:var(--mute)}
.pl-cap{font-family:var(--sans);font-size:10px;fill:var(--mute);letter-spacing:.04em}

/* parser bench */
.bench{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
textarea.inp{min-height:150px;resize:vertical;line-height:1.6;white-space:pre-wrap}
.parsed{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pf{display:grid;grid-template-columns:96px 1fr 78px;gap:var(--s3);padding:8px var(--s4);
  border-bottom:1px solid var(--line-soft);font-size:12.5px;align-items:center}
.pf:last-child{border-bottom:none}
.pf .k{color:var(--mute);font-size:11.5px}
.pf .v{font-family:var(--mono)}
.pf .c{font-family:var(--mono);font-size:11px;text-align:right}
.pf.miss .v{color:var(--faint)}
.verdict{padding:var(--s3) var(--s4);font-size:12.5px;border-radius:0 0 8px 8px}
.verdict.ok{background:rgba(78,207,143,.08);color:#8fe0b8;border-top:1px solid rgba(78,207,143,.22)}
.verdict.no{background:rgba(240,82,106,.08);color:#f4a3b0;border-top:1px solid rgba(240,82,106,.24)}
.msg{font-family:var(--mono);font-size:12px;line-height:1.7;background:#0a0d09;border:1px solid var(--line-soft);
  border-radius:8px;padding:var(--s3) var(--s4);white-space:pre-wrap;color:var(--ink-2)}
.samples{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}

/* countdown */
.cdbar{height:8px;border-radius:4px;background:#1b211a;overflow:hidden;margin-top:10px}
.cdbar i{display:block;height:100%;background:#455040;transition:width .3s}
.cdbar i.warn{background:var(--warn)} .cdbar i.crit{background:var(--down)}

/* mobile preview */
body.mobile main{max-width:400px;padding-left:var(--s3);padding-right:var(--s3);padding-bottom:88px}
body.mobile .topbar .nav{display:none}
body.mobile .tabbar{display:flex}
body.mobile .tiles{grid-template-columns:1fr 1fr!important}
body.mobile .grid2,body.mobile .grid3,body.mobile .editgrid,body.mobile .bench{grid-template-columns:1fr!important}
body.mobile .posrow,body.mobile .bothead{grid-template-columns:1fr 1fr;gap:var(--s3)}
body.mobile .calwrap{grid-template-columns:1fr}
body.mobile table{font-size:12px}
body.mobile .h1row .right{width:100%;margin-left:0}
body.mobile .pipe{flex-direction:column}
body.mobile .stage{border-right:1px solid var(--line);border-bottom:none}
body.mobile .osm{flex-wrap:wrap}
.tabbar{display:none;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:400px;z-index:60;
  background:rgba(10,12,10,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;
  font-size:10px;color:var(--mute)}
.tabbar button.on{color:var(--accent)}
.tabbar button span{font-size:16px;line-height:1}

/* misc */
.kvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s4)}
.rowsplit{display:flex;align-items:center;gap:var(--s4)}
.rowsplit .r{margin-left:auto;flex:none}
.danger-zone{border:1px solid #3a222a;border-radius:8px;padding:var(--s4);background:rgba(240,82,106,.03);margin-top:var(--s5)}

/* ═════════ v3 ═════════ */

/* item 6 — table vertical rhythm. th had no top padding, so every header
   sat flush against the card edge and the gap to row 1 read as an error. */
th{padding:var(--s4) var(--s4) var(--s3)!important;line-height:1.35}
.card>table>thead>tr>th:first-child,.card>table>tbody>tr>td:first-child{padding-left:var(--s5)}
.card>table>thead>tr>th:last-child,.card>table>tbody>tr>td:last-child{padding-right:var(--s5)}
td{line-height:1.45}
.card>table>tbody>tr:first-child>td{padding-top:var(--s4)}
.card>table>tbody>tr:last-child>td{padding-bottom:var(--s4)}
.tblnote{padding:var(--s4) var(--s5);font-size:11.5px;color:var(--mute);line-height:1.7;
  border-top:1px solid var(--line-soft)}
.card>table+.tblnote{margin-top:0}
th.num,td.num{padding-right:var(--s4)}
table.tight th{padding:var(--s3) var(--s3) var(--s2)!important}
table.tight td{padding:var(--s2) var(--s3)}

/* strategy editor */
.editor{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.rungrow{display:grid;grid-template-columns:44px 1fr 1fr 30px;gap:var(--s3);align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line-soft)}
.rungrow:last-child{border-bottom:none}
.rungrow .rn{font-size:11px;color:var(--mute);font-family:var(--mono)}
.rungrow input{padding:6px 9px}
.rungrow .del{color:var(--faint);text-align:center;cursor:pointer;font-size:15px}
.rungrow .del:hover{color:var(--down)}
.condrow{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:var(--s3) var(--s4);margin-bottom:var(--s2);
  background:#0c0f0b}
.cond{font-size:12.5px;color:var(--ink-2);line-height:1.7}
.cond .inl{display:inline-block;width:64px;background:#0b0e0a;border:1px solid var(--line);border-radius:5px;
  padding:3px 7px;color:var(--ink);font-family:var(--mono);font-size:12.5px;text-align:center;margin:0 3px}
.cond .inl:focus{outline:none;border-color:var(--accent)}
.cond b{color:var(--ink);font-weight:600}

/* auth */
.authwrap{max-width:420px;margin:var(--s7) auto;text-align:left}
.authcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--s6)}
.authmark{width:34px;height:34px;border-radius:50%;border:3px solid var(--accent);margin-bottom:var(--s5)}
.authcard h2{font-size:19px;font-weight:650;letter-spacing:-.02em;margin:0 0 6px}
.authcard p{font-size:13px;color:var(--mute);margin:0 0 var(--s5);line-height:1.6}
.authcard .btn.pri{width:100%;justify-content:center;text-align:center;padding:10px}
.authfoot{font-size:11.5px;color:var(--faint);margin-top:var(--s5);line-height:1.65;text-align:center}
.mailmock{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:var(--s4)}
.mailhead{padding:var(--s3) var(--s4);background:var(--panel-2);font-size:11.5px;color:var(--mute);
  border-bottom:1px solid var(--line);font-family:var(--mono)}
.mailbody{padding:var(--s4);font-size:12.5px;color:var(--ink-2);line-height:1.7}
.sessrow{display:grid;grid-template-columns:1fr auto auto;gap:var(--s4);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.sessrow:last-child{border-bottom:none}
.sessrow .d{font-size:11.5px;color:var(--mute);margin-top:2px;font-family:var(--mono)}

/* audit */
.auditrow{display:grid;grid-template-columns:118px 132px 1fr 150px;gap:var(--s4);align-items:start;
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line-soft);font-size:12.5px}
.auditrow:last-child{border-bottom:none}
.auditrow:hover{background:var(--panel-2)}
.auditrow .when{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.auditrow .who2{font-size:12px}
.auditrow .who2 .e{font-size:11px;color:var(--mute);font-family:var(--mono)}
.auditrow .what b{font-weight:600}
.chg{font-family:var(--mono);font-size:11.5px;margin-top:3px;color:var(--mute)}
.chg .o{color:var(--faint);text-decoration:line-through} .chg .n2{color:var(--up)}
.auditrow .meta2{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right}
.sev-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:7px;vertical-align:middle}

/* telegram, client-side */
.tgchan{display:grid;grid-template-columns:1fr auto auto;gap:var(--s4);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line-soft)}
.tgchan:last-child{border-bottom:none}
.methodpick{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s3) 0}
.method{border:1px solid var(--line);border-radius:9px;padding:var(--s4);cursor:pointer;transition:.12s;background:#0c0f0b}
.method:hover{border-color:#333c2e}
.method.on{border-color:var(--accent);background:rgba(224,96,42,.05)}
.method .mt{font-size:13px;font-weight:600}
.method .ms{font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.6}
.method .mw{font-size:11.5px;margin-top:8px;line-height:1.6}
@media (max-width:900px){.editor,.methodpick{grid-template-columns:1fr}
  .auditrow{grid-template-columns:1fr;gap:var(--s2)}.auditrow .meta2{text-align:left}}


.snap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:var(--s4)}
.snap>div{background:var(--panel);padding:var(--s4)}
.snap .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.snap .v{font-family:var(--mono);font-size:14px;margin-top:6px;word-break:break-word}
.snap .h{font-size:11px;color:var(--faint);margin-top:5px;font-family:var(--mono)}
.snap .h b{color:var(--warn);font-weight:500}
.who-pick{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.who-pick button{border:1px solid var(--line);border-radius:9px;padding:var(--s3) var(--s4);text-align:left;
  background:#0c0f0b;transition:.12s;min-width:170px}
.who-pick button:hover{border-color:#333c2e}
.who-pick button.on{border-color:var(--accent);background:rgba(224,96,42,.06)}
.who-pick .n{font-size:13px;font-weight:600}
.who-pick .e{font-size:11px;color:var(--mute);font-family:var(--mono);margin-top:3px}
.who-pick .c{font-size:11px;color:var(--faint);font-family:var(--mono);margin-top:5px}


/* ── Server-rendered adaptations ─────────────────────────────────────
   The prototype used JS for view switching and disclosure; here the
   server routes and native <details> do that work. */
.nav a{padding:6px 11px;border-radius:6px;color:var(--mute);font-size:13.5px;white-space:nowrap;
  text-decoration:none;transition:color .12s,background .12s;display:inline-block}
.nav a:hover{color:var(--ink-2);text-decoration:none}
.nav a.on{color:var(--ink);background:var(--panel-2)}
details > summary{list-style:none;cursor:pointer}

/* Collapsed settings did not look clickable. They were plain labels with a
   cursor change, which only shows up once the pointer is already on them —
   and on a phone there is no pointer at all. A client with settings they
   never found is a client whose bot is running on defaults they never chose.
   The affordance has to be visible before you touch it.
   summary.bothead and .raw summary opt out: they carry their own layout. */
details > summary:not(.bothead){display:flex;align-items:center;gap:8px}
details > summary:not(.bothead)::before{
  content:"";width:13px;height:13px;flex:none;
  background:currentColor;opacity:.5;
  -webkit-mask:var(--ico-gear) center/contain no-repeat;
          mask:var(--ico-gear) center/contain no-repeat}
details > summary:not(.bothead)::after{
  content:"";width:9px;height:9px;flex:none;margin-left:auto;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.45;
  transition:transform .18s ease}
details[open] > summary:not(.bothead)::after{transform:rotate(-135deg) translate(-3px,-3px)}
details > summary:not(.bothead):hover{color:var(--ink)}
details > summary:not(.bothead):hover::before,
details > summary:not(.bothead):hover::after{opacity:.95}
/* Sections that CREATE or EDIT rather than merely reveal get a pencil, so
   the difference is legible before opening. */
details > summary.edits::before{-webkit-mask:var(--ico-pencil) center/contain no-repeat;
                                        mask:var(--ico-pencil) center/contain no-repeat}
@media (prefers-reduced-motion:reduce){details > summary::after{transition:none}}
.raw summary::before,.raw summary::after{display:none}
details > summary::-webkit-details-marker{display:none}
.botcard details[open] > summary .chev{transform:rotate(90deg)}
.chev{transition:transform .12s ease}
.inline-form{display:inline-block}
.actions-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:var(--s4)}
.right{margin-left:auto}
.danger-zone{margin-top:var(--s5);padding:var(--s4);border:1px solid rgba(240,82,106,.35);border-radius:8px}
.runway{margin:10px 0 4px}
.runway-track{height:8px;border-radius:4px;background:var(--panel-3);overflow:hidden}
.runway-fill{height:100%;background:var(--mute)}
.runway-fill.warn{background:var(--warn)}
.runway-fill.crit{background:var(--down)}
.runway-meta{display:flex;justify-content:space-between;font-size:12px;margin-top:4px}
.calhead,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calhead{margin-bottom:6px}
.cal-cell{min-height:76px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--panel-3)}
.cal-day{font-size:11px;color:var(--mute)}
.cal-pnl{font-size:15px;margin-top:4px}
.cal-sub{font-size:10.5px;color:var(--mute);margin-top:2px}

/* Native disclosure meets the prototype's contracts: .bothead is a grid
   (a <summary> defaults to list-item) and .botbody is display:none until
   .botcard.open — which never exists without the prototype's JS. */
summary.bothead{display:grid}
.botcard details[open] .botbody{display:block}
details.botrow[open] .botbody{display:block}
.pad{padding:var(--s5)}
.grid2{display:grid;gap:var(--s5)}
.editgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:900px){.editgrid,.grid2{grid-template-columns:1fr!important}}
.tblnote{padding:var(--s4) var(--s5);font-size:11.5px;color:var(--mute);line-height:1.7;border-top:1px solid var(--line-soft)}

/* ── Banner placement ────────────────────────────────────────────────
   .alarm is authored as a full-bleed sticky bar between the topbar and
   main. Rendered inside main it overlapped the first card, so page-level
   banners are static blocks; the sticky treatment is reserved for the
   layout-level bar. */
main .alarm{position:static;border:1px solid rgba(240,82,106,.28);border-radius:var(--r);
  margin-bottom:var(--s5);align-items:flex-start}
main .alarm.paper{background:rgba(139,123,240,.08);border-color:rgba(139,123,240,.3);color:#c3b9ff}
main .alarm.paper b{color:var(--violet)}
main .alarm.warn{background:rgba(232,178,60,.08);border-color:rgba(232,178,60,.3);color:#e8cf9a}
main .alarm.warn b{color:var(--warn)}
main .finding:first-child{margin-top:0}
.ladderline{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-bottom:var(--s3)}
.lgd{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:11px;color:var(--mute);margin-top:var(--s3)}
.lgd span{display:flex;align-items:center;gap:6px}
.ladder{width:100%;height:auto;display:block}
.lg-cap{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;fill:var(--faint)}
.lg-txt.on{fill:var(--ink-2)}
.lg-tick{stroke:var(--line-soft);stroke-width:1}
rect.stopnow{fill:var(--down)}
rect.rung-armed,circle.rung-armed{fill:var(--up)}
rect.rung-idle,circle.rung-idle{fill:#2b3327}
.calwrap{display:grid;grid-template-columns:1fr 220px;gap:var(--s5);align-items:start}
@media (max-width:900px){.calwrap{grid-template-columns:1fr}}
.segm{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.segm button{padding:5px 11px;font-size:12px;color:var(--mute)}
.segm button.on{background:var(--panel-2);color:var(--ink)}
.wkcard{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.cal-cell.today{border-style:dashed;border-color:var(--accent)}
.cal-today{font-size:10.5px;color:var(--accent);font-family:var(--mono);margin-top:4px}
.eqtip{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--line);
  border-radius:6px;padding:8px 10px;font-size:11.5px;font-family:var(--mono);color:var(--ink-2);z-index:20;line-height:1.6}

/* Banners belong to the layout: full-bleed, directly under the nav. */
main .alarm{position:static;border:1px solid rgba(240,82,106,.28);border-radius:var(--r);margin-bottom:var(--s5)}
body > .alarm{position:sticky;top:53px;z-index:45;border-radius:0}
.units-lbl{font-size:10px;letter-spacing:.1em;color:var(--faint);margin-right:6px}
.rolebox{display:flex;align-items:center;gap:var(--s3);margin-left:auto}

/* Switches, not checkboxes, wherever a setting is on/off. */
.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw u{width:34px;height:19px;border-radius:99px;background:#2b3327;position:relative;transition:background .15s;flex:0 0 auto}
.sw u::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#8d968a;transition:transform .15s,background .15s}
.sw input:checked + u{background:rgba(78,207,143,.35)}
.sw input:checked + u::after{transform:translateX(15px);background:var(--up)}
.sw input:focus-visible + u{outline:2px solid var(--accent);outline-offset:2px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s5)}
@media (max-width:1100px){.grid3{grid-template-columns:1fr}}
.fpills{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.savedrow{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s4);
  border-top:1px solid var(--line-soft);padding-top:var(--s4)}
.exrow{margin-bottom:var(--s4)}
.exrow .exname{font-size:12.5px;display:inline-block}
.exrow .exn{float:right;color:var(--mute);font-size:12px;margin-left:var(--s4)}
.exrow .exv{float:right;font-size:12.5px}
.exbar{clear:both;height:3px;background:var(--panel-3);border-radius:2px;margin-top:6px;overflow:hidden}
.exbar i{display:block;height:100%}
.symrow{display:grid;grid-template-columns:1fr auto auto auto;gap:var(--s3);align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.symsep{text-align:center;color:var(--faint);padding:4px 0}
.lad{display:inline-block;padding:2px 8px;border-radius:99px;font-family:var(--mono);font-size:10.5px;
  color:var(--accent);background:rgba(224,96,42,.1);border:1px solid rgba(224,96,42,.32)}
.pager{display:flex;gap:var(--s3);align-items:center;padding:var(--s4) var(--s5);
  border-top:1px solid var(--line-soft);font-size:12px}
.btn.dis{opacity:.35;pointer-events:none}

/* ── Corrections, 19 Aug ─────────────────────────────────────────────
   1. The banner was translucent, so content scrolled *through* it and
      read as being on top. Solid background, above page content. */
body > .alarm{position:sticky;top:52px;z-index:55;border-radius:0;
  background:#241419;backdrop-filter:none}
body > .alarm.paper{background:#1b1830}
.topbar{z-index:60}

/* 2. Filter controls are pills, not full-width blocks. */
.fpills .sel{width:auto;min-width:180px;flex:0 0 auto;display:inline-block}
.fpills .sel select{width:100%}
.fpills .inp{flex:0 0 auto}
.fpills > *{margin:0}

/* 3. The ladder tag is a rounded rectangle, not an oval. */
.lad{border-radius:5px;padding:3px 7px}

/* 4. Exit rows: name, then result, then count — aligned, not floated. */
.exrow{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);
  align-items:baseline;margin-bottom:var(--s4)}
.exrow .exname{font-size:12.5px}
.exrow .exv{font-size:12.5px;font-family:var(--mono)}
.exrow .exn{font-size:12px;color:var(--mute);font-family:var(--mono);min-width:32px;text-align:right}
.exrow .exbar{grid-column:1/-1;height:3px;background:var(--panel-3);border-radius:2px;margin-top:2px;overflow:hidden}
.exrow .exbar i{display:block;height:100%}

/* 5. Calendar: rounder days, dashed today, dashed empty, selected day. */
.cal-cell{border-radius:10px;min-height:82px}
.cal-cell.empty-day{border-style:dashed;border-color:var(--line-soft);background:transparent}
.cal-cell.today{border-style:dashed;border-color:var(--accent);border-width:1px}
.cal-cell.sel{border-color:#e8ece7;border-style:solid;box-shadow:0 0 0 1px #e8ece7}
.cal-cell.clickable{cursor:pointer}
.cal-cell.clickable:hover{border-color:var(--ink-2)}
.cal-cell.clickable{cursor:pointer}
.wkcard{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.wkcard .wl{font-size:11px;color:var(--ink-2);margin-bottom:2px}
.wkcard .wv{font-family:var(--mono);font-size:14px}
.wkcard .ws{font-size:10.5px;color:var(--mute);font-family:var(--mono)}

/* Trade rows expand to their replay */
tr.xrow > td{background:var(--panel-3);padding:var(--s5)}
.xhead{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
td .chev{display:inline-block;transition:transform .12s ease}
td .chev.open{transform:rotate(90deg)}
.grid3 > .card{display:flex;flex-direction:column}
.grid3{align-items:stretch;margin-bottom:var(--s5)}
.eqtip{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--line);
  border-radius:6px;padding:9px 11px;font-size:11.5px;font-family:var(--mono);color:var(--ink-2);
  z-index:20;line-height:1.7;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.eqtip[hidden]{display:none}
.swatch{display:inline-block;width:8px;height:8px;border-radius:2px}

/* Trades panels: columns line up across rows, not per row. */
.exrow{grid-template-columns:1fr 78px 34px}
.exrow .exv{text-align:right}
.symrow{grid-template-columns:1fr 44px 64px 78px}
.symrow > div:nth-child(2),.symrow > div:nth-child(3){text-align:right}
.symrow > div:last-child{text-align:right}
.grid3 .card.pad{padding:var(--s5)}
.grid3 .lbl + .note{margin-top:2px;display:block}

/* New trade */
.ntgrid{display:grid;grid-template-columns:minmax(340px,460px) 1fr;gap:var(--s5);align-items:start}
@media (max-width:980px){.ntgrid{grid-template-columns:1fr}}
.prevrow{display:grid;grid-template-columns:1fr auto;gap:var(--s3);padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:12.5px}
.prevrow .k{color:var(--mute)}
.prevrow .v{font-family:var(--mono)}
.prevrow.hero .k{color:var(--ink-2);font-weight:600}
.prevrow.hero .v{font-size:15px}

/* Live poll — the page keeps itself current, so it has to look alive.
   The pulse is the only animation in the system and it earns its place:
   without it a frozen feed and a quiet market look identical. */
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up);
  margin-right:7px;vertical-align:middle;animation:zxpulse 2.4s ease-in-out infinite}
.pulse.stale{background:var(--warn);animation-duration:1s}
.pulse.dead{background:var(--down);animation:none}
@keyframes zxpulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.lp-mark,.lp-now,.pnl,.lp-pct,.lp-tostop{transition:color .35s ease}
.lp-up{color:var(--up)!important}
.lp-down{color:var(--down)!important}
/* The ladder's "now" marker slides to its new price rather than jumping,
   so a move is legible as a move. */
.ladder .nowmark,.ladder .now{transition:cx .6s ease,cy .6s ease,x .6s ease,y .6s ease,transform .6s ease}

/* Symbols — the recorded reason was a long machine string in a table cell,
   so it pushed the table past its container. It now sits on its own row
   under the record, where a sentence has room to be one. */
.whyrow td{border-top:none;padding-top:0;padding-bottom:12px}
.whyrow .why{display:block;font-size:12px;color:var(--ink-2);line-height:1.55;max-width:92ch}
.whyrow .raw{display:block;font-size:10.5px;color:var(--faint);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card>table{table-layout:auto;width:100%}
.card{overflow-x:auto}

/* A nav item carrying something that needs attention. Used only where the
   thing is time-bound and the client can act on it. */
.navdot{position:relative}
.navdot::after{content:'';position:absolute;top:2px;right:-7px;width:6px;height:6px;
  border-radius:50%;background:var(--down)}

/* Vertical rhythm between stacked top-level blocks.
   The most visible defect in the original app was arbitrary vertical gaps.
   Rather than wrapping every card in a section by hand — which is how
   unbalanced markup gets introduced — consecutive top-level blocks take
   their gap from the spacing scale here, once, for every page. */
main > .card + .card,
main > .card + .sec,
main > .sec + .card,
main > .card + form,
main > form + .card,
main > .h1row + .card{margin-top:var(--s5)}
main > .sechead{margin-top:var(--s6)}
main > .sechead:first-of-type{margin-top:var(--s5)}

/* The live cursor slides to its new price rather than jumping, so a move
   reads as a move. Group transform is what the poller sets. */
svg.ladder .lg-now,svg.ladder .lg-peak,svg.ladder .lg-stop{transition:transform .6s cubic-bezier(.4,0,.2,1)}
svg.ladder .lg-span{transition:x .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1)}

/* A unit the current page cannot express. Marked rather than silently
   behaving like USD, which reads as a broken switch. */
.units button.dis{opacity:.35;cursor:help}

/* A switch whose label wraps to a second line. The control aligns to the
   first line of text rather than to the centre of the whole block, and it
   keeps its own width — inline overrides on .sw were fighting the
   component's own flex rules and pushing the knob out of its track. */
/* The track is separated by its own margin rather than by the parent's flex
   gap. The gap was being consumed by the absolutely-positioned input, which
   left the knob sitting against the first word of a wrapped label. */
.sw.stacked{align-items:flex-start;gap:0}
.sw.stacked u{margin:1px 12px 0 0;flex:0 0 34px;width:34px}
.sw.stacked > span{flex:1 1 auto;line-height:1.45;padding-top:1px}

/* ── The switch knob, resolved ───────────────────────────────────────────
   v5.css carries TWO .sw blocks — one inherited from the old stylesheet and
   one from the prototype. Both survive, and on a checked switch both apply
   to the same pseudo-element:

       .sw input:checked+u:after   { left: 17px }              (old)
       .sw input:checked + u::after{ transform: translateX(15px) } (prototype)

   `:after` and `::after` are the same element, so the offsets ADD. The knob
   lands 32px into a 34px track and hangs 13px past its right edge — which
   is exactly what the screenshots show, on every switch in the app, not
   just the stacked one.

   Stated as one rule with both properties set, so neither block can
   contribute half an answer. */
.sw input + u::after{left:2px;transform:none}
.sw input:checked + u::after{left:2px;transform:translateX(15px);background:var(--up)}
.sw input:checked + u{background:rgba(78,207,143,.35)}

/* The rung the trade is working toward. Everything else on the ladder is
   either done or inert; without this the client can see what exists but not
   what is about to happen, which is the one thing they are watching for.
   A slow breathe, not a flash — this is anticipation, not an alert, and an
   alert on a chart nobody needs to act on is the engagement bait this
   product refuses everywhere else. */
.rung-next{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.9;
  animation:rungbreathe 2.4s ease-in-out infinite}
@keyframes rungbreathe{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.rung-next{animation:none;opacity:.95}}

/* Today's shortcut grid. Each tile carries the one figure that answers
   "do I need to go there" — a grid that only repeated the nav two
   centimetres above it would be decoration, and decoration on a page whose
   job is "is anything wrong" is worse than empty space. */
.shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.shortcut{display:block;padding:var(--s4);border:1px solid var(--line);border-radius:12px;
  background:var(--panel);text-decoration:none;color:inherit;
  transition:border-color .15s ease,background .15s ease}
.shortcut:hover{border-color:var(--line-2);background:var(--panel-2)}
.shortcut .ico{display:block;color:var(--mute);margin-bottom:var(--s3)}
.shortcut .ico svg{width:18px;height:18px;display:block}
/* The width/height attributes on the element carry the same size. An SVG
   with only a viewBox and no intrinsic size fills its container, so a
   stylesheet that has not arrived — a stale cache, a failed request — turns
   an 18px icon into a full-width graphic. Belt and braces, because the
   failure is silent on the server and enormous on the screen. */
.shortcut:hover .ico{color:var(--ink-2)}
.shortcut .t{display:block;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.shortcut .v{display:block;font-family:var(--mono);font-size:20px;color:var(--ink);margin-top:4px}
.shortcut .m{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.shortcut.muted .v{color:var(--ink-2)}
@media (max-width:900px){.shortcuts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.shortcuts{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .shortcut{padding:var(--s3)}.shortcut .v{font-size:17px}}
@media (prefers-reduced-motion:reduce){.shortcut{transition:none}}

/* choice cards — the ladder wizard's questions. A radio drawn as a card:
   the whole card is the target, the dot mirrors .chk, the checked card
   takes the accent. Native input stays in the DOM for keyboard and forms. */
.qhead{display:flex;align-items:center;gap:10px;margin:var(--s5) 0 var(--s2);font-size:12.5px;color:var(--ink);font-weight:600}
.qhead em{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:11px;color:var(--accent);border:1px solid rgba(224,96,42,.45);background:rgba(224,96,42,.08)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2)}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .c{position:relative;display:flex;flex-direction:column;gap:3px;height:100%;padding:11px 12px 11px 36px;
  border:1px solid var(--line);border-radius:9px;background:#0b0e0a;transition:border-color .12s,background .12s}
.choice .c:before{content:"";position:absolute;left:12px;top:13px;width:14px;height:14px;border-radius:50%;
  border:1px solid #2e3629;background:#0b0e0a;transition:.12s}
.choice .c b{font-size:13px;font-weight:600;color:var(--ink-2)}
.choice .c span{font-size:11.5px;line-height:1.45;color:var(--mute)}
.choice .c .bars{display:flex;gap:3px;margin-top:6px}
.choice .c .bars i{width:16px;height:4px;border-radius:2px;background:#252c22;transition:.12s}
.choice:hover .c{border-color:#333c2e;background:var(--panel-2)}
.choice input:checked+.c{border-color:var(--accent);background:rgba(224,96,42,.07);box-shadow:inset 0 0 0 1px rgba(224,96,42,.35)}
.choice input:checked+.c b{color:var(--ink)}
.choice input:checked+.c:before{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 3.5px,#0b0e0a 4.5px)}
.choice input:checked+.c .bars i.on{background:var(--accent)}
.choice .c .bars i.on{background:#3a4535}
.choice input:focus-visible+.c{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){.choices{grid-template-columns:1fr}}

/* ── Share a trade: the one button meant to be noticed ─────────────────── */
.btn.share{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 12px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#fff;border:0;border-radius:999px;
  background:linear-gradient(135deg,#e0602a 0%,#f08a3c 55%,#e8b23c 100%);
  box-shadow:0 0 0 1px rgba(240,138,60,.35),0 4px 18px -4px rgba(224,96,42,.55);overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease}
.btn.share svg{width:15px;height:15px;flex:none}
.btn.share::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.btn.share:hover{color:#fff;background:linear-gradient(135deg,#ec6c33 0%,#f59848 55%,#f0c04f 100%);
  transform:translateY(-1px);box-shadow:0 0 0 1px rgba(240,138,60,.5),0 8px 24px -6px rgba(224,96,42,.7)}
.btn.share:hover::after{transform:translateX(120%)}
.btn.share:focus-visible{outline:2px solid #f0c04f;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn.share,.btn.share::after{transition:none}.btn.share:hover{transform:none}}

/* ── Points leaderboard ────────────────────────────────────────────────── */
.lb-hero{position:relative;border:1px solid var(--line);border-radius:14px;padding:22px 24px;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,rgba(224,96,42,.18) 0%,transparent 55%),var(--panel)}
.lb-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#f08a3c;font-weight:700}
.lb-title{font-size:28px;margin:6px 0 4px}
.lb-meta{color:var(--mute);font-size:12.5px}
.lb-prizes{margin-top:12px;font-size:13px;color:var(--ink-2)}
.lb-prizes b{color:#e8b23c;margin-right:6px}
.lb-table td{vertical-align:middle}
.lb-rank{display:inline-block;min-width:26px}
.lb-podium .lb-rank{width:26px;height:26px;line-height:26px;border-radius:50%;text-align:center;font-weight:700;color:#0a0c0a}
.lb-p1 .lb-rank{background:#e8b23c}.lb-p2 .lb-rank{background:#b9c0c7}.lb-p3 .lb-rank{background:#c98452}
.lb-me td{background:rgba(224,96,42,.08)}
.lb-gap td{height:10px;padding:0;border:0;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px) center/100% 1px no-repeat}

/* ── Promotion: campaign strip, guest bar, hot nav link ────────────────── */
.nav a.navhot{color:#f0a24a}
.promo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:12px 24px 0;padding:10px 14px;border-radius:10px;font-size:13px;color:var(--ink-2);
  background:linear-gradient(90deg,rgba(224,96,42,.16),rgba(232,178,60,.08));border:1px solid rgba(240,138,60,.28)}
.promo b{color:var(--ink)}
.guestbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.guestbar .gb-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px}
.guestbar .gb-links a:not(.btn){color:var(--ink-2)}
.guestbar .gb-links a.navhot{color:#f0a24a}

.sharerow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sharerow .sel{flex:0 0 220px;width:220px}
.sharerow .chk{padding:0}

/* ── Free trial: last-week offer and after-trial banner ─────────────────── */
.trialbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:12px 24px 0;padding:10px 14px;border-radius:10px;font-size:13px;color:var(--ink-2);
  background:linear-gradient(90deg,rgba(78,207,143,.14),rgba(78,207,143,.04));border:1px solid rgba(78,207,143,.30)}
.trialbar b{color:var(--ink)}
.trialbar.ended{background:linear-gradient(90deg,rgba(232,178,60,.14),rgba(232,178,60,.04));border-color:rgba(232,178,60,.32)}

/* ── Plans: monthly / annual switch and plan cards ──────────────────────── */
.cyclesw{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;margin-bottom:var(--s4)}
.cyclesw label{cursor:pointer}
.cyclesw input{position:absolute;opacity:0;width:0;height:0}
.cyclesw span{display:block;padding:7px 14px;border-radius:7px;font-size:13px;color:var(--mute)}
.cyclesw em{font-style:normal;color:var(--up);font-weight:600;margin-left:4px}
.cyclesw input:checked+span{background:var(--accent);color:#fff}
.cyclesw input:checked+span em{color:#fff}
.cyclesw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.plangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.plancard{position:relative;display:block;cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--panel-2);transition:border-color .12s}
.plancard:hover{border-color:#333c2e}
.plancard>input{position:absolute;opacity:0;width:0;height:0}
.plancard:has(>input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.plancard:has(>input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pc-body{display:flex;flex-direction:column;gap:4px}
.pc-name{font-weight:650;color:var(--ink)}
.pc-bots{font-size:12px;color:var(--mute)}
.pc-body .pm,.pc-body .pa{font-size:13px;color:var(--ink-2)}
.pc-body em{font-style:normal;color:var(--up);font-weight:600}
.planform .pa{display:none}
.planform:has(input[name=cycle][value=annual]:checked) .pa{display:block}
.planform:has(input[name=cycle][value=annual]:checked) .pm{display:none}

/* ── Add funds: network picker ──────────────────────────────────────────── */
.netgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.netcard{position:relative;display:block;cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--panel-2)}
.netcard>input{position:absolute;opacity:0;width:0;height:0}
.netcard>span{display:flex;flex-direction:column;gap:2px;font-size:13px}
.netcard .thin{font-size:11.5px}
.netcard:has(>input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.netcard:has(>input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ── Floating feedback button → official Telegram group ─────────────────── */
.fbfab{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px 10px 12px;border-radius:999px;background:#229ED9;color:#fff;font-size:13px;font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.35);text-decoration:none}
.fbfab:hover{background:#1c8cc2;color:#fff;text-decoration:none}
.fbfab svg{width:18px;height:18px}
.fbfab:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){.fbfab span{display:none}.fbfab{padding:12px}}