/* ============================================================================
   hl-dashboard.css — HyperLiquid dashboard (#view=hl), isolated module styles.
   Root class .hld (NOT .v4-hl) so nothing collides with the still-present
   .v4-hl rules in the drifting v4.css. Reuses STABLE global leaf components
   verbatim (.w3-panel .v4-panel .w3-ph .v4-scroll .w3-feedrow .t3 .v4-top3
   .w3-empty .hl-side .hl-bdg .hl-lsbar .hl-liqrow .hl-liqbar .hl-prow .hl-omni
   .hl-pins .hl-cchip .hl-search .hl-sidetabs .v4-sort .v4-pager .v4-drawer*
   .v4-dstats .v4-dsec .v4-drow .v4-thesis .v4-fig .v4-dfoot .v4-dbtn). Every
   .v4-hl-SCOPED rule this module relies on is re-scoped under .hld below, so the
   visual contract survives independently of v4.css. Theme-aware (all colour via
   tokens that flip in theme-light.css). Single accent = --cat-hl for HL identity;
   --accent for links/CTA/focus (DESIGN_SPEC). No 700 weights; mono for all data.
   ============================================================================ */

/* ─────────────────────────── layout shell ─────────────────────────── */
.hld-root{display:flex; flex-direction:column; height:100%; gap:12px; min-height:0; overflow:hidden;}
.hld-head{flex:0 0 auto;}
/* Mirrors the «Рынок» grid: feed (left, full height) · radar QUADRANT (BIG center, spans 2 rows —
   exactly like «Карта эмиссии») · side (right, full height); the live perp-market TABLE is the short
   bottom-center strip (like «Динамика», height user-resizable via the top .v4-rsz grip → --hld-bottom-h).
   The old inline «Карта ликвидаций» panel is GONE — a radar-bubble click opens a floating heatmap
   pop-up (see .hld-liqpop). Panels scroll INTERNALLY so the page never balloons. */
.hld{flex:1 1 auto; min-height:0; display:grid; gap:12px;
  /* IDENTICAL to «Рынок» .v4-market → the radar quadrant is the SAME size/position as «Карта эмиссии» */
  grid-template-columns:minmax(0,1.7fr) minmax(0,1.15fr) minmax(0,0.95fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr) var(--hld-bottom-h,212px);
  grid-template-areas:
    "feed  radar   side"
    "feed  radar   side"
    "feed  market  side";}
/* the feed body must scroll inside its 3-row span rather than stretch the grid */
.hld .a-feed > .v4-scroll{flex:1; min-height:0; overflow-y:auto;}
.hld .a-feed{grid-area:feed;} .hld .a-market{grid-area:market;}
.hld .a-radar{grid-area:radar; display:flex; flex-direction:column; min-height:0;}
.hld .a-side{grid-area:side; display:flex; flex-direction:column; min-height:0;}
/* market table (bottom strip): header + its own scroll body; horizontal scroll so funding/OI never clip */
.hld .a-market{display:flex; flex-direction:column; min-height:0;}
.hld .a-market > .v4-scroll{flex:1; min-height:0; overflow-x:auto;}
/* side tabs: 4 tabs must fit on ONE row in the ~300px side column — tighten padding+gap; wrap only as a last resort */
.hld .hl-sidetabs{flex-wrap:wrap; gap:2px;}
.hld .hl-sidetabs button{padding:0 5px; font-size:.72rem;}
.hld > section{min-width:0; min-height:0;}
/* mirror «Рынок» EXACTLY on short viewports: its bottom strip default drops 212px→182px here, so the
   radar quadrant grows to the SAME height as «Карта эмиссии» (без этого радар был на 30px ниже). */
@media (min-width:1181px) and (max-height:920px){
  .hld{grid-template-rows:minmax(0,1fr) minmax(0,1fr) var(--hld-bottom-h, 182px);}
}
@media(max-width:1180px){
  .hld{display:block; height:auto;}
  .hld > section{margin-bottom:12px; height:auto; max-height:80vh;}
  .hld .a-radar{min-height:440px;}
  .hld-root{height:auto; overflow-y:auto;}
}

/* ─────────────────────────── KPI head band ─────────────────────────── */
.hld-head{display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap;
  padding:9px 14px; background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--radius-md);}
