/* ═══════════════════════════════════════════════════════════════
   Superclan Terminal — the trading-desk look
   Near-black, flat panels on hairlines, IBM Plex type, one blue for
   actions, mint for long / up and rose for short / down. Numbers that
   move are mono. Edit the tokens in :root to re-skin everything.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* surfaces */
  --bg:#06070b;                    /* the page */
  --bg-2:#0b0c10;
  --card:#101114;                  /* panels */
  --card-2:#191a20;                /* inputs, pills, raised rows */
  --hover:#1a1b22;
  --line:#22242c;                  /* hairlines between panels */
  --line-2:#2c2e38;
  /* text */
  --text:#fcfcfc;
  --text-2:#c8c9d0;
  --mute:#838596;
  --faint:#555869;
  /* brand: blue (Settings → Display offers Mint and others) */
  --brand:#586ef6;
  --brand-rgb:88,110,246;          /* the brand colour as r,g,b: rgba(var(--brand-rgb),.1) */
  --brand-2:#4a5fe6;
  --brand-hi:#6c82f7;
  --brand-ink:#ffffff;             /* text on brand-filled buttons */
  --brand-soft:rgba(var(--brand-rgb),.12);
  --brand-line:rgba(var(--brand-rgb),.4);
  --brand-text:#8898f6;
  --brand-light:#c5ceff;           /* the palest brand tint (tops of gradients) */
  --brand-deep:#3e52d6;
  --brand-glow:rgba(var(--brand-rgb),.5);
  --foam:#eef0ff;
  /* signals: long / up and short / down */
  --up:#6fe0b0;
  --up-rgb:111,224,176;
  --up-soft:rgba(var(--up-rgb),.1);
  --up-line:rgba(var(--up-rgb),.3);
  --down:#da4a7a;
  --down-rgb:218,74,122;
  --down-soft:rgba(var(--down-rgb),.11);
  --down-line:rgba(var(--down-rgb),.34);
  --warn:#f3c04f;
  --warn-soft:rgba(243,192,79,.11);
  --warn-line:rgba(243,192,79,.3);
  --blue:#5b9bff;
  --blue-soft:rgba(91,155,255,.12);
  --violet:#a78bfa;
  --cyan:#4fc3f7;
  --blush:#ff7aa2;
  /* white call-to-action buttons */
  --cta:#f2f3f5;
  --cta-ink:#0a0b0d;
  /* type */
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* shape: small radii; header controls are pills */
  --r-sm:6px;
  --r:8px;
  --r-lg:10px;
  --pill:999px;
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  /* layout */
  --nav-h:56px;
  --sub-h:38px;
  --foot-h:38px;
  --dock-w:340px;                  /* workspace column width (drag its edge) */
  --wave:none;                     /* (kept for old saved display settings; active tabs use a plain underline now) */
  color-scheme:dark;
}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@property --d{syntax:'<angle>';inherits:false;initial-value:0deg}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 var(--sans);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed;opacity:.5}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(var(--brand-rgb),.28)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-feature-settings:normal}
.up{color:var(--up)}.down{color:var(--down)}.warn{color:var(--warn)}
.mute{color:var(--mute)}.faint{color:var(--faint)}.brand{color:var(--brand)}
.ic{display:inline-block;vertical-align:middle;flex-shrink:0}
[data-ic]{display:inline-flex;align-items:center}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#262832;border-radius:9px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#333644}
*{scrollbar-color:#2a2c36 transparent;scrollbar-width:thin}

/* ───────────── motion vocabulary ───────────── */
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes sheetin{from{transform:translateY(16px) scale(.965)}}
@keyframes ripple{0%{box-shadow:0 0 0 0 var(--brand-glow)}100%{box-shadow:0 0 0 12px rgba(var(--brand-rgb),0)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(var(--up-rgb),.55)}80%,100%{box-shadow:0 0 0 7px rgba(var(--up-rgb),0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sk{0%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes flu{0%{color:var(--up);background-color:rgba(var(--up-rgb),.22);box-shadow:0 0 16px -2px rgba(var(--up-rgb),.45)}100%{background-color:rgba(var(--up-rgb),0);box-shadow:0 0 0 0 rgba(var(--up-rgb),0)}}
@keyframes fld{0%{color:var(--down);background-color:rgba(var(--down-rgb),.22);box-shadow:0 0 16px -2px rgba(var(--down-rgb),.45)}100%{background-color:rgba(var(--down-rgb),0);box-shadow:0 0 0 0 rgba(var(--down-rgb),0)}}
@keyframes wv-in{from{opacity:0;width:0}}
@keyframes wv-flow{to{background-position:12px 0}}
@keyframes zap{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-12deg)}100%{transform:none}}
@keyframes starpop{0%{transform:scale(1)}35%{transform:scale(1.45) rotate(14deg)}70%{transform:scale(.92)}100%{transform:none}}
@keyframes burst{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes vin{from{opacity:0;transform:translateY(10px)}}
@keyframes cardin{0%{opacity:0;transform:translateY(10px)}60%,100%{opacity:1;transform:none}}
@keyframes hdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.fl-up,.fl-dn{border-radius:5px}
.fl-up{animation:flu 1s var(--ease)}
.fl-dn{animation:fld 1s var(--ease)}
.skel{background:linear-gradient(100deg,var(--card-2) 30%,#1e2026 50%,var(--card-2) 70%);background-size:220% 100%;animation:sk 1.5s ease-in-out infinite;border-radius:6px}

/* ───────────── buttons & inputs ───────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r);
  font-weight:600;font-size:13px;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,opacity .15s,box-shadow .25s,transform .12s var(--ease)}
.btn-sm{height:30px;padding:0 12px;font-size:12.5px}
.btn-xs{height:24px;padding:0 9px;font-size:11.5px;border-radius:var(--r-sm)}
.btn-brand{background:var(--brand);color:var(--brand-ink)}
.btn-brand:hover{background:var(--brand-hi)}
.btn-cta{background:var(--brand);color:var(--brand-ink);font-weight:600}
.btn-cta:hover{background:var(--brand-hi)}
.btn-up{background:var(--up);color:#06070b}
.btn-up:hover{background:#86e8bf}
.btn-down{background:var(--down);color:#fff}
.btn-down:hover{background:#e25f8a}
.btn-ghost{background:var(--card-2);border:1px solid var(--line-2);color:var(--text-2)}
.btn-ghost:hover{background:var(--hover);color:var(--text);border-color:#33363f}
.btn-line-down{border:1px solid var(--down-line);color:var(--down);background:var(--down-soft)}
.btn-line-down:hover{background:var(--down);color:#fff;border-color:var(--down)}
.btn-line-up{border:1px solid var(--up-line);color:var(--up);background:var(--up-soft)}
.btn-line-up:hover{background:var(--up);color:#03160b;border-color:var(--up)}
.btn-block{width:100%;height:42px;font-size:14px;border-radius:var(--pill);font-weight:600}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--card-2);color:var(--text-2);transition:background .15s,color .15s,transform .12s var(--ease)}
.icon-btn:hover{color:var(--text);background:var(--hover)}
.icon-btn.sm{width:28px;height:28px;border:0;background:none;color:var(--mute);border-radius:var(--r-sm)}
.icon-btn.sm:hover{background:var(--hover);color:var(--text)}
.icon-btn.sm.on{color:var(--brand)}
.icon-btn.on{color:var(--warn)}
.seg{display:inline-flex;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding:2px;gap:2px}
.seg button{height:26px;padding:0 10px;border-radius:var(--r-sm);color:var(--mute);font-weight:500;font-size:12.5px;transition:background .15s,color .15s}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:#262833;color:#fff}
.field{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:var(--r);background:var(--bg-2);
  border:1px solid var(--line-2);transition:border-color .15s,box-shadow .2s}
.field:focus-within{border-color:var(--brand-line);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:15px;font-weight:600}
.field .unit{color:var(--mute);font-size:12px;font-weight:500}
.field-sm{height:32px;font-size:13px}
.field-sm input{font-size:13px;font-weight:500}
.inp{height:32px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line-2);padding:0 10px;outline:0;min-width:0;transition:border-color .15s}
.inp:focus{border-color:var(--brand-line)}
select.inp{padding-right:6px}
input[type=range]{width:100%;accent-color:var(--brand)}
input[type=checkbox]{accent-color:var(--brand)}
.chipbtn{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--card-2);
  color:var(--text-2);font-weight:500;font-size:12px;transition:background .15s,border-color .15s,color .15s,transform .12s var(--ease)}
.chipbtn:hover{color:var(--text);border-color:#33363f}
.chipbtn[aria-pressed=true]{border-color:var(--brand-line);color:var(--brand-text);background:var(--brand-soft)}
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;
  background:var(--card-2);border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
.tag.brand{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text)}
.tag.up{background:var(--up-soft);border-color:var(--up-line);color:var(--up)}
.tag.down{background:var(--down-soft);border-color:var(--down-line);color:var(--down)}
.tag.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.tag.blue{background:var(--blue-soft);border-color:rgba(91,155,255,.3);color:var(--blue)}
.newbadge{font-size:8.5px;font-weight:800;letter-spacing:.04em;color:var(--brand-ink);background:var(--brand);
  border-radius:4px;padding:1px 4px;position:absolute;top:-9px;left:50%;transform:translateX(-50%);line-height:1.3}
kbd{font:500 11px var(--mono);color:var(--mute);border:1px solid var(--line-2);border-radius:5px;padding:0 5px;height:18px;
  display:inline-flex;align-items:center;background:var(--bg)}
a.lnk,.lnk{color:var(--blue)}
a.lnk:hover{text-decoration:underline}

/* underline-style tab rows: the active tab gets a plain 2px line under its label */
.dtabs button[aria-pressed=true]::after,.mode-tabs button[aria-pressed=true]::after,.stabs button[aria-pressed=true]::after{
  content:"";position:absolute;left:var(--ul-x,0);right:var(--ul-x,0);bottom:var(--wv-b,0);height:2px;border-radius:2px;background:currentColor;pointer-events:none;
  animation:fade .2s ease-out}

/* ───────────── top nav ───────────── */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;gap:22px;padding:0 16px;
  background:var(--bg);border-bottom:1px solid var(--line);z-index:30}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;color:var(--text);padding:4px 4px 4px 0;border-radius:8px}
/* the Superclan mark: a crest with the clan peeking over its wall, the leader crowned (js/util.js → brandMark),
   in the accent you picked (Settings → Display). Its motion is in css/fx.css */
.logo-mark{display:block;flex-shrink:0;overflow:visible}
.logo-mark .lm-b{fill:var(--brand)}
.logo-mark .lm-w{fill:var(--brand-deep)}
.logo .logo-mark{width:32px;height:32px}
.logo .wordmark{font:600 20px/1 var(--sans);letter-spacing:-.02em;color:var(--text);white-space:nowrap}

.nav-tabs{display:flex;gap:2px;flex:1 1 auto;min-width:0}
.nav-tabs a{position:relative;height:34px;display:flex;align-items:center;flex-shrink:0;padding:0 12px;border-radius:8px;color:var(--text);
  font-weight:500;font-size:15px;white-space:nowrap;transition:color .15s}
/* tabs that don't fit hide here and show up under "More" (ui-shell.js → NavFit) */
.nav-tabs a.nav-hid{display:none}
.nav-tabs a .ls{display:none}
.nav-more{position:relative;display:flex;align-items:center;gap:3px;flex-shrink:0;height:34px;padding:0 9px 0 11px;border-radius:8px;color:#d4d6dc;
  font-weight:500;font-size:15px;white-space:nowrap;transition:color .15s,background .15s}
.nav-more:hover,.nav-more[aria-expanded=true]{color:#fff;background:var(--card-2)}
.nav-more .ic{opacity:.7;transition:transform .2s var(--ease)}
.nav-more[aria-expanded=true] .ic{transform:rotate(180deg)}
.nav-more[hidden]{display:none}
.nav-dd{min-width:190px;padding:5px}
.nav-dd a{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;color:var(--text-2);font-size:13.5px;font-weight:500;transition:background .12s,color .12s}
.nav-dd a:hover{background:var(--hover);color:var(--text)}
.nav-dd a .nb{font-size:8.5px;font-weight:800;letter-spacing:.04em;padding:1px 4px;border-radius:4px;background:var(--brand);color:var(--brand-ink);line-height:1.3}
.nav-tabs a:hover{color:var(--brand-text)}
.nav-tabs a.on{color:var(--brand)}
.nav-tabs a .nb{position:absolute;top:-2px;right:-7px;font-size:8.5px;font-weight:800;letter-spacing:.04em;padding:1px 4px;border-radius:4px;
  background:var(--brand);color:var(--brand-ink);line-height:1.3}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.search-pill{display:flex;align-items:center;gap:9px;height:36px;padding:0 8px 0 14px;border-radius:var(--pill);border:1px solid var(--line-2);
  background:transparent;color:var(--mute);min-width:280px;transition:border-color .15s,color .15s}
.search-pill:hover{border-color:#3a3d4a;color:var(--text-2)}
.search-pill kbd{border-radius:var(--pill);min-width:18px;justify-content:center}
.search-pill .sp-t{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode{position:relative;display:inline-flex;padding:3px;border-radius:var(--pill);border:1px solid var(--line-2);background:transparent}
.mode::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--pill);background:#262833;
  transition:transform .32s var(--spring),background .2s}
body.live .mode::before{transform:translateX(100%);background:var(--down);box-shadow:0 4px 16px -6px rgba(var(--down-rgb),.8)}
.mode button{position:relative;z-index:1;flex:1;min-width:58px;height:28px;padding:0 12px;border-radius:var(--pill);color:var(--mute);font-weight:600;font-size:12px;
  letter-spacing:.01em;transition:color .2s}
.mode button[aria-pressed=true]{color:#fff}
.wallet-pill{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--line-2);
  background:transparent;font-weight:600;transition:background .15s,border-color .15s}
#depositBtn{height:36px;padding:0 18px;border-radius:var(--pill);font-size:14px}
#watchBtn{width:36px;height:36px;border-radius:50%;background:transparent}
.wallet-pill:hover{background:var(--hover)}
body.live .wallet-pill{border-color:var(--down-line)}
/* live mode: a thin red line across the top, so real money never feels like paper */
body.live .nav{box-shadow:inset 0 2px 0 var(--down)}

/* ───────────── sub bar (watchlist strip) ───────────── */
.subbar{position:fixed;top:var(--nav-h);left:0;right:0;height:var(--sub-h);display:flex;align-items:center;gap:10px;padding:0 12px;
  border-bottom:1px solid var(--line);background:var(--bg);z-index:29}
.sub-icons{display:flex;gap:2px;padding-right:10px;border-right:1px solid var(--line)}
.watch-strip{display:flex;gap:6px;overflow:hidden;flex:1;min-width:0;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.wchip{display:flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 4px;border-radius:8px;background:var(--card-2);
  border:1px solid var(--line);font-size:12px;white-space:nowrap;cursor:pointer;transition:border-color .15s,background .15s;animation:fade .3s}
.wchip:hover{border-color:var(--line-2);background:var(--hover)}
.wchip .av{width:16px;height:16px;border-radius:5px;font-size:8px}
.wchip .av img{border-radius:5px}
.watch-strip .empty{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:12px}

/* ───────────── main view ───────────── */
.view{position:fixed;top:calc(var(--nav-h) + var(--sub-h));bottom:var(--foot-h);left:0;right:0;overflow:auto;
  container:view/inline-size;transition:left .22s var(--ease),right .22s var(--ease)}
.view.vt > *{animation:vin .34s var(--ease) backwards}
.page{padding:18px 20px 24px;max-width:1880px;margin:0 auto}
.page-fill{height:100%;display:flex;flex-direction:column;padding:16px 20px 14px;max-width:1880px;margin:0 auto}

/* ───────────── footer ───────────── */
.foot{position:fixed;bottom:0;left:0;right:0;height:var(--foot-h);display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 8px;border-top:1px solid var(--line);background:var(--bg);z-index:30;font-size:12px}
.f-l,.f-r{display:flex;align-items:center;gap:6px;min-width:0}
.f-l{flex:0 0 auto}                 /* the left never runs under the right: the tickers give way first */
.f-r{flex:1 1 auto;justify-content:flex-end}
.f-preset{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;background:var(--brand-soft);color:var(--brand-text);white-space:nowrap;flex-shrink:0;
  font-weight:600;font-size:11.5px;letter-spacing:.03em;border:0;transition:background .15s}
.f-preset:hover{background:rgba(var(--brand-rgb),.2)}
.f-link{display:flex;align-items:center;gap:5px;height:28px;padding:0 8px;border-radius:6px;color:var(--text-2);white-space:nowrap;transition:background .15s,color .15s}
.f-link:hover{background:var(--card-2);color:#fff}
.f-link.on{background:var(--card-2);color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.f-link b{font-weight:600}
.f-link .n{color:var(--brand-text);font-weight:600}
.f-link[hidden]{display:none}           /* a workspace panel this site doesn't offer (Market overview with its feeds off) */
.f-sep{width:1px;height:16px;background:var(--line-2);margin:0 4px}
/* "Powered by Hyperliquid": the perps venue, linked with Superclan's referral */
.f-hl{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:6px;color:var(--mute);white-space:nowrap;flex-shrink:0;font-size:11.5px;transition:color .15s,background .15s}
.f-hl:hover{color:var(--text);background:var(--card-2)}
.f-hlg{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#97fce4;flex-shrink:0}
.f-hlg svg{width:10px;height:10px}
.feeds{display:flex;gap:5px;align-items:center;padding:0 8px;border-right:1px solid var(--line);cursor:pointer;flex-shrink:0}
.feeds i{width:7px;height:7px;border-radius:50%;background:var(--faint);display:block;transition:background .3s}
.feeds i.ok{background:var(--up);box-shadow:0 0 6px rgba(var(--up-rgb),.6)}
.feeds i.bad{background:var(--down)}
.feeds i.wait{background:var(--warn)}
.tickers{display:flex;gap:14px;padding:0 12px 0 8px;white-space:nowrap;overflow:hidden;min-width:0;flex:0 1 auto;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent)}
.tickers > span{display:flex;gap:6px;align-items:center}
.tickers b{color:var(--text-2);font-weight:600}
.tickers .tk-ic{display:inline-flex;width:15px;height:15px;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:800}
.tickers .tk-ic svg{width:9px;height:9px}
.tickers .tk-px{padding:1px 4px;margin:-1px -4px}
.lat{display:flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:6px;background:transparent;border:1px solid var(--line);
  font-size:11.5px;color:var(--text-2);white-space:nowrap;flex-shrink:0}
.lat i{width:7px;height:7px;border-radius:50%;background:var(--up);animation:ping 2s ease-out infinite}
.lat.slow i{background:var(--warn);animation:none}
.lat.down i{background:var(--down);animation:none}
.lat .sep{color:var(--faint)}
.mode-pill{font-size:10.5px;font-weight:600;letter-spacing:.08em;padding:5px 9px;border-radius:6px;background:var(--card-2);color:var(--text-2);flex-shrink:0}
body.live .mode-pill{background:var(--down);color:#fff}

/* ───────────── avatars & chains ───────────── */
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  width:34px;height:34px;border-radius:var(--r);color:#fff;font-weight:700;font-size:13px;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -8px 16px -10px rgba(0,0,0,.4);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.av-wrap{position:relative;flex-shrink:0;display:inline-flex}
.av-wrap .chain{position:absolute;right:-4px;bottom:-4px}
.chain{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--card);color:#fff;flex-shrink:0}
.chain svg{width:9px;height:9px}
.chain.lg{width:22px;height:22px;border-width:0}
.chain.lg svg{width:12px;height:12px}
.ring{position:absolute;inset:-3px;border-radius:11px;pointer-events:none}

/* ───────────── discover table (layout core; details in discover.css) ───────────── */
.dhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.dtabs{display:flex;align-items:center;gap:22px}
.dtabs button{position:relative;font-size:16px;font-weight:500;color:var(--mute);padding:4px 0 9px;transition:color .15s}
.dtabs button:hover{color:var(--text-2)}
.dtabs button[aria-pressed=true]{color:var(--text)}
.dtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tfs{display:flex;gap:2px}
.tfs button{height:30px;padding:0 10px;border-radius:8px;color:var(--text-2);font-weight:600;font-size:13.5px;transition:background .15s,color .15s}
.tfs button:hover{background:var(--card-2)}
.tfs button[aria-pressed=true]{color:var(--text);background:var(--card-2)}
.qb-box{display:flex;align-items:center;height:38px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card-2);overflow:hidden;transition:border-color .15s,box-shadow .2s}
.qb-box label{padding:0 10px 0 14px;color:var(--mute);font-size:13px;white-space:nowrap}
.qb-box input{width:70px;background:none;border:0;outline:0;font-weight:700;font-size:14px}
.qb-box .presets{display:flex;border-left:1px solid var(--line-2);height:100%}
.qb-box .presets button{padding:0 11px;color:var(--mute);font-weight:600;font-size:12.5px;transition:color .15s,background .15s}
.qb-box .presets button:hover{color:var(--text)}
.qb-box .presets button[aria-pressed=true]{color:var(--brand);background:var(--brand-soft)}
.dbody{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.rail{display:flex;gap:6px;align-items:center}
.rail button{height:32px;min-width:32px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--text-2);
  font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--card);transition:background .15s,border-color .15s,color .15s}
.rail button:hover{background:var(--hover);color:var(--text)}
.rail button[aria-pressed=true]{border-color:var(--brand-line);background:var(--brand-soft);color:#fff}
.rail button .chain{border:0}
.tcard{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;
  container:dtable/inline-size}
.tscroll{flex:1;overflow:auto;min-height:0}
.trow{--tc-pair:minmax(300px,2.4fr);--tc-mc:minmax(96px,.85fr);--tc-liq:minmax(86px,.75fr);--tc-vol:minmax(86px,.75fr);--tc-tx:minmax(86px,.7fr);--tc-info:minmax(236px,1.5fr);--tc-act:152px;
  display:grid;grid-template-columns:var(--tc-pair) var(--tc-mc) var(--tc-liq) var(--tc-vol) var(--tc-tx) var(--tc-info) var(--tc-act);
  align-items:center;gap:0 14px;padding:0 18px}
.thead{position:sticky;top:0;z-index:2;height:42px;background:var(--card);border-bottom:1px solid var(--line);color:var(--mute);font-size:12.5px}
.thead > div{display:flex;align-items:center;gap:4px;white-space:nowrap}
.thead .sortable{cursor:pointer;transition:color .15s}
.thead .sortable:hover{color:var(--text-2)}
.thead .sorted{color:var(--text)}
.thead .r{justify-content:flex-end}
.tbody .trow{position:relative;min-height:84px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.tbody .trow::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--brand);opacity:0;transform:scaleY(.3);
  transition:opacity .2s,transform .25s var(--ease)}
.tbody .trow:hover{background:var(--hover)}
.tbody .trow:hover::before{opacity:1;transform:none}
.pinfo{display:flex;align-items:center;gap:12px;min-width:0}
.pinfo .av{width:52px;height:52px;border-radius:var(--r-lg);font-size:17px}
.pinfo .av-wrap .chain{right:-5px;bottom:-5px;width:20px;height:20px}
.pinfo .av-wrap .chain svg{width:10px;height:10px}
.pmeta{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.pl1{display:flex;align-items:center;gap:7px;min-width:0}
.pl1 .sym{font-size:15.5px;font-weight:650;white-space:nowrap;letter-spacing:-.005em}
.pl1 .nm{color:var(--mute);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pl2{display:flex;align-items:center;gap:9px;color:var(--mute);font-size:12.5px;white-space:nowrap;min-width:0}
.pl2 .age{color:var(--up);font-weight:600;font-size:13.5px}
.pl2 a,.pl2 .ib{display:inline-flex;color:var(--mute);transition:color .15s}
.pl2 a:hover,.pl2 .ib:hover{color:var(--text)}
.copy{color:var(--faint);display:inline-flex;transition:color .15s}
.copy:hover{color:var(--text)}
.copied,.copied .ic{color:var(--up)!important}
.copied .ic{animation:starpop .45s var(--ease)}
.spark{flex-shrink:0;width:96px;height:40px;display:block}
.cnum{display:flex;flex-direction:column;gap:5px;font-size:15px;font-weight:600;white-space:nowrap}
.cnum small{font-size:12.5px;font-weight:500}
.cnum .bs{font-size:12.5px;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:5px;font-size:12px;max-width:330px}
.chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 7px;border-radius:7px;border:1px solid var(--line-2);
  background:transparent;white-space:nowrap;color:var(--text-2);font-weight:500}
.chip.g{color:var(--up);border-color:rgba(var(--up-rgb),.26);background:rgba(var(--up-rgb),.04)}
.chip.r{color:var(--down);border-color:rgba(var(--down-rgb),.28);background:rgba(var(--down-rgb),.04)}
.chip.y{color:var(--warn);border-color:rgba(243,192,79,.26);background:rgba(243,192,79,.04)}
.chip.b{color:var(--brand-text);border-color:var(--brand-line);background:var(--brand-soft)}
.acts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.qbtn{height:34px;border-radius:var(--r);background:var(--brand-soft);color:var(--brand-text);border:1px solid var(--brand-line);font-weight:650;font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,color .15s,box-shadow .25s,transform .12s var(--ease)}
.qbtn:hover{background:var(--brand);color:var(--brand-ink);box-shadow:0 6px 20px -8px var(--brand-glow)}
.qbtn.zap{animation:ripple .6s var(--ease)}
.qbtn.zap .ic{animation:zap .5s var(--spring)}
.sbtn{height:28px;border-radius:var(--r);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--down-line);color:var(--down);background:var(--down-soft);transition:background .15s,color .15s,box-shadow .25s,transform .12s var(--ease)}
.sbtn:hover{background:var(--down);color:#fff;box-shadow:0 6px 20px -8px rgba(var(--down-rgb),.7)}
.star{position:relative;color:var(--faint);display:inline-flex;transition:color .15s}
.star:hover{color:var(--text-2)}
.star.on{color:var(--warn)}
.star.on svg{fill:currentColor}
.star.pop svg{animation:starpop .5s var(--ease)}
.star.pop::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--warn);animation:burst .5s var(--ease) forwards;pointer-events:none}
.empty-state{padding:60px 20px;text-align:center;color:var(--mute)}
.empty-state b{display:block;color:var(--text);font-size:15px;margin-bottom:6px}
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 18px;border-top:1px solid var(--line);color:var(--faint);font-size:12px}

/* ───────────── pulse (layout core; details in pulse.css) ───────────── */
.pulse-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;flex:1;min-height:0}
.pcol{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.pcol-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pcol-h h3{margin:0;font-size:15px;font-weight:650;display:flex;align-items:center;gap:8px;letter-spacing:-.005em}
.pcol-h .cnt{color:var(--faint);font-weight:500;font-size:12px}
.pcol-b{flex:1;overflow:auto;min-height:0}
.pcard{position:relative;display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.pcard:hover{background:var(--hover)}
.pc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pc-l1{display:flex;align-items:center;gap:6px;min-width:0}
.pc-l1 .sym{font-weight:650;font-size:14.5px;white-space:nowrap}
.pc-l1 .nm{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pc-l2{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:12px;white-space:nowrap}
.pc-l2 .age{color:var(--up);font-weight:600}
.pc-l3{display:flex;gap:4px;flex-wrap:wrap;font-size:11px}
.pc-l3 .chip{height:20px;padding:0 5px;border-radius:6px}
.pc-r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:4px;font-size:12px;white-space:nowrap}
.pc-r .mc{font-size:14px;font-weight:650}
.pc-r .k{color:var(--faint);font-size:11px;margin-right:3px}
.bond{height:5px;border-radius:5px;background:var(--line-2);overflow:hidden;width:100%}
.bond i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand));border-radius:5px;transition:width .6s var(--ease)}
.pcard .qbtn{height:26px;padding:0 10px;font-size:12px}

/* ───────────── tables, page heads, stats, panels ───────────── */
.ptable{width:100%;border-collapse:collapse}
.ptable th{position:sticky;top:0;background:var(--card);z-index:1;text-align:left;font-weight:500;color:var(--mute);font-size:12px;
  padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ptable th.r,.ptable td.r{text-align:right}
.ptable th.sortable{cursor:pointer}
.ptable th.sortable:hover{color:var(--text-2)}
.ptable th.sorted{color:var(--text)}
.ptable td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px;transition:background .15s}
.ptable tr.click{cursor:pointer}
.ptable tr.click:hover td{background:var(--hover)}
.mkt{display:flex;align-items:center;gap:10px}
.mkt .av{width:30px;height:30px;border-radius:8px;font-size:11px}
.mkt b{font-weight:600}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.page-title h1{margin:0;font-family:var(--display);font-size:24px;font-weight:650;letter-spacing:-.025em}
.page-title p{margin:5px 0 0;color:var(--mute);max-width:680px;line-height:1.55}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.stat{position:relative;padding:14px 15px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.stat .k{color:var(--mute);font-size:12px;font-weight:500}
.stat .v{font-family:var(--display);font-size:21px;font-weight:650;margin-top:5px;letter-spacing:-.02em}
.stat .s{font-size:12px;margin-top:3px;color:var(--mute)}
.stat-bar{display:flex;gap:2px;height:4px;margin-top:11px;border-radius:4px;overflow:hidden;background:var(--line)}
.stat-bar i{display:block;height:100%;border-radius:4px;transition:width .7s var(--ease)}
.stat-bar i.up{background:var(--up)}.stat-bar i.down{background:var(--down)}
.stat-bar i.s0{background:var(--brand)}.stat-bar i.s1{background:#38b873}.stat-bar i.s2{background:#2b8a59}.stat-bar i.s3{background:#226a46}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ptabs{display:flex;gap:4px}
.ptabs button{height:30px;padding:0 11px;border-radius:8px;color:var(--mute);font-weight:500;transition:background .15s,color .15s}
.ptabs button:hover{color:var(--text)}
.ptabs button[aria-pressed=true]{background:#202228;color:var(--text)}
.ptabs button .n{color:var(--faint);margin-left:4px;font-size:11.5px}
.side-long{color:var(--up);font-weight:600}
.side-short{color:var(--down);font-weight:600}
.minibtns{display:inline-flex;gap:4px}

/* ───────────── token page core (details in token.css) ───────────── */
.tp{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;max-width:1880px;margin:0 auto;min-height:100%}
.tp-head{display:flex;align-items:center;gap:18px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);flex-wrap:wrap}
.tp-id{display:flex;align-items:center;gap:12px;min-width:0}
.tp-id .av{width:48px;height:48px;border-radius:var(--r-lg);font-size:16px}
.tp-id h1{margin:0;font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.tp-id h1 .nm{font-weight:500;color:var(--mute);font-size:14px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-id .sub{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:12px;margin-top:3px;flex-wrap:wrap}
.tp-stats{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
.tp-stats > div{display:flex;flex-direction:column;gap:2px;min-width:64px}
.tp-stats .k{color:var(--mute);font-size:11px}
.tp-stats .v{font-weight:600;font-size:14px;white-space:nowrap}
.tp-stats .v.big{font-family:var(--display);font-size:22px}
.tp-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;flex:1;min-height:0}
.tp-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.chartbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.chart-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chart{height:460px;position:relative}
.chart .note{position:absolute;left:12px;top:10px;z-index:3;color:var(--mute);font-size:11.5px;pointer-events:none}
/* faint Superclan mark in the middle of every chart */
.chart::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CclipPath id='w'%3E%3Cpath d='M32 3.5C40.5 7 48.5 8.2 55.6 8.2c1.6 0 2.9 1.3 2.9 2.9V30c0 15-10.6 25.9-26.5 31C16.1 55.9 5.5 45 5.5 30V11.1c0-1.6 1.3-2.9 2.9-2.9C15.5 8.2 23.5 7 32 3.5z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M32 3.5C40.5 7 48.5 8.2 55.6 8.2c1.6 0 2.9 1.3 2.9 2.9V30c0 15-10.6 25.9-26.5 31C16.1 55.9 5.5 45 5.5 30V11.1c0-1.6 1.3-2.9 2.9-2.9C15.5 8.2 23.5 7 32 3.5z' fill='%23fff'/%3E%3Cg clip-path='url(%23w)'%3E%3Ccircle cx='15.4' cy='37.8' r='8.7' fill='%23000'/%3E%3Ccircle cx='32' cy='34.6' r='11.2' fill='%23000'/%3E%3Ccircle cx='48.6' cy='37.8' r='8.7' fill='%23000'/%3E%3Cpath d='M24.4 25.9l-1.3-8.1 5.3 3.9L32 14.8l3.6 6.9 5.3-3.9-1.3 8.1z' fill='%23000'/%3E%3Cpath d='M0 45.4h64V64H0z' fill='%23fff'/%3E%3Cpath d='M26.6 56l5.4-4.5 5.4 4.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") center 46%/min(96px,18%) auto no-repeat}
.chart .ovl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mute);z-index:4}
.tp-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:14px}
.box h4{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--text-2);display:flex;align-items:center;justify-content:space-between;gap:8px}
.trade-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line);margin-bottom:10px}
.trade-tabs button{height:36px;border-radius:9px;font-weight:650;color:var(--mute);transition:background .2s,color .2s,box-shadow .25s}
.trade-tabs button:hover{color:var(--text)}
.trade-tabs button[aria-pressed=true].t-buy,.trade-tabs button[aria-pressed=true].t-long{background:var(--up);color:#03160b;box-shadow:0 6px 18px -10px rgba(var(--up-rgb),.8)}
.trade-tabs button[aria-pressed=true].t-sell,.trade-tabs button[aria-pressed=true].t-short{background:var(--down);color:#fff;box-shadow:0 6px 18px -10px rgba(var(--down-rgb),.8)}
.mode-tabs{display:flex;gap:18px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.mode-tabs button{position:relative;padding:0 0 10px;font-weight:600;color:var(--mute);display:flex;align-items:center;gap:5px;transition:color .15s}
.mode-tabs button:hover{color:var(--text-2)}
.mode-tabs button[aria-pressed=true]{color:var(--text);--wv-b:-1px}
.otype{display:flex;gap:12px;margin-bottom:10px;font-size:12.5px}
.otype button{color:var(--mute);font-weight:500;transition:color .15s}
.otype button[aria-pressed=true]{color:var(--text)}
.presets-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 10px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;color:var(--mute)}
.kv b{color:var(--text);font-weight:500;text-align:right}
.lev{margin:10px 0 4px}
.lev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12.5px;color:var(--mute)}
.lev-top b{color:var(--text);font-size:14px}
.lev-marks{display:flex;gap:5px;margin-top:6px}
.lev-marks button{flex:1;height:24px;border-radius:6px;border:1px solid var(--line-2);color:var(--mute);font-size:11.5px;font-weight:600;transition:all .15s}
.lev-marks button:hover{color:var(--text)}
.lev-marks button[aria-pressed=true]{border-color:var(--brand-line);color:var(--brand-text);background:var(--brand-soft)}
.tpsl{margin:8px 0;border-top:1px dashed var(--line-2);padding-top:8px}
.tpsl-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);cursor:pointer;user-select:none}
.notice{font-size:12px;color:var(--mute);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;line-height:1.5}
.notice.warn{border-color:var(--warn-line);color:#e9d3a4;background:rgba(243,192,79,.06)}
.notice.live{border-color:var(--down-line);color:#f3c2cc;background:rgba(var(--down-rgb),.06)}
.notice.ok{border-color:var(--up-line);color:#c4f1d6;background:var(--up-soft)}
.notice b{color:var(--text)}
.err{color:var(--down);font-size:12px;margin-top:6px;min-height:0}
.infogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.infocell{border:1px solid var(--line);border-radius:var(--r);padding:9px 6px;text-align:center;background:var(--bg-2)}
.infocell .v{font-size:13px;font-weight:650}
.infocell .k{color:var(--faint);font-size:10.5px;margin-top:2px}
.links{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.links a{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:var(--r-sm);border:1px solid var(--line-2);color:var(--text-2);font-size:12px;transition:all .15s}
.links a:hover{color:var(--text);border-color:#33363f;background:var(--hover)}
.bsbar{display:flex;height:5px;border-radius:5px;overflow:hidden;background:var(--down);margin:6px 0 4px;gap:2px}
.bsbar i{display:block;background:var(--up);border-radius:5px;transition:width .5s var(--ease)}
.chg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.chg-grid button{border:1px solid var(--line);border-radius:9px;padding:7px 4px;background:var(--bg-2);text-align:center;transition:border-color .15s,background .15s}
.chg-grid button[aria-pressed=true]{border-color:var(--brand-line);background:var(--brand-soft)}
.chg-grid .k{color:var(--faint);font-size:10.5px}
.chg-grid .v{font-weight:650;font-size:12.5px}
.tabbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;min-height:260px;display:flex;flex-direction:column}
.tabbox .panel-h{padding:6px 10px}
.tabbody{max-height:420px;overflow:auto}
.book{display:grid;grid-template-columns:1fr 1fr;gap:0;font-size:12px}
.book .side{display:flex;flex-direction:column}
.book .lv{position:relative;display:flex;justify-content:space-between;padding:3px 12px}
.book .lv i{position:absolute;top:0;bottom:0;opacity:.14;transition:width .4s var(--ease)}
.book .bid i{right:0;background:var(--up)}
.book .ask i{left:0;background:var(--down)}
.book .lv span{position:relative}

/* ───────────── overlays ───────────── */
.ovl-bg{position:fixed;inset:0;background:rgba(3,4,6,.66);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);
  z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 16px;animation:fade .16s ease-out}
/* only the body scrolls: the title bar and the buttons stay in view on any sheet, however long */
.sheet{width:100%;max-width:460px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--card);
  box-shadow:0 40px 100px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset;animation:sheetin .34s var(--spring),fade .14s ease-out}
.sheet.wide{max-width:760px}
.sheet.mid{max-width:560px}
.sheet-h{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sheet-h h3{margin:0;font-size:15px;font-weight:650;display:flex;align-items:center;gap:8px;letter-spacing:-.005em}
.sheet-b{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 16px}
.sheet-f{display:flex;flex-shrink:0;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.search-in{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--mute)}
.search-in input{flex:1;background:none;border:0;outline:0;font-size:16px;color:var(--text)}
.sres{max-height:60vh;overflow:auto}
.sres .grp{padding:10px 16px 4px;color:var(--faint);font-size:11.5px;font-weight:600}
.sitem{position:relative;display:flex;align-items:center;gap:11px;padding:9px 16px;cursor:pointer;transition:background .12s}
.sitem:hover,.sitem.sel{background:var(--hover)}
.sitem.sel::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--brand)}
.sitem .av{width:32px;height:32px;border-radius:9px;font-size:11px}
.sitem .m{flex:1;min-width:0}
.sitem .m b{font-weight:600}
.sitem .m div{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .r{text-align:right;font-size:12px}
/* Settings: the tab bar stays put while a long tab scrolls under it; on a narrow screen the strip scrolls sideways
   and fades on the side that has more tabs */
.stabs-bar{position:sticky;top:-14px;z-index:2;margin:-14px -16px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.stabs{display:flex;gap:4px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.stabs::-webkit-scrollbar{display:none}
.stabs.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.stabs.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.stabs.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.stabs button{position:relative;padding:8px 10px 12px;color:var(--mute);font-weight:500;white-space:nowrap;transition:color .15s}
.stabs button:hover{color:var(--text-2)}
.stabs button[aria-pressed=true]{color:var(--text);--wv-b:0;--ul-x:10px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.legal-row a{color:var(--brand-text);text-decoration:none}
.legal-row a:hover{text-decoration:underline}
/* Settings → Account → Error reports (monitor.js) */
.err-list{display:flex;flex-direction:column;gap:6px;margin:2px 0 10px;padding:10px;border-radius:10px;background:var(--bg-2,rgba(255,255,255,.03));border:1px solid var(--line,rgba(255,255,255,.08));max-height:260px;overflow:auto}
.err-it{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:baseline;font-size:12px}
.err-it .tag{grid-row:span 2;align-self:start}
.err-it b{font-weight:500;overflow-wrap:anywhere}
.err-it .mute{font-size:11px}
.srow .t b{display:block;font-weight:600}
.srow .t span{color:var(--mute);font-size:12px}
.srow .t{min-width:0}
.srow .t code{overflow-wrap:anywhere}         /* a long config key wraps instead of pushing the row wider than the sheet */
.srow > .tag{flex-shrink:0}
/* Settings → Short markets: add a pair (chain, address, leverage, Add); on a phone the address gets its own row */
.sm-add{display:grid;grid-template-columns:130px minmax(0,1fr) 90px auto;gap:8px;margin-top:10px}
@media (max-width:640px){ .sm-add{grid-template-columns:minmax(0,1fr) 76px auto} .sm-add [data-add="addr"]{grid-column:1/-1;order:-1} }
/* on/off settings are switches */
.srow > input[type=checkbox]{-webkit-appearance:none;appearance:none;width:34px;height:20px;margin:0;border-radius:999px;background:var(--line-2);position:relative;cursor:pointer;flex-shrink:0;
  transition:background .18s,box-shadow .18s}
.srow > input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#c9cbd2;box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .26s var(--spring),background .18s}
.srow > input[type=checkbox]:hover{box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.srow > input[type=checkbox]:checked{background:var(--brand)}
.srow > input[type=checkbox]:checked::after{transform:translateX(14px);background:var(--brand-ink)}
.srow > input[type=checkbox]:focus-visible{outline:2px solid var(--brand-line);outline-offset:2px}
.preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.preset-card{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:10px;display:flex;flex-direction:column;gap:7px;transition:border-color .2s,background .2s}
.preset-card.on{border-color:var(--brand-line);background:var(--brand-soft)}
.preset-card label{font-size:11px;color:var(--mute)}
.preset-card .inp{width:100%}
.preset-card select.inp{padding-right:6px}
.preset-card .pc-two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.preset-card .pc-two label{display:flex;flex-direction:column;gap:4px}
.preset-card .pc-chk{font-size:11.5px;color:var(--text-2)}
.wl{display:flex;flex-direction:column;gap:6px}
.wopt{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-2);font-weight:600;
  transition:border-color .15s,background .15s,transform .12s var(--ease)}
.wopt:hover{border-color:var(--brand-line);background:var(--hover)}
.wopt img{width:22px;height:22px;border-radius:6px}
.wopt .s{margin-left:auto;color:var(--mute);font-weight:500;font-size:12px}
.wopt:hover .s{color:var(--brand-text)}
.dd{position:fixed;z-index:65;min-width:240px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--card);
  box-shadow:0 24px 64px -12px rgba(0,0,0,.85);padding:6px;animation:pop .18s var(--ease);transform-origin:top right}
.dd .row{display:flex;justify-content:space-between;gap:16px;padding:7px 9px;font-size:12.5px;color:var(--mute)}
.dd .row b{color:var(--text);font-weight:600}
.dd hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.dd button.item{display:flex;width:100%;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;color:var(--text-2);text-align:left;transition:background .12s,color .12s}
.dd button.item:hover{background:var(--hover);color:var(--text)}
.confirm-tbl .kv{font-size:13px;padding:5px 0}
.dep-h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.dep-h p{margin:0;color:var(--mute);line-height:1.5}

/* ───────────── toasts ───────────── */
.toasts{position:fixed;right:14px;bottom:calc(var(--foot-h) + 12px);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{position:relative;pointer-events:auto;max-width:370px;min-width:240px;display:flex;gap:11px;align-items:flex-start;padding:12px 14px 13px 12px;border-radius:13px;
  background:#121317;border:1px solid var(--line-2);box-shadow:0 18px 50px -12px rgba(0,0,0,.8);font-size:12.5px;overflow:hidden;cursor:pointer;
  animation:tin .42s var(--spring),fade .16s ease-out}
.toast .ti{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand)}
.toast.t-ok .ti{background:var(--up-soft);color:var(--up);box-shadow:0 0 0 0 rgba(var(--up-rgb),.5);animation:ping 1.2s ease-out .15s}
.toast.t-err .ti{background:var(--down-soft);color:var(--down)}
.toast.t-warn .ti{background:var(--warn-soft);color:var(--warn)}
.toast.t-ok .ti path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s var(--ease) .12s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.toast.t-err{border-color:var(--down-line)}.toast.t-warn{border-color:var(--warn-line)}.toast.t-ok{border-color:rgba(var(--up-rgb),.24)}
.toast b{display:block;font-size:13px;margin:3px 0 1px}
.toast > div{min-width:0;color:var(--text-2);line-height:1.45}
.toast a{color:var(--brand-text);text-decoration:underline}
.toast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:.5;transform-origin:left;
  animation:tlife var(--life,4200ms) linear forwards}
.toast.t-ok::after{color:var(--up)}.toast.t-err::after{color:var(--down)}.toast.t-warn::after{color:var(--warn)}.toast.t-info::after{color:var(--brand)}
@keyframes tlife{to{transform:scaleX(0)}}
.toast.out{animation:tout .22s ease-in forwards}
@keyframes tin{from{transform:translateX(28px) scale(.96)}}
@keyframes tout{to{transform:translateX(26px);opacity:0}}

/* ───────────── empty states (emptyState in util.js) ───────────── */
.m-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:48px 22px;color:var(--mute);font-size:12.5px}
.m-empty b{color:var(--text);font-size:15px;font-weight:650;letter-spacing:-.005em}
.m-empty p{margin:0;max-width:400px;line-height:1.55}
.m-empty .mb{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* ───────────── workspace: a column of panels beside the page (ui-workspace.js) ───────────── */
.dock{position:fixed;top:calc(var(--nav-h) + var(--sub-h));bottom:var(--foot-h);left:0;width:var(--dock-w);z-index:28;display:flex;flex-direction:column;
  background:var(--bg);border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .28s var(--ease),visibility 0s .28s;visibility:hidden}
body.dock-right .dock{left:auto;right:0;border-right:0;border-left:1px solid var(--line);transform:translateX(102%)}
body.dock-open .dock{transform:none;visibility:visible;transition:transform .28s var(--ease),visibility 0s}
.ws-bar{display:flex;align-items:center;gap:2px;height:36px;padding:0 6px 0 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.ws-t{display:flex;align-items:center;gap:7px;flex:1;min-width:0;color:var(--mute);font-size:12px;font-weight:600;white-space:nowrap}
.icon-btn.xs{width:26px;height:26px;border:0;background:none;color:var(--mute);border-radius:7px}
.icon-btn.xs:hover{background:var(--hover);color:var(--text)}
.ws-stack{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.wp{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.wp:last-child{border-bottom:1px solid var(--line)}
.wp-h{display:flex;align-items:center;gap:2px;height:36px;padding:0 4px 0 2px;flex-shrink:0;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}
.wp-grip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:28px;border-radius:6px;color:var(--faint);opacity:.55;cursor:grab;touch-action:none;transition:opacity .15s,color .15s,background .15s}
.wp:hover .wp-grip,.wp-grip:focus-visible{opacity:1}
.wp-grip:hover{color:var(--text-2);background:var(--hover)}
.wp-t{display:flex;align-items:center;gap:7px;flex:1;min-width:0;height:28px;padding:0 6px;border-radius:7px;color:var(--text-2);text-align:left}
.wp-t:hover{color:var(--text)}
.wp-t b{font-size:12.5px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-t .n{color:var(--faint);font-size:11.5px;font-weight:600}
.wp-t .ic{color:var(--mute);flex-shrink:0}
.wp-live,.wp-sub .wp-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5);animation:wplive 2s ease-out infinite;flex-shrink:0}
@keyframes wplive{0%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5)}70%,100%{box-shadow:0 0 0 6px rgba(var(--brand-rgb),0)}}
.wp-tools{display:flex;align-items:center;gap:0;flex-shrink:0;opacity:.7;transition:opacity .15s}
.wp:hover .wp-tools,.wp-tools:focus-within{opacity:1}
.wp-tools .icon-btn.xs{width:24px;height:24px}
.wp-tools [data-wpa=min] .ic{transition:transform .22s var(--ease)}
.wp.min .wp-tools [data-wpa=min] .ic{transform:rotate(-90deg)}
.wp-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mute);flex-shrink:0}
.wp-sub > span{display:inline-flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-sub b{color:var(--text)}
.wp-b{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain}
.wp.min .wp-sub,.wp.min .wp-b{display:none}
.wp.min .wp-h{border-bottom-color:transparent}
.wp.min + .wp-split{flex-basis:1px}
.wp.lifted{z-index:5;background:var(--card);box-shadow:0 18px 48px -14px rgba(0,0,0,.9),0 0 0 1px var(--brand-line);border-radius:10px}
.wp.lifted .wp-grip{opacity:1;color:var(--brand)}
.wp-split{position:relative;flex:0 0 6px;margin:-3px 0;z-index:2;cursor:row-resize;touch-action:none;outline:none}
.wp-split::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--brand);opacity:0;transition:opacity .15s}
.wp-split:hover::after,.wp-split.on::after,.wp-split:focus-visible::after{opacity:.75}
.wp-split.off{cursor:default;pointer-events:none}
.ws-maxed .wp.min .wp-tools [data-wpa=min] .ic{transform:rotate(-90deg)}
.ws-none{margin:auto 0}
.ws-edge{position:absolute;top:0;bottom:0;right:-4px;width:8px;z-index:3;cursor:col-resize;touch-action:none;outline:none}
.ws-edge::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--brand);opacity:0;transition:opacity .15s}
.ws-edge:hover::after,.ws-edge.on::after,.ws-edge:focus-visible::after{opacity:.7}
body.dock-right .ws-edge{right:auto;left:-4px}
body.ws-dragging{-webkit-user-select:none;user-select:none}
body.ws-dragging .view{pointer-events:none;transition:none}
body.ws-dragging .wp-grip{cursor:grabbing}
.ws-menu{min-width:220px}
.ws-menu .item .ic{color:var(--mute)}
.dk-row{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;min-height:56px;transition:background .15s}
.dk-row:hover{background:var(--hover)}
.dk-row .av{width:34px;height:34px;border-radius:9px;font-size:12px}
.dk-row .av-wrap .chain{width:14px;height:14px;right:-3px;bottom:-3px}
.dk-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dk-m .l1{display:flex;align-items:center;gap:6px;min-width:0}
.dk-m .l1 b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
.dk-m .l1 span{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dk-m .l2{display:flex;align-items:center;gap:5px;color:var(--mute);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-m .l2>span:not(.av){min-width:0;overflow:hidden;text-overflow:ellipsis}   /* a flex line can't ellipsize its text, so the value in it does */
.dk-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12.5px;white-space:nowrap}
.dk-r b{font-weight:600}
.dk-r > span:not([class]){color:var(--faint);font-size:11px}
.dk-act{display:flex;gap:4px;margin-left:2px}
.dk-act button{height:26px;min-width:26px;padding:0 7px;border-radius:7px;font-size:11.5px;font-weight:600}
.dk-empty{padding:32px 22px;text-align:center;color:var(--mute);font-size:12.5px;line-height:1.6}
.dk-empty b{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.dk-empty .btn{margin-top:12px}
.dk-sec{padding:10px 12px 4px;color:var(--faint);font-size:11.5px;font-weight:600}
.dk-row .buddy{flex-shrink:0}
.sm-row .l1 span{font-weight:600}
@media (min-width:1280px){
  body.dock-open .view{left:var(--dock-w)}
  body.dock-open.dock-right .view{left:0;right:var(--dock-w)}
  body.dock-open.dock-right .toasts{right:calc(var(--dock-w) + 14px)}
}
@media (max-width:1279px){
  .dock{box-shadow:24px 0 60px -20px rgba(0,0,0,.8)}
  body.dock-right .dock{box-shadow:-24px 0 60px -20px rgba(0,0,0,.8)}
}

/* ───────────── display preferences (Settings → Display) ───────────── */
/* density: how much fits on screen */
body.dens-compact .tbody .trow{min-height:64px}
body.dens-compact .pinfo{gap:10px}
body.dens-compact .pinfo .av{width:40px;height:40px;border-radius:10px;font-size:14px}
body.dens-compact .pmeta{gap:4px}
body.dens-compact .dk-row{min-height:46px;padding:6px 12px}
body.dens-compact .dk-row .av{width:28px;height:28px;border-radius:8px}
body.dens-compact .wp-h{height:32px}
body.dens-compact .pcard{padding-top:9px;padding-bottom:9px}
body.dens-comfy .tbody .trow{min-height:96px}
body.dens-comfy .pinfo .av{width:58px;height:58px}
body.dens-comfy .dk-row{min-height:64px;padding:12px 14px}
body.dens-comfy .pcard{padding-top:16px;padding-bottom:16px}
/* motion: off here even when the system allows it; price changes still light up */
body.motion-reduced *,body.motion-reduced *::before,body.motion-reduced *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
body.motion-reduced .fl-up,body.motion-reduced .fl-dn{animation-duration:1s!important}
body.motion-reduced .toast::after{animation-duration:var(--life,4200ms)!important}
body.no-flash .fl-up,body.no-flash .fl-dn{animation:none!important}
body.no-tickers .tickers{display:none}
/* Trenches columns the viewer switched off */
body.tc-hide-mc .trow{--tc-mc: ;}
body.tc-hide-liq .trow{--tc-liq: ;}
body.tc-hide-vol .trow{--tc-vol: ;}
body.tc-hide-tx .trow{--tc-tx: ;}
body.tc-hide-info .trow{--tc-info: ;}
body.tc-hide-mc .trow > .c-mc,body.tc-hide-liq .trow > .c-liq,body.tc-hide-vol .trow > .c-vol,body.tc-hide-tx .trow > .c-tx,body.tc-hide-info .trow > .c-info{display:none}

/* Settings → Display */
.ds-preview{display:flex;flex-direction:column;gap:6px;padding:12px;margin:0 0 6px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--bg-2)}
.dsp-row{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:9px;background:var(--card)}
body.dens-compact .dsp-row{height:28px}
body.dens-comfy .dsp-row{height:40px}
.dsp-av{width:20px;height:20px;border-radius:6px;background:linear-gradient(140deg,var(--brand-light),var(--brand) 60%,var(--brand-2));flex-shrink:0}
.dsp-l{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.dsp-l i{display:block;height:5px;border-radius:3px;background:var(--line-2);width:60%}
.dsp-l i+i{width:36%;opacity:.6}
.dsp-up,.dsp-dn{font-size:12px;font-weight:650;width:54px;text-align:right}
.dsp-up{color:var(--up)}
.dsp-dn{color:var(--down)}
.dsp-btn{height:22px;padding:0 10px;border-radius:6px;background:var(--brand);color:var(--brand-ink);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center}
.ds-h{margin:18px 0 4px;font-size:13px}
.ds-sws{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ds-sw{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:var(--card-2);color:var(--text-2);font-size:12px;font-weight:600;
  transition:border-color .15s,background .15s,color .15s}
.ds-sw i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ds-sw:hover{color:var(--text);border-color:var(--line-2);background:var(--hover)}
.ds-sw.on{color:#fff;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.ds-seg button{display:inline-flex;align-items:center;gap:6px}
.ds-dot{width:8px;height:8px;border-radius:50%}
.ds-dot.g{background:var(--up)}
.ds-dot.r{background:var(--down)}
.ds-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-top:6px}
.ds-col{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;font-size:12.5px;color:var(--text-2)}
.ds-col:hover{border-color:var(--line-2);color:var(--text)}
.ds-col input{accent-color:var(--brand)}
.ds-note{margin:8px 0 0;font-size:11.5px;color:var(--faint)}
@media (max-width:640px){
  .ds-sws{justify-content:flex-start}
  .srow:has(.ds-seg),.srow:has(.ds-sws){flex-direction:column;align-items:stretch;gap:8px}
  .srow .ds-seg{flex-wrap:nowrap;width:100%}
  .srow .ds-seg button{flex:1 1 0;justify-content:center;min-width:0;padding:0 6px}
}

/* ───────────── responsive: content follows the space the view really has ───────────── */
@container view (max-width:1500px){
  .trow{--tc-pair:minmax(270px,2.3fr);--tc-mc:minmax(90px,.85fr);--tc-liq:minmax(80px,.75fr);--tc-vol:minmax(80px,.75fr);--tc-tx:minmax(76px,.65fr);--tc-info:minmax(214px,1.4fr);--tc-act:140px;gap:0 10px}
  .spark{width:80px}
}
@container view (max-width:1280px){
  .tp-grid{grid-template-columns:minmax(0,1fr) 330px}
}
@container view (max-width:1060px){
  .pulse-grid{grid-template-columns:1fr;overflow:auto}
  .pcol{min-height:420px}
  .tp-grid{grid-template-columns:1fr}
}
@container dtable (max-width:1180px){
  .trow{--tc-pair:minmax(250px,2.2fr);--tc-mc:minmax(90px,.9fr);--tc-liq:minmax(80px,.8fr);--tc-vol:minmax(80px,.8fr);--tc-tx:minmax(76px,.7fr);--tc-info: ;--tc-act:140px}
  .trow > .c-info{display:none}
}
@container dtable (max-width:820px){
  .trow{--tc-pair:minmax(220px,2fr);--tc-mc:minmax(86px,1fr);--tc-liq: ;--tc-vol:minmax(80px,.9fr);--tc-tx: ;--tc-info: ;--tc-act:128px}
  .trow > .c-liq,.trow > .c-tx,.trow > .c-info{display:none}
  .spark{display:none}
}
@container view (max-width:640px){
  .page,.page-fill,.tp{padding-left:12px;padding-right:12px}
  .dtabs{gap:14px}
  .dtabs button{font-size:16px}
  .rail{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .pinfo .av{width:44px;height:44px}
  .pl1 .nm{display:none}
  .pl2 .xtra{display:none}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .tp-stats{gap:12px}
  .chart{height:340px}
}
@container dtable (max-width:600px){
  .trow{--tc-pair:minmax(0,1fr);--tc-mc:92px;--tc-liq: ;--tc-vol: ;--tc-tx: ;--tc-info: ;--tc-act:112px;padding:0 12px;gap:0 8px}
  .trow > .c-vol{display:none}
}
/* shell (outside the view) still follows the window */
@media (max-width:1760px){
  /* the nav already links these; the footer keeps PnL and the workspace toggles */
  .f-l a.f-link[href="#/pulse"],.f-l a.f-link[href="#/perps"],.f-l a.f-link[href="#/predict"],.f-l a.f-link[href="#/traders"]{display:none}
}
@media (max-width:1560px){
  .search-pill{min-width:210px}
  .f-l [data-dock="tracked"] .fl-t,.f-l [data-dock="smart"] .fl-t,.f-l [data-dock="market"] .fl-t{display:none}
}
@media (max-width:1366px){
  .f-l [data-dock] .fl-t{display:none}
  .f-l [data-dock]{padding:0 8px}
}
@media (max-width:1280px){
  .nav-tabs a .lf{display:none}
  .nav-tabs a .ls{display:inline}
  .search-pill{min-width:0}
  .search-pill .sp-t{display:none}
}
@media (max-width:1100px){
  .logo .wordmark{display:none}
}
@media (max-width:1380px){
  .f-hlt{display:none}                 /* the glyph alone still links to Hyperliquid */
}
@media (max-width:1060px){
  .nav{gap:14px}
  .nav-tabs a{padding:0 9px;font-size:14px}
  .tickers{display:none}
}
@media (max-width:900px){
  /* still one tap away from the workspace's + menu */
  .f-l [data-dock="tracked"],.f-l [data-dock="smart"],.f-l [data-dock="market"]{display:none}
  .lat .fps{display:none}
}
@media (max-width:860px){
  .depo-h,#depositBtn{display:none}
  .f-link span+span,.f-sep{display:none}
  .logo .wordmark{display:none}
}
@media (max-width:760px){
  /* the Clan toggle needs the room: Activity stays one tap away in the workspace's + menu */
  .f-l [data-dock="act"]{display:none}
  .f-hl{display:none}
}
@media (max-width:640px){
  :root{--nav-h:92px}
  .nav{flex-wrap:wrap;height:var(--nav-h);align-content:center;padding:6px 10px;row-gap:6px;gap:8px}
  .logo .logo-mark{width:28px;height:28px}
  .nav-tabs{order:3;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .nav-tabs a{height:30px;padding:0 10px;flex-shrink:0}
  .nav-tabs a .nb{position:static;margin-left:5px}           /* the row scrolls: a badge above the label would sit on it */
  .nav-r{gap:6px}
  .search-pill{padding:0 10px;height:34px}
  .search-pill kbd{display:none}
  .mode button{height:28px;padding:0 10px;min-width:50px}
  .wallet-pill{height:34px;padding:0 10px;gap:6px}
  .wallet-pill > span:last-child{display:none}
  #watchBtn{display:none}
  .f-l .f-link{display:none}
  .feeds{border:0}
  .dock{width:100%}
  .ws-edge{display:none}
  .lat .fps{display:none}
  .toasts{left:10px;right:10px;align-items:stretch}
  .toast{max-width:none}
}

/* ───────────── fees: trade-panel breakdown, footer chip, Settings → Fees ───────────── */
.fee-tg{display:inline-flex;align-items:center;gap:4px;padding:0;color:inherit;font:inherit}
.fee-tg .ic{transition:transform .2s var(--ease);opacity:.7}
.fee-tg[aria-expanded=true] .ic{transform:rotate(180deg)}
.fee-tg:hover{color:var(--text-2)}
.kv.sub{padding:1px 0 1px 12px;font-size:11.5px;color:var(--faint);position:relative;animation:fade .2s var(--ease)}
.kv.sub::before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:1px;background:var(--line-2)}
.kv.sub > span small{display:block;font-size:10.5px;color:var(--faint);opacity:.85}
.kv.sub b{font-weight:500;color:var(--text-2)}
.f-fee{color:var(--brand-text)}
.f-fee:hover{color:var(--brand-light)}

.fee-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:16px;margin-bottom:14px;border-radius:var(--r-lg);
  border:1px solid var(--brand-line);background:var(--bg-2)}
.fh-l{display:flex;align-items:center;gap:14px;min-width:0}
.fh-bars{display:flex;align-items:flex-end;gap:3px;height:26px;flex-shrink:0}
.fh-bars i{width:6px;border-radius:2px;background:var(--line-2)}
.fh-bars i.on{background:linear-gradient(180deg,var(--brand-light),var(--brand));box-shadow:0 0 10px rgba(var(--brand-rgb),.35)}
.fh-tx{min-width:0}
.fh-k{display:block;font-size:11.5px;color:var(--mute)}
.fh-t{display:block;font:650 24px/1.15 var(--display);letter-spacing:-.02em;color:#fff;margin:2px 0 3px}
.fh-rate{font-size:12.5px;color:var(--text-2)}
.fh-rate b{color:var(--text);font-weight:650}
.fh-v{display:flex;flex-direction:column;justify-content:center;min-width:0}
.fh-v > b{font:650 20px/1.2 var(--display);letter-spacing:-.015em;margin:2px 0 8px}
.fh-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fh-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-2),var(--brand-light));animation:barin .9s var(--ease) backwards;transform-origin:left}
.fh-next{margin-top:7px;font-size:12px;color:var(--mute)}
.fh-next b{color:var(--text-2);font-weight:600}
@keyframes barin{from{transform:scaleX(0)}}
.fee-tbl{width:100%;border-collapse:collapse;font-size:13px}
.fee-tbl th{text-align:left;font-weight:500;color:var(--mute);font-size:12px;padding:7px 10px;border-bottom:1px solid var(--line)}
.fee-tbl td{padding:9px 10px;border-bottom:1px solid var(--line)}
.fee-tbl .r{text-align:right}
.fee-tbl td.num{white-space:nowrap}
@media (max-width:400px){ .fee-tbl th,.fee-tbl td{padding-left:6px;padding-right:6px} }
.fee-tbl tr.on td{background:var(--brand-soft)}
.fee-tbl tr.on td:first-child{box-shadow:inset 2px 0 0 var(--brand)}
.fee-tbl .tag{margin-left:6px;height:18px}
.fee-fine{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--faint)}
.fee-fine code,.srow code{font:11px var(--mono);color:var(--text-2);background:var(--card-2);padding:1px 5px;border-radius:5px}
.fee-h{margin:20px 0 2px;font-size:13px;display:flex;align-items:center;gap:8px}
.fee-in{display:flex;gap:6px;flex-shrink:0}
.fee-in .inp{width:150px;text-transform:uppercase}
.fee-link{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:8px 10px;border-radius:var(--r);background:var(--bg-2);border:1px dashed var(--line-2);font-size:12px}
.fee-link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--mono);color:var(--brand-text)}

