/* ============================================================================
   components.css — component layer (LOCKED design spec §5,6)
   ========================================================================== */

/* ---------------------------------------------------------------- Top Nav */
.nav{position:sticky; top:0; z-index:50; width:100%;
  background:transparent; border-bottom:1px solid var(--border);}
/* The blur lives on a SEPARATE pseudo-element layer BEHIND the content — never on .nav
   itself. When a navbar control repaints on hover (theme-toggle, CTA buttons, links), only
   the content layer repaints; the backdrop-filter layer is untouched, so Chromium never
   re-samples the blur → no "broken pixel" flicker on mouse-over. (backdrop-filter ON .nav +
   animating descendants flashed; transform/isolation on .nav don't fix it AND establish a
   backdrop-root that would break the blur — the filter must sit on a sibling layer.) z-index:-1
   places it below the nav content; .nav itself sets NO backdrop-root (plain position+z-index),
   so the ::before still blurs the page scrolling beneath it. */
.nav::before{content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(11,13,16,0.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
/* Onest gives the header its own premium voice, distinct from the Geist body.
   Scoped to the nav only; mono elements (search kbd/meta) re-declare --font-mono. */
.nav-inner{height:var(--nav-h); display:flex; align-items:center; gap:var(--space-8); font-family:var(--font-nav);}
.nav-logo{display:flex; align-items:center; gap:var(--space-3); color:var(--text-1); font-weight:600; letter-spacing:-0.02em;}
.nav-logo:hover{color:var(--text-1);}
.nav-logo .mark{width:24px; height:24px; color:var(--accent);}
.nav-logo .mark svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.5;}
/* Synapse brand — hex-node mark (monochrome, crisp) + SYNAPSE wordmark (rebrand 2026-06-08) */
.nav-logo{gap:var(--space-2);}
.nav-logo .brand-mark{width:26px; height:26px; color:var(--text-1); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;}
.nav-logo .brand-mark svg{width:100%; height:100%;}
.nav-logo .wm{font-family:var(--font-display,'Space Grotesk',monospace); font-weight:500; font-size:.9375rem; letter-spacing:.2em; padding-left:.2em; text-transform:uppercase; color:var(--text-1); line-height:1;}
.nav-links{display:flex; align-items:center; gap:var(--space-6);}
/* nav is PRIMARY navigation — small + medium-weight + slightly tracked + bright
   reads premium; large + regular + dim reads generic. Active by COLOR, not weight
   (weight-on-hover shifts layout). (research 2026-06-03) */
.nav-link{font-size:.8125rem; font-weight:500; letter-spacing:0.01em; color:var(--text-2);
  display:inline-flex; align-items:center; height:var(--nav-h); position:relative; transition:color var(--dur-2) var(--ease-std);}
.nav-link:hover{color:var(--text-1);}
.nav-link.is-active{color:var(--text-1);}
.nav-link.is-active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);}
.nav-right{display:flex; align-items:center; gap:var(--space-5); margin-inline-start:var(--space-2);}
.nav-toggle{display:none; width:40px; height:40px; align-items:center; justify-content:center; color:var(--text-2); border-radius:var(--radius-sm);}
.nav-toggle svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.5;}

/* ---- Live status mark ---- */
.live{display:inline-flex; align-items:center; gap:var(--space-2); font-size:.75rem; color:var(--text-3);}
.live .dot{position:relative; width:8px; height:8px; border-radius:var(--radius-pill); background:var(--accent); flex:0 0 auto;}
.live .dot::after{content:""; position:absolute; inset:0; border-radius:var(--radius-pill); background:var(--accent); animation:pulse-ring 2s var(--ease-out) infinite;}
@keyframes pulse-ring{0%{opacity:.5; transform:scale(1);} 100%{opacity:0; transform:scale(2.6);}}
/* age-driven liveness (classes set by app.js tickClock): aging = solid dot, stale = amber, no ring */
.live.is-aging .dot::after,.live.is-stale .dot::after{animation:none; opacity:0;}
.live.is-stale .dot{background:var(--warn);}
.live .t{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------- Buttons */
/* Premium = WEIGHT + CALM, not snap. Substance comes from a grounding drop-shadow
   (the button casts onto the surface) + a top sheen, present at REST — a flat bright
   fill reads light. Motion is slow + smooth (200–300ms, gentle cubic-bezier(.4,0,.2,1)),
   and the button stays GROUNDED on hover (NO lift — a rising button feels floaty/light);
   it just brightens and its glow deepens in place. Press sinks gently (scale .985).
   No fast snap, no obvious jump. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-size:.875rem; font-weight:500; padding:10px 16px; border-radius:var(--radius-sm);
  transition:transform var(--dur-3) cubic-bezier(.4,0,.2,1),
             box-shadow var(--dur-4) cubic-bezier(.4,0,.2,1),
             background-color var(--dur-3) cubic-bezier(.4,0,.2,1),
             border-color var(--dur-3) cubic-bezier(.4,0,.2,1),
             color var(--dur-2) var(--ease-std);
  white-space:nowrap; border:1px solid transparent;}
.btn svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.5;
  transition:transform var(--dur-3) cubic-bezier(.4,0,.2,1);}
/* primary CTA — weight from a GROUNDING (dark) shadow + top sheen; hover DEEPENS the
   shadow in place (no lift); press sinks slightly. No accent-coloured glow: a blurry
   teal box-shadow on a button sitting inside the backdrop-filter header smeared into
   turquoise fringe pixels at the blur edge on scroll/hover — the dark shadow gives the
   weight without any colour to bleed. */
.btn-primary{background:var(--accent); color:var(--accent-ink);
  box-shadow:0 2px 5px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22);}
.btn-primary:hover{background:var(--accent-hover); color:var(--accent-ink);
  box-shadow:0 4px 10px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.26);}
.btn-primary:active{background:var(--accent-active); transform:scale(.985);
  box-shadow:0 1px 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);}
/* trailing arrow — a gentle directional drift on hover (rides the same calm curve) */
.btn-primary:hover svg[data-icon="arrow-right"]{transform:translateX(2px);}
/* ghost — grounded too: settles into a soft elevation on hover, gentle sink on press */
.btn-ghost{background:transparent; border-color:var(--border-strong); color:var(--text-1);}
.btn-ghost:hover{border-color:var(--border-hover); background:var(--fill-hover); color:var(--text-1);
  box-shadow:var(--elev-1);}
.btn-ghost:active{transform:scale(.985); box-shadow:none;}
.btn-sm{padding:7px 12px; font-size:.8125rem;}
.btn[disabled]{background:var(--surface-2); color:var(--text-disabled); border-color:transparent;
  cursor:not-allowed; transform:none; box-shadow:none;}
@media (prefers-reduced-motion:reduce){
  .btn,.btn svg{transition-property:background-color,border-color,color,box-shadow;}
  .btn:active{transform:none;}
  .btn-primary:hover svg[data-icon="arrow-right"]{transform:none;}
}

/* ---------------------------------------------------------------- Hero */
.hero{padding-block:clamp(5rem, 12vw, 10rem) var(--space-24); position:relative;}
.hero-eyebrow{margin-bottom:var(--space-5);}
.hero-title{max-width:18ch;}
.hero-title .accent{color:var(--accent);}
.hero-sub{margin-top:var(--space-6); max-width:54ch; font-size:clamp(1rem,1.6vw,1.125rem); color:var(--text-2); line-height:1.55;}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8);}
.hero-live{margin-top:var(--space-8);}

.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:var(--space-6); margin-top:var(--space-16);
  border-top:1px solid var(--border); padding-top:var(--space-8);}
.kpi-item{display:flex; flex-direction:column; gap:var(--space-2);}
.kpi-item .label{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);}
.kpi-item .kpi .unit{color:var(--text-3); font-size:.7em; margin-inline-start:2px;}

/* ---------------------------------------------------------------- Section heads */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-8); flex-wrap:wrap;}
.sec-head p{color:var(--text-3); max-width:52ch; margin-top:var(--space-2);}

/* ---------------------------------------------------------------- Toolbar (search/filter) */
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6);}
.search{display:flex; align-items:center; gap:var(--space-2); height:40px; padding:0 12px; min-width:240px; flex:1 1 280px;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); transition:border-color var(--dur-2) var(--ease-std);}
.search:focus-within{border-color:var(--border-hover); box-shadow:none;}
.search svg{width:16px; height:16px; stroke:var(--text-3); stroke-width:1.5; flex:0 0 auto;}
.search input{flex:1; background:none; border:none; outline:none; color:var(--text-1); font-size:.875rem;}
.search input::placeholder{color:var(--text-3);}
.search input:focus-visible{box-shadow:none;}
.chips{display:flex; flex-wrap:wrap; gap:var(--space-2);}
.chip{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; font-size:.8125rem; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.chip:hover{color:var(--text-1); border-color:var(--border-hover);}
.chip.is-active{color:var(--accent); background:var(--accent-tint); border-color:var(--accent);}
/* custom market-cap range (от/до, in $M) — sits under the cap preset chips */
.mcap-range{display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4);}
.mcap-range-l{font-size:.8125rem; color:var(--text-3);}
.mcap-range-sep{color:var(--text-3);}
.mcap-range input{width:88px; height:32px; padding:0 10px; background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-1); font-size:.8125rem; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-2) var(--ease-std);}
.mcap-range input:hover{border-color:var(--border-hover);}
.mcap-range input:focus-visible{border-color:var(--accent); outline:none; box-shadow:none;}
.chip .cdot{width:6px; height:6px; border-radius:var(--radius-pill); flex:0 0 auto;}
.select{position:relative; display:inline-flex; align-items:center;}
.select select{appearance:none; -webkit-appearance:none; height:40px; padding:0 34px 0 12px; font-size:.8125rem; color:var(--text-1);
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;}
.select select:hover{border-color:var(--border-hover);}
.select .chev{position:absolute; right:10px; pointer-events:none;}
.select .chev svg{width:16px; height:16px; stroke:var(--text-3); stroke-width:1.5;}

/* ---------------------------------------------------------------- Chain badge / token logo */
.tlogo{position:relative; width:32px; height:32px; flex:0 0 auto;}
.tlogo .tlogo-img{position:absolute; inset:0; width:100%; height:100%; border-radius:var(--radius-pill); object-fit:cover; background:var(--surface-2); border:1px solid var(--border-strong);}
.tlogo .mono-chip{width:32px; height:32px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.6875rem; font-weight:500; color:var(--text-1); letter-spacing:0;}
.tlogo .net{position:absolute; right:-2px; bottom:-2px; width:14px; height:14px; border-radius:var(--radius-pill);
  border:1.5px solid var(--bg);}
.chain-pill{display:inline-flex; align-items:center; gap:5px; font-size:.6875rem; font-family:var(--font-mono); color:var(--text-3); letter-spacing:0;}
.chain-pill .cdot{width:6px; height:6px; border-radius:var(--radius-pill);}
.chain-row{display:flex; flex-wrap:wrap; gap:var(--space-3);}

/* ---------------------------------------------------------------- Token grid + card */
.token-grid{display:grid; gap:clamp(1rem,1.5vw,1.5rem); grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr));}
.token-grid > *{min-width:0;}
/* layout only — surface/border/hover delegated to .card-premium (see below) */
.token-card{display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-6); color:var(--text-2);}
/* SCOPED to .token-card: the price-chart component reuses the bare `.tc-head` class with
   justify-content:space-between + flex-wrap (see «PRICE CHART» section). The CASCADE IS
   PER-PROPERTY — scoping alone wasn't enough: this higher-specificity rule didn't DECLARE
   justify-content, so the chart's space-between still won that property and shoved multi-chain
   cards' names to the far edge. We must EXPLICITLY reset justify-content + flex-wrap here. */
.token-card .tc-head{display:flex; align-items:center; gap:var(--space-3); justify-content:flex-start; flex-wrap:nowrap;}
.tc-id{min-width:0; flex:0 1 auto;}
.tc-id .sym{font-size:1.125rem; font-weight:600; color:var(--text-1); line-height:1.2;}
.tc-id .nm{font-size:.8125rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:var(--space-1);}
.token-card .tc-head .tc-chains{margin-inline-start:auto; display:flex; gap:var(--space-2); flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto;}
.tc-metric{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);}
.tc-metric .v{font-family:var(--font-display); font-size:1.75rem; font-weight:500; color:var(--text-1); font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; letter-spacing:-.02em;}
.tc-metric .l{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);}
.tc-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--border);}
.tc-foot .usd{font-family:var(--font-mono); color:var(--text-2); font-variant-numeric:tabular-nums; font-size:.875rem;}
.tc-foot .ago{font-size:.6875rem; color:var(--text-3); font-family:var(--font-mono);}

/* ---------------------------------------------------------------- Gauge (role=meter) */
.gauge{display:block; height:8px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.06); overflow:hidden; width:100%;}
.gauge .fill{display:block; height:100%; border-radius:var(--radius-pill); width:0;
  transition:width var(--dur-6) cubic-bezier(0.4,0,0.2,1);}
.gauge-row{display:flex; align-items:center; gap:var(--space-3);}
.gauge-row .pct{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.875rem; color:var(--text-1); flex:0 0 auto; min-width:52px; text-align:right;}

/* ---------------------------------------------------------------- Stacked breakdown bar */
.stack-bar{display:flex; height:30px; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); width:100%;}
.stack-bar > span{display:block; min-width:2px; border-right:1px solid var(--bg);}
.stack-bar > span:last-child{border-right:none;}
.legend{display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); margin-top:var(--space-4);}
.legend .item{display:inline-flex; align-items:center; gap:var(--space-2); font-size:.8125rem; color:var(--text-2);}
.legend .item .n{font-family:var(--font-mono); color:var(--text-3); font-variant-numeric:tabular-nums; margin-inline-start:2px;}

/* ---- Shared viz primitives — ONE square key swatch + ONE key→value tooltip row, used by
   every legend / key / graph / chart tooltip. (Chain dots stay round 6px via .cdot/.tdot —
   a deliberately different concept: chain identity, not a category key.) ---- */