.hld-head-id{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;}
.hld-head-id .tt{font-weight:600; font-size:.95rem; color:var(--text-1);}
.hld-mark{width:9px; height:9px; border-radius:999px; background:var(--cat-hl); flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--cat-hl) 60%, transparent); animation:hldpulse 2s var(--ease-out,ease) infinite;}
.hld-kpis{display:flex; align-items:center; gap:12px 26px; flex-wrap:wrap; flex:1 1 auto;}
.hld-kpi{display:flex; flex-direction:column; gap:1px; min-width:0;}
.hld-kpi .v{font-family:var(--font-mono); font-size:1.12rem; font-weight:500; line-height:1.1; color:var(--text-1);
  font-variant-numeric:tabular-nums lining-nums;}
.hld-kpi .l{font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3);}
.hld-kpi .s{font-family:var(--font-mono); font-size:.6rem; color:var(--text-disabled);}
.hld-live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-3);}
.hld-live .dot,.hld-live-dot{width:8px; height:8px; border-radius:999px; background:var(--cat-hl); flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--cat-hl) 60%, transparent); animation:hldpulse 2s var(--ease-out,ease) infinite;}
.hld-live-dot{margin-left:6px; display:inline-block; vertical-align:middle;}
@keyframes hldpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cat-hl) 55%, transparent);}70%{box-shadow:0 0 0 6px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
@media (prefers-reduced-motion:reduce){ .hld-mark,.hld-live .dot,.hld-live-dot{animation:none;} }

/* ─────────── delist badge — subtle, inline on the affected market row (widget d) ─────────── */
/* No banner: a delist vote is a rare, per-coin event → a small amber pill on that coin's
   market row, shown only when a tracked/live-universe coin is actually under a vote. */
.hld-mkt .dl-bdg{display:inline-flex; align-items:center; height:16px; margin-left:7px; padding:0 6px;
  border-radius:3px; font-family:var(--font-mono); font-size:.58rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--warn); vertical-align:middle;
  background:color-mix(in srgb, var(--warn) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);}

