/* visor.css — DEX Visor. Layout only; ALL palette/type inherited from tokens.css + base.css
   (+ v4.css in the SPA) so it matches Nidus 1:1. Dark-terminal: feed rail (controller) + a
   TILED SPLIT-PANE chart wall (display). Self-contained — no gridstack, no existing style touched. */

.visor-shell{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ── top bar (standalone visor.html only) ── */
.visor-top{
  display:flex; align-items:center; gap:16px; height:52px; flex:none;
  padding:0 18px; border-bottom:1px solid var(--border); background:rgba(11,13,16,.72);
  backdrop-filter:blur(12px);
}
.visor-top .brand{ display:flex; align-items:center; gap:9px; color:var(--text-1);
  font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.02em; text-decoration:none; }
.visor-top .brand svg{ width:22px; height:22px; color:var(--accent); }
.visor-top .brand .tag{ color:var(--text-3); }
.visor-live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:11px; color:var(--text-3); letter-spacing:.03em; }
.visor-live .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); position:relative; }
.visor-live .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent);
  animation:visor-ring 2s ease-out infinite; }
@keyframes visor-ring{ 0%{transform:scale(1);opacity:.6} 100%{transform:scale(3.2);opacity:0} }
.visor-top .sp{ flex:1; }
.visor-tools{ display:flex; align-items:center; gap:6px; }

/* button controls (reuse the terminal look) */
.vbtn{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-3); background:transparent;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:6px 11px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s; white-space:nowrap; text-decoration:none; }
.vbtn:hover{ color:var(--text-1); border-color:var(--border-hover); }
.vbtn.on{ color:#06201C; background:var(--accent); border-color:var(--accent); }
.vbtn [data-icon]{ display:inline-flex; vertical-align:-2px; }
.vbtn svg{ width:12px; height:12px; }
.vbtn.ic{ padding:0; width:24px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.vbtn.ic svg{ width:14px; height:14px; }

/* ── body split ── (visor-main is BOTH a flex item in its host AND a flex row: feed | canvas) */
.visor-main{ flex:1; display:flex; min-height:0; height:100%; }
.visor-body{ flex:1; min-height:0; display:flex; }
#vw-visor{ padding:0; }
#vw-visor:not([hidden]){ display:flex; height:100%; min-height:0; }

/* ── feed rail (the controller) ── */
.visor-feed{ width:344px; flex:none; border-right:1px solid var(--border); background:var(--surface-1);
  display:flex; flex-direction:column; min-height:0; }
.visor-feed-hd{ flex:none; padding:10px 12px 8px; border-bottom:1px solid var(--border); }
.visor-feed-hd .row1{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.visor-feed-hd .ttl{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-3); }
.visor-freeze{ font-family:var(--font-mono); font-size:10px; color:var(--text-3); display:none; align-items:center; gap:5px; }
.visor-freeze.on{ display:inline-flex; color:var(--warn); }

/* symbol quick-filter (search-on-keystroke) */
.visor-search{ display:flex; align-items:center; gap:7px; margin-bottom:8px; padding:0 9px; height:32px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.visor-search:focus-within{ border-color:var(--accent); }
.visor-search [data-icon]{ color:var(--text-3); display:inline-flex; line-height:0; }
.visor-search svg{ width:14px; height:14px; }
.visor-search input{ flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text-1); font-size:13px; font-family:var(--font-mono); }
.visor-search input::placeholder{ color:var(--text-3); }

/* BUY / SELL / All side selector (segmented, direction-coded) */
.vside{ display:flex; margin-bottom:8px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }
.vsbtn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--text-3);
  background:transparent; border:none; border-right:1px solid var(--border); padding:6px 4px;
  cursor:pointer; transition:color .15s, background .15s, box-shadow .15s; }