.key-sw,.legend .sw,.cg-legend .sw,.cg-tip-h .sw,.tc-mk-tip .h .sw,.chip.cat .sq,.srow .m{width:10px; height:10px; border-radius:3px; flex:0 0 auto;}
.tip-row{display:flex; justify-content:space-between; gap:var(--space-4); align-items:baseline; line-height:1.5;}
.tip-row .k{color:var(--text-3);}
.tip-row .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums slashed-zero; color:var(--text-1);}

/* ---------------------------------------------------------------- Sparkline */
.spark{width:120px; height:24px; flex:0 0 auto;}
.spark polyline{stroke:#6B7280; stroke-opacity:.7; stroke-width:1.5; fill:none;}
.spark circle{fill:var(--accent);}

/* ---------------------------------------------------------------- Dense table */
.table-wrap{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-xs);}
.table{width:100%; border-collapse:collapse; font-size:.875rem;}
.table thead th{position:sticky; top:var(--nav-h); background:var(--surface-1); z-index:1;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);
  text-align:left; padding:10px 16px; border-bottom:1px solid var(--border-strong); white-space:nowrap;}
.table tbody td{padding:9px 16px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--text-2); vertical-align:middle;}
.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr{transition:background-color var(--dur-2) var(--ease-std);}
.table tbody tr:hover{background:var(--fill-hover);}
.table .num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-1);}
.table th.num{text-align:right;}
.table .addr{font-family:var(--font-mono); color:var(--text-2);}

/* ---------------------------------------------------------------- Tabs */
.tabs{display:flex; gap:var(--space-6); border-bottom:1px solid var(--border); margin-bottom:var(--space-8);}
.tab{font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);
  padding:var(--space-3) 0; position:relative; cursor:pointer; transition:color var(--dur-2) var(--ease-std); white-space:nowrap;}
.tab:hover{color:var(--text-2);}
.tab.is-active{color:var(--text-1);}
.tab.is-active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent);}
.tabpanel{display:none;}
.tabpanel.is-active{display:block;}

/* ---------------------------------------------------------------- Catalog + paywall */
.catalog{position:relative; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-xs);}
.cat-row{display:grid; grid-template-columns:1.6fr 1fr .8fr .9fr; gap:var(--space-4); align-items:center;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.06); transition:background-color var(--dur-2) var(--ease-std);}
.cat-row:last-child{border-bottom:none;}
.cat-row.head{background:var(--surface-1); border-bottom:1px solid var(--border-strong);}
.cat-row.head > *{font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);}
.cat-row .wallet{display:flex; align-items:center; gap:var(--space-2); min-width:0;}
.cat-row .wallet .addr{font-family:var(--font-mono); font-size:.8125rem; color:var(--text-1); overflow:hidden; text-overflow:ellipsis;}
.cat-row .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; color:var(--text-2);}
.cat-row.teaser:hover{background:var(--fill-hover);}
/* unlocked catalog: a count·total·sort toolbar above a bounded, scroll-contained
   pane (sticky header) — 100+ wallets stay in a compact card, not an endless page. */
.cat-toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; margin-bottom:var(--space-3);}
.cat-sum{font-size:.8125rem; color:var(--text-3);}
.cat-sum .num{color:var(--text-1); font-weight:500; font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.cat-sort-wrap{flex:0 0 auto;}
.catalog-scroll{max-height:560px; overflow-y:auto; overscroll-behavior:contain;}
.catalog-scroll .cat-row.head{position:sticky; top:0; z-index:2;}

/* paywall: real layout, content withheld (NOT in DOM as text); structure crisp */
.paywall{position:relative; min-height:220px;}
.paywall .locked-rows{filter:blur(6px); user-select:none; pointer-events:none; overflow:hidden;}
.paywall .veil{position:absolute; inset:0; background:var(--surface-2); opacity:.35; pointer-events:none;}
.lock-card{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-4);
  background:var(--surface-3); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:var(--space-8) var(--space-10); max-width:360px; box-shadow:var(--elev-2);}
.lock-card .ic{width:40px; height:40px; border-radius:var(--radius-pill); background:var(--accent-tint); display:flex; align-items:center; justify-content:center;}
.lock-card .ic svg{width:18px; height:18px; stroke:var(--accent); stroke-width:1.5;}
.lock-card .n{font-size:1.125rem; font-weight:600; color:var(--text-1);}
.lock-card .n .num{font-family:var(--font-mono); color:var(--accent);}
.lock-card p{font-size:.8125rem; color:var(--text-3);}

/* ---------------------------------------------------------------- Digest list */
.digest{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-xs); overflow:hidden;}
.digest-item{display:grid; grid-template-columns:auto auto 1fr auto; gap:var(--space-4); align-items:center;
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); transition:background-color var(--dur-2) var(--ease-std);}
.digest-item:last-child{border-bottom:none;}
.digest-item:hover{background:var(--fill-hover);}
.digest-item .time{font-family:var(--font-mono); font-size:.75rem; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums;}
.digest-item .summary{color:var(--text-2); font-size:.875rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.digest-item .summary b{color:var(--text-1); font-weight:600;}
.digest-item .usd{font-family:var(--font-mono); color:var(--text-1); font-variant-numeric:tabular-nums; font-size:.875rem; white-space:nowrap;}
.digest-item.is-new{animation:new-flash 1.2s var(--ease-out) 1;}
@keyframes new-flash{0%{box-shadow:inset 2px 0 0 var(--accent);} 100%{box-shadow:inset 2px 0 0 transparent;}}

/* ---------------------------------------------------------------- Badges / tags */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:.6875rem; font-weight:500; padding:3px 8px; border-radius:var(--radius-sm);
  border:1px solid var(--border); color:var(--text-2); white-space:nowrap; letter-spacing:0.01em;}
.tag .tdot{width:6px; height:6px; border-radius:var(--radius-pill); flex:0 0 auto;}
.badge-ic{display:inline-flex; vertical-align:middle; margin-inline-start:4px;}
.badge-ic svg{width:14px; height:14px; stroke-width:1.5;}
.badge-verified svg{stroke:var(--accent);}
.badge-inferred{color:var(--text-3);}
.badge-inferred svg{stroke:var(--text-3);}

/* ---------------------------------------------------------------- Methodology */
.prose > * + *{margin-top:var(--space-5);}
.prose h2{margin-top:var(--space-12);}
.prose h3{margin-top:var(--space-8);}
.prose p,.prose li{color:var(--text-2); line-height:1.65;}
.prose ul{display:flex; flex-direction:column; gap:var(--space-2);}
.prose li{position:relative; padding-left:var(--space-5);}
.prose li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:var(--radius-pill); background:var(--text-disabled);}
.prose code{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1px 6px; font-size:.85em; color:var(--text-1);}
.callout{background:var(--surface-1); border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6);}
.callout .h{display:flex; align-items:baseline; gap:var(--space-3); font-weight:600; color:var(--text-1); margin-bottom:var(--space-2);}

/* Disclaimer — understated premium disclosure note (icon disc + caps eyebrow +
   cool-slate copy on a flat tinted surface; no heavy card, no stray accent rail). */
.disclaimer{display:flex; gap:var(--space-4); align-items:flex-start;
  padding:var(--space-5) var(--space-6); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface-1) 60%, transparent);
  border:1px solid var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.disclaimer .ic{flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--radius-pill); color:var(--text-2);
  background:color-mix(in srgb, var(--text-3) 12%, transparent);
  box-shadow:inset 0 0 0 1px var(--border);}
.disclaimer .ic svg{width:16px; height:16px; stroke-width:1.6;}
.disclaimer .h{font-size:.6875rem; font-weight:600; letter-spacing:var(--track-caps-lg);
  text-transform:uppercase; color:var(--text-2); margin-bottom:4px;}
.disclaimer p{font-size:.8125rem; line-height:1.6; color:var(--text-3); max-width:64ch; text-wrap:pretty;}

/* ---------------------------------------------------------------- Footer */
.footer{border-top:1px solid var(--border); background:var(--bg); padding-block:var(--space-16); margin-top:var(--space-32);}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:var(--space-8);}
.footer-brand .desc{color:var(--text-3); font-size:.875rem; margin-top:var(--space-3); max-width:32ch;}
.footer h5{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3); margin-bottom:var(--space-4); font-weight:500;}
.footer .col a{display:block; color:var(--text-2); font-size:.875rem; padding:var(--space-1) 0;}
.footer .col a:hover{color:var(--text-1);}
.footer-bottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4);
  margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--border); color:var(--text-3); font-size:.75rem;}
.footer-bottom .mono{font-family:var(--font-mono);}
.footer-bottom .colophon{color:var(--text-3); margin-inline:auto;}    /* author credit / colophon — centered between © and legal links */
.footer-bottom .colophon b{color:var(--text-2); font-weight:500;}
a.colophon{transition:color var(--dur-2) var(--ease-std);}
a.colophon:hover{color:var(--text-2);} a.colophon:hover b{color:var(--text-1);}

/* ---------------------------------------------------------------- footer legal links + policy modal (guest pages) */
.footer-legal{display:inline-flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;}
.lgl-link{background:none; border:none; padding:0; margin:0; cursor:pointer; font:inherit; font-size:.75rem;
  color:var(--text-3); transition:color var(--dur-2) var(--ease-std);}
.lgl-link:hover{color:var(--text-1);}
.lgl-link:focus-visible{box-shadow:var(--focus-ring); border-radius:var(--radius-sm);}
/* центрируем ЯВНО: глобальный сброс base.css `*{margin:0}` съедает UA-шный dialog{margin:auto}
   → без этого модалка прилипает в левый верхний угол (inset:0 + margin:0). */
dialog.lgl-modal{position:fixed; inset:0; margin:auto; width:min(92vw,var(--container-prose)); max-height:min(84vh,720px);
  padding:0; border:none; background:transparent; color:var(--text-2);}
dialog.lgl-modal::backdrop{background:rgba(6,8,11,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
dialog.lgl-modal[open]{animation:lglin var(--dur-4) var(--ease-out);}
@keyframes lglin{from{opacity:0; transform:translateY(10px) scale(.99);} to{opacity:1; transform:none;}}
.lgl-card{position:relative; background:var(--surface-3); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); box-shadow:var(--elev-2); max-height:inherit; display:flex; flex-direction:column; overflow:hidden;}
.lgl-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-6) var(--space-6) var(--space-4); border-bottom:1px solid var(--border);}
.lgl-head h3{color:var(--text-1); font-size:1.125rem; letter-spacing:-.01em;}
.lgl-x{flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:var(--radius-sm);
  background:none; border:1px solid var(--border); color:var(--text-3); cursor:pointer;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);}
.lgl-x:hover{color:var(--text-1); border-color:var(--border-hover);}
.lgl-x svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round;}
.lgl-body{padding:var(--space-6); overflow-y:auto;}
.lgl-body h4{color:var(--text-1); font-size:.9375rem; font-weight:600; margin:var(--space-5) 0 var(--space-2);}
.lgl-body h4:first-child{margin-top:0;}
.lgl-body p{color:var(--text-2); font-size:.875rem; line-height:1.65;}
.lgl-body p + p{margin-top:var(--space-3);}
.lgl-body a{color:var(--accent);}
.lgl-body ul{margin-top:var(--space-2); display:flex; flex-direction:column; gap:var(--space-2);}
.lgl-body li{position:relative; padding-left:var(--space-5); color:var(--text-2); font-size:.875rem; line-height:1.6;}
.lgl-body li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:var(--radius-pill); background:var(--text-disabled);}
.lgl-body .upd{margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border); font-size:.75rem; color:var(--text-3);}
@media (prefers-reduced-motion:reduce){ dialog.lgl-modal[open]{animation:none;} }

/* ---------------------------------------------------------------- Skeleton */
.skeleton{background:var(--surface-2); border-radius:var(--radius-sm); animation:sk 1.4s var(--ease-std) infinite;}
@keyframes sk{0%,100%{opacity:.4;} 50%{opacity:.7;}}

/* ---------------------------------------------------------------- Detail header */
.detail-head{display:flex; align-items:flex-start; gap:var(--space-5); flex-wrap:wrap;}
.detail-head .tlogo{width:48px; height:48px;}
.detail-head .tlogo .mono-chip{width:48px; height:48px; font-size:.875rem;}
.detail-head .tlogo .net{width:18px; height:18px;}
.detail-id .sym{font-size:clamp(1.75rem,4vw,2.25rem); font-weight:600; color:var(--text-1); line-height:1.1;}
.detail-id .nm{color:var(--text-3); margin-top:var(--space-2);}  /* identity → classification: breathing room (was 2px) */
.detail-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-6); margin-top:var(--space-8);
  border-block:1px solid var(--border); padding-block:var(--space-6);}
.detail-stats .s .l{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);}
.detail-stats .s .v{font-family:var(--font-display); font-size:1.375rem; color:var(--text-1); margin-top:var(--space-1); font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; letter-spacing:-.01em;}
.detail-stats .s .v .u{font-family:var(--font-sans); font-size:.75rem; font-weight:500; color:var(--text-3); letter-spacing:0; vertical-align:baseline; margin-inline-start:3px;}
.ec-dir.up{color:var(--up);} .ec-dir.down{color:var(--down);}

/* «О проекте» in the header — blurb (under the token name, clamped to 2 lines) + compact socials (#4) */
.detail-desc{font-size:.875rem; line-height:1.55; color:var(--text-2); margin-top:var(--space-3); max-width:68ch;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.detail-socials{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3);}
.about-link{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; font-size:.75rem; color:var(--text-2);
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.about-link:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--surface-2);}
.about-link svg{width:12px; height:12px; stroke-width:1.75;}
.copy-addr{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.8125rem; color:var(--text-2); cursor:pointer; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 8px;}
.copy-addr:hover{border-color:var(--border-hover); color:var(--text-1);}
.copy-addr svg{width:13px; height:13px; stroke:var(--text-3); stroke-width:1.5;}
.copy-addr.copied svg{stroke:var(--up);}

