/* ═══════════════════════════════════════════════════════════════
   PERP/DESK — warm dark. Inter for words, JetBrains Mono for numbers.
   One warm charcoal field, mint / coral for sign, amber for anything
   interactive or highlighted. Tokens live here; nothing below may use a
   raw hex or bare px spacing.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#17191E; --bg2:#1B1E24; --panel:#20242B; --panel2:#262B33;
  --line:#272B33; --line2:#333944; --line3:#434A57;
  --txt:#ECE8E1; --mute:#A6A49E; --dim:#8D8D88; --ghost:#5A5B58;
  --up:#3FCF8E; --up-soft:rgba(63,207,142,.14);
  --dn:#F27070; --dn-soft:rgba(242,112,112,.14);
  --acc:#F0B35B; --acc-soft:rgba(240,179,91,.14); --acc-ink:#1A1206;
  --warn:var(--acc);

  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs:13.5px; --fs-s:12px; --fs-xs:11px; --fs-l:15px; --fs-xl:20px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --row:56px; --head:56px; --strip:72px; --foot:44px;
  --r:8px; --r-lg:12px;
  --flash:1400ms; --ease:cubic-bezier(.2,.7,.2,1);
}

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{
  margin:0;min-height:100vh;color:var(--txt);font-family:var(--sans);font-size:var(--fs);
  line-height:1.45;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 420px at 18% -120px,rgba(240,179,91,.09),transparent 60%),
    radial-gradient(700px 360px at 92% -80px,rgba(63,207,142,.05),transparent 60%),
    var(--bg);
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;-webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input{font:inherit;color:inherit}
b{font-weight:600}
kbd{display:inline-block;padding:0 6px;border:1px solid var(--line3);border-bottom-width:2px;border-radius:5px;
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--mute);line-height:18px;margin-right:var(--s1)}
.num{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--fs-s)}
.up{color:var(--up)} .dn{color:var(--dn)} .flat{color:var(--mute)} .dim{color:var(--dim)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r)}

/* boot overlay — kept, but soft */
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;
  transition:opacity 420ms var(--ease);pointer-events:none}
.boot.out{opacity:0}
.bootBox{min-width:300px}
.bootMark{font-weight:700;font-size:var(--fs-xl);letter-spacing:.02em;margin-bottom:var(--s3)}
.bootMark span{color:var(--acc);font-weight:500;margin:0 2px}
.bootBar{height:2px;background:var(--line2);border-radius:1px;overflow:hidden;margin:var(--s3) 0 var(--s2)}
.bootBar i{display:block;height:100%;width:8%;background:var(--acc);transition:width 600ms var(--ease)}
.bootSub{font-size:var(--fs-xs);color:var(--mute)}

/* ── header ─────────────────────────────────────────────────── */
.top{
  position:relative;z-index:30;height:var(--head);flex:0 0 auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s5);
  padding:0 var(--s5);border-bottom:1px solid var(--line);
}
.brand{font-weight:700;font-size:var(--fs-l);letter-spacing:.02em;display:flex;align-items:baseline;gap:2px}
.brand .slash{color:var(--acc);font-weight:500;margin:0 2px}
.brand em{font-style:normal;font-weight:500;font-size:var(--fs-xs);color:var(--dim);margin-left:var(--s3);
  padding-left:var(--s3);border-left:1px solid var(--line2)}
.search{display:flex;align-items:center;gap:var(--s2);max-width:280px;height:34px;padding:0 var(--s3);
  border:1px solid var(--line2);background:var(--bg2);border-radius:var(--r);transition:border-color 120ms,box-shadow 120ms}
.search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.search .key{color:var(--dim);border:1px solid var(--line2);border-radius:4px;font-family:var(--mono);font-size:var(--fs-xs);padding:0 5px;line-height:16px}
.search:focus-within .key{color:var(--acc);border-color:var(--acc)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;text-transform:uppercase;letter-spacing:.04em;font-family:var(--mono);font-size:var(--fs-s)}
.search input::placeholder{color:var(--dim);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:var(--fs)}
.search input::-webkit-search-cancel-button{display:none}
.search .hint{color:var(--dim);font-size:var(--fs-xs);opacity:0;transition:opacity 120ms}
.search:focus-within .hint{opacity:1}
.status{display:flex;align-items:center;gap:var(--s4);font-size:var(--fs-s);color:var(--mute)}
.feed{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:0 10px;line-height:22px;font-size:var(--fs-xs);color:var(--mute);background:var(--bg2);cursor:help}
.feed .mock{color:var(--txt)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--up)}
.feed.off .dot{background:var(--dim)}
.feed.stale .dot{background:var(--dn)} .feed.stale .age{color:var(--dn)}
.clock{color:var(--txt);font-family:var(--mono);font-size:var(--fs-s)}