.vsbtn:last-child{ border-right:none; }
.vsbtn [data-icon]{ display:inline-flex; line-height:0; }
.vsbtn svg{ width:12px; height:12px; }
.vsbtn:hover{ color:var(--text-1); }
.vsbtn.on{ color:var(--text-1); background:var(--fill-hover); }
.vsbtn.buy.on{ color:var(--up);   background:color-mix(in srgb, var(--up) 12%, transparent);   box-shadow:inset 0 -2px 0 var(--up); }
.vsbtn.sell.on{ color:var(--down); background:color-mix(in srgb, var(--down) 12%, transparent); box-shadow:inset 0 -2px 0 var(--down); }

.visor-pills{ display:flex; flex-wrap:wrap; gap:5px; }
.vpill{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px 10px; cursor:pointer;
  transition:color .15s, border-color .15s; }
.vpill:hover{ color:var(--text-1); }
.vpill.on{ color:var(--accent); border-color:var(--accent); background:var(--accent-tint); }

.visor-newpill{ position:absolute; left:50%; transform:translateX(-50%); top:8px; z-index:5;
  font-family:var(--font-mono); font-size:11.5px; color:#06201C; background:var(--accent);
  border:none; border-radius:var(--radius-pill); padding:5px 13px; cursor:pointer; display:none;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.7); }
.visor-newpill.show{ display:block; }

.visor-feed-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; position:relative; }
.visor-feed-list{ position:relative; }
.visor-feed-empty{ padding:40px 16px; text-align:center; color:var(--text-3); font-size:13px; }

/* ── feed row: [logo] SYM·net ······ $usd / [dot] phrase ······ ago (mirrors the market feed) ── */
.vrow{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; column-gap:9px; row-gap:1px;
  align-items:center; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.05);
  border-left:2px solid transparent; cursor:pointer; transition:background .12s; }
.vrow:hover{ background:var(--fill-hover); }
.vrow.side-buy{ border-left-color:var(--up); }
.vrow.side-sell{ border-left-color:var(--down); }
.vrow.is-open{ border-left-color:var(--accent); background:var(--accent-tint); }
.vrow.is-new{ animation:vrow-flash 1.1s ease-out; }
@keyframes vrow-flash{ 0%{ background:var(--accent-tint); } 100%{ background:transparent; } }

.lg{ position:relative; width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; }
.lg .lgmono{ font:600 9px/1 var(--font-mono); color:var(--text-3); letter-spacing:.02em; }
.lg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--surface-2); }
.lg.lg-mono img{ display:none; }
.vrow .lg{ grid-column:1; grid-row:1 / span 2; }

.vrow .r1{ grid-column:2; grid-row:1; display:flex; align-items:baseline; gap:6px; min-width:0; }
.vrow .r1 .sym{ font-family:var(--font-mono); font-weight:500; font-size:12.5px; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vrow .r1 .net{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); white-space:nowrap; flex:none; }
.vrow .val{ grid-column:3; grid-row:1; justify-self:end; font-family:var(--font-mono); font-size:11.5px;
  color:var(--text-1); font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:8px; }
.vrow .r2{ grid-column:2; grid-row:2; display:flex; align-items:center; gap:6px; min-width:0; }
.vrow .r2 .fdot{ width:7px; height:7px; border-radius:50%; flex:none; }
.vrow .r2 .pt{ font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vrow .ago{ grid-column:3; grid-row:2; justify-self:end; font-family:var(--font-mono); font-size:10px;
  color:var(--text-disabled); white-space:nowrap; padding-left:8px; }

/* ── chart canvas (the display) ── */
.visor-canvas{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg); }
.visor-canvas-bar{ flex:none; display:flex; align-items:center; gap:6px; padding:3px 8px; border-bottom:1px solid var(--border); }
.visor-canvas-bar .vcount{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); padding-left:2px; }
.visor-canvas-bar .sp{ flex:1; }
.visor-tiles-wrap{ flex:1; min-height:0; position:relative; }
/* the chart wall scrolls INDEPENDENTLY (its own scrollbar): rows keep a usable MIN height instead of
   squishing to fit — when the stack is taller than the viewport, the wall scrolls (user 2026-07-11). */