/* ───────────── Fund sheet: deposit to / withdraw from Hyperliquid ───────────── */
.sheet.fund .sheet-b{padding-top:12px}
.fr-tabs{display:flex;width:100%;margin-bottom:14px}
.fr-tabs button{flex:1;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.fr-route{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);align-items:center;gap:8px;padding:12px;border-radius:var(--r-lg);
  background:var(--bg-2);border:1px solid var(--line)}
.fr-node{display:flex;align-items:center;gap:9px;min-width:0}
.fr-node > div > b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-node > div > span{display:block;font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-node > div{min-width:0}
.fr-ic{position:relative;width:34px;height:34px;flex-shrink:0;display:grid;place-items:center}
.fr-ic > svg{width:34px;height:34px}
.fr-chain{position:absolute;right:-4px;bottom:-3px;transform:scale(.8)}
.fr-hl{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--brand-ink);background:linear-gradient(140deg,var(--brand-light),var(--brand) 60%,var(--brand-2))}
.fr-route .fr-node:last-child{justify-content:flex-start;text-align:right;flex-direction:row-reverse}
.fr-flow{position:relative;height:30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.fr-flow::before{content:"";position:absolute;left:4px;right:4px;top:9px;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 10px)}
.fr-flow i{position:absolute;top:6px;left:4px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px rgba(var(--brand-rgb),.8);animation:frflow 1.8s var(--ease) infinite}
.fr-flow span{font-size:10px;color:var(--faint);white-space:nowrap}
@keyframes frflow{0%{left:4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
.fr-bal{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:12px 0 7px;font-size:12.5px;color:var(--mute)}
.fr-bal b{color:var(--text);font-weight:650}
.fr-amt{height:48px}
.fr-amt input{font-size:19px;font-family:var(--display)}
.fr-kv{margin:10px 0 12px;padding:8px 11px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2)}
.fr-go{height:44px;font-size:14px}
.fr-go:disabled{opacity:1;background:var(--card-2);color:var(--mute);border-color:var(--line)}
.fr-spin,.pf-spin{display:inline-block;width:13px;height:13px;margin-right:7px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;vertical-align:-2px}
.fr-steps{display:flex;list-style:none;margin:0 0 12px;padding:0;gap:0}
.fr-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;font-size:11px;color:var(--faint)}
.fr-steps li::before{content:"";position:absolute;top:9px;right:50%;width:100%;height:2px;background:var(--line-2);z-index:0}
.fr-steps li:first-child::before{display:none}
.fr-steps li.done::before,.fr-steps li.now::before{background:var(--brand)}
.fr-steps i{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);display:grid;place-items:center}
.fr-steps li.done i{background:var(--brand);border-color:var(--brand)}
.fr-steps li.done svg{width:12px;height:12px;fill:none;stroke:var(--brand-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;animation:draw .35s var(--ease) forwards}
.fr-steps li.now i{border-color:var(--brand);box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5);animation:ping 1.4s var(--ease) infinite}
.fr-steps li.done span,.fr-steps li.now span{color:var(--text-2)}
.fr-msg{margin-top:10px}
.fr-msg a,.fr-last a{color:var(--brand-text)}
.fr-last{margin-top:10px;font-size:12px;color:var(--mute)}
.fr-fine{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--faint)}
.fr-fine b{color:var(--text-2);font-weight:600}
.fr-connect{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.fr-connect > b{font-size:14px}
.fr-connect > span{font-size:12.5px;color:var(--mute);margin-top:-5px}
.fr-none{font-size:12.5px;line-height:1.5;color:var(--mute)}
.fr-none b,.fr-connect > span b{color:var(--text-2);font-weight:600}
.fr-local{align-self:flex-start}
/* the deposit address: the wallet's own address on Arbitrum, to copy or scan */
.fr-addr{margin-top:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
.fr-ah{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px}
.fr-ah b{font-size:13px;font-weight:600}
.fr-net{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mute)}
.fr-av{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
/* one line when it fits; otherwise two even halves (the <wbr> in the middle), with Copy and QR below */
.fr-a{flex:1 1 300px;min-width:0;font:500 12px/1.45 var(--mono);color:var(--text);overflow-wrap:anywhere;user-select:all}
.fr-av .btn{flex-shrink:0}
.fr-qr{display:flex;justify-content:center;margin-top:10px}
.fr-qr svg{display:block;width:156px;height:156px;border-radius:8px}
.fr-qr > span:not(.fr-spin){font-size:12px;color:var(--mute)}
.fr-ap{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}
.fr-ap b{color:var(--text-2);font-weight:600}
.fr-arr{margin-left:8px;padding:1px 6px;border-radius:5px;background:var(--up-soft);color:var(--up);font:600 11px var(--mono)}
.wopt-email{width:100%;border-style:dashed}
.wopt-email .ic{color:var(--brand-text)}
.fr-spot{margin-top:18px;padding-top:4px;border-top:1px solid var(--line)}
.fr-spot h4{margin:12px 0 0;font-size:12px;color:var(--mute);font-weight:600}
@media (max-width:560px){
  .fee-hero{grid-template-columns:1fr}
  .fr-route{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);padding:10px}
  .fr-flow span{display:none}
  .fr-node{gap:7px}
  .fr-node > div > b{white-space:normal;line-height:1.25}
  .fr-node > div > span{display:none}
  .srow:has(.fee-in){flex-wrap:wrap}
  .fee-in{width:100%}
  .fee-in .inp{flex:1;width:auto}
}

/* ───────────── where Superclan is offered (region.js) ───────────── */
body.no-predictions #navTabs a[data-r="predict"],body.no-predictions .f-link[href="#/predict"]{display:none}
.rb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(8,9,11,.94);backdrop-filter:blur(10px);animation:fade .3s var(--ease)}
.rb-card{max-width:440px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.rb-card h2{margin:6px 0 0;font:650 22px/1.25 var(--display);letter-spacing:-.02em;color:#fff}
.rb-card p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55}
.rb-card .rb-fine{color:var(--faint);font-size:12px}
body.region-blocked{overflow:hidden}

/* terms, accepted before the first switch to Live */
.terms-lead{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--text-2)}
.terms-list{display:flex;flex-direction:column;gap:8px}
.terms-c{align-items:flex-start;padding:11px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2);line-height:1.45;
  transition:border-color .15s,background .15s}