/* ─────────────────────────── feed header (re-scoped from .v4-hl) ─────────────────────────── */
.hld .a-feed > .w3-ph.a-feed-hd{flex-direction:column; align-items:stretch; flex-wrap:nowrap; row-gap:8px;}
.hld .afh-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; min-width:0;}
.hld .afh-modes{align-items:center; gap:4px;}
.hld .afh-filters{align-items:center; gap:5px;}
.hld .a-feed .afh-modes > .v4-sort[data-hldgrp="sort"]{margin-left:auto;}
.hld .a-feed .v4-sort button{padding:0 7px;}
/* liq modes: hide the signal-only Тип dd (both) + Время/Сумма sort (risk only — events keep sort) */
.hld[data-hldmode="risk"] .a-feed .hld-dd[data-hlddk="bucket"],
.hld[data-hldmode="risk"] .a-feed .afh-modes > .v4-sort[data-hldgrp="sort"]{display:none;}
/* reference views (positions / long-short) — feed filters don't apply → hide the whole filter row + sort */
.hld[data-hldmode="pos"] .a-feed .afh-filters,
.hld[data-hldmode="lsn"] .a-feed .afh-filters,
.hld[data-hldmode="pos"] .a-feed .afh-modes > .v4-sort[data-hldgrp="sort"],
.hld[data-hldmode="lsn"] .a-feed .afh-modes > .v4-sort[data-hldgrp="sort"]{display:none;}
/* feed rows: 5-col grid, height/font matches the Market feed */
.hld .w3-feedrow{grid-template-columns:48px 26px minmax(60px,auto) minmax(0,1fr) auto; gap:13px;}
[data-timefmt="abs"] .hld .w3-feedrow{grid-template-columns:92px 26px minmax(60px,auto) minmax(0,1fr) auto;}
@media (max-width:880px){ [data-timefmt="abs"] .hld .w3-feedrow{grid-template-columns:88px 26px minmax(56px,auto) minmax(0,1fr) auto;} }
.hld .w3-feedrow .ph{gap:8px;}
.hld .w3-feedrow .ph .pt{color:var(--text-2);}
/* fresh-wallet deposit row in the feed (coin-less; sparkle in the logo cell) */
.hld .w3-feedrow.hl-frow .lg.fr{background:transparent; display:inline-flex; align-items:center; justify-content:center; color:var(--cat-fresh,#3DD68C);}
.hld .w3-feedrow.hl-frow .lg.fr [data-icon]{width:16px; height:16px;}
.hld .w3-feedrow.hl-frow .sym{color:var(--cat-fresh,#3DD68C); font-weight:600;}
.hld .a-side-body{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
.hld .t3 .id .s{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.9rem; white-space:nowrap;}
.hld .t3 .id .m{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hld [role="link"]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--radius-sm);}

/* ─────────────────────────── self-owned dropdown (§3.2) ─────────────────────────── */
.hld-dd{position:relative; display:inline-flex;}
.hld-dd-btn{display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 8px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2);
  color:var(--text-3); font-family:var(--font-sans); font-size:.75rem; white-space:nowrap;
  transition:color var(--dur-2,.15s) var(--ease-std,ease), background-color var(--dur-2,.15s) var(--ease-std,ease), border-color var(--dur-2,.15s) var(--ease-std,ease);}
.hld-dd-btn:hover{color:var(--text-1); background:var(--fill-hover);}
.hld-dd-btn.on{color:var(--accent);}
.hld-dd.open .hld-dd-btn{color:var(--text-1); background:var(--fill-hover);}
.hld-dd-btn .chev{width:12px; height:12px; opacity:.65; display:inline-flex; transition:transform var(--dur-2,.15s) var(--ease-std,ease);}
.hld-dd-btn .chev svg{width:12px; height:12px;}
.hld-dd.open .hld-dd-btn .chev{transform:rotate(180deg);}
.hld-dd-pop{position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:auto;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:var(--elev-2, 0 8px 24px rgba(0,0,0,.45)); padding:5px; display:block;}
.hld-dd-pop[hidden]{display:none;}
.hld-dd-opt{display:block; width:100%; height:30px; padding:0 12px; cursor:pointer; text-align:left; white-space:nowrap;
  border:0; background:transparent; border-radius:var(--radius-sm); color:var(--text-2); font-family:var(--font-sans); font-size:.78rem;}
.hld-dd-opt:hover{background:var(--fill-hover); color:var(--text-1);}
.hld-dd-opt.on{color:var(--accent);}

/* ─────────────────────────── positioning rows (a-pos, §4.reframe) ─────────────────────────── */
.hld-lslist{display:flex; flex-direction:column; padding:3px 0;}
.hld-lsrow{display:flex; flex-direction:column; gap:5px; padding:8px var(--w3-pad,14px);
  cursor:pointer; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05);
  transition:background-color var(--dur-2,.15s) var(--ease-std,ease);}
:root[data-theme="light"] .hld-lsrow{border-bottom-color:var(--border);}
.hld-lsrow:hover{background:var(--fill-hover);}
.hld-lsrow .r1{display:flex; align-items:center; gap:8px; min-width:0;}
.hld-lsrow .r1 .lg{width:20px; height:20px; border-radius:999px; overflow:hidden; flex:0 0 auto; background:var(--surface-3);
  display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; color:var(--text-3);}
.hld-lsrow .r1 .lg img{width:100%; height:100%; object-fit:cover;}
.hld-lsrow .r1 .sym{font-weight:600; font-size:.85rem; color:var(--text-1); white-space:nowrap;}
.hld-lsrow .r1 .chev{display:inline-flex; align-items:center; color:var(--text-3); text-decoration:none;}
.hld-lsrow .r1 .chev svg{width:13px; height:13px;}
.hld-lsrow .r1 .chev:hover{color:var(--accent);}
.hld-lsrow .r1 .wn{font-family:var(--font-mono); font-size:.68rem; color:var(--text-3);}
.hld-lsrow .r1 .net{margin-left:auto; font-family:var(--font-mono); font-size:.8rem; font-weight:500; font-variant-numeric:tabular-nums;}
.hld-lsrow .r2{display:flex; align-items:center; gap:10px; min-width:0;}
.hld-lsrow .r2 .hl-lsbar{flex:1 1 auto; min-width:0;}
.hld-lsrow .r2 .pcts{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); flex:0 0 auto;}
.hld-lsrow .r2 .pcts b{font-weight:600;}
.hld-lsrow .r2 .d{font-family:var(--font-mono); font-size:.68rem; flex:0 0 auto;}
.hld-lsrow .r2 .d.muted{color:var(--text-disabled);}
.hld-lsrow .r2 .f{font-family:var(--font-mono); font-size:.66rem; flex:0 0 auto; white-space:nowrap;}

/* ─────────────────────────── live perp market table (a-market, §4.3) ─────────────────────────── */
.hld-mkt{width:100%; border-collapse:collapse; font-size:.78rem;}
.hld-mkt thead th{position:sticky; top:0; z-index:2; background:var(--surface-1);
  padding:7px 9px 6px; text-align:left; font-size:.6rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-3); border-bottom:1px solid var(--border-strong); white-space:nowrap;}
