:root{--bg:#0b0e11;--card:#161a1e;--bd:#2b3139;--in:#1e2329;--fg:#eaecef;--mut:#848e9c;--up:#0ecb81;--dn:#f6465d;--dn-t:#ff6b7d;--warn:#f0b90b;--acc:#7895ff;--acc2:#22d3f8;--r:6px}
/* brand (K1 10-22): Xenobex accent palette (the former logo's colours) — violet > indigo > electric blue > cyan. --acc = accent text / icons / selection on dark (5.6:1 on #181a20),
   --acc2 = secondary cyan (highlights, focus rings), --pri-grad = primary button fill with white text. --warn keeps its own colour (warnings only) */
:root{--brand-violet:#8b2cf5;--brand-indigo:#4a3df0;--brand-blue:#2f5bff;--brand-cyan:#22d3f8;--brand-grad:linear-gradient(90deg,#8b2cf5 0%,#4a3df0 35%,#2f5bff 65%,#22d3f8 100%);--pri-grad:linear-gradient(90deg,#6d3cf5 0%,#2f5bff 100%);--bx-pri:#2f5bff;--bx-pri-h:#2a52f0;--bx-pri-fg:#ffffff}
/* price direction (P1-9): --rise / --fall colour price moves, buy / sell, bids / asks, profit / loss and the chart; --up / --dn stay the STATUS colours
   (ok / error). The :root values below are the domestic convention (rise red, fall blue), used on <html data-updown="kr"> (Account & Security > Display settings);
   the default since 10-20 is global (rise green, fall red) — set in the Y2 section at the end of this file.
   Text variants keep 4.5:1 on every surface they sit on (lowest: #5b9dff 4.82 / #ff6b7d 4.78 on the hover grey); buttons carry dark text (5.49 / 5.81) */
:root{--rise:#f6465d;--rise-t:#ff6b7d;--rise-soft:rgba(246,70,93,.12);--fall:#3d8bfd;--fall-t:#5b9dff;--fall-soft:rgba(61,139,253,.12)}
html[data-updown=global]{--rise:#0ecb81;--rise-t:#0ecb81;--rise-soft:rgba(14,203,129,.12);--fall:#f6465d;--fall-t:#ff6b7d;--fall-soft:rgba(246,70,93,.12)}
/* theme (L1 10-22): <html data-theme="dark|light"> set before the first paint by theme-init.js (localStorage cex_theme = dark | light | system,
   default dark); app.js setTheme() / themeNow() switch it and call the S.onTheme hooks (charts). The values above are the dark theme; the light
   one overrides them here — (0,2,0) beats every plain :root / html:not(...) block further down, wherever it sits. Text tokens keep 4.5:1 on the
   lightest grey they sit on (#eef0f3): --mut #5e6673 5.08, --acc #2f5bff 4.53, --acc2 #08739a 4.68, --up / --rise-t #02784e 4.84,
   --dn-t / --fall-t #c42a42 4.90, --warn #8a6100 4.85, --info-t / kr --fall-t #1d5fe0 4.88. Fills (bars, buttons, dots) keep the brighter
   --rise / --fall / --warn-fill. --shadow: a faint lift for cards, light only. Surfaces that were hard-coded greys: --btn-bg (plain button /
   selected segment / toast), --bd-h (hovered field border), --pop-bg + --pop-shadow (menus, floating bars), --ic-dim (large empty-state icon),
   --sys-bg / --sys-warn-bg (status banner) */
:root{color-scheme:dark;--warn-fill:#f0b90b;--shadow:none;--overlay:rgba(255,255,255,.06);--btn-bg:#21262d;--bd-h:#474d57;--pop-bg:#1e2329;
  --pop-shadow:0 10px 28px rgba(0,0,0,.5);--ic-dim:#4f5867;--sys-bg:#1b1f24;--sys-warn-bg:#2a2412}
:root[data-theme=light]{color-scheme:light;
  --bg:#f5f6f8;--card:#ffffff;--bd:#e6e8ea;--in:#f1f2f4;--fg:#1e2329;--mut:#5e6673;
  --bx-bg:#ffffff;--bx-bd:#e6e8ea;--bx-fg:#1e2329;--bx-mut:#5e6673;--bx-sel:#eef1ff;--bx-sec:#eef0f3;--bx-sec-h:#e3e6ea;--bx-hov:#f5f6f8;
  --acc:#2f5bff;--acc2:#08739a;--acc-soft:rgba(47,91,255,.08);
  --up:#02784e;--dn:#cf304a;--dn-t:#c42a42;--warn:#8a6100;--warn-fill:#f0b90b;
  --up-soft:rgba(3,166,109,.10);--dn-soft:rgba(207,48,74,.08);--warn-soft:rgba(240,185,11,.14);
  --info:#3d8bfd;--info-t:#1d5fe0;--info-soft:rgba(61,139,253,.10);--hover:#eaecef;
  --rise:#03a66d;--rise-t:#02784e;--rise-soft:rgba(3,166,109,.10);--fall:#cf304a;--fall-t:#c42a42;--fall-soft:rgba(207,48,74,.08);
  --shadow:0 1px 2px rgba(0,0,0,.06);--overlay:rgba(0,0,0,.04);--btn-bg:#eef0f3;--bd-h:#c4c9d1;--pop-bg:#ffffff;
  --pop-shadow:0 6px 16px rgba(0,0,0,.08);--ic-dim:#b7bdc6;--sys-bg:#eef0f3;--sys-warn-bg:#fdf3d7}
html[data-theme=light][data-updown=kr]{--rise:#cf304a;--rise-t:#c42a42;--rise-soft:rgba(207,48,74,.08);--fall:#3d8bfd;--fall-t:#1d5fe0;--fall-soft:rgba(61,139,253,.10)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
a{color:var(--acc);text-decoration:none}
h2,h3{margin:0 0 10px;font-size:15px;font-weight:600}
p{margin:6px 0}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--in);border:1px solid var(--bd);border-radius:6px;padding:7px 9px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
textarea{min-height:64px;resize:vertical}
button{background:var(--btn-bg);border:1px solid var(--bd);border-radius:6px;padding:7px 12px;cursor:pointer;white-space:nowrap}
button:hover{border-color:var(--acc)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--pri-grad);border-color:transparent;color:#fff;font-weight:600}
button.primary.buy{background:var(--rise);color:#06110a}
button.primary.sell{background:var(--fall);color:#0b0e11}
button.primary.danger{background:transparent;border-color:var(--dn);color:var(--dn-t)}
button.ghost{background:transparent}
button.sm{padding:3px 8px;font-size:12px}
button.danger{color:var(--dn-t)}
form>button.primary{width:100%;margin-top:4px}
label{display:block;margin-bottom:8px;font-size:12px;color:var(--mut)}
label>span{display:block;margin-bottom:3px}
label em{font-style:normal;color:var(--fg)}
label.chk{display:flex;align-items:center;gap:6px}
label.chk input{width:auto}
code{display:block;background:var(--in);border:1px solid var(--bd);padding:6px 8px;border-radius:4px;word-break:break-all;font-size:12px;color:var(--fg);user-select:all}


/* header */
.top{display:flex;align-items:center;gap:20px;height:56px;padding:0 20px;border-bottom:1px solid var(--bd);background:var(--card);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:.2px;flex:none}
/* Xenobex 10-28: the brand is the BRAND text alone (app.js initBrand) — no logo image and no CSS mark in any theme or width. A .logo left
   in an old cached page stays hidden; .brand-name is never hidden */
.logo{display:none!important}
.brand-name{letter-spacing:.06em}
#nav{display:flex;align-items:center;gap:2px;height:100%}
#nav>a,#nav .dd-btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 10px;color:var(--fg);font-size:14px;font-weight:500;background:none;border:0;border-radius:0}
#nav>a:hover,#nav .dd-btn:hover,#nav a.on,#nav .dd-btn.on{color:var(--acc)}
.dd{position:relative;height:100%;display:flex;align-items:center}
.dd-menu{display:none;position:absolute;top:100%;left:0;min-width:184px;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:6px;box-shadow:var(--pop-shadow);z-index:30}
.dd-menu.right{left:auto;right:0}
.dd.open>.dd-menu{display:block}
.dd.open .caret{transform:rotate(180deg)}
.dd-menu a,.dd-menu .dd-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:6px;color:var(--fg);font-size:14px;background:none;border:0;font-weight:400}
.dd-menu a:hover,.dd-menu .dd-item:hover,.dd-menu a.on{background:var(--in);color:var(--acc)}
.dd-head{padding:8px 12px 10px;border-bottom:1px solid var(--bd);margin-bottom:4px;display:flex;flex-direction:column;gap:2px;max-width:260px}
.dd-head b{font-size:13.5px;overflow-wrap:break-word;overflow-wrap:anywhere}
.dd-head small{font-size:11px;word-break:break-all}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;transition:transform .15s}
.dd.open .caret{transform:rotate(180deg)}
.user{margin-left:auto;display:flex;align-items:center;gap:12px;height:100%}
.guest-acts{display:flex;gap:6px}
.hbtn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:6px;color:var(--fg);font-size:13.5px;font-weight:500;white-space:nowrap}
.hbtn:hover{color:var(--acc)}
.hbtn.primary{background:var(--pri-grad);color:#fff}
.hbtn.primary:hover{filter:brightness(1.08);color:#fff}
.umenu .dd-btn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0 2px;height:100%;color:var(--fg)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--in);border:1px solid var(--bd);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--acc);flex:none}
.u-email{font-size:13px;color:var(--mut)}
.nav-toggle{display:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dn);display:inline-block;flex:none}
.dot.on{background:var(--up)}
/* layout */
main{padding:12px;max-width:1400px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:12px;margin-bottom:12px;min-width:0}
.trade-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth{max-width:420px;margin:24px auto}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bar h3{margin:0;flex:1}
.bar select,.bar input{width:auto;flex:1 1 120px}
.muted{color:var(--mut)}.up{color:var(--rise-t)}.dn{color:var(--fall-t)}.center{text-align:center}
.ok-t{color:var(--up)}.bad-t{color:var(--dn-t)}.warn-t{color:var(--warn)} /* status text (ok / error / attention), independent of the direction colours */

/* ticker */
.tickbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;row-gap:8px}
.tickbar select{width:auto;min-width:140px;font-weight:600}
.tk{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;line-height:1.2}
.tk small{color:var(--mut);font-size:11px}
.tk b{font-size:18px}

/* order book / trades rows */
.row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px;padding:2px 6px;font-variant-numeric:tabular-nums;font-size:12.5px;position:relative}
.row.head{color:var(--mut);font-size:11px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.row span:nth-child(n+2){text-align:right}
.levels{min-height:40px}
.lvl{cursor:pointer}
.lvl::before{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--w,0);opacity:.13;pointer-events:none}
.ask::before{background:var(--fall)}.bid::before{background:var(--rise)}
.ask .p{color:var(--fall-t)}.bid .p{color:var(--rise-t)}
.lvl:hover{background:var(--btn-bg)}
.spread{text-align:center;color:var(--mut);font-size:12px;padding:4px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin:4px 0}

/* order form */
.seg{display:flex;margin-bottom:8px;border:1px solid var(--bd);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;border-radius:0;background:transparent;color:var(--mut);padding:6px}
.seg button.on{background:var(--btn-bg);color:var(--fg)}
#seg-side button.on[data-v=buy]{color:var(--rise-t)}
#seg-side button.on[data-v=sell]{color:var(--fall-t)}
.est{white-space:pre-line;font-size:12px;color:var(--mut);margin:6px 0;min-height:36px}
.bal{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-bottom:6px;font-variant-numeric:tabular-nums}

/* tables */
.tbl{overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
th,td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--bd)}
th{color:var(--mut);font-weight:500;font-size:11px}
tr:last-child td{border-bottom:0}
td.addr{max-width:180px;overflow:hidden;text-overflow:ellipsis}
td.b{font-weight:600}
.acts{display:flex;gap:4px}
.st-filled,.st-completed,.st-active,.st-approved{color:var(--up)}
.st-cancelled,.st-rejected,.st-frozen{color:var(--dn-t)}
.st-pending,.st-partial{color:var(--warn)}

/* wallet / admin */
.info{background:var(--in);border:1px solid var(--bd);border-radius:6px;padding:8px;white-space:pre-wrap;word-break:break-all;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:48px;margin:0 0 8px;user-select:all}
.stats{display:flex;gap:20px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;line-height:1.2}
.stat small{color:var(--mut);font-size:11px}
.stat b{font-size:18px}

/* toast + modal */
#toasts{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:50;max-width:min(360px,calc(100vw - 24px))}
.toast{background:var(--btn-bg);border:1px solid var(--bd);border-left:3px solid var(--acc);padding:8px 12px;border-radius:6px;opacity:0;transform:translateY(6px);transition:.2s;font-size:13px;word-break:break-word}
.toast.show{opacity:1;transform:none}
.toast.ok{border-left-color:var(--up)}
.toast.error{border-left-color:var(--dn)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:40;padding:12px}
.modal-box{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px;width:min(460px,100%);position:relative;max-height:90vh;overflow:auto}
.x{position:absolute;top:4px;right:4px;border:0;background:transparent;font-size:20px;line-height:1;color:var(--mut);padding:4px 8px}


/* ===== trade page ===== */
button.primary{color:#fff}
.brand{color:var(--acc)}
#nav a.on{color:var(--acc)}
main:has(.bx){max-width:none;padding:0}
.bx{display:flex;flex-direction:column;gap:1px;background:var(--bg)}
.pane{background:var(--card);min-width:0;display:flex;flex-direction:column}
.ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;font-weight:600;font-size:13px;border-bottom:1px solid var(--bd);min-height:38px}
.bx-head{display:flex;align-items:center;gap:26px;padding:10px 16px;background:var(--card);flex-wrap:wrap;row-gap:6px}
.bx-head .sym{display:flex;flex-direction:column;line-height:1.15}
.bx-head .sym b{font-size:19px}
.bx-head .sym small{color:var(--mut);font-size:11px}
.bx-head .tk.big b{font-size:19px}
.bx-head .tk small{font-size:11px}
.bx-head .tk span{font-size:12.5px}
.bx-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:1px;min-height:720px}
.bx-center{display:flex;flex-direction:column;gap:1px;min-width:0}
.bx-side{display:flex;flex-direction:column;gap:1px;min-width:0}
.bx-chart{flex:1;min-height:440px}
.chart{flex:1;min-height:380px;width:100%;display:block}
.chartbar{font-weight:400}
.ivs{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.ivs span{font-size:12px;margin-right:4px}
.ivs button,.tabs button,.bookmode button{background:transparent;border:0;color:var(--mut);padding:3px 8px;font-size:12.5px;border-radius:4px}
.ivs button.on,.tabs button.on{color:var(--acc);background:var(--in)}
.tabs button.on{color:var(--acc);background:transparent;box-shadow:inset 0 -2px 0 var(--acc);border-radius:0}
.tabs{display:flex;gap:6px}
.bookmode{display:flex;gap:2px}
.bookmode button.on{color:var(--acc)}
.ohlc{padding:4px 12px;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:22px}
/* book */
.bx-book .levels{display:flex;flex-direction:column}
.bx-book .asks{justify-content:flex-end;min-height:0}
.bx .row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);padding:1.5px 12px;font-size:12px;cursor:default}
.bx .row>span:nth-child(n+2){text-align:right}
.bx .row.head{color:var(--mut);font-size:11px;padding-top:6px;padding-bottom:4px}
.bx .lvl{cursor:pointer}
.bx .lvl:hover{background:var(--tr-hov-row)}
.bx .lvl::before{content:"";position:absolute;right:0;top:0;bottom:0;width:var(--w);opacity:var(--tr-bar);pointer-events:none}
.bx .lvl.ask::before{background:var(--fall)}.bx .lvl.bid::before{background:var(--rise)}
.bx .lvl.ask .p{color:var(--fall-t)}.bx .lvl.bid .p{color:var(--rise-t)}
.midp{display:flex;align-items:baseline;gap:6px;padding:7px 12px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.midp b{font-size:18px;font-variant-numeric:tabular-nums}
.midp small{margin-left:auto;font-size:11px}
/* order forms */
.forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:12px}
.of .avail{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
.of .avail .av{font-variant-numeric:tabular-nums}
label.fx{display:flex;align-items:center;background:var(--in);border:1px solid transparent;border-radius:6px;padding:0 10px;margin-bottom:8px;height:40px;color:var(--mut)}
label.fx:focus-within{border-color:var(--acc)}
label.fx>span{margin:0;width:44px;flex:none;font-size:12.5px}
label.fx input{border:0;background:transparent;text-align:right;padding:0 8px;height:100%;font-variant-numeric:tabular-nums;color:var(--fg)}
label.fx input:disabled{color:var(--mut)}
label.fx em{color:var(--fg);font-size:12.5px;min-width:36px;text-align:right}
.pct{margin:2px 0 10px}
.pct input[type=range]{width:100%;padding:0;border:0;background:transparent;accent-color:var(--acc);height:16px}
.pct .ticks{display:flex;justify-content:space-between;gap:4px}
.pct .ticks button{flex:1;background:transparent;border:1px solid var(--bd);color:var(--mut);font-size:11px;padding:2px 0;border-radius:4px}
.pct .ticks button:hover{color:var(--fg);border-color:var(--mut)}
.of .est{min-height:16px;font-size:11.5px;margin:-2px 0 6px}
.of .go{width:100%;height:40px;font-size:14px;border-radius:6px}
.of .go em{color:inherit;font-style:normal}
button.primary.buy{background:var(--tr-buy-bg);color:var(--tr-buy-fg)}
button.primary.sell{background:var(--tr-sell-bg);color:var(--tr-sell-fg)}
.loginhint{text-align:center;padding:0 0 12px;font-size:12.5px}
/* markets + trades */
.bx-mkts{max-height:360px}
.bx-mkts input{margin:8px 12px 2px;width:auto}
.bx-mkts .levels{overflow:auto}
.bx .row.mk{cursor:pointer}
.bx .row.mk:hover,.bx .row.mk.on{background:var(--tr-hov-row)}
.bx .row.mk small{font-size:11px}
.bx-trades{flex:1;min-height:0}
.bx-trades .levels{overflow:auto;max-height:520px}
/* bottom */
.bx-bottom{min-height:240px}
.bx-bottom .tbl{padding:0 12px 12px}
.bx-bottom table th{color:var(--mut);font-weight:400}
#open-n{font-size:12px}
@media (max-width:1180px){
  .bx-grid{grid-template-columns:280px minmax(0,1fr)}
  .bx-side{grid-column:1 / -1;flex-direction:row}
  .bx-side .pane{flex:1}
}
@media (max-width:760px){
  .bx-grid{grid-template-columns:1fr}
  .bx-center{order:-1}
  .bx-side{flex-direction:column}
  .forms{grid-template-columns:minmax(0,1fr)}
  .bx-chart{min-height:360px}.chart{min-height:320px}
  .bx-head{gap:14px}
}

.ivs button:disabled{opacity:.35}

/* ===== shared components (non-trade pages) ===== */
:root{--acc-soft:rgba(111,141,255,.12);--warn-soft:rgba(240,185,11,.12);--up-soft:rgba(14,203,129,.12);--dn-soft:rgba(246,70,93,.12);--info:#3d8bfd;--info-t:#5b9dff;--info-soft:rgba(61,139,253,.12);--hover:#2b3139}
main:has(.pg){max-width:none;padding:0}
.pg{max-width:1200px;margin:0 auto;padding:28px 24px 48px}
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.pg-head h1{margin:0 0 4px;font-size:26px;font-weight:600}
.pg-head p{margin:0;font-size:13.5px}
.pg-acts{display:flex;gap:8px;flex-wrap:wrap}
.pg .card{padding:20px;border-radius:10px;margin-bottom:16px;border-color:transparent}
.pg .card>h3,.card-h h3{font-size:16px;font-weight:600;margin:0 0 14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.card-h h3{margin:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.grid2>.card{margin-bottom:0}
.grid2+.card,.grid2+.grid2{margin-top:16px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.r{text-align:right}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}

/* buttons / links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:6px;background:var(--in);color:var(--fg);border:1px solid transparent;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--hover);color:var(--fg)}
.btn.primary{background:var(--pri-grad);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--pri-grad);color:#fff;filter:brightness(1.08)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.pg button{height:36px;padding:0 14px;border-radius:6px;font-weight:500}
.pg button.sm{height:28px;padding:0 10px}
.pg button.ghost,.modal button.ghost{background:var(--in);border-color:transparent}
.pg button.ghost:hover,.modal button.ghost:hover{background:var(--hover);border-color:transparent}
button.primary:not(.buy):not(.sell):not(.dangerfill):not(.up):not(.dn):hover:not(:disabled){background:var(--pri-grad);filter:brightness(1.08)}
button.danger,.pg button.ghost.danger{color:var(--dn-t)}
button.primary.dangerfill{background:var(--dn);color:#0b0e11}
/* an order confirmation takes its side's direction colour (audit #6 U8): buy = rise, sell = fall — not the error red (= rise in the
   domestic scheme) for both */
button.primary.up{background:var(--tr-buy-bg,var(--rise));color:var(--tr-buy-fg,#0b0e11)}button.primary.dn{background:var(--tr-sell-bg,var(--fall));color:var(--tr-sell-fg,#0b0e11)}
html[data-theme=light] button.primary.dangerfill{color:#fff} /* the light theme's deeper red: white text (4.9:1) */
button.lg,.btn.lg{height:46px;width:100%;font-size:15px;font-weight:600;border-radius:8px;margin-top:6px}
button.loading{position:relative;color:transparent!important}
button.loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #0b0e11;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
button.ghost.loading::after{border-color:var(--fg);border-right-color:transparent}
button.primary:not(.buy):not(.sell):not(.dangerfill):not(.up):not(.dn).loading::after,.btn.primary.loading::after{border-color:#fff;border-right-color:transparent}
.linkbtn{background:none!important;border:0!important;color:var(--acc);padding:0!important;height:auto!important;font-size:13px;cursor:pointer}
.linkbtn:disabled{color:var(--mut)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto}
.copy{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:none!important;border:0!important;color:var(--mut);padding:2px 4px!important;height:auto!important;font-size:12px;cursor:pointer;border-radius:4px}
.copy:hover{color:var(--acc)}
.copy.done{color:var(--up)}

/* form fields */
.fld{display:block;margin-bottom:16px;font-size:13px;color:var(--fg)}
.fld-l{display:block;margin-bottom:6px;font-size:13px;color:var(--mut)}
.fld-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fld-top .fld-l{margin:0}
.pg input,.pg select,.pg textarea,.auth-card input,.modal input,.modal select,.modal textarea{height:42px;padding:0 12px;border-radius:6px;background:var(--in);border:1px solid var(--bd);font-size:14px}
.pg textarea,.modal textarea{height:auto;min-height:84px;padding:10px 12px}
.pg input:hover,.pg select:hover,.pg textarea:hover,.auth-card input:hover{border-color:var(--bd-h)}
.pg input:focus,.pg select:focus,.pg textarea:focus,.auth-card input:focus,.modal input:focus,.modal textarea:focus{border-color:var(--acc)}
.pg input[type=checkbox],.modal input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--acc)}
.inp{display:flex;align-items:center;background:var(--in);border:1px solid var(--bd);border-radius:6px;height:42px;min-width:0}
.inp:hover{border-color:var(--bd-h)}
.inp:focus-within{border-color:var(--acc)}
.pg .inp input,.auth-card .inp input,.modal .inp input,.inp input{border:0!important;background:transparent;height:100%;flex:1;min-width:0}
.inp .unit{padding:0 12px 0 4px;color:var(--fg);font-size:13.5px;font-weight:500;white-space:nowrap}
.inp .inbtn,.pg .inp .inbtn{background:none;border:0;border-left:1px solid var(--bd);border-radius:0;color:var(--acc);height:24px;padding:0 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.inp .inbtn:disabled{color:var(--mut)}
.inp .inbtn.eye{color:var(--mut);border:0}
.inp .inbtn.eye:hover{color:var(--fg)}
.fld-err,.form-err{color:var(--dn-t);font-size:12.5px;margin-top:6px}
.form-err{background:var(--dn-soft);border-radius:6px;padding:9px 12px;margin:0 0 12px}
.fld-hint{font-size:12px;color:var(--mut);margin-top:6px}
.fld-hint.warn{color:var(--warn)}
.chks{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 16px}
label.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg);margin:0;cursor:pointer}
.form-acts{display:flex;gap:8px;justify-content:flex-end}
.otp{letter-spacing:.35em;font-size:18px!important;font-variant-numeric:tabular-nums;text-align:center}

/* badges / notices / empty */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--in);color:var(--mut)}
.badge.ok{background:var(--up-soft);color:var(--up)}
.badge.bad{background:var(--dn-soft);color:var(--dn-t)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.blue{background:var(--info-soft);color:var(--info-t)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:8px;background:var(--in);font-size:13px;line-height:1.5;margin-bottom:16px}
.notice>.ic{margin-top:2px;width:18px;height:18px}
.notice b{display:block;margin-bottom:2px;font-size:13.5px}
.notice p{margin:0;color:var(--mut)}
.notice.blue{background:var(--info-soft)}.notice.blue>.ic{color:var(--info)}
.notice.warn{background:var(--warn-soft)}.notice.warn>.ic,.notice.warn b{color:var(--warn)}
.notice.danger{background:var(--dn-soft)}.notice.danger>.ic,.notice.danger b{color:var(--dn-t)}
.notice.ok{background:var(--up-soft)}.notice.ok>.ic,.notice.ok b{color:var(--up)}
.notice.cta{align-items:center;background:var(--acc-soft);border:1px solid rgba(111,141,255,.35)}
.notice.cta>div{flex:1}
.notice.cta>.ic{color:var(--acc);width:22px;height:22px}
.empty{text-align:center;color:var(--mut);padding:32px 12px!important;font-size:13px;white-space:normal}
.empty .ic{width:32px;height:32px;stroke-width:1.4;opacity:.6;margin-bottom:6px}
tr.empty-tr td{border-bottom:0}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--mut);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin-bottom:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* data tables */
table.dt{font-size:13px}
table.dt th{padding:10px 12px;font-size:12px;font-weight:400;color:var(--mut);border-bottom:1px solid var(--bd);background:transparent}
table.dt td{padding:12px;border-bottom:1px solid #1f242a;vertical-align:middle}
table.dt tbody tr:hover td{background:#1b2026}
table.dt th.r,table.dt td.r{text-align:right}
table.dt tr.row-bad td{background:var(--dn-soft)}
.cell-sub{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
div.acts{display:flex;gap:6px;align-items:center;justify-content:flex-end}
div.acts a{font-size:13px;font-weight:500}
.hash{display:inline-flex;align-items:center;gap:2px;max-width:220px}
.hash span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coin{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:700;color:#0b0e11;background:hsl(var(--h,45),70%,60%);flex:none}
.coin.sm{width:20px;height:20px;font-size:10px}
.coin-cell{display:flex;align-items:center;gap:10px}
.coin-cell b{display:block;font-size:14px}
.coin-cell small{display:block;color:var(--mut);font-size:12px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.toolbar-r{display:flex;gap:8px;align-items:center}
.toolbar-r select,.toolbar-r input:not([type=checkbox]){width:auto;min-width:150px;height:36px}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pills button,.pg .pills button{height:30px;padding:0 12px;border-radius:6px;background:transparent;border:0;color:var(--mut);font-size:13px}
.pills button:hover{color:var(--fg)}
.pills button.on,.pg .pills button.on{background:var(--in);color:var(--fg)}
.ptabs{display:flex;gap:24px;border-bottom:1px solid var(--bd);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs a,.ptabs button{flex:none;padding:0 0 12px!important;height:auto!important;background:none!important;border:0!important;border-radius:0!important;color:var(--mut);font-size:14.5px;font-weight:500;box-shadow:none;white-space:nowrap}
.ptabs a:hover,.ptabs button:hover{color:var(--fg)}
.ptabs a.on,.ptabs button.on{color:var(--fg);box-shadow:inset 0 -2px 0 var(--acc)}
.kv{display:grid;grid-template-columns:fit-content(55%) minmax(0,1fr);gap:8px 16px;margin:0;font-size:13px} /* a long label wraps at 55 % (2026-11-08: a Russian label took the whole row, its value got 0 px) */
.kv dt{color:var(--mut)}
.kv dd{margin:0;text-align:right;overflow-wrap:break-word;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.copyline{display:flex;align-items:center;gap:6px;background:var(--in);border-radius:6px;padding:8px 10px;min-width:0}
.copyline code{flex:1;background:none;border:0;padding:0;font-size:13px;word-break:break-all;user-select:all}
.copyline.big code{font-size:14.5px;font-weight:500;line-height:1.5}
.copyline.hl{box-shadow:inset 0 0 0 1px var(--acc)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* auth */
main:has(.auth-wrap){max-width:none;padding:0}
.auth-wrap{min-height:calc(100vh - 56px);display:flex;align-items:flex-start;justify-content:center;padding:56px 16px 48px}
.auth-card{width:100%;max-width:420px;background:var(--card);border-radius:12px;padding:36px 32px 28px}
.auth-brand{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:700;font-size:18px;margin-bottom:26px}
.auth-card h1{font-size:26px;font-weight:600;margin:0 0 6px}
.auth-sub{color:var(--mut);margin:0 0 24px;font-size:14px;overflow-wrap:break-word;overflow-wrap:anywhere}
.auth-sub b{color:var(--fg);font-weight:600}
.auth-form{margin-top:4px}
.auth-links{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:20px;font-size:13.5px}
.pw-rules{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut)}
.pw-rules li{display:flex;align-items:center;gap:4px}
.pw-rules li .ic{width:13px;height:13px;opacity:.5}
.pw-rules li.ok{color:var(--up)}
.pw-rules li.ok .ic{opacity:1}

/* modal dialog */
.modal-box{width:min(480px,100%);padding:24px;border-radius:12px;border-color:transparent}
.dlg h3{font-size:18px;font-weight:600;margin:0 0 16px;padding-right:24px}
.dlg p{color:var(--mut);font-size:13.5px;margin:0 0 14px}
.dlg .kv{background:var(--in);border-radius:8px;padding:14px;margin-bottom:16px}
.dlg-acts{display:flex;gap:10px;margin-top:8px}
.dlg-acts button{flex:1;height:42px;border-radius:8px;font-weight:600}
.dlg .fld{margin-bottom:14px}
.dlg .notice{margin-bottom:14px}

/* steps + funding */
.fund{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.fund-side{display:flex;flex-direction:column;gap:16px}
.fund-side .card{margin:0}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;position:relative;padding-bottom:26px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:13.5px;top:30px;bottom:2px;width:1px;background:var(--bd)}
.step:last-child::before{display:none}
.step-n{width:28px;height:28px;border-radius:50%;background:var(--pri-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;z-index:1}
.step.off .step-n{background:var(--in);color:var(--mut)}
.step-b>h3{font-size:15px;font-weight:600;margin:3px 0 12px}
.step.off .step-b>h3{color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.pg .chip{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 8px;border-radius:8px;background:var(--in);border:1px solid transparent;color:var(--fg)}
.chip b{font-size:14px}
.chip small{font-size:12px}
.chip:hover{border-color:var(--bd-h)}
.chip.on,.pg .chip.on{border-color:var(--acc);background:var(--acc-soft)}
.nets{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.netcard,.pg .netcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;height:auto;padding:12px 14px;border-radius:8px;background:var(--in);border:1px solid transparent;text-align:left;color:var(--fg);font-weight:400;white-space:normal}
.netcard:hover:not(:disabled){border-color:var(--bd-h)}
.netcard.on,.pg .netcard.on{border-color:var(--acc);background:var(--acc-soft)}
.netcard:disabled{opacity:.55}
.nc-top{display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between}
.nc-top b{font-size:15px}
.nc-l{font-size:12px;color:var(--mut)}
.addr-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;background:var(--bg);border-radius:10px;padding:18px;margin-bottom:14px}
.qr-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.qr{display:block;background:#fff;border-radius:8px;padding:0;image-rendering:pixelated}
.addr-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.addr-col .fld-l{margin:4px 0 0}
.addr-col .kv{margin-top:8px}
.notes{margin:0;padding-left:18px;color:var(--mut);font-size:12.5px;line-height:1.7}
.notes li::marker{color:var(--acc)}
.side-list{margin:0;padding-left:18px;color:var(--mut);font-size:13px;line-height:1.75}
.notice .side-list{color:var(--bx-mut)} /* (L3) on a tinted notice (admin System status): --mut was 4.1:1 on the warning tint */
.wd-sum{background:var(--bg);border-radius:8px;padding:14px 16px;margin:4px 0 8px}
.wd-sum .kv dd b{font-size:18px;color:var(--fg)}
.avail-line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-top:8px}
.avail-line b{color:var(--fg);font-weight:500}
.save-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.save-row input[type=text],.save-row input:not([type]){flex:1;min-width:160px;height:36px}
.book-item{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--bd)}
.book-item:last-child{border-bottom:0}
.bi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bi-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bi-main code,.book-pick code{word-break:break-all;font-size:12px;color:var(--fg);background:none;border:0;padding:0;display:block}
.bi-acts{display:flex;gap:2px;align-items:center}
.book-pick{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto;margin-bottom:8px}
.book-pick button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;height:auto!important;padding:12px 14px!important;text-align:left;white-space:normal;background:var(--in);border:1px solid transparent;border-radius:8px}
.book-pick button:hover{border-color:var(--acc)}
.book-pick code{font-size:12px;word-break:break-all}

/* wallet */
.est-card{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.est-total small{display:block;color:var(--mut);font-size:13px;margin-bottom:6px}
.est-total b{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.est-total b+span{font-size:15px;margin-left:6px;color:var(--mut)}
.est-total p{margin:6px 0 0;font-size:12px}
.est-break{display:flex;flex-wrap:wrap;gap:10px 28px}
.est-break div{display:flex;flex-direction:column;gap:2px}
.est-break small{color:var(--mut);font-size:12px}
.est-break span{font-variant-numeric:tabular-nums}

/* account */
.profile{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.profile .avatar{width:56px;height:56px;font-size:22px}
.profile-main{flex:1;min-width:200px}
.profile-main b{font-size:18px;overflow-wrap:break-word;overflow-wrap:anywhere}
.profile-main .uid{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12.5px;margin:4px 0 8px;flex-wrap:wrap}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.sec-level{min-width:200px}
.sec-level small{color:var(--mut);font-size:12px}
.sec-bars{display:flex;gap:4px;margin:6px 0 4px}
.sec-bars i{flex:1;height:4px;border-radius:2px;background:var(--in)}
.sec-bars i.on{background:var(--up)}
.sec-bars.mid i.on{background:var(--warn)}
.sec-bars.low i.on{background:var(--dn)}
.sec-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--bd)}
.sec-list>div:last-child .sec-row,.sec-list>.sec-wrap:last-child{border-bottom:0}
.sec-wrap{border-bottom:1px solid var(--bd)}
.sec-wrap .sec-row{border-bottom:0}
.sec-ic{width:40px;height:40px;border-radius:50%;background:var(--in);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.sec-ic .ic{width:19px;height:19px}
.sec-main b{font-size:14.5px;font-weight:600}
.sec-main p{margin:3px 0 0;font-size:12.5px}
.sec-panel{background:var(--bg);border-radius:10px;padding:20px;margin:0 0 18px}
.sec-panel .fld:last-of-type{margin-bottom:12px}
.sec-panel form{max-width:440px}
.howto{margin:0 0 16px;padding-left:18px;color:var(--mut);font-size:13px;line-height:1.8}
.totp-setup{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;margin-top:4px}
.totp-keys{display:flex;flex-direction:column;gap:10px;min-width:0}
.totp-keys .notice{margin:0}

/* admin */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--card);border-radius:10px;padding:16px 18px}
.tile small{display:block;color:var(--mut);font-size:12.5px;margin-bottom:6px}
.tile b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;word-break:break-all}
.tile b.sm{font-size:14px;font-weight:500;line-height:1.6;white-space:pre-line;display:block}
.gen h4{font-size:13.5px;margin:18px 0 8px;color:var(--mut);font-weight:500}
.gen>.kv{max-width:420px;background:var(--bg);border-radius:8px;padding:12px 14px}
.adm-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* responsive */
@media (max-width:1000px){
  .fund{grid-template-columns:minmax(0,1fr)}
  .row3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .top{gap:10px;padding:0 12px;height:52px}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;padding:0 8px;background:none;border:0;border-radius:6px}
  .nav-toggle i{display:block;height:2px;background:var(--fg);border-radius:1px}
  .nav-toggle:hover{background:var(--in)}
  #nav{display:none;position:absolute;top:100%;left:0;right:0;height:auto;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:1px solid var(--bd);padding:4px 16px 12px;gap:0;box-shadow:0 14px 28px rgba(0,0,0,.5)}
  .top.nav-open #nav{display:flex}
  #nav>a,#nav .dd-btn{height:46px;min-height:46px;flex:none;padding:0 4px;border-bottom:1px solid var(--bd);width:100%}
  #nav .dd{flex:none}
  #nav .dd{height:auto;flex-direction:column;align-items:stretch}
  #nav .dd-menu{display:block;position:static;border:0;box-shadow:none;padding:2px 0 6px 10px;background:none;min-width:0}
  #nav .caret{display:none}
  .u-email,.umenu .caret{display:none}
  .user{gap:8px}
  .hbtn{padding:0 10px;height:30px;font-size:13px}
  .auth-wrap{min-height:calc(100vh - 52px)}
  .pg{padding:18px 16px 40px}
  .pg-head h1{font-size:22px}
  .pg .card{padding:16px}
  .grid2,.row3{grid-template-columns:minmax(0,1fr)}
  .addr-box,.totp-setup{grid-template-columns:minmax(0,1fr);justify-items:center}
  .addr-col,.totp-keys{width:100%}
  .sec-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}
  .sec-st{grid-column:2;grid-row:2}
  .sec-act{grid-column:3;grid-row:1}
  .toolbar-r{width:100%}
  .toolbar-r select{flex:1;min-width:0}
  .est-total b{font-size:24px}
}
@media (max-width:480px){
  .auth-wrap{padding:24px 12px}
  .auth-card{padding:28px 20px 22px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .modal-box{padding:20px 16px}
  .est-break{gap:10px 18px}
}

/* ===== perpetual futures page (#/futures) — reuses .bx panes, book, chart and order-row styles ===== */
.pf .pf-sym{height:auto}
.pf-symbtn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:2px 0;color:var(--fg)}
.pf-symbtn b{font-size:19px}
.pf-symbtn:hover{border:0;color:var(--acc)}
.pf-mdd{width:360px;max-width:calc(100vw - 24px);padding:8px 0;top:calc(100% + 4px)}.pf-mdd::before{content:'';position:absolute;left:0;right:0;top:-8px;height:8px}
.pf-msort{display:flex;gap:4px;padding:2px 12px 6px;flex-wrap:wrap}.pf-msort button{font-size:12px;line-height:1;padding:5px 8px;border-radius:6px;border:1px solid var(--bd);background:none;color:var(--muted)}.pf-msort button.on{color:var(--fg);border-color:var(--acc)}.pf-msort button:hover{color:var(--fg)}
.pf-mdd .mk-vol{display:block;font-size:11px;color:var(--muted);font-weight:400}.sp .pf-mdd .mk-vol{color:var(--muted)}
.pf-mdd input{margin:0 12px 6px;width:calc(100% - 24px);height:34px}
.pf-mdd #pf-mlist{max-height:360px;overflow:auto}
.pf-mdd .row.mk{padding:6px 12px}
.pf-none{padding:14px}
#pf-rate.up{color:var(--rise-t)}#pf-rate.dn{color:var(--fall-t)}
.pf-midm{margin-left:auto;font-size:11.5px}
.pf-midm span{color:var(--fg);font-variant-numeric:tabular-nums}
.pf-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 340px;grid-template-areas:"book chart order";gap:1px;min-height:720px}
.pf-left{grid-area:book;display:flex;flex-direction:column;gap:1px;min-width:0}
.pf-grid>.bx-chart{grid-area:chart}
.pf-right{grid-area:order;display:flex;flex-direction:column;gap:1px;min-width:0}
.pf .bx-trades{flex:1}
.pf .bx-trades .levels{max-height:300px}
/* order panel */
.pf-order{padding:12px 12px 8px}
.pf-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.pf-modes button{height:32px;background:var(--in);border:1px solid transparent;font-size:13px;font-weight:600}
.pf-modes button:hover{border-color:var(--acc)}
.pf-otabs{margin:0 0 10px;border-bottom:1px solid var(--bd);overflow-x:auto;scrollbar-width:none}
.pf-otabs::-webkit-scrollbar{display:none}
.pf-otabs button{padding:6px 6px 8px;flex:none}
.pf-order .avail{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:8px;font-variant-numeric:tabular-nums}
.pf-order .avail .linkbtn{font-size:14px;margin-left:4px}
.pf-order label.fx>span{width:auto;min-width:44px;margin-right:6px}
.pf-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 8px}
.pf-opts label.chk{font-size:12.5px;gap:6px}
.pf-opts input[type=checkbox]{width:14px;height:14px;accent-color:var(--acc)}
.pf-opts select{width:auto;height:28px;padding:0 6px;font-size:12px;margin-left:auto}
.pf-hint{font-size:11.5px;line-height:1.45;margin:0 0 8px}
.pf-hint:empty{display:none}
.pf-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-btns button{height:42px;font-size:14px;font-weight:600;border-radius:6px}
.pf-info{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin-top:8px;font-size:11.5px;font-variant-numeric:tabular-nums}
.pf-info>div{display:flex;justify-content:space-between;gap:6px;min-width:0}
.pf-info>div>span:last-child{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-acct-body{padding:10px 12px 12px}
.pf-acct-body .kv{font-size:12.5px;gap:6px 12px}
/* bottom */
.pf-bh{flex-wrap:wrap;row-gap:4px}
.pf-btabs{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.pf-btabs::-webkit-scrollbar{display:none}
.pf-btabs button{flex:none}
.pf-btabs span{font-size:12px}
.pf-tools{display:flex;align-items:center;gap:12px;font-weight:400}
.pf-tools label.chk{font-size:12.5px;color:var(--mut);gap:6px}
.pf-tools input[type=checkbox]{width:14px;height:14px;accent-color:var(--acc)}
.pf-tools select{width:auto;height:28px;padding:0 6px;font-size:12px}
.pf .bx-bottom td{vertical-align:middle}
.pf .bx-bottom .cell-sub.up{color:var(--rise-t)}.pf .bx-bottom .cell-sub.dn{color:var(--fall-t)}
.pf-psym{display:flex;align-items:center;gap:8px}
.pf-psym a{color:var(--fg);font-weight:600}
.pf-psym a:hover{color:var(--acc)}
.pf-bar{display:block;width:3px;height:28px;border-radius:2px;flex:none}
.pf-bar.long{background:var(--rise)}.pf-bar.short{background:var(--fall)}
.pf-warn{color:var(--warn)}
.pf-mini{font-size:11.5px!important;margin-left:4px}
.pf-close{justify-content:flex-start!important;gap:4px!important}
.pf-cin{width:96px!important;height:26px;padding:0 6px!important;font-size:12px;text-align:right}
.st-untriggered{color:var(--warn)}.st-triggered{color:var(--up)}.st-expired{color:var(--mut)}
/* dialogs */
.lev-val{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 12px}
.lev-val>button{width:40px;height:40px;font-size:20px;line-height:1;padding:0}
.lev-box{display:flex;align-items:center;gap:4px;background:var(--in);border:1px solid var(--bd);border-radius:6px;padding:0 12px;height:44px}
.lev-box input.lev-num{width:64px;border:0!important;background:transparent;text-align:center;font-size:20px;font-weight:600;height:40px;padding:0}
.lev-box span{font-size:16px;color:var(--mut)}
.lev-err{text-align:center;margin:-6px 0 10px}
.fld-hint.lev-err,.fld-hint.iso-over{color:var(--dn-t)}
input.lev-rg{width:100%;padding:0!important;border:0!important;background:transparent!important;height:20px!important;accent-color:var(--acc)}
.lev-quick{display:flex;gap:6px;margin:8px 0 12px}
.lev-quick button{flex:1;height:30px;padding:0;font-size:12.5px}
.pf-mm{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pf-mm .nc-l{white-space:normal;line-height:1.5}
.pf-seg{margin-bottom:14px}
.pf-seg button{height:36px}
.pf-xdir{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:10px;background:var(--in);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.pf-xdir>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-xdir small{font-size:11.5px}
.pf-risk{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pf-risk li{background:var(--in);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.55;color:var(--mut)}
.pf-risk li b{display:block;color:var(--fg);margin-bottom:2px;font-size:13.5px}
.pf-wbreak{flex-wrap:wrap;row-gap:12px}
@media (max-width:1180px){
  .pf-grid{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"chart order" "book order"}
  .pf-left{flex-direction:row}
  .pf-left>.pane{flex:1;min-width:0}
  .pf .bx-trades .levels{max-height:420px}
}
@media (max-width:760px){
  .pf-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "order" "book"}
  .pf-left{flex-direction:column}
  .pf .bx-trades .levels{max-height:300px}
  .pf-tools{width:100%;justify-content:space-between}
  .pf-mm{grid-template-columns:minmax(0,1fr)}
  .pf-xdir{grid-template-columns:1fr auto 1fr}
  .pf-xdir>button{grid-column:1 / -1}
}

/* coin logos */
img.coin{background:none;padding:0;object-fit:contain;display:inline-block}
.mk-name{display:inline-flex;align-items:center;gap:6px;min-width:0}
/* spot market switcher (same component as the futures symbol menu) */
.bx-head .sp-sym{height:auto}
.sp-symtxt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.sp-symtxt b{font-size:19px}
.sp-symtxt small{color:var(--mut);font-size:11px;font-weight:400}
.pf-symbtn .coin{width:30px;height:30px}
.sp-sym #sp-mlist{max-height:360px;overflow:auto}
.pf-symbtn .coin{margin-right:6px}
.mk-name small{margin-left:-5px}

/* ===== responsive fixes found in the viewport audit ===== */
/* chart toolbar: the intervals stay one unbroken group and Original | Depth another; when the bar is too narrow for both, the chart-mode
   group moves to a second line, on the right (UI-1 10-29: on 401–490 px phones it slid behind the hidden scrollbar). The scroll stays
   only as a last resort */
.chartbar{flex-wrap:wrap;row-gap:4px;overflow-x:auto;scrollbar-width:none}
.chartbar::-webkit-scrollbar{display:none}
.chartbar .ivs{flex-wrap:nowrap;flex:none}
.chartbar #chartmode{margin-left:auto}
@media (max-width:480px){
  /* coin pickers: compact 3-column grid, ticker only */
  .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .chip,.pg .chip{padding:0 8px;gap:6px;min-width:0}
  .chip small{display:none}
  /* call-to-action notices: button drops under the text */
  .notice.cta{flex-wrap:wrap}
  .notice.cta>div{flex:1 1 calc(100% - 40px)}
  .notice.cta>.btn,.notice.cta>button{width:100%;text-align:center;justify-content:center}
}
@media (max-width:760px){.ohlc{white-space:normal;overflow:visible;line-height:1.55;padding-top:6px;padding-bottom:6px}}
.ohlc span{white-space:nowrap}
/* symbol menus (spot + futures): keep "BTCUSDT Perpetual" on one line, give the name column the room it needs */
.pf-mdd .row{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,.9fr)}
.mk-name{white-space:nowrap;overflow:hidden}
.mk-name b,.mk-name small{flex:none}
.mk-name small{white-space:nowrap}
.mk-name small.perp-tag{margin-left:2px;font-size:11px}
label.chk{white-space:nowrap}
.toolbar{flex-wrap:wrap;row-gap:8px}
/* security v2: recovery codes grid, admin audit body */
.rc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.rc-grid code{display:block;text-align:center;padding:9px 6px;border-radius:6px;background:var(--bg3,var(--bd));font-size:14px;letter-spacing:.06em;user-select:all;white-space:nowrap}
.audit-body{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.rc-grid code{font-size:13px}}
@media (max-width:760px){.ohlc{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0}}
/* referral */
.ref-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.ref-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.ref-code{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ref-code b{font-size:28px;letter-spacing:.12em;color:var(--acc)}
.seg.wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));max-width:520px} /* equal-width cells when the steps wrap (was: flex wrap, 2nd row stretched) */
.seg.wrap button{min-width:64px}
.fld-hint.ok{color:var(--up,#0ecb81)}
.tile .cell-sub{display:block;margin-top:4px;font-size:12px;color:var(--mut)}
.tile b.sm{font-size:15px;white-space:pre-line}
.rev-bars{display:flex;align-items:flex-end;gap:3px;height:140px;padding:8px 0;border-bottom:1px solid var(--bd)}
.rev-bars i{flex:1;min-width:3px;background:var(--rise);border-radius:2px 2px 0 0;opacity:.85}
.rev-bars i.neg{background:var(--fall)}
.rev-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-top:4px}
.chain-st{white-space:nowrap}
a.xlink{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--acc);text-decoration:none;margin-left:4px}
a.xlink:hover{text-decoration:underline}
@media (max-width:640px){.ref-hero{grid-template-columns:1fr}.ref-hero .qr-col{justify-self:start}.ref-code b{font-size:22px}}
.tile b{word-break:normal;overflow-wrap:anywhere}
.rev-bars i{max-width:36px}
@media (max-width:520px){.referral .stats-row,.admin .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.referral .tile b,.admin .tile b{font-size:17px}}
/* KYC */
.kyc-form{max-width:640px}
.kyc-pv{display:block;max-width:220px;max-height:140px;margin-top:8px;border-radius:6px;object-fit:contain;background:var(--in)}
.kyc-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.kyc-doc{margin:0}.kyc-doc img{width:100%;max-height:260px;object-fit:contain;border-radius:6px;background:var(--in)}
.kyc-doc figcaption{font-size:12px;color:var(--mut);margin-top:4px;text-align:center}
.toolbar-r{flex-wrap:wrap;row-gap:8px;min-width:0}
@media (max-width:640px){.toolbar{flex-wrap:wrap;row-gap:10px}.toolbar-r{width:100%;justify-content:flex-start}.toolbar-r input{max-width:none!important;flex:1 1 160px}}
.ptabs a.has-pending{color:var(--warn);font-weight:600}

/* ===== code-review fixes 10-16: header, menus, modal, wrapping, focus, touch ===== */
/* header: the 320 px guest header (logo + Log in + Sign up + burger) was ~20 px wider than the screen and a long
   masked e-mail could push the 761–1000 px header past the edge → the brand name truncates first, e-mail is capped */
.brand{flex:0 1 auto;min-width:0}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user{flex:none}
.u-email{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* header menus sit in the sticky header, so the page cannot scroll them into view: keep them inside the viewport */
.top .dd-menu{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.auth-wrap{min-height:calc(100dvh - 56px)}
@media (max-width:760px){
  #nav{max-height:calc(100vh - 52px);max-height:calc(100dvh - 52px);overflow-y:auto;overscroll-behavior:contain}
  #nav .dd-menu{max-height:none;overflow:visible}
  /* account menu anchored to the viewport: a long e-mail can no longer push it off the left edge */
  .umenu .dd-menu{position:fixed;top:52px;right:8px;left:auto;max-width:calc(100vw - 16px)}
  .auth-wrap{min-height:calc(100dvh - 52px)}
}
/* modal: background scroll lock, safe centring (a tall dialog scrolls instead of losing its top), dvh for mobile toolbars */
html.modal-open,html.modal-open body{overflow:hidden}
.modal{overflow-y:auto;overscroll-behavior:contain}
.modal-box{margin:auto;max-height:90vh;max-height:90dvh;overscroll-behavior:contain}
.modal-box:focus,.modal-box:focus-visible{outline:none}
.x{top:2px;right:2px;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;font-size:22px}
.dlg h3{padding-right:36px}
/* toasts carry no controls: never block taps on the order buttons underneath */
#toasts{pointer-events:none;bottom:max(12px,env(safe-area-inset-bottom,0px))}
/* long unbreakable text (e-mails, hashes, shell commands) inside notices / dialogs / hints */
.notice>div,.est-total{min-width:0}
.dlg,.notice>div,.form-err,.fld-hint,.est-total{overflow-wrap:break-word;overflow-wrap:anywhere}
/* book / trades / market rows: a wide number is clipped instead of spilling into the next column */
.bx .row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 2026-11-08 click-test: a column title longer than its column ("Количество (BTC)", "Amount (NVDA)") takes a second line instead of an ellipsis */
.bx .row.head>span{white-space:normal;overflow-wrap:anywhere;line-height:1.3;align-self:end}
/* keyboard focus: fields keep their border highlight; everything else gets a visible ring (checkbox / range had lost
   theirs to "input:focus{outline:none}"), drawn inset where a scrolling strip would clip it */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.chartbar :focus-visible,.tabs :focus-visible,.ptabs :focus-visible,.seg :focus-visible,.bookmode :focus-visible,.dd-menu :focus-visible,#nav :focus-visible{outline-offset:-2px}
button.primary:focus-visible,.btn.primary:focus-visible,.hbtn.primary:focus-visible{outline-color:var(--fg)}
.lev-box:focus-within{border-color:var(--acc)}
/* admin: 16 tabs do not fit 1,200 px and the strip hides its scrollbar → wrap on desktop, phones keep the swipe row */
@media (min-width:761px){.admin .ptabs{flex-wrap:wrap;overflow:visible;column-gap:22px;row-gap:4px}}
/* touch screens */
@media (hover:none) and (pointer:coarse){
  /* iOS zooms the page into any focused field under 16 px (the order-form fields were 12 px) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.otp):not(.lev-num),select,textarea{font-size:16px!important}
  /* hit areas: 44 px where the layout allows, never under 32 px */
  .nav-toggle{width:44px;height:44px}
  .hbtn{min-height:36px}
  .dd-menu a,.dd-menu .dd-item{padding-top:12px;padding-bottom:12px}
  .ivs button,.bookmode button,.tabs button{min-height:34px}
  .pct .ticks button{min-height:32px}
  .pct input[type=range]{height:28px}
  .pills button,.pg .pills button{height:36px}
  button.sm,.btn.sm,.pg button.sm{min-height:34px}
  .pf-modes button{height:40px}
  .lev-quick button{height:36px}
  .pf-opts select,.pf-tools select,.pf-cin{min-height:36px}
  label.chk{min-height:32px}
  .bx .row.mk,.pf-mdd .row.mk{padding-top:9px;padding-bottom:9px}
  .copy,.linkbtn,.inp .inbtn{position:relative}
  .copy:not(.loading)::after,.linkbtn:not(.loading)::after{content:"";position:absolute;inset:-8px}
  .inp .inbtn:not(.loading)::after{content:"";position:absolute;inset:-9px 0}
}
/* truncated hash / address cells: the text shrinks (ellipsis) instead of sliding under the copy button */
.hash>span{min-width:0}
.hash .copy{flex:none}
/* tables that scroll sideways show an edge shadow while more columns are hidden (phones hide scrollbars) */
.tbl{background:linear-gradient(to right,var(--card) 30%,rgba(22,26,30,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--card) 30%,rgba(22,26,30,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) right center/12px 100% no-repeat scroll}
/* focused fields: a 2 px ring instead of only a 1 px border colour change */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus,.inp:focus-within,label.fx:focus-within,.lev-box:focus-within{box-shadow:0 0 0 1px var(--acc)}
.inp input:focus,label.fx input:focus,.lev-box input:focus{box-shadow:none}
/* contrast on tinted (accent-soft) backgrounds and for red text on the field colour: AA 4.5:1 */
.notice p,.netcard.on small,.netcard.on .nc-l,.chip.on small{color:#9aa3af}
button.ghost.danger,.pg button.ghost.danger,.modal button.ghost.danger{color:var(--dn-t)}
@media (max-width:760px){.toolbar-r select{flex:1 1 140px;min-width:120px}}
@media (hover:none) and (pointer:coarse){
  .brand{min-height:44px}
  .bookmode button{min-width:34px}
  a.xlink{position:relative}
  a.xlink::after{content:"";position:absolute;inset:-10px -6px}
}
/* spot bottom bar: 4 tabs + "Cancel all" were 11 px wider than a 320 px phone → the tabs scroll, the button wraps */
.bx-bottom>.ph{flex-wrap:wrap;row-gap:4px}
#btabs{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
#btabs::-webkit-scrollbar{display:none}
#btabs button{flex:none}
/* ≤360 px phones: room for the 44 px menu button without cutting the brand name */
@media (max-width:360px){.top{gap:6px;padding:0 10px}.user{gap:6px}.hbtn{padding:0 8px}}
@media (hover:none) and (pointer:coarse){
  .ivs button{min-width:34px}
  div.acts a{display:inline-flex;align-items:center;min-height:32px;padding:0 6px}
  .pf-psym a{position:relative}
  .pf-psym a::after{content:"";position:absolute;inset:-8px -4px}
}
/* phone OHLC line: as flex items the spans lose their trailing spaces ("O82,455.02H…") → a small gap between items */
@media (max-width:760px){.ohlc{column-gap:4px}}

/* ===== UI audit fixes 10-16 (F) — ops/ui-audit/FINDINGS.md F03 F06 F09–F15 F20–F22 (F06 = the --dn-t / --info-t text tokens above) ===== */
/* F13 long dialogs: the form scrolls inside the box and the button row stays pinned to its bottom (the whole box used to scroll,
   so on a 320 px phone and in the KYC review the confirm button sat below the fold). 4 px side padding keeps focus rings unclipped */
.modal-box{display:flex;flex-direction:column}
#modal-body{display:flex;flex-direction:column;min-height:0}
.dlg{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px;scroll-padding:48px 0 64px} /* a field reached by Tab / 'next' stops clear of the pinned title and buttons */
.dlg-acts{position:sticky;bottom:0;z-index:1;background:var(--card);margin:0 -4px;padding:8px 4px 4px}
/* the title is pinned too, so scrolled text passes under it instead of under the close button (which now stays put) */
.dlg>h3:first-child{position:sticky;top:0;z-index:1;background:var(--card);margin:0 -4px 8px;padding:0 40px 8px 4px}
.x{z-index:2;background:var(--card);border-radius:8px}
.dlg .book-pick{max-height:none}
@media (max-width:360px){.pf-risk{gap:8px}.pf-risk li{padding:8px 10px;font-size:12.5px;line-height:1.5}}
/* F12 ≤400 px: the chart toolbar never hides a control behind a scrollbar (the switch sat 59–73 px past the right edge). UI-1 10-29: the
   9 intervals (Time · 1s … 1D · All) share their line but each stays at least as wide as its own label (squeezed to 20 px at 320 px,
   'Time' 29 px and '15m' 24 px ran over their neighbours); Original | Depth moves under them when both do not fit (the bar wraps, see
   'chart toolbar' above), and on a still narrower screen the intervals wrap rather than clip */
@media (max-width:400px){
  .chartbar{gap:4px 6px;padding-left:8px;padding-right:8px}
  .chartbar .ivs>span{display:none}
  #ivs{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:space-between;gap:2px}
  #ivs button{flex:1 1 0;min-width:max-content;padding-left:3px;padding-right:3px}
  #chartmode button{padding-left:6px;padding-right:6px}
}
/* F14 user tables as one labelled card per row where their action columns (Cancel · TP/SL · Deposit/Withdraw) would scroll out of sight:
   .tbl[data-cards] ≤ 800 px, .tbl[data-cards=wide] (futures bottom) ≤ 1180 px. app.js copies each column header into the cell's
   data-th; the first cell (time / coin / symbol / device) is the card title. Cells share a line (2 / 4 / 6 per line by width) and a
   value too long for its share (a big balance) takes a longer slot instead of breaking mid-number: the flex minimum is the
   number's own width, capped at the card width so an unbroken string still wraps (break-word) */
@media (max-width:800px){
  .tbl[data-cards]{overflow:visible;background:none}
  .tbl[data-cards]>table,.tbl[data-cards]>table>tbody{display:block}
  .tbl[data-cards]>table>thead{display:none}
  .tbl[data-cards]>table>tbody>tr{display:flex;flex-wrap:wrap;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--bd)}
  .tbl[data-cards]>table>tbody>tr:last-child{border-bottom:0}
  .tbl[data-cards]>table>tbody>tr>td{display:block;flex:1 1 calc(25% - 10.5px);max-width:100%;padding:0;border:0;background:none;text-align:left;white-space:normal;overflow-wrap:break-word}
  .tbl[data-cards]>table>tbody>tr>td[data-wide]{flex-basis:calc(50% - 7px)}
  .tbl[data-cards]>table>tbody>tr>td[data-th]::before{content:attr(data-th);display:block;margin-bottom:2px;font-size:11px;font-weight:400;color:var(--mut)}
  .tbl[data-cards]>table>tbody>tr>td:first-child{flex-basis:100%}
  .tbl[data-cards]>table>tbody>tr>td:first-child::before{content:none}
  .tbl[data-cards]>table>tbody>tr>td:not([data-th]):not([data-wide]):not(:first-child){flex:0 0 auto;margin-left:auto;align-self:flex-end} /* a lone row action: right end */
  .tbl[data-cards]>table>tbody>tr>td:empty,.tbl[data-cards]>table>tbody>tr>td[data-blank]{display:none}
  .tbl[data-cards]>table>tbody>tr>td.acts{display:flex;justify-content:flex-end}
  .tbl[data-cards]>table>tbody>tr>td.center,.tbl[data-cards]>table>tbody>tr>td.empty{text-align:center}
}
@media (max-width:640px){
  .tbl[data-cards]>table>tbody>tr>td{flex-basis:calc(50% - 7px)}
  .tbl[data-cards]>table>tbody>tr>td[data-wide]{flex-basis:100%}
}
@media (min-width:801px) and (max-width:1180px){
  .tbl[data-cards=wide]{overflow:visible;background:none}
  .tbl[data-cards=wide]>table,.tbl[data-cards=wide]>table>tbody{display:block}
  .tbl[data-cards=wide]>table>thead{display:none}
  .tbl[data-cards=wide]>table>tbody>tr{display:flex;flex-wrap:wrap;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--bd)}
  .tbl[data-cards=wide]>table>tbody>tr:last-child{border-bottom:0}
  .tbl[data-cards=wide]>table>tbody>tr>td{display:block;flex:1 1 calc(16.66% - 11.7px);max-width:100%;padding:0;border:0;background:none;text-align:left;white-space:normal;overflow-wrap:break-word}
  .tbl[data-cards=wide]>table>tbody>tr>td[data-wide]{flex-basis:calc(33.33% - 9.4px)}
  .tbl[data-cards=wide]>table>tbody>tr>td[data-th]::before{content:attr(data-th);display:block;margin-bottom:2px;font-size:11px;font-weight:400;color:var(--mut)}
  .tbl[data-cards=wide]>table>tbody>tr>td:first-child{flex-basis:100%}
  .tbl[data-cards=wide]>table>tbody>tr>td:first-child::before{content:none}
  .tbl[data-cards=wide]>table>tbody>tr>td:not([data-th]):not([data-wide]):not(:first-child){flex:0 0 auto;margin-left:auto;align-self:flex-end}
  .tbl[data-cards=wide]>table>tbody>tr>td:empty,.tbl[data-cards=wide]>table>tbody>tr>td[data-blank]{display:none}
  .tbl[data-cards=wide]>table>tbody>tr>td.acts{display:flex;justify-content:flex-end}
  .tbl[data-cards=wide]>table>tbody>tr>td.center,.tbl[data-cards=wide]>table>tbody>tr>td.empty{text-align:center}
}
/* F15 ≤480 px security rows: status and button drop under the description, which gets the full width (was ~110 px, 6–7 lines) */
@media (max-width:480px){
  .sec-row{row-gap:10px}
  .sec-ic{align-self:start}
  .sec-main{grid-column:2 / -1}
  .sec-act{grid-column:3;grid-row:2}
}
/* F10 ≤480 px withdrawal address: the address-book button moves up to the label line so the field gets the full width, and the
   typed / pasted address is echoed in full under it (a 34-character address never fits a phone-width field at 16 px) */
.addr-echo{display:none}
@media (max-width:480px){
  .fld[data-book]{position:relative}
  .fld[data-book] .inp .inbtn{position:absolute;top:-4px;right:0;height:26px;padding:0 2px;border-left:0}
  .addr-echo{display:block;overflow-wrap:anywhere}
}
/* F11 'Add address': the network select gets two thirds of the row ("ERC20 · Ethereum (ERC20)" was clipped) */
@media (min-width:481px){.row2[data-split]{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
/* F03 symbol menus narrower than their 360 px design width: every row is a perpetual, the repeated 'Perpetual' tag goes */
@media (max-width:383px){.mk-name small.perp-tag{display:none}}
/* F20 tablets (761–1180 px): side-by-side panes end level — the market list fills the height of the trades pane (spot) and the
   futures wallet pane fills the order column (they left ~250 / ~480 px of bare page under them) */
@media (min-width:761px) and (max-width:1180px){
  .bx-mkts{max-height:none;min-height:360px}
  .bx-mkts .levels{flex:1 1 0;min-height:0}
  .pf-right>.pf-acct{flex:1 1 auto}
}
/* F22 KYC photo fields: an app-styled picker ('Choose photo' + file name) under a transparent native file input (WebKit showed an
   English 'Choose File' stuck to the top of a 42 px box); the input stays on top, so clicks, taps and the keyboard still reach it */
.file-pick{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
/* 2026-11-09 second click-test: it was scoped to `.pg`, which the KYC page (u4) no longer has — the native "Choose File" showed beside the
   app's button and pushed "No file chosen" to "N…". Every .file-pick (the KYC form is its only user) hides the native control */
.file-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.file-pick .btn{flex:none}
.file-pick:hover .btn{background:var(--hover)}
.file-pick input:focus-visible~.btn{outline:2px solid var(--acc);outline-offset:2px}
.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
/* F09 touch screens: hit areas the audit still found under 44 px (dense trading rows / tabs keep their size on purpose) */
@media (hover:none) and (pointer:coarse){
  .ptabs a,.ptabs button{min-height:44px;display:flex;align-items:flex-end}
  .admin .ptabs a{min-width:44px;justify-content:center}
  .pf-opts select,.pf-tools select{height:36px} /* min-height does not grow a <select> */
  input.lev-rg{height:44px!important}
  td div.acts a{min-height:44px;min-width:44px;justify-content:center}
  .auth-links>a{display:inline-flex;align-items:center;min-height:44px}
  .auth-links>.linkbtn{min-height:44px}
  a.auth-brand,td.center>a,.card-h>a.small{position:relative}
  a.auth-brand::after{content:"";position:absolute;inset:-9px 0}
  td.center>a::after{content:"";position:absolute;inset:-15px -8px}
  .card-h>a.small::after{content:"";position:absolute;inset:-14px -6px}
  .pf-order .avail{min-height:28px} /* room for a 44 px '⇄' target between the order-type tabs and the price field */
  #pf-xfer2::after{inset:-13px -12px -11px -20px}
  .file-pick .btn{height:44px}
}

/* ===== launch screens 10-16 (task I): status banner, footer, idle warning, consents, closure, history, support, fees, admin operations ===== */
/* public status banner under the header (GET /status + WS): warnings first, the operator's notices can be closed for the session */
.sysbar{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px 0 16px;background:var(--sys-bg);border-bottom:1px solid var(--bd);font-size:13px;line-height:34px;overflow:hidden;white-space:nowrap}
.sysbar.warn{background:var(--sys-warn-bg)}
.sys-lbl{flex:none;height:20px;line-height:20px;padding:0 8px;border-radius:3px;background:var(--warn-fill);color:#111;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.sysbar:not(.warn) .sys-lbl{background:var(--info);color:#0b1220}
.sys-in{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.sys-track{display:inline-flex;will-change:transform;animation:sys-ticker 30s linear infinite}
.sysbar:hover .sys-track,.sysbar:focus-within .sys-track{animation-play-state:paused}
.sys-row{display:inline-flex;align-items:center;flex:none;padding-right:48px}
.sys-item{display:inline-flex;align-items:center;gap:6px;margin-right:40px}
.sys-item:last-child{margin-right:0}
.sys-item .ic{color:var(--info)}
.sys-item.warn{font-weight:500}
.sys-item.warn .ic{color:var(--warn)}
@keyframes sys-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sys-track{animation:none}.sys-row+.sys-row{display:none}.sys-in{text-overflow:ellipsis}}
.sys-acts{display:flex;align-items:center;gap:6px;flex:none}
.sys-x{background:none!important;border:0!important;color:var(--mut);font-size:20px;line-height:1;width:32px;height:32px;padding:0!important;display:inline-flex;align-items:center;justify-content:center}
.sys-x:hover{color:var(--fg)}
@media (max-width:600px){.sysbar{height:30px;line-height:30px;font-size:12px;padding:0 6px 0 10px;gap:8px}.sys-lbl{font-size:11px;padding:0 6px}}
/* header badge (spot / perp state) and the reason line above the order forms */
.tk-st{display:flex;align-items:center}
.tk-st:empty{display:none}
.ostate{display:flex;gap:8px;align-items:flex-start;margin:10px 12px 0;padding:8px 10px;border-radius:6px;background:var(--acc-soft);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.ostate .ic{color:var(--acc);margin-top:1px}
.ostate.bad{background:var(--dn-soft)}
.ostate.bad .ic{color:var(--dn-t)}
.pf-order .ostate{margin:0 0 10px}
.risk-line{margin:0;padding:0 12px 12px;font-size:11.5px;line-height:1.5;color:var(--mut)}
.pf-order .risk-line{padding:8px 0 2px}
.badge.xs{height:18px;padding:0 5px;font-size:10.5px;gap:2px}
.mk-cell{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0;overflow:hidden}
.mk-cell .badge{flex:none}
/* footer (operator information from GET /site) */
.foot{border-top:1px solid var(--bd);background:var(--card)}
.foot-in{max-width:1200px;margin:0 auto;padding:20px 24px 28px;font-size:12.5px;line-height:1.7;color:var(--mut)}
.foot-links{display:flex;flex-wrap:wrap;gap:2px 18px;margin-bottom:8px}
.foot-links a{color:var(--fg);font-weight:500}
.foot-links a:hover{color:var(--acc)}
.foot-line{margin:0 0 2px;display:flex;flex-wrap:wrap;gap:0 14px}
.foot-line b{color:var(--fg);font-weight:500;margin-right:2px}
.foot-note{margin:10px 0 4px;overflow-wrap:anywhere}
.foot-copy{margin:0}
.foot-attr{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot-attr:hover{color:var(--acc)}
/* idle-session warning: a pill above everything (also above an open dialog) */
.idlebar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100vw - 24px);background:var(--btn-bg);border:1px solid var(--warn);border-radius:10px;padding:8px 10px 8px 14px;box-shadow:var(--pop-shadow);font-size:13.5px}
.idlebar>.ic{color:var(--warn)}
.idle-txt{min-width:0;overflow-wrap:anywhere}
.idlebar button{flex:none;height:36px;padding:0 16px}
/* consents: sign-up, re-consent dialog, KYC */
.consents{border:1px solid var(--bd);border-radius:8px;padding:8px 14px 12px;margin:0 0 16px;min-width:0}
.consents legend{padding:0 6px;margin:0}
.consents label.chk{white-space:normal;font-size:13px;line-height:1.45;align-items:flex-start;padding:5px 0}
.consents label.chk input{margin-top:2px;flex:none}
.cs-all{border-bottom:1px solid var(--bd);padding-bottom:9px!important;margin-bottom:4px!important}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.cs-row>label.chk{flex:1 1 200px;min-width:0}
.cs-row>a{font-size:12.5px;flex:none}
.cs-req{font-style:normal;color:var(--acc)!important;font-weight:600}
.cs-opt{font-style:normal;color:var(--mut)!important}
.cs-meta{font-size:12px;color:var(--mut);padding-left:24px;flex:1 1 100%}
.kyc-form .consents{margin-top:4px}
/* account: display settings, closure steps */
.ud-seg{max-width:620px}
.ud-seg button{white-space:normal;height:auto!important;min-height:40px;padding:8px 10px!important;line-height:1.35}
.close-card .card-h{margin-bottom:6px}
.close-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;margin-top:18px}
.close-step-b h4{margin:3px 0 10px;font-size:14.5px;font-weight:600}
.close-step-b .notice{margin-bottom:0}
.close-blockers{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.close-blockers li{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;background:var(--bg);border-radius:8px;padding:10px 12px;font-size:13px;overflow-wrap:anywhere}
.close-form{max-width:440px}
.close-form label.chk{white-space:normal;margin:4px 0 14px}
/* deposit progress */
.conf-bar{display:block;width:80px;height:4px;margin-top:5px;border-radius:2px;background:var(--in);overflow:hidden}
.conf-bar i{display:block;height:100%;background:var(--acc)}
/* history */
.hist-tools input[type=date]{width:auto;min-width:140px;height:36px}
.hist-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.hist-foot:has(#hist-more[hidden]):has(#hist-count:empty){display:none}
/* support thread */
.support-grid{align-items:start}
.support-form .form-acts{margin-top:4px}
.thread{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.msg{background:var(--bg);border-radius:8px;padding:10px 12px;min-width:0}
.msg.admin{background:var(--info-soft)}
.msg-h{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:4px;font-size:13px}
.msg-b{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.6}
.back-link{display:inline-flex;align-items:center;margin-bottom:6px}
/* admin operations */
.flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin-bottom:16px}
.pg .flag-grid>.card{margin:0}
.flag-card.engaged{box-shadow:inset 0 0 0 1px var(--dn)}
.flag-card .kv{margin-top:6px}
.flag-card .form-acts{flex-wrap:wrap;justify-content:flex-start;margin-top:14px}
.flag-card .form-acts button{white-space:normal;height:auto;min-height:36px;padding:6px 12px;line-height:1.35;text-align:left}
td.wrap-cell,table td.wrap-cell{white-space:normal;min-width:160px;max-width:360px;overflow-wrap:anywhere}
.sys-more .card-h{margin-bottom:0}
.sys-more-b{margin-top:14px}
/* dialogs: a long confirmation next to a checkbox wraps inside the dialog (label.chk is nowrap elsewhere: 41 px sideways scroll at 390 px) */
.dlg label.chk{white-space:normal}
/* history kinds: 7 tabs wrap instead of hiding behind a sideways swipe */
#hist-tabs{flex-wrap:wrap;overflow:visible;column-gap:20px;row-gap:2px}
.dlg-sub{font-size:13.5px;margin:14px 0 6px;color:var(--mut);font-weight:500}
.mail-test{margin:6px 0 2px;width:auto}
.mail-test input{flex:1 1 220px;max-width:360px}
.access-filters{margin-bottom:12px;width:auto}
.access-filters input{min-width:150px;height:36px}
.ticket-st{margin-top:12px;width:auto}
@media (max-width:760px){
  .sysbar{padding:8px 12px}
  .foot-in{padding:18px 16px 24px}
  .access-filters input,.mail-test input{flex:1 1 140px;min-width:0}
  .hist-tools input[type=date]{flex:1 1 130px;min-width:0}
}
/* touch screens: the new controls get 44 px hit areas like the rest of the app (F09) */
@media (hover:none) and (pointer:coarse){
  .sys-x{width:44px;height:44px}
  .sys-acts .linkbtn{display:inline-flex;align-items:center;min-height:44px}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px}
  .idlebar button{min-height:44px}
  .consents label.chk{min-height:44px;align-items:center}
  .consents label.chk input{margin-top:0}
  .cs-row>a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .close-blockers .btn,.close-form label.chk,.hist-foot button,.flag-card .form-acts button{min-height:44px}
  .back-link{min-height:44px}
  .ud-seg button{min-height:44px}
  .hist-tools input[type=date],.access-filters input{height:44px}
}
/* static legal pages (web/legal/*.html — no scripts; the same stylesheet) */
/* .top.legal-top: the shell's later `.top{height:64px}` (U1) must not cap the wrapping header (the nav overlapped the page at 390 px);
   relative, not static: the header's gradient rule (.top::after) stays under the header instead of at the first screen's bottom */
.top.legal-top{position:relative;height:auto;min-height:56px;flex-wrap:wrap;row-gap:4px;padding:8px 20px}
.legal-back{font-size:14px;font-weight:600;color:var(--fg)}
.legal-nav{display:flex;flex-wrap:wrap;gap:2px 16px;margin-left:auto;font-size:13.5px}
.legal-nav a{color:var(--fg)}
.legal-nav a[aria-current=page]{color:var(--acc)}
main.legal-page{max-width:820px;margin:0 auto;padding:32px 24px 56px}
.legal-page h1{font-size:26px;font-weight:600;margin:18px 0 6px}
.legal-page h2{font-size:17px;font-weight:600;margin:28px 0 8px}
.legal-page p{color:var(--legal-fg);line-height:1.8;margin:0 0 8px;overflow-wrap:anywhere}
.legal-page .legal-meta{color:var(--mut);font-size:13px}
/* the draft line is a caution (not final yet): warning yellow (--warn), not the brand accent */
.legal-draft{background:var(--warn-soft);border:1px solid rgba(240,185,11,.35);border-radius:8px;padding:10px 14px;color:var(--fg)!important;font-weight:500}
/* the wordmark in the static header: the BRAND text in the page, a rule between it and "Back to trading" */
.legal-top .brand-name+.legal-back{padding-left:10px;border-left:1px solid var(--bd)}
@media (max-width:760px){main.legal-page{padding:20px 16px 40px}.legal-page h1{font-size:22px}.top.legal-top{padding:8px 12px}.legal-nav{margin-left:0;width:100%}}
@media (hover:none) and (pointer:coarse){.legal-nav a,.legal-top .brand{display:inline-flex;align-items:center;min-height:44px}}
/* ===== L4 theme (10-22, ops/prompts/1022-contract-theme.md): static legal pages · global components (dialog scrim · notice text · shared tables;
   toast / status banner / idle bar ride on L1's --btn-bg / --pop-* / --sys-* tokens) ===== */
/* legal pages (web/legal/*.html, GET /legal-ko/*.html) load no theme-init.js, so their <html> has no data-theme: dark by default, light when
   the system asks for it (the wordmark swaps with a <picture> source, theme-color with two media metas). The block repeats the light tokens of
   :root[data-theme=light] (L1, top of this file) — keep the two in step (ops/ui-audit/tool/l4t-audit.mjs compares them). The SPA always carries
   data-theme (theme-init.js runs ahead of this sheet), so :not([data-theme]) never matches there. --legal-fg: body text of the documents */
:root{--legal-fg:#c3c8cf}
:root[data-theme=light]{--legal-fg:#474d57}
@media (prefers-color-scheme:light){
  :root:not([data-theme]){color-scheme:light;
    --bg:#f5f6f8;--card:#ffffff;--bd:#e6e8ea;--in:#f1f2f4;--fg:#1e2329;--mut:#5e6673;
    --bx-bg:#ffffff;--bx-bd:#e6e8ea;--bx-fg:#1e2329;--bx-mut:#5e6673;--bx-sel:#eef1ff;--bx-sec:#eef0f3;--bx-sec-h:#e3e6ea;--bx-hov:#f5f6f8;
    --acc:#2f5bff;--acc2:#08739a;--acc-soft:rgba(47,91,255,.08);
    --up:#02784e;--dn:#cf304a;--dn-t:#c42a42;--warn:#8a6100;--warn-fill:#f0b90b;
    --up-soft:rgba(3,166,109,.10);--dn-soft:rgba(207,48,74,.08);--warn-soft:rgba(240,185,11,.14);
    --info:#3d8bfd;--info-t:#1d5fe0;--info-soft:rgba(61,139,253,.10);--hover:#eaecef;
    --rise:#03a66d;--rise-t:#02784e;--rise-soft:rgba(3,166,109,.10);--fall:#cf304a;--fall-t:#c42a42;--fall-soft:rgba(207,48,74,.08);
    --shadow:0 1px 2px rgba(0,0,0,.06);--overlay:rgba(0,0,0,.04);--btn-bg:#eef0f3;--bd-h:#c4c9d1;--pop-bg:#ffffff;
    --pop-shadow:0 6px 16px rgba(0,0,0,.08);--ic-dim:#b7bdc6;--sys-bg:#eef0f3;--sys-warn-bg:#fdf3d7;
    --legal-fg:#474d57}
}
/* global components in the light theme — the dark values stay in their rules; :where() keeps these at the plain rules' weight, so a screen's
   own scoped rule (.u3 / .u4 tables, a screen's notice) still wins. A lighter scrim behind dialogs; notice body text back on the token (the
   dark theme's #9aa3af, raised for 4.5:1 on dark tints, is 2.3:1 on a light tint); a soft scroll-edge shade on shared tables (.tbl) */
:where(:root[data-theme=light]) .modal{background:rgba(0,0,0,.45)}
:where(:root[data-theme=light]) .notice p{color:var(--mut)}
:where(:root[data-theme=light]) .tbl{background:linear-gradient(to right,var(--card) 30%,rgba(255,255,255,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--card) 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.12),rgba(0,0,0,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.12),rgba(0,0,0,0)) right center/12px 100% no-repeat scroll}
/* shared data tables (table.dt): row rule + hovered row were dark greys (#1f242a / #1b2026) */
:where(:root[data-theme=light]) table.dt td{border-bottom-color:var(--bd)}
:where(:root[data-theme=light]) table.dt tbody tr:hover td{background:var(--bx-hov)}
/* a flagged row (tr.row-bad) at half the red tint: its red badge (.badge.bad, the same tint again) kept 4.4:1 on the doubled tint, 4.7 now */
:where(:root[data-theme=light]) table.dt tr.row-bad td{background:color-mix(in srgb,var(--dn-soft) 50%,transparent)}
/* ===== /L4 theme ===== */
/* touch: toolbars of the history page and the admin tabs (filters, search, refresh / export buttons) reach 44 px — a <select> only grows with height */
@media (hover:none) and (pointer:coarse){
  .hist-tools select,.hist-tools input,.hist-tools button,.admin .toolbar-r>select,.admin .toolbar-r>input:not([type=checkbox]),.admin .toolbar-r>button,
  .admin .toolbar-r>form>input,.admin .toolbar-r>form>select,.admin .toolbar-r>form>button,.ticket-st select,.ticket-st button{height:44px}
  .admin .card-h>button,.admin .card-h>a.btn,.admin .card-h .acts>button,.admin .card-h .acts>a.btn{min-height:44px}
}
/* links that must not break across lines: a wrapped inline link's centre falls on the paragraph (the audit reads it as covered) */
.risk-line a,.cs-meta a{white-space:nowrap}
@media (hover:none) and (pointer:coarse){
  td div.acts a.btn{min-height:44px}
  .foot-links a,.cs-row>a,#hist-tabs a,.admin .card-h .acts>button{min-width:44px;justify-content:center}
  .close-card .card-h button,.close-step-b .form-acts button,.close-form>button,.dlg label.chk,.support-form .form-acts button,
  .admin form.card .form-acts button,.admin .card>.form-acts>button{min-height:44px}
  .admin td a.td-link{display:inline-flex;align-items:center;min-height:44px} /* links inside admin table cells (member, ticket, document) */
  .support .card>.form-acts>button,.support td.wrap-cell>a{min-height:44px} .support td.wrap-cell>a{display:inline-flex;align-items:center} /* My tickets: load more, subject */
}
/* My tickets (half-width card): a long subject wraps inside its cell (an inline-block link: a wrapped inline link's centre would fall on
   the cell), and below 1200 px the form and the list stack — six columns do not fit half of a 1024 px page */
.support-grid td.wrap-cell{min-width:120px}
.support td.wrap-cell>a{display:inline-block}
@media (max-width:1199px){.support-grid{grid-template-columns:minmax(0,1fr)}}
/* W2 10-20 chart toolbar 'All' (the daily chart from the first listed day): set apart from the intervals by a thin rule */
.ivs .iv-all{position:relative;margin-left:5px}
.ivs .iv-all::before{content:'';position:absolute;left:-3px;top:25%;bottom:25%;border-left:1px solid var(--bd)}
@media (max-width:400px){#ivs .iv-all{margin-left:3px}}
/* UI-2 10-29: the links under "Market not found" (an unknown spot / perpetual URL, app.js mktMissing) */
.mkt-missing-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
/* mobile: no double-tap zoom (pinch zoom stays for accessibility); also removes the ~300 ms tap delay on buttons */
html,body{touch-action:manipulation}
a,button,input,select,textarea,label,summary,[role=button],[tabindex]{touch-action:manipulation}

/* ===== Y4 mobile ===== */
/* phones ≤ 767 px, #/trade and #/futures (app.js mobTrade): the panes are tagged [data-mob-pane], their wrappers [data-mob-wrap] are
   flattened, one of Chart · Order book · Trades (· Positions) shows at a time ([data-mob-tab]); a fixed Buy / Sell bar slides the page's own order pane
   (.mob-sheet, same nodes as on desktop) up from the bottom ([data-mob-open]). Above 767 px app.js keeps the added controls [hidden] */
@media (max-width:767px){
  #view .mob-page{display:flex;flex-direction:column;gap:1px}
  #view .mob-page [data-mob-wrap]{display:contents}
  #view .mob-page [data-mob-pane=mkts],
  #view .mob-page:not([data-mob-tab=chart]) [data-mob-pane=chart],
  #view .mob-page:not([data-mob-tab=book]) [data-mob-pane=book],
  #view .mob-page:not([data-mob-tab=trades]) [data-mob-pane=trades],
  #view .mob-page[data-mob-kind=perp]:not([data-mob-tab=pos]) [data-mob-pane=bottom],
  #view .mob-page[data-mob-kind=perp]:not([data-mob-tab=pos]) [data-mob-pane=acct]{display:none}
  #view .mob-page [data-mob-pane=acct]{order:1} /* Positions tab: positions first, the wallet under them */
  #view .mob-page [data-mob-pane=chart]{min-height:0}
  #view .mob-page [data-mob-pane=chart] .chart{flex:none;height:340px;min-height:0} /* a fixed box: the autosizing chart cannot feed its own size back (WebKit ResizeObserver loop) */
  #view .mob-page [data-mob-pane=book],#view .mob-page [data-mob-pane=trades]{min-height:360px}
  #view .mob-page [data-mob-pane=trades] .levels{max-height:none}
  /* symbol bar: the name on top; the price and its 24h change on the left, the other 24h figures two to a row on the right
     (price 1 row + change 2 / 3 rows = exactly the rows of the figures — spot 5 → 3, futures 8 → 4 — so no figure drops into the left column) */
  #view .mob-page [data-mob-head]{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:4px 10px;align-items:start;padding:8px 12px 10px}
  #view .mob-page [data-mob-head]>*{min-width:0;order:3}
  #view .mob-page [data-mob-head]>:empty{display:none}
  #view .mob-page [data-mob-head]>.dd,#view .mob-page [data-mob-head]>.tk-st{grid-column:1 / -1;order:0}
  #view .mob-page [data-mob-head]>.sp-fav{top:6px;right:6px;width:44px;height:44px} /* the favourite star (Y2) keeps its corner, at 44 px */
  #view .mob-page [data-mob-head]>.tk.big{grid-column:1;order:1;display:flex;flex-direction:column}
  #view .mob-page [data-mob-head]>.tk.big b{font-size:clamp(18px,6vw,24px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #view .mob-page [data-mob-head]>.tk:has(#tk-chg){grid-column:1;grid-row:span 2;order:2}
  #view .mob-page[data-mob-kind=perp] [data-mob-head]>.tk:has(#tk-chg){grid-row:span 3}
  #view .mob-page [data-mob-head]>.tk:has(#tk-chg) small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* read, not shown */
  #view .mob-page [data-mob-head]>.tk:has(#tk-chg) #tk-chg{font-size:14px;font-weight:600;white-space:normal}
  #view .mob-page [data-mob-head]>.tk{display:flex;flex-direction:column;gap:0;line-height:1.35}
  #view .mob-page [data-mob-head]>.tk small,#view .mob-page [data-mob-head]>.tk>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #view .mob-page [data-mob-head]>.tk:is(:has(#pf-cd),:has(#tk-fee))>span{white-space:normal} /* rate + countdown, maker / taker: may wrap */
  #view .mob-page [data-mob-head]>.tk:not(.big) small{font-size:11px}
  #view .mob-page [data-mob-head]>.tk:not(.big)>span{font-size:12px}
  /* 2026-11-08 click-test: a long label (ru / ja / en at 360 px) takes two lines instead of an ellipsis after a few letters */
  #view .mob-page [data-mob-head]>.tk:not(.big):not(:has(#tk-chg)) small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;line-height:1.25}
  /* Chart · Order book · Trades (· Positions): stays under the header while the page scrolls */
  #view .mob-tabs{display:flex;position:sticky;top:52px;z-index:6;background:var(--card);border-bottom:1px solid var(--bd);padding:0 4px;overflow-x:auto;scrollbar-width:none}
  #view .mob-tabs::-webkit-scrollbar{display:none}
  #view .mob-tabs button{flex:none;min-width:44px;height:44px;padding:0 12px;background:none;border:0;border-radius:0;color:var(--mut);font-size:14px;font-weight:500}
  #view .mob-tabs button[aria-selected=true]{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--acc)}
  #view .mob-tabs .mob-n{margin-left:2px;font-size:12px}
  /* fixed Buy / Sell (futures: Buy/Long · Sell/Short) */
  body:has(#view .mob-page){padding-bottom:calc(61px + env(safe-area-inset-bottom,0px))}
  #view .mob-bar{position:fixed;left:0;right:0;bottom:0;z-index:19;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--bd)}
  #view .mob-bar button{height:44px;margin:0;font-size:15px;font-weight:600;border-radius:8px}
  body:has(#view .mob-bar:not([hidden])) #toasts,body:has(#view .mob-bar:not([hidden])) .idlebar{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  /* the order sheet: the page's order pane, fixed to the bottom; closed = moved below the screen and out of the focus order */
  #view .mob-sheet{position:fixed;left:0;right:0;bottom:0;z-index:36;margin:0;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
    padding-top:0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);border-radius:14px 14px 0 0;box-shadow:var(--tr-sheet-sh);
    transform:translateY(100%);visibility:hidden;transition:var(--mob-sheet-motion,none)}
  /* Only a direct open / close / swipe may animate; mounting a pane or crossing the breakpoint must settle immediately. */
  #view .mob-sheet[data-mob-motion]{--mob-sheet-motion:transform .25s ease,visibility 0s linear .25s;--mob-sheet-open-motion:transform .25s ease}
  #view .mob-page[data-mob-open] .mob-sheet{transform:none;visibility:visible;transition:var(--mob-sheet-open-motion,none)}
  #view .mob-sheet:focus{outline:none}
  #view .mob-scrim{position:fixed;inset:0;z-index:35;background:var(--tr-scrim);touch-action:none}
  html:has(#view .mob-page[data-mob-open]),html:has(#view .mob-page[data-mob-open]) body{overflow:hidden}
  html:has(#view .mob-page[data-mob-open]) #toasts{top:calc(8px + env(safe-area-inset-top,0px));bottom:auto}
  /* sheet head: grab handle, Buy | Sell switch, close — swiped down to close (app.js), so no browser panning on it */
  #view .mob-sh-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:6px;padding:16px 4px 8px 12px;background:var(--card);touch-action:none}
  #view .mob-page[data-mob-kind=perp] .mob-sh-head{margin:0 -12px 4px}
  #view .mob-grab{position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--bd-h)}
  #view .mob-seg{display:flex;flex:1 1 auto;min-width:0;gap:4px;background:var(--in);border-radius:8px;padding:3px}
  #view .mob-seg button{flex:1 1 0;min-width:0;height:44px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:var(--mut);font-size:15px;font-weight:600}
  #view .mob-seg [data-mob-side-btn=buy][aria-pressed=true]{background:var(--tr-buy-bg);color:var(--tr-buy-fg)}
  #view .mob-seg [data-mob-side-btn=sell][aria-pressed=true]{background:var(--tr-sell-bg);color:var(--tr-sell-fg)}
  #view .mob-x{flex:none;width:44px;height:44px;padding:0;background:none;border:0;font-size:26px;line-height:1;color:var(--mut)}
  /* one side at a time: the spot form / the futures button (and its cost · max) of the other side are hidden */
  #view .mob-sheet[data-mob-side=buy] [data-side=sell],#view .mob-sheet[data-mob-side=sell] [data-side=buy]{display:none}
  #view .mob-sheet[data-mob-side=buy] .pf-info>:has(#pf-cost-s,#pf-max-s),#view .mob-sheet[data-mob-side=sell] .pf-info>:has(#pf-cost-b,#pf-max-b){display:none}
  #view .mob-sheet .forms{grid-template-columns:minmax(0,1fr)}
  #view .mob-sheet .pf-btns{grid-template-columns:minmax(0,1fr)}
  #view .mob-sheet .pf-info{grid-template-columns:minmax(0,1fr)}
  /* hit areas on the phone trade screens: 44 px (the 9 chart intervals keep their shared width at 320 px, only their height grows) */
  #view .mob-sheet .tabs button{min-height:44px;min-width:44px}
  #view .mob-sheet .pf-modes button,#view .mob-sheet .go,#view .mob-sheet .pf-btns button{min-height:44px}
  #view .mob-page [data-mob-head] .pf-symbtn,#view .mob-page .chartbar button{min-height:44px}
  #view .mob-page [data-mob-pane=bottom] .tabs button,#view .mob-page [data-mob-pane=bottom] td.acts button{min-height:44px;min-width:44px}
  #view .mob-page [data-mob-pane=bottom] #cancel-all,#view .mob-page [data-mob-pane=bottom] label.chk{min-height:44px}
  @media (min-width:761px){#view .mob-tabs{top:56px}} /* 761–767 px still has the 56 px desktop header */
  @media (prefers-reduced-motion:reduce){#view .mob-sheet,#view .mob-page[data-mob-open] .mob-sheet{transition:none}}
}
/* ===== Y1 spot order form · order book · market trades (10-20) ===== */
/* book toolbar: three view modes (icons: grey price column + ask / bid stripes) and the grouping step */
.ob-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 0}
.ob .bookmode{gap:2px}
.ob .bookmode button{display:inline-flex;align-items:center;justify-content:center;padding:5px;border:0;border-radius:4px;line-height:0;opacity:.45}
.ob .bookmode button.on{opacity:1;background:var(--in)}
.ob .bookmode button:hover{opacity:.85}
.obi{display:block;position:relative;flex:none;width:14px;height:12px}
.obi::before,.obi::after{content:"";position:absolute;top:0;bottom:0}
.obi::before{left:0;width:4px;background:repeating-linear-gradient(to bottom,var(--mut) 0 2px,transparent 2px 3px)}
.obi::after{left:6px;right:0}
.obi-both::after{background:linear-gradient(to bottom,var(--fall) 0 2px,transparent 2px 3px,var(--fall) 3px 5px,transparent 5px 7px,var(--rise) 7px 9px,transparent 9px 10px,var(--rise) 10px 12px)}
.obi-bids::after{background:repeating-linear-gradient(to bottom,var(--rise) 0 2px,transparent 2px 3px)}
.obi-asks::after{background:repeating-linear-gradient(to bottom,var(--fall) 0 2px,transparent 2px 3px)}
.ob-group{flex:none;width:auto;height:26px;padding:0 4px 0 8px;border:1px solid transparent;border-radius:4px;background:var(--in);color:var(--fg);font-size:12px;cursor:pointer}
.ob-group:hover{border-color:var(--bd)}
/* rows: desktop / tablet draw every level and the pane's height decides how many show (asks clip at the top, bids at the bottom —
   the rows next to the current price always stay); phones keep 12 a side in the two-sided view */
@media (min-width:768px){
  .ob .levels{flex:1 1 0;min-height:150px;overflow:hidden;contain:size}
}
@media (max-width:767px){
  .ob[data-mode=both] #asks>.lvl:nth-last-child(n+13),.ob[data-mode=both] #bids>.lvl:nth-child(n+13){display:none}
}
.ob .lvl.hl{background:var(--tr-hl)}
.ob .lvl.ask.hle{box-shadow:inset 0 1px 0 var(--tr-hl-edge)}
.ob .lvl.bid.hle{box-shadow:inset 0 -1px 0 var(--tr-hl-edge)}
.ob-tip{position:fixed;z-index:40;min-width:180px;padding:8px 12px;border:1px solid var(--bd);border-radius:6px;background:var(--pop-bg);box-shadow:var(--tr-tip-sh);font-size:12px;pointer-events:none}
.ob-tip>div{display:flex;justify-content:space-between;gap:16px;line-height:1.75;white-space:nowrap}
.ob-tip b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
/* current price row: click / Enter → the forms' price */
.ob .midp{align-items:center;min-height:40px;padding:6px 12px;cursor:pointer}
.ob .midp:hover{background:var(--tr-hov)}
.ob .midp:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ob .midp b{font-size:20px;font-weight:600}
.ob #mid-arrow{font-size:16px;font-weight:600}
/* Buy n% ▬▬ n% Sell */
.ob-ratio{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--bd);font-size:12px;white-space:nowrap}
.ob-rb{color:var(--rise-t)}.ob-ra{color:var(--fall-t)}
.ob-rb b,.ob-ra b{font-weight:500;font-variant-numeric:tabular-nums}
.ob-rbar{flex:1;display:flex;gap:2px;height:4px;min-width:20px}
.ob-rbar i{display:block;flex:1 1 0;min-width:0;height:100%}
#ob-rbb{background:var(--rise);border-radius:2px 0 0 2px}#ob-rba{background:var(--fall);border-radius:0 2px 2px 0}
/* order form: Spot header, order-type tabs, outlined fields, Available + deposit shortcut, Max Buy / Sell */
.of-ph{padding-top:0;padding-bottom:0}
.of-kind{align-self:stretch;display:flex;align-items:center;font-size:14px;color:var(--fg);box-shadow:inset 0 -2px 0 var(--acc)}
.of-types{display:flex;align-items:center;padding:10px 12px 0}
.of-types .tabs{gap:18px}
.of-types .tabs button{padding:4px 0;font-size:13.5px;box-shadow:none;background:transparent}
.of-types .tabs button.on{color:var(--fg);font-weight:600;box-shadow:none;background:transparent}
.bx-form .forms{gap:24px;padding:12px 12px 6px}
.of .avail{align-items:center;gap:8px;margin-bottom:10px}
.of .avail>.muted{flex:none;white-space:nowrap}
.of .av-w{display:inline-flex;align-items:center;gap:6px;min-width:0}
.of .av{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-dep{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--bx-pri);color:var(--bx-pri-fg);font-size:14px;font-weight:700;line-height:1}
.of-dep:hover{background:var(--bx-pri-h)}
.of-dep::after{content:"";position:absolute;inset:-8px -4px -8px -12px} /* the hit area grows left / up / down: the icon sits at the form's right edge */
.of label.fx{background:transparent;border-color:var(--bd-h);border-radius:8px}
.of label.fx:hover{border-color:var(--mut)}
.of label.fx:focus-within{border-color:var(--acc)}
.of label.fmkt{background:var(--in);border-color:transparent}
.of .ofi{display:flex;justify-content:space-between;gap:8px;margin:-2px 0 2px;font-size:12px}
.of .ofi .f-max{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.of .go{height:42px;margin-top:2px;border-radius:8px;font-size:14.5px;font-weight:600}
/* % slider: a rail with diamonds at 0·25·50·75·100 (the passed ones filled), a diamond thumb and a % bubble while dragging. The native
   range input stays underneath for the keyboard (its focus ring is drawn on the thumb); pointers are handled on .pct (app.js ofBind) */
.of .pct{--pct:0%;position:relative;height:24px;margin:2px 7px 12px;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none}
.of .pct input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;pointer-events:none}
.of .pct-rail{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(to right,var(--acc) var(--pct),var(--bd) var(--pct));pointer-events:none}
.of .pct .ticks{position:absolute;inset:0;display:block;pointer-events:none}
.of .pct .ticks button{position:absolute;top:0;bottom:0;flex:none;width:20px;min-height:0;margin-left:-10px;padding:0;border:0;border-radius:0;background:transparent;pointer-events:auto;cursor:pointer}
.of .pct .ticks button[data-p="0"]{left:0}.of .pct .ticks button[data-p="25"]{left:25%}.of .pct .ticks button[data-p="50"]{left:50%}
.of .pct .ticks button[data-p="75"]{left:75%}.of .pct .ticks button[data-p="100"]{left:100%}
.of .pct .ticks button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;box-sizing:border-box;transform:rotate(45deg);border:2px solid var(--bd-h);background:var(--card)}
.of .pct .ticks button.on::before{border-color:var(--acc);background:var(--acc)}
.of .pct .ticks button:hover::before{border-color:var(--fg)}
.of .pct .ticks button:focus-visible{outline:none}
.of .pct .ticks button:focus-visible::before{box-shadow:0 0 0 2px var(--acc)}
.of .pct-thumb{position:absolute;left:var(--pct);top:50%;z-index:1;width:0;height:0;pointer-events:none}
.of .pct-thumb::before{content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;box-sizing:border-box;transform:rotate(45deg);border:3px solid var(--acc);border-radius:2px;background:var(--card)}
.of .pct input:focus-visible~.pct-thumb::before{box-shadow:0 0 0 3px var(--tr-ring)} /* --acc2 */
.of .pct-tip{position:absolute;left:0;bottom:11px;transform:translateX(calc(var(--pct) * -1));padding:1px 6px;border-radius:4px;background:var(--tr-tip-bg);color:var(--tr-tip-fg);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;opacity:0;transition:opacity .12s}
.of .pct.drag .pct-tip,.of .pct input:focus-visible~.pct-thumb .pct-tip{opacity:1}
@media (hover:hover){.of .pct:hover .pct-tip{opacity:1}}
@media (hover:none) and (pointer:coarse){
  .of .pct{height:36px}
  .of .pct .ticks button{width:32px;margin-left:-16px}
  .of-dep::after{inset:-14px -6px -14px -22px}
  .ob .bookmode button{min-width:34px;min-height:34px}
  .ob-group{height:34px}
}
/* market trades: Market Trades | My Trades; a row's price → the forms */
.mt>.ph{padding-top:0;padding-bottom:0}
.mt #mt-tabs{align-self:stretch;gap:16px}
.mt #mt-tabs button{padding:0 2px;font-size:13px;font-weight:500}
.mt #mt-tabs button.on{color:var(--fg);font-weight:600}
.mt #mkt-trades>.row[data-p]{cursor:pointer}
.mt #mkt-trades>.row[data-p]:hover{background:var(--tr-hov)}
.mt .mt-none{padding:24px 12px;font-size:12.5px}
/* ===== /Y1 ===== */
/* ===== Y2 spot frame · symbol bar · market list · chart toolbar · bottom tabs · colour convention (10-20) ===== */
/* colour convention: global by default — rise / buy green, fall / sell red. <html data-updown="kr"> (Account & Security > Display settings > Domestic) keeps the
   domestic :root values at the top of this file. Text tokens ≥ 4.5:1 on every surface (#0ecb81 6.2:1 · #ff6b7d 4.78:1 on the hover grey) */
html:not([data-updown=kr]){--rise:#0ecb81;--rise-t:#0ecb81;--rise-soft:rgba(14,203,129,.12);--fall:#f6465d;--fall-t:#ff6b7d;--fall-soft:rgba(246,70,93,.12)}
/* favourite star: a CSS shape, grey → cyan (--acc2) when on */
.star{display:inline-block;flex:none;width:14px;height:14px;background:var(--tr-star);transition:background .12s;
  clip-path:polygon(50% 0,61.8% 35.3%,98% 35.3%,68.5% 57%,79.4% 91%,50% 70%,20.6% 91%,31.5% 57%,2% 35.3%,38.2% 35.3%)}
.on>.star{background:var(--acc2)}
/* page frame — desktop (≥ 1181 px): book | chart over the order forms | market list over the market trades, the tabs under all three.
   The chart pane leaves room for the order forms in the first screen; the book and the right column take the height of the middle one */
@media (min-width:1181px){
  .sp .bx-grid{grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(280px,320px);min-height:0}
  .sp .bx-chart{flex:none;height:clamp(320px,calc(100vh - 566px),640px);min-height:0} /* 1440×900: the Buy / Sell buttons end ≤ 900 px (2026-11-07: − 36 px for the Post Only / GTC row) */
  .sp .bx-chart .chart{min-height:0}
  .sp .bx-side{contain:size;min-height:0}
  .sp .bx-mkts{flex:0 0 46%;max-height:none;min-height:0}
  .sp .bx-trades{flex:1 1 0;min-height:0}
}
/* tablet (768–1180 px): book | chart + forms, then the market list and the trades side by side at one height */
@media (min-width:768px) and (max-width:1180px){
  .sp .bx-grid{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}
  .sp .bx-chart{flex:none;height:440px;min-height:0}
  .sp .bx-chart .chart{min-height:0}
  .sp .bx-side{grid-column:1 / -1;flex-direction:row;height:440px}
  .sp .bx-side>.pane{flex:1 1 0;min-width:0;min-height:0;max-height:none}
}
@media (min-width:768px){
  .sp .bx-mkts .levels,.sp .bx-trades .levels{flex:1 1 0;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
}
/* symbol bar: ★ · pair ▾ · price (tick colour) over its $ value · 24h Change · High · Low · Volume · Turnover · Fees */
.sp .bx-head{gap:8px 28px;min-height:60px;padding:8px 16px;position:relative}
.sp .sp-fav{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-right:-20px;padding:0;border:0;border-radius:4px;background:none}
.sp .sp-fav .star{width:16px;height:16px}
.sp .sp-fav:hover .star{background:var(--tr-star-h)}.sp .sp-fav.on:hover .star{background:var(--acc2);filter:brightness(1.2)}
.sp .bx-head .tk{gap:3px}
.sp .bx-head .tk small{font-size:12px;white-space:nowrap}
.sp .bx-head .tk>span{font-size:12px;font-weight:500;white-space:nowrap}
.sp .bx-head .tk.big{min-width:96px}
.sp .bx-head .tk.big b{font-size:20px;font-weight:600;line-height:1.15}
@media (max-width:767px){.sp .bx-head>.sp-fav{position:absolute;top:8px;right:8px;z-index:1;width:40px;height:40px;margin:0}}
/* market list: search · ★ / quote tabs + Change | Volume · sortable header · rows (★ pair | price | 24h change or 24h value) */
.sp .bx-mkts .mk-search{position:relative;display:block;flex:none;margin:8px 12px 2px}
.sp .bx-mkts .mk-search input{width:100%;height:32px;margin:0;padding:0 10px 0 32px;border-radius:6px;font-size:13px}
.sp .mk-sic{position:absolute;left:11px;top:50%;width:12px;height:12px;margin-top:-7px;border:2px solid var(--mut);border-radius:50%;pointer-events:none}
.sp .mk-sic::after{content:"";position:absolute;right:-5px;bottom:-3px;width:6px;height:2px;background:var(--mut);transform:rotate(45deg)}
.sp .mk-bar{display:flex;align-items:center;gap:8px;flex:none;min-height:32px;padding:0 12px}
.sp .mk-tabs{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0;align-self:stretch;overflow-x:auto;scrollbar-width:none}
.sp .mk-tabs::-webkit-scrollbar{display:none}
.sp .mk-tabs button{flex:none;display:inline-flex;align-items:center;height:auto;align-self:stretch;padding:0 1px;border:0;border-radius:0;background:none;color:var(--mut);font-size:12.5px;font-weight:500}
.sp .mk-tabs button:hover{color:var(--fg)}
.sp .mk-tabs button.on{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--acc)}
.sp .mk-col{display:flex;flex:none;padding:2px;border-radius:4px;background:var(--in)}
.sp .mk-col button{height:22px;padding:0 7px;border:0;border-radius:3px;background:none;color:var(--mut);font-size:11.5px}
.sp .mk-col button:hover{color:var(--fg)}
.sp .mk-col button.on{background:var(--tr-on);color:var(--fg);box-shadow:var(--tr-on-sh)}
.sp .bx-mkts .row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.85fr)}
.sp .bx-mkts .row.head{flex:none;margin-bottom:0;border-bottom:0;padding-top:4px;padding-bottom:2px}
.sp .mk-head button{display:inline-flex;align-items:center;gap:3px;min-width:0;height:22px;padding:0;border:0;border-radius:0;background:none;color:var(--mut);font-size:11.5px;font-weight:400;overflow:hidden}
.sp .mk-head button:nth-child(n+2){justify-content:flex-end}
.sp .mk-head button:hover{color:var(--fg)}
.sp .mk-head button::after{content:"";flex:none;width:7px;height:10px;background:linear-gradient(to bottom,var(--s1,var(--bd-h)) 50%,var(--s2,var(--bd-h)) 50%);
  clip-path:polygon(50% 0,100% 40%,0 40%,50% 0,50% 100%,0 60%,100% 60%,50% 100%)}
.sp .mk-head button.asc{color:var(--fg);--s1:var(--fg)}.sp .mk-head button.desc{color:var(--fg);--s2:var(--fg)}
.sp .bx-mkts .row.mk{align-items:center;min-height:24px;padding-top:2px;padding-bottom:2px}
.sp .bx-mkts .mk-name b{font-weight:500}
/* the star's tap area = the row's full height × its first 30 px (row padding 12 + star 14 + 4): placed on the row (position:relative), so
   the name cell's overflow:hidden does not clip it and it never reaches into the next row */
.sp .row.mk{position:relative}
.sp .mk-star{position:static;display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:16px;margin:0 1px 0 0;padding:0;border:0;border-radius:0;background:none;cursor:pointer}
.sp .mk-star::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30px}
.sp .mk-star .star{width:12px;height:12px}
.sp .mk-star:hover .star{background:var(--tr-star-h)}.sp .mk-star.on:hover .star{background:var(--acc2);filter:brightness(1.2)}
.sp .mk-star:focus-visible{outline-offset:1px}
.sp .mk-vol{color:var(--fg)}
.sp .mk-none{padding:24px 12px}
@media (hover:none) and (pointer:coarse){.sp .mk-star::after{width:32px}.sp .mk-tabs button{min-height:36px}.sp .mk-col button{min-height:30px}}
/* chart toolbar: Time · 1s … 1D · All on the left, Original | Depth on the right — flat text buttons, the chosen one bright */
@media (min-width:768px){
  .sp .chartbar{min-height:36px;padding-top:0;padding-bottom:0;gap:12px}
  .sp #ivs,.sp #chartmode{gap:2px}
  .sp #ivs button,.sp #chartmode button{height:26px;padding:0 7px;border-radius:4px;background:none;color:var(--mut);font-size:12.5px;font-weight:500}
  .sp #ivs button:hover,.sp #chartmode button:hover{color:var(--fg)}
  .sp #ivs button.on,.sp #chartmode button.on{color:var(--acc);background:var(--in)}
  .sp #ivs .iv-line{margin-right:2px}
}
/* bottom: Open Orders(n) · Order History · Trade History · Funds | Hide Other Pairs · Cancel All */
.sp .sp-bh{flex-wrap:wrap;row-gap:4px;min-height:44px;padding-top:0;padding-bottom:0}
.sp #btabs{align-self:stretch;gap:22px}
.sp #btabs button{min-height:40px;padding:0 1px;color:var(--mut);font-size:14px;font-weight:500}
.sp #btabs button:hover{color:var(--fg)}
.sp #btabs button.on{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--acc)}
.sp #open-n{font-size:inherit;margin-left:1px}
.sp .sp-tools{display:flex;align-items:center;gap:14px;margin-left:auto;font-weight:400}
.sp .sp-tools label.chk{gap:6px;font-size:12.5px;color:var(--mut)}
.sp .sp-tools input[type=checkbox]{width:14px;height:14px;accent-color:var(--acc)}
.sp .bx-bottom{min-height:300px}
@media (max-width:480px){.sp #btabs{gap:16px}.sp #btabs button{font-size:13px}}
/* ===== /Y2 ===== */
/* ===== Y3 futures trading screen (10-20) ===== */
/* grid above 1180 px: chart | Order book · Recent trades | order form + Account, the bottom tabs across the whole width (the position row's Close · TP/SL
   controls stay in view without scrolling the table sideways) */
.pf .pf-grid{grid-template-columns:minmax(0,1fr) 288px 336px;grid-template-areas:"chart book order" "bottom bottom bottom";grid-template-rows:auto auto;min-height:0}
.pf .pf-grid>.bx-bottom{grid-area:bottom;min-width:0;min-height:300px}
.pf .pf-grid>.bx-chart{min-height:600px}
.pf .pf-left{grid-area:book}
.pf .pf-right{grid-area:order}
.pf .pf-right>.pf-acct{flex:1 1 auto}
/* header: Funding rate / countdown; the same type scale as the spot symbol bar */
.pf .pf-fund .pf-sep{color:var(--mut);margin:0 1px}
.pf #pf-cd{color:var(--fg)}
.pf .bx-head{gap:8px 28px;min-height:60px;padding:8px 16px}
/* 2026-11-08: the futures strip (ten figures) stays one row on 1280–1440 px laptops: the gap narrows with the window (28 px from 1410 px,
   15 px at 1280, room for longer figures) instead of Open Interest dropping to a second row; long labels (ru, vi) still wrap below that */
@media (min-width:768px){.pf .bx-head{column-gap:clamp(10px,calc((100vw - 1130px) / 10),28px)}}
.pf .bx-head .tk{gap:3px}
.pf .bx-head .tk small{font-size:12px;white-space:nowrap}
.pf .bx-head .tk>span{font-size:12px;font-weight:500;white-space:nowrap}
.pf .bx-head .tk.big{min-width:96px}
.pf .bx-head .tk.big b{font-size:20px;font-weight:600;line-height:1.15}
/* chart toolbar: Time · 1s … 1D · All | Original · Depth (as on the spot page) */
@media (min-width:768px){
  .pf .chartbar{min-height:36px;padding-top:0;padding-bottom:0;gap:12px}
  .pf #ivs,.pf #chartmode{gap:2px}
  .pf #ivs button,.pf #chartmode button{height:26px;padding:0 7px;border-radius:4px;background:none;color:var(--mut);font-size:12.5px;font-weight:500}
  .pf #ivs button:hover,.pf #chartmode button:hover{color:var(--fg)}
  .pf #ivs button.on,.pf #chartmode button.on{color:var(--acc);background:var(--in)}
  .pf #ivs .iv-line{margin-right:2px}
}
/* Order book | Recent trades (one pane shown at a time; each pane's header carries both tabs) */
@media (min-width:768px){
  .pf .pf-left[data-v=book]>.pf-trades,.pf .pf-left[data-v=trades]>.pf-book{display:none}
  .pf .pf-left>.pane{flex:1 1 auto;min-height:0}
  .pf .pf-book #asks,.pf .pf-book #bids{flex:1 1 0;min-height:0;overflow:hidden} /* the rows next to the current price always stay */
  .pf .pf-trades .levels{flex:1 1 0;min-height:200px;max-height:none;overflow:auto}
}
.pf .pf-bkh{padding-top:0;padding-bottom:0}
.pf .pf-bktabs{align-self:stretch;gap:16px}
.pf .pf-bktabs button{padding:0 2px;font-size:13px;font-weight:500}
.pf .pf-bktabs button.on{color:var(--fg);font-weight:600}
.pf .bookmode{gap:2px}
.pf .bookmode button{display:inline-flex;align-items:center;justify-content:center;padding:5px;border:0;border-radius:4px;line-height:0;opacity:.45}
.pf .bookmode button.on{opacity:1;background:var(--in)}
.pf .bookmode button:hover{opacity:.85}
.pf .pf-midp{align-items:center;min-height:40px;padding:6px 12px;cursor:pointer}
.pf .pf-midp:hover{background:var(--tr-hov)}
.pf .pf-midp:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pf .pf-midp b{font-size:20px;font-weight:600}
.pf .pf-midp #mid-arrow{font-size:16px;font-weight:600}
/* order panel: Cross | 20x, Limit · Market · Stop Market ▾, outlined fields, size unit ▾, diamond slider, TP/SL · Reduce-Only · TIF */
.pf .pf-order{padding:10px 12px 8px}
.pf .pf-modes{gap:8px;margin-bottom:12px}
.pf .pf-modes button{height:32px;border:1px solid transparent;border-radius:4px;background:var(--in);font-size:13px;font-weight:600}
.pf .pf-modes button:hover{border-color:var(--mut)}
.pf .pf-otabs{overflow:visible;gap:18px;margin:0 0 12px;border-bottom:0}
.pf .pf-otabs>button,.pf .pf-cdd>button{padding:4px 0;font-size:13.5px;box-shadow:none;background:transparent;border-radius:0}
.pf .pf-otabs>button.on,.pf .pf-cdd>button.on{color:var(--fg);font-weight:600;box-shadow:none;background:transparent}
.pf .pf-cdd{height:auto}
.pf .pf-cdd>button{display:inline-flex;align-items:center;gap:5px}
.pf .pf-cmenu{min-width:132px;top:calc(100% + 6px);padding:4px}
.pf .pf-cmenu .dd-item{padding:8px 10px;font-size:13px;color:var(--fg);border-radius:6px;box-shadow:none;background:none}
.pf .pf-cmenu .dd-item:hover{background:var(--in);color:var(--acc)}
.pf .pf-cmenu .dd-item.on{color:var(--acc);box-shadow:none;background:none}
.pf .pf-order .avail{margin-bottom:10px}
.pf .pf-order label.fx{background:transparent;border-color:var(--bd-h);border-radius:8px;margin-bottom:10px}
.pf .pf-order label.fx:hover{border-color:var(--mut)}
.pf .pf-order label.fx:focus-within{border-color:var(--acc)}
.pf .pf-order label.pf-fmkt{background:var(--in);border-color:transparent}
.pf .pf-order label.fx>span{width:auto;min-width:40px;margin-right:6px}
.pf .pf-inbtn{flex:none;padding:0 8px 0 0;border:0;background:none;color:var(--acc);font-size:12px;font-weight:600}
.pf .pf-inbtn:hover{color:var(--acc2)}
.pf .pf-udd{flex:none;height:100%}
.pf .pf-unit{display:inline-flex;align-items:center;gap:4px;height:100%;padding:0 0 0 6px;border:0;background:none;color:var(--fg);font-size:12.5px}
.pf .pf-unit b{font-weight:500}
.pf .pf-umenu{min-width:150px;top:calc(100% + 1px);padding:4px}
.pf .pf-umenu .dd-item{padding:8px 10px;font-size:13px}
.pf .pf-umenu .dd-item.on{color:var(--acc)}
/* % slider: a rail with diamonds at 0·25·50·75·100 (passed ones filled), a diamond thumb; the readout on the right */
.pf .pf-slider{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pf .pf-track{position:relative;flex:1 1 auto;height:24px;margin:0 7px}
.pf .pf-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(to right,var(--acc) var(--p,0%),var(--bd) var(--p,0%));pointer-events:none}
.pf .pf-track input[type=range]{position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;margin:0;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:1}
.pf .pf-track input[type=range]::-webkit-slider-runnable-track{height:24px;background:transparent}
.pf .pf-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:5px;box-sizing:border-box;transform:rotate(45deg);border:3px solid var(--acc);border-radius:2px;background:var(--card)}
.pf .pf-track input[type=range]::-moz-range-track{height:24px;background:transparent}
.pf .pf-track input[type=range]::-moz-range-thumb{width:14px;height:14px;box-sizing:border-box;transform:rotate(45deg);border:3px solid var(--acc);border-radius:2px;background:var(--card)}
.pf .pf-track input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--tr-ring)} /* --acc2 */
.pf .pf-track .ticks{position:absolute;inset:0;display:block;z-index:2;pointer-events:none}
.pf .pf-track .ticks button{position:absolute;top:0;bottom:0;width:16px;margin-left:-8px;padding:0;border:0;border-radius:0;background:transparent;pointer-events:auto;cursor:pointer}
.pf .pf-track .ticks button.cur{pointer-events:none} /* the thumb sits there: it takes the drag */
.pf .pf-track .ticks button[data-p="0"]{left:0}.pf .pf-track .ticks button[data-p="25"]{left:25%}.pf .pf-track .ticks button[data-p="50"]{left:50%}
.pf .pf-track .ticks button[data-p="75"]{left:75%}.pf .pf-track .ticks button[data-p="100"]{left:100%}
.pf .pf-track .ticks button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;box-sizing:border-box;transform:rotate(45deg);border:2px solid var(--bd-h);background:var(--card)}
.pf .pf-track .ticks button.on::before{border-color:var(--acc);background:var(--acc)}
.pf .pf-track .ticks button.cur::before{display:none}
.pf .pf-track .ticks button:hover::before{border-color:var(--fg)}
.pf .pf-pctv{flex:none;min-width:34px;text-align:right;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.pf .pf-opts{gap:6px 12px;margin:0 0 10px}
.pf .pf-opts select{height:26px;padding:0 4px}
.pf .pf-tpsl{display:flex;flex-direction:column}
.pf .pf-tpsl label.fx{height:36px}
.pf .pf-tpsl label.fx em{color:var(--mut)}
/* Buy/Long | Sell/Short, each with its Cost and Max under it */
.pf .pf-btns{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.pf .pf-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf .pf-side>button{width:100%;height:42px;border-radius:8px;font-size:14px;font-weight:600}
.pf .pf-side .pf-info{display:flex;flex-direction:column;gap:2px;margin:0}
/* Account: Margin Ratio (ring), Maintenance Margin, Margin Balance, then the USDT asset lines */
.pf .pf-acct-body{display:flex;flex-direction:column;gap:10px}
.pf .pf-aratio{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
.pf .pf-aratio-v{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.pf .pf-gauge{display:block;width:16px;height:16px;border-radius:50%;background:conic-gradient(currentColor calc(var(--r,0) * 1%),var(--bd) 0);
  -webkit-mask:radial-gradient(circle,transparent 4.5px,#000 5px);mask:radial-gradient(circle,transparent 4.5px,#000 5px)}
.pf .pf-gauge.ok-t{color:var(--up)}.pf .pf-gauge.pf-warn{color:var(--warn)}.pf .pf-gauge.bad-t{color:var(--dn)}
.pf .pf-asub{padding-top:10px;border-top:1px solid var(--bd);font-size:12.5px;font-weight:600}
/* bottom: Positions (n) · Open Orders (n) · Order History · Trade History · Transaction History · Assets */
.pf .pf-bh{padding-top:0;padding-bottom:0}
.pf .pf-btabs{align-self:stretch;gap:20px}
.pf .pf-btabs button{padding:0 2px;font-size:13.5px;font-weight:500}
.pf .pf-btabs button.on{color:var(--fg);font-weight:600}
.pf .pf-tools{padding:4px 0}
.pf .pf-close .pf-cin{width:80px!important}
.pf .pf-close .pf-cq{width:60px!important}
.pf .bx-bottom button.pf-cbtn{padding:3px 4px;border:0;background:none;color:var(--acc);font-size:12.5px;font-weight:500}
.pf .bx-bottom button.pf-cbtn:hover{color:var(--acc2)}
@media (min-width:768px){.pf .bx-bottom th,.pf .bx-bottom td{padding-left:6px;padding-right:6px}}
.pf .pf-ptpsl{white-space:nowrap}
.pf .pf-tpslv{display:inline-block;margin-right:8px;font-size:12px;font-variant-numeric:tabular-nums}
/* tablet: chart over the book, the order column beside both, the tabs under all */
@media (max-width:1180px){
  .pf .pf-grid{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"chart order" "book order" "bottom bottom";grid-template-rows:auto auto auto}
  .pf .pf-grid>.bx-chart{min-height:440px}
  .pf .pf-left>.pane{min-height:420px}
  .pf .pf-book #asks,.pf .pf-book #bids{flex:none;overflow:visible} /* under the chart: every row of the book, no clipped row */
}
@media (max-width:767px){
  .pf .pf-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "order" "book" "bottom"}
  .pf .pf-bktabs button:not(.on){display:none} /* phones: the page's own Chart · Order book · Trades tabs switch the panes */
  .pf .pf-bktabs button.on{box-shadow:none}
  #view .mob-sheet[data-mob-side=buy] .pf-side:has([data-side=sell]),#view .mob-sheet[data-mob-side=sell] .pf-side:has([data-side=buy]){display:none}
  #view .mob-page .pf-fund>span{white-space:normal} /* Funding rate over its countdown in the narrow header cell */
  .pf .pf-fund .pf-sep{display:none}
  .pf .pf-fund #pf-cd{display:block}
  .pf .pf-btns{grid-template-columns:minmax(0,1fr)}
}
@media (hover:none) and (pointer:coarse){ /* touch: 44 px targets */
  .pf .pf-track{height:44px}
  .pf .pf-track input[type=range]::-webkit-slider-runnable-track{height:44px}
  .pf .pf-track input[type=range]::-webkit-slider-thumb{margin-top:15px}
  .pf .pf-track .ticks button{width:44px;margin-left:-22px}
  .pf .pf-modes button,.pf .pf-side>button,.pf .pf-order label.fx{height:44px}
  .pf .pf-inbtn,.pf .pf-unit{display:inline-flex;align-items:center;align-self:center;min-width:44px;height:44px;justify-content:center} /* the 44 px field's full height */
  .pf .pf-cmenu .dd-item,.pf .pf-umenu .dd-item{min-height:44px}
  .pf .pf-tools select{height:44px}
  .pf .pf-cdd>button,.pf .pf-otabs>button,.pf .pf-bktabs button,.pf .pf-btabs button{min-height:44px;min-width:44px;justify-content:center}
  .pf .bookmode button{min-width:44px;min-height:44px}
  .pf .pf-midp{min-height:44px}
  .pf .pf-opts label.chk,.pf .pf-tools label.chk{min-height:44px}
  .pf .pf-opts select{height:44px}
  .pf .bx-bottom button.pf-cbtn,.pf #pf-xfer{min-width:44px;min-height:44px}
  .pf .pf-close .pf-cin{min-height:44px}
}
/* ===== /Y3 ===== */
/* ===== Z4 futures order TP/SL (10-21): Take Profit · Stop Loss triggers + Mark/Last, check line, TP/SL in the open orders and positions tables ===== */
.pf .pf-tpsl .pf-tpslrow{display:flex;align-items:stretch;gap:6px;margin-bottom:8px}
.pf .pf-tpsl .pf-tpslrow label.fx{flex:1 1 auto;min-width:0;margin-bottom:0}
.pf .pf-tpsl .pf-tpslrow label.fx>span{min-width:52px;white-space:nowrap}
.pf .pf-tpsl .pf-tpslrow select{flex:none;width:64px;height:36px;padding:0 6px;border:1px solid var(--bd-h);border-radius:8px;background:transparent;color:var(--fg);font-size:12px}
.pf .pf-tpsl .pf-tpslrow select:hover{border-color:var(--mut)}
.pf .pf-tpslerr{margin:-2px 0 8px;color:var(--dn-t);font-size:11.5px;line-height:1.45}
.pf .bx-bottom .pf-otpsl{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}
.pf .bx-bottom .pf-otpsl .pf-tpk{display:block}
.pf .bx-bottom .pf-otpsl .pf-tpk b{color:var(--mut);font-weight:500}
.pf .bx-bottom .pf-otpsl .pf-link{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;background:var(--acc-soft);color:var(--acc);font-size:11.5px;font-weight:500}
.pf .pf-tpslv .pf-tpsln{margin-top:1px;font-size:11px}
.pf .bx-bottom td.pf-ptpsl>*{vertical-align:middle}
@media (hover:none) and (pointer:coarse){
  .pf .pf-tpsl .pf-tpslrow select{height:44px}
}
/* ===== /Z4 ===== */
/* ===== Z3 spot Stop-Limit (10-21): order type tab · stop price field · trigger hint · trigger condition in the open orders table ===== */
/* Stop / Limit are longer than Price: every label of a stop-limit form takes the same width, so the inputs line up */
.of[data-ot=stop_limit] label.fx>span{width:58px;white-space:nowrap}
.of-types .tabs button{white-space:nowrap}
/* the stop line (when it fires) above the fee estimate: two lines kept, so the form does not jump while typing */
.of[data-ot=stop_limit] .est{min-height:32px;line-height:1.45}
.bx-bottom td.sp-trig{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:800px){
  .tbl[data-cards]>table>tbody>tr>td.sp-trig-none{display:none} /* phone cards: a limit / market order has no trigger condition */
}
/* ===== /Z3 ===== */
/* ===== L2 theme (10-22): trade screens (spot · futures · phone order sheet) — the hard-coded dark greys of the trade sections became
   these tokens (the :root values are the old dark ones, unchanged); shared ones come from the L1 block at the top (--bd rails, --bd-h
   outlined fields / slider diamonds / sort arrows / grab handle, --pop-bg tooltip). Light: book depth bars and row hovers fainter, so a
   bid / ask price over a full-width bar under the hover keeps 4.5:1 (#c42a42 4.56 · #02784e 4.68 · kr #1d5fe0 4.73); Buy / Sell white on
   the deeper --rise-t / --fall-t (5.5:1 — near-black on the bright red fill read 3.9). The chart / depth canvas colours: app.js CH_PAL ===== */
:root{--tr-hov:rgba(43,49,57,.45);--tr-hov-row:#2b313966;--tr-hl:rgba(43,49,57,.6);--tr-hl-edge:#5e6673;--tr-bar:.16;
  --tr-tip-bg:#eaecef;--tr-tip-fg:#0b0e11;--tr-tip-sh:0 8px 24px rgba(0,0,0,.5);--tr-ring:rgba(34,211,248,.55);
  --tr-star:#5e6673;--tr-star-h:#848e9c;--tr-on:#2b3139;--tr-on-sh:none;--tr-sheet-sh:0 -12px 32px rgba(0,0,0,.55);--tr-scrim:rgba(0,0,0,.55);
  --tr-buy-bg:var(--rise);--tr-buy-fg:#0b0e11;--tr-sell-bg:var(--fall);--tr-sell-fg:#0b0e11}
:root[data-theme=light]{--tr-hov:rgba(30,35,41,.045);--tr-hov-row:rgba(30,35,41,.045);--tr-hl:rgba(30,35,41,.045);--tr-hl-edge:#b7bdc6;--tr-bar:.08;
  --tr-tip-bg:#1e2329;--tr-tip-fg:#ffffff;--tr-tip-sh:0 6px 16px rgba(0,0,0,.12);--tr-ring:rgba(8,115,154,.4);
  --tr-star:#9aa1ab;--tr-star-h:#5e6673;--tr-on:#ffffff;--tr-on-sh:0 1px 2px rgba(0,0,0,.1);--tr-sheet-sh:0 -8px 24px rgba(0,0,0,.12);--tr-scrim:rgba(0,0,0,.4);
  --tr-buy-bg:var(--rise-t);--tr-buy-fg:#ffffff;--tr-sell-bg:var(--fall-t);--tr-sell-fg:#ffffff}
/* ===== /L2 theme ===== */
/* ===== U1 shell (10-21): tokens · header · member sidebar · cards · tabs · tables · filters · dashboard · markets overview ===== */
/* tokens measured on the reference (body = header = card #181A20, card rule #333B47, text #EAECEF / #929AA5); the primary colour is the brand blue (K1 10-22) */
:root{--bx-bg:#181a20;--bx-bd:#333b47;--bx-fg:#eaecef;--bx-mut:#929aa5;--bx-sel:#29313d;--bx-pri:#2f5bff;--bx-pri-h:#2a52f0;--bx-pri-fg:#ffffff;--bx-sec:#333b47;--bx-sec-h:#3e4653;--bx-hov:#1e2329;--bx-r:16px}
html,body{background:var(--bx-bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}

/* shell: sidebar 248 px | main; phones (< 768 px): the menu rows above the main column instead */
main:has(.bx-shell){max-width:none;padding:0}
.bx-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 64px);color:var(--bx-fg)}
.bx-shell.no-side{grid-template-columns:minmax(0,1fr)}
.bx-shell>.bx-side{display:block;grid-column:auto;flex-direction:column;position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 24px 0;scrollbar-width:thin}
.bx-snav{display:flex;flex-direction:column}
.bx-si{display:flex;align-items:center;gap:12px;width:100%;height:48px;padding:0 16px 0 24px;border:0;border-radius:0 12px 12px 0;background:none;color:var(--bx-fg);font-size:16px;font-weight:500;line-height:24px;text-align:left;cursor:pointer;white-space:nowrap}
.bx-si .ic{width:18px;height:18px;flex:none;stroke-width:1.6;color:var(--bx-mut)}
.bx-si>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bx-si:hover{background:var(--bx-hov);color:var(--bx-fg);border-color:transparent}
.bx-si.on{background:var(--bx-sel);box-shadow:inset 3px 0 0 var(--acc)}
.bx-si.on .ic,.bx-sgrp.cur .ic{color:var(--bx-fg)}
.bx-si.sub{padding-left:54px;color:var(--bx-mut);font-size:14px}
.bx-si.sub.on,.bx-si.sub:hover{color:var(--bx-fg)}
.bx-sgrp .bx-chev{width:16px;height:16px;margin-left:auto;transition:transform .15s}
.bx-sgrp-w.open>.bx-sgrp .bx-chev{transform:rotate(180deg)}
.bx-shell.funds .bx-si{font-size:14px}
.bx-body{min-width:0;display:flex;flex-direction:column}
.bx-mnav{display:none}
.bx-main{min-width:0;width:100%;max-width:1264px;padding:24px 32px 48px;display:flex;flex-direction:column;gap:24px}
.bx-shell.no-side .bx-main{margin:0 auto}
.bx-main h1{margin:0;font-size:28px;line-height:36px;font-weight:600}

/* cards */
.bx-card{background:var(--bx-bg);border:1px solid var(--bx-bd);border-radius:var(--bx-r);padding:24px;min-width:0;color:var(--bx-fg)}
.bx-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.bx-card-h:not(:has(h2)):not(:has(.bx-card-acts>*)){display:none}
.bx-card-h h2{margin:0;font-size:20px;line-height:28px;font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.bx-card-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.bx-card-acts:empty{display:none}
.bx-kpi{font-size:32px;line-height:40px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--bx-fg)}
.bx-kpi small{font-size:14px;font-weight:500;margin-left:6px;color:var(--bx-fg)}
.bx-sub{color:var(--bx-mut);font-size:14px;line-height:20px}

/* buttons and links */
.bx-btn,a.bx-btn,button.bx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border:0;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;cursor:pointer;background:var(--bx-sec);color:var(--bx-fg);text-decoration:none}
.bx-btn.pri{background:var(--pri-grad);color:var(--bx-pri-fg)}
.bx-btn.pri:hover{background:var(--pri-grad);color:var(--bx-pri-fg);filter:brightness(1.08)}
.bx-btn.sec{background:var(--bx-sec);color:var(--bx-fg)}
.bx-btn.sec:hover,.bx-btn:not(.pri):hover{background:var(--bx-sec-h);color:var(--bx-fg)}
.bx-btn.sm{height:32px;padding:0 12px;font-size:14px}
.bx-btn .ic{width:16px;height:16px}
.bx-btn:disabled{opacity:.45;cursor:default}
.bx-link{color:var(--acc);font-weight:500;background:none;border:0;padding:0;height:auto;cursor:pointer;text-decoration:none}
.bx-link:hover{text-decoration:underline;border:0}
.bx-link.u{color:var(--bx-fg);text-decoration:underline;text-underline-offset:2px}
.bx-link.u:hover{color:var(--acc)}
.bx-main .bx-btn:focus-visible,.bx-link:focus-visible,.bx-si:focus-visible,.bx-tab:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bx-main .bx-btn.pri:focus-visible{outline-color:var(--fg)}

/* text tabs: the chosen one white with a short brand-gradient bar under it */
.bx-tabs{display:flex;align-items:center;gap:24px;overflow-x:auto;scrollbar-width:none;min-width:0}
.bx-tabs::-webkit-scrollbar{display:none}
.bx-tab,a.bx-tab,button.bx-tab{position:relative;flex:none;height:40px;padding:0;border:0;border-radius:0;background:none;color:var(--bx-mut);font-size:16px;font-weight:500;line-height:24px;display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;text-decoration:none}
.bx-tab:hover{color:var(--bx-fg);border:0}
.bx-tab.on{color:var(--bx-fg)}
.bx-tab.on::after{content:"";position:absolute;left:30%;right:30%;bottom:2px;height:3px;border-radius:2px;background:var(--brand-grad)}

/* tables: 12 px grey header (⇅ on sortable columns), roomy rows; phones keep the data-cards layout */
.bx-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bx-tbl table,table.bx-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bx-tbl th,table.bx-tbl th{padding:8px 12px;font-size:12px;line-height:16px;font-weight:400;color:var(--bx-mut);border:0;text-align:left;background:none}
.bx-tbl td,table.bx-tbl td{padding:14px 12px;border:0;vertical-align:middle;color:var(--bx-fg)}
.bx-tbl th.r,.bx-tbl td.r,table.bx-tbl th.r,table.bx-tbl td.r{text-align:right}
.bx-tbl tbody tr:hover td{background:var(--bx-hov)}
.bx-tbl th[data-sort]{cursor:pointer;user-select:none}
.bx-tbl th[data-sort]::after{content:"\21C5";margin-left:3px;font-size:10px;opacity:.55}
.bx-tbl th[data-sort][aria-sort=ascending]::after{content:"\2191";opacity:1;color:var(--bx-fg)}
.bx-tbl th[data-sort][aria-sort=descending]::after{content:"\2193";opacity:1;color:var(--bx-fg)}
.bx-coin{display:flex;align-items:center;gap:10px;min-width:0}
.bx-coin>div{display:flex;flex-direction:column;line-height:18px;min-width:0}
.bx-coin b{font-weight:600;font-size:14px}
.bx-coin small{color:var(--bx-mut);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.bx-coin .coin{width:24px;height:24px}

/* empty state */
.bx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 12px;color:var(--bx-mut);font-size:14px;text-align:center}
.bx-empty .ic{width:48px;height:48px;stroke-width:1.1;color:var(--ic-dim)}
td>.bx-empty{padding:40px 12px}

/* filter row: boxed selects with a grey label, a date range box, Search / Reset, toggles on the right */
.bx-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.bx-filter .bx-filter-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.bx-sel,.bx-date{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 12px;border:1px solid var(--bx-bd);border-radius:8px;background:var(--bx-bg);color:var(--bx-fg);font-size:14px;min-width:0}
.bx-sel:hover,.bx-date:hover{border-color:var(--bd-h)}
.bx-sel:focus-within,.bx-date:focus-within{border-color:var(--acc)}
.bx-sel>span,.bx-date>span{color:var(--bx-mut);white-space:nowrap;margin:0}
.bx-sel select,.bx-date input{height:38px;border:0!important;background:transparent!important;padding:0 22px 0 0;width:auto;min-width:60px;color:var(--bx-fg);font-size:14px;appearance:none;-webkit-appearance:none;outline:0}
.bx-sel::after{content:"";position:absolute;right:12px;top:50%;margin-top:-2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--bx-mut);pointer-events:none}
.bx-date input{padding:0;min-width:0;width:118px}
.bx-date input::-webkit-calendar-picker-indicator{filter:invert(.6)}
.bx-filter label.chk{margin:0;color:var(--bx-fg);font-size:14px;gap:8px}
/* ===== /U1 shell (part 1) ===== */
/* ===== U1 shell (part 2): tablet / phone ===== */
@media (max-width:1180px){
  .bx-shell{grid-template-columns:216px minmax(0,1fr)}
  .bx-main{padding:24px 24px 40px}
}
@media (max-width:767px){
  .bx-shell{grid-template-columns:minmax(0,1fr);min-height:0}
  .bx-shell>.bx-side{display:none}
  .bx-mnav{display:block;position:sticky;top:52px;z-index:5;background:var(--bx-bg);border-bottom:1px solid var(--bx-bd)}
  .bx-mrow{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px 16px;-webkit-overflow-scrolling:touch}
  .bx-mrow::-webkit-scrollbar{display:none}
  .bx-mrow.sub{padding-top:0}
  .bx-mi{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;color:var(--bx-mut);font-size:14px;font-weight:500;white-space:nowrap}
  .bx-mi.on{background:var(--bx-sel);color:var(--bx-fg)}
  .bx-mrow.sub .bx-mi{height:28px;font-size:13px}
  .bx-main{padding:16px 16px 32px;gap:16px}
  .bx-card{padding:16px;border-radius:12px}
  .bx-card-h h2{font-size:18px;line-height:24px}
  .bx-kpi{font-size:26px;line-height:34px}
  .bx-filter{gap:8px}
  .bx-filter .bx-filter-r{margin-left:0;width:100%}
  .bx-sel,.bx-date{flex:1 1 140px}
  .bx-sel select{width:100%}
}
@media (hover:none) and (pointer:coarse){
  .bx-mi{min-height:40px}
  .bx-btn.sm{min-height:36px}
}
@media (max-width:760px){.bx-mnav{top:52px}}
@media (min-width:761px) and (max-width:767px){.bx-mnav{top:64px}}
/* ===== U1 shell (part 3): header ===== */
.top{height:64px;padding:0 24px;gap:24px;background:var(--bx-bg)}
body:has(.bx-shell) .top{border-bottom-color:transparent}
.top .brand{color:var(--acc)}
/* a faint brand line under the header (K1 10-22) */
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brand-grad);opacity:.45;pointer-events:none}
#nav{gap:4px}
#nav>a{padding:0 8px;font-size:14px;font-weight:500;color:var(--bx-fg)}
#nav>a:hover,#nav>a.on{color:var(--acc)}
.nav-mob{display:none}
.user{gap:8px}
.hdep{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:6px;background:var(--pri-grad);color:var(--bx-pri-fg);font-size:14px;font-weight:500;white-space:nowrap}
.hdep:hover{background:var(--pri-grad);color:var(--bx-pri-fg);filter:brightness(1.08)}
.hdep .ic{width:16px;height:16px;stroke-width:2.2}
.hico .dd-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:none;color:var(--bx-fg)}
.hico .dd-btn .ic{width:22px;height:22px;stroke-width:1.7}
.hico .dd-btn:hover,.hico .dd-btn.on,.hico.open .dd-btn{color:var(--acc);border:0}
.top .dd-menu{background:var(--pop-bg);border-color:var(--bx-bd);border-radius:12px;padding:8px;min-width:220px}
.top .dd-menu a,.top .dd-menu .dd-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--bx-fg)}
.top .dd-menu a:hover,.top .dd-menu .dd-item:hover,.top .dd-menu a.on{background:var(--bx-sel);color:var(--bx-fg)}
.top .dd-menu .ic{width:18px;height:18px;color:var(--bx-mut)}
.hdd-head{flex-direction:row;align-items:center;gap:12px;padding:8px 12px 14px;margin-bottom:6px;border-bottom-color:var(--bx-bd);max-width:300px}
.hdd-head .avatar{width:40px;height:40px;font-size:16px;background:var(--pri-grad);border:0;color:#fff}
.hdd-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.hdd-id b{font-size:14px;overflow-wrap:anywhere}
.lang-btn{height:32px}
/* theme switch (L1 10-22): moon on dark, sun on light — both icons are in the button, the theme shows one (no swap, no reflow) */
.hthm{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:none;color:var(--bx-fg)}
.hthm:hover{color:var(--acc);border:0}
.hthm:focus-visible{outline:2px solid var(--acc2);outline-offset:1px}
.hthm .ic{width:20px;height:20px;stroke-width:1.8}
:root[data-theme=light] .hthm .ic:first-child,:root:not([data-theme=light]) .hthm .ic:last-child{display:none}
@media (max-width:760px){.hthm{width:32px}}
@media (max-width:340px){.top .user{gap:4px}.hthm{width:30px}} /* 280–340 px: the guest's Log In · Sign Up · moon · menu beside the X mark */
@media (max-width:300px){.top .guest-acts .hbtn{padding:0 8px;font-size:12.5px}}
.guest-acts{gap:8px}
.guest-acts .hbtn{height:32px;padding:0 14px;border-radius:6px;background:var(--bx-sec);color:var(--bx-fg);font-size:14px}
.guest-acts .hbtn:hover{background:var(--bx-sec-h);color:var(--bx-fg)}
.guest-acts .hbtn.primary{background:var(--pri-grad);color:var(--bx-pri-fg)}
.guest-acts .hbtn.primary:hover{background:var(--pri-grad);color:var(--bx-pri-fg);filter:brightness(1.08)}
@media (max-width:760px){
  .top{height:52px;padding:0 12px;gap:8px}
  #dd-hwallet,#dd-horders{display:none!important}
  .hdep{height:30px;padding:0 10px}
  #nav{background:var(--bx-bg);border-bottom-color:var(--bx-bd)}
  #nav>a{height:46px;min-height:46px;flex:none;padding:0 4px}
  .nav-mob{display:flex;flex-direction:column;padding-top:4px}
  .nav-mob a,.nav-mob .nav-mob-out{display:flex;align-items:center;height:42px;padding:0 4px 0 12px;color:var(--bx-fg);font-size:14px;font-weight:500;background:none;border:0;border-radius:8px;text-align:left;width:100%}
  #nav .nav-mob a.on{background:var(--bx-sel);color:var(--bx-fg)}
  .nav-mob-h{display:block;padding:14px 4px 4px;color:var(--bx-mut);font-size:12px;font-weight:500}
  .nav-mob-out{margin-top:8px;color:var(--dn-t)!important;border-top:1px solid var(--bx-bd)!important;border-radius:0!important}
}
@media (max-width:400px){.hdep{padding:0 8px}.hdep .ic{display:none}.guest-acts{gap:6px}.guest-acts .hbtn{padding:0 10px;font-size:13px}}

/* ===== U1 shell (part 4): dashboard ===== */
.bxd-prof{display:flex;align-items:center;gap:48px;flex-wrap:wrap;padding:4px 0 8px}
.bxd-who{display:flex;align-items:center;gap:16px;min-width:0;padding-right:48px;border-right:1px solid var(--bx-bd)}
.bxd-av{width:64px;height:64px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--pri-grad);color:#fff;font-size:26px;font-weight:700}
.bxd-mail{font-size:20px;line-height:28px;font-weight:600;overflow-wrap:anywhere;min-width:0}
.bxd-kv{display:flex;flex-direction:column;gap:4px;font-size:14px}
.bxd-kv small{color:var(--bx-mut);font-size:12px}
.bxd-uid{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.bxd-uid .copy{width:24px;height:24px;padding:0;border:0;background:none;color:var(--bx-mut)}
.bxd-kyc{display:inline-flex}
.bxd-h{margin:0 0 16px;font-size:20px;line-height:28px;font-weight:600}
.bxd-track{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;list-style:none;margin:0 0 12px;padding:0}
.bxd-track li{display:flex;align-items:center;gap:8px}
.bxd-track li::after{content:"";flex:1;height:1px;background:var(--bx-bd)}
.bxd-track li:last-child::after{display:none}
.bxd-track span{width:22px;height:22px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--bx-sec);color:var(--bx-fg)}
.bxd-track li.cur span{background:var(--pri-grad);color:#fff}
.bxd-track li.done span{background:var(--up-soft);color:var(--up)}
.bxd-step-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.bxd-step{display:flex;flex-direction:column;gap:8px;min-height:150px;padding:24px;border:1px solid var(--bx-bd);border-radius:var(--bx-r);min-width:0}
.bxd-step h3{margin:0;font-size:16px;line-height:24px;font-weight:600}
.bxd-step.cur{border-color:var(--acc);background:rgba(111,141,255,.05)}
.bxd-step.bad h3{color:var(--dn-t)}
.bxd-step p{margin:0}
.bxd-step-act{margin-top:auto;padding-top:8px}
.bxd-ok{display:inline-flex;align-items:center;gap:6px;color:var(--bx-mut);font-size:14px}
.bxd-ok .ic{color:var(--up);width:18px;height:18px}
.bxd-esth{display:inline-flex;align-items:center;gap:6px}
.bxd-tcard{border-color:transparent;background:linear-gradient(var(--bx-bg),var(--bx-bg)) padding-box,linear-gradient(90deg,rgba(139,44,245,.55),rgba(47,91,255,.55) 60%,rgba(34,211,248,.55)) border-box}
.bx-eye{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none;color:var(--bx-mut);border-radius:6px}
.bx-eye:hover{color:var(--bx-fg);border:0}
.bx-eye .ic{width:18px;height:18px}
.bxd-est .bx-sub{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.bxd-note{color:var(--bx-mut)}
.bxd-more,.bxm-more{display:inline-flex;align-items:center;gap:2px;color:var(--bx-mut);font-size:14px;font-weight:500;background:none;border:0;padding:0;height:auto;cursor:pointer}
.bxd-more:hover,.bxm-more:hover{color:var(--bx-fg);border:0}
.bxd-more-ic{width:14px;height:14px;transform:rotate(-90deg)}
.bxd-mk{margin-top:8px}
.bx-row{cursor:pointer}
.bxd-mk th:first-child,.bxd-mk td:first-child{padding-left:0}
.bxd-mk th:last-child,.bxd-mk td:last-child{padding-right:0}
@media (max-width:1180px){
  .bxd-prof{gap:16px 40px}
  .bxd-who{width:100%;padding-right:0;border-right:0}
}
@media (max-width:1000px){
  .bxd-track,.bxd-step-row{grid-template-columns:minmax(0,1fr)}
  .bxd-track{display:none}
  .bxd-step{min-height:0}
}
@media (max-width:767px){
  .bxd-prof{gap:16px 28px}
  .bxd-who{width:100%;padding-right:0;border-right:0}
  .bxd-av{width:48px;height:48px;font-size:20px}
  .bxd-mail{font-size:18px}
  .bxd-step{padding:16px}
  .bxd-mk th,.bxd-mk td{padding-left:6px;padding-right:6px}
}

/* ===== U1 shell (part 5): markets overview ===== */
.bxm .bx-main{max-width:1200px;margin:0 auto}
.bxm-sums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bxm-sum{border:1px solid var(--bx-bd);border-radius:var(--bx-r);padding:16px;min-width:0}
.bxm-sum-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px;color:var(--bx-mut)}
.bxm-sum-h .bxm-more{font-size:12px}
.bxm-sum-row{display:grid;grid-template-columns:minmax(0,1fr) auto 72px;align-items:center;gap:8px;height:36px;color:var(--bx-fg);font-size:14px;border-radius:6px}
.bxm-sum-row:hover{background:var(--bx-hov)}
.bxm-sum-c{display:flex;align-items:center;gap:8px;min-width:0}
.bxm-sum-c b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.bxm-sum-row .bx-chg{text-align:right}
.bxm-sum-row .bxm-px{font-variant-numeric:tabular-nums;text-align:right}
.bxm-none{padding:8px 0}
.bxm-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px}
.bxm-search{display:flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 12px;width:240px;max-width:100%;border:1px solid var(--bx-bd);border-radius:8px;color:var(--bx-mut)}
.bxm-search:focus-within{border-color:var(--acc)}
.bxm-search input{border:0!important;background:transparent;height:38px;padding:0;font-size:14px;color:var(--bx-fg);outline:0}
.bxm-tbl td{padding-top:16px;padding-bottom:16px}
.bxm-usd{display:block;color:var(--bx-mut);font-size:12px;line-height:16px}
.bxm-px{font-weight:500}
.bxm-acts{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px}
.bxm-star{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none}
.bxm-star:hover{border:0}
.bxm-star.on .star,.bxm-star:hover .star{background:var(--brand-cyan)}
.bxm-go{display:inline-flex;color:var(--bx-mut)}
.bxm-go:hover{color:var(--acc)}
.bxm-go .ic{width:18px;height:18px}
@media (max-width:1100px){.bxm-sums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .bxm-sums{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(260px,82%);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
  .bxm-sums::-webkit-scrollbar{display:none}
  .bxm-sum{scroll-snap-align:start}
  .bxm-search{width:100%}
  .bxm-tbl .bxm-vol,.bxm-tbl .bxm-act{display:none}
  .bxm-tbl th,.bxm-tbl td{padding-left:6px;padding-right:6px}
  .bxm-tbl th:first-child,.bxm-tbl td:first-child{padding-left:0}
  .bxm-tbl th:last-child,.bxm-tbl td:last-child{padding-right:0}
  .bxm-tbl table{white-space:normal}
}
/* ===== /U1 shell ===== */
/* ===== U4 account (10-21): Security · Identification · Settings · Referral · Fee Schedule · Support — every rule scoped under .u4 ===== */
.u4{--u4-ok:#2ebd85;display:flex;flex-direction:column;gap:24px;min-width:0;color:var(--bx-fg)}
.u4>.notice{margin-bottom:0}
.u4 .bx-card{margin:0}
.u4-head{display:flex;flex-direction:column;gap:8px}
.u4-head p{margin:0;font-size:14px;line-height:20px}
.u4-head .back-link{align-self:flex-start}
.u4-note{margin:-8px 0 12px;font-size:14px;line-height:20px;color:var(--bx-mut)}
.u4 .bx-btn.danger{color:var(--dn-t);background:transparent;box-shadow:inset 0 0 0 1px var(--dn)} /* (L3) outlined: red text on the grey fill was 4.1:1 */
.u4 .bx-btn.danger:hover{color:var(--dn-t);background:var(--dn-soft)}
/* rows: line icon · title + note | state | grey Manage — no rules between rows, a panel opens under its row */
.u4 .sec-list{display:flex;flex-direction:column}
.u4 .sec-wrap{border:0}
.u4 .sec-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:4px 16px;align-items:center;padding:12px 0;border:0}
.u4 .sec-row.noic{grid-template-columns:minmax(0,1fr) auto auto}
.u4 .sec-row:has(>.sec-act:empty){grid-template-columns:24px minmax(0,1fr) auto}
.u4 .sec-row.noic:has(>.sec-act:empty){grid-template-columns:minmax(0,1fr) auto}
.u4 .sec-list>.sec-wrap:first-child>.sec-row{padding-top:0}
.u4 .sec-list>.sec-wrap:last-child>.sec-row{padding-bottom:0}
.u4 .sec-ic{width:24px;height:24px;border-radius:0;background:none;color:var(--bx-fg);align-self:start;justify-content:flex-start}
.u4 .sec-ic .ic{width:20px;height:20px;stroke-width:1.5}
.u4 .sec-main{min-width:0}
.u4 .sec-main b{display:block;font-size:16px;line-height:24px;font-weight:500}
.u4 .sec-main p{margin:4px 0 0;max-width:600px;font-size:14px;line-height:20px;color:var(--bx-mut)}
.u4 .sec-st{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;font-size:14px;line-height:20px;text-align:right}
.u4 .sec-act{display:flex;justify-content:flex-end}
.u4 .sec-act:empty{display:none}
.u4 .sec-act .bx-btn{min-width:80px}
/* 2026-11-08 click-test (low): 768–1023 px — the long Close Account button (ru 264 px) squeezed its description to ~118 px: it goes on its own
   line under the description, as on phones (≤767 below) */
@media (min-width:768px) and (max-width:1023px){
  .u4 .close-card .sec-row{grid-template-columns:24px minmax(0,1fr)}
  .u4 .close-card .sec-row>.sec-st:empty{display:none}
  .u4 .close-card .sec-row>.sec-act{grid-column:2;grid-row:2;justify-content:flex-start;margin-top:6px}
}
.u4 .sec-panel{margin:4px 0 12px;padding:20px;border-radius:12px;background:var(--bx-hov)}
.u4 .sec-list>.sec-wrap:last-child>.sec-panel{margin-bottom:0}
.u4 .sec-panel .notice{background:var(--bx-bg)}
.u4-pacts{display:flex;justify-content:flex-end;margin-bottom:8px}
.u4-on,.u4-val{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--bx-fg);overflow-wrap:anywhere}
.u4-on .ic,.u4-ck.done .ic,.u4 .u4-okic{flex:none;width:16px;height:16px;padding:2px;border:1.5px solid var(--u4-ok);border-radius:50%;color:var(--u4-ok);stroke-width:2.6}
.u4-off{color:var(--bx-mut)}
.u4-val.warn{color:var(--warn)}
.u4-val .copy,.u4-val button{flex:none}
/* security checkup: done = green check, to do = grey ring + underlined link */
.u4-checks{display:flex;flex-wrap:wrap;gap:12px 32px}
.u4-ck{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--bx-fg)}
a.u4-ck{color:var(--bx-fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bx-mut)}
a.u4-ck:hover{color:var(--acc);text-decoration-color:currentColor}
.u4-ring{flex:none;width:16px;height:16px;border:1.5px solid var(--bx-mut);border-radius:50%}
/* identification: profile line, state card, limits — one 640 px column as on the reference */
.u4-kyc{max-width:640px}
.u4-prof{display:flex;align-items:center;gap:16px;min-width:0}
.u4 .avatar.u4-av{width:28px;height:28px;font-size:13px;background:var(--pri-grad);border:0;color:#fff}
.u4 .avatar.u4-av.lg{width:56px;height:56px;border-radius:12px;font-size:24px}
.u4-prof-m{min-width:0;display:flex;flex-direction:column;gap:6px}
.u4-prof-m>b{font-size:16px;line-height:24px;font-weight:600}
.u4-wrap{overflow-wrap:anywhere;min-width:0}
.u4-prof-s{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;line-height:16px}
.u4-prof-s .mono{color:var(--bx-fg)}
.u4-vbadge{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;background:var(--bx-sec);color:var(--bx-fg);font-size:12px;font-weight:500}
.u4-vbadge.ok{background:rgba(46,189,133,.14);color:var(--u4-ok)}
.u4-vbadge.wait{background:var(--warn-soft);color:var(--warn)} /* under review = attention (--warn), not the key colour */
.u4-kst{display:inline-flex;align-items:center;gap:12px;min-width:0}
.u4-kic{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bx-sec);color:var(--bx-fg)}
.u4-kic .ic{width:16px;height:16px;stroke-width:2.4}
.u4-kst.bad .u4-kic{background:#f6465d;color:#181a20}
.u4-kst.ok .u4-kic{background:var(--u4-ok);color:#181a20}
.u4-kst.wait .u4-kic{background:var(--warn-fill);color:#202630}
.u4-kcard>p{margin:0;font-size:14px;line-height:20px}
.u4-reasons{margin:0;padding:0;list-style:none}
.u4-reasons li{position:relative;padding-left:14px;color:var(--dn-t);font-size:14px;line-height:20px;overflow-wrap:anywhere}
.u4-reasons li::before{content:"";position:absolute;left:3px;top:8px;width:4px;height:4px;border-radius:50%;background:currentColor}
.u4-kcard .u4-reasons+p{margin:8px 0 0}
.u4-kacts{display:flex;gap:12px;margin-top:16px}
.u4-kacts .bx-btn{flex:1 1 0;min-width:0}
.u4-kacts .bx-btn.pri{flex-grow:1.4}
.u4-khelp{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px}
.u4-help{display:inline-flex;align-items:center;gap:6px;color:var(--bx-fg);font-size:14px}
.u4-help:hover{color:var(--acc)}
.u4-help .ic{width:16px;height:16px}
.u4-kform:empty{display:none}
.u4-kyc .kyc-form{max-width:none}
.u4-kyc .kyc-form h3{font-size:16px;line-height:24px;margin:0 0 12px}
.u4-kyc .kyc-form h3~h3{margin-top:8px}
.u4-lims{display:flex;flex-direction:column;gap:16px}
.u4-lim{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px;line-height:20px}
.u4-lim .ic{width:16px;height:16px;color:var(--bx-mut)}
.u4-lim-l{color:var(--bx-mut);min-width:0;overflow-wrap:anywhere}
.u4-lim b{font-weight:500;text-align:right}
/* settings */
.u4-who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.u4-ud{display:inline-flex;align-items:center;gap:2px}
.u4-ud b{font-size:11px;line-height:1}
.u4-ud>span{margin-left:6px}
.u4 .seg.u4-seg{max-width:420px;margin-bottom:8px;border-color:var(--bx-bd);border-radius:8px}
.u4 .seg.u4-seg button{height:40px;color:var(--bx-mut)}
.u4 .seg.u4-seg button.on{background:var(--bx-sec);color:var(--bx-fg)}
/* referral: title + numbers | code card; list with text tabs; rebate + how-to */
.u4-ref-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px;align-items:start}
.u4-ref-intro{min-width:0}
.u4-ref-intro .u4-h1{font-size:32px;line-height:40px}
.u4-ref-intro>p{margin:8px 0 0;font-size:16px;line-height:24px}
.u4-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.u4-kpi{min-width:0;display:flex;flex-direction:column;gap:4px}
.u4-kpi>small{color:var(--bx-mut);font-size:14px;line-height:20px}
.u4-kpi .bx-kpi{font-size:28px;line-height:36px;overflow-wrap:anywhere}
.u4-kpi .bx-kpi.sm{font-size:16px;line-height:24px;font-weight:500;white-space:pre-line}
.u4 .ref-hero{gap:20px}
.u4 .ref-main .copyline{background:var(--bx-hov)}
.u4-reflist .bx-tabs{margin-bottom:8px}
.u4 .grid2.u4-ref-grid{gap:24px;align-items:start}
.u4 .howto{margin-bottom:8px}
/* tables: the scroll-edge cover (style.css .tbl) painted in this page's own background, so no darker band shows */
.u4{--u4-tbg:var(--bx-bg)}
.u4 .sec-panel{--u4-tbg:var(--bx-hov)}
.u4 .tbl{background:linear-gradient(to right,var(--u4-tbg) 30%,rgba(24,26,32,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--u4-tbg) 30%,rgba(24,26,32,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,var(--u-edge,rgba(0,0,0,.55)),rgba(0,0,0,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,var(--u-edge,rgba(0,0,0,.55)),rgba(0,0,0,0)) right center/12px 100% no-repeat scroll}
.u4 .sec-panel table.dt td{border-bottom-color:var(--bx-bd)}
/* fees and support */
.u4 .support-grid{gap:24px}
.u4 .support-form .bx-card-h{margin-bottom:16px}
.u4 .bx-card .kv{margin:0}
.u4 .close-blockers li{background:var(--bx-hov)}
@media (max-width:1180px){
  .u4-ref-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
  .u4 .grid2.u4-ref-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .u4{gap:16px}
  /* phones: icon | title + note, the state under them | button (every cell placed: the older .sec-* phone rules place them otherwise) */
  .u4 .sec-row{grid-template-columns:20px minmax(0,1fr) auto;gap:6px 12px}
  .u4 .sec-row.noic{grid-template-columns:minmax(0,1fr) auto}
  .u4 .sec-row:has(>.sec-act:empty){grid-template-columns:20px minmax(0,1fr)}
  .u4 .sec-row.noic:has(>.sec-act:empty){grid-template-columns:minmax(0,1fr)}
  .u4 .sec-row>.sec-ic{grid-column:1;grid-row:1 / span 2}
  .u4 .sec-row>.sec-main{grid-column:2;grid-row:1}
  .u4 .sec-row>.sec-st{grid-column:2;grid-row:2;justify-content:flex-start;text-align:left}
  .u4 .sec-row>.sec-act{grid-column:3;grid-row:1 / span 2;align-self:center}
  .u4 .sec-row.noic>.sec-main,.u4 .sec-row.noic>.sec-st{grid-column:1}
  .u4 .sec-row.noic>.sec-act{grid-column:2}
  .u4 .sec-row>.sec-st:empty{display:none}
  .u4 .close-card .sec-row{grid-template-columns:20px minmax(0,1fr)}
  .u4 .close-card .sec-row>.sec-act{grid-column:2;grid-row:3;justify-content:flex-start;margin-top:6px} /* its long button: on its own line */
  .u4 .sec-ic .ic{width:18px;height:18px}
  .u4 .sec-main b{font-size:15px;line-height:22px}
  .u4 .sec-act .bx-btn{min-width:0}
  .u4 .sec-panel{padding:14px}
  .u4-checks{flex-direction:column;gap:12px}
  .u4-ref-intro .u4-h1{font-size:24px;line-height:32px}
  .u4-kpis{gap:16px;margin-top:20px}
  .u4-kpi .bx-kpi{font-size:22px;line-height:30px}
  .u4 .grid2.u4-ref-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .u4 table.bx-tbl{white-space:normal}
  .u4-kacts{flex-direction:column}
  .u4-kacts .bx-btn{flex:none;width:100%}
}
/* ===== /U4 ===== */
/* ===== U3 orders (10-21): Spot Order · Futures Order · Assets History — every rule scoped under .u3 ===== */
.u3{gap:16px}
.u3-head{display:flex;align-items:center;gap:16px;min-width:0}
.u3-head>.bx-tabs{flex:1}
.u3-exp{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:none;color:var(--bx-mut);cursor:pointer}
.u3-exp:hover{color:var(--bx-fg);background:var(--bx-hov);border:0}
.u3-exp .ic{width:20px;height:20px}
.u3 .notice{margin:0}
.u3-dates .u3-arr{color:var(--bx-mut);margin:0}
.u3-seg{display:inline-flex;align-items:center;gap:2px;height:40px;padding:4px;border:1px solid var(--bx-bd);border-radius:8px;flex:none}
.u3-seg button{height:30px;min-height:0;padding:0 12px;border:0;border-radius:6px;background:none;color:var(--bx-mut);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
.u3-seg button:hover{color:var(--bx-fg);border:0}
.u3-seg button.on{background:var(--bx-sec);color:var(--bx-fg)}
.u3-seg button[data-do=none]{cursor:default}
.u3-q{display:inline-flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 12px;border:1px solid var(--bx-bd);border-radius:8px;background:var(--bx-bg);min-width:0}
.u3-q:hover{border-color:var(--bd-h)}
.u3-q:focus-within{border-color:var(--acc)}
.u3-q .ic{width:16px;height:16px;flex:none;color:var(--bx-mut)}
.u3-q input{width:150px;height:38px;padding:0;border:0!important;background:transparent!important;color:var(--bx-fg);font-size:14px;outline:0;box-shadow:none!important}
.u3-q input::placeholder{color:var(--bx-mut)}
.u3-reset{font-size:14px;height:40px}
.u3-filter label.chk span{color:var(--bx-fg)}
.u3-help{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:var(--acc);font-size:14px;font-weight:500;line-height:20px}
.u3-help:hover{text-decoration:underline}
.u3-help .ic{width:16px;height:16px}
/* table: the scroll-edge shadows on this background, the reference's roomy rows without row rules */
.u3 .u3-tbl{background:linear-gradient(to right,var(--bx-bg) 30%,rgba(24,26,32,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--bx-bg) 30%,rgba(24,26,32,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,var(--u-edge,rgba(0,0,0,.55)),rgba(0,0,0,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,var(--u-edge,rgba(0,0,0,.55)),rgba(0,0,0,0)) right center/12px 100% no-repeat scroll}
.u3 .u3-tbl table.dt{font-size:14px}
.u3 .u3-tbl table.dt th{padding:10px 12px;font-size:12px;border-bottom:1px solid var(--bx-bd);color:var(--bx-mut);background:none}
.u3 .u3-tbl table.dt td{padding:14px 12px;border-bottom:0}
.u3 .u3-tbl table.dt tbody tr:hover td{background:var(--bx-hov)}
.u3 .u3-tbl tr.empty-tr:hover td{background:none}
.u3 .u3-tbl .bx-coin .coin{width:20px;height:20px}
.u3 .u3-tbl td .cell-sub{color:var(--bx-mut)}
.u3 .u3-tbl td button.ghost.sm{height:auto;min-height:0;padding:0;border:0;background:none;color:var(--acc);font-size:14px;font-weight:500}
.u3 .u3-tbl td button.ghost.sm:hover{text-decoration:underline;border:0}
.u3 .u3-tbl td .acts{justify-content:flex-start;gap:14px}
.u3 th.u3-ca{text-align:right}
.u3 .u3-dd{display:inline-flex;height:auto;justify-content:flex-end}
.u3 .u3-ddb{display:inline-flex;align-items:center;gap:2px;font-size:12px;line-height:16px}
.u3 .u3-ddb .ic{width:14px;height:14px}
.u3 .u3-ddm{min-width:170px;background:var(--bx-bg);border-color:var(--bx-bd);text-align:left}
.u3 .u3-ddm .dd-item{font-size:14px;color:var(--bx-fg)}
.u3 .u3-ddm .dd-item:hover{background:var(--bx-hov);color:var(--acc)}
.u3-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:20px}
.u3-note{margin:0;color:var(--bx-mut);font-size:12px;line-height:16px}
.u3 .u3-mca{display:none}
/* a select as wide as the chosen value (where supported), so a full filter row fits on one line */
.u3 .u3-filter .bx-sel select{field-sizing:content;max-width:180px;text-overflow:ellipsis}
/* the many futures columns: tighter cells, a long status ("Pending (not triggered)") wraps */
.u3 .u3-tbl table.dt th,.u3 .u3-tbl table.dt td{padding-left:8px;padding-right:8px}
.u3 .u3-tbl table.dt td[class*="st-"]{white-space:normal;min-width:104px}
@media (max-width:800px){
  .u3 .u3-mca{display:inline-flex}
  .u3 .u3-tbl{background:none}
  .u3 .u3-tbl table.dt td{padding:0}
  .u3 .u3-tbl table.dt td[class*="st-"]{min-width:0}
  .u3 .u3-tbl table.dt tbody tr:hover td{background:none}
  .u3 .u3-tbl td .acts{justify-content:flex-end}
}
@media (max-width:767px){
  .u3-head{gap:8px}
  .u3-seg{flex:1 1 100%;overflow-x:auto}
  .u3-seg button{flex:1 1 auto}
  .u3-seg:has(button[data-do=none]){flex:none}
  .u3-filter .bx-sel:has(select[data-f=days]){flex-basis:100%}
  .u3-q{flex:1 1 160px}
  .u3-q input{width:100%}
  .u3-dates{flex:1 1 100%}
  .u3-dates input{flex:1 1 0;width:auto}
  .u3-filter>.bx-btn{flex:1 1 0}
  .u3-filter>.u3-reset{flex:none}
}
/* ===== /U3 ===== */
/* ===== U2 assets (10-21): wallet overview · spot · futures, deposit, withdraw — every rule scoped under .u2 / .u2-* ===== */
.u2{display:flex;flex-direction:column;gap:24px;min-width:0;color:var(--bx-fg)}
.u2>h1{margin:0;font-size:28px;line-height:36px;font-weight:600}
.u2-mut,td.u2-mut{color:var(--bx-mut)}
.u2-tl{color:var(--bx-mut);font-size:14px;line-height:20px}
.u2-usd{display:block;color:var(--bx-mut);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.u2-center{display:flex;justify-content:center;margin-top:-16px}
/* form controls on the near-black page */
.u2 input:not([type=checkbox]),.u2 select{height:44px;padding:0 12px;border-radius:8px;background:var(--bx-bg);border:1px solid var(--bx-bd);color:var(--bx-fg);font-size:14px}
.u2 input:not([type=checkbox]):hover{border-color:var(--bd-h)}
.u2 input:not([type=checkbox]):focus{border-color:var(--acc);outline:0;box-shadow:none}
.u2 .inp:focus-within,.u2 input:not([type=checkbox]):not([type=radio]):not([type=range]):focus{box-shadow:none} /* the accent border is the focus mark */
.u2 .inp{height:48px;border-radius:8px;background:var(--bx-bg);border-color:var(--bx-bd)}
.u2 .inp:focus-within{border-color:var(--acc)}
.u2 .inp input:not([type=checkbox]){height:100%;border:0;background:transparent}
.u2 .inp .inbtn{color:var(--acc);height:24px;padding:0 12px}
.u2 input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--acc)}
.u2 .fld{margin-bottom:16px}
.u2 .fld-l{color:var(--bx-mut);font-size:14px;line-height:20px}
.u2 button.bx-link{height:auto;padding:0;border:0;background:none;font-size:14px;line-height:20px}
.u2 .bx-btn.sm{height:32px;padding:0 12px}
.u2 .notice{margin:0}
.u2 .notice.cta{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn-fill) 35%,transparent)}.u2 .notice.cta>.ic{color:var(--warn)} /* withdrawals blocked until 2FA / identity verification: a warning (--warn) — its button keeps the key colour */
.u2 .bx-tbl{background:none}
.u2 .bx-tbl td small{display:block}
.u2 .bx-tbl td.up,.u2 .bx-tbl .up{color:var(--rise-t)}
.u2 .bx-tbl td.dn,.u2 .bx-tbl .dn{color:var(--fall-t)}
/* Est. Total Value + the eye */
.u2-ttl{display:inline-flex;align-items:center;gap:8px;font-size:20px;line-height:28px;font-weight:600}
button.u2-eye{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:none;color:var(--bx-mut);cursor:pointer}
button.u2-eye:hover{color:var(--bx-fg);border:0}
.u2-eye .ic{width:16px;height:16px}
.u2-est .u2-usd,.u2-fmain>div>.u2-usd{font-size:14px;line-height:20px;margin-top:2px}
.u2-note{margin:8px 0 0;color:var(--bx-mut);font-size:12px;line-height:16px}
/* My Assets / Spot: text tabs + search · Hide <1 USD, then the table */
.u2-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.u2-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.u2-search{display:flex;align-items:center;gap:4px}
.u2 .u2-search input{display:none;width:180px;height:32px}
.u2 .u2-search.open input{display:block}
button.u2-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--bx-mut);cursor:pointer}
button.u2-ic:hover{color:var(--bx-fg);background:var(--bx-hov);border:0}
.u2-ic .ic{width:18px;height:18px}
.u2 label.u2-chk{margin:0;color:var(--bx-fg);font-size:14px;line-height:20px;gap:8px;white-space:nowrap;cursor:pointer}
.u2-acts{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.u2-acct{display:inline-flex;align-items:center;gap:10px}
.u2-acct .ic{width:20px;height:20px;color:var(--bx-mut)}
.u2-tx{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.u2-tx .ic{width:18px;height:18px;color:var(--bx-mut)}
a.u2-more{display:inline-flex;align-items:center;gap:2px;color:var(--bx-fg);font-size:14px;font-weight:500}
a.u2-more:hover{color:var(--acc)}
.u2-more-i{width:16px;height:16px;transform:rotate(-90deg)}
/* futures: USDⓈ-M bar, Margin Balance | Asset Allocation, Assets | Positions */
.u2-fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.u2-fbar .u2-acts{gap:8px}
.u2-fcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:24px;align-items:start}
.u2-fmain{min-width:0;display:flex;flex-direction:column;gap:4px}
.u2-fmain>.u2-ttl,.u2-alloc>.u2-ttl{font-size:16px;line-height:24px;font-weight:500}
.u2-today{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.u2-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;max-width:520px}
.u2-tile{display:flex;flex-direction:column;gap:2px;min-width:0}
.u2-tile .u2-tl{font-size:12px;line-height:16px}
.u2-tv{font-size:16px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.u2-alloc{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.u2-donut-w{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center}
.u2-donut{width:120px;height:120px;flex:none}
.u2-donut circle.off{stroke:var(--bd-h)}
.u2-donut .g1{stop-color:var(--brand-violet)}.u2-donut .g2{stop-color:var(--brand-indigo)}.u2-donut .g3{stop-color:var(--brand-blue)}.u2-donut .g4{stop-color:var(--brand-cyan)} /* the ring's gradient (app.js wDonut) */
.u2-legend{display:flex;align-items:center;gap:8px;color:var(--bx-mut);font-size:12px;line-height:16px}
.u2-legend i{width:8px;height:8px;border-radius:2px;background:var(--bd-h)}
.u2-legend i.on{background:var(--brand-grad)}
.u2-ftbl{margin-top:8px}
/* deposit / withdraw: stepper | FAQ, then the recent list */
.u2-fund{max-width:1080px}
.u2-fgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.u2-steps{display:flex;flex-direction:column;min-width:0;max-width:640px}
.u2-steps .step{grid-template-columns:24px minmax(0,1fr);gap:16px;padding-bottom:32px}
.u2-steps .step::before{left:11.5px;top:28px;bottom:4px;background:var(--bx-bd)}
.u2-steps .step-n{width:24px;height:24px;font-size:12px;background:var(--bx-fg);color:var(--bx-bg)}
.u2-steps .step.off .step-n{background:var(--bx-bg);box-shadow:inset 0 0 0 1px var(--bd-h);color:var(--bx-mut)} /* (L3) a ring, not a grey disc: the number keeps 4.5:1 */
.u2-steps .step:not(.off):not(:has(~ .step:not(.off))) .step-n{background:var(--pri-grad);color:#fff} /* the current step (the last one reached): key colour */
.u2-steps .step-b{min-width:0}
.u2-steps .step-b>h3{font-size:16px;line-height:24px;font-weight:500;margin:0 0 12px;color:var(--bx-fg)}
.u2-steps .step.off .step-b>h3{color:var(--bx-mut)}
.u2-steps .step.off .step-b>div{display:none} /* a step not reached yet: its title only, dimmed */
/* step 1: the asset box (search ↔ chosen coin) with its list, and the quick chips */
.u2-pick{position:relative;min-width:0}
.u2-pin{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;border:1px solid var(--bx-bd);border-radius:8px}
.u2-pin:hover{border-color:var(--bd-h)}
.u2-pin:focus-within{border-color:var(--acc)}
.u2-pin>.ic{width:18px;height:18px;color:var(--bx-mut);flex:none}
.u2 .u2-pin input:not([type=checkbox]){flex:1;height:100%;padding:0;border:0;background:transparent}
button.u2-face{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 12px;border:1px solid var(--bx-bd);border-radius:8px;background:var(--bx-bg);color:var(--bx-fg);text-align:left;cursor:pointer}
button.u2-face:hover{border-color:var(--bd-h)}
.u2-face b{font-size:16px;font-weight:600}
.u2-face .u2-mut{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.u2-face .u2-chev{margin-left:auto;width:16px;height:16px;flex:none;color:var(--bx-mut)}
.u2-dd{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:320px;overflow-y:auto;padding:8px;background:var(--pop-bg);border:1px solid var(--bx-bd);border-radius:8px;box-shadow:var(--pop-shadow)}
button.u2-opt{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--bx-fg);text-align:left;cursor:pointer}
button.u2-opt:hover,button.u2-opt:focus-visible,button.u2-opt.on{background:var(--bx-sel);outline:0;border:0}
.u2-opt .u2-mut{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.u2-opt-r{margin-left:auto;color:var(--bx-mut);font-size:12px;font-variant-numeric:tabular-nums}
.u2-dd-none{padding:16px;text-align:center;color:var(--bx-mut);font-size:14px}
.u2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
button.u2-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;border:0;border-radius:6px;background:var(--bx-sec);color:var(--bx-fg);font-size:12px;font-weight:500;cursor:pointer}
button.u2-chip:hover{background:var(--bx-sec-h);border:0}
button.u2-chip.on{box-shadow:inset 0 0 0 1px var(--acc)}
.u2-chip .coin{width:16px;height:16px;font-size:9px}
/* step 2: network cards; a chosen one folds the list (+ Change network) */
.u2 .nets{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.u2 .netcard{background:var(--bx-bg);border:1px solid var(--bx-bd);border-radius:8px;padding:12px 14px}
.u2 .netcard:hover:not(:disabled){border-color:var(--bd-h)}
.u2 .netcard.on{border-color:var(--acc);background:var(--acc-soft)}
.u2 .netcard .nc-l{color:var(--bx-mut);font-size:12px}
.u2-nets.picked .nets{grid-template-columns:minmax(0,1fr)}
.u2-nets.picked .netcard:not(.on){display:none}
.u2-nets:not(.picked) .u2-chg{display:none}
.u2 .u2-chg{margin-top:8px}
.u2-netf{margin-bottom:16px}
/* step 3 (deposit): address + QR */
.u2 .addr-box{background:none;border:1px solid var(--bx-bd);border-radius:12px;padding:16px}
.u2 .copyline{background:var(--bx-hov)}
.u2 .notes{font-size:12px}
/* step 3 (withdraw): what arrives | Withdraw */
.u2-wdsum{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px;padding-top:16px;border-top:1px solid var(--bx-bd)}
.u2-wdsum-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.u2-recv b{font-size:24px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.u2-wdk{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;line-height:16px;color:var(--bx-mut)}
.u2-wdk>span:last-child{color:var(--bx-fg);font-variant-numeric:tabular-nums}
button.u2-go{min-width:200px;height:48px;font-size:16px}
/* FAQ column */
.u2-faq{min-width:0}
.u2-faq>h2{margin:0 0 16px;font-size:20px;line-height:28px;font-weight:600}
.u2-faq>h3{margin:28px 0 8px;font-size:14px;line-height:20px;font-weight:500;color:var(--bx-mut)}
.u2-faq-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
a.u2-faq-a,button.u2-faq-a{display:inline;height:auto;padding:0;border:0;background:none;color:var(--bx-fg);font-size:14px;line-height:20px;font-weight:400;text-align:left;white-space:normal;cursor:pointer}
a.u2-faq-a:hover,button.u2-faq-a:hover{color:var(--acc);text-decoration:underline;border:0}
.u2-faq .side-list{font-size:12px;line-height:18px;color:var(--bx-mut)}
/* Address Management (dialog) */
.u2-book-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.u2-book-h p{margin:0;font-size:12px;line-height:18px}
.u2-book-h .bx-btn{flex:none}
.u2-book{max-height:50vh;overflow:auto}
@media (max-width:1180px){
  .u2-fgrid{grid-template-columns:minmax(0,1fr) 260px;gap:32px}
}
@media (max-width:960px){
  .u2-fgrid{grid-template-columns:minmax(0,1fr)}
  .u2-steps{max-width:none}
  .u2-fcard{grid-template-columns:minmax(0,1fr)}
  .u2-alloc{align-items:flex-start}
}
@media (max-width:767px){
  .u2{gap:16px}
  .u2>h1{font-size:22px;line-height:30px}
  .u2-ttl{font-size:18px;line-height:24px}
  .u2-tools{width:100%;justify-content:space-between}
  .u2 .u2-search input{width:140px}
  .u2-acts{justify-content:flex-start}
  .u2-fbar .u2-acts{margin-left:auto}
  .u2-tiles{gap:12px;margin-top:16px}
  .u2-steps .step{gap:12px;padding-bottom:24px}
  .u2 .addr-box{padding:12px}
  .u2-wdsum{flex-direction:column;align-items:stretch}
  button.u2-go{width:100%}
  .u2-book-h{flex-direction:column;align-items:stretch}
}
/* ===== /U2 ===== */
/* ===== L3 theme (10-22, ops/prompts/1022-contract-theme.md): light-only rules for the member screens (U2 assets · U3 orders · U4 account) and the
   admin screens — everything else there already runs on the tokens (:root[data-theme=light], L1). Checked by ops/ui-audit/tool/l3theme.mjs ===== */
/* U4 checks / state discs: the green a step darker on white (rings 3:1), "Verified" as text in --up (4.5:1); white glyphs on the red / green discs */
:root[data-theme=light] .u4{--u4-ok:#03a66d}
:root[data-theme=light] .u4-vbadge.ok{background:var(--up-soft);color:var(--up)}
:root[data-theme=light] .u4-kst.bad .u4-kic{background:var(--dn);color:#fff}
:root[data-theme=light] .u4-kst.ok .u4-kic{color:#fff}
/* the selected network card / coin chip notes: #9aa3af (a dark-theme grey, 2.3:1 on the light accent tint) → the muted text colour */
:root[data-theme=light] .netcard.on small,:root[data-theme=light] .netcard.on .nc-l,:root[data-theme=light] .chip.on small{color:var(--mut)}
/* U3 / U4 tables that scroll sideways: a faint edge shadow instead of the dark theme's near-black one */
:root[data-theme=light] .u3,:root[data-theme=light] .u4{--u-edge:rgba(0,0,0,.12)}
/* ===== /L3 theme ===== */
/* ===== order book bar: view icons left, price grouping right, with room on both sides (spot + futures) ===== */
.bx-book .ob-bar{padding:8px 16px 4px;gap:12px}
.pf-book .bookmode{gap:2px}
.pf-book .bookmode button{display:inline-flex;align-items:center;justify-content:center;padding:5px;border:0;border-radius:4px;line-height:0;opacity:.45}
.pf-book .bookmode button.on{opacity:1;background:var(--in)}
.pf-book .bookmode button:hover{opacity:.85}
.bx-book .ob-group{height:28px;min-width:68px;padding:0 8px 0 12px;margin-left:auto;border-radius:6px}
/* ===== A3 arb (10-22, ops/prompts/1022-contract-arb.md): admin > Arbitrage — the price-alignment bot's status, totals, P&L chart, markets
   and events. Every rule scoped under .arb (dialog fields: .arb-lim); colours from the tokens only, so both themes follow ===== */
.arb .arb-st{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px}
.arb .arb-st-main{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:flex-start;flex:1 1 520px;min-width:0}
.arb .arb-st-main>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.arb .arb-st-main small{font-size:12px;color:var(--mut)}
.arb .arb-st-state .badge{font-size:14px;font-weight:600;padding:4px 12px}
.arb .arb-st-err{max-width:380px}
.arb .arb-st-err .bad-t{font-size:13px;overflow-wrap:anywhere}
.arb .arb-why{max-width:320px;overflow-wrap:anywhere}
.arb .arb-acct{font-size:13px;overflow-wrap:anywhere}
.arb .arb-pend{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;flex-basis:100%;padding-top:12px;border-top:1px solid var(--bd)}
.arb .arb-pend small{font-size:12px;color:var(--warn)}
.arb .arb-pend-a{color:var(--acc);font-size:12.5px;overflow-wrap:anywhere}
.arb .arb-pend-a:hover{text-decoration:underline}
.arb .arb-hb{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.arb .arb-st-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.arb .arb-kill{height:46px;min-width:172px;padding:0 22px;font-size:15px;font-weight:700;letter-spacing:.2px}
.arb .arb-on{height:46px}
.arb .arb-tiles .stats-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.arb .arb-tiles .tile{box-shadow:var(--shadow)}
.arb .arb-tiles .tile .arb-tsub{margin-top:8px}
.arb .arb-tiles .tile b{font-size:20px}
.arb .arb-seg{margin:0;min-width:240px}
.arb .arb-lg{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-6px 0 10px;font-size:12px;color:var(--mut)}
.arb .arb-lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.arb .arb-chart{position:relative;height:280px;min-width:0}
.arb .arb-note:empty{display:none}
.arb .arb-note{margin:8px 0 0}
.arb .arb-use{display:flex;align-items:center;gap:8px;min-width:112px}
.arb .arb-use b{position:relative;flex:1 1 auto;height:6px;border-radius:3px;background:var(--in);overflow:hidden}
.arb .arb-use b i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--acc)}
.arb .arb-use.warn b i{background:var(--warn-fill)}
.arb .arb-use.bad b i{background:var(--dn)}
.arb .arb-use span{min-width:38px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
.arb .arb-use.warn span{color:var(--warn)}
.arb .arb-use.bad span{color:var(--dn-t)}
.arb .arb-loss{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.arb .arb-loss b{font-variant-numeric:tabular-nums}
.arb .card-h+p.muted{margin:-6px 0 10px}
.arb-lim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
@media (max-width:640px){
  .arb .arb-st{padding:14px}
  .arb .arb-st-main{gap:12px 24px;flex-basis:100%}
  .arb .arb-st-acts{order:-1;width:100%;justify-content:stretch} /* phones: Stop now comes first */
  .arb .arb-st-acts>button{flex:1 1 140px;min-width:0}
  .arb .arb-tiles .stats-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .arb .arb-tiles .tile{padding:12px 14px}
  .arb .arb-tiles .tile b{font-size:16px}
  .arb .arb-seg{min-width:0;width:100%}
  .arb .arb-chart{height:220px}
  .arb-lim{grid-template-columns:minmax(0,1fr)}
}
/* ===== /A3 arb ===== */
/* ===== G1 admin (10-22, ops/prompts/1022-contract-admin-ui.md): admin shell — tokens · sidebar · top bar · breadcrumb / tabs · drawer · shared
   components (.adm-card .adm-kpi .adm-pill .adm-tbl .adm-seg .adm-search .adm-crumb .adm-tabs — used by G2–G4). The admin route puts
   html.adm-mode on (app.js route()): the site header / footer / status band are hidden and the template's neutral palette (light #f3f4f6 /
   #fff / #e7e9ec / #17191c, dark #14120f / #1e1b18 / #2a2622 / #ede8e0) replaces the site greys for the whole screen — dialogs and toasts
   included — while the accent stays the Xenobex key colour (--acc / --pri-grad). The site tokens (--bg --card --bd --in --fg --mut --hover
   --btn-bg --pop-bg --bx-*) are remapped too, so every tab's existing markup follows. Text tokens keep 4.5:1 on the surfaces they sit on:
   --a-text-3 dark #9b948a 5.7 (card) / 5.3 (hover), light #5e6673 5.1 (#f3f4f6); pill text: the -fg variants (light 4.5–5.1, dark 4.7–7.8) ===== */
html.adm-mode,.adm-shell{
  --a-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",Roboto,sans-serif;
  --a-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --a-side:248px;--a-side-c:68px;--a-r:14px;--a-r-sm:9px;--a-r-xs:6px;
  --a-bg:#14120f;--a-elev:#1e1b18;--a-sunken:#191714;--a-hover:#26221e;--a-active:#2b2722;--a-line:#2a2622;--a-line-strong:#3a352f;
  --a-text:#ede8e0;--a-text-2:#b8b1a6;--a-text-3:#9b948a;--a-text-4:#5d574f;
  --a-accent:var(--acc);--a-accent-tint:color-mix(in srgb,var(--acc) 14%,transparent);
  --a-teal:#2bb5a0;--a-teal-t:#14302b;--a-teal-fg:#2bb5a0;
  --a-blue:#5b9cff;--a-blue-t:#1a2740;--a-blue-fg:#5b9cff;
  --a-purple:#a78bfa;--a-purple-t:#2a2340;--a-purple-fg:#a78bfa;
  --a-orange:#f4831f;--a-orange-t:#2c2117;--a-orange-fg:#f4831f;
  --a-green:#35c46a;--a-green-t:#15301f;--a-green-fg:#35c46a;
  --a-red:#f0605f;--a-red-t:#3a1f1f;--a-red-fg:#ff7a79;
  --a-yellow:#e9b949;--a-yellow-t:#332a14;--a-yellow-fg:#e9b949;
  --a-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.35);--a-shadow-lg:0 14px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --a-scrim:rgba(0,0,0,.5);
  --bg:var(--a-bg);--card:var(--a-elev);--bd:var(--a-line);--in:var(--a-sunken);--fg:var(--a-text);--mut:var(--a-text-3);--hover:var(--a-hover);
  --btn-bg:var(--a-elev);--bd-h:var(--a-line-strong);--pop-bg:var(--a-elev);--pop-shadow:var(--a-shadow-lg);--shadow:var(--a-shadow);
  --bx-bg:var(--a-bg);--bx-bd:var(--a-line);--bx-fg:var(--a-text);--bx-mut:var(--a-text-3);--bx-sel:var(--a-active);--bx-sec:var(--a-active);--bx-sec-h:var(--a-line-strong);--bx-hov:var(--a-hover)}
:root[data-theme=light].adm-mode,:root[data-theme=light] .adm-shell{
  --a-bg:#f3f4f6;--a-elev:#ffffff;--a-sunken:#f7f8fa;--a-hover:#f2f3f5;--a-active:#eceef1;--a-line:#e7e9ec;--a-line-strong:#d5d9de;
  --a-text:#17191c;--a-text-2:#4b5563;--a-text-3:#5e6673;--a-text-4:#b3b9c2;
  --a-accent-tint:color-mix(in srgb,var(--acc) 9%,transparent);
  --a-teal:#0f9d8a;--a-teal-t:#e6f6f3;--a-teal-fg:#0a7366;
  --a-blue:#2f7ff5;--a-blue-t:#e8f0fe;--a-blue-fg:#1d5fe0;
  --a-purple:#8b5cf6;--a-purple-t:#f0ebff;--a-purple-fg:#7c3aed;
  --a-orange:#f28c28;--a-orange-t:#fff1e4;--a-orange-fg:#c2410c;
  --a-green:#16a34a;--a-green-t:#e6f7ec;--a-green-fg:#15803d;
  --a-red:#e5484d;--a-red-t:#fdecec;--a-red-fg:#c42a42;
  --a-yellow:#d99b1a;--a-yellow-t:#fff5dd;--a-yellow-fg:#8a6100;
  --a-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);--a-shadow-lg:0 12px 32px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.08);
  --a-scrim:rgba(16,24,40,.32)}
/* the site chrome steps aside: the admin shell is the whole screen */
html.adm-mode #top,html.adm-mode #foot,html.adm-mode #sysbar{display:none!important}
html.adm-mode,html.adm-mode body{background:var(--a-bg)}
html.adm-mode #view{max-width:none;padding:0;margin:0}

/* ---- shell ---- */
.adm-shell{display:flex;min-height:100vh;min-height:100dvh;background:var(--a-bg);color:var(--a-text);font-family:var(--a-font);font-size:13px;line-height:1.45;
  max-width:none;margin:0;padding:0;-webkit-font-smoothing:antialiased}
.adm-shell .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.adm-shell .mono,.adm-mono{font-family:var(--a-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.adm-shell kbd{font-family:var(--a-mono);font-size:10.5px;color:var(--a-text-3);border:1px solid var(--a-line);background:var(--a-elev);border-radius:5px;padding:1px 5px;line-height:1.4}
.adm-shell :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* sidebar */
.adm-side{width:var(--a-side);flex:none;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--a-elev);
  border-right:1px solid var(--a-line);padding:10px 10px 12px;overflow-y:auto;overflow-x:hidden;transition:width .22s ease,transform .25s ease;z-index:40;scrollbar-width:thin}
.adm-side>*{flex:none} /* the sidebar scrolls: its parts keep their height */
.adm-ws{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--a-r-sm);color:var(--a-text);min-width:0}
.adm-ws:hover{background:var(--a-hover)}
.adm-ws-logo{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--a-active);overflow:hidden;
  font-weight:700;font-size:15px;line-height:1;color:var(--a-text)} /* the brand initial as text (app.js), no mark */
.adm-ws-meta{min-width:0;flex:1}
.adm-ws-name{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-ws-sub{display:block;font-size:11px;color:var(--a-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-side .adm-search{margin:8px 0 2px;max-width:none;border-radius:var(--a-r-sm);height:32px;cursor:pointer}
.adm-nav{margin-top:4px;display:flex;flex-direction:column;gap:1px}
.adm-nav-lbl{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--a-text-3);padding:14px 10px 6px;white-space:nowrap;overflow:hidden}
.adm-nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--a-r-sm);color:var(--a-text-2);font-weight:500;font-size:13px;
  width:100%;text-align:left;white-space:nowrap;position:relative;transition:background .15s,color .15s;min-height:32px}
.adm-nav-item .ic{color:var(--a-text-3)}
.adm-nav-item>span:not(.adm-badge){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.adm-nav-item:hover{background:var(--a-hover);color:var(--a-text)}
.adm-nav-item.on{background:var(--a-active);color:var(--a-text);font-weight:600}
.adm-nav-item.on .ic{color:var(--acc)}
.adm-nav-item.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--pri-grad)}
.adm-badge{margin-left:auto;flex:none;font-family:var(--a-mono);font-size:10px;font-weight:600;background:var(--a-red);color:#fff;border-radius:999px;padding:1px 6px;line-height:1.5}
.adm-badge[hidden]{display:none!important}
.adm-side-bot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:1px}
/* operations status card (sidebar bottom): emergency switches + withdrawals */
.adm-op{margin-top:10px;border:1px solid var(--a-line);border-radius:var(--a-r-sm);padding:12px;background:var(--a-sunken);color:var(--a-text)}
.adm-op:hover{border-color:var(--a-line-strong)}
.adm-op-h{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px}
.adm-op-h .ic{width:14px;height:14px;color:var(--a-text-3)}
.adm-op-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--a-text-3);margin-top:8px}
.adm-op-row b{font-weight:600}
.adm-op-bar{display:flex;gap:2px;height:6px;margin-top:10px}
.adm-op-bar i{flex:1;border-radius:2px;background:var(--a-green)}
.adm-op-bar i.warn{background:var(--a-yellow)}
.adm-op-bar i.bad{background:var(--a-red)}
.adm-op-bar i.off{background:var(--a-line-strong)}
.adm-op .ok{color:var(--a-green-fg)}
.adm-op .warn{color:var(--a-yellow-fg)}
.adm-op .bad{color:var(--a-red-fg)}
/* collapsed sidebar (desktop): icons only */
.adm-shell.collapsed .adm-side{width:var(--a-side-c);padding-left:8px;padding-right:8px}
.adm-shell.collapsed .adm-ws-meta,.adm-shell.collapsed .adm-nav-lbl,.adm-shell.collapsed .adm-nav-item>span:not(.adm-badge),.adm-shell.collapsed .adm-nav-item .adm-badge,
.adm-shell.collapsed .adm-op,.adm-shell.collapsed .adm-side .adm-search>span,.adm-shell.collapsed .adm-side .adm-search kbd{display:none}
.adm-shell.collapsed .adm-ws{justify-content:center;padding:8px 0}
.adm-shell.collapsed .adm-nav-item{justify-content:center;padding:9px 0}
.adm-shell.collapsed .adm-nav-item.on::before{left:-8px}
.adm-shell.collapsed .adm-nav-lbl{height:10px;padding:0}
.adm-shell.collapsed .adm-side .adm-search{justify-content:center;padding:0}
.adm-shell.collapsed .adm-nav-item.has-pending::after{content:"";position:absolute;top:6px;right:12px;width:6px;height:6px;border-radius:50%;background:var(--a-red)}
/* main column */
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-top{display:flex;align-items:center;gap:8px;height:55px;padding:10px 20px;background:var(--a-elev);border-bottom:1px solid var(--a-line);position:sticky;top:0;z-index:30}
.adm-top .adm-search{max-width:440px;cursor:pointer}
.adm-top-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.adm-icbtn{width:32px;height:32px;border-radius:8px;display:inline-grid;place-items:center;color:var(--a-text-2);position:relative;background:transparent;border:1px solid transparent;padding:0;flex:none}
.adm-icbtn:hover{background:var(--a-hover);color:var(--a-text);border-color:transparent}
.adm-icbtn .adm-badge{position:absolute;top:-3px;right:-5px;margin:0;border:2px solid var(--a-elev);padding:0 5px}
.adm-menu-btn{display:none}
.adm-theme .ic-sun{display:none}
:root[data-theme=light] .adm-theme .ic-sun{display:block}
:root[data-theme=light] .adm-theme .ic-moon{display:none}
.adm-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:var(--pri-grad);border:2px solid var(--a-line);padding:0}
.adm-av:hover{border-color:var(--acc)}
/* dropdown (avatar menu) */
.adm-dd{position:relative}
.adm-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:var(--a-elev);border:1px solid var(--a-line);border-radius:10px;box-shadow:var(--a-shadow-lg);padding:5px;z-index:50}
.adm-dd-menu[hidden]{display:none}
.adm-dd-head{padding:8px 10px 10px;border-bottom:1px solid var(--a-line);margin-bottom:4px}
.adm-dd-head b{display:block;font-size:12.5px;font-weight:600;word-break:break-all}
.adm-dd-head span{display:block;font-size:11px;color:var(--a-text-3);margin-top:2px}
.adm-dd-menu a,.adm-dd-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:6px;font-size:12.5px;color:var(--a-text-2);background:none;border:0;text-align:left;min-height:32px}
.adm-dd-menu a:hover,.adm-dd-menu button:hover{background:var(--a-hover);color:var(--a-text)}
.adm-dd-menu .ic{width:14px;height:14px;color:var(--a-text-3)}
/* page head: breadcrumb + 2FA status + actions, then the underline tabs */
.adm-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px 0}
.adm-head-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-head-acts:empty{display:none}
.adm-head-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-2fa{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--a-text-3)}
/* the content column carries .pg (the site's field / button / card rules apply to the tabs' markup) without its 1200 px column */
.adm-shell .adm-body{max-width:none;margin:0;padding:16px 20px 28px;display:flex;flex-direction:column;gap:14px;min-width:0;flex:1}
.adm-shell .adm-body>.notice{margin:0}
.adm-shell button.adm-search:hover{border-color:var(--a-line-strong);background:var(--a-sunken)}
/* drawer scrim (phones) */
.adm-scrim{position:fixed;inset:0;background:var(--a-scrim);z-index:35;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* menu search (Cmd/Ctrl+K) */
.adm-pal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:var(--a-scrim)}
.adm-pal[hidden]{display:none}
.adm-pal-box{width:min(520px,100%);background:var(--a-elev);border:1px solid var(--a-line);border-radius:12px;box-shadow:var(--a-shadow-lg);overflow:hidden;color:var(--a-text);font-family:var(--a-font);font-size:13px}
.adm-pal-in{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--a-line);height:46px;color:var(--a-text-3)}
.adm-pal-in input{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:0;height:100%;font-size:14px;color:var(--a-text)}
.adm-pal-in input:focus,.adm-pal-in input:focus-visible{border:0;outline:none;box-shadow:none}
.adm-pal-in input::-webkit-search-cancel-button{-webkit-appearance:none}
.adm-pal-list{max-height:min(380px,56vh);overflow-y:auto;padding:6px;margin:0;list-style:none}
.adm-pal-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--a-text-2)}
.adm-pal-list li .ic{color:var(--a-text-3)}
.adm-pal-list li em{margin-left:auto;font-style:normal;font-size:11px;color:var(--a-text-3)}
.adm-pal-list li.on{background:var(--a-active);color:var(--a-text)}
.adm-pal-list li.on .ic{color:var(--acc)}
.adm-pal-list li.adm-pal-empty{display:block;padding:18px 12px;text-align:center;color:var(--a-text-3);cursor:default}

/* ---- shared components (G2–G4) ---- */
/* search input: <label class="adm-search"><svg class="ic"/><input type="search"><kbd/></label> */
.adm-search{display:flex;align-items:center;gap:8px;background:var(--a-sunken);border:1px solid var(--a-line);border-radius:999px;padding:0 10px 0 12px;height:34px;width:100%;
  max-width:440px;color:var(--a-text-3);margin:0;font-size:12.5px;transition:border-color .15s,box-shadow .15s}
.adm-search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--a-accent-tint)}
.adm-search .ic{width:14px;height:14px}
.adm-search>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.adm-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:0;height:100%;font-size:12.5px;color:var(--a-text);border-radius:0}
.adm-search input:focus{border:0}
.adm-search input::placeholder{color:var(--a-text-3)}
.adm-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.adm-search.sm{height:30px;max-width:220px;border-radius:8px}
/* breadcrumb: <nav class="adm-crumb"><a>Admin</a><i>/</i><b>Members</b></nav> */
.adm-crumb{display:flex;align-items:center;gap:8px;color:var(--a-text-3);font-size:13px;min-width:0;flex-wrap:wrap}
.adm-crumb a{color:var(--a-text-3)}
.adm-crumb a:hover{color:var(--a-text)}
.adm-crumb i{font-style:normal;color:var(--a-text-4)}
.adm-crumb b{color:var(--a-text);font-weight:600}
/* underline tabs: <nav class="adm-tabs"><a class="on">…</a><a>…</a></nav> (a or button; .on / aria-selected=true = current) */
.adm-tabs{display:flex;align-items:flex-end;gap:2px;padding:12px 20px 0;border-bottom:1px solid var(--a-line);overflow-x:auto;scrollbar-width:none;flex:none}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tabs>a,.adm-tabs>button{position:relative;padding:8px 12px 10px;font-weight:500;color:var(--a-text-3);font-size:13px;white-space:nowrap;background:none;border:0;border-radius:6px 6px 0 0;
  display:inline-flex;align-items:center;gap:6px;min-height:36px}
.adm-tabs>a:hover,.adm-tabs>button:hover{color:var(--a-text)}
.adm-tabs>a.on,.adm-tabs>button.on,.adm-tabs>[aria-selected=true]{color:var(--a-text);font-weight:600}
.adm-tabs>a.on::after,.adm-tabs>button.on::after,.adm-tabs>[aria-selected=true]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--pri-grad)}
.adm-tabs .adm-badge{margin-left:2px}
/* card: <div class="adm-card"><div class="adm-card-h"><h3 class="adm-card-t">…</h3><div class="adm-card-acts">…</div></div>…</div> */
.adm-card{background:var(--a-elev);border:1px solid var(--a-line);border-radius:var(--a-r);box-shadow:var(--a-shadow);padding:14px 16px 16px;min-width:0;display:flex;flex-direction:column;color:var(--a-text)}
.adm-card:hover{border-color:var(--a-line-strong)}
.adm-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;min-height:24px;flex-wrap:wrap}
.adm-card-t{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--a-text-2)}
.adm-card-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* grids */
.adm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.adm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;grid-auto-flow:dense}
.adm-grid>.span-2{grid-column:span 2}
.adm-grid>.span-3{grid-column:span 3}
/* icon chip: <span class="adm-ico teal"><svg class="ic"/></span> (teal blue purple orange green red yellow plain) */
.adm-ico{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;flex:none;background:var(--c-t,var(--a-sunken));color:var(--c,var(--a-text-2));
  border:1px solid color-mix(in srgb,var(--c,var(--a-line)) 22%,transparent)}
.adm-ico .ic,.adm-ico svg{width:12px;height:12px}
.adm-ico.teal{--c:var(--a-teal);--c-t:var(--a-teal-t)}.adm-ico.blue{--c:var(--a-blue);--c-t:var(--a-blue-t)}.adm-ico.purple{--c:var(--a-purple);--c-t:var(--a-purple-t)}
.adm-ico.orange{--c:var(--a-orange);--c-t:var(--a-orange-t)}.adm-ico.green{--c:var(--a-green);--c-t:var(--a-green-t)}.adm-ico.red{--c:var(--a-red);--c-t:var(--a-red-t)}
.adm-ico.yellow{--c:var(--a-yellow);--c-t:var(--a-yellow-t)}.adm-ico.plain{--c:var(--a-text-2);--c-t:var(--a-sunken);border-color:var(--a-line)}
.adm-ico.brand{--c:var(--acc);--c-t:var(--a-accent-tint)}
/* KPI card: <div class="adm-card adm-kpi">
     <div class="adm-kpi-h"><span class="adm-ico teal">svg</span><span class="adm-kpi-t">Title</span></div>
     <div class="adm-kpi-b"><b class="adm-kpi-v">1,234<small>USDT</small></b><span class="adm-spark teal"><i style="--h:40%"></i>…<i class="hi" style="--h:90%"></i></span></div>
     <div class="adm-kpi-f"><span>vs previous period</span><span class="adm-delta up">▲ 12%</span></div></div> */
.adm-kpi{padding-bottom:0}
.adm-kpi-h{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:12px;font-weight:600;color:var(--a-text-2);min-height:22px}
.adm-kpi-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-kpi-b{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-width:0}
.adm-kpi-v{font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;line-height:1;display:flex;align-items:baseline;gap:6px;letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--a-text)}
.adm-kpi-v small{font-family:var(--a-font);font-size:12px;color:var(--a-text-3);font-weight:500;letter-spacing:0}
.adm-spark{height:36px;width:96px;display:flex;align-items:flex-end;gap:2px;flex:none;--c:var(--acc)}
.adm-spark i{flex:1;height:var(--h,30%);min-height:2px;background:var(--a-line-strong);border-radius:2px}
.adm-spark i.hi{background:var(--c)}
.adm-spark.teal{--c:var(--a-teal)}.adm-spark.blue{--c:var(--a-blue)}.adm-spark.purple{--c:var(--a-purple)}.adm-spark.orange{--c:var(--a-orange)}
.adm-spark.green{--c:var(--a-green)}.adm-spark.red{--c:var(--a-red)}.adm-spark.yellow{--c:var(--a-yellow)}
.adm-kpi-f{margin:14px -16px 0;padding:9px 16px;border-top:1px solid var(--a-line);background:var(--a-sunken);border-radius:0 0 var(--a-r) var(--a-r);
  display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--a-text-3)}
.adm-delta{display:inline-flex;align-items:center;gap:3px;font-family:var(--a-mono);font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 7px;white-space:nowrap;
  color:var(--a-text-2);background:var(--a-active)}
.adm-delta.up{color:var(--a-green-fg);background:var(--a-green-t)}
.adm-delta.down{color:var(--a-red-fg);background:var(--a-red-t)}
/* status pill: <span class="adm-pill ok">Active</span> — ok/active/success · hold/pending/warn · risk/bad/failed · info/progress · purple · off/muted */
.adm-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:0;border-radius:999px;min-height:0;font-family:var(--a-font);font-size:11px;font-weight:600;line-height:1.35;
  white-space:nowrap;word-break:normal;background:var(--t,var(--a-active));color:var(--c,var(--a-text-2))} /* resets: the site's global .info box (monospace, border) */
.adm-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.adm-pill.ok,.adm-pill.active,.adm-pill.success{--c:var(--a-green-fg);--t:var(--a-green-t)}
.adm-pill.hold,.adm-pill.pending,.adm-pill.warn{--c:var(--a-orange-fg);--t:var(--a-orange-t)}
.adm-pill.risk,.adm-pill.bad,.adm-pill.failed{--c:var(--a-red-fg);--t:var(--a-red-t)}
.adm-pill.info,.adm-pill.progress{--c:var(--a-blue-fg);--t:var(--a-blue-t)}
.adm-pill.purple{--c:var(--a-purple-fg);--t:var(--a-purple-t)}
.adm-pill.yellow{--c:var(--a-yellow-fg);--t:var(--a-yellow-t)}
.adm-pill.off,.adm-pill.muted{--c:var(--a-text-3);--t:var(--a-active)}
/* table: <div class="adm-tbl"><table>…</table></div> or <table class="adm-tbl"> — th[data-sort] (.sorted / .sorted.desc) with a ▲▼ svg, td.num / .r
   (monospace, right), td.chk (checkbox), td.act (⋮ .adm-more), td.date (muted monospace) */
.adm-tbl{overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:0 16px;scrollbar-width:thin;min-width:0}
.adm-tbl>table,table.adm-tbl{width:100%;border-collapse:collapse;border-spacing:0;background:transparent}
table.adm-tbl{margin:0;padding:0;display:table;overflow:visible}
:is(.adm-tbl>table,table.adm-tbl) th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--a-text-3);padding:8px 10px;
  background:var(--a-sunken);white-space:nowrap;user-select:none;border:0;position:static}
:is(.adm-tbl>table,table.adm-tbl) th:first-child{border-radius:8px 0 0 8px}
:is(.adm-tbl>table,table.adm-tbl) th:last-child{border-radius:0 8px 8px 0}
:is(.adm-tbl>table,table.adm-tbl) th[data-sort]{cursor:pointer}
:is(.adm-tbl>table,table.adm-tbl) th[data-sort]:hover,:is(.adm-tbl>table,table.adm-tbl) th.sorted{color:var(--a-text)}
:is(.adm-tbl>table,table.adm-tbl) th svg{width:12px;height:12px;vertical-align:-2px;color:var(--a-text-4);margin-left:2px}
:is(.adm-tbl>table,table.adm-tbl) th.sorted svg{color:var(--acc)}
:is(.adm-tbl>table,table.adm-tbl) th.sorted.desc svg{transform:rotate(180deg)}
:is(.adm-tbl>table,table.adm-tbl) td{padding:11px 10px;border:0;border-bottom:1px solid var(--a-line);vertical-align:middle;color:var(--a-text);background:transparent}
:is(.adm-tbl>table,table.adm-tbl) tbody tr{transition:background .12s}
:is(.adm-tbl>table,table.adm-tbl) tbody tr:hover td{background:var(--a-hover)}
:is(.adm-tbl>table,table.adm-tbl) tbody tr.selected td{background:var(--a-accent-tint)}
:is(.adm-tbl>table,table.adm-tbl) tbody tr:last-child td{border-bottom:0}
:is(.adm-tbl>table,table.adm-tbl) :is(td,th).num,:is(.adm-tbl>table,table.adm-tbl) :is(td,th).r{text-align:right}
:is(.adm-tbl>table,table.adm-tbl) td.num,:is(.adm-tbl>table,table.adm-tbl) td.r{font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-size:12px}
:is(.adm-tbl>table,table.adm-tbl) td.date{font-family:var(--a-mono);font-size:11.5px;color:var(--a-text-3);white-space:nowrap}
:is(.adm-tbl>table,table.adm-tbl) .chk{width:34px}
:is(.adm-tbl>table,table.adm-tbl) .act{width:48px;text-align:center}
.adm-shell .adm-more{width:28px;height:28px;min-height:0;border-radius:6px;display:inline-grid;place-items:center;background:none;border:1px solid transparent;color:var(--a-text-3);padding:0}
.adm-shell .adm-more:hover{background:var(--a-hover);color:var(--a-text);border-color:transparent}
.adm-shell input[type=checkbox].adm-cb,.adm-tbl input[type=checkbox]{appearance:none;-webkit-appearance:none;width:14px;height:14px;padding:0;border:1.5px solid var(--a-line-strong);border-radius:4px;
  background:var(--a-elev);cursor:pointer;display:inline-grid;place-items:center;vertical-align:middle;margin:0}
.adm-shell input[type=checkbox].adm-cb:checked,.adm-tbl input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
.adm-shell input[type=checkbox].adm-cb:checked::after,.adm-tbl input[type=checkbox]:checked::after{content:"";width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
/* segmented control: <div class="adm-seg" role="group"><button class="on" aria-pressed="true">Week</button><button>Month</button></div> */
.adm-seg{display:inline-flex;background:var(--a-active);border-radius:999px;padding:3px;gap:2px;flex:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
.adm-shell .adm-seg>button,.adm-shell .adm-seg>a{height:auto;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;color:var(--a-text-3);background:transparent;border:0;white-space:nowrap;min-height:26px;line-height:18px}
.adm-shell .adm-seg>button:hover,.adm-shell .adm-seg>a:hover{color:var(--a-text);border:0}
.adm-shell .adm-seg>.on,.adm-shell .adm-seg>[aria-pressed=true],.adm-shell .adm-seg>[aria-selected=true]{background:var(--a-elev);color:var(--a-text);box-shadow:var(--a-shadow);font-weight:600}
/* buttons in the template's style: <button class="adm-btn">, .adm-btn.dark (the key colour), .adm-btn.sm */
.adm-shell .adm-btn{display:inline-flex;align-items:center;gap:6px;height:32px;min-height:0;padding:0 11px;border:1px solid var(--a-line);background:var(--a-elev);border-radius:8px;font-weight:500;font-size:12.5px;
  color:var(--a-text);white-space:nowrap;box-shadow:var(--a-shadow);text-decoration:none}
.adm-shell .adm-btn:hover{background:var(--a-hover);border-color:var(--a-line-strong)}
.adm-shell .adm-btn .ic{width:14px;height:14px;color:var(--a-text-2)}
.adm-shell .adm-btn.sm{height:28px;padding:0 9px;font-size:12px;box-shadow:none}
.adm-shell .adm-btn.dark{background:var(--pri-grad);color:#fff;border-color:transparent}
.adm-shell .adm-btn.dark .ic{color:inherit}
.adm-shell .adm-btn.dark:hover{filter:brightness(1.08);border-color:transparent}
/* spacing: the tab draws into a plain <div> — stack blocks with .adm-stack, or let .adm-kpis / .adm-grid keep their own bottom gap */
.adm-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.adm-shell .adm-kpis,.adm-shell .adm-grid{margin-bottom:14px}
.adm-stack>.adm-kpis,.adm-stack>.adm-grid{margin-bottom:0}

/* ---- base: the tabs' existing markup on the admin palette (radius / shadow / fields) — per-tab details are G3 / G4 ---- */
.adm-shell .card{background:var(--a-elev);border-color:var(--a-line);border-radius:var(--a-r);box-shadow:var(--a-shadow)}
.adm-shell .adm-body input:not([type=checkbox]):not([type=radio]),.adm-shell .adm-body select,.adm-shell .adm-body textarea{border-radius:8px;border-color:var(--a-line);background:var(--a-sunken)}
.adm-shell .adm-body input:focus,.adm-shell .adm-body select:focus,.adm-shell .adm-body textarea:focus{border-color:var(--acc)}
.adm-shell .adm-body button{border-radius:8px}
html.adm-mode .modal-box{border-radius:var(--a-r);border-color:var(--a-line);box-shadow:var(--a-shadow-lg);font-family:var(--a-font)}

/* ---- responsive ---- */
@media (max-width:1280px){.adm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-grid>.span-3{grid-column:span 2}}
@media (max-width:767px){
  .adm-side{position:fixed;left:0;top:0;bottom:0;height:100dvh;transform:translateX(-104%);box-shadow:var(--a-shadow-lg);width:min(300px,86vw)!important;padding-left:10px!important;padding-right:10px!important;visibility:hidden}
  .adm-shell.nav-open .adm-side{transform:none;visibility:visible}
  .adm-shell.nav-open .adm-scrim{opacity:1;pointer-events:auto}
  /* phones ignore the collapsed state */
  .adm-shell.collapsed .adm-ws-meta,.adm-shell.collapsed .adm-nav-item>span:not(.adm-badge),.adm-shell.collapsed .adm-op{display:block}
  .adm-shell.collapsed .adm-nav-lbl{display:block;height:auto;padding:14px 10px 6px}
  .adm-shell.collapsed .adm-nav-item .adm-badge{display:inline-block}
  .adm-shell.collapsed .adm-side .adm-search>span{display:block}
  .adm-shell.collapsed .adm-ws{justify-content:flex-start;padding:8px}
  .adm-shell.collapsed .adm-nav-item{justify-content:flex-start;padding:7px 10px}
  .adm-shell.collapsed .adm-side .adm-search{justify-content:flex-start;padding:0 10px 0 12px}
  .adm-nav-item{min-height:40px}
  .adm-menu-btn{display:inline-grid}
  .adm-collapse{display:none}
  .adm-top{padding:10px 12px;gap:4px}
  .adm-top .adm-search{height:34px}
  .adm-top .adm-search kbd{display:none}
  .adm-top-r{gap:2px}
  .adm-icbtn{width:40px;height:40px}
  .adm-head,.adm-tabs{padding-left:14px;padding-right:14px}
  .adm-shell .adm-body{padding:14px 14px 24px}
  .adm-head-r{margin-left:0;width:100%}
}
@media (max-width:640px){
  .adm-kpis,.adm-grid{grid-template-columns:minmax(0,1fr)}
  .adm-grid>.span-2,.adm-grid>.span-3{grid-column:span 1}
  .adm-kpi-v{font-size:24px}
  .adm-card{padding:12px 14px 14px;border-radius:12px}
  .adm-kpi-f{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .adm-tbl{margin:0 -14px;padding:0 14px}
  .adm-seg{width:100%}
  .adm-seg>button,.adm-seg>a{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){.adm-side,.adm-scrim,.adm-shell *{transition:none!important;animation:none!important}}
/* ===== /G1 admin ===== */
/* ===== G4 admin (10-22, ops/prompts/1022-G4.md + 1022-contract-admin-ui.md): the Markets / Settings / Operations tabs — Market operations ·
   Assets & markets · Futures markets · Futures overview · Revenue · Networks · Deposit address pool · Site & legal · Access log · Stats &
   audit · Audit runs · Alerts · System status · Emergency stop — on the dashboard template's look. Shape only (markup, behaviour and API
   calls unchanged). Each of those tab functions marks its content box .adm-skin .adm-g4 g4-<tab> (app.js, one line each): .adm-skin is the
   shared template skin of "G3 admin" below (cards, tables, pills, buttons, fields, notices, KPI tiles, dialogs), so every admin tab reads
   the same; this section only adds what this group has and the skin does not cover, scoped to .adm-skin.adm-g4 (one class more than the
   skin, so it wins where both speak): KPI rows 4 across (Revenue 3) with the long figures at 22 px; the status colours of figures and cells
   (.ok-t .warn-t .bad-t .up .dn — the skin paints every cell / figure in the text colour); the emergency switch cards and their red stop
   buttons (the skin paints every .primary in the key colour); the revenue chart (grid lines, key-colour bars); plain fields in the
   access-log / mail-test filters (the skin draws a magnifier into every toolbar field); the chevron on a page-head select ===== */
/* KPI rows */
.adm-shell .adm-skin.adm-g4 .stats-row{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.adm-shell .adm-skin.adm-g4 .stats-row>:is(.notice,.empty){grid-column:1/-1;margin:0}
.adm-shell .adm-skin.adm-g4 .tile b{font-size:22px;line-height:1.2}
.adm-shell .adm-skin.adm-g4 .tile b.sm{font-size:13px;line-height:1.6}
@media (min-width:1100px){.adm-shell .adm-skin.adm-g4.g4-rev .stats-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* status colours the skin flattens: figures and cells keep their ok / attention / error and rise / fall colours */
.adm-shell .adm-skin.adm-g4 :is(.tile b,table.dt td).ok-t{color:var(--a-green-fg)}
.adm-shell .adm-skin.adm-g4 :is(.tile b,table.dt td).warn-t{color:var(--a-yellow-fg)}
.adm-shell .adm-skin.adm-g4 :is(.tile b,table.dt td).bad-t{color:var(--a-red-fg)}
.adm-shell .adm-skin.adm-g4 :is(.tile b,table.dt td).up{color:var(--rise-t)}
.adm-shell .adm-skin.adm-g4 :is(.tile b,table.dt td).dn{color:var(--fall-t)}
/* a page-head select (Revenue period, Alerts status): the .btn face with the skin's chevron */
.adm-shell .adm-skin.adm-g4>.toolbar .toolbar-r>select{appearance:none;-webkit-appearance:none;padding:0 28px 0 10px;border:1px solid var(--a-line);border-radius:8px;
  background:var(--a-elev) var(--sk-chev) no-repeat right 9px center/12px;color:var(--a-text)}
.adm-shell .adm-skin.adm-g4>.toolbar .toolbar-r>select:hover{border-color:var(--a-line-strong)}
/* filters that are not a search (access log: admin e-mail, member UID, dates; the mail-test recipient): plain fields, no magnifier */
.adm-shell .adm-skin.adm-g4 .card .toolbar-r:is(.access-filters,.mail-test)>input{padding-left:10px;background-color:var(--a-elev);background-image:none}
/* emergency switches: one card each (the switch's name as its title), an engaged one outlined in red; a stop is a red button */
.adm-shell .adm-skin.adm-g4 .flag-grid{gap:14px;margin-bottom:14px}
.adm-shell .adm-skin.adm-g4 .flag-grid>.card{margin:0}
.adm-shell .adm-skin.adm-g4 .flag-card .card-h>h3{font-size:14px;letter-spacing:0;text-transform:none;color:var(--a-text)}
.adm-shell .adm-skin.adm-g4 .flag-card.engaged{border-color:color-mix(in srgb,var(--a-red) 60%,var(--a-line));box-shadow:var(--a-shadow),inset 0 0 0 1px color-mix(in srgb,var(--a-red) 60%,transparent)}
.adm-shell .adm-skin.adm-g4 .flag-card .form-acts button{height:auto;min-height:32px;padding:6px 11px;line-height:1.35;white-space:normal;text-align:left}
.adm-shell .adm-skin.adm-g4 button.primary.dangerfill{background:var(--a-red);border-color:transparent;color:#1a120a}
:root[data-theme=light] .adm-shell .adm-skin.adm-g4 button.primary.dangerfill{background:var(--a-red-fg);color:#fff}
.adm-shell .adm-skin.adm-g4 button.primary.dangerfill:hover:not(:disabled){filter:brightness(1.08)}
.adm-shell .adm-skin.adm-g4 button.ghost.muted{color:var(--a-text-3)}
/* revenue: the daily net bars on a four-line grid, in the key colour (a loss in red) */
.adm-shell .adm-skin.adm-g4 .rev-bars{height:180px;gap:4px;padding:8px 0 0;border-bottom:1px solid var(--a-line-strong);justify-content:space-between;
  background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--a-line) calc(25% - 1px),var(--a-line) 25%)}
.adm-shell .adm-skin.adm-g4 .rev-bars i{max-width:28px;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--acc) 80%,transparent);opacity:1}
.adm-shell .adm-skin.adm-g4 .rev-bars i:hover{background:var(--acc)}
.adm-shell .adm-skin.adm-g4 .rev-bars i.neg{background:var(--a-red)}
.adm-shell .adm-skin.adm-g4 .rev-axis{margin-top:6px;font-family:var(--a-mono);font-size:11px;color:var(--a-text-3)}
/* generic field lists (futures overview: other fields, system status: thresholds) */
.adm-shell .adm-skin.adm-g4 .gen h4{margin:16px 0 8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--a-text-3)}
.adm-shell .adm-skin.adm-g4 .gen>.kv{background:var(--a-sunken);border:1px solid var(--a-line);border-radius:10px}
/* a notice carrying a list (System status: settings to check before going live): on a phone the list goes under the title, full width */
@media (max-width:640px){
  .adm-shell .adm-skin.adm-g4 .notice:has(>.side-list){flex-wrap:wrap}
  .adm-shell .adm-skin.adm-g4 .notice>.side-list{flex:1 0 100%;margin:0;padding-left:44px}
  .adm-shell .adm-skin.adm-g4 .rev-bars{height:140px;gap:2px}
}
@media (hover:none) and (pointer:coarse){.adm-shell .adm-skin.adm-g4 .flag-card .form-acts button{min-height:44px}}
/* ===== /G4 admin ===== */

/* ===== G3 admin (10-22, ops/prompts/1022-contract-admin-ui.md): the funds & members tabs in the dashboard template's look — withdrawals ·
   deposits · detected deposits · ledger adjustments · wallets & reserves · mainnet check · members + member page · KYC · tickets · referrals ·
   pending approvals. Shape only: the tabs' markup, behaviour and API calls are unchanged. Each of those tab functions marks its content box
   .adm-skin (app.js, one line each) and every rule here is scoped to it, so other tabs keep their own styling (G4) — a tab opts in with the
   same class. Their dialogs follow while such a tab is on screen (html.adm-mode:has(.adm-skin) .modal). Colours: G1's --a-* tokens (text on
   a tint = the -fg variants, 4.5:1); the accent stays the Xenobex key colour. Icons drawn by CSS are data: URIs (CSP img-src allows data:) ===== */
.adm-shell .adm-skin,html.adm-mode:has(.adm-skin) .modal{min-width:0;
  --sk-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14zM20.5 20.5L16 16'/%3E%3C/svg%3E");
  --sk-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --sk-kpi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 20v-8M10 20V5M15 20v-5M20 20V9'/%3E%3C/svg%3E")}
/* cards: white (light) / deep (dark), radius 14, 1 px line, soft shadow; the title is the template's small card title */
.adm-shell .adm-skin .card{background:var(--a-elev);border:1px solid var(--a-line);border-radius:var(--a-r);box-shadow:var(--a-shadow);padding:14px 16px 16px;margin:0 0 14px;color:var(--a-text);transition:border-color .2s}
.adm-shell .adm-skin .card:hover{border-color:var(--a-line-strong)}
.adm-shell .adm-skin .card:last-child{margin-bottom:0}
.adm-shell .adm-skin .card>h3,.adm-shell .adm-skin .card>.toolbar>h3,.adm-shell .adm-skin .card-h>h3{display:flex;align-items:center;gap:8px;min-height:24px;margin:0 0 12px;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.35;color:var(--a-text-2)}
.adm-shell .adm-skin .card>.toolbar>h3,.adm-shell .adm-skin .card-h>h3{margin:0}
.adm-shell .adm-skin .card>p.muted{font-size:12px;line-height:1.55;color:var(--a-text-3);margin:-2px 0 12px}
.adm-shell .adm-skin .card-h{gap:10px;margin-bottom:12px}
/* card head: title left, filters · search · buttons right */
.adm-shell .adm-skin .toolbar{gap:10px;row-gap:8px;margin-bottom:12px;min-height:32px}
.adm-shell .adm-skin .toolbar-r{gap:6px;row-gap:6px}
/* a section head outside a card (wallets · mainnet check · referrals · tickets) */
.adm-shell .adm-skin>.toolbar>h3{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--a-text)}
.adm-shell .adm-skin .grid2{gap:14px;margin:0 0 14px}
.adm-shell .adm-skin .grid2:last-child{margin-bottom:0}
.adm-shell .adm-skin .grid2>.card{margin:0}
.adm-shell .adm-skin .grid2+.card,.adm-shell .adm-skin .grid2+.grid2{margin-top:0}

/* buttons: the template's .btn (32 px, 1 px line, radius 8, soft shadow) · .sm 28 px · danger = red text · primary = the key colour */
.adm-shell .adm-skin button.ghost,.adm-shell .adm-skin a.btn:not(.primary),html.adm-mode:has(.adm-skin) .modal .dlg button.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;min-height:0;padding:0 11px;border:1px solid var(--a-line);border-radius:8px;background:var(--a-elev);color:var(--a-text);font-size:12.5px;font-weight:500;line-height:1;
  white-space:nowrap;text-decoration:none;box-shadow:var(--a-shadow);transition:background .15s,border-color .15s}
.adm-shell .adm-skin button.ghost:hover:not(:disabled),.adm-shell .adm-skin a.btn:not(.primary):hover,html.adm-mode:has(.adm-skin) .modal .dlg button.ghost:hover:not(:disabled){background:var(--a-hover);border-color:var(--a-line-strong);color:var(--a-text)}
.adm-shell .adm-skin :is(button.ghost,a.btn).sm,html.adm-mode:has(.adm-skin) .modal .dlg button.ghost.sm{height:28px;padding:0 9px;font-size:12px;box-shadow:none}
.adm-shell .adm-skin button.ghost.danger,html.adm-mode:has(.adm-skin) .modal .dlg button.ghost.danger{color:var(--a-red-fg)}
.adm-shell .adm-skin button.ghost.danger:hover:not(:disabled),html.adm-mode:has(.adm-skin) .modal .dlg button.ghost.danger:hover:not(:disabled){color:var(--a-red-fg);background:var(--a-red-t);border-color:color-mix(in srgb,var(--a-red) 35%,transparent)}
.adm-shell .adm-skin button.primary{height:32px;min-height:0;padding:0 12px;border:1px solid transparent;border-radius:8px;background:var(--pri-grad);color:#fff;font-size:12.5px;font-weight:600;box-shadow:var(--a-shadow)}
.adm-shell .adm-skin button.primary.sm{height:28px;padding:0 10px;font-size:12px}
.adm-shell .adm-skin button.primary.lg{width:100%;height:38px;margin-top:4px;font-size:13px}
.adm-shell .adm-skin .form-acts{gap:8px}
.adm-shell .adm-skin .acts{gap:6px;align-items:center}

/* fields: the template's .input (34 px, radius 8, accent ring on focus); a <select> gets the chevron */
.adm-shell .adm-skin .card input:not([type=checkbox]):not([type=radio]),.adm-shell .adm-skin .card select,.adm-shell .adm-skin .card textarea,
html.adm-mode:has(.adm-skin) .modal .dlg input:not([type=checkbox]):not([type=radio]),html.adm-mode:has(.adm-skin) .modal .dlg select,html.adm-mode:has(.adm-skin) .modal .dlg textarea{
  height:34px;padding:0 10px;border:1px solid var(--a-line);border-radius:8px;background-color:var(--a-elev);color:var(--a-text);font-size:13px;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.adm-shell .adm-skin .card textarea,html.adm-mode:has(.adm-skin) .modal .dlg textarea{height:auto;min-height:72px;padding:8px 10px;line-height:1.5}
.adm-shell .adm-skin .card select,html.adm-mode:has(.adm-skin) .modal .dlg select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--sk-chev);background-repeat:no-repeat;
  background-position:right 9px center;background-size:12px;cursor:pointer}
.adm-shell .adm-skin .card :is(input:not([type=checkbox]):not([type=radio]),select,textarea):hover,html.adm-mode:has(.adm-skin) .modal .dlg :is(input:not([type=checkbox]):not([type=radio]),select,textarea):hover{border-color:var(--a-line-strong)}
.adm-shell .adm-skin .card :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus,html.adm-mode:has(.adm-skin) .modal .dlg :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{
  border-color:var(--acc);box-shadow:0 0 0 3px var(--a-accent-tint);outline:none}
.adm-shell .adm-skin .inp,html.adm-mode:has(.adm-skin) .modal .dlg .inp{height:34px;border:1px solid var(--a-line);border-radius:8px;background:var(--a-elev)}
.adm-shell .adm-skin .inp:focus-within,html.adm-mode:has(.adm-skin) .modal .dlg .inp:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--a-accent-tint)}
.adm-shell .adm-skin .card .inp input:not([type=checkbox]):not([type=radio]),.adm-shell .adm-skin .card .inp input:not([type=checkbox]):not([type=radio]):is(:hover,:focus),
html.adm-mode:has(.adm-skin) .modal .dlg .inp input:not([type=checkbox]):not([type=radio]),html.adm-mode:has(.adm-skin) .modal .dlg .inp input:not([type=checkbox]):not([type=radio]):is(:hover,:focus){height:100%;border:0;background:transparent;box-shadow:none}
.adm-shell .adm-skin .inp .unit{font-size:12.5px;color:var(--a-text-3)}
.adm-shell .adm-skin .fld,html.adm-mode:has(.adm-skin) .modal .dlg .fld{margin-bottom:12px}
.adm-shell .adm-skin .fld-l,html.adm-mode:has(.adm-skin) .modal .dlg .fld-l{margin-bottom:5px;font-size:12px;font-weight:500;color:var(--a-text-2)}
.adm-shell .adm-skin .fld-hint,html.adm-mode:has(.adm-skin) .modal .dlg .fld-hint{font-size:11.5px;color:var(--a-text-3);margin-top:5px}
.adm-shell .adm-skin .row2{gap:0 12px} /* the fields keep their own 12 px foot: no double gap when the pair stacks on a phone */
/* filters / search in a card head: the search field is the template's small search (magnifier, sunken); a <select> looks like a .btn */
.adm-shell .adm-skin .toolbar-r input:not([type=checkbox]):not([type=radio]),.adm-shell .adm-skin .toolbar-r select{height:32px;width:auto;min-width:0;font-size:12.5px}
.adm-shell .adm-skin .toolbar-r input:not([type=checkbox]):not([type=radio]){min-width:180px;padding-left:30px;background:var(--a-sunken) var(--sk-search) no-repeat 10px 50%/14px}
.adm-shell .adm-skin .toolbar-r select{min-width:130px;font-weight:500;box-shadow:var(--a-shadow)}
.adm-shell .adm-skin .toolbar-r input::placeholder{color:var(--a-text-3)}
.adm-shell .adm-skin .toolbar-r input::-webkit-search-cancel-button{-webkit-appearance:none}
/* checkboxes: the template's square box (accent when ticked); a role=switch checkbox is a small switch */
.adm-shell .adm-skin input[type=checkbox],html.adm-mode:has(.adm-skin) .modal .dlg input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;padding:0;margin:0;
  border:1.5px solid var(--a-line-strong);border-radius:4px;background:var(--a-elev);display:inline-grid;place-items:center;vertical-align:middle;cursor:pointer;box-shadow:none;transition:background .12s,border-color .12s}
.adm-shell .adm-skin input[type=checkbox]:checked,html.adm-mode:has(.adm-skin) .modal .dlg input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
.adm-shell .adm-skin input[type=checkbox]:checked::after,html.adm-mode:has(.adm-skin) .modal .dlg input[type=checkbox]:checked::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.adm-shell .adm-skin input[type=checkbox]:disabled{opacity:.5;cursor:default}
.adm-shell .adm-skin input[type=checkbox][role=switch]{position:relative;display:inline-block;width:32px;height:18px;border:0;border-radius:999px;background:var(--a-line-strong)}
.adm-shell .adm-skin input[type=checkbox][role=switch]::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transform:none;transition:transform .15s}
.adm-shell .adm-skin input[type=checkbox][role=switch]:checked{background:var(--acc)}
.adm-shell .adm-skin input[type=checkbox][role=switch]:checked::after{width:14px;height:14px;border:0;transform:translateX(14px)}
.adm-shell .adm-skin label.chk,html.adm-mode:has(.adm-skin) .modal .dlg label.chk{gap:8px;font-size:12.5px;color:var(--a-text-2)}

/* tables: sunken header row with rounded ends, roomy rows, numbers in the mono face, a hovered row tinted; a flagged row (tr.row-bad) red */
.adm-shell .adm-skin .tbl{margin:0 -16px;padding:0 16px;scrollbar-width:thin}
.adm-shell .adm-skin table.dt,html.adm-mode:has(.adm-skin) .modal table.dt{font-size:12.5px;border-collapse:separate;border-spacing:0}
.adm-shell .adm-skin table.dt th,html.adm-mode:has(.adm-skin) .modal table.dt th{padding:8px 10px;border:0;background:var(--a-sunken);color:var(--a-text-3);font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.adm-shell .adm-skin table.dt th:first-child,html.adm-mode:has(.adm-skin) .modal table.dt th:first-child{border-radius:8px 0 0 8px}
.adm-shell .adm-skin table.dt th:last-child,html.adm-mode:has(.adm-skin) .modal table.dt th:last-child{border-radius:0 8px 8px 0}
.adm-shell .adm-skin table.dt td,html.adm-mode:has(.adm-skin) .modal table.dt td{padding:11px 10px;border-bottom:1px solid var(--a-line);background:transparent;color:var(--a-text);vertical-align:middle;transition:background .12s}
.adm-shell .adm-skin table.dt tbody tr:hover td{background:var(--a-hover)}
.adm-shell .adm-skin table.dt tbody tr:last-child td,html.adm-mode:has(.adm-skin) .modal table.dt tbody tr:last-child td{border-bottom:0}
.adm-shell .adm-skin table.dt tr.row-bad td{background:color-mix(in srgb,var(--a-red-t) 70%,transparent)}
.adm-shell .adm-skin table.dt tr.row-bad td:first-child{box-shadow:inset 2px 0 0 var(--a-red)}
.adm-shell .adm-skin table.dt tr.muted td{color:var(--a-text-3)}
.adm-shell .adm-skin table.dt :is(td,th).r{text-align:right}
.adm-shell .adm-skin table.dt td:is(.r,.mono),html.adm-mode:has(.adm-skin) .modal table.dt td:is(.r,.mono){font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:-.01em}
.adm-shell .adm-skin table.dt td.muted{color:var(--a-text-3)}
.adm-shell .adm-skin table.dt td.muted[title],html.adm-mode:has(.adm-skin) .modal table.dt td.muted[title]{font-family:var(--a-mono);font-size:11.5px;white-space:nowrap} /* tdTm: time column */
.adm-shell .adm-skin table.dt td b{font-weight:600}
.adm-shell .adm-skin .cell-sub{margin-top:3px;font-size:11px;line-height:1.4;color:var(--a-text-3)}
.adm-shell .adm-skin .bad-t{color:var(--a-red-fg)}
.adm-shell .adm-skin .hash{font-family:var(--a-mono);font-size:12px}
.adm-shell .adm-skin .copy{color:var(--a-text-4)}
.adm-shell .adm-skin .copy:hover{color:var(--acc)}
.adm-shell .adm-skin a.xlink{font-size:11.5px;font-weight:500}
.adm-shell .adm-skin a.td-link{color:var(--a-text);font-weight:500}
.adm-shell .adm-skin a.td-link:hover{color:var(--acc)}
.adm-shell .adm-skin .empty{color:var(--a-text-3)}
.adm-shell .adm-skin .empty .ic{color:var(--a-text-4);opacity:1}
/* status badges = the template's pill (● + label on its tint): ok green · warn orange · bad red · blue · plain grey */
.adm-shell .adm-skin .badge,html.adm-mode:has(.adm-skin) .modal .dlg .badge{display:inline-flex;align-items:center;gap:5px;height:auto;min-height:0;padding:3px 8px;border:0;border-radius:999px;
  background:var(--t,var(--a-active));color:var(--c,var(--a-text-3));font-family:var(--a-font);font-size:11px;font-weight:600;line-height:1.35;white-space:nowrap}
.adm-shell .adm-skin .badge::before,html.adm-mode:has(.adm-skin) .modal .dlg .badge::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}
.adm-shell .adm-skin .badge.ok,html.adm-mode:has(.adm-skin) .modal .dlg .badge.ok{--c:var(--a-green-fg);--t:var(--a-green-t)}
.adm-shell .adm-skin .badge.warn,html.adm-mode:has(.adm-skin) .modal .dlg .badge.warn{--c:var(--a-orange-fg);--t:var(--a-orange-t)}
.adm-shell .adm-skin .badge.bad,html.adm-mode:has(.adm-skin) .modal .dlg .badge.bad{--c:var(--a-red-fg);--t:var(--a-red-t)}
.adm-shell .adm-skin .badge.blue,html.adm-mode:has(.adm-skin) .modal .dlg .badge.blue{--c:var(--a-blue-fg);--t:var(--a-blue-t)}
.adm-shell .adm-skin .badges{gap:6px}
/* notices: a tinted, outlined strip — the tone's colour for the icon and the title, body text in the second text colour */
.adm-shell .adm-skin .notice,html.adm-mode:has(.adm-skin) .modal .dlg .notice{--nc:var(--a-text-3);--nt:var(--a-sunken);--nf:var(--a-text);gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--nc) 28%,transparent);background:var(--nt);color:var(--a-text);font-size:12.5px;line-height:1.55}
.adm-shell .adm-skin .notice>.ic,html.adm-mode:has(.adm-skin) .modal .dlg .notice>.ic{width:16px;height:16px;margin-top:1px;color:var(--nc)}
.adm-shell .adm-skin .notice b,html.adm-mode:has(.adm-skin) .modal .dlg .notice b{margin-bottom:2px;font-size:13px;font-weight:600;color:var(--nf)}
.adm-shell .adm-skin .notice p,html.adm-mode:has(.adm-skin) .modal .dlg .notice p{margin:0;font-size:12.5px;color:var(--a-text-2)}
.adm-shell .adm-skin .notice.blue,html.adm-mode:has(.adm-skin) .modal .dlg .notice.blue{--nc:var(--a-blue);--nt:var(--a-blue-t);--nf:var(--a-blue-fg)}
.adm-shell .adm-skin .notice.warn,html.adm-mode:has(.adm-skin) .modal .dlg .notice.warn{--nc:var(--a-orange);--nt:var(--a-orange-t);--nf:var(--a-orange-fg)}
.adm-shell .adm-skin .notice:is(.danger,.bad),html.adm-mode:has(.adm-skin) .modal .dlg .notice:is(.danger,.bad){--nc:var(--a-red);--nt:var(--a-red-t);--nf:var(--a-red-fg)}
.adm-shell .adm-skin .notice.ok,html.adm-mode:has(.adm-skin) .modal .dlg .notice.ok{--nc:var(--a-green);--nt:var(--a-green-t);--nf:var(--a-green-fg)}
.adm-shell .adm-skin .card .notice:last-child{margin-bottom:0}
/* summary tiles (mainnet check, referrals) = the template's KPI card: icon chip + title, big mono number, the sub-line as the grey footer */
.adm-shell .adm-skin .stats-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 14px}
.adm-shell .adm-skin .tile{--c:var(--a-teal);--c-t:var(--a-teal-t);display:flex;flex-direction:column;min-width:0;padding:14px 16px;overflow:hidden;background:var(--a-elev);border:1px solid var(--a-line);
  border-radius:var(--a-r);box-shadow:var(--a-shadow);transition:border-color .2s}
.adm-shell .adm-skin .tile:hover{border-color:var(--a-line-strong)}
.adm-shell .adm-skin .tile:nth-child(4n+2){--c:var(--a-blue);--c-t:var(--a-blue-t)}
.adm-shell .adm-skin .tile:nth-child(4n+3){--c:var(--a-purple);--c-t:var(--a-purple-t)}
.adm-shell .adm-skin .tile:nth-child(4n+4){--c:var(--a-orange);--c-t:var(--a-orange-t)}
.adm-shell .adm-skin .tile small{position:relative;display:flex;align-items:center;gap:8px;min-height:22px;margin:0 0 14px;font-size:12px;font-weight:600;color:var(--a-text-2)}
.adm-shell .adm-skin .tile small::before{content:"";flex:none;width:22px;height:22px;box-sizing:border-box;border-radius:6px;background:var(--c-t);border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}
.adm-shell .adm-skin .tile small::after{content:"";position:absolute;left:5px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--c);-webkit-mask:var(--sk-kpi) center/contain no-repeat;mask:var(--sk-kpi) center/contain no-repeat}
.adm-shell .adm-skin .tile b{margin-bottom:14px;font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.02em;color:var(--a-text);overflow-wrap:anywhere}
.adm-shell .adm-skin .tile b.sm{font-size:13px;line-height:1.6;letter-spacing:0;white-space:pre-line}
.adm-shell .adm-skin .tile b.bad-t{color:var(--a-red-fg)}
.adm-shell .adm-skin .tile .cell-sub{margin:auto -16px -14px;padding:9px 16px;border-top:1px solid var(--a-line);background:var(--a-sunken);font-size:11.5px;color:var(--a-text-3)}
/* member page: back link as a small button, the e-mail as the page's title, notes as soft bubbles */
.adm-shell .adm-skin>.back-link{display:inline-flex;align-items:center;gap:6px;height:28px;margin:0 0 14px;padding:0 10px;border:1px solid var(--a-line);border-radius:8px;background:var(--a-elev);
  color:var(--a-text-2);font-size:12px;font-weight:500;text-decoration:none;box-shadow:var(--a-shadow)}
.adm-shell .adm-skin>.back-link:hover{background:var(--a-hover);color:var(--a-text)}
.adm-shell .adm-skin>.back-link+div>.card:first-child>.card-h>h3{font-size:16px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--a-text);overflow-wrap:anywhere}
.adm-shell .adm-skin .kv,html.adm-mode:has(.adm-skin) .modal .dlg .kv{gap:8px 16px;font-size:12.5px}
.adm-shell .adm-skin .kv dt,html.adm-mode:has(.adm-skin) .modal .dlg .kv dt{color:var(--a-text-3)}
.adm-shell .adm-skin .kv dd,html.adm-mode:has(.adm-skin) .modal .dlg .kv dd{color:var(--a-text)}
.adm-shell .adm-skin .thread{gap:8px}
.adm-shell .adm-skin .msg,html.adm-mode:has(.adm-skin) .modal .dlg .msg{background:var(--a-sunken);border:1px solid var(--a-line);border-radius:10px;padding:10px 12px}
/* a member's message is .msg.user — the site header's .user (flex row, margin-left:auto, height:100%) also matched it: back to a block */
.adm-shell .adm-skin .msg.user,html.adm-mode:has(.adm-skin) .modal .dlg .msg.user{display:block;height:auto;margin-left:0}
.adm-shell .adm-skin .msg.admin,html.adm-mode:has(.adm-skin) .modal .dlg .msg.admin{background:var(--a-blue-t);border-color:color-mix(in srgb,var(--a-blue) 22%,transparent)}
.adm-shell .adm-skin .msg-h .muted,html.adm-mode:has(.adm-skin) .modal .dlg .msg-h .muted{color:var(--a-text-3);font-family:var(--a-mono);font-size:11px}

/* dialogs opened from these tabs: the template's modal — 520 px, radius 16, a head with a rule, the body, a sunken foot with the buttons on the right */
html.adm-mode:has(.adm-skin) .modal{background:var(--a-scrim);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
html.adm-mode:has(.adm-skin) .modal-box{width:min(520px,100%);padding:0;border:1px solid var(--a-line);border-radius:16px;background:var(--a-elev);box-shadow:var(--a-shadow-lg);color:var(--a-text);
  font-family:var(--a-font);font-size:13px;overflow:hidden}
html.adm-mode:has(.adm-skin) .modal .dlg{margin:0;padding:0 18px;scroll-padding:64px 0 72px}
html.adm-mode:has(.adm-skin) .modal .dlg>h3:first-child{margin:0 -18px 16px;padding:15px 56px 15px 18px;border-bottom:1px solid var(--a-line);background:var(--a-elev);font-size:14px;font-weight:600;line-height:1.4}
html.adm-mode:has(.adm-skin) .modal .dlg p{margin:0 0 12px;font-size:12.5px;color:var(--a-text-2)}
html.adm-mode:has(.adm-skin) .modal .dlg .kv{margin-bottom:14px;padding:12px 14px;border:1px solid var(--a-line);border-radius:10px;background:var(--a-sunken)}
html.adm-mode:has(.adm-skin) .modal .dlg .notice{margin-bottom:12px}
html.adm-mode:has(.adm-skin) .modal .dlg-acts{gap:8px;justify-content:flex-end;margin:16px -18px 0;padding:12px 18px;border-top:1px solid var(--a-line);background:var(--a-sunken)}
html.adm-mode:has(.adm-skin) .modal .dlg-acts button{flex:none;min-width:88px;height:34px;padding:0 14px;border-radius:8px;font-size:13px}
html.adm-mode:has(.adm-skin) .modal .dlg-acts button.ghost{border:1px solid var(--a-line);background:var(--a-elev);color:var(--a-text);font-weight:500;box-shadow:var(--a-shadow)}
html.adm-mode:has(.adm-skin) .modal .dlg-acts button.ghost:hover{background:var(--a-hover);border-color:var(--a-line-strong)}
html.adm-mode:has(.adm-skin) .modal .x{top:10px;right:10px;width:32px;height:32px;border-radius:8px;background:transparent;color:var(--a-text-3);font-size:20px}
html.adm-mode:has(.adm-skin) .modal .x:hover{background:var(--a-hover);color:var(--a-text)}
html.adm-mode:has(.adm-skin) .modal .kyc-doc img{border-radius:8px;background:var(--a-sunken);border:1px solid var(--a-line)}
html.adm-mode:has(.adm-skin) .modal .kyc-doc figcaption{color:var(--a-text-3)}

/* phones: the card padding of G1 (12 / 14 px) — tables, KPI footers follow; dialog buttons share the row */
@media (max-width:640px){
  .adm-shell .adm-skin .card{padding:12px 14px 14px;border-radius:12px}
  .adm-shell .adm-skin .tbl{margin:0 -14px;padding:0 14px}
  .adm-shell .adm-skin .tile{padding:12px 14px;border-radius:12px}
  .adm-shell .adm-skin .tile .cell-sub{margin:auto -14px -12px;padding:9px 14px}
  .adm-shell .adm-skin .tile b{font-size:24px}
  .adm-shell .adm-skin .card .toolbar-r{width:100%}
  .adm-shell .adm-skin .toolbar-r input:not([type=checkbox]):not([type=radio]){flex:1 1 180px;min-width:0;max-width:none!important}
  html.adm-mode:has(.adm-skin) .modal-box{border-radius:14px}
  html.adm-mode:has(.adm-skin) .modal .dlg{padding:0 16px}
  html.adm-mode:has(.adm-skin) .modal .dlg>h3:first-child{margin:0 -16px 14px;padding:14px 56px 14px 16px}
  html.adm-mode:has(.adm-skin) .modal .dlg-acts{margin:14px -16px 0;padding:12px 16px}
  html.adm-mode:has(.adm-skin) .modal .dlg-acts button{flex:1;height:42px}
}
/* touch: the hit areas the site keeps (44 px filters / head buttons, 34 px small buttons) win over the template's 28–34 px */
@media (hover:none) and (pointer:coarse){
  .adm-shell .adm-skin .toolbar-r input:not([type=checkbox]):not([type=radio]),.adm-shell .adm-skin .toolbar-r select,.adm-shell .adm-skin .toolbar-r button,.adm-shell .adm-skin .card-h .acts>button,
  html.adm-mode:has(.adm-skin) .modal .ticket-st :is(select,button),html.adm-mode:has(.adm-skin) .modal .dlg-acts button{height:44px}
  .adm-shell .adm-skin :is(button,a.btn).sm,.adm-shell .adm-skin>.back-link{min-height:34px}
  .adm-shell .adm-skin form.card .form-acts button,.adm-shell .adm-skin .card>.form-acts>button{min-height:44px}
  .adm-shell .adm-skin td a.td-link{display:inline-flex;align-items:center;min-height:44px}
}
/* ===== /G3 admin ===== */
/* ===== G2 admin (10-22, ops/prompts/1022-contract-admin-ui.md): the admin home (#/admin/home, app.js admHome) — KPI cards with their
   loading / failed states, the latest withdrawal requests, the donut, the revenue grid chart (the template's dot-matrix bars), the summary
   tiles. Built on G1's shared components (.adm-card .adm-kpi .adm-spark .adm-pill .adm-tbl .adm-seg); every rule here is scoped under .g2.
   Grid cells: the template's --grid-cell (light #e6e8eb, dark #2a2622); the filled cells use the key colour (--acc) and its soft mix ===== */
.g2{--g2-cell:#2a2622;--g2-soft:color-mix(in srgb,var(--acc) 42%,var(--a-elev));--g2-tip:#2a2622;--g2-tip-fg:#ede8e0;--g2-tip-mut:#b8b1a6}
:root[data-theme=light] .g2{--g2-cell:#e6e8eb;--g2-tip:#17191c;--g2-tip-fg:#ffffff;--g2-tip-mut:#c3c8cf}
/* KPI: skeleton, placeholder bars, uncounted days (dashed), the failed state */
.g2 .g2-skel{display:inline-block;width:110px;height:24px;border-radius:6px;background:linear-gradient(90deg,var(--a-active) 0%,var(--a-hover) 50%,var(--a-active) 100%);background-size:200% 100%;
  animation:g2-sh 1.2s linear infinite}
@keyframes g2-sh{from{background-position:200% 0}to{background-position:-200% 0}}
.g2 .adm-spark i.g2-ph{height:30%;background:var(--a-active)}
.g2 .g2-skw{display:inline-block;vertical-align:middle;line-height:0}
.g2 [data-skel=kpi]{--skullet-base:var(--a-active);--skullet-highlight:var(--a-hover)}
.g2 .adm-spark i.na{background:transparent;border:1px dashed var(--a-line-strong);box-sizing:border-box;opacity:.7} /* a day not counted: an empty slot, not a zero */
.g2 .adm-kpi-f a{color:inherit;text-decoration:underline;text-decoration-color:var(--a-line-strong);text-underline-offset:3px}
.g2 .adm-kpi-f a:hover{color:var(--a-text)}
.g2 .adm-kpi-f>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2 .adm-delta.warn{color:var(--a-orange-fg);background:var(--a-orange-t)}
.g2 .g2-err{color:var(--a-red-fg)}
.g2 .g2-note{margin:10px 0 0;font-size:11.5px;color:var(--a-text-3);line-height:1.45}
/* the head's refresh + last update (G1 .adm-head-acts) */
.adm-shell .g2-stamp{font-size:12px;color:var(--a-text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.adm-shell .adm-head-acts .adm-btn.loading{opacity:.6;pointer-events:none}
/* latest withdrawals */
.g2 .g2-wd .adm-card-acts{flex-wrap:nowrap;min-width:0}
.g2 .g2-wd .adm-search.sm{width:200px}
.g2 .g2-cnt{font-size:11.5px;color:var(--a-text-3);white-space:nowrap}
.g2 .g2-wd table{min-width:620px}
.g2 .g2-wd th button.g2-sort{display:inline-flex;align-items:center;gap:2px;height:auto;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;border-radius:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.g2 .g2-wd th.num button.g2-sort{flex-direction:row-reverse}
.g2 .g2-wd th button.g2-sort:hover{color:var(--a-text)}
.g2 .g2-wd th button.g2-sort .ic{width:12px;height:12px;margin:0;stroke-width:2}
.g2 .g2-wd td.g2-mail{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2 .g2-wd td b{font-weight:600}
.g2 .g2-sub{margin-left:6px;font-size:11px;color:var(--a-text-3)}
.g2 .g2-wd td.empty .ic{width:28px;height:28px}
.g2 .g2-wd .adm-more .ic{width:16px;height:16px;stroke-width:2.6}
/* donut */
.g2 .g2-dn .adm-card-h{flex-wrap:wrap}
.g2-donut-box{display:flex;flex-direction:column;flex:1;min-width:0}
.g2-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1}
.g2-donut{width:156px;height:156px;position:relative;flex:none}
.g2-donut svg{width:100%;height:100%;overflow:visible;display:block}
.g2-donut path{transition:transform .2s ease,opacity .2s;transform-origin:50% 50%;cursor:pointer;stroke:var(--a-elev);stroke-width:2}
.g2-donut path.dim{opacity:.35}
.g2-donut path.hot{transform:scale(1.06)}
.g2-donut-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;padding:0 34px}
.g2-donut-c b{font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:600;display:block;color:var(--a-text);letter-spacing:-.01em}
.g2-donut-c span{font-size:11px;color:var(--a-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:88px}
.g2-legend{width:100%;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.g2-legend li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--a-text-2);padding:3px 4px;border-radius:6px;cursor:default;transition:background .12s}
.g2-legend li:hover,.g2-legend li:focus-visible{background:var(--a-hover)}
.g2-legend i{width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
.g2-legend span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2-legend b{margin-left:auto;font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--a-text);font-size:11.5px}
/* revenue trend (grid chart) */
.g2-trend-h{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 12px;background:var(--a-sunken);border-radius:10px;margin-bottom:8px}
.g2-trend-tot{color:var(--a-text-3);font-size:12px;white-space:nowrap}
.g2-trend-tot b{color:var(--a-text);font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:600;margin-left:2px;letter-spacing:-.01em}
.g2-trend-lg{display:flex;gap:12px;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--a-text-3);flex-wrap:wrap}
.g2-trend-lg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.g2-trend-lg i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.g2-trend-h .adm-seg{margin-left:auto}
.g2-matrix{position:relative;height:240px;min-width:0;overflow:hidden}
.g2-matrix>.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0!important}
.g2-matrix>.notice{margin:0}
.g2-matrix svg{display:block;overflow:visible}
.g2-matrix .cell{fill:var(--g2-cell);transition:fill .25s}
.g2-matrix .cell.a{fill:var(--acc)}
.g2-matrix .cell.b{fill:var(--g2-soft)}
.g2-matrix .axis{font-family:var(--a-mono);font-size:10px;fill:var(--a-text-3)}
.g2-matrix .axis.hot{fill:var(--a-text);font-weight:600}
.g2-matrix .hit{fill:transparent;cursor:crosshair}
.g2-matrix .cursor{stroke:var(--a-text-3);stroke-dasharray:2 3;opacity:0;transition:opacity .15s;pointer-events:none}
.g2-matrix .dot{fill:var(--a-elev);stroke:var(--a-text);stroke-width:1.5;pointer-events:none}
.g2-matrix-empty{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);padding:6px 12px;border-radius:8px;background:var(--a-elev);border:1px solid var(--a-line);
  font-size:12px;color:var(--a-text-3);pointer-events:none;white-space:nowrap}
.g2-tip{position:absolute;z-index:3;pointer-events:none;min-width:170px;padding:8px 10px;border-radius:8px;background:var(--g2-tip);color:var(--g2-tip-fg);box-shadow:var(--a-shadow-lg);font-size:12px}
.g2-tip[hidden]{display:none}
.g2-tip-t{font-family:var(--a-mono);font-size:11px;color:var(--g2-tip-mut);margin-bottom:4px}
.g2-tip-r{display:flex;align-items:center;gap:6px;line-height:1.7}
.g2-tip-r i{width:7px;height:7px;border-radius:2px;background:var(--c);flex:none}
.g2-tip-r b{margin-left:auto;padding-left:14px;font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-weight:600}
.g2-tip-n{margin-top:4px;font-size:11px;color:var(--g2-tip-mut)}
/* summary tiles */
.g2-tiles{display:flex;flex-direction:column;gap:14px;min-width:0}
.g2-tiles[hidden],.g2-tile[hidden]{display:none}
.g2-tile .adm-card-h{flex-wrap:nowrap}
.g2-tile-b{display:flex;flex-direction:column;gap:9px;min-width:0}
.g2-tile-b>.empty{padding:16px 8px!important}
.g2-tile-r{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--a-text-3);min-height:22px}
.g2-tile-r b{color:var(--a-text);font-family:var(--a-mono);font-variant-numeric:tabular-nums;font-weight:500;text-align:right}
.g2-tile-r b.warn-t{color:var(--a-orange-fg)}
.g2-tile-r b.bad-t{color:var(--a-red-fg)}
.g2-tile-l{list-style:none;margin:2px 0 0;padding:8px 0 0;border-top:1px solid var(--a-line);display:flex;flex-direction:column;gap:6px}
.g2-tile-l li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--a-text-2);min-width:0}
.g2-tile-l li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--a-orange)}
.g2-dot.bad{background:var(--a-red)}
/* responsive */
@media (max-width:767px){
  .g2 .g2-wd .adm-card-acts{width:100%;flex-wrap:wrap}
  .g2 .g2-wd .adm-search.sm{flex:1;width:auto;max-width:none;height:36px}
  .g2 .g2-wd .adm-card-acts .adm-btn.sm{height:36px}
  .g2-trend-h .adm-seg{margin-left:0}
  .g2-matrix{height:210px}
  .adm-shell .adm-head-acts .adm-btn.sm{height:36px}
}
@media (max-width:640px){
  .g2-trend-h .adm-seg{width:100%}
}
@media (prefers-reduced-motion:reduce){.g2 .g2-skel{animation:none}}
/* ===== /G2 admin ===== */
/* ===== skeletons (skeleton.js, window.XenobexSkeleton): a loading placeholder drawn in the shape of the component that replaces it ==
   .skel = create(kind) wrapper (role=status; its only text is the caller's label, .skel-sr hidden / .skel-cap shown), .skel-fx = the
   aria-hidden drawing, .skel--<kind> = its shape, .skel-b = one shimmering bar. tr.skel-tr = row(columns): one bar per real cell, so a
   loading table keeps its columns (and the phone card layout below). Colours come from the surface's own text token (--fg, which the
   light theme and the admin palette remap), so the bars sit quietly on every card in both themes; the sheen is one slow pass, off for
   prefers-reduced-motion. Sizes follow the real rows: book / trades / market rows 12 px type with 1.5 px padding, KPI 32 / 40 px, QR 148
   px, donut 156 px, form fields 40 px, the matrix fills its 240 px host */
.skel,.skel-tr{--skel-base:rgba(132,142,156,.16);--skel-glow:rgba(160,170,182,.12);--skel-ink:rgba(132,142,156,.34)}
:root[data-theme=light] :is(.skel,.skel-tr){--skel-base:rgba(30,35,41,.07);--skel-glow:rgba(255,255,255,.72);--skel-ink:rgba(30,35,41,.18)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .skel,.skel-tr{--skel-base:color-mix(in srgb,var(--fg) 9%,transparent);--skel-glow:color-mix(in srgb,var(--fg) 7%,transparent);--skel-ink:color-mix(in srgb,var(--fg) 20%,transparent)}
  :root[data-theme=light] :is(.skel,.skel-tr){--skel-base:color-mix(in srgb,var(--fg) 7%,transparent);--skel-glow:rgba(255,255,255,.72);--skel-ink:color-mix(in srgb,var(--fg) 18%,transparent)}
}
.skel{position:relative;display:block;width:100%;min-width:0;max-width:100%;overflow:hidden;text-align:left;animation:skel-in .24s ease-out .06s both}
.skel:only-child{grid-column:1 / -1} /* the one child of a grid host (.stats-row, .arb-tiles): spans the row instead of one cell */
.skel-fx{display:flex;flex-direction:column;min-width:0}
.skel-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.skel-cap{display:block;margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--mut);text-align:center;white-space:normal}
.skel-b{display:block;flex:none;width:var(--skel-w,100%);max-width:100%;height:.72em;border-radius:4px;background-color:var(--skel-base);
  background-image:linear-gradient(100deg,transparent 30%,var(--skel-glow) 50%,transparent 70%);background-size:300% 100%;background-repeat:no-repeat;
  background-position:100% 0;animation:skel-sheen 1.8s ease-in-out infinite;animation-delay:var(--skel-d,0s)}
.skel-pulse{animation:skel-pulse 1.8s ease-in-out infinite}
@keyframes skel-sheen{0%{background-position:100% 0}65%,100%{background-position:0 0}}
@keyframes skel-pulse{50%{opacity:.55}}
@keyframes skel-in{from{opacity:0}}
/* Skullet (2026-11-08: vendor/skullet/skullet.css + skeleton.js paint): the shapes above are its sample; its bones take the same tokens.
   Under [skullet-loading] the sample is invisible (skullet.css), so its own sheen / pulse stop; series SVGs (skullet-own) keep theirs */
.skel,.skel-tr,[data-skel]{--skullet-base:var(--skel-base);--skullet-highlight:var(--skel-glow);--skullet-animation:shimmer;--skullet-speed:slow}
[skullet-loading] :is(.skel-b,.skel-cdl,.skel-candles,.g2-skel){animation:none}
/* skullet.css writes "000000" into empty text tags to measure a line of text; our shapes are blocks, never text, and that text would move a
   table's auto column widths under the skeleton (the bones then sit where the bars no longer are) */
[skullet-loading] :empty::before{content:none!important}
@media (forced-colors:active){[skullet-layer]{forced-color-adjust:none}.skel,.skel-tr,[data-skel]{--skullet-base:GrayText;--skullet-highlight:Canvas}}
/* rows ripple top to bottom in three phases instead of flashing together */
.skel-fx>:nth-child(3n+2),.skel-tr:nth-child(3n+2){--skel-d:.15s}
.skel-fx>:nth-child(3n),.skel-tr:nth-child(3n){--skel-d:.3s}
/* shared shapes: a text line keeps the 1.45 line box of the copy it stands for */
.skel-ln{height:.72em;margin:.365em 0}
.skel-ttl{width:var(--skel-w,36%);height:1em;margin:.2em 0 .7em;border-radius:5px}
.skel-lab{width:var(--skel-w,30%);height:.62em;margin:.2em 0 .55em}
.skel-sub{width:var(--skel-w,32%);height:.72em;margin:.45em 0 0}
.skel-num{width:var(--skel-w,56%);max-width:min(100%,320px);height:1.6em;margin:.25em 0;border-radius:6px}
.skel-r{margin-left:auto;justify-self:end}
.skel-col{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.skel-pill{width:64px;height:22px;border-radius:4px}
.skel-av{width:48px;height:48px;border-radius:50%}
.skel-dot{width:16px;height:16px;border-radius:50%}
.skel-box{width:16px;height:16px;border-radius:4px}
.skel-key{width:8px;height:8px;border-radius:2px}
.skel-tick{width:var(--skel-w,34px);height:7px;border-radius:3px}
.skel-field{height:40px;border-radius:8px}
.u2 .skel-field{height:44px}
.skel-btn{height:40px;margin-top:6px;border-radius:8px}
.skel-compact .skel-field,.skel-compact .skel-btn{height:34px}
.skel-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:22px}
.skel-kv>.skel-ln{flex:0 1 auto;margin:0}
/* card / text / form / tile / account */
.skel--card>.skel-fx{padding:6px 0}
.skel-compact.skel--card>.skel-fx{padding:0}
.skel-fld{display:flex;flex-direction:column;margin-bottom:12px}
.skel-fld>.skel-lab{margin-top:0}
.skel--tile>.skel-fx{gap:9px;padding:2px 0}
.skel--account>.skel-fx{gap:20px;padding:6px 0}
.skel-part{min-width:0}
/* chart: gridlines, candles, price scale (right) and time scale (bottom); fills a chart host (.chart) as an overlay */
.skel--chart{flex:1 1 auto;height:100%;min-height:240px}
.skel-compact.skel--chart{min-height:160px}
.skel--chart>.skel-fx{display:grid;grid-template-columns:minmax(0,1fr) 52px;grid-template-rows:minmax(0,1fr) 24px;height:100%;min-height:inherit;padding:10px 0 0 12px}
@supports selector(:has(*)){ /* over the chart host's own (empty) canvas until the first candles; without :has it stays in the flow */
  .chart:has(>.skel--chart){position:relative}
  .chart>.skel--chart{position:absolute;inset:0;z-index:3;min-height:0;background:var(--card)}
}
.skel-plot{position:relative;min-height:0;border-bottom:1px solid var(--bd);background-image:linear-gradient(var(--bd) 1px,transparent 1px);background-size:100% 25%;opacity:.9}
.skel-candles{position:absolute;inset:8% 6px 6%;display:flex;align-items:flex-end;justify-content:space-between;gap:3px}
.skel-cdl{position:relative;flex:1 1 0;min-width:2px;max-width:11px;height:var(--skel-h,10%);bottom:var(--skel-o,40%);border-radius:1.5px;background:var(--skel-ink)}
.skel-cdl::before{content:"";position:absolute;left:50%;top:-40%;bottom:-40%;width:1px;margin-left:-.5px;background:inherit}
.skel-axis-y{display:flex;flex-direction:column;justify-content:space-around;align-items:flex-end;padding:0 8px}
.skel-axis-y>.skel-tick{width:32px}
.skel-axis-x{display:flex;align-items:center;justify-content:space-around;gap:8px;min-width:0}
/* order book / trades / market list: the .bx .row grid, 12 px type, a faint depth band behind book rows */
.skel--book,.skel--trades,.skel--market-list{font-size:12px;line-height:1.45}
.skel-lv{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:center;padding:1.5px 12px}
.skel-lv>.skel-b{position:relative}
.skel-depth{position:absolute;top:1px;right:0;bottom:1px;width:var(--skel-w,30%);background:var(--skel-base);opacity:.45;pointer-events:none}
.skel-mk{padding-top:4px;padding-bottom:4px}
.skel-mkc{display:flex;align-items:center;gap:6px;min-width:0}
.skel-mkc>.skel-ln{flex:0 1 auto}
.skel-mkc>.skel-dot{width:14px;height:14px}
@media (hover:none) and (pointer:coarse){.skel-mk{padding-top:9px;padding-bottom:9px}}
/* markets overview summary cards (.bxm-sum-list): each placeholder row takes the 36 px .bxm-sum-row grid (20 px coin, name | price | 72 px
   change), so the three rows are as tall as the three markets that replace them in both themes and every width */
.bxm-sum-list>.skel--market-list .skel-mk{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px;gap:8px;height:36px;padding:0}
.bxm-sum-list>.skel--market-list .skel-mkc{gap:8px}
.bxm-sum-list>.skel--market-list .skel-mkc>.skel-dot{width:20px;height:20px}
/* balance (Est. Total Value, Margin Balance): the .bx-kpi figure (32 / 40 px, 26 / 34 px on phones) and its sub lines */
.skel--balance>.skel-fx{padding:2px 0}
.skel--balance .skel-num{height:28px;margin:6px 0;max-width:min(100%,300px)}
.skel--balance .skel-sub{height:10px;margin:5px 0;max-width:min(100%,220px)}
.skel-compact.skel--balance .skel-num{height:20px;margin:4px 0}
@media (max-width:767px){.skel--balance .skel-num{height:24px;margin:5px 0}}
/* donut: the 156 px ring of .g2-donut and a legend */
.skel--donut>.skel-fx{align-items:center;gap:14px;padding:4px 0}
.skel-ringbox{display:flex;justify-content:center;width:100%}
.skel-ring{width:156px;height:156px;border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 24px),#000 calc(100% - 23px));mask:radial-gradient(farthest-side,transparent calc(100% - 24px),#000 calc(100% - 23px))}
.skel-compact .skel-ring{width:120px;height:120px}
.skel-legend{display:flex;flex-direction:column;gap:6px;width:100%}
.skel-keyrow{display:flex;align-items:center;gap:8px;min-width:0;padding:3px 4px}
.skel-keyrow>.skel-ln{flex:0 1 auto;margin:0}
.skel-keyrow>.skel-val{width:44px;margin-left:auto}
/* matrix: the revenue dot-matrix (fills .g2-matrix, 240 / 210 px): value scale left, columns of 8 px cells on a 10 px pitch (the empty
   cells faint, a run from the bottom stronger, --skel-n cells high), time scale below. One element per column: the cells are its
   background (rows) and mask (columns, repeat:round so no cell is cut) */
.skel--matrix{height:100%;min-height:200px}
.skel-compact.skel--matrix{min-height:140px}
.skel--matrix>.skel-fx{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 18px;column-gap:8px;height:100%;min-height:inherit}
.skel-mxy{justify-content:space-between;padding:2px 0}
.skel-mxy>.skel-tick{width:26px}
.skel-mx{display:flex;gap:6px;min-height:0;padding-top:2px}
.skel-mxc{flex:1 1 0;min-width:8px;height:100%;background-repeat:no-repeat;background-position:left bottom;
  background-image:repeating-linear-gradient(to top,var(--skel-ink) 0 8px,transparent 8px 10px),repeating-linear-gradient(to top,var(--skel-base) 0 8px,transparent 8px 10px);
  background-size:100% calc(var(--skel-n,4) * 10px),100% 100%;
  -webkit-mask-image:linear-gradient(to right,#000 8px,transparent 8px);-webkit-mask-size:10px 100%;-webkit-mask-repeat:round;
  mask-image:linear-gradient(to right,#000 8px,transparent 8px);mask-size:10px 100%;mask-repeat:round}
/* summary: KPI tiles in the .stats-row rhythm (180 px minimum, two a row on phones) */
.skel-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.skel-tile{display:flex;flex-direction:column;min-width:0;padding:16px 18px;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
.skel-tile>.skel-num{height:22px;margin:4px 0 2px}
.skel-compact .skel-tile{padding:12px 14px}
@media (max-width:520px){.skel-tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))}.skel-tile{padding:12px 14px}.skel-tile>.skel-num{height:18px}}
/* profile */
.skel-prof{display:flex;align-items:center;gap:14px;min-width:0}
.skel-prof>.skel-av,.skel-prof>.skel-pill{flex:none}
.skel-prof .skel-ttl{margin:.15em 0 .45em}
.skel-prof .skel-sub{margin:0}
.skel-compact .skel-av{width:36px;height:36px}
@media (max-width:400px){.skel-prof>.skel-pill{display:none}}
/* consents: the .consents label.chk rows (13 px, 5 px padding, 44 px touch rows) */
.skel--consents{font-size:13px;line-height:1.45}
.skel-chk{display:flex;align-items:flex-start;gap:6px;padding:5px 0}
.skel-chk>.skel-box{margin-top:2px}
@media (hover:none) and (pointer:coarse){.skel-chk{min-height:44px;align-items:center}.skel-chk>.skel-box{margin-top:0}}
/* QR + deposit address (.addr-box: QR left, details right; stacked and centred at 760 px and below) */
.skel-qrsq{position:relative;flex:none;width:148px;height:148px;border-radius:8px;background:var(--skel-base)}
.skel-compact .skel-qrsq{width:116px;height:116px}
.skel-qf{position:absolute;width:24%;height:24%;border:4px solid var(--skel-ink);border-radius:4px}
.skel-qf::after{content:"";position:absolute;inset:4px;border-radius:2px;background:var(--skel-ink)}
.skel-qf-tl{top:8%;left:8%}.skel-qf-tr{top:8%;right:8%}.skel-qf-bl{bottom:8%;left:8%}
.skel-qcap{width:var(--skel-w,96px);margin:0}
.skel--qr>.skel-fx{align-items:center;gap:8px;padding:4px 0}
.skel-addr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;padding:18px;border-radius:10px;background:var(--bg)}
.u2 .skel-addr{background:none;border:1px solid var(--bx-bd);border-radius:12px;padding:16px}
.skel-qrcol{display:flex;flex-direction:column;align-items:center;gap:8px}
.skel-addrcol>.skel-lab{margin-top:4px}
.skel-code{height:40px;border-radius:6px}
.skel-copy{width:96px;height:32px;margin:8px 0 6px;border-radius:6px}
.skel-addrcol>.skel-kv{margin-top:8px}
@media (max-width:760px){.skel-addr{grid-template-columns:minmax(0,1fr);justify-items:center}.skel-addrcol{width:100%}}
@media (max-width:767px){.u2 .skel-addr{padding:12px}}
/* detail: title + status, then label / value pairs (one column on phones) */
.skel-dh{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-width:0}
.skel-dh>.skel-ttl{flex:0 1 auto;margin:0}
.skel-dh>.skel-pill{flex:none}
.skel-dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px 28px}
/* ticker strip (24h figures) */
.skel-tks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.skel-tk{display:flex;flex-direction:column;gap:6px}
.skel-tk>.skel-lab{width:52px;margin:0}
.skel-tkv{width:72px;height:10px}
.skel-tk:first-child>.skel-tkv{width:96px;height:16px}
@media (max-width:760px){.skel-tks{gap:8px 14px}}
/* table drawn before its tbody exists: header bars + rows on the same column grid (three columns on phones) */
.skel-trow{display:grid;grid-template-columns:repeat(var(--skel-c,5),minmax(0,1fr));gap:16px;align-items:center;padding:9px 8px;border-bottom:1px solid var(--bd)}
.skel-trow>.skel-b{margin:0}
.skel-thead{padding-top:6px;padding-bottom:6px}
@media (max-width:480px){.skel-trow{grid-template-columns:repeat(var(--skel-cm,3),minmax(0,1fr))}.skel-trow>:nth-child(n+4){display:none}}
/* table rows (row()): a bar per cell, centred on the cell's own line box so the row is as tall as a data row; no hover, the label is read
   once per tbody */
tr.skel-tr{pointer-events:none}
tr.skel-tr>td.skel-td{vertical-align:middle}
.skel-td>.skel-b{display:inline-block;vertical-align:middle;width:var(--skel-w,64%);min-width:24px;height:.75em;margin:0}
.skel-tr.skel-compact>.skel-td>.skel-b{height:.62em}
.skel-tr~.skel-tr .skel-sr{display:none}
/* markets overview table: a market row is two 18 px lines (coin over name, price over ≈ USD) in 16 px padding; its placeholder row is
   one 36 px line box, so it is as tall */
.bxm-tbl tr.skel-tr>td.skel-td{line-height:36px}
/* phone / tablet card tables (.tbl[data-cards], [data-cards=wide]): the skeleton row is a card too, each cell a label bar over a value
   bar; outranks the lone-action / blank-cell rules there (a skeleton cell has no data-th) */
@media (max-width:800px){
  .tbl[data-cards]>table>tbody>tr.skel-tr[data-skel]>td.skel-td{display:block;flex:1 1 calc(25% - 10.5px);margin-left:0;align-self:auto}
  .tbl[data-cards]>table>tbody>tr.skel-tr[data-skel]>td.skel-td:not(:first-child){display:block;flex:1 1 calc(25% - 10.5px);margin-left:0;align-self:auto}
  .tbl[data-cards]>table>tbody>tr.skel-tr[data-skel]>td.skel-td:first-child{flex-basis:100%}
  .tbl[data-cards]>table>tbody>tr.skel-tr[data-skel]>td.skel-td:not(:first-child)::before{content:"";display:block;width:46%;height:8px;margin:2px 0 7px;border-radius:4px;background:var(--skel-base)}
  .tbl[data-cards]>table>tbody>tr.skel-tr[data-skel]>td.skel-td>.skel-b{display:block}
}
@media (max-width:640px){
  .tbl[data-cards]>table>tbody>tr.skel-tr[data-skel]>td.skel-td:not(:first-child){flex-basis:calc(50% - 7px)}
}
@media (min-width:801px) and (max-width:1180px){
  .tbl[data-cards=wide]>table>tbody>tr.skel-tr[data-skel]>td.skel-td:not(:first-child){display:block;flex:1 1 calc(16.66% - 11.7px);margin-left:0;align-self:auto}
  .tbl[data-cards=wide]>table>tbody>tr.skel-tr[data-skel]>td.skel-td:not(:first-child)::before{content:"";display:block;width:46%;height:8px;margin:2px 0 7px;border-radius:4px;background:var(--skel-base)}
  .tbl[data-cards=wide]>table>tbody>tr.skel-tr[data-skel]>td.skel-td>.skel-b{display:block}
}
@media (prefers-reduced-motion:reduce){
  .skel{animation:none}
  .skel-b{animation:none;background-image:none}
  .skel-pulse{animation:none}
}
@media (forced-colors:active){
  .skel-b,.skel-cdl,.skel-mxc,.skel-depth,.skel-qrsq,.skel-qf::after{forced-color-adjust:none;background:GrayText}
  .skel-depth{opacity:.4}
  .skel-qf{forced-color-adjust:none;border-color:Canvas}
}
/* ===== /skeletons ===== */

/* depth / line chart skeletons (skeleton.js K.depth, K.line) — a snippet for web/style.css, not loaded by itself.
   Both roots carry skel--chart, so the chart skeleton's layout, gridlines, scales, sheen, pulse and reduced-motion rules already apply,
   and the SVG series take their colours inline from --skel-base (area) / --skel-ink (outline). Without this snippet they work as they
   are; it only adds the two refinements below.
   Merge: (1) after the chart skeleton rules (after `.skel-axis-x{…}`, before the order book block);
          (2) the two lines inside the skeletons' `@media (forced-colors:active){…}` block at the end of the skeleton section. */

/* (1) the arbitrage P&L chart host (.arb-chart): an opaque overlay, as .chart>.skel--chart already is for the trade chart — on a period
   switch it lies over the previous period's line and figures, and before the first answer over the library's empty frame. Its colour is
   the chart's own surface (app.js CH_PAL[theme].bg, the layout background of chartLook), not --card: the admin shell remaps --card,
   the chart keeps CH.bg, so the surface does not change colour when the line replaces the skeleton */
.arb-chart>.skel--chart{background:#161a1e}
:root[data-theme=light] .arb-chart>.skel--chart{background:#fff}

/* (2) high contrast: the series become GrayText like the bars (.skel-b), the area lighter like the book's depth band (.skel-depth) */
@media (forced-colors:active){
  .skel-gfx{forced-color-adjust:none;--skel-base:GrayText;--skel-ink:GrayText}
  .skel-gfx-a{fill-opacity:.4}
}

/* ===== reference-price chart (10-28, app.js refInit): the Reference | Xenobex trades switch and the reference price's state, one row
   between the chart toolbar and the O/H/L/C line (wraps on a phone instead of widening the pane), and the chart's note when the reference
   has no history or no chart (under the loading skeleton, z-index 3). Theme colours only; nothing moves, so reduced motion is unaffected */
.refbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0;padding:4px 12px 0;font-size:12px}
.refbar[hidden]{display:none}
.refsrc{flex:none;flex-wrap:nowrap}
.refsrc button{white-space:nowrap}
.refbar :focus-visible{outline-offset:-2px}
.refst{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-width:0;color:var(--mut);font-variant-numeric:tabular-nums}
.refst>*{white-space:nowrap;min-width:0}
.refst>[hidden]{display:none}
.ref-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mut)}
.refst[data-st=live] .ref-dot{background:var(--up)}
.refst[data-st=live] .ref-word{color:var(--up)}
.refst[data-st=stale] .ref-dot{background:var(--warn)}
.refst[data-st=stale] .ref-word{color:var(--warn)}
.refst[data-st=stale] .ref-px{color:var(--mut)}
.ref-px{color:var(--fg);font-weight:600}
.chart>.ref-note{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;pointer-events:none}
.chart>.ref-note p{margin:0;max-width:34em;padding:8px 12px;border-radius:6px;background:var(--card);color:var(--mut);font-size:12.5px;line-height:1.5}
.chart>.ref-note button{pointer-events:auto;border:1px solid var(--bd);border-radius:6px;background:var(--card);color:var(--fg)}
@media (max-width:400px){.refbar{gap:4px 8px;padding-left:8px;padding-right:8px}}
@media (hover:none) and (pointer:coarse){.chart>.ref-note button{min-height:36px;padding:0 12px}}
@media (forced-colors:active){.ref-dot{forced-color-adjust:none;background:CanvasText}}
/* ===== /reference-price chart ===== */
/* ===== the header's price source and the book's mid price (10-28, app.js pxHead / obMidPaint / obLastPaint) =====
   header: the price is named under it ("Reference · $…" / "Last trade · $…"); a stale reference price is muted and named so.
   book: the Mid price row = value · arrow · spread (spot) or Mark (futures) on the first line, the "Mid price" caption and Xenobex's last
   trade on the second. Both lines are always there (nothing jumps when a value comes or goes); a long text is cut, never widens the pane */
.bx-head .tk.big .tk-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-head .tk.big .tk-sub span{font-size:inherit;font-weight:inherit}
.tk-src[data-k=ref]{color:var(--acc)}
.tk-src[data-k=stale]{color:var(--warn)}
.bx-head .tk.big b.stale{color:var(--mut)}
.bx .midp{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:6px;row-gap:1px}
.bx .midp>small{margin-left:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:14px}
.bx .midp>#spread,.bx .midp>.pf-midm{grid-column:3;grid-row:1;text-align:right}
.bx .midp>.mid-sub{grid-column:1 / -1;grid-row:2;display:flex;justify-content:space-between;gap:8px}
.bx .midp .mid-k{flex:none}
.bx .midp .mid-lt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.bx .midp b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx .midp b.mid-na{font-size:13px;font-weight:500;color:var(--mut)}
.bx .midp[aria-disabled=true]{cursor:default}
.bx .midp[aria-disabled=true]:hover{background:none}
/* ===== external market activity (10-28, app.js xInit / xPaint): the trades pane's source switch (Binance Spot | Xenobex) with the
   source's state on one wrapping row, the venue's own 24 h figures (Binance Spot's, never Xenobex's) in a 3-column grid, its tape in the
   pane's own rows. A long word is cut, never widens the pane; stale = muted. The header names its own 24 h figures Xenobex's (.tk-own;
   phones: .tk-own-m under the change). Theme colours only; nothing moves, so reduced motion is unaffected */
.xbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0;padding:4px 8px 2px;font-size:12px}
.xsrc{flex:none;flex-wrap:nowrap}
.xsrc button{white-space:nowrap}
.xbar :focus-visible{outline-offset:-2px}
.xst{display:flex;align-items:center;flex:1 1 auto;justify-content:flex-end;gap:2px 6px;min-width:0;color:var(--mut);font-size:11.5px;font-variant-numeric:tabular-nums}
.xst>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xst>.ref-dot{flex:none}
.xst>[hidden]{display:none}
.xst[data-st=live] .ref-dot{background:var(--up)}
.xst[data-st=live] .xst-w{color:var(--up)}
.xst[data-st=stale] .ref-dot{background:var(--warn)}
.xst[data-st=stale] .xst-w,.xst .xst-n{color:var(--warn)}
.xst[data-st=own] .xst-n{color:var(--mut)}
.xstats{padding:2px 8px 6px;border-bottom:1px solid var(--bd);font-size:11px;min-width:0}
.xcap{display:flex;flex-wrap:wrap;gap:0 6px;min-width:0;color:var(--mut);line-height:16px}
.xcap>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xcap b{color:var(--fg);font-weight:600}
.xcap .xcap-u{color:var(--acc)}
.xgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;margin:4px 0 0}
.xgrid>div{min-width:0}
.xgrid dt{color:var(--mut);font-size:10.5px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xgrid dd{margin:0;color:var(--fg);font-size:12px;font-weight:500;line-height:16px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xgrid dd.up{color:var(--rise-t)}.xgrid dd.dn{color:var(--fall-t)}
.xstats[data-st=stale] .xgrid dd{color:var(--mut)}
.xtape.xstale>.row>span{color:var(--mut)}
.xtape>.xmsg{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;font-size:12.5px;line-height:1.5}
.xtape>.xmsg p{margin:0;max-width:30em}
.xtape>.xmsg button{border:1px solid var(--bd);border-radius:6px;background:var(--card);color:var(--fg)}
.bx-head .tk-own{display:inline-block;margin-right:3px;padding:0 3px;border:1px solid var(--bd);border-radius:3px;color:var(--fg);font-size:9.5px;font-weight:600;line-height:12px;vertical-align:1px}
.bx-head .tk-own-m{display:none}
@media (max-width:767px){
  #view .mob-page [data-mob-head]>.tk:not(.big)>span.tk-own-m{display:block;color:var(--mut);font-size:10px;line-height:13px} /* over the figures' 12 px */
  #view .mob-page .xsrc button{min-height:44px}
  .xbar{padding-left:12px;padding-right:12px}
  .xstats{padding-left:12px;padding-right:12px}
}
@media (max-width:360px){.xbar{gap:2px 8px}.xgrid{gap:4px 6px}}
@media (hover:none) and (pointer:coarse){.xsrc button{min-height:36px}.xtape>.xmsg button{min-height:36px;padding:0 12px}}
@media (forced-colors:active){.bx-head .tk-own{forced-color-adjust:none;border-color:CanvasText;color:CanvasText}}
/* ===== /external market activity ===== */

/* An unresolved order stays visible until the same original request is confirmed. */
.order-intent-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 16px;border-bottom:1px solid var(--bd);background:var(--sys-warn-bg,var(--card));color:var(--fg);font-size:13px}
.order-intent-bar>span{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.order-intent-bar>button,.order-intent-bar>a{flex:none}
.form-err>.ghost{margin:8px 0 0 8px}

/* Mobile prices keep their full numeric value, including small-price tick digits. */
@media (max-width:767px){
  #view .mob-page [data-mob-head]{grid-template-columns:repeat(3,minmax(0,1fr))}
  #view .mob-page [data-mob-head]>.tk.big{grid-column:1 / 3;max-width:100%}
  #view .mob-page [data-mob-head]>.tk.big b{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
  #view .mob-page [data-mob-head]>.tk.big .tk-sub{display:flex;flex-wrap:wrap;max-width:100%;overflow:visible;text-overflow:clip;white-space:normal;column-gap:3px}
  #view .mob-page [data-mob-head]>.tk.big .tk-sub>span{min-width:0;max-width:100%;overflow-wrap:anywhere}
  #view .mob-page [data-mob-head]>.tk:has(#tk-chg),
  #view .mob-page[data-mob-kind=perp] [data-mob-head]>.tk:has(#tk-chg){grid-column:3;grid-row:auto}
}
/* Nine intervals fit one phone row at >=32px; chart modes stay on their own row. */
@media (max-width:400px){
  #view .mob-page .chartbar{column-gap:0;row-gap:4px;overflow:visible;padding-left:8px;padding-right:8px}
  #view .mob-page .chartbar #ivs{display:grid;grid-template-columns:repeat(10,minmax(28px,1fr));gap:0;flex:1 1 100%;width:100%;min-width:0}
  #view .mob-page .chartbar #ivs button{width:100%;min-width:32px;min-height:44px;padding-left:0;padding-right:0}
  #view .mob-page .chartbar #ivs .iv-all{margin-left:0}
  #view .mob-page .chartbar #ivs .iv-all::before{left:0}
  #view .mob-page .chartbar #chartmode{flex:none;margin-left:auto}
}

/* ===== brand logo (2026-11-02): Xenobex wordmark images — dark / light by theme, the X mark on very narrow screens; the text name is
   kept for screen readers only ===== */
.top .brand{display:inline-flex;align-items:center;gap:0}
.top .brand .brand-logo{height:30px;width:auto;display:block}
.top .brand .logo-light,.top .brand .logo-mark{display:none}
html[data-theme=light] .top .brand .logo-dark{display:none}
html[data-theme=light] .top .brand .logo-light{display:block}
.top .brand .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:767px){.top .brand .brand-logo{height:24px}}
/* 2026-11-05 ops decision: the header shows the full logo at every width (never the small mark) — on the smallest phones the header's Deposit button goes instead (it is in the ☰ menu) */
@media (max-width:359px){#h-deposit{display:none!important}}
/* 2026-11-08 click-test (the Deposit button lay over "Xenobe…" at 360–430 px in en / ru): the logo keeps its full width, and up to 440 px
   the header's Deposit is its icon alone — the name stays for screen readers (and Deposit is in the ☰ menu) */
.top .brand{flex:none}
@media (max-width:440px){
  .hdep{position:relative;width:32px;padding:0;justify-content:center}
  .hdep .ic{display:block}
  .hdep>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- chart tools (2026-11-05): more intervals, indicators, drawings, settings ---------- */
.bx-chart{position:relative}
#chart{position:relative}
.ivs .iv-more{min-width:28px}
.ctools{gap:0 !important}
.ctools button{display:inline-flex;align-items:center;gap:4px}
.ctools .ct-ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ctools button.on{color:var(--acc);background:var(--in)}
.cpop{position:absolute;z-index:30;background:var(--pop-bg,var(--card));border:1px solid var(--bd);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.28);padding:6px}
.iv-menu{display:grid;grid-template-columns:repeat(3,52px);gap:2px}
.iv-menu[hidden],.cpanel[hidden]{display:none}
.iv-menu button{background:transparent;border:0;color:var(--mut);padding:6px 0;border-radius:4px;font-size:12.5px}
.iv-menu button:hover{color:var(--fg);background:var(--in)}
.iv-menu button.on{color:var(--acc);background:var(--in)}
.cpanel{width:300px;max-width:calc(100% - 8px);padding:10px 12px;font-size:12.5px}
.cp-h{font-weight:600;font-size:13px;margin:0 0 8px}
.cp-row{display:flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.cp-row input[type=checkbox]{margin:0;accent-color:var(--acc)}
.cp-k{flex:1;color:var(--fg)}
.cp-nums{display:flex;gap:4px}
.cp-num{width:52px;height:26px;padding:0 6px;border:1px solid var(--bd);border-radius:4px;background:var(--in);color:var(--fg);font-size:12px}
.cp-segrow{cursor:default;flex-wrap:wrap}
.cp-seg{display:flex;gap:2px;background:var(--in);border-radius:5px;padding:2px}
.cp-seg button{background:transparent;border:0;color:var(--mut);padding:4px 8px;border-radius:4px;font-size:12px}
.cp-seg button.on{background:var(--card);color:var(--acc)}
.cp-foot{display:flex;justify-content:flex-end;margin-top:8px}
.dr-layer{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:hidden;width:100%;height:100%} /* until drRender sizes it to the price pane */
.dr-layer.drawing{pointer-events:auto;cursor:crosshair}
.dr-tx{font:12px/1 system-ui,sans-serif;stroke-width:3px;paint-order:stroke;stroke-linejoin:round}
@media (max-width:760px){.ctools .ct-lbl{display:none}.cpanel{width:280px}}
/* futures symbol list: Crypto | Stocks (046) */
.pf-mcat{display:flex;gap:4px;padding:6px 10px 2px}
.pf-mcat[hidden]{display:none}
.pf-mcat button{background:transparent;border:0;color:var(--mut);padding:4px 10px;border-radius:4px;font-size:12.5px}
.pf-mcat button.on{color:var(--acc);background:var(--in)}
/* language menu (2026-11-05) */
.lang-btn{display:inline-flex;align-items:center;gap:4px}
.lang-btn .lang-ic{width:16px;height:16px}
.lang-btn .lang-code{font-size:12px;font-weight:600}
.lang-menu{position:fixed;z-index:200;min-width:168px;max-height:70vh;overflow:auto;background:var(--pop-bg,var(--card));border:1px solid var(--bd);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.3);padding:6px;display:flex;flex-direction:column}
.lang-menu button{background:transparent;border:0;color:var(--fg);text-align:left;padding:8px 12px;border-radius:5px;font-size:13px}
.lang-menu button:hover{background:var(--in)}
.lang-menu button.on{color:var(--acc);font-weight:600}
.lang-seg{flex-wrap:wrap}
/* ---------- copy trading (2026-11-05) ---------- */
.cy{max-width:1200px;margin:0 auto;padding:24px 16px 48px}
.cy-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cy-hero h1,.cy-h1{margin:0 0 6px;font-size:28px}
.cy-hero p{margin:0;max-width:640px}
.cy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px}
.cy-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--fg);text-decoration:none;transition:border-color .15s}
.cy-card:hover{border-color:var(--acc)}
.cy-card-h,.cy-prof,.cy-mine-h{display:flex;align-items:center;gap:10px}
.cy-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--pri-grad,var(--acc))}
.cy-prof .cy-av{width:64px;height:64px;font-size:26px}
.cy-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.cy-who h1{margin:0;font-size:24px}
.cy-who p{margin:2px 0}
.cy-roi{display:flex;flex-direction:column}
.cy-roi strong{font-size:26px;line-height:1.2}
.cy-spark{width:100%;height:40px}
.cy-spark polyline{fill:none;stroke-width:1.6}
.cy-spark polyline.up{stroke:var(--rise)}
.cy-spark polyline.dn{stroke:var(--fall)}
.cy-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;font-size:12.5px}
.cy-kv>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cy-kv b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cy-go{align-self:stretch;text-align:center}
.cy-note{margin-top:18px}
.cy-back{display:inline-block;margin-bottom:12px;text-decoration:none}
.cy-prof{margin-bottom:16px}
.cy-prof-acts{margin-left:auto}
.cy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.cy-stat{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
.cy-stat b{font-size:16px}
.cy-chart{height:280px;position:relative}
.cy-mine{margin-bottom:14px}
.cy-mine-h{padding:14px 16px 0}
.cy-mine .cy-kv{padding:12px 16px}
.cy-sp{flex:1}
.cy-err{color:var(--dn);padding:0 16px}
/* 2026-11-07 copy risk: settings / pause / stop side by side (wrapping under the name on a phone), the paused note, the two % fields */
.cy-mine-h{flex-wrap:wrap}
.cy-mine-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cy-note{color:var(--warn);padding:0 16px;margin:0 0 8px}
.dlg .cy-risk{gap:10px;margin-top:4px}
@media (max-width:479px){.cy-mine-acts{width:100%;justify-content:stretch}.cy-mine-acts .bx-btn{flex:1}}
@media (max-width:640px){.cy-prof{flex-wrap:wrap}.cy-prof-acts{margin-left:0;width:100%}.cy-prof-acts .bx-btn{width:100%}}
/* ---------- home (2026-11-05) ---------- */
.hm{max-width:1200px;margin:0 auto;padding:32px 16px 56px}
.hm-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center;padding:24px 0 40px}
.hm-hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.1;margin:0 0 16px;letter-spacing:-.02em}
.hm-grad{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-sub{font-size:16px;color:var(--mut);max-width:560px;margin:0 0 24px;line-height:1.6}
.hm-cta{display:flex;gap:10px;flex-wrap:wrap}
.hm-cta .btn{min-height:44px;padding:0 22px;display:inline-flex;align-items:center;font-size:15px}
.hm-board{border:1px solid var(--bd);border-radius:14px;background:var(--card);padding:10px}
.hm-row{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr .8fr;gap:8px;align-items:center;padding:10px 10px;border-radius:8px;color:var(--fg);text-decoration:none;font-variant-numeric:tabular-nums}
a.hm-row:hover{background:var(--in)}
.hm-row .r{text-align:right}
.hm-rh{padding-top:4px;padding-bottom:4px}
.hm-allm{display:block;text-align:center;padding:10px;color:var(--acc);text-decoration:none;font-size:13px}
.hm-sec{padding:28px 0}
.hm-sec h2{font-size:24px;margin:0 0 16px}
.hm-sec-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hm-sec-h h2{margin:0}
.hm-prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.hm-prod{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s}
.hm-prod:hover{border-color:var(--acc);transform:translateY(-2px)}
.hm-prod h3{margin:4px 0 0;font-size:17px}
.hm-prod p{margin:0;font-size:13.5px;line-height:1.55;flex:1}
.hm-pic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc)}
.hm-pic .ic{width:22px;height:22px}
.hm-more{color:var(--acc);font-size:13px;font-weight:600}
.hm-leads{margin-top:0}
.hm-join{text-align:center;padding:40px 16px;margin-top:16px;border-radius:16px;background:linear-gradient(135deg,var(--acc-soft),transparent);border:1px solid var(--bd)}
.hm-join h2{margin:0 0 8px}
.hm-join p{margin:0 0 18px}
@media (max-width:860px){.hm-hero{grid-template-columns:1fr;gap:20px;padding-top:8px}}
.cy-img{object-fit:cover;background:none;padding:0;box-shadow:0 0 0 2px var(--bd)}
/* phones: the language menu is the globe alone (its code takes the logo's room) */
@media (max-width:480px){.lang-btn .lang-code{display:none}.lang-btn{padding-left:6px;padding-right:6px}}
/* phones (2026-11-05): the header keeps Log In only — Sign Up is one tap away on the login page ("Don't have an account? Sign Up") */
/* 2026-11-07 audit (low): phones show Sign Up next to Log In (compact) — only the narrowest screens keep Log In alone */
@media (max-width:767px){#guest-acts .hbtn{height:30px;padding:0 10px;font-size:13px}}
/* 2026-11-07 regression check: below 480 px the header keeps Log In alone (Sign Up overflowed 360–389 px, and 390 px in longer languages); Sign Up
   is in the burger (#nav-mob-guest) */
@media (max-width:479px){#guest-acts .hbtn.primary{display:none}#guest-acts .hbtn:not(.primary){background:var(--bx-pri);color:var(--bx-pri-fg)}}
.cy-spark polyline{vector-effect:non-scaling-stroke}
/* chart panel rows: a fixed grid — the site's own label / input rules (phones: full-width fields, 44 px targets) must not reach it */
.cpanel .cp-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;column-gap:8px;text-align:left;margin:0;padding:2px 0;min-height:34px}
.cpanel .cp-row .cp-k{text-align:left;justify-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpanel .cp-row input[type=checkbox]{width:18px;height:18px;min-width:0;min-height:0;margin:0;padding:0}
.cpanel .cp-nums{display:flex;gap:4px;justify-self:end}
.cpanel .cp-num{width:48px!important;min-width:0!important;max-width:48px;height:30px!important;min-height:0!important;padding:0 4px!important;text-align:center;flex:none}
.cpanel .cp-segrow{grid-template-columns:minmax(0,1fr);row-gap:6px}
.cpanel .cp-seg{flex-wrap:wrap}
@media (max-width:760px){.cpanel{width:calc(100% - 16px)}}
@media (max-width:640px){.cy .bxm-bar .bx-tabs{gap:14px;overflow-x:auto;scrollbar-width:none;max-width:100%}.cy .bxm-bar .bx-tabs::-webkit-scrollbar{display:none}.cy .bx-tab{font-size:14px;white-space:nowrap;flex:none}}
/* header: no connection dot (2026-11-05 ops decision — the element stays for app.js setDot) */
#ws-dot{display:none!important}
/* copy trading: positions as cards, closed trades as rows (2026-11-05) */
.cy-plist{display:flex;flex-direction:column;gap:10px;padding:4px 16px 16px}
.cy-pos{border:1px solid var(--bd);border-radius:10px;padding:12px 14px;background:var(--in)}
.cy-pos-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-width:0}
.cy-pos-sym{font-size:15px;white-space:nowrap}
.cy-side{font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap}
.cy-side.long{color:var(--rise);background:var(--rise-soft)}
.cy-side.short{color:var(--fall);background:var(--fall-soft)}
.cy-side.sm{font-size:11px;padding:1px 6px;margin-left:6px}
.cy-pos-roe{margin-left:auto;font-weight:700;font-size:15px}
.cy-pos-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px 12px}
.cy-pkv{display:flex;flex-direction:column;gap:3px;min-width:0}
.cy-pkv span{font-size:12px}
.cy-pkv b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cy-hlist{display:flex;flex-direction:column;padding:0 16px 8px}
.cy-hrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd)}
.cy-hrow:last-child{border-bottom:0}
.cy-hl,.cy-hr{display:flex;flex-direction:column;gap:4px;min-width:0}
.cy-hr{align-items:flex-end;text-align:right}
.cy-hr b{font-variant-numeric:tabular-nums;white-space:nowrap}
.cy-mine-pos .cy-plist{padding-top:0}
.bx-card>.bx-empty{margin:0 16px 16px}
.bx-card>.cy-plist,.bx-card>.cy-hlist{padding:0}
.bx-card>.bx-empty{margin:0}
.cy-mine-pos{padding:0 16px 16px}
/* ===== v15 (2026-11-06 ops request) ===== */
/* futures, desktop: the chart fits the first screen with the positions under it (Bitget layout) — the order column runs down beside both */
@media (min-width:1181px){
  .pf .pf-grid{grid-template-areas:"chart book order" "bottom bottom order";grid-template-rows:auto 1fr}
  .pf .pf-grid>.bx-chart{min-height:0;height:clamp(380px,calc(100vh - 372px),780px)}
  .pf .pf-grid>.bx-chart .chart{min-height:0}
  .pf .pf-grid>.bx-bottom{min-height:250px}
}
/* 2026-11-08 click-test: at 1181–1600 px a futures bottom table can be wider than its panel (an isolated position: 1221 px in 1103) —
   its last column (Position TP/SL · TP/SL · Cancel) stays at the right edge while the others scroll under it */
@media (min-width:1181px){
  .pf .bx-bottom .tbl>table>thead>tr>th:last-child,.pf .bx-bottom .tbl>table>tbody>tr>td:last-child:not([colspan]){position:sticky;right:0;z-index:1;background:var(--card)}
  /* its left edge fades the columns passing under it; its right one covers the panel's 12 px padding (a cell's box-shadow is painted under them) */
  .pf .bx-bottom .tbl>table>thead>tr>th:last-child::before,.pf .bx-bottom .tbl>table>tbody>tr>td:last-child:not([colspan])::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:8px;background:linear-gradient(to right,transparent,var(--card));pointer-events:none}
  .pf .bx-bottom .tbl>table>thead>tr>th:last-child::after,.pf .bx-bottom .tbl>table>tbody>tr>td:last-child:not([colspan])::after{content:'';position:absolute;top:0;bottom:0;left:100%;width:12px;background:var(--card);pointer-events:none}
}
/* lines you act on in the chart: a chip per position / order / TP / SL at its price, a dashed line while one is dragged */
.tl-layer{position:absolute;left:0;top:0;right:0;bottom:0;z-index:3;pointer-events:none;overflow:hidden}
.tl-chip{position:absolute;left:8px;transform:translateY(-50%);display:inline-flex;align-items:stretch;height:22px;border:1px solid var(--bd);border-radius:4px;background:var(--card);
  font-size:11.5px;line-height:20px;white-space:nowrap;pointer-events:auto;user-select:none;-webkit-user-select:none;box-shadow:0 1px 6px rgba(0,0,0,.35);overflow:hidden}
.tl-chip[hidden]{display:none}
.dr-on .tl-chip{pointer-events:none} /* a drawing tool is on (app.js drMode): a tap on a chip draws instead of opening it */
.tl-chip.long,.tl-chip.buy{border-color:var(--rise)}.tl-chip.short,.tl-chip.sell{border-color:var(--fall)}
.tl-chip.is-tp{border-color:#2ebd85}.tl-chip.is-sl{border-color:#c74cf0}
.tl-main{padding:0 8px;color:var(--fg);font-variant-numeric:tabular-nums}
.tl-main b{font-weight:600;margin-left:2px}
.tl-chip.long .tl-main>span:first-child,.tl-chip.buy .tl-main{color:var(--rise-t)}.tl-chip.short .tl-main>span:first-child,.tl-chip.sell .tl-main{color:var(--fall-t)}
.tl-chip.is-tp .tl-main{color:#2ebd85}.tl-chip.is-sl .tl-main{color:#c74cf0}
.tl-b{border:0;border-left:1px solid var(--bd);border-radius:0;background:transparent;color:var(--fg);padding:0 7px;font-size:11px;font-weight:600;cursor:pointer;height:auto;min-height:0;min-width:0;line-height:20px}
.tl-b:hover{background:var(--in)}
.tl-b.tl-tp{color:#2ebd85;cursor:ns-resize;touch-action:none}.tl-b.tl-sl{color:#c74cf0;cursor:ns-resize;touch-action:none}
.tl-b.tl-x{font-size:14px;font-weight:400;color:var(--mut)}.tl-b.tl-x:hover{color:var(--fg)}
.tl-b.tl-ot.on{color:var(--acc)}
.tl-grab{cursor:ns-resize;touch-action:none}
.tl-ghost{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--acc);pointer-events:none}
.tl-ghost[hidden]{display:none}
.tl-gl{position:absolute;left:8px;top:0;transform:translateY(-50%);padding:2px 8px;border-radius:4px;background:var(--acc);color:#fff;font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-ghost.is-tp{border-color:#2ebd85}.tl-ghost.is-tp .tl-gl{background:#2ebd85}
.tl-ghost.is-sl{border-color:#c74cf0}.tl-ghost.is-sl .tl-gl{background:#c74cf0}
.tl-ghost.buy{border-color:var(--rise)}.tl-ghost.buy .tl-gl{background:var(--rise)}.tl-ghost.sell{border-color:var(--fall)}.tl-ghost.sell .tl-gl{background:var(--fall)}
/* TP/SL dialog: trigger price ⇄ ROI %, slider, the trigger and est. PnL */
.modal-box:has(.tp-leg){width:min(520px,100%)}
.tp-head{margin:-6px 0 10px;font-size:14px}
.tp-leg{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.tp-lh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tp-lh b{flex:1;font-size:14px}.is-tp .tp-lh b{color:var(--rise-t)}.is-sl .tp-lh b{color:var(--fall-t)}
.tp-basis{width:auto;height:28px;padding:0 8px;font-size:12px}
.tp-del{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:var(--mut);cursor:pointer}
.tp-del:hover{color:var(--fg)}
.tp-row{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:8px}
.tp-slide{margin:10px 0 2px}
.tp-rg{width:100%;height:18px;padding:0;border:0;background:none;accent-color:var(--acc)}
.tp-ticks{display:flex;justify-content:space-between;margin-top:2px}
.tp-ticks button{padding:2px 0;border:0;background:none;color:var(--mut);font-size:11px;cursor:pointer;min-height:0;height:auto}
.tp-ticks button:hover{color:var(--fg)}
.tp-hint{min-height:18px;margin-top:6px}
/* PnL share card */
.modal-box:has(.sh-wrap){width:min(720px,100%)}
.sh-wrap{overflow:hidden;border-radius:12px;background:#0b0d1a}
.sh-cv{display:block;width:100%;height:auto}
.sh-opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:4px 0 14px}
.sh-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
/* 2026-11-07 audit (low): the nine share actions in one row on a wide dialog (the second row hid under the close bar at 1024×768) */
@media (min-width:600px){.sh-acts{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}.sh-act{font-size:11.5px;text-align:center}}
/* short screens (height ≤ 820): the TP/SL dialog fits above its buttons (info box in two columns, tighter legs); the share dialog narrower */
@media (min-width:600px) and (max-height:820px){
  .modal-box:has(.tp-leg){padding-top:18px;padding-bottom:12px}
  .modal-box:has(.tp-leg) .kv{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:6px 14px;padding:10px 14px;margin-bottom:8px}
  .modal-box:has(.tp-leg) .tp-head{margin-bottom:6px}
  .modal-box:has(.tp-leg) .tp-leg{margin-top:8px;padding-top:8px}
  .modal-box:has(.tp-leg) .tp-lh{margin-bottom:6px}
  .modal-box:has(.tp-leg) .tp-slide{margin:6px 0 0}
  .modal-box:has(.sh-wrap){width:min(620px,100%)}
}
.sh-act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;border:0;background:none;color:var(--fg);font-size:12px;cursor:pointer;height:auto;min-height:0}
.sh-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--in);color:var(--fg);font-size:16px}
.sh-ic b{font-weight:800}
.sh-act:hover .sh-ic{background:var(--acc);color:#fff}
.sh-ic .ic{width:18px;height:18px;vertical-align:0}
.pf-psn{display:inline-flex;align-items:center;gap:2px}
.pf .bx-bottom button.pf-share,.pf-share{display:inline-grid;place-items:center;width:24px;height:24px;min-width:0;min-height:0;padding:0;border:0;background:none;color:var(--mut);cursor:pointer}
.pf-share:hover{color:var(--acc)}
.pf-share .ic{width:14px;height:14px;vertical-align:0}

/* 2026-11-07 (mobile audit): finger-sized chart chips on touch screens */
@media (hover:none){.tl-chip{height:32px;font-size:12px}.tl-b{padding:0 11px;font-size:12px}.tl-main{padding:0 9px}.tl-ghost span{font-size:12px}}

/* 2026-11-07 audit (medium): the API key table is wider than its card on every PC width — status and actions stay in view (pinned to the right
   edge of the scrolling table), permission badges wrap, long cells break */
/* 2026-11-08 click-test (low): the pinned status + actions hid IP allow-list / expiry at 1024 in every language and Expires / Last Used (dates cut
   "06.02.202") in ru up to 1920. On PC widths the table now shows only when it fits its card; when it does not (app.js pageApiKeys sets
   data-fit), one labelled card per key — the F14 phone cards (≤800 px, .tbl[data-cards]) — so nothing hides under a pinned column */
@media (min-width:801px){   /* regression check: 768–800 is the shared card layout */
  .apik-tbl:not([data-fit]) .apik-perms{display:flex;flex-wrap:wrap;gap:4px;max-width:220px}
  .apik-tbl td{vertical-align:middle}
  .apik-tbl[data-fit]{overflow:visible;background:none}
  .apik-tbl[data-fit]>table,.apik-tbl[data-fit]>table>tbody{display:block}
  .apik-tbl[data-fit]>table>thead{display:none}
  .apik-tbl[data-fit]>table>tbody>tr{display:flex;flex-wrap:wrap;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--bd)}
  .apik-tbl[data-fit]>table>tbody>tr:last-child{border-bottom:0}
  .apik-tbl[data-fit]>table>tbody>tr>td{display:block;flex:1 1 calc(25% - 10.5px);max-width:100%;padding:0;border:0;background:none;text-align:left;white-space:normal;overflow-wrap:break-word}
  .apik-tbl[data-fit]>table>tbody>tr>td[data-wide]{flex-basis:calc(50% - 7px)}
  .apik-tbl[data-fit]>table>tbody>tr>td[data-th]::before{content:attr(data-th);display:block;margin-bottom:2px;font-size:11px;font-weight:400;color:var(--mut)}
  .apik-tbl[data-fit]>table>tbody>tr>td:first-child{flex-basis:100%}
  .apik-tbl[data-fit]>table>tbody>tr>td:first-child::before{content:none}
  .apik-tbl[data-fit]>table>tbody>tr>td:not([data-th]):not([data-wide]):not(:first-child){flex:0 0 auto;margin-left:auto;align-self:flex-end}
  .apik-tbl[data-fit]>table>tbody>tr>td:empty{display:none}
  .apik-tbl[data-fit] .apik-perms{display:flex;flex-wrap:wrap;gap:4px}
}

/* 2026-11-07 audit (low): 768–900 px header — the logo keeps its width (it ran over "Markets"), menu items stay on one line */
@media (min-width:768px){.top .brand{flex-shrink:0}}   /* regression check: phones may shrink it as before */
@media (min-width:768px) and (max-width:900px){#nav>a,#nav .dd-btn{padding:0 7px;font-size:13px}}
@media (min-width:768px) and (max-width:820px){#nav>a,#nav .dd-btn{padding:0 5px}}   /* 768 English: the language button sat 1 px past the edge */
@media (min-width:768px) and (max-width:860px){.top .user{gap:2px}.top .user .lang-btn{padding:0 6px}.top .user .hico>.dd-btn,.top .user>.hico{width:34px}}   /* longer languages (es / ru) at 768–860: the icons sit closer instead of passing the edge */   /* no nowrap: it pushed the header past the screen in longer languages */
/* touch screens: small links and checkboxes get a finger-sized target (dashboard "Trade", KYC consents, the API docs link) */
@media (pointer:coarse){
  .bx-link{display:inline-block;padding:8px 6px;margin:-8px -6px}
  .u4 input[type=checkbox],.u2 input[type=checkbox]{width:20px;height:20px}
  .apik a[target="_blank"]{display:inline-flex;align-items:center;min-height:32px}
}

/* 2026-11-07 audit (medium): spot limit form — Post Only and the time-in-force select on one row */
.of .of-tif{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0;font-size:12px}
.of .of-tif .chk{display:inline-flex;align-items:center;gap:6px;color:var(--mut)}
.of .of-tif select{width:auto;height:26px;padding:0 6px;font-size:12px}
.of .of-tif[hidden]{display:none}

/* 2026-11-07 regression check (medium): admin tables wider than their card (members, futures markets, API keys, withdrawals, audit) keep the action
   column in view — pinned to the right edge of the scrolling table.
   2026-11-08 (admin click-test): from 768 px only (on a phone the pinned buttons covered the e-mail / symbol columns), and in the skin's scroll box
   (16 px side padding) flush with the visible edge — the scrolled columns showed through in that padding, right of the pinned cell.
   2026-11-09 (second click-test): from 1024 px only — at 768–1023 px the pinned buttons took ~290 of ~480 px and hid long e-mails and the
   middle columns; there the whole row scrolls as one, the buttons at its end */
@media (min-width:1024px){
.adm-shell .tbl table:has(tbody td:last-child button) tr>:last-child{position:sticky;right:0;z-index:1;background:var(--a-elev,var(--card));box-shadow:-8px 0 8px -8px rgba(0,0,0,.35)}
.adm-shell .adm-skin .tbl table:has(tbody td:last-child button) tr>:last-child{right:-16px}
}
/* 2026-11-08 (admin click-test): an empty table's message stays within its scroll box's visible width (centred across the whole wide table it
   was cut off on a phone: "No with…") */
.adm-shell .tbl:has(>table>tbody>tr.empty-tr>td.empty){container-type:inline-size}
.adm-shell .tbl>table>tbody>tr.empty-tr>td.empty>div{position:sticky;left:12px;box-sizing:border-box;width:calc(100cqi - 24px);max-width:100%}
.adm-shell .tbl>table>tbody>tr.empty-tr>td.empty>.ic{position:sticky;left:calc(50cqi - 16px);display:block}
/* ---------- notification centre (2026-11-07): the bell and its count, #/notifications, the Notifications card of #/settings ---------- */
.hbell{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:8px;color:var(--bx-fg)}
.hbell:hover{color:var(--acc)}
.hbell .ic{width:21px;height:21px;stroke-width:1.7}
.hbell-n{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--dn);color:#fff;font-size:10.5px;font-weight:700;line-height:16px;text-align:center}
@media (max-width:760px){.hbell{width:32px}}
.nc .nc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.nc .nc-head .cy-h1{margin:0}
.nc-acts{display:flex;gap:6px;flex-wrap:wrap}
.nc-chips{margin:0 0 12px;flex-wrap:wrap}
.nc-list{padding:4px 0}
.nc-item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--bx-bd);color:var(--bx-fg);text-decoration:none}
.nc-item:last-child{border-bottom:0}
a.nc-item:hover{background:var(--bx-sel);color:var(--bx-fg)}
.nc-item.unread .nc-t b{font-weight:700}
.nc-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--bx-sec);color:var(--bx-mut)}
.nc-ic .ic{width:18px;height:18px;stroke-width:1.8}
.nc-security{color:var(--warn);background:var(--warn-soft)}
.nc-funds,.nc-trading,.nc-account{color:var(--acc);background:var(--acc-soft)}
.nc-main{flex:1;min-width:0}
.nc-t{display:flex;gap:4px 10px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.nc-t b{font-weight:500;overflow-wrap:anywhere}
.nc-tm{white-space:nowrap}
.nc-b{margin:4px 0 0;color:var(--bx-mut);font-size:13px;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-top:7px}
.nc-more{display:flex;justify-content:center;padding:12px}
.nc-push{border:1px solid var(--bx-bd);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:var(--card)}
.nc-push-r{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nc-push-t{flex:1;min-width:200px}
.nc-push-t p{margin:2px 0 0}
.nc-prefs{display:flex;flex-direction:column;border:1px solid var(--bx-bd);border-radius:10px;overflow:hidden;margin-bottom:8px}
.nc-pref{display:grid;grid-template-columns:minmax(0,1fr) 56px 56px;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bx-bd)}
.nc-pref:last-child{border-bottom:0}
.nc-pref>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.nc-pref input{justify-self:center;width:18px;height:18px}
.nc-pref-h{background:var(--bx-sec);font-size:12px}
.nc-pref-h b{text-align:center;font-weight:500}
.nc-devs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.nc-dev{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bx-bd);border-radius:10px}
.nc-dev>div{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (max-width:389px){.top:has(#h-bell:not([hidden])) .hthm{display:none}} /* a member on a narrow phone: the bell takes the theme switch's place (Settings → Theme) */
/* 2026-11-07 regression check: a long unbroken value in an admin card (a key fingerprint, an env variable name) wraps instead of widening the page */
.adm-skin .card p,.adm-skin .card .muted,.adm-skin .card li{overflow-wrap:anywhere}
.adm-skin .grid2>*{min-width:0}
/* 2026-11-08 home board: a price that moved flashes for a moment (green up / red down) */
.hm-row .hm-px{border-radius:4px;transition:background-color .2s}
.hm-row .hm-px.hm-up{animation:hmUp .9s ease-out}
.hm-row .hm-px.hm-dn{animation:hmDn .9s ease-out}
@keyframes hmUp{0%{background:var(--up-soft);color:var(--up)}100%{background:transparent}}
@keyframes hmDn{0%{background:var(--dn-soft);color:var(--dn)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.hm-row .hm-px.hm-up,.hm-row .hm-px.hm-dn{animation:none}}
/* 2026-11-08: a header whose labels do not fit on one line (Russian or Vietnamese on a tablet) folds its menu behind the burger as on a
   phone — app.js fitHeader adds .nav-compact above 760 px only when the header overflows; the phone rules above are unchanged */
.top.nav-compact .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;padding:0 8px;background:none;border:0;border-radius:6px}
.top.nav-compact .nav-toggle i{display:block;height:2px;background:var(--fg);border-radius:1px}
.top.nav-compact .nav-toggle:hover{background:var(--in)}
.top.nav-compact #nav{display:none;position:absolute;top:100%;left:0;right:0;height:auto;flex-direction:column;align-items:stretch;background:var(--bx-bg,var(--card));
  border-bottom:1px solid var(--bx-bd,var(--bd));padding:4px 16px 12px;gap:0;box-shadow:0 14px 28px rgba(0,0,0,.5);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);
  overflow-y:auto;overscroll-behavior:contain}
.top.nav-compact.nav-open #nav{display:flex}
.top.nav-compact #nav>a,.top.nav-compact #nav .dd-btn{height:46px;min-height:46px;flex:none;padding:0 4px;border-bottom:1px solid var(--bd);width:100%}
.top.nav-compact #nav .dd{flex:none;height:auto;flex-direction:column;align-items:stretch}
.top.nav-compact #nav .dd-menu{display:block;position:static;border:0;box-shadow:none;padding:2px 0 6px 10px;background:none;min-width:0;max-height:none;overflow:visible}
.top.nav-compact #nav .caret{display:none}
/* 2026-11-08 long translations on narrow screens: the admin's 2FA state wraps instead of widening the page; a long badge in a key / value
   list wraps inside its cell; the latest-withdrawals card puts its search and buttons on a second row when they do not fit */
.adm-2fa{min-width:0;max-width:100%;flex-wrap:wrap}
.adm-2fa .adm-pill{white-space:normal;min-width:0;max-width:100%}
.kv dd .badge,.adm-shell .adm-skin .kv dd .badge{white-space:normal;height:auto;min-height:22px;max-width:100%;padding-top:2px;padding-bottom:2px;text-align:left}
.g2 .g2-tile .adm-card-h{flex-wrap:wrap} /* a tile's long title puts its button on the next row instead of out of the tile */
.g2 .g2-wd .adm-card-acts{flex-wrap:wrap;justify-content:flex-end}