.panel{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-6);}
.panel-title{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3); margin-bottom:var(--space-5);}

/* Bubblemaps embedded cluster map (lazy iframe on demand) */
.bm-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-5);}
.bm-embed{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3);
  aspect-ratio:16/10; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
.bm-embed.loaded{gap:0;}
.bm-hint{font-size:.8125rem; color:var(--text-3); text-align:center; max-width:40ch;}
.bm-frame{width:100%; height:100%; border:0; display:block;}
@media (max-width:640px){ .bm-embed{aspect-ratio:4/3;} }
.foot-links{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); align-items:center; margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--border);}
.foot-links a{display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--text-2);}
.foot-links a:hover{color:var(--text-1);}
.foot-links a svg{width:14px; height:14px; stroke:currentColor; stroke-width:1.5;}

/* Token-dossier market-maker rows (one accent dot, hairline rows) */
.mm-firm{display:flex; align-items:center; gap:var(--space-1) var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.mm-firm:last-of-type{border-bottom:none;}
.mm-dot{width:8px; height:8px; border-radius:var(--radius-pill); background:var(--accent); flex:0 0 auto;}
.mm-name{font-weight:500; color:var(--text-1);}
.mm-ann{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);}
.mm-meta{margin-inline-start:auto; font-size:.8125rem; color:var(--text-3);}

/* Token-dossier momentum (accumulation vs distribution) */
.mo-wins{display:flex; gap:4px; flex:0 0 auto;}
.mo-win{font-size:.75rem; padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-1); color:var(--text-3); cursor:pointer; font-variant-numeric:tabular-nums;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);}
.mo-win:hover{color:var(--text-1); border-color:var(--border-hover);}
.mo-win.is-active{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}
.mo-row{display:grid; grid-template-columns:1.1fr 1.3fr auto; gap:var(--space-4); align-items:center;
  padding:var(--space-3) 0; border-bottom:1px solid var(--border);}
.mo-row:last-child{border-bottom:none;}
.mo-verdict{display:flex; align-items:center; gap:var(--space-2); font-size:.875rem; font-weight:500; flex-wrap:wrap;}
.mo-verdict.acc{color:var(--up);}
.mo-verdict.dist{color:var(--down);}
.mo-verdict .mo-net{color:var(--text-2); font-weight:400; font-size:.8125rem;}
.mo-spark{justify-self:end;}
@media (max-width:768px){ .mo-row{grid-template-columns:1fr auto;} .mo-spark{display:none;} }

/* Token-dossier distribution decay (cohort retention) */
.decay-head{display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;}
.decay-pct{font-family:var(--font-display); font-size:2.5rem; line-height:1; color:var(--text-1);
  font-variant-numeric:tabular-nums slashed-zero; letter-spacing:-.02em;}
.decay-lbl{color:var(--text-2); font-size:.9375rem; display:flex; flex-direction:column;}
.decay-lbl .sub{color:var(--text-3); font-size:.8125rem; margin-top:var(--space-1);}
.decay-spark{margin-inline-start:auto;}
.decay-bar{display:flex; height:10px; border-radius:var(--radius-pill); overflow:hidden; margin-top:var(--space-5); background:var(--surface-3);}
.decay-bar .held{background:var(--up-fill);}
.decay-bar .exited{background:var(--down-tint);}
.decay-kv{display:flex; gap:var(--space-6); margin-top:var(--space-3); font-size:.8125rem; color:var(--text-3);}
.decay-kv b{color:var(--text-1); font-weight:500;}

/* Dashboard hub (app.html) header + KPI strip */
.dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; margin-bottom:var(--space-8);}
.dash-head .muted{max-width:62ch; margin-top:var(--space-3);}
.dash-kpis{margin-bottom:var(--space-12);}

.empty{display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  padding:var(--space-16) var(--space-6); text-align:center; color:var(--text-3);}
.empty-ic{display:grid; place-items:center; width:46px; height:46px; margin-bottom:var(--space-1);
  border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--border); color:var(--text-3);}
.empty-ic svg{width:22px; height:22px;}
.empty-title{color:var(--text-2); font-weight:500;}
.empty-sub{font-size:.875rem; line-height:1.45; color:var(--text-3); max-width:44ch;}
.empty a:not(.btn){color:var(--accent);}
.empty .btn{margin-top:var(--space-2);}

/* ---------------------------------------------------------------- Responsive */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  /* links collapse into the hamburger → let search fill the freed middle space */
  .nav-search{flex:1 1 auto;}
  .nav-search .box,.nav-search .box:focus-within,.nav-search .box.has-results{width:100%;}
  .nav-search kbd{display:none;}
  .nav-links.open{display:flex; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:var(--space-2); background:var(--surface-2); border-bottom:1px solid var(--border); padding:var(--space-4) var(--gutter);}
  .nav-links.open .nav-link{height:auto; padding:var(--space-2) 0;}
  .nav-links.open .nav-link.is-active::after{display:none;}
  .nav-right .live{display:none;}
  .cat-row{grid-template-columns:1.4fr 1fr; gap:var(--space-3);}
  .cat-row .hide-sm{display:none;}
  .digest-item{grid-template-columns:auto 1fr auto;}
  .digest-item .tag{display:none;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ============================================================================
   PREMIUM REDESIGN (2026-06-03) — card recipe, shared chips, global search,
   overview command-center, event frameworks, methodology cards, pagination.
   Built on the locked tokens: ONE accent, hairlines, functional motion only.
   ========================================================================== */

/* ---------------------------------------------------------------- Premium card surface */
.card-premium{position:relative; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045); isolation:isolate; color:var(--text-2);}   /* at-rest: flat, hairline + top-light only */
/* top-edge light-catch — implies a light source above; the biggest cheap→expensive tell */
.card-premium::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14) 38%, rgba(255,255,255,.14) 62%, transparent);}
/* gradient hairline ring (masked) — edge-lit frame; accent ONLY on interaction */
.card-premium::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:1;
  background:linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  transition:background var(--dur-4) var(--ease-out);}
.card-premium > *{position:relative; z-index:2;}
/* Hover lives on the CARD itself (calm + smooth): a gentle rise, a softly accent-lit edge ring,
   and a deepening shadow — all on ONE slow ease-out (~300ms) so the effect GLIDES in and out
   instead of snapping. This replaces the cheap cursor-tracking interior glow (.spot-glow,
   retired below). Press settles back fast (150ms) so the click still feels responsive. */
a.card-premium,.card-premium.is-link{transition:transform var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out), color var(--dur-3) var(--ease-out); color:var(--text-2);}
@media (hover:hover){
  a.card-premium:hover,.card-premium.is-link:hover{transform:translateY(-2px); border-color:var(--border-hover); color:var(--text-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px -16px hsl(var(--shadow-color)/.62);}
  /* edge-light follows the cursor: the hairline ring blooms teal nearest the pointer and fades
     around the rim → a dynamic перелив around the border as you move (not a static frame). */
  a.card-premium:hover::after,.card-premium.is-link:hover::after{background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), rgba(45,212,191,.7), rgba(45,212,191,.14) 46%, rgba(255,255,255,.05) 72%, transparent);}
}
a.card-premium:active,.card-premium.is-link:active{transform:translateY(0) scale(.997); transition-duration:var(--dur-2);}

/* Cursor-tracked card glow — fed DIRECTLY each frame by app.js: follows the cursor 1:1, NO
   position transition (the @property glide is what killed the dynamism). Rich, not the old
   flat circle: a soft INTERIOR pool here + a cursor-following EDGE-light on the hairline ring
   (::after, above) so the rim перелив rides around the card as the cursor moves. Only opacity
   is transitioned (the hover fade). --mx/--my published by initSpotlight. */
.spot-glow{position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity var(--dur-3) var(--ease-out);
  background:radial-gradient(circle 320px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), rgba(45,212,191,.06) 38%, transparent 64%);}
@media (hover:hover){ .card-premium.spot:hover .spot-glow{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .spot-glow{display:none;} }

/* ---------------------------------------------------------------- KPI / stat tile */
.kpi-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--space-4);}
.stat-tile{padding:var(--space-5) var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);}
.stat-tile .kpi{font-size:clamp(1.5rem,3vw,2rem);}

/* ---------------------------------------------------------------- Global search (nav) */
/* compact + right-aligned: `margin-inline-start:auto` parks search at the right
   edge beside the nav actions; the nav links sit left after the logo via `order`.
   No focus glow (border-color is the focus affordance); widens gently on focus. */
.nav-search{flex:0 0 auto; order:2; min-width:0; display:flex; margin-inline-start:auto;}
.nav-links{order:1;}
.nav-right{order:3;}
.nav-search .box{position:relative; display:flex; align-items:center; gap:8px; width:clamp(180px,20vw,236px); margin-inline:0;
  height:36px; padding:0 10px 0 12px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color var(--dur-2) var(--ease-std), width var(--dur-3) var(--ease-out);}
.nav-search .box:focus-within,.nav-search .box.has-results{border-color:var(--border-hover); width:clamp(236px,26vw,320px); box-shadow:none;}
.nav-search svg{width:15px; height:15px; stroke:var(--text-3); stroke-width:1.5; flex:0 0 auto;}
.nav-search input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text-1); font-size:.8125rem;}
.nav-search input:focus-visible{box-shadow:none;}
.nav-search input::placeholder{color:var(--text-3);}
.nav-search kbd{font-family:var(--font-mono); font-size:.625rem; color:var(--text-3); border:1px solid var(--border); border-radius:3px; padding:0 5px; flex:0 0 auto;}
.nav-search .results{position:absolute; top:calc(100% + 6px); left:auto; right:0; background:var(--surface-2);
  min-width:320px; max-width:min(360px,90vw);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); box-shadow:var(--elev-2);
  overflow:hidden auto; z-index:60; max-height:60vh;}
.nav-search .results:empty{display:none;}
.nav-search .res{display:flex; align-items:center; gap:10px; padding:9px 12px; color:var(--text-2); font-size:.8125rem;
  border-bottom:1px solid var(--border); cursor:pointer; width:100%; text-align:left;}
.nav-search .res:last-child{border-bottom:none;}
.nav-search .res:hover,.nav-search .res.is-cur{background:var(--fill-hover); color:var(--text-1);}
.nav-search .res .sym{font-weight:600; color:var(--text-1);}
.nav-search .res .nm{color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-search .res .meta{margin-inline-start:auto; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.6875rem; color:var(--text-3); flex:0 0 auto;}
/* compact token logo in the suggestion row (chain dot hidden — too small to read here) */
.nav-search .res .tlogo{width:22px; height:22px; flex:0 0 auto;}
.nav-search .res .tlogo .mono-chip{width:22px; height:22px; font-size:.5rem;}
.nav-search .res .tlogo .net{display:none;}

/* ---------------------------------------------------------------- Signal badge + value pill + breadcrumb */
/* signal badge — monochrome pill; category color is carried by the glyph only (no rail) */
.sig{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; font-size:.6875rem; font-weight:500;
  color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  white-space:nowrap; letter-spacing:.01em;}
.sig .g{display:inline-flex; flex:0 0 auto;}
.sig svg{width:12px; height:12px; stroke-width:1.75;}
.sig.is-active{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}
/* secondary tag in a multi-label set — smaller, lower-contrast, no fill (the
   primary chip stays prominent; these "ride along"). Arkham/Etherscan model. */
.sig + .sig{margin-inline-start:5px;}
.sig.sig-muted{height:20px; padding:0 7px; font-size:.6875rem; color:var(--text-3); background:transparent;}
.sig.sig-muted svg{width:11px; height:11px; opacity:.7;}
.vpill{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--text-1);}
.vpill .sub{color:var(--text-3);}
.crumb{display:flex; align-items:center; gap:var(--space-2); font-size:.8125rem; color:var(--text-3); margin-bottom:var(--space-6); flex-wrap:wrap;}
.crumb a{color:var(--text-3);} .crumb a:hover{color:var(--text-1);}
.crumb .sep{color:var(--text-disabled);}

/* ---------------------------------------------------------------- Filter / sort bar + signal chips */
.filterbar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4);}
.filterbar .search{flex:1 1 240px;}

/* group headers (explorer grouping toggle) */
.group-head{display:flex; align-items:center; gap:var(--space-3); margin:var(--space-8) 0 var(--space-4);}
.group-head:first-child{margin-top:0;}
.group-head h3{font-size:1rem; color:var(--text-1);}
.group-head .cnt{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.75rem; color:var(--text-3);}
.group-head .ln{flex:1; height:1px; background:var(--border);}

/* ---------------------------------------------------------------- Pagination (static-JSON friendly) */
.load-more{display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-top:var(--space-8);}
/* page switcher (replaces infinite scroll) */
.pager{display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; justify-content:center;}
.pager .pg-nums{display:flex; align-items:center; gap:var(--space-1);}
.pg-btn,.pg-num{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; min-width:36px; padding:0 12px;
  font-size:.8125rem; font-weight:500; color:var(--text-2); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.pg-num{padding:0 10px; font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.pg-btn:hover,.pg-num:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--surface-2);}
.pg-btn[disabled]{color:var(--text-disabled); background:var(--surface-1); border-color:var(--border); cursor:not-allowed; opacity:.55;}
.pg-num.is-cur{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}
.pg-btn svg{width:14px; height:14px; stroke-width:1.5;}
.pg-btn .flip{transform:rotate(180deg);}
.pg-gap{color:var(--text-3); padding:0 2px; user-select:none;}
.pg-meta{font-size:.75rem; color:var(--text-3); font-variant-numeric:tabular-nums;}
.new-pill{position:sticky; top:calc(var(--nav-h) + var(--space-3)); z-index:20; display:flex; justify-content:center; margin-bottom:var(--space-4); pointer-events:none;}
.new-pill button{pointer-events:auto; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; font-size:.8125rem; font-weight:500;
  color:var(--accent-ink); background:var(--accent); border-radius:var(--radius-pill); box-shadow:var(--elev-1);}
.new-pill button:hover{background:var(--accent-hover); transform:translateY(-1px);}