/* ── summary strip ──────────────────────────────────────────── */
.strip{
  display:flex;align-items:stretch;min-height:var(--strip);flex:0 0 auto;gap:0;
  border-bottom:1px solid var(--line);background:var(--bg2);overflow-x:auto;scrollbar-width:none
}
.strip::-webkit-scrollbar{display:none}
.strip .group{display:flex;align-items:stretch;padding:0 var(--s3);flex:0 0 auto}
.strip .group+.group{margin-left:var(--s4);border-left:1px solid var(--line2)}
.strip .cell{
  display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:var(--s3) var(--s4) 0;
  white-space:nowrap;flex:0 0 auto
}
.strip .lbl{font-size:var(--fs-xs);color:var(--mute)}
.strip .lbl small{font-size:inherit;color:var(--dim);margin-left:4px}
.strip .val{font-size:var(--fs-xl);font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.strip .sep{color:var(--dim);margin:0 6px}
.strip .liq{gap:2px}
.strip .liq .val{line-height:1.15}
.lsline{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);line-height:1.2;font-variant-numeric:tabular-nums}
.lsbar{display:inline-flex;width:48px;height:4px;border-radius:2px;background:var(--line2);overflow:hidden}
.lsbar i{display:block;height:100%}
.lsbar .l{background:var(--dn)} .lsbar .s{background:var(--up)}
.tape{flex:1 1 200px;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center;gap:var(--s3)}
.tape .lbl{color:var(--dim);font-size:var(--fs-xs);flex:0 0 auto}
.tapeIn:empty::before{content:'quiet so far';color:var(--dim)}
.tapeIn{display:flex;gap:var(--s4);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;padding-left:10px;margin-left:-10px;font-variant-numeric:tabular-nums;
  mask-image:linear-gradient(90deg,transparent,#000 10px,#000 86%,transparent)}
.tapeIn .liqEv{display:inline-flex;gap:6px;animation:tapeIn 320ms var(--ease)}
.tapeIn .liqEv .sym{color:var(--txt)}
@keyframes tapeIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* ── toolbar ────────────────────────────────────────────────── */
main{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s5);gap:var(--s4);
  font-size:var(--fs-s);color:var(--mute)}
.tabs{display:flex;gap:4px;align-items:center}
.viewtabs{display:flex;gap:4px}
.tab{padding:6px 12px;font-size:var(--fs-s);font-weight:500;color:var(--mute);border:1px solid transparent;border-radius:999px;white-space:nowrap}
.tab b{color:var(--dim);margin-left:5px;font-family:var(--mono);font-weight:500}
@media (hover:hover){.tab:hover{color:var(--txt);background:var(--panel)}}
.tab.on{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.tab.on b{color:var(--acc-ink)}
.tsep{width:1px;height:16px;background:var(--line2);margin:0 var(--s2)}
.tab.mode{display:inline-flex;align-items:center;gap:8px}
.tab.mode::before{content:'';width:26px;height:14px;border-radius:7px;background:var(--line3);position:relative;transition:background 160ms;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.tab.mode::after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:var(--txt);margin-left:2px;transition:transform 160ms var(--ease)}
.tab.mode{position:relative}
.tab.mode::after{left:12px;top:50%;margin-top:-5px}
.tab.mode[aria-checked="true"]::before{background:var(--acc)}
.tab.mode[aria-checked="true"]::after{transform:translateX(12px);background:var(--acc-ink)}
.tab.mode[aria-checked="true"]{color:var(--txt)}
body:not(.cols-full) .c-ls,body:not(.cols-full) .c-liq,body:not(.cols-full) .c-basis{display:none}
.tmeta b{color:var(--txt);font-weight:500}

/* ── board ──────────────────────────────────────────────────── */
.tablewrap{overflow:auto;flex:1;position:relative;padding:0 var(--s4)}
.tablewrap::after{content:'';position:sticky;bottom:0;left:0;display:block;height:24px;margin-top:-24px;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:4}
main::after{content:'';position:absolute;top:0;right:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,var(--bg));pointer-events:none;z-index:6;opacity:0}
@media (max-width:1240px){main::after{opacity:1}}
.board{width:100%;border-collapse:separate;border-spacing:0;min-width:1080px;margin-bottom:var(--s6)}
body.cols-full .board{min-width:1280px}
.board thead th{
  position:sticky;top:0;z-index:5;background:var(--bg);height:36px;padding:0 var(--s3);
  font-weight:500;font-size:var(--fs-xs);color:var(--mute);
  text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap;user-select:none;cursor:pointer
}
.board thead th.num{text-align:right;font-family:var(--sans)}
.board thead th:hover,.board thead th:focus-visible{color:var(--txt)}
.board thead th:focus-visible{outline-offset:-2px;border-radius:6px}
.board thead th.sorted{color:var(--acc)}
.board thead th.sorted span::after{content:' ↓';font-size:10px}
.board thead th.sorted.asc span::after{content:' ↑'}
.board thead th.c-star{cursor:default}
.board thead th.c-spark{text-align:center}
.board tbody td{
  height:var(--row);padding:0 var(--s3);border-bottom:1px solid var(--line);white-space:nowrap;
  transition:background-color 220ms
}
tr.r{cursor:pointer}
tr.r:focus-visible{outline:none}
tr.r:focus-visible td{background:var(--panel2)}
tr.r:focus-visible td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
tr.r td:first-child{border-top-left-radius:var(--r);border-bottom-left-radius:var(--r)}
tr.r td:last-child{border-top-right-radius:var(--r);border-bottom-right-radius:var(--r)}
@media (hover:hover){tr.r:hover td{background:var(--panel)}}
tr.r.cur td{background:var(--panel2)}
tr.r.cur td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
tr.r.open td{background:var(--panel2);border-bottom-color:transparent}
tr.r.open td:first-child{box-shadow:inset 3px 0 0 var(--acc);border-bottom-left-radius:0}
tr.r.open td:last-child{border-bottom-right-radius:0}
.c-star{width:36px;padding-right:0!important}
.star{color:var(--ghost);font-size:15px;line-height:1;padding:12px;margin:-12px;transition:color 120ms,transform 120ms}
.star:hover{color:var(--acc);transform:scale(1.15)}
tr.r.watch .star{color:var(--acc)}
.c-rank{width:44px;color:var(--dim)}
.c-sym{width:230px}
.coin{display:flex;align-items:center;gap:var(--s3)}
.avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-weight:700;font-size:11px;letter-spacing:.02em;
  background:hsl(var(--hue,40) 38% 21%);color:hsl(var(--hue,40) 70% 84%)}
