:root{--bg:#0b0f14;--card:#121922;--line:#1f2a36;--txt:#e6edf3;--mut:#8b9bb0;--grn:#22c55e;--red:#ef4444;--amb:#f59e0b;--blu:#60a5fa;--org:#fb923c;--pur:#a78bfa;--r:12px;--hdr:48px;--ftr:26px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.35 -apple-system,BlinkMacSystemFont,"Inter",Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blu)}
main{padding:10px 10px 120px;max-width:720px;margin:0 auto}
h1{font-size:20px;margin:0 0 8px}h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:10px;position:relative}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.tile{border-radius:var(--r);padding:9px 8px 26px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden;cursor:pointer}
.tiles.small .tile{padding:6px 6px 22px}.tiles.small .b{font-size:15px}
.tile.g{border-color:rgba(34,197,94,.6);background:linear-gradient(180deg,rgba(34,197,94,.14),var(--card))}.tile.r{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg,rgba(239,68,68,.14),var(--card))}.tile.a{border-color:rgba(245,158,11,.6);background:linear-gradient(180deg,rgba(245,158,11,.14),var(--card))}
.tile .n{font-size:11px;color:var(--mut);letter-spacing:.06em}.tile .b{font-size:19px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}.tile .p{font-size:13px;font-weight:600}.tile canvas{position:absolute;left:0;right:0;bottom:0;width:100%;height:26px;opacity:.9}
.tile.wait .b{font-size:13px;color:var(--mut)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.sp{flex:1}
.chip{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#1b2634;color:var(--txt);cursor:default}
.chip.up,.chip.SYNC,.chip.ok{background:rgba(34,197,94,.2);color:var(--grn)}.chip.down,.chip.bad{background:rgba(239,68,68,.2);color:var(--red)}.chip.warn{background:rgba(245,158,11,.22);color:var(--amb)}
.chip.HUMAN{background:rgba(96,165,250,.2);color:var(--blu)}.chip.MACHINE{background:rgba(251,146,60,.2);color:var(--org)}.chip.SHADOW_ONLY{background:rgba(167,139,250,.2);color:var(--pur)}.chip.NONE{color:var(--mut)}
.big{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.mut{color:var(--mut)}.sm{font-size:12px}.num{font-variant-numeric:tabular-nums;text-align:right}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mut);margin-right:4px;vertical-align:middle}.dot.ok{background:var(--grn)}.dot.bad{background:var(--red)}
canvas.chart{width:100%;height:170px;display:block}canvas.ladder{width:100%;display:block;cursor:crosshair}
.cwrap{position:relative}.tip{position:absolute;left:50%;transform:translateX(-50%);background:#0e141bf2;border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12px;pointer-events:none;max-width:290px;z-index:5}
.grid{display:grid;gap:4px 6px;font-size:13px}.grid .h{color:var(--mut);font-size:11px;letter-spacing:.03em}.grid div{font-variant-numeric:tabular-nums;text-align:right}.grid div.rl{text-align:left}
.feed .it{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:7px 0;border-top:1px solid var(--line);align-items:center;cursor:pointer}.feed .it:first-child{border-top:0}.feed .it{grid-template-columns:1fr auto}.feedrobot>summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 0}.feedrobot+.feedrobot{border-top:1px solid var(--line)}.morning p{margin:4px 0}
.pos{color:var(--grn)}.neg{color:var(--red)}
details summary{cursor:pointer;font-weight:600}
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:13px}.kv div:nth-child(2n){text-align:right;font-variant-numeric:tabular-nums}
.kv2{display:grid;grid-template-columns:auto 1fr;gap:3px 10px}.kv2 b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.i{background:none;border:0;color:var(--blu);font-size:13px;padding:0 3px;cursor:pointer;vertical-align:baseline}
.explain{grid-column:1/-1;background:#0e1a29;border:1px solid #23415f;border-radius:8px;padding:8px 10px;margin:6px 0;font-size:12.5px;font-weight:400}.explain p{margin:4px 0}
.hu p{margin:5px 0;font-size:13.5px}
.nb{display:grid;grid-template-columns:28px 64px 1fr auto;gap:6px;align-items:center;margin-top:6px}.nb .tf{font-weight:700;font-size:12px}.nb .bar{height:6px;background:#1b2634;border-radius:3px;overflow:hidden}.nb .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--grn),var(--amb),var(--red))}.nbr{margin:2px 0 0 34px}
.seg{background:#1b2634;color:var(--mut);border:0;border-radius:7px;padding:5px 9px;font-size:12px;font-weight:600;cursor:pointer}.seg.on{background:#2b3a4d;color:var(--txt)}
.plan .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px}.plan label{display:flex;flex-direction:column;font-size:11px;color:var(--mut)}.plan input{padding:6px 7px;font-size:14px}
.plan .pout{margin-top:6px}.warn{color:var(--amb);margin-top:3px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 12px;margin:8px 0}.sgrid label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut)}.sgrid label.bool{flex-direction:row;align-items:center;justify-content:space-between}.sgrid input[type=checkbox]{width:20px;height:20px}
.savebar{position:sticky;top:calc(var(--hdr) + 4px);z-index:8;display:flex;gap:8px;align-items:center;background:#2a2213;border:1px solid var(--amb);color:var(--amb);border-radius:10px;padding:8px 10px;margin-bottom:10px;font-weight:700}
input,textarea,select{width:100%;background:#0e141b;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:9px;font-size:16px}
button.pri{background:var(--grn);color:#000;border:0;border-radius:8px;padding:9px 14px;font-weight:700;font-size:14px;cursor:pointer}button.sec{background:#1b2634;color:var(--txt);border:0;border-radius:8px;padding:8px 11px;font-weight:600;cursor:pointer}button.dng{background:var(--red);color:#fff;border:0;border-radius:8px;padding:8px 11px;font-weight:600;cursor:pointer}
button.sm{font-size:12px;padding:5px 9px}
/* header + footer */
#hdr{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:8px;height:var(--hdr);padding:0 10px;background:#0e141b;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap}
#hdr .brand{font-size:15px}.status{display:flex;gap:7px;align-items:center;background:#111a24;border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:5px 10px;font-size:11px;cursor:pointer;min-width:0}
.status .sd{color:var(--mut);display:none}.status .smsg{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.hbtns{display:flex;gap:6px;margin-left:auto}.hbtn{background:#1b2634;color:var(--txt);border:0;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:600;cursor:pointer}.hbtn.up{background:rgba(34,197,94,.22);color:var(--grn)}.hbtn.down{background:rgba(239,68,68,.22);color:var(--red)}
#tabsTop{display:none}
#statusPanel{position:fixed;top:calc(var(--hdr) + 6px);left:10px;right:10px;max-width:760px;margin:0 auto;z-index:16;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;max-height:70vh;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.5)}
#ftr{font-size:11px;color:var(--mut);text-align:center;padding:6px 10px calc(70px + env(safe-area-inset-bottom));line-height:1.4}
#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#0e141b;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:12}
.tabs button{flex:1;background:none;border:0;color:var(--mut);font-size:12px;padding:8px 6px;border-radius:8px;cursor:pointer}.tabs button.on{color:var(--txt);background:#1b2634}
#noteBtn{position:fixed;right:14px;bottom:calc(66px + env(safe-area-inset-bottom));background:var(--blu);color:#000;border:0;border-radius:999px;padding:12px 16px;font-weight:700;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.5);z-index:11;cursor:pointer}
#sheet{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:flex-end;justify-content:center;z-index:20}#sheet.hidden,#login.hidden,.hidden{display:none!important}
#sheet .in{background:var(--card);border-top-left-radius:16px;border-top-right-radius:16px;width:100%;max-width:720px;padding:14px 14px calc(14px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto;border:1px solid var(--line)}
#login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:30}#login form{width:300px;display:flex;flex-direction:column;gap:10px}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(120px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:#1d2b3a;border:1px solid #2f4a66;color:var(--txt);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:opacity .4s}.toast.out{opacity:0}
#banners .bn{padding:7px 12px;font-weight:700;font-size:13px;text-align:center}.bn.red{background:var(--red);color:#fff}.bn.amb{background:var(--amb);color:#000}
table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:5px 4px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}th{color:var(--mut);font-weight:600;font-size:11px}td:first-child,th:first-child{text-align:left}
label.f{display:block;font-size:12px;color:var(--mut);margin:8px 0 3px}
.lines p{margin:4px 0}.lnote{margin-top:4px}
.legal{max-width:760px;padding:16px}.legal li{margin:6px 0}
/* desktop: the page never scrolls. Live is three panels that each scroll inside themselves; every other tab is one scrolling column. */
body.desktop{overflow:hidden;height:100vh;display:flex;flex-direction:column}
body.desktop #hdr,body.desktop #banners{flex:0 0 auto}
body.desktop #tabs,body.desktop #noteBtn{display:none}
body.desktop #tabsTop{display:flex;flex:0 0 auto}body.desktop #tabsTop button{flex:0 0 auto;padding:6px 10px}
/* desktop header: two rows. Row 1 = brand, status chip (shrinks, never overlaps), buttons. Row 2 = the tabs. Wraps again on narrow windows. */
body.desktop{--hdr:84px}
body.desktop #hdr{flex-wrap:wrap;height:auto;min-height:0;padding:6px 10px;row-gap:4px;overflow:visible;white-space:normal}
body.desktop #hdr .brand{flex:0 0 auto;order:1}
body.desktop #hdr .status{order:2;flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap}
body.desktop #hdr .hbtns{order:3;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
body.desktop #hdr #tabsTop{order:4;flex:1 1 100%;flex-wrap:wrap;overflow:visible}
body.desktop .status .sd{display:inline}
body.desktop #ftr{flex:0 0 auto;height:var(--ftr);padding:5px 10px;background:#0e141b;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.desktop main{flex:1 1 auto;min-height:0;max-width:none;width:100%;margin:0;overflow:auto;padding:8px max(10px,calc((100% - 900px)/2)) 16px}
body.desktop main.livewrap{display:flex;flex-direction:column;overflow:hidden;padding:8px 10px}
body.desktop .livewrap>.rn{flex:0 0 auto}
body.desktop .grid3{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(330px,1fr) minmax(420px,1.25fr) minmax(360px,1fr);grid-template-rows:minmax(0,1fr);gap:10px}
body.desktop .col{position:relative;min-height:0;min-width:0;overflow:auto;padding-right:2px;overscroll-behavior:contain}
body.desktop .col.ctr{display:flex;flex-direction:column}body.desktop .col.ctr>*{flex:0 0 auto}
body.desktop .card{margin-bottom:8px;padding:8px}
body.desktop .tiles{margin-bottom:8px}
body.desktop #toasts{bottom:40px}
/* phones: header wraps; status message gets its own full-width row */
body:not(.desktop) #hdr{flex-wrap:wrap;height:auto;padding:6px 10px;row-gap:6px;overflow:visible;white-space:normal}
body:not(.desktop) .status{order:5;flex:1 1 100%;justify-content:center}
body:not(.desktop) .hbtns{flex-wrap:wrap;justify-content:flex-end}
body:not(.desktop) #statusPanel{top:96px}

/* V3 */
.rn{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:7px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:13.5px}.rn .rnt{flex:1 1 300px}
button.chipbtn{display:inline-block;background:#1b2634;color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-size:12px;font-weight:600;cursor:pointer;margin:2px 4px 2px 0;font-family:inherit}
button.chipbtn.low{color:var(--mut);background:#151c25}button.chipbtn i{font-style:normal;font-size:10px;text-transform:uppercase;border:1px solid var(--mut);border-radius:6px;padding:0 4px;margin-left:3px}
.chip.chipbtn{border:0;margin:0;padding:3px 8px}
.chiprow{display:flex;gap:8px;align-items:baseline;margin:4px 0}.chiprow>span{flex:0 0 74px}.chips{display:flex;flex-wrap:wrap}
.plan details.pmore summary{cursor:pointer;color:var(--mut);margin:6px 0}
.bt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;max-width:250px}.why{font-size:11px;color:var(--mut);line-height:1.3}
button:disabled{opacity:.45;cursor:not-allowed}
.hint{display:block;color:var(--red);font-size:12px;font-weight:600}.hint:empty{display:none}
input.bad,select.bad{border-color:var(--red)}
.impact{font-size:12px;color:var(--amb)}.impact span{display:block}.impact:empty{display:none}
.scard>summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-weight:400}.scard>summary::-webkit-details-marker{display:none}.scard>summary::before{content:"▸";color:var(--mut)}.scard[open]>summary::before{content:"▾"}
.scard>summary b{font-size:15px}
details.more{margin-top:8px}details.more>summary{color:var(--mut);font-weight:600}
.fld{display:flex;flex-direction:column;gap:3px}.fld .lab{font-size:12px;color:var(--mut)}
.setups{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 10px}.setups label.bool{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--mut)}
.presets3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 4px}.presets3 .bt{max-width:none}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}
.vrow{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}.vbtns{display:flex;gap:12px;flex-wrap:wrap}.lab-tiles{margin-bottom:6px}
.rules .rule{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:13px}.rule input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;padding:0}
.subtabs{margin-bottom:8px}
details.tbl summary,details.ep summary{cursor:pointer}details.ep{border-top:1px solid var(--line);padding:6px 0}
svg .sv-l{fill:var(--mut);font-size:10px}svg .sv-v{fill:var(--txt);font-size:10px}svg .sv-g{fill:var(--grn)}svg .sv-r{fill:var(--red)}svg .sv-z{stroke:#3a4a5e;stroke-width:1}
.chip.VARIANT{background:rgba(45,212,191,.2);color:#2dd4bf}
.savebar .bt{flex-direction:row;align-items:center}.savebar .why{display:none}

/* V3.1 */
.poscard.plong{border-left:3px solid var(--grn)}.poscard.pshort{border-left:3px solid var(--red)}
.leg{display:flex;flex-wrap:wrap;gap:2px 10px;padding:4px 0;border-top:1px solid var(--line)}.legs summary{margin-top:6px;color:var(--mut);font-weight:600}
.ghost{margin-top:4px}
.coach{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:6px;padding:6px 8px;border-radius:10px;background:#0e1a29;border:1px solid #23415f;font-size:13px}.coach .ctext{flex:1 1 180px}.coach .cbtn{display:flex;gap:4px}
button.chipbtn.ok{color:var(--grn)}button.chipbtn.done{background:rgba(34,197,94,.2);color:var(--grn)}
.hedge{border-left:3px solid var(--pur)}.robots details.rb{padding:4px 0;border-top:1px solid var(--line)}.robots details.rb:first-of-type{border-top:0}
.bn.calm{background:#16283a;color:var(--txt);font-weight:600}.bn.calm .chipbtn{margin:0 0 0 8px}
.cx{border-bottom:1px dotted var(--blu);cursor:pointer}.cx:focus-visible{outline:1px solid var(--blu)}
.chip.lvl{font-size:10px;text-transform:uppercase;letter-spacing:.04em;background:#1b2634;color:var(--mut)}.chip.lvl-Advanced{color:var(--pur)}.chip.lvl-Useful{color:var(--blu)}.chip.lvl-Basic{color:var(--grn)}
.cc p,.explain p{margin:5px 0}
.plan small.fh{font-size:10.5px;color:var(--mut);font-weight:400;line-height:1.25;margin-top:2px}
.plan .pgrid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.plan .acct,.plan .comb{margin-top:6px;padding:6px 8px;border-radius:8px;background:#0e1a29;border:1px solid #23415f}.plan .acct.neg{color:var(--red)}
.plan .psave{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.swax svg{display:block;max-height:250px}.swax .lvr{fill:rgba(239,68,68,.28)}.swax .lvg{fill:rgba(34,197,94,.28)}.swax .lv{cursor:pointer}
.swax .ax-px{stroke:var(--txt);stroke-width:1.5}.ax-en{stroke:var(--blu);stroke-width:1.5}.ax-st{stroke:var(--red);stroke-width:1.5}.ax-tg{stroke:var(--grn);stroke-width:1.5}
.swwhy{min-height:30px;margin-bottom:4px}
.lexp{margin:2px 0 4px;line-height:1.3}
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:6px}.sprint{display:flex;gap:10px;align-items:flex-start}.sprint .sbody{min-width:0}
.ring .rg-bg{fill:none;stroke:#1b2634;stroke-width:7}.ring .rg-fg{fill:none;stroke-width:7;stroke-linecap:round}.ring .rg-fg.ok{stroke:var(--grn)}.ring .rg-fg.warn{stroke:var(--amb)}.ring .rg-t{fill:var(--txt);font-size:13px;font-weight:700}
.proofline{margin:6px 0;font-weight:600}.skim{margin:8px 0 4px}
.chip.st-WATCHING{background:rgba(96,165,250,.2);color:var(--blu)}.chip.st-TRIGGERED{background:rgba(34,197,94,.2);color:var(--grn)}.chip.st-MISSED{background:rgba(245,158,11,.22);color:var(--amb)}.chip.st-EXPIRED{color:var(--mut)}.chip.st-CLOSED{background:#2b3a4d}
.recall{margin-top:8px;padding:8px;border-radius:10px;background:#0e1a29;border:1px solid #23415f}.recall .note{margin:0 0 6px;font-size:14px}
.pathsvg{display:block;margin:6px 0}.pathsvg .pl-before{stroke:var(--mut);stroke-width:1.5}.pathsvg .pl-since{stroke:var(--blu);stroke-width:2}
.plstats div{margin:2px 0}

/* V3.2 */
:root{--pbh:56px}
/* sticky price bar: always visible. Desktop: part of the fixed frame (44px). Phone: sticks to the top while the page scrolls (48px). */
#pbar{position:sticky;top:0;z-index:14;background:#0e141b;border-bottom:1px solid var(--line)}
#pbar:empty{display:none}
#pbar .pb{display:flex;align-items:center;gap:8px 12px;height:calc(var(--pbh) - 1px);padding:0 10px;overflow:hidden;cursor:default}
#pbar .pbl{display:flex;flex-direction:column;justify-content:center;flex:0 0 auto;line-height:1.1}
#pbar .px{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.05}
body.desktop #pbar .px{font-size:34px}
#pbar .ch{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
#pbar .pbr{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;align-content:center;flex:1 1 auto;min-width:0;max-height:calc(var(--pbh) - 6px);overflow:hidden}
#pbar .pc{display:inline-flex;align-items:center;gap:4px;padding:0 7px;height:19px;border-radius:999px;font-size:11px;font-weight:700;background:#1b2634;color:var(--txt);white-space:nowrap;border:0;font-family:inherit}
#pbar .pc small{font-size:10px;color:var(--mut);font-weight:600}
#pbar button.pc{cursor:pointer}#pbar button.pc:focus-visible{outline:1px solid var(--blu)}
#pbar .pc.ok{background:rgba(34,197,94,.2);color:var(--grn)}#pbar .pc.warn{background:rgba(245,158,11,.22);color:var(--amb)}#pbar .pc.bad{background:rgba(239,68,68,.2);color:var(--red)}
#pbar .feed{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--mut)}
#pbar .feed .dot{margin:0}.dot.warn{background:var(--amb)}
body.desktop{--pbh:64px}
body.desktop #pbar{flex:0 0 auto}
body.desktop .savebar{top:4px}
body:not(.desktop) #hdr{position:static}
body:not(.desktop) .savebar{top:calc(var(--pbh) + 4px)}
@media (max-width:520px){#pbar .px{font-size:28px}#pbar .pb{gap:6px 8px}#pbar .feed span.fw{display:none}}
/* R3: the sessions row needs a third line of chips on a phone: slimmer chips, same 56px bar */
@media (max-width:520px){#pbar .pbr{gap:1px 3px;max-height:calc(var(--pbh) - 2px)}#pbar .pc{height:16px;font-size:10px;padding:0 6px}#pbar .pc small{font-size:9px}#pbar .shs{padding:0 4px;gap:3px}#pbar .feed{font-size:0;gap:0}#pbar .feed .dot{margin:0 2px}}
/* long lines stay at 2 lines; tap to read the rest */
.l2,.cl2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.l2{cursor:pointer}.l2.x{display:block;-webkit-line-clamp:unset}
.ord.open .cl2{display:block;-webkit-line-clamp:unset}
details.cmp .card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:8px 0 4px;margin:8px 0 0}
details.cmp>summary{margin-bottom:2px}
/* Live chip to Trade */
.tradechip{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;color:var(--txt);font:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:10px}
.tradechip:hover{border-color:#2f4a66}.tradechip:focus-visible{outline:1px solid var(--blu)}
.hu p.crowd{display:flex;gap:6px;align-items:baseline}.hu p.crowd .chip{flex:0 0 auto}
details.cmp>summary{font-weight:600}
/* Trade */
.tsub{margin-bottom:8px}
body.desktop main.tradewrap{display:flex;flex-direction:column;overflow:hidden;padding:8px 10px}
body.desktop .tradewrap>.tsub{flex:0 0 auto}
body.desktop .grid2{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(380px,1fr) minmax(420px,1.1fr);grid-template-rows:minmax(0,1fr);gap:10px}
body.desktop main.wide{padding:8px 10px 16px}
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:0 10px;align-items:start}
.emptybig{padding:14px 12px}
/* orders + Doctor */
.ord{border:1px solid var(--line);border-left-width:3px;border-radius:10px;padding:8px 10px;margin-top:8px;cursor:pointer;background:#0f161e;transition:none}
.ord.g{border-left-color:var(--grn)}.ord.o{border-left-color:var(--amb)}.ord.r{border-left-color:var(--red)}.ord.n{border-left-color:var(--mut)}
.ord:focus-visible{outline:1px solid var(--blu)}
.ord .dd{font-size:15px;line-height:1}.ord .oword{font-weight:700;font-size:12px}
.ord .plain{margin:4px 0 2px;font-size:13.5px}
.ord .chk{margin-top:8px;padding-top:6px;border-top:1px solid var(--line);cursor:default}
.ord .ck{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:5px 0;border-top:1px solid var(--line);font-size:12.5px}.ord .ck:first-of-type{border-top:0}
.ord .ck .fix{color:var(--blu)}
.dstatus{display:flex;gap:8px;align-items:baseline}
/* planner V3.2 */
.plan .rrrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 4px}
.plan .rrrow .lab,.plan .mrow .lab{font-size:11px;color:var(--mut);flex:0 0 100px}
.plan .rrrow input{width:76px;padding:4px 7px;font-size:14px}
.plan .mrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.plan .whatif,.plan .stormline{margin-top:6px;padding:6px 8px;border-radius:8px;background:#0e1a29;border:1px solid #23415f}
.plan .stormline{border-color:rgba(245,158,11,.5);color:var(--amb)}
.plan .fh.bad,.plan .rrbad{color:var(--red);font-weight:600}
.plan input.bad{border-color:var(--red)}
.plan .pdoc{margin-top:8px}.plan .pdoc:empty{display:none}
.plan .pdoc .dstatus{padding:6px 8px;border-radius:8px;background:#0e1a29;border:1px solid #23415f}
.bestway{margin-top:8px;border:1px solid #23415f;background:#0e1a29;border-radius:10px;padding:8px 10px}
.bestway ol{margin:6px 0 4px;padding-left:20px}.bestway li{margin:3px 0;font-size:13px}
.plan .ftline{margin-top:6px;padding:6px 8px;border-radius:8px;border:1px solid rgba(239,68,68,.5);color:var(--red)}
.plan .ftline.ok{border-color:#23415f;color:var(--mut)}
/* info cards: one pinned card, outside the page content so a refresh never closes it */
#pop{position:fixed;z-index:25;width:min(340px,calc(100vw - 16px));max-height:min(60vh,420px);overflow:auto;background:#0e1a29;border:1px solid #23415f;border-radius:10px;padding:10px 32px 10px 12px;font-size:12.5px;font-weight:400;box-shadow:0 12px 30px rgba(0,0,0,.55);left:8px;top:8px}
#pop p{margin:5px 0}
#pop .pclose{position:absolute;top:4px;right:5px;width:26px;height:26px;border:0;border-radius:6px;background:#1b2634;color:var(--txt);font-size:14px;line-height:1;cursor:pointer}
#pop .pclose:hover{background:#2b3a4d}
/* Lab: storm notice, custom bots */
.stormnote{display:flex;gap:8px;align-items:center;padding:9px 12px;margin-bottom:10px;border-radius:var(--r);background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.55);color:var(--amb);font-weight:700;font-size:13.5px}
.botcard{border-left:3px solid var(--bc,#94a3b8)}
.botcard .bnums{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:13px}
.botcard .bbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.botform .tpl{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.botform .okline{color:var(--mut);font-size:12px}
.botform .sgrid label.f2{gap:3px}
.forensics ul{margin:6px 0 0;padding-left:18px}.forensics li{margin:4px 0;font-size:13.5px}
.doctorstat{border-left:3px solid var(--blu)}
@media (max-width:520px){.rn{font-size:13px}.rn .rnt{flex-basis:100%}}

/* Trade Copilot: calm (one line, one action, one alert) */
.cop{margin-top:8px;border-left:4px solid var(--blu);border-radius:8px;padding:7px 10px;background:#0f1722}
.cop.cg{border-left-color:var(--grn)}.cop.ca{border-left-color:var(--amb)}.cop.cr{border-left-color:var(--red);background:#1a1014}
.cop1{display:flex;align-items:center;gap:8px}.cop1 .cbtn{margin-left:auto}
.copdot{width:10px;height:10px;border-radius:50%;background:var(--blu);flex:none}.cop.cg .copdot{background:var(--grn)}.cop.ca .copdot{background:var(--amb)}.cop.cr .copdot{background:var(--red)}
.copv{font-size:17px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.cop.cg .copv{color:var(--grn)}.cop.ca .copv{color:var(--amb)}.cop.cr .copv{color:var(--red)}
.cop2{font-size:13px;color:var(--txt);opacity:.85;margin:2px 0 0 18px;font-variant-numeric:tabular-nums}
.copal{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;padding:4px 8px;border-radius:6px;margin:6px 0 0}
.copal.cr{background:rgba(239,68,68,.16);color:#fca5a5}.copal.ca{background:rgba(245,158,11,.15);color:#fcd34d}
.cop3{font-size:12px;color:var(--mut);margin:2px 0 0 18px;font-variant-numeric:tabular-nums}
.copnew{width:7px;height:7px;border-radius:50%;background:var(--blu);flex:none;animation:copfade 60s linear forwards}
@keyframes copfade{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.copnew{animation:none;opacity:.6}}
.copmore{margin-top:4px}.copmore summary{color:var(--mut);font-weight:600}
.copgrid{display:grid;grid-template-columns:repeat(4,auto 1fr);gap:2px 8px;margin:6px 0}.copgrid b{font-variant-numeric:tabular-nums}
.coprec{color:#bfdbfe;margin:4px 0}
.copopts{margin:6px 0;border-top:1px solid var(--line)}.copo{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:4px 0;border-bottom:1px solid var(--line)}.copo b{min-width:56px;text-align:right;font-variant-numeric:tabular-nums}
.cswitch{margin-left:8px;border:1px solid var(--line);background:#1b2634;color:var(--mut);border-radius:999px;font:700 11px/1 inherit;padding:5px 9px;cursor:pointer}.cswitch.on{background:rgba(96,165,250,.18);color:var(--blu);border-color:rgba(96,165,250,.5)}
@media(max-width:520px){.copgrid{grid-template-columns:repeat(2,auto 1fr)}}
/* V3.3: collapsible panels on Trade */
.panel>.phd{display:flex;align-items:center;gap:8px;min-height:28px}
.ptt{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.panel .pbody{margin-top:6px}
.pospanel{margin-bottom:10px}
.pospanel>.phd{padding:5px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.pospanel>.phd b:not(.ptt){font-size:14px}
body.desktop .pospanel{margin-bottom:8px}
body.desktop .grid2.lcol-off,body.desktop .grid2.rcol-off{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
body.desktop .grid2.rcol-off>.col:nth-child(2){order:-1}
body.desktop .grid2.both-off{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;align-content:start}

/* V3.3: planner — one block of inputs, one bold result strip, a compact order-type guide */
.plan .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}
.plan .pgrid label{font-size:12px;font-weight:600}
.plan .pgrid input{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;padding:7px}
.plan small.fh:not(.bad){display:none}
.plan details.pmore .pgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.plan details.pmore .pgrid input,.plan details.pmore .pgrid select{font-weight:400;font-size:14px}
.pstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.rt{display:flex;flex-direction:column;gap:1px;min-width:0;padding:7px 9px 6px;border-radius:10px;background:#0e1a29;border:1px solid #23415f;border-left-width:4px}
.rt.good{border-color:rgba(34,197,94,.55);background:linear-gradient(180deg,rgba(34,197,94,.12),#0e1a29)}
.rt.warn{border-color:rgba(245,158,11,.65);background:linear-gradient(180deg,rgba(245,158,11,.14),#0e1a29)}
.rt.bad{border-color:rgba(239,68,68,.7);background:linear-gradient(180deg,rgba(239,68,68,.16),#0e1a29)}
.rt .rl{font-size:11px;color:var(--mut);font-weight:600;line-height:1.2}.rt .rl small{font-size:10px;font-weight:400}
.rt .rv{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.rt .v{display:inline-block;font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;transform-origin:left center}
.rt .rv small{font-size:11px;color:var(--mut);font-weight:600}
.rt .rs{font-size:11px;color:var(--mut);line-height:1.2}
.rt.good .v{color:var(--grn)}.rt.warn .v{color:var(--amb)}.rt.bad .v{color:var(--red)}
.rt.bad .rs{color:var(--red);font-weight:600}
.rt .cx{border-bottom:0}
@keyframes vflash{from{transform:scale(1.14);opacity:.4}to{transform:none;opacity:1}}
.rt .v.fl{animation:vflash .26s ease-out}
@media (prefers-reduced-motion:reduce){.rt .v.fl{animation:none}}
.plan .pout .warn.sm,.plan .pout .neg.sm,.plan .pout .ftline,.plan .pout .stormline,.plan .pout .acct{margin-top:6px}
.plan details.pmore{margin-top:8px}.plan details.pmore .pmoreout:not(:empty){margin:4px 0 8px}
.plan details.pmore .sm.acct,.plan details.pmore .sm.comb{margin-top:6px}
.plan .mrow{margin:8px 0 4px}
.otguide{margin-top:4px}
.otguide .gh{font-size:12px;color:var(--mut);margin-bottom:3px}.otguide .gh b{color:var(--txt)}
table.guide{width:100%;border-collapse:separate;border-spacing:0 2px;font-size:12px}
table.guide th,table.guide td{border:0;text-align:left;vertical-align:top;padding:4px 7px;font-variant-numeric:normal;background:#0d141c}
table.guide th{width:74px;color:var(--mut);font-size:12px;font-weight:700}
table.guide td.gt{width:118px;white-space:nowrap}
table.guide td.gw{color:var(--mut);line-height:1.3}table.guide td.gw b{color:var(--txt)}
table.guide tr>*:first-child{border-radius:7px 0 0 7px}table.guide tr>*:last-child{border-radius:0 7px 7px 0}
table.guide tr.mode>*{background:#13202f}
table.guide tr.on>*{background:rgba(34,197,94,.14)}table.guide tr.on>th{color:var(--txt);box-shadow:inset 3px 0 0 var(--grn)}
table.guide b.rec{color:var(--grn)}
table.guide tr.on td.gw{color:var(--txt)}
.guidewarn{margin-top:3px}
@media (max-width:520px){table.guide td.gt{width:90px;white-space:normal}table.guide th{width:62px}.rt .v{font-size:22px}}

/* V3.3: Results tab */
.rbar{align-items:center;gap:8px}.rwin{display:flex;flex-wrap:wrap;gap:4px}.rview{display:flex;gap:4px}
.rbar .seg{padding:6px 10px;font-size:13px}
.seg[aria-pressed=true]{background:#2b3a4d;color:var(--txt)}
.rtot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;align-items:end}
.rtot .rnet{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rtot .rl{display:block;font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.rtot .rnv{font-size:40px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rtot .rnet.pos .rnv{color:var(--grn)}.rtot .rnet.neg .rnv{color:var(--red)}
.rtot .rnet .rl{flex:1 0 100%}
.rtot .rnet small{font-size:14px;color:var(--mut);font-weight:700}
.rtot .rst{display:flex;flex-direction:column;min-width:0}
.rtot .rst b{font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.rtot .rst small{font-size:11px;color:var(--mut);line-height:1.25}
.rempty{text-align:center;font-size:15px}
.rsvg{display:block;width:100%;height:150px;margin-top:4px}
.rsvg .rhit{fill:transparent}.rsvg .rbar{cursor:pointer;outline:none}
.rsvg .rbar:hover rect.sv-g,.rsvg .rbar:hover rect.sv-r,.rsvg .rbar.sel rect.sv-g,.rsvg .rbar.sel rect.sv-r,.rsvg .rbar:focus rect.sv-g,.rsvg .rbar:focus rect.sv-r{opacity:1;stroke:var(--txt);stroke-width:1.5}
.rsvg rect.sv-g,.rsvg rect.sv-r{opacity:.85}
.rsvg text.sv-l{font-size:11px}
.rtip{min-height:34px;margin-top:4px;padding:6px 9px;border-radius:8px;background:#0e1a29;border:1px solid #23415f;font-weight:600}
.rg{border-top:1px solid var(--line);padding:2px 0}.rg:first-of-type{border-top:0}
.rg>summary{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;list-style:none;padding:8px 0;font-weight:400;cursor:pointer}
.rg>summary::-webkit-details-marker{display:none}.rg>summary::before{content:"▸";color:var(--mut);width:12px}.rg[open]>summary::before{content:"▾"}
.rg .rgl{font-weight:700;font-variant-numeric:tabular-nums;min-width:96px}
.rg .rgn{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.rgn.pos,.rnetv.pos{color:var(--grn)}.rgn.neg,.rnetv.neg{color:var(--red)}
.rgb{padding:0 0 6px 18px}
.rtr{padding:7px 0;border-top:1px solid var(--line)}.rtr:first-of-type{border-top:0}
.rtr1{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.rtr .rnetv{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.rtr2{display:flex;gap:4px 12px;flex-wrap:wrap;margin-top:2px;font-variant-numeric:tabular-nums}
.rtr .rtime{min-width:86px}
@media (max-width:520px){.rtot{grid-template-columns:repeat(2,minmax(0,1fr))}.rtot .rnv{font-size:36px}.rtot .rst b{font-size:22px}}
/* V3.3: Lab › Robot tuning */
.tune .tcard{margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-left:3px solid var(--tc,#94a3b8);border-radius:10px;background:#0f161e}
.tune .tname{font-size:15px}
.tune .tstats{margin-top:4px}.tstats b.pos{color:var(--grn)}.tstats b.neg{color:var(--red)}
.tch{margin:6px 0 4px;padding-left:18px}.tch li{margin:3px 0;font-size:13px}
.tch .tft{font-weight:800;font-variant-numeric:tabular-nums;color:var(--txt);white-space:nowrap}
.tune .texp{margin:4px 0 6px}.tune .tact{margin-top:6px;gap:10px}
/* 3.2.4 calm planner: one line each, the rest behind a tap */
.plan .gwrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:4px}
.plan .gline b{color:var(--grn)}.plan .gok{color:var(--grn);font-weight:700}
.plan .gwrap>details{flex:1 0 100%}.plan .gwrap>details[open]{margin-top:2px}
.plan details.gmore>summary,.plan details.dmore>summary,.plan details.pwarns>summary{cursor:pointer;color:var(--mut);margin-top:4px}
.plan details.gmore:not([open]){flex:0 0 auto}
.plan details.dmore .dchecks{margin-top:8px}
.plan .rrnow{font-weight:700;color:var(--txt)}
/* calm pass: sign + good/bad colours, hidden helper sentences (kept as tooltips), bigger figures */
.pos{color:var(--grn)}.neg{color:var(--red)}.good{color:var(--grn)}td.pos,td.neg,b.pos,b.neg{font-weight:700;font-variant-numeric:tabular-nums}
.bt .why{display:none}.bt{max-width:none}
.botcard .bnums b,.kv2 b{font-size:15px;font-variant-numeric:tabular-nums}.botcard .bnums{gap:18px;color:var(--mut)}
.poscard .row>b{font-size:16px;font-variant-numeric:tabular-nums}
.card{padding:12px}
/* 3.2.6: calm Trade tab. Fixed slots, one focal number per card, colour follows the money. */
#pbar .pxrow{display:flex;align-items:center;gap:6px}
#pbar .px{font-size:32px;font-weight:900}
body.desktop #pbar .px{font-size:40px}
#pbar .stl{font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;white-space:nowrap}
#pbar .stl.warn{background:rgba(245,158,11,.22);color:var(--amb)}#pbar .stl.bad{background:rgba(239,68,68,.22);color:var(--red)}
@media (max-width:520px){#pbar .px{font-size:30px}}
.warn0{color:var(--amb)}
.panel>.phd{cursor:pointer;user-select:none;flex-wrap:wrap}
.cadsel{width:auto;font:700 11px/1 inherit;padding:4px 6px;border-radius:999px;background:#1b2634;color:var(--txt);border:1px solid var(--line);cursor:pointer}
.poscard .prow{align-items:baseline;gap:8px}.poscard .psz{font-weight:700}
.poscard .pnl{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.poscard .pr{font-size:14px}
.pfacts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px 8px;margin-top:6px;font-variant-numeric:tabular-nums}
.pfacts span{display:flex;flex-direction:column;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfacts i{font-style:normal;font-size:10.5px;color:var(--mut);font-weight:600}
.pfacts span.neg{color:var(--red)}
@media (max-width:520px){.pfacts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pmore{margin-top:6px}.pmore>summary{color:var(--mut);font-weight:600;cursor:pointer}
.cop.cr{background:#1a1014}.cop.cg{background:#0f1a14}
.hedge>summary{cursor:pointer;list-style:none}.hedge>summary::-webkit-details-marker{display:none}
/* Package C: Brief, Mirror, Analytics, Studio, Settings TWIN line. New class names only; Live and Trade are untouched. */
.winbar{gap:4px}.mtop .propcount,.brief .copline{margin-top:6px}.brief .copline{font-size:13px}.briefnet{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:4px 0}
.dragrow{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13px}.score .big.pos,.brief .big.pos{color:var(--grn)}.score .big.neg,.brief .big.neg{color:var(--red)}
.deeprobot{margin-top:10px}.twinsum{margin:6px 0;font-size:13px}
#robotStudio .rshead{margin-bottom:8px}#robotStudio .rswin{display:flex;gap:4px;flex-wrap:wrap}#robotStudio .rstop{margin-bottom:8px}#robotStudio .rsmore{margin-top:0}
/* V4.2 Analytics: balance chart markers, experiments timeline, ask a question */
.an-bal{display:block;margin:6px 0;color:var(--txt);max-height:140px}.an-bal .an-ep line{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}.an-bal .an-ep text{fill:var(--mut);font-size:8px}
.an-bal .an-xf.dep{fill:var(--blu)}.an-bal .an-xf.wd{fill:var(--amb)}.an-bal .an-bl{stroke:var(--red);stroke-width:1.6;fill:none}
.an-leg{display:flex;gap:4px 12px;flex-wrap:wrap}.an-k{display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:baseline}.an-k.ep{width:0;height:10px;border-left:1px dashed var(--mut)}.an-k.dep{background:var(--blu);transform:rotate(45deg) scale(.8)}.an-k.bl{width:auto;height:auto;color:var(--red);font-style:normal}
.an-tl{list-style:none;margin:6px 0 0;padding:0 0 0 12px;border-left:2px solid var(--line)}.an-tl li{position:relative;margin:0 0 10px}.an-tl li::before{content:"";position:absolute;left:-18px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--blu)}
.an-qs{display:flex;flex-direction:column;gap:4px;margin:6px 0}.an-qs .seg{text-align:left}.an-ans{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}.an-ans p{margin:0 0 4px}

/* R4 navigation: six groups (Live · Trade · Analytics · Robots · Learn · ⚙); a small second row of tabs only for Trade and Analytics.
   Phones: the second row sits above the group row in the bottom bar. Desktop: it follows the groups on the same line and wraps under them when narrow. */
.tabs .grp{display:flex;flex:1 1 auto;min-width:0}
.tabs .subnav{display:flex;gap:2px;align-items:center}.tabs .subnav[hidden]{display:none}
.tabs .subnav button.bk{color:var(--mut);background:none}
#tabs{flex-wrap:wrap}#tabs .grp{flex:1 1 100%}#tabs .grp button{padding:8px 2px;white-space:nowrap}
#tabs .subnav{order:-1;flex:1 1 100%;padding:0 0 4px;margin-bottom:4px;border-bottom:1px solid var(--line)}
body.subnav-on:not(.desktop) #ftr{padding-bottom:calc(106px + env(safe-area-inset-bottom))}
body.subnav-on:not(.desktop) #noteBtn{bottom:calc(104px + env(safe-area-inset-bottom))}
body.desktop #tabsTop{align-items:center}body.desktop #tabsTop .grp{flex:0 0 auto}
body.desktop #tabsTop .subnav{flex:0 1 auto;margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}