/* ---------------------------------------------------------------- Event card (overview strip + digest feed) */
/* premium activity-row anatomy: [logo avatar] [title + signal·why] [value + time] */
.event-list{display:flex; flex-direction:column; gap:var(--space-3);}
.event-card{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:center; padding:var(--space-4) var(--space-5);}
.event-card .tlogo{width:38px; height:38px;}
.event-card .tlogo .mono-chip{width:38px; height:38px; font-size:.75rem;}
.event-card .tlogo .net{width:15px; height:15px;}
.event-card .ec-main{min-width:0; display:flex; flex-direction:column; gap:6px;}
.event-card .ec-title{display:flex; align-items:center; gap:var(--space-2); color:var(--text-1); min-width:0; flex-wrap:wrap;}
.event-card .ec-title .sym{font-weight:600; letter-spacing:-.01em;}
.event-card .ec-why{display:flex; align-items:center; gap:var(--space-2); min-width:0;}
.event-card .ec-why .wt{font-size:.8125rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.event-card .ec-val{display:flex; flex-direction:column; gap:3px; align-items:flex-end; text-align:right; flex:0 0 auto;}
.event-card .ec-usd{font-family:var(--font-display); font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; color:var(--text-1); font-size:1.05rem; letter-spacing:-.01em;}
.event-card .ec-usd .u{font-size:.6875rem; color:var(--text-3); margin-inline-start:1px;}
.event-card .ec-time{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3);}
/* in-feed opener for the Arkham-style TX panel (only on items carrying a tx) */
.event-card .ec-tx{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:var(--radius-sm); color:var(--text-3); opacity:.65; cursor:pointer;
  transition:color var(--dur-2) var(--ease-std), opacity var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std);}
.event-card .ec-tx svg{width:14px; height:14px; stroke-width:1.6;}
.event-card .ec-tx:hover{color:var(--accent); opacity:1; background:var(--fill-hover);}
.event-card .ec-tx:focus-visible{color:var(--accent); opacity:1; outline:none;}
.event-card .ec-dir{display:inline-flex; align-items:center; gap:3px;}
/* new-since-load flash — a full accent ring that fades (no left rail) */
.event-card.is-new{animation:ev-new 1.5s var(--ease-out) 1;}
@keyframes ev-new{
  0%{box-shadow:0 0 0 1px var(--accent) inset, 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -14px rgba(0,0,0,.55);}
  100%{box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px -14px rgba(0,0,0,.55);}}

/* "Значимые vs Шум" split card — diagram + legend, dense, no wasted space, HTML fonts */
.splitcard{display:grid; grid-template-columns:minmax(190px,0.85fr) 1.15fr; gap:clamp(var(--space-6),4vw,var(--space-12));
  align-items:center; padding:clamp(var(--space-6),3vw,var(--space-10));}
.split-fig{min-width:0;}
.split-fig svg{width:100%; height:auto; max-height:190px; display:block;}
.split-cap{text-align:center; font-size:.6875rem; color:var(--text-3); margin-top:var(--space-3); font-family:var(--font-mono); letter-spacing:0; font-variant-numeric:tabular-nums;}
.split-legend{display:flex; flex-direction:column; gap:var(--space-6);}
.srow{display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-3); row-gap:var(--space-2); align-items:center;}
.srow.keep .m{background:var(--accent);}
.srow.drop .m{background:var(--text-disabled);}
.srow .b{font-size:1.0625rem; font-weight:600; color:var(--text-1);}
.srow.drop .b{color:var(--text-2);}
.srow .d{grid-column:2; color:var(--text-3); font-size:.875rem; line-height:1.55;}
@media(max-width:720px){ .splitcard{grid-template-columns:1fr; gap:var(--space-6);} }

/* trending tokens rail (horizontal) */
.rail-scroll{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(248px,1fr); gap:var(--space-4);
  overflow-x:auto; padding-bottom:var(--space-3); scroll-snap-type:x proximity; scrollbar-width:thin;}
.rail-scroll > *{scroll-snap-align:start; min-width:0;}
.ttile{padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4);}
.ttile .top{display:flex; align-items:center; gap:var(--space-3);}
.ttile .nums{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);}
.ttile .big{font-family:var(--font-display); font-variant-numeric:tabular-nums; color:var(--text-1); font-size:1.375rem; letter-spacing:-.02em;}

/* mini-history scrollback rows */
.hrow{display:grid; grid-template-columns:auto auto 1fr auto; gap:var(--space-3); align-items:center;
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); transition:background-color var(--dur-2) var(--ease-std);}
.hrow:last-child{border-bottom:none;}
.hrow:hover{background:var(--fill-hover);}
.hrow .t{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums;}
.hrow .s{color:var(--text-2); font-size:.875rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hrow .s b{color:var(--text-1);}
.hrow .u{font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-1); font-size:.8125rem; white-space:nowrap;}

/* ---------------------------------------------------------------- Event detail page */
.ev-head{display:flex; align-items:flex-start; gap:var(--space-5); flex-wrap:wrap;}
.ev-head .tlogo{width:44px; height:44px;}
.ev-head .tlogo .mono-chip{width:44px; height:44px; font-size:.8125rem;}
.ev-id .ttl{font-size:clamp(1.5rem,3.5vw,2rem); font-weight:600; color:var(--text-1); line-height:1.12; letter-spacing:-.02em;}
.ev-id .muted{margin-top:var(--space-2);}   /* title → meta sub-line: breathing room (was inline 6px) */
.ev-headline{display:flex; align-items:flex-end; gap:clamp(var(--space-6),5vw,var(--space-12)); flex-wrap:wrap; margin-top:var(--space-8);
  border-block:1px solid var(--border); padding-block:var(--space-6);}
.ev-headline .blk{display:flex; flex-direction:column; gap:var(--space-2);}
.ev-headline .blk .v{display:flex; align-items:baseline; gap:6px;}
.ev-grid{display:grid; gap:var(--space-8); grid-template-columns:1.2fr .8fr; margin-top:var(--space-10); align-items:start;}
.ev-fig-wrap{padding:clamp(var(--space-6),3vw,var(--space-10));}
.ev-fig{width:100%; height:auto; display:block;}
.kv{display:grid; grid-template-columns:1fr auto; gap:var(--space-3) var(--space-4); align-items:baseline;}
.kv .k{color:var(--text-3); font-size:.8125rem;}
.kv .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-1); text-align:right; font-size:.875rem;}
.ev-thesis{color:var(--text-2); line-height:1.6; margin-top:var(--space-5); font-size:.9375rem;}
@media (max-width:880px){ .ev-grid{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------- Methodology premium cards */
.method-grid{display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));}
.method-card{padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);}
.method-card .mh{display:flex; align-items:center; gap:var(--space-3);}
.method-card .gl{width:30px; height:30px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.method-card .gl svg{width:16px; height:16px; stroke-width:1.5;}
.method-card .mh .n{font-size:1.0625rem; font-weight:600; color:var(--text-1); line-height:1.2;}
.method-card .term{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); letter-spacing:0;}
.method-card .what{color:var(--text-2); font-size:.875rem; line-height:1.6;}
.method-card .why{color:var(--text-3); font-size:.8125rem; line-height:1.55; padding-top:var(--space-2);}
/* figure centered in the free space between the text and the bottom link
   (margin-block:auto → both autos split the slack equally; link stays pinned) */
.method-card .fig{margin-block:auto; padding-block:var(--space-4);}
.method-card .fig svg{width:100%; height:48px; display:block; opacity:.9;}
/* inline figure (gauge/bar + caption): small fixed graphic + HTML label centered
   as a row — the label lives in HTML, so its width can't overflow an SVG viewBox
   and pull the group off-centre (the full-width-svg figures stay as-is above). */
.method-card .fig.fig-inline{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:var(--space-3);}
.method-card .fig-inline svg{flex:0 0 auto; display:block; opacity:.9;}
.method-card .fig-inline .fig-gauge{width:28px; height:28px;}
.method-card .fig-inline .fig-progress{width:56px; height:14px;}
.method-card .fig-cap-i{font-family:var(--font-sans); font-size:.6875rem; color:var(--text-3); white-space:nowrap; letter-spacing:0; line-height:1;}
.method-lede{padding:clamp(var(--space-6),3vw,var(--space-8)); display:flex; gap:var(--space-8); align-items:center; flex-wrap:wrap;}
.method-lede .txt{flex:1 1 280px;}
.method-lede .fig{flex:1 1 320px; min-width:0;}
.method-lede .fig svg{width:100%; height:auto;}

/* shared figure node/edge primitives (inline-SVG infographics) */
.fig-edge{stroke:rgba(255,255,255,.12); stroke-width:1; fill:none;}
.fig-node{fill:var(--surface-3); stroke:var(--border-strong); stroke-width:1;}
.fig-track{stroke:rgba(255,255,255,.06);}
.fig-cap{fill:var(--text-3); font-family:var(--font-mono); font-size:11px;}
.fig-num{fill:var(--text-1); font-family:'Space Grotesk',var(--font-mono); font-size:11px;}
/* event-detail diagram text — word labels in sans, values in display; tokenized, ≥11px, AA color
   (replaces hardcoded #606060/#8A8F98/#ECEEF0 + inline font-family/size in event-detail.js SVGs) */
.fig-lbl{fill:var(--text-3); font-family:var(--font-sans); font-size:11px;}
.fig-lbl.on{fill:var(--text-1);}
.fig-val{fill:var(--text-1); font-family:var(--font-display); font-size:12px; font-variant-numeric:tabular-nums slashed-zero;}

/* ---------------------------------------------------------------- Section helpers */
.sec-head .more{margin-inline-start:auto; flex:0 0 auto;}
.band{padding-block:var(--space-16);}
.band-tight{padding-block:var(--space-12);}
.empty-cta{display:flex; flex-direction:column; align-items:center; gap:var(--space-4); padding:var(--space-12); text-align:center; color:var(--text-3);}

@media (max-width:768px){
  .nav-right{margin-inline-start:auto;}
  .ev-headline{gap:var(--space-6);}
  .event-card{grid-template-columns:auto 1fr auto; padding:var(--space-3) var(--space-4);}
  .event-card .ec-why .wt{display:none;}   /* keep the signal tag, drop the long phrase on narrow */
}

/* ============================================================================
   PREMIUM POLISH (2026-06-03 round 2) — custom listbox, custom cursor.
   Research-backed (WAI-ARIA APG listbox, Emil Kowalski motion, dbushell cursor a11y).
   ========================================================================== */

/* ---------------------------------------------------------------- Custom listbox (enhances native <select>) */
.select{position:relative; display:inline-flex;}
.select select.lb-native{display:none;}     /* JS-on: native select is the hidden value-holder */
.lb-trigger{display:inline-flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  height:40px; min-width:184px; padding:0 10px 0 12px; font-size:.8125rem; font-weight:500; color:var(--text-1);
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;
  transition:border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.lb-trigger:hover{border-color:var(--border-hover); background:var(--surface-2);}
.lb-trigger[aria-expanded="true"]{border-color:var(--border-hover);}
.lb-trigger .lb-val{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-trigger .lb-chev{display:inline-flex; color:var(--text-3); flex:0 0 auto; transition:transform var(--dur-3) var(--ease-out);}
.lb-trigger .lb-chev svg{width:15px; height:15px; stroke-width:1.5;}
.lb-trigger[aria-expanded="true"] .lb-chev{transform:rotate(180deg);}

.lb-pop{position:absolute; z-index:60; top:calc(100% + 6px); left:0; min-width:100%; margin:0; padding:6px; list-style:none;
  max-height:300px; overflow-y:auto; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 18px 44px -12px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05);
  transform-origin:top center; opacity:0; transform:translateY(-4px) scale(.97);
  transition:opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);}
.lb-pop.is-open{opacity:1; transform:translateY(0) scale(1);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);}
@supports (backdrop-filter:blur(8px)){ .lb-pop{background:rgba(24,28,34,.86); backdrop-filter:blur(14px) saturate(140%);} }
.lb-opt{position:relative; display:flex; align-items:center; gap:var(--space-2); padding:8px 10px 8px 30px;
  font-size:.8125rem; color:var(--text-2); border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);}
.lb-opt.is-active{background:var(--fill-active); color:var(--text-1);}
.lb-opt[aria-selected="true"]{color:var(--accent);}      /* selected = accent TEXT + check, never a fill */
.lb-opt[aria-selected="true"]::before{content:""; position:absolute; left:9px; top:50%; width:13px; height:13px; transform:translateY(-50%);
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (prefers-reduced-motion:reduce){ .lb-pop,.lb-pop.is-open,.lb-trigger .lb-chev,.lb-opt{transition-duration:0s!important;} }

/* ============================================================================
   DEDUP + BENTO DASHBOARD (2026-06-04 eve plan A+B)
   — Обзор: minimal signal teaser (explanation lives ONCE on Методология)
   — Дашборд: dense bento widget grid (not a scroll-stack) + signal counts as
     COMPACT CLICKABLE FILTERS (count + sparkline → filter the catalog, no prose)
   Built on the locked tokens: ONE accent, hairlines, functional motion only.
   ========================================================================== */

/* ---------------------------------------------------------------- Обзор: minimal signal teaser */
/* glyph + name pill chips → Методология. NO "why" prose here (that's the encyclopedia's job). */
.sig-teaser{display:flex; flex-wrap:wrap; gap:var(--space-3);}
.sigt{display:inline-flex; align-items:center; gap:var(--space-2); height:36px; padding:0 14px;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:.875rem; color:var(--text-2); white-space:nowrap;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-std);}
.sigt:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--surface-2); transform:translateY(-1px);}
.sigt .gl{display:inline-flex; flex:0 0 auto;}
.sigt .gl svg{width:15px; height:15px; stroke-width:1.5;}

/* ---------------------------------------------------------------- Bento dashboard grid */
.bento{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--space-5); align-items:start;}
.bento > *{min-width:0;}
.col-7{grid-column:span 7;} .col-5{grid-column:span 5;} .col-12{grid-column:1 / -1;}