.avatar.logo{background:var(--panel2)}
.avatar img{width:100%;height:100%;display:block}
.coin .name{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.coin .full{font-weight:600;font-size:var(--fs-l);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.coin .meta{display:flex;align-items:baseline;gap:6px}
.coin .base{font-size:var(--fs-s);color:var(--mute);font-weight:500}
.coin .lev{font-size:var(--fs-xs);color:var(--dim)}
.coin .lev i{font-style:normal;color:var(--acc);border:1px solid var(--acc);border-radius:4px;padding:0 4px;line-height:14px;display:inline-block}
.c-price{color:var(--txt);font-weight:600;font-size:var(--fs-l)}
.c-fund.pos{color:var(--up)} .c-fund.neg{color:var(--dn)}
.c-fund.hot{color:var(--acc)}
.soon{color:var(--acc)!important}
.c-spark{width:120px;padding:0 var(--s2)!important}
.c-spark svg{display:block;width:100px;height:28px;margin:0 auto;overflow:visible}
.c-spark .sp{fill:none;stroke-width:1.6;stroke:var(--mute);vector-effect:non-scaling-stroke;stroke-linejoin:round}
.c-spark.up .sp{stroke:var(--up)} .c-spark.dn .sp{stroke:var(--dn)}
.c-spark .dot{fill:var(--mute)} .c-spark .halo{display:none}
.c-spark.up .dot{fill:var(--up)} .c-spark.dn .dot{fill:var(--dn)}
.c-ls,.c-liq,.c-basis{color:var(--mute)}
.c-oi,.c-vol{color:var(--txt)}
/* price movement: only the digits that changed drift through colour, then settle */
td.fu{animation:flashUp var(--flash) var(--ease)} td.fd{animation:flashDn var(--flash) var(--ease)}
@keyframes flashUp{0%{background:rgba(63,207,142,.09)}100%{background:transparent}}
@keyframes flashDn{0%{background:rgba(242,112,112,.09)}100%{background:transparent}}
tbody.stagger tr.r{animation:rowIn 360ms var(--ease) both;animation-delay:calc(var(--i)*16ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
body.heat tr.r td{background:rgb(var(--hc,124 135 152) / calc(var(--heat,0) * .30))}
body.heat tr.r.hu{--hc:63 207 142} body.heat tr.r.hd{--hc:242 112 112}
body.heat tr.r:hover td{background:rgb(var(--hc,124 135 152) / calc(var(--heat,0) * .30 + .06))}
body.heat tr.r td.up,body.heat tr.r td.dn,body.heat tr.r td.pos,body.heat tr.r td.neg{color:var(--txt)}
.empty{padding:var(--s6) var(--s4);color:var(--mute);text-align:center}
.empty b{color:var(--txt)}

/* ── expanded row ───────────────────────────────────────────── */
tr.exp td{padding:0 0 var(--s3)!important;height:auto!important;background:transparent;border-bottom:1px solid var(--line);white-space:normal}
.expIn{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(360px,.9fr);gap:0;animation:expIn 220ms var(--ease);
  background:var(--panel2);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:inset 3px 0 0 var(--acc);overflow:hidden}
@keyframes expIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pane{padding:var(--s4) var(--s5);border-right:1px solid var(--line2);min-width:0}
.pane:last-child{border-right:0}
.pane header{display:flex;align-items:baseline;gap:var(--s2);font-size:var(--fs-xs);color:var(--dim);margin-bottom:var(--s3);white-space:nowrap;min-width:0}
.pane header b{color:var(--txt);font-size:var(--fs);font-weight:600}
.pane header .sub{color:var(--mute)}
.pane header .hl{margin-left:auto;color:var(--mute);overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;font-variant-numeric:tabular-nums}
.pane header.second{margin-top:var(--s4)}
.pane svg{display:block;width:100%}
.pane .big{height:190px}
.bigWrap{position:relative;cursor:crosshair}
.xh{position:absolute;inset:0;pointer-events:none}
.xh .v{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:var(--acc);opacity:.55}
.xh .h{position:absolute;left:0;right:0;top:var(--y);height:1px;background:var(--acc);opacity:.3}
.xh .px{position:absolute;right:0;top:var(--y);transform:translateY(-50%);background:var(--acc);color:var(--acc-ink);font-size:var(--fs-xs);padding:0 6px;line-height:18px;font-weight:600;border-radius:4px}
.xh .ts{position:absolute;bottom:0;left:var(--x);transform:translateX(-50%);background:var(--panel);border:1px solid var(--line3);border-radius:4px;color:var(--txt);font-size:var(--fs-xs);padding:0 8px;line-height:18px;white-space:nowrap}
.xh.right .ts{transform:translateX(-100%)} .xh.left .ts{transform:none}
.pane .bars{height:90px}
.pane .oi{height:70px}
.big .area{fill:url(#pdGrad);opacity:.9}
.big .line{fill:none;stroke:var(--acc);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.big .hl-line{stroke:var(--line3);stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.big .mark{fill:var(--acc)}
.big text{font-family:var(--sans);font-size:10px;fill:var(--mute)}
.axis{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--dim);margin-top:4px}
.bars .zero{stroke:var(--line3);vector-effect:non-scaling-stroke}
.bars rect{rx:1.5}
.bars rect.p{fill:var(--up)} .bars rect.n{fill:var(--dn)}
.bars rect.last{stroke:var(--acc);stroke-width:1.2;vector-effect:non-scaling-stroke}
.bars rect.hov{stroke:var(--acc);stroke-width:1.5;vector-effect:non-scaling-stroke}
.oi .line{fill:none;stroke:var(--txt);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;opacity:.85}
.oi .area{fill:rgba(236,232,225,.08)}
.oi .oiMark{fill:var(--acc)} .oi .oiLine{stroke:var(--acc);opacity:.55;vector-effect:non-scaling-stroke}
.rng{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px var(--s2);font-size:var(--fs-xs);color:var(--mute);margin-bottom:var(--s4);font-variant-numeric:tabular-nums}
.rng .rl{grid-column:1/-1;font-style:normal;font-family:var(--sans);color:var(--dim)}
.rng .lo,.rng .hi{color:var(--mute)}
.rng .track{position:relative;height:4px;border-radius:2px;background:var(--line2)}
.rng .pos{position:absolute;top:-4px;width:3px;height:12px;border-radius:2px;background:var(--acc);transform:translateX(-1.5px);transition:left 300ms var(--ease)}
.kv dl{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px var(--s3);margin:0;font-size:var(--fs-s);align-content:start}
.kv dt:nth-of-type(even){padding-left:var(--s3);border-left:1px solid var(--line2)}
.kv dt{color:var(--mute);font-size:var(--fs-xs)}
.kv dd{margin:0;text-align:right;color:var(--txt);font-variant-numeric:tabular-nums}
.kv dd.up{color:var(--up)} .kv dd.dn{color:var(--dn)}
.kv .row2{grid-column:1/-1;height:1px;background:var(--line2);margin:2px 0}
.kv .contract{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--line2);font-size:var(--fs-xs);color:var(--dim);line-height:1.5;white-space:normal}

/* ── footer ─────────────────────────────────────────────────── */
.foot{height:var(--foot);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s5);
  border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--dim);background:var(--bg2);gap:var(--s4);position:relative}
.keys{position:relative}
.keysBtn{color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;font-size:var(--fs-xs)}
.keysBtn:hover,.keysBtn[aria-expanded="true"]{color:var(--txt);border-color:var(--line3);background:var(--panel)}
.keysPop{position:absolute;left:0;bottom:calc(100% + 10px);background:var(--panel);border:1px solid var(--line3);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);display:grid;grid-template-columns:auto auto;gap:6px var(--s3);font-size:var(--fs-s);color:var(--mute);align-items:center;
  box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:40;white-space:nowrap}
.keysPop span{color:var(--txt);text-align:right}
.fmeta{white-space:nowrap;color:var(--mute)}
.fmeta a{color:var(--mute);border-bottom:1px dotted var(--line3)}
.fmeta a:hover{color:var(--acc)}

/* ── narrow ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .foot{padding:0 var(--s4);gap:var(--s3)}
  .fmeta{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .top{grid-template-columns:auto 1fr;gap:var(--s3);height:auto;padding:var(--s2) var(--s4) 0}
  .brand em{display:none}
  .status{grid-column:1/-1;justify-content:flex-end;gap:var(--s4);height:30px;border-top:1px solid var(--line);font-size:var(--fs-xs)}
  .search{max-width:none}
  .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:var(--s2) var(--s2) var(--s3)}
  .strip .group{display:contents}
  .strip .cell{padding:var(--s2) var(--s3);min-width:0}
  .strip .val{font-size:var(--fs-l)}
  .foot .tape{display:none}
  .expIn{grid-template-columns:1fr}
  .pane{border-right:0;border-bottom:1px solid var(--line2)}
}
@media (max-width:520px){
  .fmeta{display:none}
}
/* ── phones: the table becomes a card list ─────────────────── */
@media (max-width:720px){
  .top{padding:var(--s2) var(--s3) 0}
  .status{font-size:var(--fs-xs);gap:var(--s3)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{padding:var(--s2) var(--s3);flex-wrap:wrap}
  .tabs{flex-wrap:wrap;row-gap:6px}
  #colsBtn{display:none}
  .tmeta{width:100%;font-size:var(--fs-xs)}
  .tablewrap{padding:0 var(--s3) var(--s4)}
  main::after{display:none}
  .board,.board tbody{display:block;min-width:0!important;margin:0}
  .board thead{display:none}
  .board tbody tr.r{
    display:grid;grid-template-columns:auto 1fr 1fr auto;grid-template-areas:
      "star sym sym price"
      "star spark spark chg"
      "star m1 m2 m3";
    align-items:center;column-gap:var(--s3);row-gap:6px;
    padding:var(--s3) var(--s3);margin:0 0 var(--s2);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer}
  .board tbody tr.r td{display:block;height:auto;padding:0;border:0;white-space:normal;background:none!important}
  body.heat .board tbody tr.r{background:rgb(var(--hc,124 135 152) / calc(var(--heat,0) * .30 + .04));border-color:rgb(var(--hc,124 135 152) / calc(var(--heat,0) * .5))}
  tr.r.cur td:first-child,tr.r.open td:first-child{box-shadow:none}
  tr.r.open{border-color:var(--acc)!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;margin-bottom:0}
  .c-star{grid-area:star;width:auto;align-self:start}
  .c-rank,.c-oi,.c-fund,.c-ls,.c-liq,.c-basis{display:none!important}
  .c-sym{grid-area:sym;width:auto}
  .coin .full{max-width:none}
  .c-price{grid-area:price;text-align:right;font-size:var(--fs-l)}
  .c-24h{grid-area:chg;text-align:right;font-size:var(--fs)}
  .c-spark{grid-area:spark;width:auto;padding:0!important}
  .c-spark svg{margin:0;width:120px;height:26px}
  .c-1h,.c-7d,.c-vol{text-align:left;font-size:var(--fs-xs);color:var(--mute);white-space:nowrap!important}
  .c-1h{grid-area:m1} .c-7d{grid-area:m2} .c-vol{grid-area:m3;text-align:right}
  .c-1h::before,.c-7d::before,.c-vol::before{content:attr(data-l) ' ';color:var(--dim)}
  .c-1h.up,.c-7d.up{color:var(--up)} .c-1h.dn,.c-7d.dn{color:var(--dn)}
  tr.exp{display:block}
  tr.exp td{display:block;padding:0 0 var(--s3)!important}
  .expIn{border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:none;border:1px solid var(--acc);border-top:0}
  .pane{padding:var(--s3)}
  .pane .big{height:150px}
  .kv dl{grid-template-columns:auto 1fr}
  .kv dt:nth-of-type(even){padding-left:0;border-left:0}
  .foot{height:auto;padding:var(--s2) var(--s3);flex-wrap:wrap;gap:var(--s2)}
  .foot .tape{display:none}
  .fmeta{display:block;white-space:normal;font-size:10px}
  .keysBtn{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── search clear button ─────────────────────────────────────── */
.qClear{color:var(--mute);font-size:12px;line-height:1;padding:4px 6px;border-radius:4px}
.qClear:hover{color:var(--txt);background:var(--panel)}
@media (pointer:coarse){.search .key,.search .hint{display:none}}

/* ── sort control ───────────────────────────────────────────── */
.sortSel{color:var(--mute)}
.sortSel select{appearance:none;-webkit-appearance:none;background:none;border:0;color:var(--txt);font:inherit;font-weight:500;padding:0 14px 0 2px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:right 6px top 55%,right 2px top 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.sortDir{color:var(--txt);border:1px solid var(--line2);border-radius:6px;width:26px;height:24px;margin-left:6px;font-size:12px}
.sortDir:hover{border-color:var(--line3);background:var(--panel)}

/* ── expanded: close, timeframe, selection band ─────────────── */
.expIn{position:relative}
.closeX{position:absolute;top:10px;right:12px;z-index:3;width:30px;height:30px;border-radius:50%;color:var(--mute);font-size:13px;line-height:30px;text-align:center;border:1px solid var(--line2);background:var(--panel)}
.closeX:hover{color:var(--txt);border-color:var(--line3)}
.tf{display:inline-flex;gap:2px;margin-left:var(--s2);background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:2px}
.tf button{font-size:var(--fs-xs);color:var(--mute);padding:1px 8px;border-radius:999px;line-height:16px}
.tf button.on{background:var(--acc);color:var(--acc-ink);font-weight:600}
.bigWrap{touch-action:none;user-select:none;-webkit-user-select:none}
.sel{position:absolute;top:0;bottom:0;background:var(--acc-soft);border-left:1px solid var(--acc);border-right:1px solid var(--acc);pointer-events:none;z-index:1}
.selClear{color:var(--mute);border:1px solid var(--line2);border-radius:4px;font-size:10px;padding:0 5px;line-height:15px;margin-left:4px;vertical-align:1px}
.selClear:hover{color:var(--txt)}
.pane header .hl .dim{color:var(--dim)}
.pane header.measuring{flex-wrap:wrap;white-space:normal}
.pane header.measuring .hl{flex-basis:100%;margin-left:0;margin-top:6px;overflow:visible;white-space:normal;color:var(--txt);background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:6px 10px}

/* ── motion system ──────────────────────────────────────────── */
body.materialize .c-spark .sp{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 900ms var(--ease) forwards;animation-delay:calc(var(--i,0) * 16ms + 240ms)}
body.materialize .c-spark .dot{opacity:0;animation:fadeIn 200ms linear forwards;animation-delay:calc(var(--i,0) * 16ms + 1100ms)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
.expIn.draw .big .line{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 700ms var(--ease) forwards}
.expIn.draw .big .area,.expIn.draw .big .mark,.expIn.draw .big text{opacity:0;animation:fadeIn 400ms linear forwards;animation-delay:500ms}
.expIn.draw .bars rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:grow 360ms var(--ease) forwards;animation-delay:calc(var(--j,0) * 22ms + 120ms)}
.expIn.draw .bars rect.n{transform-origin:50% 0}
@keyframes grow{to{transform:scaleY(1)}}
.expIn.draw .oi .line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 700ms var(--ease) forwards;animation-delay:200ms}
.expIn.draw .oi .area{opacity:0;animation:fadeIn 400ms linear forwards;animation-delay:600ms}
body.heat-anim .board tbody td{transition-delay:calc(var(--i,0) * 10ms)}
body.heat-anim .board tbody tr.r{transition:background-color 220ms;transition-delay:calc(var(--i,0) * 10ms)}

/* ── phones: whole page scrolls, compact chrome ─────────────── */
@media (max-width:720px), (max-height:480px) and (max-width:1000px){
  body{height:auto;min-height:100dvh;overflow:auto}
  .tablewrap{overflow:visible;padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
  .tablewrap::after{display:none}
  .top{position:sticky;top:0;z-index:30;background:var(--bg);grid-template-columns:auto 1fr;grid-template-areas:"brand status" "search search";align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) var(--s3)}
  .brand{grid-area:brand}
  .search{grid-area:search;max-width:none;height:38px}
  .search input{font-size:16px}
  .status{grid-area:status;justify-self:end;height:auto;border:0;font-size:var(--fs-xs)}
  .clock{display:none}
  .strip{display:flex;overflow-x:auto;gap:var(--s2);padding:var(--s2) var(--s3);min-height:0;scrollbar-width:none;border-bottom:1px solid var(--line)}
  .strip::-webkit-scrollbar{display:none}
  .strip .group{display:contents}
  .strip .cell{flex:0 0 auto;padding:6px 10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);gap:1px}
  .strip .lbl{font-size:10px}
  .strip .val{font-size:var(--fs-l)}
  .strip .liq .lsline{display:none}
  .toolbar{position:sticky;top:calc(var(--headH,88px) - 1px);z-index:20;background:var(--bg);padding:var(--s2) var(--s3);flex-wrap:nowrap;gap:var(--s2);border-bottom:1px solid var(--line)}
  .tabs{flex-wrap:nowrap}
  .tab{padding:6px 10px}
  .tmeta{width:auto;margin-left:auto;font-size:var(--fs-xs);white-space:nowrap;flex:0 0 auto}
  #rowsShown,.tmeta .rowsWord,#filterNote,.sortWord{display:none}
  .tabs{flex:0 0 auto;min-width:0;gap:2px}
  .modeWord{display:none}
  .tab{padding:6px 8px}
  .tab.mode{gap:6px}
  .sortSel select{max-width:112px;text-overflow:ellipsis}
  .toolbar{overflow:hidden}
  .board thead{display:none}
  .foot{padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom))}
  .closeX{top:8px;right:8px}
  .pane header{flex-wrap:wrap;white-space:normal}
  .pane header .hl{flex-basis:100%;margin-left:0;margin-top:4px;white-space:normal;overflow:visible}
}