/* THE PAPER TRADING SCREEN - QPB step 2, the first draft for the owner's pick (two looks: body.a TERMINAL, body.b 3D). DESIGN.md: pure
   black, CYAN = long / up, PINK = short / down, amber the accent, the answers big and first, nothing under 12.5 px, nothing touching. */
html,body{height:100%}
body{margin:0;background:#000;color:var(--ink);font:400 14px/1.4 var(--f-ui);overflow:hidden}
.app{display:grid;height:100vh;grid-template-rows:54px 66px minmax(0,1fr) 168px 30px;grid-template-columns:minmax(0,1fr) 268px 372px;
  grid-template-areas:"top top top" "strip strip strip" "chart book tk" "acct acct tk" "st st st"}
.p-top{grid-area:top;display:flex;align-items:center;gap:22px;padding:0 20px;border-bottom:1px solid var(--line-2)}
.p-top .brand{font-size:19px;letter-spacing:.2em;display:flex;align-items:center;gap:8px}
.p-top .brand svg{width:22px;height:22px}
.pill{font:600 12.5px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.pill.am{color:var(--accent);border-color:rgba(255,177,61,.45);box-shadow:0 0 14px rgba(255,177,61,.15) inset}
.league{display:flex;align-items:center;gap:12px;margin-left:8px;padding:6px 14px 6px 12px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(90deg,rgba(255,177,61,.07),rgba(255,177,61,0) 70%)}
.league .lm{display:flex;align-items:center;gap:7px;font:400 14px/1 var(--f-brand);letter-spacing:.24em;color:var(--white)}
.league .lm svg.cup{width:24px;height:24px}
.league span{font:500 12.5px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.league b{color:var(--white);font-weight:600}
.p-top .p-nfa{margin-left:auto;font:500 12.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.strip{grid-area:strip;display:flex;align-items:center;gap:30px;padding:0 20px;border-bottom:1px solid var(--line-2)}
.coin{display:flex;align-items:baseline;gap:10px;font:600 22px/1 var(--f-ui);color:var(--white)}
.coin small{font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;color:var(--accent);border:1px solid rgba(255,177,61,.4);border-radius:6px;padding:4px 7px}
.ex{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:12px}
.ex button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:7px 13px;border-radius:8px;min-width:96px}
.ex button b{font:600 13.5px/1 var(--f-ui);color:var(--ink-2)}
.ex button i{font:500 12.5px/1 var(--f-ui);font-style:normal;color:var(--ink-3)}
.ex button.on{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 22px rgba(34,228,255,.10)}
.ex button.on b{color:var(--white)}.ex button.on i{color:var(--ink-2)}
.kv{display:flex;flex-direction:column;gap:5px}
.kv span{font:500 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.kv b{font:600 16px/1 var(--f-ui);color:var(--ink)}
.kv.big b{font:500 30px/1 var(--f-cond);color:var(--white);letter-spacing:.01em}
.panel{position:relative;border-right:1px solid var(--line-2);min-width:0;min-height:0}
.chart{grid-area:chart;display:grid;grid-template-rows:42px minmax(0,1fr)}
.chips{display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line-2)}
.chips .tf{display:flex;gap:2px;margin-right:12px}
.chips .tf b{font:600 12.5px/1 var(--f-ui);color:var(--ink-3);padding:6px 8px;border-radius:6px}.chips .tf b.on{color:var(--white);background:rgba(255,255,255,.06)}
.p-chip{display:flex;align-items:center;gap:7px;font:600 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;white-space:nowrap}
.p-chip i{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.p-chip.on{color:var(--white);border-color:rgba(255,177,61,.5)}.p-chip.on i{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.chips .lab{margin-left:auto;font:500 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cv{position:relative}.cv canvas{position:absolute;inset:0;width:100%;height:100%}
.book{grid-area:book;display:grid;grid-template-rows:42px minmax(0,1fr) 40px minmax(0,1fr)}
.bh{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-bottom:1px solid var(--line-2);font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.side{display:flex;flex-direction:column;justify-content:flex-end;padding:4px 0;overflow:hidden}.side.bd{justify-content:flex-start}
.p-lv{position:relative;display:flex;justify-content:space-between;padding:3px 14px;font:500 13px/1.25 var(--f-ui);font-variant-numeric:tabular-nums}
.p-lv em{position:absolute;right:0;top:1px;bottom:1px;border-radius:2px 0 0 2px}
.ak .p-lv span:first-child{color:var(--short)} .bd .p-lv span:first-child{color:var(--long)}
.ak .p-lv em{background:linear-gradient(90deg,rgba(var(--short-rgb),.05),rgba(var(--short-rgb),.22))}
.bd .p-lv em{background:linear-gradient(90deg,rgba(var(--long-rgb),.05),rgba(var(--long-rgb),.22))}
.p-lv span{position:relative}
.spread{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.spread b{font:500 22px/1 var(--f-cond);color:var(--white)}.spread span{font:500 12.5px/1 var(--f-ui);color:var(--ink-3);letter-spacing:.1em}
.tk{grid-area:tk;display:flex;flex-direction:column;gap:10px;padding:14px 18px;border-left:1px solid var(--line-2);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0) 40%)}
.eq{display:flex;justify-content:space-between;align-items:flex-end}
.eq .kv.big b{font-size:34px}
.ls{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border:1px solid var(--line);border-radius:12px}
.ls b{display:block;text-align:center;padding:11px 0;border-radius:8px;font:600 14px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.ls b.l.on{color:#001418;background:var(--long);box-shadow:0 0 26px rgba(var(--long-rgb),.35)}
.ls b.s.on{color:#1a0008;background:var(--short)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:10px}
.fld span{font:500 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fld b{font:600 16px/1 var(--f-ui);color:var(--white);text-align:right;white-space:nowrap}
.fld b i{display:block;margin-top:5px;font:500 12.5px/1 var(--f-ui);font-style:normal;color:var(--ink-3)}
.row2{grid-template-columns:1.5fr 1fr}
.ans{display:flex;flex-direction:column;gap:8px;padding:12px 14px 10px;border:1px solid var(--line);border-radius:12px;background:#050506}
.ans .a1 span,.ans .a2 span{font:500 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ans .a1 b{display:block;margin-top:6px;font:500 38px/.95 var(--f-cond);color:var(--white)}
.ans .a1 em{font:500 15px/1 var(--f-ui);font-style:normal;color:var(--long);margin-left:8px}
.ans .a2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.ans .a2 b{display:block;margin-top:6px;font:500 24px/1 var(--f-cond);color:var(--white)}
.ans .a2 i{display:block;margin-top:5px;font:500 12.5px/1.2 var(--f-ui);font-style:normal;color:var(--ink-3)}
.p-go{all:unset;display:block;text-align:center;padding:14px 0;border-radius:10px;font:600 14px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;
  color:#001418;background:var(--long);box-shadow:0 0 30px rgba(var(--long-rgb),.30)}
.cmp{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cmp .ch{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line-2);font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.cmp table{width:100%;border-collapse:collapse;font:500 13px/1 var(--f-ui)}
.cmp th{font:500 12.5px/1 var(--f-ui);color:var(--ink-3);text-align:right;padding:8px 7px 6px;letter-spacing:.04em;white-space:nowrap}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp td{padding:7px 7px;text-align:right;color:var(--ink);border-top:1px solid var(--line-2);white-space:nowrap}
.cmp td.lc,.pos td.lc{color:var(--long)} .cmp td.sc,.pos td.sc{color:var(--short)} .cmp .ch span:last-child{color:var(--ink-3)}
.cmp .ch{white-space:nowrap}
.cmp tr.on td{color:var(--white);background:rgba(255,255,255,.04)}
.cmp td.best{color:var(--accent)}
.acct{grid-area:acct;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);display:grid;grid-template-rows:40px 1fr}
.tabs{display:flex;gap:22px;align-items:center;padding:0 16px;border-bottom:1px solid var(--line-2)}
.tabs b{font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:13px 0}
.tabs b.on{color:var(--white);box-shadow:inset 0 -2px 0 var(--accent)}
.pos{width:100%;border-collapse:collapse;font:500 14px/1 var(--f-ui)}
.pos th{font:500 12.5px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:12px 16px 8px}
.pos td{padding:12px 16px;border-top:1px solid var(--line-2);color:var(--ink)}
.pos td.big{font:500 22px/1 var(--f-cond);color:var(--white)}
.st{grid-area:st;display:flex;align-items:center;gap:18px;padding:0 20px;border-top:1px solid var(--line-2);font:500 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.st i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 6px var(--good);margin-right:7px;vertical-align:1px}
/* ---- LOOK B: the kit's 3D LIQ MAP is the hero; the candles a strip above it ---- */
body.b .chart{grid-template-rows:42px 34% minmax(0,1fr)}
body.b #hero{display:block}
#hero{display:none;position:relative;border-top:1px solid var(--line-2)}
#hero .stage,#hero canvas{position:absolute;inset:0;width:100%;height:100%}
#hero .lab3{position:absolute;left:16px;top:12px;z-index:3;font:600 12.5px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
#lm-motion{position:absolute;left:16px;top:34px;z-index:3;font:500 12.5px/1 var(--f-ui);color:var(--ink-3);background:none;border:1px solid var(--line-2);border-radius:999px;padding:6px 10px}
.app .hz{color:var(--accent)} .app .lc,.app td.lc,.app td.big.lc,.cmp tr.on td.lc{color:var(--long)} .app .sc,.app td.sc,.app td.big.sc,.cmp tr.on td.sc{color:var(--short)} .cmp tr.on td.best{color:var(--accent)}
.p-tools{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tk>*{flex-shrink:0}
.p-tools .th{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line-2);font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.p-tools .th span:last-child{color:var(--ink-3);font-weight:500;letter-spacing:.1em}
.tg{display:grid;grid-template-columns:1fr 1fr}
.tg div{padding:8px 12px;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);min-width:0}
.tg div:nth-child(-n+2){border-top:0}.tg div:nth-child(odd){border-left:0}
.tg span{display:block;font:600 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tg b{display:block;margin-top:5px;font:500 21px/1 var(--f-cond);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg i{display:block;margin-top:4px;font:500 12.5px/1.2 var(--f-ui);font-style:normal;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* THE 3D SWITCH (the owner's pick 10-20: "A + B's 3D switch"): the chart turns into the live LIQ MAP, the position as the star */
.dd{display:flex;gap:2px;margin-left:auto;padding:3px;border:1px solid var(--line);border-radius:9px}
.dd b{cursor:pointer;font:600 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:6px 10px;border-radius:6px}
.dd b.on{color:#000;background:var(--accent);box-shadow:0 0 16px rgba(255,177,61,.35)}
body.d3 .chart .cv{display:none} body.d3 #hero{display:block;grid-row:2}
body.b .tk{background:linear-gradient(180deg,rgba(34,228,255,.035),rgba(0,0,0,0) 30%)}
/* ---- the live page (app.html): inputs, messages, the join card, actions ---- */
.fld input{all:unset;width:50%;text-align:right;font:600 16px/1 var(--f-ui);color:var(--white);font-variant-numeric:tabular-nums}
.fld:focus-within{border-color:rgba(255,177,61,.6)}
.ls.kd b{padding:8px 0;font-size:12.5px}.ls.kd b.on{color:var(--white);background:rgba(255,255,255,.08)}
.ls b{cursor:pointer}
.msg{min-height:18px;font:500 13px/1.35 var(--f-ui);color:var(--ink-2)}.msg.bad{color:var(--short)}.msg.ok{color:var(--good)}
.p-go{cursor:pointer}.p-go.s{color:#1a0008;background:var(--short);box-shadow:0 0 30px rgba(var(--short-rgb),.30)}
.p-go[disabled]{opacity:.45;cursor:default}
.reset{all:unset;cursor:pointer;margin-left:auto;font:600 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:7px 10px;border:1px solid var(--line-2);border-radius:8px}
.reset:hover{color:var(--white);border-color:var(--line)}
.tabs b{cursor:pointer}
.act{all:unset;cursor:pointer;font:600 12.5px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:7px 10px;border:1px solid var(--line);border-radius:8px}
.act:hover{color:var(--white);border-color:var(--white)}
.ex button{cursor:pointer}
.join{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}
.join[hidden]{display:none}
.jc{width:min(440px,92vw);display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--line);border-radius:16px;background:#050506;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.jc .brand{font-size:19px;display:flex;align-items:center;gap:8px}.jc .brand svg{width:22px;height:22px}
.jc h1{margin:4px 0 0;font:500 40px/1 var(--f-cond);color:var(--white)}
.jc p{margin:0;color:var(--ink-2);font:400 15px/1.45 var(--f-ui)}.jc p.k{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.jc .fld input{width:60%}
.jc p.k2{font:500 13.5px/1.4 var(--f-ui);color:var(--ink-2)}
.jc .sent{display:flex;flex-direction:column;gap:10px}.jc .sent b{font:500 30px/1 var(--f-cond);color:var(--white)}
.jc .sent a{color:var(--cyan)}
.empty{padding:22px 16px;color:var(--ink-3);font:500 13px/1.4 var(--f-ui)}
[hidden]{display:none !important}
/* ---- 10-20, the owner's first look at the live page: "Numbers are running into each other" (a smaller window), every time scale,
   every tool chip, a leverage slider, a chart that zooms and moves like LIQ HEAT's (DESIGN.md) ---- */
body{overflow-y:auto}
.app{height:max(100vh,760px);grid-template-rows:54px minmax(66px,auto) minmax(0,1fr) 168px 30px}
.strip{flex-wrap:wrap;row-gap:10px;padding-top:8px;padding-bottom:8px}.strip>*{flex-shrink:0}
.chart{grid-template-rows:42px 38px minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.chips,.inds{min-width:0;overflow:hidden}
.chips .tf b{cursor:pointer;transition:color .2s,background .2s}.chips .tf b:hover{color:var(--white)}
.inds{display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line-2)}
.inds .il{font:500 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ich{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}.ich::-webkit-scrollbar{display:none}
.p-chip{cursor:pointer;background:none;transition:color .2s,border-color .2s}.p-chip:hover{color:var(--white)}
body.d3 #hero{grid-row:3}
.cv{overflow:hidden}.cv canvas{touch-action:none;cursor:crosshair}
.chips .tf{min-width:0;overflow-x:auto;scrollbar-width:none}.chips .tf::-webkit-scrollbar{display:none}.chips .dd{flex-shrink:0}.cv.drag canvas{cursor:grabbing}
.ohlc{position:absolute;left:14px;right:14px;top:8px;overflow:hidden;text-overflow:ellipsis;z-index:2;pointer-events:none;font:500 12.5px/1 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.ohlc b{font-weight:600;color:var(--ink-2);margin:0 10px 0 4px}.ohlc .lc{color:var(--long)}.ohlc .sc{color:var(--short)}
.nowb{all:unset;cursor:pointer;position:absolute;right:100px;top:8px;z-index:3;padding:7px 12px;border:1px solid rgba(255,177,61,.6);border-radius:999px;
  background:rgba(6,6,8,.9);font:600 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);box-shadow:0 0 16px rgba(255,177,61,.18)}
.tk{overflow-y:auto;scrollbar-width:thin}
.lv{display:flex;flex-direction:column;gap:10px;padding:11px 13px 9px;border:1px solid var(--line);border-radius:10px}
.lv:focus-within{border-color:rgba(255,177,61,.6)}
.lvh{display:flex;justify-content:space-between;align-items:center}
.lvh span{font:500 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lvb{display:flex;align-items:baseline;gap:3px;cursor:text}
.lvb input{all:unset;width:64px;text-align:right;font:600 18px/1 var(--f-ui);color:var(--white);font-variant-numeric:tabular-nums}
.lvb i{font:600 14px/1 var(--f-ui);font-style:normal;color:var(--ink-3)}
#levr{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer;--p:10%}
#levr::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--p),rgba(255,255,255,.12) var(--p))}
#levr::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#000;border:2px solid var(--accent);box-shadow:0 0 14px rgba(255,177,61,.55)}
#levr::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
#levr::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
#levr::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#000;border:2px solid var(--accent);box-shadow:0 0 14px rgba(255,177,61,.55)}
#levr:focus-visible{outline:none}#levr:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,177,61,.25),0 0 14px rgba(255,177,61,.55)}
.lvt{display:flex;justify-content:space-between}
.lvt button{all:unset;cursor:pointer;font:600 12.5px/1 var(--f-ui);color:var(--ink-3);padding:2px 0}.lvt button:hover,.lvt button.on{color:var(--white)}
.st .st-nfa{display:none}
/* THE DRAWING TOOLS (the owner 10-20: "Drawing tools too"): a slim column on the chart's left edge; drawings white / amber, never CYAN or PINK */
.dtools{position:absolute;left:8px;top:30px;z-index:3;display:flex;flex-direction:column;gap:2px;padding:4px;border:1px solid var(--line-2);border-radius:10px;background:rgba(6,6,8,.86)}
.dtools button{all:unset;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;transition:background .15s}
.dtools button svg{width:18px;height:18px;fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dtools button circle{fill:var(--ink-2);stroke:none}
.dtools button:hover{background:rgba(255,255,255,.07)}.dtools button:hover svg{stroke:var(--white)}
.dtools button.on{background:rgba(255,177,61,.14);box-shadow:inset 0 0 0 1px rgba(255,177,61,.55)}.dtools button.on svg{stroke:var(--accent)}.dtools button.on circle{fill:var(--accent)}
.dtools button:focus-visible{outline:2px solid rgba(255,177,61,.6);outline-offset:1px}
.dtools .dsep{height:1px;margin:3px 4px;background:var(--line-2)}
.dnote{position:absolute;z-index:4;width:200px;padding:7px 9px;border:1px solid rgba(255,177,61,.6);border-radius:8px;background:#050506;color:var(--white);font:500 13px/1.2 var(--f-ui);outline:none}
.cv.drawing canvas{cursor:crosshair}
/* THE PAIR (the owner 10-20: "switch pairs", "Is it BTC/USDT or USDC?"): the name is the switch; the exchange's own contract under it */
.coin{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px;row-gap:5px}
.pairb{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:8px;padding:4px 8px;margin:-4px -8px;border-radius:8px;transition:background .2s}
.pairb:hover,.pairb[aria-expanded="true"]{background:rgba(255,255,255,.06)}
.pairb b{font:600 22px/1 var(--f-ui);color:var(--white);letter-spacing:.01em}
.pairb .pp{font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pairb .car{width:7px;height:7px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-3px) rotate(45deg)}
.coin #psym{grid-column:1/-1;font:500 12.5px/1 var(--f-ui);font-style:normal;color:var(--ink-3);white-space:nowrap}
.pmenu{position:absolute;left:-8px;top:calc(100% + 8px);z-index:20;min-width:260px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#050506;
  box-shadow:0 24px 60px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02)}
.pmenu button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:calc(100% - 24px);padding:11px 12px;border-radius:8px}
.pmenu button:hover,.pmenu button.on{background:rgba(255,255,255,.06)}
.pmenu b{font:600 16px/1 var(--f-ui);color:var(--white)}.pmenu i{font:500 12.5px/1 var(--f-ui);font-style:normal;color:var(--ink-3)}
.pmenu button.on b{color:var(--accent)}
.bh span{white-space:nowrap}
@media (max-width:1500px){
  .app{grid-template-columns:minmax(0,1fr) 236px 344px}
  .strip{gap:22px}
  .league span:nth-of-type(3){display:none}
  .p-go{letter-spacing:.12em;padding:14px 8px}
}
@media (max-width:1280px){
  .p-top{gap:14px}.league span:nth-of-type(2){display:none}
  .strip{gap:16px;padding:0 14px}.kv.big b{font-size:26px}
  .ex button{min-width:0;padding:7px 10px}
}
@media (max-width:1100px){
  .app{height:auto;min-height:100vh;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto minmax(380px,1fr) 230px minmax(168px,auto) auto;
    grid-template-areas:"top top" "strip strip" "chart tk" "book tk" "acct acct" "st st"}
  .league span{display:none}
  .p-top{flex-wrap:wrap;row-gap:8px;padding:10px 20px;min-height:54px;box-sizing:border-box}.p-top .p-nfa{white-space:normal}
  .strip{flex-wrap:wrap;row-gap:12px;padding:12px 14px}
  .book{border-top:1px solid var(--line-2);grid-template-columns:1fr 1fr;grid-template-rows:42px 36px minmax(0,1fr)}
  .book .bh{grid-column:1/-1}.book .spread{grid-column:1/-1;grid-row:2}
  .book .side.bd{grid-row:3;grid-column:1;border-right:1px solid var(--line-2)}
  .book .side.ak{grid-row:3;grid-column:2;flex-direction:column-reverse;justify-content:flex-end}
  .book .ak .p-lv em{right:auto;left:0;border-radius:0 2px 2px 0;background:linear-gradient(270deg,rgba(var(--short-rgb),.05),rgba(var(--short-rgb),.22))}
  .st{flex-wrap:wrap;row-gap:8px;padding:10px 20px}
}
@media (max-width:760px){
  .app{display:flex;flex-direction:column}
  .p-top{flex-wrap:wrap;row-gap:10px;padding:12px 16px}.league{margin-left:0}.p-top .p-nfa{margin-left:0;white-space:normal}
  .strip{padding:12px 16px}.ex{flex-wrap:wrap}
  .chart{height:64vh;min-height:380px;border-right:0}.book{height:250px;border-right:0}
  .tk{border-left:0;border-top:1px solid var(--line-2);overflow:visible;padding:16px}
  .acct{border-right:0}.pos{display:block;overflow-x:auto;white-space:nowrap}
  .ohlc .od{display:none}
  .tabs{gap:16px;overflow-x:auto}.chips{padding:0 10px}.inds{padding:0 10px}.inds .il{display:none}
  .nowb{right:84px}.chips .tf b{padding:6px 6px}
  .dtools button{width:28px;height:28px}
}