/* Row 1 is its OWN equal-height grid (separate from the 12-col .bento below). align-items:
   stretch + a defined height make BOTH columns the same height: the stream (left) fills its
   column and scrolls inside it → there's no dead space under it (the gap the taller rail used
   to leave). The stream is the prominent, tall element. The rail stacks the FULL catalog
   «По типу сигнала» (natural height) + «Токены с активностью» (flex-fills the remainder +
   scrolls) — so a growing catalog can never again collapse the trending widget. */
.dash-row1{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-5);
  height:clamp(920px, 88vh, 1100px); align-items:stretch; margin-bottom:var(--space-5);}
.dash-row1 > *{min-width:0; min-height:0;}
.bento-feed{display:flex; flex-direction:column; min-height:0;}
.bento-feed > .widget-body.flush{flex:1; min-height:0; display:flex; flex-direction:column;}
.bento-side{display:flex; flex-direction:column; gap:var(--space-5); min-height:0;}
.bento-side > .widget{min-height:0;}
.bento-side > .widget:last-child{flex:1; display:flex; flex-direction:column; overflow:hidden;}
.bento-side > .widget:last-child > .widget-body.flush{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
@media (max-width:1024px){
  .col-7,.col-5{grid-column:1 / -1;}
  .dash-row1{grid-template-columns:1fr; height:auto;}      /* stack naturally on narrow */
  .bento-feed{height:clamp(440px, 70vh, 620px);}           /* keep the stream a bounded scroll panel */
  .bento-side > .widget:last-child{flex:0 1 auto;}
  .bento-side > .widget:last-child > .widget-body.flush{max-height:clamp(220px, 40vh, 360px);}
}

/* widget = a dashboard panel: light header (title + action) over a flush body.
   Container, not an interactive card — subtle surface + hairline + soft lift, no edge-lit ring. */
.widget{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);}   /* surface+hairline+top-light, no ambient float */
.widget-head{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border);}
.widget-head .wt{display:flex; flex-direction:column; min-width:0;}
.widget-head h2{font-size:1rem; font-weight:600; color:var(--text-1); line-height:1.2; letter-spacing:-.01em;}
.widget-head .more{margin-inline-start:auto; flex:0 0 auto;}
.widget-body{padding:var(--space-4) var(--space-5);}
.widget-body.flush{padding:0;}
/* tighten the KPI strip under the dashboard header (kill the hero-sized top margin) */
.dash-kpis{margin-top:var(--space-6); margin-bottom:var(--space-8);}

/* «Пульс» — dashboard flow band (replaces the landing-duplicated KPI strip).
   Left: flow metrics (signals 24h / largest transfer / dominant signal).
   Right: an activity bar-chart of signal volume over time. */
.pulse{display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:var(--space-8);
  align-items:center; padding:var(--space-5) var(--space-6); margin-top:var(--space-6); margin-bottom:var(--space-8);}
.pulse-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); min-width:0;}
.pulse-stat{display:flex; flex-direction:column; gap:var(--space-2); min-width:0;}
.pulse-stat .kpi,.pulse-stat .pv{font-family:var(--font-display); font-size:clamp(1.35rem,2.3vw,1.9rem); font-weight:500;
  color:var(--text-1); line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums slashed-zero;
  display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; min-height:1.9rem;}
.pulse-stat .pv .pv-sub{font-size:.75rem; color:var(--text-3); font-weight:500; letter-spacing:0;}
.pulse-stat .pv .sig{font-size:.8125rem;}   /* dominant-signal chip at body scale, not display */
.pulse-stat .label{font-size:.6875rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);}
.pulse-chart{display:flex; flex-direction:column; gap:var(--space-3); min-width:0;
  border-inline-start:1px solid var(--border); padding-inline-start:var(--space-6);}
.pulse-chart-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);}
.pulse-bars{display:flex; align-items:flex-end; gap:3px; height:64px;}
.pbar{flex:1 1 0; min-width:0; background:var(--accent); opacity:.5; border-radius:2px 2px 0 0; min-height:2px;
  transition:opacity var(--dur-2) var(--ease-std);}
.pbar:hover{opacity:.95;}
.pbar.is-empty{background:var(--text-3); opacity:.14;}
.pulse-peak{text-transform:none; letter-spacing:0; color:var(--text-3); font-weight:500; margin-inline-start:4px;}
.pulse-axis{display:flex; justify-content:space-between; gap:var(--space-2); margin-top:var(--space-2);}
.pulse-axis span{font-family:var(--font-mono); font-size:.625rem; color:var(--text-3); letter-spacing:0;}
@media (max-width:720px){
  .pulse{grid-template-columns:1fr; gap:var(--space-5);}
  .pulse-chart{border-inline-start:none; padding-inline-start:0; border-top:1px solid var(--border); padding-top:var(--space-4);}
}

/* «Сети» — per-network activity cells (by_chain): chain dot+name, count, proportional bar.
   Compact stat strip; each cell links to the explorer filtered by that network. */
.net-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-3);}
.net-cell{display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3) var(--space-4);
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2);
  transition:border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.net-cell:hover{border-color:var(--border-hover);}
.net-h{display:flex; align-items:center; gap:var(--space-2); min-width:0;}
.net-h .cdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.net-name{font-size:.8125rem; color:var(--text-2); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.net-n{font-family:var(--font-display); font-variant-numeric:tabular-nums slashed-zero; font-size:1.375rem;
  color:var(--text-1); line-height:1; letter-spacing:-.02em;}
.net-bar{height:4px; border-radius:2px; background:var(--fill-hover); overflow:hidden;}
.net-bar span{display:block; height:100%; border-radius:2px;}

/* ---------------------------------------------------------------- Dense feed rows (events widget) */
.feed{display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);}
.feed-row{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-3); align-items:center;
  padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--border); transition:background-color var(--dur-2) var(--ease-std);}
.feed-row:last-child{border-bottom:none;}
.feed-row:hover{background:var(--fill-hover);}
.feed-row .tlogo{width:30px; height:30px;}
.feed-row .tlogo .mono-chip{width:30px; height:30px; font-size:.625rem;}
.feed-row .tlogo .net{width:12px; height:12px;}
.feed-row .fm{min-width:0; display:flex; flex-direction:column; gap:4px;}
.feed-row .ft{display:flex; align-items:center; gap:var(--space-2); min-width:0;}
.feed-row .ft .sym{font-weight:600; font-size:.875rem; color:var(--text-1); letter-spacing:-.01em;}
/* tier pill on the live single-transfer feed (200K/500K/1M+) */
.feed-row .tier-pill{font-family:var(--font-mono); font-size:.625rem; padding:1px 5px; border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--text-3); letter-spacing:0; flex:0 0 auto;}
.feed-row .tier-pill.t-500k{color:var(--text-2); border-color:var(--border-strong);}
.feed-row .tier-pill.t-1m{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}
.feed-row .feed-ext{display:inline-flex; color:var(--text-3); flex:0 0 auto;}
.feed-row .feed-ext svg{width:11px; height:11px; stroke-width:1.75;}
.feed-row .fw{font-size:.75rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.feed-row .fv{display:flex; flex-direction:column; gap:2px; align-items:flex-end; text-align:right; flex:0 0 auto;}
.feed-row .fu{font-family:var(--font-display); font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; color:var(--text-1); font-size:.9375rem; letter-spacing:-.01em;}
.feed-row .fg{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3);}

/* ---------------------------------------------------------------- Compact trending rows (trending widget) */
.trend{display:flex; flex-direction:column;}
.trend-row{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-3); align-items:center;
  padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--border); transition:background-color var(--dur-2) var(--ease-std);}
.trend-row:last-child{border-bottom:none;}
.trend-row:hover{background:var(--fill-hover);}
.trend-row .tlogo{width:28px; height:28px;}
.trend-row .tlogo .mono-chip{width:28px; height:28px; font-size:.625rem;}
.trend-row .tlogo .net{width:11px; height:11px;}
.trend-row .ti{min-width:0; display:flex; flex-direction:column; gap:3px;}
.trend-row .ti .sym{font-weight:600; font-size:.875rem; color:var(--text-1);}
.trend-row .ti .meta{display:flex; align-items:center; gap:6px; min-width:0;}
.trend-row .ti .meta .ago{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); white-space:nowrap;}
.trend-row .tn{font-family:var(--font-display); font-variant-numeric:tabular-nums; color:var(--text-1); font-size:1rem; text-align:right; flex:0 0 auto; letter-spacing:-.01em;}
.trend-row .tn .l{display:block; font-family:var(--font-sans); font-size:.6875rem; color:var(--text-3); text-transform:uppercase; letter-spacing:var(--track-caps-sm); font-weight:500;}

/* ---------------------------------------------------------------- Compact signal filters (replaces why-tiles on dashboard) */
.sig-filters{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); padding:var(--space-4) var(--space-5);}
.sig-filters .sigf:last-child:nth-child(odd){grid-column:1 / -1;}   /* odd count → last tile spans full width (no hole) */
.sigf{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-2);
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.sigf:hover{border-color:var(--border-hover); background:var(--surface-2); color:var(--text-1);}
.sigf .top{display:flex; align-items:center; gap:var(--space-2); min-width:0;}
.sigf .gl{display:inline-flex; flex:0 0 auto;}
.sigf .gl svg{width:14px; height:14px; stroke-width:1.5;}
.sigf .nm{font-size:.8125rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sigf .bot{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-2);}
.sigf .cnt{font-family:var(--font-display); font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; color:var(--text-1); font-size:1.375rem; line-height:1; letter-spacing:-.02em;}
.sigf .spark{width:60px; height:20px;}
@media (max-width:420px){ .sig-filters{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------- Карта концентрации — treemap (our take on the heatmap) */
/* Area ∝ √(значимых $); tint = OUR class palette scaled by concentration % (dark
   class-tint, NOT Arkham's saturated price green/red). Squarified layout in JS. */
.treemap{position:relative; width:100%; aspect-ratio:16 / 6; background:var(--surface-1); overflow:hidden;}
.treemap .skeleton{border-radius:0;}
@media (max-width:1100px){ .treemap{aspect-ratio:16 / 9;} }
@media (max-width:640px){ .treemap{aspect-ratio:3 / 4;} }
.tm-tile{position:absolute; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:2px;
  padding:8px 9px; border:1px solid var(--bg); color:var(--text-1);
  background:var(--surface-2);                                                   /* fallback if no color-mix */
  background:color-mix(in srgb, var(--c) calc(var(--heat,.14) * 100%), var(--surface-2));
  transition:filter var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);}
@media (hover:hover){ .tm-tile:hover{filter:brightness(1.22); box-shadow:inset 0 0 0 1px var(--border-hover); z-index:3;} }
.tm-tile:focus-visible{box-shadow:var(--focus-ring); z-index:3;}
/* token logo (with monogram fallback) top-left in each roomy cell */
.tm-tile .tlogo{width:22px; height:22px; flex:0 0 auto;}
.tm-tile .tlogo .mono-chip{width:22px; height:22px; font-size:.5625rem;}
.tm-tile .tlogo .net{width:9px; height:9px; border-width:1.5px;}
.tm-tile.lg .tlogo{width:26px; height:26px;}
.tm-tile.lg .tlogo .mono-chip{width:26px; height:26px; font-size:.6875rem;}
.tm-tile.lg .tlogo .net{width:11px; height:11px;}
.tm-tile .tm-l{display:flex; flex-direction:column; gap:1px; min-width:0;}
.tm-tile .tm-sym{font-weight:600; font-size:.8125rem; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tm-tile .tm-pct{font-family:var(--font-display); font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; font-size:1rem; line-height:1;}
.tm-tile.lg{padding:10px 11px;} .tm-tile.lg .tm-pct{font-size:1.25rem;}
.widget-head .csub{font-size:.8125rem; line-height:1.5; color:var(--text-3); margin-top:var(--space-2);}
/* shared viz key strip (treemap class key / sectors threshold key) — flat, hairline-topped, uses .key-sw */
.viz-key{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); padding:var(--space-3) var(--space-5); border-top:1px solid var(--border);}
.viz-key:empty{display:none;}
.viz-key .lbl{font-size:.6875rem; text-transform:uppercase; letter-spacing:var(--track-caps-sm); color:var(--text-3);}
.viz-key .item{display:inline-flex; align-items:center; gap:var(--space-2); font-size:.8125rem; color:var(--text-2);}
.mv-chg{display:flex; flex-direction:column; gap:var(--space-1); margin-top:auto;}   /* 24h change + unit label; margin-top:auto pins it to the card bottom so the % aligns across cards regardless of the optional signal badge above */

/* ---------------------------------------------------------------- Сигнал × цена — mover rail */
.mover-rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(158px,1fr); gap:var(--space-3);
  overflow-x:auto; padding-bottom:var(--space-2); scroll-snap-type:x proximity; scrollbar-width:thin;}
.mover-rail > *{scroll-snap-align:start; min-width:0;}
.mover{padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-4);}
.mover .mv-top{display:flex; align-items:center; gap:var(--space-2); min-width:0;}
.mover .tlogo{width:28px; height:28px;}
.mover .tlogo .mono-chip{width:28px; height:28px; font-size:.625rem;}
.mover .tlogo .net{width:11px; height:11px;}
.mover .mv-id{min-width:0; display:flex; flex-direction:column; gap:3px; align-items:flex-start;}
.mover .mv-id .sym{font-weight:600; color:var(--text-1); font-size:.9375rem; letter-spacing:-.01em;}
.mover .mv-ch{font-family:var(--font-display); font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1;
  font-size:1.375rem; line-height:1; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:5px;}
.mover .mv-ch.up{color:var(--up);} .mover .mv-ch.down{color:var(--down);}

/* growth BAR-chart (#6) — ranked horizontal bars above the mover tiles. Our quiet take on
   Arkham's top-gainers viz: aligned tracks, fill ∝ |%| over the shown set, value at the end. */