.terms-c:has(input:checked){border-color:var(--brand-line);background:var(--brand-soft)}
.terms-c input{margin-top:2px;accent-color:var(--brand);flex-shrink:0}
.terms-c small{display:block;margin-top:3px;font-size:11.5px;color:var(--faint)}
.terms-c a{color:var(--brand-text)}
.terms-f{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.fr-note{margin-top:12px;line-height:1.5}

/* ───────────── reduced motion: keep feedback, drop travel ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .skel{animation:none}
  /* colour-only feedback stays: a price that changed still lights up */
  .fl-up,.fl-dn{animation-duration:1s!important}
  .toast::after{animation-duration:var(--life,4200ms)!important}
  .fr-flow i{animation:none;left:calc(50% - 4px);opacity:1}
}

/* ═══════════════════════════════════════════════════════════════
   The flat pass (Axiom): panels share hairlines instead of floating
   as rounded cards; smaller radii; numbers in tabular figures.
   ═══════════════════════════════════════════════════════════════ */
:root{--r-sm:5px;--r:6px;--r-lg:8px}
body{font-variant-numeric:tabular-nums}
/* stat cards become one strip of cells divided by hairlines (drawn per cell, so a short last row leaves no grey gap) */
.stat-row,.sm-kpis{gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat-row > .stat,.sm-kpis > div{border:0;border-radius:0;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.stat{padding:12px 14px}
.stat .v{font-size:20px}
/* Pulse: three columns that share their borders */
.pulse-grid{gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.pulse-grid > .pcol{border:0;border-radius:0;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
/* the token page: flush panels on hairlines, like the perps terminal */
.tk:not(.pt){padding:0;gap:0;max-width:none;min-height:100%}
.tk:not(.pt) .tp-head{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 16px}
.tk:not(.pt) .tp-grid{gap:1px;background:var(--line);grid-template-columns:minmax(0,1fr) 340px}
.tk:not(.pt) .tp-main,.tk:not(.pt) .tp-side{gap:1px;background:var(--line)}
.tk:not(.pt) .chartbox,.tk:not(.pt) .tabbox,.tk:not(.pt) .box{border:0;border-radius:0}
.tk:not(.pt) .tabbox{flex:1}
.tk:not(.pt) .tp-side > :last-child{flex:1}
.tk-tbl td{font-family:var(--mono);font-size:12px}
.tk-tbl td:first-child{font-family:var(--sans)}

/* ── round 11: price alerts (alerts.js) and the orders Superclan watches (orders.js) ── */
.star.bell.on{color:var(--brand-text)}
.star.bell.on svg{fill:none}
.tk-star{gap:1px}
.al-sheet{display:flex;flex-direction:column;gap:10px}
.al-kind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:3px;border-radius:var(--r-md,10px);background:var(--bg-2)}
.al-kind button{height:30px;border-radius:8px;font-size:12.5px;color:var(--mute);font-weight:500}
.al-kind button[aria-pressed=true]{background:var(--brand-soft);color:var(--brand-text)}
.al-now{margin:-4px 0 0;font-size:11.5px}
.al-win{display:flex;gap:14px;font-size:12.5px;color:var(--text-2)}
.al-win label{display:flex;align-items:center;gap:6px}
.al-h{margin:6px 0 2px;font-size:12.5px;color:var(--mute);font-weight:500}
.al-sheet .field{width:100%}

/* ── #/auto: trading wallets and automations (ui-auto.js) ── */
.au .au-body{display:flex;flex-direction:column;gap:14px;max-width:880px}
.au-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.au-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.au-ch h2{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600}
.au-p{margin:0 0 10px;color:var(--mute);font-size:12.5px;line-height:1.55}
.au-fine{margin:10px 0 0;color:var(--faint);font-size:11.5px;line-height:1.5}
.au-empty{padding:14px 0;color:var(--mute);font-size:12.5px}
.au-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.au-wa{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.au-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px;font-size:12.5px}
.au-sel{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.au-sel select{height:30px;border-radius:var(--r-sm);background:var(--card-2);border:1px solid var(--line-2);color:var(--text);padding:0 8px;font:inherit}
.au-rule{align-items:flex-start}
.au-rule .t{flex:1}
.au-rule .t>span{display:block;margin-top:2px}
.au-st{color:var(--faint)!important;font-size:11.5px!important}
.au-wait{font-size:11px;font-weight:400}
.au-sw{padding-top:2px}
.au-pause{font-size:12.5px}
.au-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.au-log li{display:grid;grid-template-columns:54px minmax(90px,140px) 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.au-log li.skip span:nth-child(3),.au-log li.fail span:nth-child(3){color:var(--mute)}
.au-log li.fail b{color:var(--down)}
.au-log li.buy b{color:var(--up)}
.au-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.au-mode{margin:4px 0 2px}
.au-ta textarea{width:100%;min-height:64px;resize:vertical;background:transparent;border:0;color:var(--text);font:12px var(--mono);outline:none;padding:6px 0}
.au-ta{align-items:flex-start;flex-direction:column}
@media (max-width:640px){.au-card{padding:14px}.au-log li{grid-template-columns:44px 1fr;}.au-log li b{grid-column:2}.au-log li span:nth-child(3){grid-column:1/-1}.au-grid{grid-template-columns:1fr}}