.visor-tiles{ position:absolute; inset:0; display:flex; flex-direction:column; gap:0; padding:8px; overflow-y:auto; overflow-x:hidden; }
.visor-tiles.has-maxed{ overflow:hidden; }
.visor-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; color:var(--text-3); pointer-events:none; }
.visor-empty .h{ color:var(--text-2); font-size:15px; }
.visor-empty .s{ font-size:13px; }
.visor-empty.hide{ display:none; }

/* ── tiled split-pane: rows (flex column) of cells (flex row), splitters between them ── */
.vt-row{ display:flex; flex-direction:row; flex:1 1 0; min-height:320px; min-width:0; }
.vt-cell{ display:flex; flex-direction:column; flex:1 1 0; min-height:0; min-width:0; position:relative; }
.vt-panel{ display:flex; flex-direction:column; width:100%; height:100%; background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; }

/* splitters — the ONLY resize affordance (charts have no edge handles → price axis stays draggable) */
.vt-split{ position:relative; z-index:3; background:transparent; flex:0 0 8px; }
.vt-split::after{ content:""; position:absolute; background:var(--border); border-radius:2px; transition:background .12s; }
.vt-split-v{ cursor:col-resize; }
.vt-split-v::after{ top:6px; bottom:6px; left:3px; right:3px; }
.vt-split-h{ cursor:row-resize; }
.vt-split-h::after{ left:6px; right:6px; top:3px; bottom:3px; }
.vt-split:hover::after{ background:var(--accent); }
body.vt-coldrag, body.vt-coldrag *{ cursor:col-resize !important; user-select:none !important; }
body.vt-rowdrag, body.vt-rowdrag *{ cursor:row-resize !important; user-select:none !important; }

/* panel header (drag-free — buttons only) */
.vt-panel .vw-head{ flex:none; display:flex; align-items:center; gap:8px; padding:6px 8px 6px 10px;
  border-bottom:1px solid var(--border); background:var(--surface-2); cursor:default; user-select:none; }