.mv-ctl{flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end;}
.growth-chart{padding:var(--space-4) var(--space-5) var(--space-1);}
.growth-chart .empty{padding:var(--space-8) 0;}
.gb-list{display:flex; flex-direction:column;}
/* fixed logo + sym + signal columns so every track starts on the same x (aligned scale) */
.gb-row{display:grid; grid-template-columns:24px 4.25rem 5.25rem 1fr 4rem; gap:var(--space-3); align-items:center;
  padding:9px var(--space-1); border-bottom:1px solid var(--border); color:var(--text-2);
  transition:background-color var(--dur-2) var(--ease-std);}
.gb-row:last-child{border-bottom:none;}
.gb-row:hover{background:var(--fill-hover);}
.gb-row .tlogo{width:24px; height:24px;}
.gb-row .tlogo .mono-chip{width:24px; height:24px; font-size:.5625rem;}
.gb-row .tlogo .net{width:10px; height:10px;}
.gb-sym{font-size:.875rem; color:var(--text-1); font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gb-sig{display:flex; min-width:0; overflow:hidden;}
.gb-track{height:8px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; min-width:36px;}
.gb-fill{display:block; height:100%; border-radius:var(--radius-pill); transition:width var(--dur-6) cubic-bezier(0.4,0,0.2,1);}
.gb-fill.up{background:linear-gradient(90deg, color-mix(in srgb, var(--up) 45%, transparent), var(--up));}
.gb-fill.down{background:linear-gradient(90deg, color-mix(in srgb, var(--down) 45%, transparent), var(--down));}
.gb-pct{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.8125rem; text-align:right; min-width:58px;}
.gb-pct.up{color:var(--up);} .gb-pct.down{color:var(--down);}
.gb-foot{padding:var(--space-3) var(--space-1) 0;}
@media (max-width:560px){
  .gb-row{grid-template-columns:22px 3.25rem 1fr 52px;}
  .gb-row .gb-sig{display:none;}
}

/* ---------------------------------------------------------------- Секторы — catalog × concentration by sector */
.sec-list{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-10); padding:var(--space-2) var(--space-5);}
@media (max-width:760px){ .sec-list{grid-template-columns:1fr;} }
/* fixed name + count columns so EVERY bar starts on the same x (aligned scale) */
.sec-row{display:grid; grid-template-columns:9rem 1.75rem 1fr 3rem; gap:var(--space-3); align-items:center;
  padding:10px var(--space-2); border-bottom:1px solid var(--border); color:var(--text-2);
  transition:background-color var(--dur-2) var(--ease-std);}
.sec-row:hover{background:var(--fill-hover);}
.sec-row .sec-n{font-size:.875rem; color:var(--text-1); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sec-row .sec-cnt{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.6875rem; color:var(--text-3); white-space:nowrap; text-align:right;}
.sec-row .sec-bar{height:6px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; min-width:36px;}
.sec-row .sec-bar > span{display:block; height:100%; border-radius:var(--radius-pill); transition:width var(--dur-6) cubic-bezier(0.4,0,0.2,1);}
.sec-row .sec-pct{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--text-1); text-align:right; min-width:46px;}

/* ============================================================================
   CLUSTER GRAPH (2026-06-08) — in-house premium constellation (cluster-graph.js).
   Replaces the Bubblemaps iframe: OUR classified holders as nodes (size ∝ supply
   share, colour = class), faint curved lines = shared-funder clusters. Inline SVG,
   zero charting lib (spec §6). ONE accent, hairlines, transform/opacity motion only.
   ========================================================================== */
.cg-wrap{position:relative; width:100%;}
/* dark stage — the SVG lives here; meta strip sits BELOW it (not jammed inside) */
.cg-canvas{position:relative; width:100%; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
  background:radial-gradient(115% 130% at 50% 38%, rgba(45,212,191,0.045), transparent 52%),
    radial-gradient(140% 120% at 50% 100%, rgba(0,0,0,0.45), transparent 60%), var(--bg);}
.cg{display:block; width:100%; height:auto;}
/* structured backdrop rings */
.cg-ring{fill:none; stroke:rgba(255,255,255,0.045); stroke-width:1;}
/* edges — constellation lines; draw-in once, dim by default, lit on cluster hover */
/* edges = shared-funder links ONLY (no centre tethers). Visible at rest via per-edge inline
   stroke-opacity (length-attenuated); lit on cluster hover (CSS stroke-opacity beats the attr). */
.cg-edge{fill:none; stroke-width:1; stroke-dasharray:560; stroke-dashoffset:560;
  animation:cg-draw var(--dur-6) var(--ease-out) 120ms forwards;
  transition:stroke-opacity var(--dur-2) var(--ease-std), stroke-width var(--dur-2) var(--ease-std);}
.cg-edge.is-lit{stroke-opacity:.95; stroke-width:1.7;}
.cg-hub{fill:var(--surface-3); stroke:var(--border-strong); stroke-width:1; transition:stroke var(--dur-2) var(--ease-std), stroke-width var(--dur-2) var(--ease-std);}
.cg-hub.is-lit{stroke:var(--text-1); stroke-width:1.6;}
@keyframes cg-draw{to{stroke-dashoffset:0;}}
/* nodes — staggered pop-in (inner <g> scales so the outer translate is untouched) */
.cg-node{cursor:pointer; transition:opacity var(--dur-3) var(--ease-std);}
.cg-node-in{transform-box:fill-box; transform-origin:center; opacity:0;
  animation:cg-pop var(--dur-5) var(--ease-out) forwards;}
@keyframes cg-pop{from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);}}
.cg-node .cg-glow{opacity:.55; transition:opacity var(--dur-3) var(--ease-std);}
.cg-node .cg-core{stroke:rgba(11,13,16,0.6); stroke-width:1; transition:transform var(--dur-2) var(--ease-out);}
/* aggregate "+N" — near-white with a dark halo so it reads over ANY class colour (the class
   identity is carried by the hollow dashed ring + glow, not the text fill) */
.cg-node .cg-aggn{font-family:var(--font-mono); font-size:11px; fill:var(--text-1); font-weight:600; font-variant-numeric:tabular-nums;
  paint-order:stroke; stroke:var(--bg); stroke-width:2.5px; stroke-linejoin:round;}
.cg-node:focus{outline:none;}
.cg-node:focus-visible .cg-core{stroke:var(--accent); stroke-width:2;}
.cg.is-hot .cg-node.is-dim{opacity:.28;}
.cg.is-hot .cg-node.is-dim .cg-glow{opacity:.12;}
.cg-node.is-on .cg-glow{opacity:1;}
@media (hover:hover){ .cg-node:hover .cg-core{stroke:var(--text-1);} }
/* centre token core + live pulse */
.cg-pulse{fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.5; transform-box:fill-box; transform-origin:center;
  animation:cg-pulse-ring 2.4s var(--ease-out) infinite;}
@keyframes cg-pulse-ring{0%{opacity:.5; transform:scale(1);} 100%{opacity:0; transform:scale(1.7);}}
.cg-core-ring{fill:var(--surface-2); stroke:var(--accent); stroke-width:1.5;}
.cg-core-sym{font-family:var(--font-display); font-size:13px; font-weight:500; fill:var(--accent); letter-spacing:-.02em;}
/* centre caption — names the focal node as the token; halo keeps it legible over the field */
.cg-core-cap{font-family:var(--font-display); font-size:13px; font-weight:500; fill:var(--accent); letter-spacing:-.02em;
  paint-order:stroke; stroke:var(--bg); stroke-width:3.5px; stroke-linejoin:round;}
/* tooltip (premium dark popover, follows the cursor) — on-system: key→value .tip-row grammar */
.cg-tip{position:absolute; z-index:6; pointer-events:none; min-width:150px; max-width:240px; padding:9px 11px;
  background:var(--surface-4); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px -10px hsl(var(--shadow-color)/.7); font-size:.75rem; color:var(--text-2);}
.cg-tip-h{display:flex; align-items:center; gap:6px; color:var(--text-1); font-weight:600; font-size:.75rem; margin-bottom:5px; letter-spacing:-.01em;}
.cg-tip-a{font-family:var(--font-mono); color:var(--text-1); font-size:.75rem; margin-bottom:3px;}
.cg-tip .tip-row{margin-top:2px;}
.cg-tip .tip-row .v.sans{font-family:var(--font-sans);}
.cg-tip-go{margin-top:7px; color:var(--accent); font-size:.6875rem;}
.cg-tip .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
/* legend + note — BELOW the canvas, padded, hairline divider; chip-style swatches */
.cg-meta{margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--border);}
/* flat key row — matches the shared .legend (no pill chrome); swatch geometry via .key-sw group */
.cg-legend{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);}
.cg-legend .item{display:inline-flex; align-items:center; gap:var(--space-2); font-size:.8125rem; color:var(--text-2);}
.cg-legend .cg-line-sw{width:16px; height:2px; background:rgba(255,255,255,.5); border-radius:1px; flex:0 0 auto;}  /* line key = shared-funder edge */
.cg-note{color:var(--text-3); font-size:.8125rem; line-height:1.55; margin-top:var(--space-4); max-width:74ch;}
@media (prefers-reduced-motion:reduce){
  .cg-edge{animation:none; stroke-dashoffset:0;}
  .cg-node-in{animation:none; opacity:1; transform:none;}
  .cg-pulse{display:none;}
  .cg-node,.cg-node .cg-glow,.cg-node .cg-core{transition-duration:0s;}
}

/* ============================================================================
   PRICE CHART (2026-06-08, rev2) — TradingView Lightweight Charts v5 (vendored),
   themed to our terminal. Native wheel-zoom / drag-pan / crosshair. Candle colours =
   site --up/--down. Events = GMGN-style colour-coded badges above the candle.
   ========================================================================== */
.tc-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3);}
.tc-prov{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3);}
.tc-prov .tc-src{color:var(--text-2); text-transform:none;}  /* keep brand casing (Gate.io, not GATE.IO) */
.tc-prov .mono{font-family:var(--font-mono); text-transform:none; letter-spacing:0; color:var(--text-3); font-size:.9em;}
.tc-tfs{display:flex; gap:4px; flex:0 0 auto;}
.tc-tf{font-size:.75rem; padding:4px 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-1); color:var(--text-3); cursor:pointer; font-variant-numeric:tabular-nums;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.tc-tf:hover{color:var(--text-1); border-color:var(--border-hover);}
.tc-tf.is-active{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}

/* ---- chart toolbar: event filter (#2) · volume (#5) · compare exchanges/majors (#3/#4) ---- */
.tc-toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3) var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-3);}
.tc-toolbar:empty{display:none;}
.tc-tools{display:flex; align-items:center; gap:var(--space-4) var(--space-5); flex-wrap:wrap; margin-inline-start:auto;}
.tc-filter,.tc-cmp,.tc-vol{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.tc-flbl,.tc-clbl{font-size:.6875rem; text-transform:uppercase; letter-spacing:var(--track-caps-sm); color:var(--text-3); white-space:nowrap;}
.tc-cgrp{display:inline-flex; align-items:center; gap:5px;}
.tc-cgrp + .tc-cgrp{margin-inline-start:5px; padding-inline-start:9px; border-inline-start:1px solid var(--border);}
/* shared small toggle pill — filter chip, compare chip, volume button + size */
.tc-fchip,.tc-cchip,.tc-vbtn,.tc-vs{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px;
  font-size:.6875rem; font-weight:500; color:var(--text-3); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), opacity var(--dur-2) var(--ease-std);}
.tc-fchip:hover,.tc-cchip:hover,.tc-vbtn:hover,.tc-vs:hover{color:var(--text-1); border-color:var(--border-hover);}
.tc-fchip:active,.tc-cchip:active,.tc-vbtn:active,.tc-vs:active{transform:scale(.97);}
.tc-fchip .ic{display:inline-flex;} .tc-fchip .ic svg{width:11px; height:11px; stroke-width:1.75;}
/* filter chip: ON = its category colour, OFF = dimmed + struck (marker hidden) */
.tc-fchip{color:var(--text-2);}
.tc-fchip[aria-pressed="false"]{opacity:.45; text-decoration:line-through; text-decoration-thickness:1px;}
.tc-fchip.is-active{color:var(--text-1); border-color:color-mix(in srgb, var(--c) 55%, var(--border)); background:color-mix(in srgb, var(--c) 12%, transparent);}
/* compare chip: line-swatch + active/loading/no-data states */
.tc-cchip .sw{width:10px; height:3px; border-radius:2px; background:var(--c); opacity:.4; flex:0 0 auto;}
.tc-cchip.is-active{color:var(--text-1); border-color:color-mix(in srgb, var(--c) 55%, var(--border)); background:color-mix(in srgb, var(--c) 12%, transparent);}
.tc-cchip.is-active .sw{opacity:1;}
.tc-cchip.is-loading{opacity:.55; cursor:progress;}
.tc-cchip.is-empty{border-color:var(--down); color:var(--down);}
/* volume control */
.tc-vbtn.is-active{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}
.tc-vsize{display:inline-flex; gap:3px; align-items:center;}
.tc-vs{height:22px; padding:0 7px; font-size:.625rem;}
.tc-vs.is-active{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}
/* compare: ONE collapsed toggle (declutter — 5+ chips were always on screen) → reveals chips */
/* GENERIC dropdown (.tc-dd) — общий стиль для «Сравнить», «События», «Таймфрейм» (триггер ▾ + попап) */
.tc-cmp,.tc-dd{position:relative; display:inline-flex; align-items:center; gap:6px;}
.tc-cmp-tog,.tc-dd-tog{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; font-size:.6875rem;
  font-weight:500; color:var(--text-2); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.tc-cmp-tog:hover,.tc-cmp-tog.is-on,.tc-dd-tog:hover,.tc-dd-tog.is-on{color:var(--text-1); border-color:var(--border-hover);}
.tc-cmp-tog .cv,.tc-dd-tog .cv{font-size:.6rem; opacity:.7; transition:transform var(--dur-2) var(--ease-std);}
.tc-cmp-tog.is-on .cv,.tc-dd-tog.is-on .cv{transform:rotate(180deg);}
.tc-dd-tog .tc-tf-cur{font-variant-numeric:tabular-nums;}
/* выезжающий список (dropdown popover) — общий */
.tc-cmp-pop,.tc-dd-pop{position:absolute; top:calc(100% + 6px); right:0; z-index:30; min-width:140px;
  display:flex; flex-direction:column; gap:1px; padding:6px; background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-2);}