.hld-mkt thead th:first-child,.hld-mkt tbody td:first-child{padding-left:var(--w3-pad,14px);}
.hld-mkt thead th:last-child,.hld-mkt tbody td:last-child{padding-right:var(--w3-pad,14px);}
.hld-mkt thead th.num,.hld-mkt tbody td.num{text-align:right;}
.hld-mkt tbody td{padding:6px 9px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--text-2);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap;}
:root[data-theme="light"] .hld-mkt tbody td{border-bottom-color:var(--border);}
.hld-mkt tbody tr:hover{background:var(--fill-hover);}
.hld-mkt td.c{display:flex; align-items:center; gap:8px; font-family:var(--font-sans);}
.hld-mkt td.c .lg{width:20px; height:20px; border-radius:999px; overflow:hidden; flex:0 0 auto; background:var(--surface-3);
  display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; color:var(--text-3);}
.hld-mkt td.c .lg img{width:100%; height:100%; object-fit:cover;}
.hld-mkt td.c .nm{font-weight:600; color:var(--text-1);}
.hld-ourdot{width:6px; height:6px; border-radius:999px; background:var(--cat-hl); flex:0 0 auto;}
.hld-mkt tbody tr[data-hld-coin]{cursor:pointer;}

/* ── «Рынок перпов HL» — tabbed header (OI / Фандинг / Таблица) + Динамика-style bar rows ── */
.hld .a-market > .w3-ph{display:flex; flex-wrap:nowrap; gap:8px; align-items:center;}
.hld .a-market > .w3-ph .hl-mkttabs{flex:0 0 auto;}
.hld .a-market > .w3-ph .n{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-mono); font-size:.7rem; color:var(--text-3);}
.hld .a-market > .w3-ph .right{flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:8px;}
.hld .a-market .v4-sort button{height:22px; padding:0 9px; font-size:.6875rem;}
/* bar rows mirror «Динамика» (.v4-movers .mvr) 1:1 + a secondary value column */
.hld-dyn-list{display:flex; flex-direction:column; gap:2px; padding:3px 0;}
.hld-dyn{display:grid; grid-template-columns:18px minmax(46px,auto) minmax(0,1fr) 3.4rem 4rem; align-items:center; gap:9px;
  height:26px; padding:0 var(--w3-pad,14px); border-radius:6px; cursor:pointer;}