.vt-panel .vw-logo{ width:16px; height:16px; }
.vt-panel .vw-logo .lgmono{ font-size:7px; }
.vw-sym{ font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--text-1); }
.vw-net{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.vw-sp{ flex:1; }
.vw-x{ background:transparent; border:none; color:var(--text-3); cursor:pointer; padding:3px 4px;
  border-radius:var(--radius-sm); display:inline-flex; line-height:0; transition:color .12s, background .12s; }
.vw-x:hover{ color:var(--text-1); background:var(--fill-hover); }
.vw-x[data-close]:hover{ color:var(--down); }
.vw-x.on{ color:var(--accent); }
.vw-x svg{ width:14px; height:14px; }
.vw-chart{ flex:1; min-height:0; position:relative; }

.vt-panel.vw-flash{ animation:vw-flash .7s ease-out; }
@keyframes vw-flash{ 0%{ box-shadow:0 0 0 2px var(--accent-tint); border-color:var(--accent); } 100%{ box-shadow:none; } }

/* DEX Visor chart-header tweaks — SCOPED to visor panels + floats (the shared token-chart.js and the
   token/event pages are untouched):
   • hide the «События» event-type filter dropdown — this terminal shows only DEX buys/sells, so the
     per-source marker toggle is redundant (markers still render, all types visible by default);
   • tighten the timeframe dropdown — short labels (1м…1Д) don't need the generic 140px popup. */
.vt-panel .tc-evt, .winbox.visor-wb .tc-evt{ display:none !important; }
.vt-panel .tc-tfdd-pop, .winbox.visor-wb .tc-tfdd-pop{ min-width:0 !important; }
.vt-panel .tc-tfdd-pop .tc-tf, .winbox.visor-wb .tc-tfdd-pop .tc-tf{ justify-content:center; padding:0 16px; }
.vt-panel .tc-tfdd .tc-dd-tog, .winbox.visor-wb .tc-tfdd .tc-dd-tog{ padding:0 7px; }
/* drop the «Цветные метки над свечами…» explainer note — it eats vertical space and only shows on
   charts that happen to carry an event (inconsistent between tiles). */
.vt-panel .tc-mk-note, .winbox.visor-wb .tc-mk-note{ display:none !important; }
/* DEX Visor: OHLC readout hidden by default (per-instance class set by token-chart in legMode; the
   in-visor «OHLC» button toggles it back on for that one chart). Volume is off by default too (JS). */
.vw-chart.tc-ohlc-off .tc-readout{ display:none !important; }
/* The shared token-chart uses a FIXED .tc-plot height (392px — sized for the scrolling token page).
   In the visor the chart must FILL its tile: make the host a flex column so the plot flexes to the
   cell height. Without this, stacked tiles can't shrink → rows overflow and borders overlap. Scoped. */
.vt-panel .vw-chart, .winbox.visor-wb .vw-chart{ display:flex; flex-direction:column; overflow:hidden; }
.vt-panel .vw-chart > .tc-plot, .winbox.visor-wb .vw-chart > .tc-plot{ height:auto !important; flex:1 1 0; min-height:0; }

/* maximize — the maxed cell fills the whole wall via absolute positioning (independent of its
   flex-grow, which may carry a fractional value from a prior splitter drag); everything else hidden */
.visor-tiles.has-maxed > .vt-row{ display:none; }
.visor-tiles.has-maxed > .vt-split{ display:none; }
.visor-tiles.has-maxed > .vt-row.has-maxed-cell{ display:block; position:absolute; inset:8px; }
.visor-tiles.has-maxed > .vt-row.has-maxed-cell > .vt-split{ display:none; }
.visor-tiles.has-maxed > .vt-row.has-maxed-cell > .vt-cell{ display:none; }
.visor-tiles.has-maxed > .vt-row.has-maxed-cell > .vt-cell.is-maxed{ display:flex; position:absolute; inset:0; }

/* floating detached chart windows (WinBox) — dark-terminal skin */
.winbox.visor-wb{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:0 28px 70px -28px rgba(0,0,0,.85); }
.winbox.visor-wb .wb-header{ background:var(--surface-2); border-bottom:1px solid var(--border); height:34px; line-height:34px; }
.winbox.visor-wb .wb-title{ font-family:var(--font-mono); font-size:12px; color:var(--text-1); letter-spacing:.02em; }
.winbox.visor-wb .wb-body{ background:var(--bg); }
.winbox.visor-wb .wb-control *{ filter:invert(.85); }

@media (prefers-reduced-motion:reduce){
  .visor-live .dot::after{ display:none; }
  .vrow.is-new{ animation:none; }
}
@media (max-width:820px){
  .visor-feed{ width:100%; position:absolute; z-index:20; height:100%; }
  .visor-canvas{ width:100%; }
}

/* ── per-tx wallet strip («глаза») under each visor chart (GMGN-style single markers) ─────────── */
.vw-wallets{ flex:none; height:132px; min-height:52px; display:flex; flex-direction:column; border-top:1px solid var(--border); background:var(--surface-1); }
.vw-wallets[hidden]{ display:none; }
/* draggable splitter between the chart and its wallet strip → resize the two vertically against each
   other (user 2026-07-11). Hidden when the strip is (no legs). */
.vw-vsplit{ flex:none; height:7px; position:relative; z-index:3; cursor:row-resize; background:transparent; }
.vw-vsplit[hidden]{ display:none; }
.vw-vsplit::after{ content:""; position:absolute; left:10px; right:10px; top:3px; height:1px; background:var(--border); border-radius:2px; transition:background .12s; }
.vw-vsplit:hover::after{ background:var(--accent); height:2px; top:2px; }

/* GMGN-style per-tx bubble hover tooltip — self-contained so the STANDALONE visor.html (which does not
   load components.css) styles it too; identical values to components.css so the SPA is unaffected. */
.tc-mk-tip{ position:absolute; z-index:7; min-width:150px; max-width:250px; padding:9px 11px; pointer-events:auto;
  background:var(--surface-4, #1a1d24); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  box-shadow:0 12px 32px -10px rgba(0,0,0,.7); font-size:.75rem; color:var(--text-2); }
.tc-mk-tip .h{ display:flex; align-items:center; gap:6px; color:var(--text-1); font-weight:600; margin-bottom:4px; }
.tc-mk-tip .h .sw{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.tc-mk-tip .r{ margin-top:2px; } .tc-mk-tip .r.muted{ color:var(--text-3); }
.tc-mk-tip .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.tc-mk-tip .go{ display:inline-block; margin-top:8px; color:var(--accent); font-size:.6875rem; cursor:pointer; }
.tc-mk-tip .go:hover{ color:var(--accent-hover); }
.vw-wh{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 8px; border-bottom:1px solid var(--border); }
.vw-wht{ font-family:var(--font-mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.03em; }
.vw-wall{ font-family:var(--font-mono); font-size:10px; color:var(--text-3); background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); padding:1px 6px; cursor:pointer; }
.vw-wall:hover{ color:var(--text-1); border-color:var(--border-hover); }
.vw-wlist{ flex:1; min-height:0; overflow-y:auto; }
.vw-wrow{ display:grid; grid-template-columns:22px 1fr auto auto; align-items:center; gap:6px; padding:2px 8px 2px 6px;
  font-family:var(--font-mono); font-size:11px; border-left:2px solid transparent; }
.vw-wrow.side-buy{ border-left-color:var(--up); }
.vw-wrow.side-sell{ border-left-color:var(--down); }
.vw-wrow.off{ opacity:.42; }
.vw-eye{ width:20px; height:18px; display:inline-flex; align-items:center; justify-content:center; padding:0;
  color:var(--text-3); background:transparent; border:none; cursor:pointer; }
.vw-eye:hover{ color:var(--text-1); }
.vw-eye svg{ width:13px; height:13px; }
.vw-wa{ color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.vw-wa:hover{ color:var(--text-1); text-decoration:underline; }
.vw-wa.copied{ color:var(--up); text-decoration:none; }
.vw-wa.copied::after{ content:' ✓'; }
.vw-wc{ color:var(--text-3); font-size:10px; }
.vw-wu{ color:var(--text-1); font-variant-numeric:tabular-nums; }
/* row highlighted from a chart-circle hover (or hovered directly) */
.vw-wrow.hl, .vw-wrow:hover{ background:var(--surface-2); }

/* ── feed-row chart-add button (4th grid column) ─────────────────────────────── */
.vrow{ grid-template-columns:26px minmax(0,1fr) auto 26px; }
.vrow-add{ grid-column:4; grid-row:1 / span 2; align-self:center; justify-self:center;
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:var(--radius-sm); background:transparent;
  color:var(--text-3); opacity:.5; cursor:pointer; transition:opacity .12s, color .12s, background .12s; }
.vrow:hover .vrow-add{ opacity:1; }
.vrow-add:hover{ color:var(--accent); border-color:var(--border-hover); background:var(--surface-2); }
.vrow.is-open .vrow-add{ color:var(--accent); opacity:.85; }
.vrow-add svg{ width:14px; height:14px; }

/* ── event drawer (side card) ────────────────────────────────────────────────── */
.visor-main{ position:relative; }
.visor-drawer{ position:absolute; top:0; bottom:0; left:344px; width:342px; max-width:calc(100% - 344px);
  background:var(--surface-1); border-right:1px solid var(--border); box-shadow:10px 0 30px rgba(0,0,0,.32);
  z-index:20; display:flex; flex-direction:column;
  transform:translateX(-14px); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .16s ease, opacity .16s ease, visibility 0s linear .16s; }
.visor-drawer.open{ transform:none; opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .16s ease, opacity .16s ease; }
.vd-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; }
.vd-card{ padding:12px 14px 18px; }
.vd-hd{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.vd-logo{ width:30px; height:30px; flex:none; }
.vd-logo .lgmono{ font-size:8px; }
.vd-hdt{ display:flex; flex-direction:column; min-width:0; }
.vd-sym{ font-family:var(--font-mono); font-weight:600; font-size:15px; color:var(--text-1); line-height:1.15; }
.vd-net{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.vd-side{ font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.04em;
  padding:2px 7px; border-radius:var(--radius-sm); border:1px solid transparent; }
.vd-side.buy{ color:var(--up); border-color:var(--up); }
.vd-side.sell{ color:var(--down); border-color:var(--down); }
.vd-x{ margin-left:auto; flex:none; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--text-3); cursor:pointer; border-radius:var(--radius-sm); }
.vd-x:hover{ color:var(--text-1); background:var(--surface-2); }
.vd-x svg{ width:15px; height:15px; }
.vd-usd{ font-family:var(--font-mono); font-size:23px; font-weight:600; color:var(--text-1);
  display:flex; align-items:baseline; gap:9px; line-height:1.1; }
.vd-cnt{ font-size:11px; font-weight:400; color:var(--text-3); }
.vd-phrase{ display:flex; align-items:center; gap:7px; margin-top:8px; font-size:12.5px; color:var(--text-2); }
.vd-phrase .fdot{ width:7px; height:7px; border-radius:50%; flex:none; }
.vd-time{ display:flex; align-items:center; gap:6px; margin-top:7px; font-family:var(--font-mono);
  font-size:10.5px; color:var(--text-3); }
.vd-time svg{ width:12px; height:12px; }
.vd-stats{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.vd-stat{ flex:1 1 120px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:7px 10px; display:flex; flex-direction:column; gap:3px; }
.vd-stat span{ font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.03em; }
.vd-stat b{ font-family:var(--font-mono); font-size:13px; color:var(--text-1); font-weight:600; }
.vd-open{ margin-top:14px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 12px; border-radius:var(--radius-md); font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  color:#06201C; background:var(--accent); border:1px solid var(--accent); cursor:pointer; transition:filter .12s; }
.vd-open:hover{ filter:brightness(1.06); }
.vd-open.is-open{ color:var(--text-2); background:transparent; border-color:var(--border-hover); }
.vd-open.is-open:hover{ color:var(--text-1); filter:none; background:var(--surface-2); }
.vd-open svg{ width:14px; height:14px; }
.vd-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.vd-lnk{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--text-3); text-decoration:none;
  padding:4px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); transition:color .12s, border-color .12s; }
.vd-lnk:hover{ color:var(--text-1); border-color:var(--border-hover); }
.vd-lnk svg{ width:11px; height:11px; }
.vd-wal{ margin-top:16px; }
.vd-walh{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-3); margin-bottom:7px; }
.vd-wrow{ display:flex; align-items:center; gap:8px; padding:5px 7px; border-left:2px solid transparent;
  border-radius:var(--radius-sm); }
.vd-wrow:hover{ background:var(--surface-2); }
.vd-wrow.side-buy{ border-left-color:var(--up); }
.vd-wrow.side-sell{ border-left-color:var(--down); }
.vd-wa{ font-family:var(--font-mono); font-size:11px; color:var(--text-2); cursor:pointer; }
.vd-wa:hover{ color:var(--text-1); text-decoration:underline; }
.vd-wa.copied{ color:var(--up); text-decoration:none; }
.vd-wa.copied::after{ content:' ✓'; }
.vd-wc{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); margin-left:auto; }
.vd-wu{ font-family:var(--font-mono); font-size:11px; color:var(--text-1); min-width:56px; text-align:right;
  font-variant-numeric:tabular-nums; }