.tc-cmp-pop{min-width:194px;}
.tc-cmp-pop[hidden],.tc-dd-pop[hidden]{display:none;}
/* строки попапа «События» (tc-fchip) / «Таймфрейм» (tc-tf) — на всю ширину, как чекбоксы «Сравнить» */
.tc-dd-pop .tc-fchip,.tc-dd-pop .tc-tf{display:flex; width:100%; justify-content:flex-start; height:30px;
  margin:0; border:0; border-radius:var(--radius-sm); background:transparent;}
.tc-dd-pop .tc-fchip:hover,.tc-dd-pop .tc-tf:hover{background:var(--fill-hover); color:var(--text-1);}
.tc-dd-pop .tc-tf.is-active{color:var(--accent); background:var(--accent-tint);}
.tc-dd-pop .tc-fchip.is-active{background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--text-1);}
/* источник свечей (tc-srcb) в дропдауне — те же строки, что ТФ/события (был сегмент-тумблер) */
.tc-dd-pop .tc-srcb{display:flex; width:100%; justify-content:flex-start; height:30px; padding:0 8px;
  margin:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-2);}
.tc-dd-pop .tc-srcb:hover{background:var(--fill-hover); color:var(--text-1);}
.tc-dd-pop .tc-srcb.is-active{color:var(--accent); background:var(--accent-tint);}
.tc-srcdd .tc-src-cur{font-weight:600;}
.tc-srcdd.is-loading{opacity:.6; cursor:progress;}
.tc-srcdd.is-empty .tc-dd-tog{border-color:var(--down); color:var(--down);}
.tc-cmp-sec{font-size:.625rem; text-transform:uppercase; letter-spacing:var(--track-caps-sm);
  color:var(--text-3); padding:6px 8px 3px;}
.tc-cmp-sec:first-child{padding-top:2px;}
.tc-cmp-pop .tc-cchip{display:flex; align-items:center; gap:9px; width:100%; height:30px; padding:0 8px;
  background:transparent; border:none; border-radius:var(--radius-sm); color:var(--text-2);
  font-size:.8125rem; font-weight:500; cursor:pointer; text-align:left;}
.tc-cmp-pop .tc-cchip:hover{background:var(--fill-hover); color:var(--text-1);}
.tc-cmp-pop .tc-cchip .nm{flex:1; min-width:0; white-space:nowrap;}
.tc-cmp-pop .tc-cchip .cb{flex:0 0 auto; width:16px; height:16px; border:1.5px solid var(--border-strong);
  border-radius:4px; position:relative;
  transition:background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);}
.tc-cmp-pop .tc-cchip.is-active .cb{background:var(--accent); border-color:var(--accent);}
.tc-cmp-pop .tc-cchip.is-active .cb::after{content:"✓"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:11px; line-height:1; font-weight:700; color:#fff;}
.tc-cmp-pop .tc-cchip .sw{width:13px; height:3px; border-radius:2px; background:var(--c); opacity:.5; flex:0 0 auto;}
.tc-cmp-pop .tc-cchip.is-active .sw{opacity:1;}
.tc-cmp-pop .tc-cchip.is-loading{opacity:.55; cursor:progress;}
.tc-cmp-pop .tc-cchip.is-empty{color:var(--down);}
.tc-cmp-pop .tc-cchip.is-empty .cb{border-color:var(--down);}
/* tidy tool clusters: subtle dividers so Объём | шкала | Сравнить read as groups, not a pile */
.tc-tools{gap:8px;}
/* без «палочек»-разделителей между каждым контролом (от них шапка выглядела разбросанной,
   user 2026-06-15). Дисплей-тумблеры (объём+шкала) сгруппированы в .tc-tgrp и отделены от
   дропдаунов одним мягким отступом. */
.tc-tgrp{display:inline-flex; align-items:center; gap:6px; margin-inline-start:6px;
  padding-inline-start:10px; border-inline-start:1px solid var(--border);}
/* compare legend — active overlays + their % at the crosshair / last bar */
.tc-cmp-legend{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:0 0 var(--space-2);}
.tc-cmp-legend:empty{display:none;}
.tc-leg{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; color:var(--text-2);}
.tc-leg .sw{width:11px; height:3px; border-radius:2px; flex:0 0 auto;}
.tc-leg b{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-1); margin-inline-start:1px;}
.tc-leg b.up{color:var(--up);} .tc-leg b.down{color:var(--down);}
/* focused event marker (event page) — calm ring pulse so the opened event stands out */
.tc-mk.is-focus{z-index:6;}
.tc-mk.is-focus .tc-mk-c{transform:scale(1.16); box-shadow:0 0 0 3px color-mix(in srgb, var(--mk) 30%, transparent), 0 0 12px color-mix(in srgb, var(--mk) 45%, transparent);}
@media (prefers-reduced-motion:no-preference){
  .tc-mk.is-focus .tc-mk-c{animation:tc-focus-pulse 2.2s var(--ease-std) infinite;}
  @keyframes tc-focus-pulse{
    0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--mk) 26%, transparent), 0 0 10px color-mix(in srgb, var(--mk) 38%, transparent);}
    50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--mk) 13%, transparent), 0 0 16px color-mix(in srgb, var(--mk) 52%, transparent);}
  }
}

/* ---- Active/selected control — ONE pressed-and-lit recipe (chip · sig · pager · segmented),
   overrides the flat tints above; + quiet press feedback on the small controls ---- */
.chip.is-active,.sig.is-active,.pg-num.is-cur,.mo-win.is-active,.tc-tf.is-active{
  color:var(--accent); background:var(--accent-tint-2);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent), inset 0 -1px 0 hsl(var(--shadow-color)/.4);
}
.chip:active,.sigt:active,.mo-win:active,.tc-tf:active,.pg-num:active,.pg-btn:active{transform:scale(.97);}
/* crosshair OHLC readout (TradingView-style, top-left) */
.tc-readout{display:flex; align-items:center; gap:var(--space-3) var(--space-5); flex-wrap:wrap; min-height:20px;
  margin-bottom:var(--space-3); font-size:.75rem; color:var(--text-3);}
.tc-readout .tc-rdate{color:var(--text-2);}
.tc-readout .tc-ohlc{display:flex; gap:var(--space-3) var(--space-4); flex-wrap:wrap;}
.tc-readout .tc-ohlc b{color:var(--text-1); font-weight:500; font-variant-numeric:tabular-nums;}
.tc-readout .tc-chg{font-variant-numeric:tabular-nums;}
.tc-readout .tc-chg.up{color:var(--up);} .tc-readout .tc-chg.down{color:var(--down);}
.tc-readout .mono{font-family:var(--font-mono);}
/* OHLC-ридаут как ПЛАВАЮЩИЙ оверлей внутри графика (top-left), а не отдельной строкой шапки —
   экономит вертикаль, как в TradingView/Nansen. pointer-events:none → кроссхэр работает сквозь него;
   полупрозрачная подложка держит читаемость поверх свечей. */
.tc-plot > .tc-readout{position:absolute; top:5px; left:52px; right:auto; z-index:5; margin:0; min-height:0;
  pointer-events:none; padding:2px 8px; border-radius:var(--radius-sm); font-size:.6875rem; flex-wrap:nowrap;
  max-width:calc(100% - 16px); overflow:hidden;
  background:color-mix(in srgb, var(--surface-1) 72%, transparent); border:1px solid var(--border);}
/* GLOBAL OHLC-readout hide (data-ohlc-toggle → <html> class, persisted) — clears the overlay from
   EVERY chart on the page so it never blocks the view, esp. with many charts in the DEX Visor. */
html.hide-chart-ohlc .tc-readout{display:none !important;}
/* plot host — Lightweight Charts fills it (autoSize); marker layer + tooltip sit over it */
.tc-plot{position:relative; width:100%; height:392px;}
.tc-plot table{margin:0;}   /* LWC internal layout table — keep our resets off it */
.tc-mk-layer{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4;}
/* Drawing tools (token-draw.js): overlay canvas + a vertical TradingView-style tool rail */
.tc-draw-cv{position:absolute; inset:0; z-index:5; pointer-events:none;}   /* JS toggles pointer-events when a tool is active */
.tc-draw{position:absolute; left:8px; top:8px; z-index:6; display:flex; flex-direction:column; gap:3px;
  padding:4px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--surface-2) 82%, transparent);
  border:1px solid var(--border); box-shadow:0 8px 22px -12px rgba(0,0,0,.7); backdrop-filter:blur(6px);}
.tc-dbtn{width:28px; height:28px; display:grid; place-items:center; border-radius:var(--radius-sm);
  color:var(--text-3); border:1px solid transparent; cursor:pointer;
  transition:color var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);}
.tc-dbtn svg{width:17px; height:17px;}
.tc-dbtn:hover{color:var(--text-1); background:var(--fill-hover);}
.tc-dbtn.is-active{color:var(--accent-ink); background:var(--accent); border-color:var(--accent);}
.tc-dbtn.tc-dclear:hover{color:var(--down); background:color-mix(in srgb, var(--down) 14%, transparent);}
.tc-dbtn:focus-visible{outline:none; border-color:var(--accent);}
.tc-dsep{height:1px; margin:2px 3px; background:var(--border);}
@media (max-width:560px){ .tc-draw{flex-direction:row; left:8px; top:auto; bottom:8px;} .tc-dsep{height:auto; width:1px; margin:3px 2px;} }
/* GMGN-style event badge: dark disc + per-type coloured ring/glyph/glow + tail to the candle */
.tc-mk{position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center;
  cursor:pointer; pointer-events:auto; text-decoration:none;}
.tc-mk-c{width:22px; height:22px; border-radius:var(--radius-pill); background:var(--surface-3); border:1.5px solid var(--mk);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mk) 16%, transparent), 0 5px 14px -4px rgba(0,0,0,.8);
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);}
.tc-mk-ic{display:inline-flex; color:var(--mk);}
.tc-mk-ic svg{width:12px; height:12px; stroke-width:1.75;}
.tc-mk-tail{width:0; height:0; margin-top:1px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--mk); opacity:.9;}
/* DEX-Visor per-tx (GMGN-style) leg markers: a coloured CIRCLE per buy/sell, each carrying its
   wallet (data-w). buy = green (bottom lane), sell = red (top lane) — vertical set as a CSS % lane
   by placeMarkers so it's immune to layout/framing timing. Hover (or .is-hl from the wallet strip)
   enlarges + rings it. The «eye» toggles keep the visible count low. */
.tc-mk.tc-legc{transform:translateX(-50%); flex-direction:row; z-index:5;}
.tc-legc-dot{display:block; width:14px; height:14px; border-radius:var(--radius-pill); border:2px solid var(--surface-1);
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.7); transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);}
.tc-legc.side-buy .tc-legc-dot{background:var(--up);}
.tc-legc.side-sell .tc-legc-dot{background:var(--down);}
.tc-legc.side-buy:hover .tc-legc-dot,.tc-legc.side-buy.is-hl .tc-legc-dot{transform:scale(1.5); box-shadow:0 0 0 3px color-mix(in srgb, var(--up) 30%, transparent), 0 2px 6px rgba(0,0,0,.6);}
.tc-legc.side-sell:hover .tc-legc-dot,.tc-legc.side-sell.is-hl .tc-legc-dot{transform:scale(1.5); box-shadow:0 0 0 3px color-mix(in srgb, var(--down) 30%, transparent), 0 2px 6px rgba(0,0,0,.6);}
.tc-mk:hover .tc-mk-c,.tc-mk:focus-visible .tc-mk-c{transform:scale(1.18);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--mk) 26%, transparent), 0 7px 18px -4px rgba(0,0,0,.85);}
.tc-mk:focus-visible{outline:none;}
.tc-mk-tip{position:absolute; z-index:7; min-width:150px; max-width:240px; padding:9px 11px; pointer-events:auto;
  background:var(--surface-4); 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 .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);}
.tc-mk-note{display:flex; align-items:flex-start; gap:7px; margin-top:var(--space-3); font-size:.8125rem; line-height:1.5; color:var(--text-3);}
.tc-mk-note .dot{width:7px; height:7px; margin-top:6px; border-radius:var(--radius-pill); background:var(--accent); flex:0 0 auto;}
@media (prefers-reduced-motion:reduce){ .tc-mk-c,.tc-tf{transition-duration:0s;} }

/* ---------------------------------------------------------------- Phase D — token header meta + card 24h move */
.detail-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); margin-top:var(--space-3);}
.detail-meta .meta-sector{display:inline-flex; align-items:center; height:22px; padding:0 9px; font-size:.6875rem; font-weight:500; letter-spacing:.01em; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);}
.detail-meta a.meta-sector:hover{color:var(--text-1); border-color:var(--border-hover);}
.detail-meta .meta-price{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.9375rem; color:var(--text-1);}
.detail-meta .meta-chg{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.875rem; display:inline-flex; align-items:center; gap:4px;}
.detail-meta .meta-chg.up{color:var(--up);} .detail-meta .meta-chg.down{color:var(--down);}
.detail-meta .meta-chg .u{color:var(--text-3);}
.tc-chg{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.75rem;}
.tc-chg.up{color:var(--up);} .tc-chg.down{color:var(--down);}

/* ============================================================================
   SCALE BAND + FUNNEL + TELEGRAM PROMO (2026-06-08) — index «Масштаб» throughput
   brag (derived scan-rate counters) → просеивание funnel → bespoke mobile-notification
   mockup for the Telegram mention. ONE accent, hairlines, transform/opacity motion.
   ========================================================================== */
.scale-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--space-5); margin-bottom:var(--space-6);}
.scale-tile{padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);}
.scale-tile .kpi{font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3rem); font-weight:500; color:var(--text-1);
  font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; letter-spacing:-.03em; line-height:1;}