.hld-dyn:hover{background:var(--fill-hover);}
.hld-dyn .lg{width:18px; height:18px; border-radius:999px; overflow:hidden; background:var(--surface-3); flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; color:var(--text-3);}
.hld-dyn .lg img{width:100%; height:100%; object-fit:cover;}
.hld-dyn .sym{font-size:.75rem; font-weight:600; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hld-dyn .track{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden;}
.hld-dyn .fill{display:block; height:100%; border-radius:3px; transition:filter var(--dur-2,.15s) var(--ease-std,ease);}
.hld-dyn.up .fill{background:var(--up-fill,#30A46C);}
.hld-dyn.down .fill{background:var(--down-fill,#E5484D);}
.hld-dyn:hover .fill{filter:brightness(1.14);}
.hld-dyn .pv{font-family:var(--font-mono); font-size:.75rem; text-align:right; font-variant-numeric:tabular-nums;}
.hld-dyn.up .pv{color:var(--up,#3DD68C);}
.hld-dyn.down .pv{color:var(--down,#FF9592);}
.hld-dyn .sv{font-family:var(--font-mono); font-size:.7rem; text-align:right; color:var(--text-3); font-variant-numeric:tabular-nums;}

/* ─────────────────────────── liq heatmap SVG (shared by the 3 pop-up views) ─────────────────────────── */
.hld-liq-mark{font-family:var(--font-mono); font-size:.66rem; color:var(--text-3); margin:2px 0 6px var(--w3-pad,14px);}
.hld-liqsvg{width:100%; height:auto; display:block; overflow:visible;}
.hld-liqsvg .ax{fill:var(--text-3); font:10px var(--font-mono,monospace); font-variant-numeric:tabular-nums;}
.hld-liqsvg .vlab{fill:var(--text-2); font:9.5px var(--font-mono,monospace); font-variant-numeric:tabular-nums;}
.hld-liqsvg .tr{fill:var(--border-strong); opacity:.16;}
.hld-liqsvg .gl{stroke:var(--border); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.5;}
.hld-liqsvg .mk{stroke:var(--cat-hl); stroke-width:1.4; stroke-dasharray:4 3; vector-effect:non-scaling-stroke;}
.hld-liqsvg .mklab{fill:var(--cat-hl); font:600 10px var(--font-mono,monospace);}
/* degrade-to-list (coins with <4 liq points) */
.hld-liqlist{display:flex; flex-direction:column; padding:2px 0;}
.hld-liqlvl{display:grid; grid-template-columns:auto 74px minmax(0,1fr) auto auto; gap:10px; align-items:center;
  padding:7px var(--w3-pad,14px); cursor:pointer; text-decoration:none; color:var(--text-2);
  border-bottom:1px solid rgba(255,255,255,.05); font-family:var(--font-mono); font-size:.74rem;
  transition:background-color var(--dur-2,.15s) var(--ease-std,ease);}
:root[data-theme="light"] .hld-liqlvl{border-bottom-color:var(--border);}
.hld-liqlvl:hover{background:var(--fill-hover);}
.hld-liqlvl .px{color:var(--text-1); font-weight:500; font-variant-numeric:tabular-nums;}
.hld-liqlvl .sd{font-size:.6rem; font-weight:600; padding:1px 6px; border-radius:3px; letter-spacing:.02em;}
.hld-liqlvl .sd.l{color:var(--down); background:color-mix(in srgb, var(--down) 15%, transparent);}
.hld-liqlvl .sd.s{color:var(--up); background:color-mix(in srgb, var(--up) 15%, transparent);}
.hld-liqlvl .u{color:var(--text-3); overflow:hidden; text-overflow:ellipsis;}
.hld-liqlvl .v{color:var(--text-1); text-align:right; font-variant-numeric:tabular-nums;}
.hld-liqlvl .d{color:var(--text-3); text-align:right; font-variant-numeric:tabular-nums;}

/* ─────────────────────────── fresh tab (a-side, §4.fresh) ─────────────────────────── */
.hld-fresh-head{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:9px var(--w3-pad,14px);
  border-bottom:1px solid var(--border);}
.hld-fresh-head .ch{font-family:var(--font-mono); font-size:.68rem; color:var(--text-3);}
.hld-fresh-head .ch b{color:var(--text-2); font-weight:600;}
.hld-fresh-head .ch.fr b{color:var(--cat-fresh);}
.hld-fresh-head .ch.tot{margin-left:auto; color:var(--text-disabled);}
.hld-fresh-list{display:flex; flex-direction:column;}
.hld-fresh-row{display:flex; align-items:center; gap:12px; padding:10px var(--w3-pad,14px);
  cursor:pointer; text-decoration:none; color:var(--text-2);
  border-bottom:1px solid rgba(255,255,255,.05); transition:background-color var(--dur-2,.15s) var(--ease-std,ease);}
:root[data-theme="light"] .hld-fresh-row{border-bottom-color:var(--border);}
.hld-fresh-row:hover{background:var(--fill-hover);}
.hld-fresh-row .id{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; overflow:hidden;}
.hld-fresh-row .id .s{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.86rem; color:var(--text-1); white-space:nowrap;}
.hld-fresh-row .id .m{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hld-fresh-row .r{margin-left:auto; display:flex; align-items:center; gap:9px; flex:0 0 auto;}
.hld-fresh-row .r .v{font-family:var(--font-mono); font-size:.86rem; color:var(--text-1); font-variant-numeric:tabular-nums;}
.hl-bdg.tu{color:var(--text-2); background:var(--fill-active);}
.hl-bdg.fr svg,.hl-bdg.tu svg{width:11px; height:11px; vertical-align:-1px;}
.hld-tx{display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-3);
  font-family:var(--font-mono); font-size:.66rem; text-decoration:none; flex:0 0 auto;
  transition:color var(--dur-2,.15s) var(--ease-std,ease), border-color var(--dur-2,.15s) var(--ease-std,ease);}
.hld-tx:hover{color:var(--text-1); border-color:var(--border-hover);}
.hld-tx svg{width:11px; height:11px;}

/* ─────────────────────────── event-home drawer (reuses .v4-drawer*) ─────────────────────────── */
.hld-sig{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px;
  font-family:var(--font-mono); font-size:.7rem; font-weight:600; color:var(--cat-hl);
  background:color-mix(in srgb, var(--cat-hl) 15%, transparent); border:1px solid color-mix(in srgb, var(--cat-hl) 30%, transparent);}
.hld-sidepill{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px;
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;}
.hld-h2-lg{display:inline-flex; width:22px; height:22px; border-radius:999px; overflow:hidden; vertical-align:-4px; margin-right:7px;
  background:var(--surface-3); align-items:center; justify-content:center; font-size:.55rem; color:var(--text-3);}
.hld-h2-lg img{width:100%; height:100%; object-fit:cover;}
.hld-ev-chart{width:100%; height:200px; min-height:200px;}
.hld-ev-chart .w3-empty.sm{padding:16px 0; font-size:.75rem; color:var(--text-3);}
.v4-drawer .v4-drow.is-link{cursor:pointer;}
.v4-drawer .v4-drow.is-link:hover{background:var(--fill-hover);}

/* a11y — visually-hidden data table for the liq-map (DESIGN_SPEC §8) */
.hld .visually-hidden,.v4-drawer .visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}


/* ─────────────────────────── feed-filter presets (Market parity) ─────────────────────────── */
.hld-presets .hld-dd-btn > .ic{width:12px; height:12px; display:inline-flex; opacity:.75;}
.hld-presets .hld-dd-btn > .ic svg{width:12px; height:12px;}
.hld-pre-pop{min-width:180px;}
.hld-pre-row{display:flex; align-items:center; gap:2px;}
.hld-pre-apply{flex:1 1 auto; min-width:0; height:30px; padding:0 10px; text-align:left; cursor:pointer;
  border:0; background:transparent; border-radius:var(--radius-sm); color:var(--text-2);
  font-family:var(--font-sans); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hld-pre-apply:hover{background:var(--fill-hover); color:var(--text-1);}
.hld-pre-del{flex:0 0 auto; width:24px; height:30px; cursor:pointer; border:0; background:transparent;
  color:var(--text-disabled); font-size:1rem; line-height:1; border-radius:var(--radius-sm);}
.hld-pre-del:hover{color:var(--down); background:var(--fill-hover);}
.hld-pre-empty{padding:6px 10px; color:var(--text-disabled); font-size:.74rem; font-family:var(--font-sans);}
.hld-pre-save{display:flex; align-items:center; gap:6px; width:100%; height:32px; margin-top:4px; padding:0 10px;
  cursor:pointer; border:0; border-top:1px solid var(--border); background:transparent; color:var(--accent);
  font-family:var(--font-sans); font-size:.76rem;}
.hld-pre-save:hover{background:var(--fill-hover);}
.hld-pre-save .ic{width:13px; height:13px; display:inline-flex;} .hld-pre-save .ic svg{width:13px; height:13px;}

/* ─── liquidation-cascade RADAR (a-radar) — now the BIG center quadrant (mirrors «Карта эмиссии») ─── */
.hld .a-radar > .w3-ph{display:flex; flex-wrap:nowrap; gap:10px; align-items:center;}
.hld .a-radar > .w3-ph .t{flex:0 0 auto; min-width:0;}
/* explicit muted subtitle + guaranteed separation (don't rely on inherited gap/.n cascade) */
.hld .a-radar > .w3-ph .n{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-left:2px; font-family:var(--font-mono); font-size:.75rem; color:var(--text-3);}
.hld .a-radar > .w3-ph .hld-live-dot{flex:0 0 auto;}
.hld .a-radar > .w3-ph .right{flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:6px;}
/* expand = the global .v4-expand icon button (external-link), identical to the Рынок quadrant */
/* mirror «Рынок» .v4-fill EXACTLY (no padding, no flex-centering) so the meet-fit letterbox matches emission */
.hld-rdr-wrap{flex:1; min-height:0; position:relative; overflow:hidden;}
.hld-rdrsvg{width:100%; height:100%; display:block;}
.hld-rdrsvg .rdr-zone{opacity:.11;}
.hld-rdrsvg .rdr-zone.cs{fill:var(--down);}
.hld-rdrsvg .rdr-zone.sq{fill:var(--up);}
.hld-rdrsvg .rdr-grid{stroke:var(--border); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.5;}
.hld-rdrsvg .rdr-grid.ctr{stroke:var(--text-3); stroke-dasharray:3 3; opacity:.5;}
.hld-rdrsvg .rdr-axt{fill:var(--text-3); font:10px var(--font-mono,monospace); font-variant-numeric:tabular-nums;}
.hld-rdrsvg .rdr-cap{fill:var(--text-disabled); font:9.5px var(--font-mono,monospace);}
/* labels + circles mirror «Карта эмиссии» (.emi-lab / .emi-dot) 1:1 — halo text + semi-transparent
   fill + hairline stroke → identical visibility to the emission quadrant */
.hld-rdrsvg .rdr-lab{fill:var(--text-2); font:11px var(--font-mono,monospace); pointer-events:none;
  paint-order:stroke; stroke:var(--surface-1); stroke-width:2.5px; stroke-linejoin:round;}
.hld-rdrsvg.full .rdr-lab{font-size:8.5px; stroke-width:2px;}
.hld-rdrsvg .rdr-dot{cursor:pointer; stroke:var(--surface-1); stroke-width:.8; fill-opacity:.78;
  transition:fill-opacity var(--dur-2,.15s) var(--ease-std,ease), stroke var(--dur-2,.15s) var(--ease-std,ease);}
.hld-rdrsvg .rdr-dot:hover{fill-opacity:1; stroke:var(--text-1); stroke-width:1.4;}
.hld-rdrsvg .rdr-dot:focus-visible{outline:none; stroke:var(--accent); stroke-width:2;}
.hld-rdrsvg .rdr-dot.flash{animation:rdrflash 1.1s var(--ease-out,ease) 3;}
@keyframes rdrflash{0%{stroke:var(--warn); stroke-width:1;}50%{stroke:var(--warn); stroke-width:4;}100%{stroke:var(--surface-1); stroke-width:1;}}
@media (prefers-reduced-motion:reduce){ .hld-rdrsvg .rdr-dot.flash{animation:none;} }

/* radar EXPAND modal now reuses the «Рынок» quadrant chrome 1:1 — global .cxt-back/.syn-modal +
   .emf-stage/.emf-canvas/.emf-zoom/.emf-hint (v4.css). Only the canvas svg needs sizing + touch-pan. */
#hld-rdr-canvas .hld-rdrsvg{width:100%; height:100%; touch-action:none;}

/* ══════════════════════════ FREE-FLOATING LIQUIDATION-HEATMAP POP-UP ══════════════════════════
   Opened by a radar-bubble click. Draggable (header) + resizable (corner), single instance, floats
   ABOVE the radar expand modal (z 1200) so it can be summoned from either the inline radar or the
   expanded one. Coinglass-grade look in the site palette; opaque hex bg (surface tokens are
   translucent overlays that would bleed the dimmed dashboard through — same gotcha as the radar modal). */
.hld-liqpop{position:fixed; z-index:1300; display:flex; flex-direction:column; min-width:0;
  background:#12151a; border:1px solid var(--border-strong,#2a2f37); border-radius:var(--radius-lg,14px);
  /* deep shadow + a light hairline ring so the window clearly LIFTS off the dark dashboard (a soft dark
     shadow alone is invisible on a dark bg → the window read as docked). */
  box-shadow:0 28px 80px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden; animation:hldPopIn .17s var(--ease-out,cubic-bezier(.2,.7,.3,1));}
:root[data-theme="light"] .hld-liqpop{background:#ffffff; border-color:var(--border-strong,#d8dce2);
  box-shadow:0 28px 70px rgba(20,24,30,.28), 0 4px 14px rgba(20,24,30,.16), 0 0 0 1px rgba(20,24,30,.08);}
@keyframes hldPopIn{from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .hld-liqpop{animation:none;} }
/* header = drag handle (title-bar look) */
.hld-liqpop-hd{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:9px 10px 9px 11px;
  border-bottom:1px solid var(--border-strong); cursor:grab; touch-action:none; user-select:none;
  background:linear-gradient(var(--fill-hover,rgba(255,255,255,.03)), transparent);}
.hld-liqpop-hd:active{cursor:grabbing;}
/* drag-grip dots — an unmistakable "this window moves" affordance */
.hld-liqpop-grip{flex:0 0 auto; width:12px; height:16px; align-self:center; color:var(--text-disabled);
  background-image:radial-gradient(currentColor 1.1px, transparent 1.5px); background-size:5px 5px; background-position:1px 2px;
  opacity:.7;}
.hld-liqpop-hd .lg{width:20px; height:20px; border-radius:999px; overflow:hidden; flex:0 0 auto; background:var(--surface-3);
  display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; color:var(--text-3);}
.hld-liqpop-hd .lg img{width:100%; height:100%; object-fit:cover;}
.hld-liqpop-hd .tt{font-weight:600; font-size:.94rem; color:var(--text-1); flex:0 0 auto;}
.hld-liqpop-hd .mk{font-family:var(--font-mono); font-size:.72rem; color:var(--cat-hl); flex:0 0 auto;}
.hld-liqpop-hd .tot{margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); flex:0 0 auto;}
.hld-liqpop-x{flex:0 0 auto; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-3); cursor:pointer;
  transition:color var(--dur-2,.15s) var(--ease-std,ease), background-color var(--dur-2,.15s) var(--ease-std,ease), border-color var(--dur-2,.15s) var(--ease-std,ease);}
.hld-liqpop-x:hover{color:var(--text-1); background:var(--fill-active); border-color:var(--border-strong);}
.hld-liqpop-x svg{width:14px; height:14px;}
/* sub-header = view switch + long/short split + magnet */
.hld-liqpop-sub{flex:0 0 auto; display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:7px 12px;
  border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:.68rem; color:var(--text-3);}
.hld-liqpop-seg{display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px;}
.hld-liqpop-seg-b{height:24px; padding:0 10px; border:none; background:none; border-radius:3px; cursor:pointer;
  color:var(--text-3); font-family:var(--font-sans); font-size:.72rem; white-space:nowrap;
  transition:color var(--dur-2,.15s) var(--ease-std,ease), background-color var(--dur-2,.15s) var(--ease-std,ease);}
.hld-liqpop-seg-b:hover{color:var(--text-1);}
.hld-liqpop-seg-b.on{color:var(--text-1); background:var(--fill-selected);}
.hld-liqpop-sub .note{color:var(--text-disabled);}
.hld-liqpop-sub .ls{display:inline-flex; align-items:center; gap:5px;}
.hld-liqpop-sub .ls i{width:8px; height:8px; border-radius:2px; flex:0 0 auto;}
.hld-liqpop-sub .ls i.l{background:var(--down-fill);} .hld-liqpop-sub .ls i.s{background:var(--up-fill);}
.hld-liqpop-sub .mg{margin-left:auto; color:var(--cat-hl); white-space:nowrap;}
/* body — heat/list scroll; depth/cumul fill */
.hld-liqpop-body{flex:1; min-height:0; display:flex; overflow:hidden;}
.hld-liqpop-scroll{flex:1; min-height:0; width:100%; overflow-y:auto; overflow-x:hidden; padding:6px 10px 8px;}
.hld-liqpop-body > .hld-liqsvg.depth,.hld-liqpop-body > .hld-liqsvg.cumul{flex:1; min-height:0; width:100%; height:100%; padding:4px 6px;}
.hld-liqpop-scroll .hld-liqsvg.heat{width:100%; height:auto;}
/* resize corner */
.hld-liqpop-rsz{position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; touch-action:none; z-index:2;
  background:linear-gradient(135deg, transparent 0 50%, var(--border-strong) 50% 60%, transparent 60% 72%, var(--border-strong) 72% 82%, transparent 82%);}
@media (prefers-reduced-motion:reduce){ .hld-liqpop{box-shadow:0 12px 40px rgba(0,0,0,.5);} }