.scale-tile .lbl{font-size:.8125rem; color:var(--text-3); line-height:1.45;}

/* funnel: весь поток → значимые → сигналы. Width narrows (flex-grow) to read as a funnel. */
.funnel{display:flex; align-items:stretch; gap:var(--space-3); padding:clamp(var(--space-5),3vw,var(--space-8)); flex-wrap:wrap;}
.fn-step{min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:var(--space-5) var(--space-6);
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-md);}
.fn-1{flex:1.5 1 200px;} .fn-2{flex:1.15 1 180px;} .fn-3{flex:.85 1 160px; border-color:var(--border-strong); background:var(--surface-2);}
.fn-step .fn-n{font-family:var(--font-display); font-size:1.75rem; color:var(--text-1); font-variant-numeric:tabular-nums slashed-zero; letter-spacing:-.02em; line-height:1;}
.fn-step .fn-l{font-weight:600; color:var(--text-1); font-size:1rem; letter-spacing:-.01em;}
.fn-step .fn-c{font-size:.8125rem; color:var(--text-3); line-height:1.45;}
.fn-arrow{display:flex; align-items:center; color:var(--text-disabled); flex:0 0 auto;}
.fn-arrow svg{width:20px; height:20px; stroke-width:1.5;}
@media(max-width:760px){ .funnel{flex-direction:column;} .fn-arrow{transform:rotate(90deg); align-self:center;} .fn-step{flex:1 1 auto;} }

/* Telegram promo — bespoke device + notification, built from OUR components (no stock phone) */
.tg-promo{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(var(--space-8),5vw,var(--space-16)); align-items:center; padding:clamp(var(--space-8),4vw,var(--space-12));}
.tg-copy h2{margin-top:var(--space-3);}
.tg-copy p{color:var(--text-2); margin-top:var(--space-4); max-width:46ch; line-height:1.6;}
.tg-copy .btn{margin-top:var(--space-6);}
.tg-device{justify-self:center; position:relative; width:250px; height:312px; border-radius:32px; padding:14px;
  background:linear-gradient(160deg, var(--surface-3), var(--surface-1)); border:1px solid var(--border-strong);
  box-shadow:0 34px 80px -26px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06);}
.tg-notch{position:absolute; top:13px; left:50%; transform:translateX(-50%); width:78px; height:6px; border-radius:var(--radius-pill); background:rgba(255,255,255,.12); z-index:2;}
.tg-screen{position:relative; height:100%; border-radius:22px; overflow:hidden; padding:var(--space-6) var(--space-4);
  background:radial-gradient(120% 75% at 50% 0%, rgba(45,212,191,.06), transparent 55%), var(--bg); border:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:center;}
.tg-noti{position:relative; z-index:1; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:var(--space-4); box-shadow:0 12px 28px -14px rgba(0,0,0,.6);}
.tg-noti-back{position:absolute; left:20px; right:20px; top:26px; height:64px; z-index:0; opacity:.45; transform:scale(.93); padding:0;}
.tg-nh{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.tg-app{width:20px; height:20px; border-radius:6px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.tg-app svg{width:13px; height:13px; stroke:var(--accent); stroke-width:1.75;}
.tg-app-n{font-weight:600; color:var(--text-1); font-size:.8125rem; letter-spacing:-.01em;}
.tg-time{margin-inline-start:auto; font-size:.6875rem; color:var(--text-3); font-family:var(--font-mono);}
.tg-sig{display:flex; align-items:center; gap:6px; font-weight:600; color:var(--text-1); font-size:.8125rem; margin-bottom:5px;}
.tg-glyph{display:inline-flex; flex:0 0 auto;} .tg-glyph svg{width:13px; height:13px; stroke-width:1.75;}
.tg-line{font-size:.75rem; color:var(--text-2);}
.tg-val{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--text-1); margin-top:5px;}
@media(max-width:760px){ .tg-promo{grid-template-columns:1fr; gap:var(--space-8); justify-items:center; text-align:center;} .tg-copy p{margin-inline:auto;} }

/* ============================================================================
   TX DETAIL SLIDE-OVER (2026-06-08) — Arkham-style transaction panel (tx-panel.js).
   Pre-baked detail (enrich_tx.py), zero runtime RPC. Overlay = true modal (shadow ok).
   ========================================================================== */
.txp-overlay{position:fixed; inset:0; z-index:100; display:flex; justify-content:flex-end;
  background:rgba(0,0,0,0); transition:background var(--dur-4) var(--ease-out);}
.txp-overlay.is-open{background:rgba(0,0,0,.55);}
@supports (backdrop-filter:blur(2px)){ .txp-overlay.is-open{backdrop-filter:blur(2px);} }
/* Interactivity guard (bug 2026-06-09): `[hidden]` (UA display:none, specificity
   0,1,0) is overridden by `.txp-overlay{display:flex}` (equal specificity, author
   wins source-order) → the closed-but-not-yet-hidden transparent overlay kept
   capturing every page click. `.txp-overlay[hidden]` (0,2,0) beats it → real hide;
   `:not(.is-open)` lets clicks pass through IMMEDIATELY during the close fade,
   before `hidden` is set (the 280ms dead-zone). */
.txp-overlay:not(.is-open){pointer-events:none;}
.txp-overlay.is-open{pointer-events:auto;}
.txp-overlay[hidden]{display:none;}
.txp-drawer{width:min(480px,100%); height:100%; background:var(--surface-1); border-left:1px solid var(--border-strong);
  box-shadow:-30px 0 80px -20px hsl(var(--shadow-color)/.7); display:flex; flex-direction:column; overflow:hidden; outline:none;
  transform:translateX(100%); transition:transform var(--dur-4) var(--ease-out);}
.txp-overlay.is-open .txp-drawer{transform:translateX(0);}
.txp-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border); flex:0 0 auto;}
.txp-h-l{display:flex; align-items:center; gap:var(--space-3);}
.txp-title{font-size:1rem; font-weight:600; color:var(--text-1); letter-spacing:-.01em;}
.txp-status{font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:var(--track-caps-sm); padding:3px 8px; border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--text-3);}
.txp-status.ok{color:var(--up); border-color:rgba(61,214,140,.4); background:var(--up-tint);}
.txp-status.fail{color:var(--down); border-color:rgba(255,149,146,.4); background:var(--down-tint);}
.txp-close{width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); color:var(--text-3); border:1px solid var(--border); flex:0 0 auto;}
.txp-close:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);}
.txp-close svg{width:16px; height:16px; stroke-width:1.5;}
.txp-body{flex:1; overflow-y:auto; padding:var(--space-6);}
.txp-load{padding:var(--space-2);}
.txp-kv{display:grid; grid-template-columns:auto 1fr; gap:var(--space-3) var(--space-5); align-items:baseline; margin-bottom:var(--space-6);}
.txp-kv .k{color:var(--text-3); font-size:.8125rem;}
.txp-kv .v{text-align:right; color:var(--text-1); font-size:.875rem; min-width:0; overflow-wrap:anywhere;}
.txp-kv .v .mono,.txp-kv .v.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.txp-kv .v .u{color:var(--text-3); font-family:var(--font-mono); margin-inline-start:6px; font-size:.8125rem;}
.txp-net{display:inline-flex; align-items:center; gap:6px;}
.txp-net .cdot{width:8px; height:8px; border-radius:var(--radius-pill);}
.txp-hash{display:inline-flex; align-items:center; gap:6px; justify-content:flex-end;}
.txp-copy{display:inline-flex; align-items:center; color:var(--text-3); padding:2px; cursor:pointer;}
.txp-copy:hover{color:var(--text-1);} .txp-copy.copied{color:var(--up);}
.txp-copy svg{width:13px; height:13px; stroke-width:1.5;}
/* from→to flow */
.txp-flow{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-3); align-items:center; padding:var(--space-5); margin-bottom:var(--space-6);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);}
/* центрируем содержимое обеих половин → стрелка в auto-колонке равноудалена (симметрия) */
.txp-flow-end{min-width:0; display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center;}
.txp-flow-end .lab{font-size:.6875rem; text-transform:uppercase; letter-spacing:var(--track-caps-sm); color:var(--text-3);}
.txp-flow-end .txp-party,.txp-flow-end .txp-pl,.txp-flow-end .txp-tagline{align-items:center;}
.txp-flow-arr{color:var(--text-disabled); display:flex; justify-content:center;} .txp-flow-arr svg{width:18px; height:18px; stroke-width:1.5;}
/* «Главный перевод» — заметный итог токенового движения (лого+кол-во+токен); деталь дублируется ниже */
/* средняя колонка потока: главный токен-перевод (лого+кол-во+тикер+$) НА стрелке между сторонами */
.txp-flow-mid{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:0 var(--space-3);}
.txp-flow-act{font-size:.625rem; text-transform:uppercase; letter-spacing:var(--track-caps-sm); color:var(--text-3);}
.txp-flow-tok{display:inline-flex; align-items:center; gap:5px; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.8125rem; color:var(--text-1);}
.txp-flow-tok .txp-lg{width:18px; height:18px;}
.txp-flow-tok b{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.txp-flow-tok .usd{font-style:normal; font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); margin-left:2px;}
.txp-party{display:flex; flex-direction:column; gap:4px; min-width:0;}
.txp-pl{display:inline-flex; align-items:center; gap:6px; min-width:0;}
.txp-pa{color:var(--text-1); font-size:.875rem; font-weight:500; overflow-wrap:anywhere;}
.txp-pa.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
a.txp-pa:hover{color:var(--accent);}
.txp-tagline{display:flex; min-width:0;}
.txp-tag{font-size:.6875rem; color:var(--text-3); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
a.txp-tag{text-decoration:none;}
.txp-tag.tok{display:inline-flex; align-items:center; color:var(--accent); font-family:var(--font-mono); font-weight:600;
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius:var(--radius-sm); padding:0 6px; line-height:1.5;}
a.txp-tag.tok:hover{background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);}
/* token transfers */
.txp-sec{margin-top:var(--space-2);}
.txp-sec-h{font-size:.75rem; text-transform:uppercase; letter-spacing:var(--track-caps-lg); color:var(--text-3); margin-bottom:var(--space-3);}
.txp-sec-h .n{font-family:var(--font-mono); color:var(--text-2); margin-inline-start:4px;}
.txp-trs{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.txp-tr{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border);}
.txp-tr:last-child{border-bottom:none;}
.txp-tr-tok{font-weight:600; color:var(--text-1); font-size:.8125rem;}
.txp-tr-flow{display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap;}
.txp-tr-flow .arr{display:inline-flex; color:var(--text-disabled);} .txp-tr-flow .arr svg{width:12px; height:12px; stroke-width:1.5;}
.txp-pc{min-width:0; display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;} .txp-pc .txp-pa{font-size:.75rem; color:var(--text-2); font-weight:400;} .txp-pc .txp-tag.tok{font-size:.625rem; padding:0 4px;}
.txp-tr-amt{text-align:right; font-size:.8125rem; color:var(--text-1); white-space:nowrap;}
.txp-tr-amt .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.txp-tr-amt .u{display:block; font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); margin-top:1px;}
.txp-tr-more{padding:var(--space-3) var(--space-4); color:var(--text-3); font-size:.75rem;}
.txp-foot{margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--border); display:flex; gap:var(--space-6); flex-wrap:wrap;}
.txp-foot a{display:inline-flex; align-items:center; gap:6px; color:var(--text-2); font-size:.8125rem;}
.txp-foot a:hover{color:var(--text-1);} .txp-foot svg{width:14px; height:14px; stroke-width:1.5;}
/* круглый лого токена/агрегатора в TX-панели (вместо квадрата) — клип изображения по кругу */
.txp-lg{width:18px; height:18px; flex:0 0 auto; border-radius:999px; overflow:hidden; background:var(--surface-3);
  display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; font-weight:600; color:var(--text-2); line-height:1;}
.txp-lg img{width:100%; height:100%; object-fit:cover; display:block;}
/* fallback-сводка (нет запечённого tx_<hash>.json) */
.txp-hint-phrase{margin:0 0 var(--space-5); color:var(--text-2); font-size:.875rem; line-height:1.45;}
.txp-hint-note{margin-top:var(--space-5); padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text-3); font-size:.75rem; line-height:1.5;}
@media (max-width:520px){ .txp-drawer{width:100%;} }
@media (prefers-reduced-motion:reduce){ .txp-overlay,.txp-drawer{transition-duration:0s;} }

/* claim «Прогресс раздачи» drain bar (event-detail.js claimProgress) */
.cp-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); margin-top:var(--space-4); font-size:.8125rem; color:var(--text-2); font-variant-numeric:tabular-nums;}
.cp-meta .sep{color:var(--text-disabled);}
.cp-note{color:var(--text-3); font-size:.8125rem; line-height:1.55; margin-top:var(--space-3);}
/* шкала Цена | Кап. — сегмент-тумблер у графика (стиль как у tc-vbtn) */
.tc-scale{display:flex; align-items:center; gap:4px;}
.tc-sbtn{display:inline-flex; align-items:center; height:24px; padding:0 9px; font-size:.6875rem; font-weight:500;
  color:var(--text-3); background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
  transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.tc-sbtn:hover{color:var(--text-1); border-color:var(--border-hover);}
.tc-sbtn.is-active{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);}

/* language switcher (RU/EN) — nav segmented toggle, shared by guest pages */
.lang-switch{display:inline-flex; align-items:center; gap:1px; padding:2px; border:1px solid var(--border);
  border-radius:var(--radius-pill); background:var(--surface-2);}
.lang-switch .ls-opt{font-family:var(--font-mono); font-size:.6875rem; font-weight:500; letter-spacing:.04em;
  color:var(--text-3); text-decoration:none; padding:3px 8px; border-radius:var(--radius-pill); line-height:1;
  transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);}
.lang-switch .ls-opt:hover{color:var(--text-1);}
.lang-switch .ls-opt.is-on{color:var(--accent-ink); background:var(--accent);}