/* ──────────────────────────────────────────────────────────────
   Metas — design tokens + components
   ────────────────────────────────────────────────────────────── */
:root{
  --s0:#08080B; --s1:#0B0B10; --s2:#101015; --s3:#15151C; --s4:#1B1B24; --s5:#23232E;
  --line-soft:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.12);
  --t-hi:rgba(255,255,255,.92);
  --t-mid:rgba(255,255,255,.62);
  --t-lo:rgba(255,255,255,.50);   /* WCAG AA: 5.6:1 on --s1 (was .40 = 4.0:1, sub-AA) */
  --t-dim:rgba(255,255,255,.24);
  --a:oklch(86% 0.17 112);
  --a-soft:oklch(86% 0.17 112 / .14);
  --a-dim:oklch(62% 0.13 112 / .35);
  --pos:oklch(74% 0.16 152);
  --pos-soft:oklch(74% 0.16 152 / .14);
  --neg:oklch(66% 0.18 25);
  --neg-soft:oklch(66% 0.18 25 / .15);
  --sans:"Geist","Söhne","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Fraunces",ui-serif,Georgia,serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--s0);color:var(--t-hi);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";
  font-variant-numeric:tabular-nums;font-size:13px;line-height:1.4}
button{font-family:inherit;color:inherit}
::selection{background:var(--a-soft);color:var(--t-hi)}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06)}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.12)}
*::-webkit-scrollbar-track{background:transparent}

.smcaps{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-mid);font-feature-settings:"calt" 0,"liga" 0}
.mono{font-family:var(--mono);font-feature-settings:"calt" 0,"liga" 0;font-variant-numeric:tabular-nums}
.pos{color:var(--pos)} .neg{color:var(--neg)} .acc{color:var(--a)}
.muted{color:var(--t-mid)} .dim{color:var(--t-lo)}

/* ─── Stage / scaling ─── */
html,body{height:100%;overflow:hidden}
.stage{position:fixed;inset:0;background:var(--s0);display:flex;align-items:center;justify-content:center;overflow:hidden}
.canvas{width:1440px;height:900px;background:var(--s1);position:relative;transform-origin:50% 50%;flex:none}
.canvas{box-shadow:0 0 0 1px var(--line-soft),0 24px 80px rgba(0,0,0,.6)}

/* ─── Top app bar ─── */
.appbar{height:40px;border-bottom:1px solid var(--line);display:flex;align-items:stretch;background:var(--s1)}
.appbar .brand{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid var(--line);min-width:160px}
.appbar .brand .mark{width:14px;height:14px;background:var(--a);border-radius:1px;transform:rotate(45deg)}
.appbar .brand .nm{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--t-hi);font-feature-settings:"calt" 0,"liga" 0}
.appbar .brand .ver{font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.06em}
.ticker{flex:1;display:flex;overflow:hidden;align-items:center;padding:0 12px;gap:22px;
  font-family:var(--mono);font-size:11px;color:var(--t-mid);font-feature-settings:"calt" 0,"liga" 0;
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.ticker .item{display:flex;gap:6px;white-space:nowrap}
.ticker .item .v{color:var(--t-hi)}
.ticker-track{display:flex;gap:22px;animation:tick 90s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.appbar .right{display:flex;align-items:center;border-left:1px solid var(--line)}
.appbar .right .kbd{display:flex;align-items:center;gap:6px;padding:0 14px;height:100%;
  border-right:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.04em;cursor:pointer}
.appbar .right .kbd:hover{color:var(--t-hi);background:var(--s2)}
.appbar .right .kbd kbd{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 4px;
  border:1px solid var(--line-strong);border-radius:2px;font-family:var(--mono);font-size:10px;color:var(--t-hi);background:var(--s2)}
.appbar .right .clock{padding:0 14px;font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.06em;display:flex;align-items:center;gap:8px;
  appearance:none;border:0;background:none;cursor:pointer;height:100%;font-feature-settings:"calt" 0,"liga" 0;transition:color 120ms,background 120ms}
.appbar .right .clock:hover{color:var(--t-hi);background:var(--s2)}
.appbar .right .clock .session{color:var(--t-dim);font-size:10px;letter-spacing:.08em;border-left:1px solid var(--line-soft);padding-left:8px}
.appbar .right .clock .pulse{width:6px;height:6px;border-radius:50%;background:var(--pos);
  box-shadow:0 0 0 2px color-mix(in oklch,var(--pos) 18%,transparent);animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.55}}

/* ─── Tab strip ─── */
.tabs{height:36px;border-bottom:1px solid var(--line);display:flex;align-items:stretch;background:var(--s1)}
.tabs .nav{display:flex;align-items:stretch;padding-left:16px}
.tabs .tab{display:flex;align-items:center;gap:8px;padding:0 18px;font-size:13px;color:var(--t-mid);position:relative;cursor:pointer;
  background:none;border:0;font-family:inherit}
.tabs .tab kbd{font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.04em}
.tabs .tab .nav-badge{display:inline-flex;align-items:center;justify-content:center;
  background:var(--a);color:var(--s0);font-family:var(--mono);font-size:9px;font-weight:600;
  min-width:16px;height:16px;padding:0 5px;border-radius:8px;margin-left:6px;letter-spacing:.02em;
  animation:nav-badge-pulse 1.6s ease-in-out infinite}
@keyframes nav-badge-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.tabs .tab:hover{color:var(--t-hi)}
.tabs .tab.active{color:var(--t-hi)}
.tabs .tab.active::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:var(--a)}
.tabs .filters{margin-left:auto;display:flex;align-items:stretch;border-left:1px solid var(--line)}
.tabs .filters .chip{display:flex;align-items:center;gap:8px;padding:0 14px;border-right:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.02em;font-feature-settings:"calt" 0,"liga" 0;cursor:pointer;
  background:none;border-top:0;border-bottom:0}
.tabs .filters .chip b{color:var(--t-hi);font-weight:500}
.tabs .filters .chip:hover{color:var(--t-hi);background:var(--s2)}
.tabs .filters .chip:last-child{border-right:0}

/* segmented timeframe control inside filters */
.tabs .filters .chip-group{display:flex;align-items:stretch;border-right:1px solid var(--line-soft)}
.tabs .filters .chip-group .chip.tf{padding:0 12px;border-right:1px solid var(--line-soft);border-radius:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--t-mid);
  background:none;border-left:0;border-top:0;border-bottom:0;cursor:pointer;font-feature-settings:"calt" 0,"liga" 0}
.tabs .filters .chip-group .chip.tf:last-child{border-right:0}
.tabs .filters .chip-group .chip.tf:hover{color:var(--t-hi);background:var(--s2)}
.tabs .filters .chip-group .chip.tf.active{color:var(--s0);background:var(--a)}
.tabs .filters .chip-group .chip.tf.active:hover{background:var(--a)}

/* ─── KPI strip · Spark·Glow (sparkline rows + radial pos/neg glow bg) ─── */
:root{
  --pos-glow:oklch(74% 0.16 152 / .35);
  --neg-glow:oklch(66% 0.18 25 / .35);
}
.kpi{height:88px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));background:var(--s1);width:100%}
.kpi.v-spark-glow .cell{position:relative;padding:10px 16px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden;color:var(--t-hi);text-align:left;cursor:default;background:transparent;gap:4px}
/* When the info button is hovered/focused, lift overflow so the popover
   can escape the cell's clipping context and render over the heatmap. */
.kpi.v-spark-glow .cell:has(.info-btn:hover),
.kpi.v-spark-glow .cell:has(.info-btn:focus-visible),
.kpi.v-spark-glow .cell:has(.info-pop:hover){overflow:visible;z-index:20}

/* Info button + popover (used on KPI strip cells; pattern-reusable elsewhere) */
.info-wrap{position:absolute;top:8px;right:8px;z-index:3}
.info-btn{appearance:none;width:16px;height:16px;padding:0;border:1px solid var(--line);
  background:var(--s2);color:var(--t-dim);font-family:var(--mono);font-size:10px;font-weight:600;
  border-radius:2px;cursor:help;display:flex;align-items:center;justify-content:center;line-height:1;
  transition:color 120ms,border-color 120ms,background 120ms}
.info-btn:hover, .info-btn:focus-visible{color:var(--t-hi);border-color:var(--line-strong);background:var(--s3);outline:none}
.info-pop{position:absolute;top:calc(100% + 6px);right:0;width:280px;
  background:var(--s2);border:1px solid var(--line-strong);border-radius:4px;
  padding:14px 16px;display:none;text-align:left;font-family:var(--sans);
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px var(--line) inset;cursor:default;
  /* small triangle tail pointing up at the button */
}
.info-pop::before{content:'';position:absolute;top:-5px;right:5px;width:10px;height:10px;
  background:var(--s2);border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);transform:rotate(45deg)}
/* Edge cells (leftmost 2 of the KPI strip): flip the popover anchor so it
   extends RIGHT instead of LEFT — otherwise it overflows the viewport on
   small left-side cells. The tail position flips with it. */
.kpi .cell:first-child .info-pop,
.kpi .cell:nth-child(2) .info-pop{right:auto;left:0}
.kpi .cell:first-child .info-pop::before,
.kpi .cell:nth-child(2) .info-pop::before{right:auto;left:5px}
.info-wrap:hover .info-pop,
.info-wrap:focus-within .info-pop{display:block}
.info-pop .info-title{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-lo);margin-bottom:8px}
.info-pop .info-body{display:block;font-size:12px;color:var(--t-mid);line-height:1.55;letter-spacing:-.005em}
.info-pop .info-formula{display:block;margin-top:10px;padding:8px 10px;background:var(--s0);border-radius:3px;
  font-family:var(--mono);font-size:11px;color:var(--a);line-height:1.5;
  white-space:pre-wrap;letter-spacing:.02em}
.kpi.v-spark-glow .cell:last-child{border-right:0}
.kpi.v-spark-glow .cell.bg-pos{background:radial-gradient(ellipse at bottom,oklch(74% 0.16 152 / .14) 0%,transparent 70%)}
.kpi.v-spark-glow .cell.bg-neg{background:radial-gradient(ellipse at bottom,oklch(66% 0.18 25 / .14) 0%,transparent 70%)}
.kpi.v-spark-glow .cell .lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);font-feature-settings:"calt" 0,"liga" 0;position:relative;z-index:2}
.kpi.v-spark-glow .cell .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;position:relative;z-index:2;min-width:0}
.kpi.v-spark-glow .cell .num{font-family:var(--mono);font-size:18px;color:var(--t-hi);font-feature-settings:"tnum";line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.v-spark-glow .cell .num small{font-size:10px;color:var(--t-mid);margin-left:4px}
.kpi.v-spark-glow .cell .delta{font-family:var(--mono);font-size:11px;line-height:1;font-feature-settings:"tnum";white-space:nowrap;flex:none}
.kpi.v-spark-glow .cell .delta.pos{color:var(--pos);text-shadow:0 0 6px var(--pos-glow)}
.kpi.v-spark-glow .cell .delta.neg{color:var(--neg);text-shadow:0 0 6px var(--neg-glow)}
.kpi.v-spark-glow .cell .delta.muted{color:var(--t-lo);text-shadow:none}
.kpi.v-spark-glow .cell .sl{height:22px;width:100%;position:relative;z-index:1}
.kpi.v-spark-glow .cell .sl.glow-pos{filter:drop-shadow(0 0 3px var(--pos-glow))}
.kpi.v-spark-glow .cell .sl.glow-neg{filter:drop-shadow(0 0 3px var(--neg-glow))}
.kpi.v-spark-glow .cell .sl.glow-acc{filter:drop-shadow(0 0 2px oklch(86% 0.17 112 / .35))}
.kpi.v-spark-glow .cell .sl svg{width:100%;height:100%;display:block}
.kpi.v-spark-glow .cell.upd{justify-content:center;gap:3px;padding:10px 14px}
.kpi.v-spark-glow .cell.upd .ts{font-family:var(--mono);font-size:14px;color:var(--t-hi);font-feature-settings:"tnum";line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:2}
.kpi.v-spark-glow .cell.upd .rel{font-family:var(--mono);font-size:11px;color:var(--t-mid);font-feature-settings:"tnum";line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:2}
.kpi.v-spark-glow .cell.upd .pulse{width:6px;height:6px;border-radius:50%;background:var(--a);display:inline-block;margin-right:6px;vertical-align:middle;box-shadow:0 0 6px var(--a)}

/* ─── shared sidebar row (Momentum, Watchlist sidebar, Similar metas) ─── */
.sb-row{display:grid;grid-template-columns:24px 1fr 70px;gap:10px;align-items:center;
  padding:8px 16px;border:0;border-bottom:1px solid var(--line-soft);width:100%;text-align:left;
  background:none;cursor:pointer;font-family:inherit;color:var(--t-hi);min-width:0}
.sb-row:hover{background:var(--s2)} .sb-row.sel{background:var(--s4)}
.sb-row .av.sm{width:22px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.02em;flex:none;overflow:hidden}
.sb-row .av.sm img{width:100%;height:100%;object-fit:cover;display:block}
.sb-row .nm{min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.sb-row .nm .nl{font-size:13px;color:var(--t-hi);font-weight:500;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-row .nm .meta{font-family:var(--mono);font-size:10px;color:var(--t-lo);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-feature-settings:"tnum","calt" 0}
.sb-row .right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-feature-settings:"tnum"}
.sb-row .right .pct{font-family:var(--mono);font-size:12px}
.sb-row .right .pct.pos{color:var(--pos)} .sb-row .right .pct.neg{color:var(--neg)}
.sb-row .right .ts{font-size:10px;color:var(--t-dim);letter-spacing:.02em}

/* ─── Status bar ─── */
.status{position:absolute;bottom:0;left:0;right:0;height:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;background:var(--s1);font-family:var(--mono);font-size:11px;color:var(--t-mid);
  letter-spacing:.02em;font-feature-settings:"calt" 0,"liga" 0;z-index:5}
.status .seg{padding:0 14px;border-right:1px solid var(--line-soft);height:100%;display:flex;align-items:center;gap:8px}
.status .seg:last-child{border-right:0}
/* Help block stays right-anchored (was the prior :last-child); X credit
   now sits to its right as a separate seg. */
.status .seg.dim{margin-left:auto}
.status .seg.credit{color:var(--t-mid);text-decoration:none;
  gap:6px;letter-spacing:.04em;font-feature-settings:"calt" 0,"liga" 0;
  border-left:1px solid var(--line-soft);transition:color 100ms ease}
.status .seg.credit svg{flex:none;opacity:.85}
.status .seg.credit:hover{color:var(--t-hi)}
.status .seg.credit:hover svg{opacity:1}
.status .seg b{color:var(--t-hi);font-weight:500}
.status .seg .pulse{width:5px;height:5px;border-radius:50%;background:var(--a);
  box-shadow:0 0 0 2px color-mix(in oklch,var(--a) 14%,transparent);animation:beat 2.6s ease-in-out infinite}

/* ─── 3-col main shell ─── */
.main{display:grid;height:calc(900px - 40px - 36px - 88px - 28px);min-height:0}
.main.cols-3{grid-template-columns:880px 320px 240px}
.main.cols-2{grid-template-columns:1fr 380px}
.main.cols-1{grid-template-columns:1fr}
.col{border-right:1px solid var(--line);min-height:0;display:flex;flex-direction:column;overflow:hidden}
.col:last-child{border-right:0}
.col-h{height:30px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-mid);
  font-feature-settings:"calt" 0,"liga" 0;background:var(--s1);flex:none}
.col-h .ln{flex:1;height:1px;background:var(--line-soft)}
.col-h .scope{color:var(--t-lo);font-size:10px;letter-spacing:.06em;text-transform:none}
.col-h button{appearance:none;border:0;background:none;color:var(--t-mid);font:inherit;cursor:pointer;letter-spacing:.06em;text-transform:none;font-size:10px}
.col-h button:hover{color:var(--t-hi)}

/* ─── Heatmap (squarified treemap, ATLAS variant) ─── */
/* Atlas philosophy: cells stay neutral. The sparkline IS the chart —
   line color = direction, curve shape = path-of-travel, vertical range
   = magnitude. The treemap structure (size = mcap) preserves the
   "weather report" feel. No bg flooding, no glow. */
.heatmap{flex:1;position:relative;background:#000;min-height:0;min-width:0;overflow:hidden;contain:strict}
.heatmap.v-spark .cell{position:absolute;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
  padding:0;border:0;outline:1px solid var(--line-soft);outline-offset:-1px;text-align:left;font-family:inherit;
  background:var(--s2);transition:outline 80ms,filter 80ms,background 120ms}
.heatmap.v-spark .cell:hover{outline:1px solid var(--line-strong);outline-offset:-1px;z-index:3;background:var(--s3)}
/* Pulse indicator — small glowing accent dot on tiles with fresh events */
.heatmap.v-spark .cell.has-pulse::after{
  content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  background:var(--a);border-radius:50%;box-shadow:0 0 8px var(--a);
  animation:pulse-dot-tile 1.6s ease-in-out infinite;pointer-events:none;z-index:4}
@keyframes pulse-dot-tile{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
.heatmap.v-spark .cell .top{padding:8px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.heatmap.v-spark .cell .name{color:var(--t-hi);font-weight:500;letter-spacing:-.015em;line-height:1}
.heatmap.v-spark .cell .pct{font-family:var(--mono);font-weight:500;font-feature-settings:"tnum";line-height:1}
.heatmap.v-spark .cell .pct.pos{color:var(--pos)}
.heatmap.v-spark .cell .pct.neg{color:var(--neg)}
.heatmap.v-spark .cell .mc{font-family:var(--mono);color:var(--t-lo);font-size:11px;padding:0 12px;font-feature-settings:"tnum"}
.heatmap.v-spark .cell .spark{flex:1;min-height:0;opacity:.9;pointer-events:none}
.heatmap.v-spark .cell .spark svg{display:block;width:100%;height:100%}

/* hover line + tooltip */
.heatmap.v-spark .cell .hover-line{position:absolute;width:1px;background:rgba(255,255,255,.7);
  display:none;pointer-events:none;z-index:4;box-shadow:0 0 4px rgba(255,255,255,.5)}
.heatmap.v-spark .cell .hover-tip{position:absolute;display:none;pointer-events:none;z-index:5;
  background:rgba(8,8,11,.92);border:1px solid var(--line-strong);border-radius:3px;
  padding:4px 8px;font-family:var(--mono);font-size:10px;color:var(--t-hi);
  white-space:nowrap;letter-spacing:.02em;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  font-feature-settings:"calt" 0,"liga" 0,"tnum"}
.heatmap.v-spark .cell .hover-tip .t{color:var(--t-lo);margin-right:4px;letter-spacing:.06em;text-transform:uppercase;font-size:9px}
.heatmap.v-spark .cell .hover-tip .p{color:var(--t-hi);margin-right:4px}
.heatmap.v-spark .cell .hover-tip .d.pos{color:var(--pos)}
.heatmap.v-spark .cell .hover-tip .d.neg{color:var(--neg)}

/* Tier sizing — Atlas keeps spark visible in all tiers, larger pct on big tiles */
.heatmap.v-spark .cell.t-xl .name{font-size:36px}
.heatmap.v-spark .cell.t-xl .pct{font-size:24px}
.heatmap.v-spark .cell.t-xl .mc{font-size:14px}
.heatmap.v-spark .cell.t-lg .name{font-size:24px}
.heatmap.v-spark .cell.t-lg .pct{font-size:18px}
.heatmap.v-spark .cell.t-lg .mc{font-size:12px}
.heatmap.v-spark .cell.t-md .name{font-size:16px;line-height:1.1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;max-width:100%}
.heatmap.v-spark .cell.t-md .pct{font-size:14px}
.heatmap.v-spark .cell.t-md .mc{font-size:10px}
/* Small tiles — name allowed to wrap on 2 lines so long names like
   "Internet Animals" don't get truncated to "Internet An…". The .top
   block is centered (both axes) within its allocated space so the text
   feels balanced over the sparkline rather than glued to the top-left. */
.heatmap.v-spark .cell.t-sm{padding:0}
.heatmap.v-spark .cell.t-sm .top{padding:6px 7px;gap:2px;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.heatmap.v-spark .cell.t-sm .name{font-size:11px;color:var(--t-hi);line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;max-width:100%;letter-spacing:-.005em}
.heatmap.v-spark .cell.t-sm .pct{font-size:11px;line-height:1.1}
.heatmap.v-spark .cell.t-sm .mc{display:none}
.heatmap.v-spark .cell.t-sm .spark{opacity:.85}

.heatmap.v-spark .cell.t-xs{padding:0}
.heatmap.v-spark .cell.t-xs .top{padding:3px 4px;gap:2px;
  flex-direction:column;align-items:center;justify-content:center;text-align:center}
.heatmap.v-spark .cell.t-xs .name{font-size:9px;color:var(--t-hi);letter-spacing:0;line-height:1.05;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;max-width:100%}
.heatmap.v-spark .cell.t-xs .pct{display:none}
.heatmap.v-spark .cell.t-xs .mc{display:none}
.heatmap.v-spark .cell.t-xs .spark{opacity:.7}
.heatmap.v-spark .cell.t-xs .hover-tip{font-size:9px;padding:3px 5px}

.src{font-family:var(--mono);font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--a);padding:1px 5px;background:var(--a-soft);border-radius:1px;font-feature-settings:"calt" 0,"liga" 0;white-space:nowrap;flex:none}

/* ─── Momentum table ─── */
.mom{flex:1;display:flex;flex-direction:column;background:var(--s1);min-height:0;overflow:hidden}
.mom .group{flex:1;display:flex;flex-direction:column;border-bottom:1px solid var(--line);min-height:0;overflow:hidden}
.mom .group:last-child{border-bottom:0}
.mom .gh{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);
  font-feature-settings:"calt" 0,"liga" 0;background:var(--s2);border-bottom:1px solid var(--line-soft);flex:none}
.mom .gh .ar{color:var(--t-dim)}

/* ─── Watchlist (sidebar in market view; full table in /watchlist) ─── */
.wl{flex:1;display:flex;flex-direction:column;background:var(--s1);min-height:0;overflow:auto}
.wl .footer{margin-top:auto;padding:8px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;color:var(--t-lo);letter-spacing:.04em;flex:none;
  position:sticky;bottom:0;background:var(--s1);z-index:1}
.wl .empty{padding:16px;color:var(--t-mid);font-family:var(--mono);font-size:11px;line-height:1.6;text-align:center}
.wl .empty .empty-cta{appearance:none;border:1px solid var(--a);background:rgba(157,227,74,.10);color:var(--a);
  font-family:var(--mono);font-size:11px;padding:6px 12px;border-radius:3px;cursor:pointer;letter-spacing:.04em;
  transition:background 120ms,color 120ms}
.wl .empty .empty-cta:hover{background:var(--a);color:var(--s0)}

/* watchlist column header — Favorites / All metas tabs */
.col-h.wl-head{padding:0;gap:0}
.col-h.wl-head .wl-tab{appearance:none;border:0;background:none;font:inherit;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:none;color:var(--t-lo);
  padding:0 12px;height:30px;display:inline-flex;align-items:center;gap:6px;position:relative;
  font-feature-settings:"calt" 0,"liga" 0;border-right:1px solid var(--line-soft)}
.col-h.wl-head .wl-tab:hover{color:var(--t-hi);background:var(--s2)}
.col-h.wl-head .wl-tab.active{color:var(--t-hi);background:var(--s2)}
.col-h.wl-head .wl-tab.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;
  height:1px;background:var(--a)}
.col-h.wl-head .wl-tab .ct{font-family:var(--mono);font-size:9px;color:var(--t-dim);
  font-feature-settings:"tnum";letter-spacing:.02em}
.col-h.wl-head .wl-tab.active .ct{color:var(--a)}
.col-h.wl-head .wl-tab .ct.live{color:var(--a);animation:pulse-ct 1.6s ease-in-out infinite}
@keyframes pulse-ct{0%,100%{opacity:1}50%{opacity:.45}}
.col-h.wl-head .ln{margin-left:auto;flex:1;height:1px;background:var(--line-soft)}

/* Pulse tab — live event feed */
.wl.wl-pulse{padding:0}
.pulse-event{display:grid;grid-template-columns:3px 1fr;gap:10px;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background 100ms;background:var(--s1);min-width:0}
.pulse-event:hover, .pulse-event:focus-visible{background:var(--s2);outline:none}
.pulse-event:focus-visible{outline:1px solid var(--a);outline-offset:-1px}
.pulse-event .pe-bar{background:var(--t-dim);height:100%}
.pulse-event.pos .pe-bar{background:var(--pos)}
.pulse-event.neg .pe-bar{background:var(--neg)}
.pulse-event .pe-body{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.pulse-event .pe-head{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:11px}
.pulse-event .pe-icon{color:var(--t-mid);font-size:10px;width:10px;flex:none;text-align:center}
.pulse-event.pos .pe-icon{color:var(--pos)} .pulse-event.neg .pe-icon{color:var(--neg)}
.pulse-event .pe-title{flex:1;color:var(--t-hi);font-weight:500;font-family:var(--sans);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.005em}
.pulse-event .pe-time{color:var(--t-dim);font-size:9px;letter-spacing:.06em;flex:none;font-feature-settings:"calt" 0,"liga" 0}
.pulse-event .pe-detail{font-family:var(--mono);font-size:10px;color:var(--t-lo);
  letter-spacing:.02em;font-feature-settings:"tnum","calt" 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* watchlist row — adds a 4th column for the star toggle */
.sb-row.wl-row{grid-template-columns:24px 1fr 60px 22px;gap:8px;padding:8px 12px}
.sb-row.wl-row:focus{outline:none;background:var(--s2)}
.sb-row.wl-row .right{flex-direction:column;align-items:flex-end;gap:1px}
.sb-row.wl-row .right .pct{font-family:var(--mono);font-size:12px}
.sb-row.wl-row .right .ts{font-size:10px;font-feature-settings:"tnum";letter-spacing:.02em}
.sb-row.wl-row .right .ts.pos{color:var(--pos)} .sb-row.wl-row .right .ts.neg{color:var(--neg)}

/* ─── /meta directory (chooser when no meta is selected) ─── */
/* Hero header — editorial kicker + Fraunces italic title + mono hint */
.dir-hero{padding:24px 28px;border-bottom:1px solid var(--line);background:var(--s1)}
.dir-hero .dir-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-lo);margin-bottom:8px}
.dir-hero .dir-title{font-family:var(--display);font-style:italic;font-weight:300;font-size:26px;color:var(--t-hi);letter-spacing:-.015em;line-height:1.1;margin-bottom:4px}
.dir-hero .dir-sub{font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.04em}
.dir-hero .dir-sub kbd{font-family:var(--mono);font-size:10px;color:var(--t-hi);border:1px solid var(--line);padding:1px 5px;border-radius:2px;background:var(--s2)}

/* Pivot Comparator — Bloomberg-style dense matrix.
   Sticky header (top) + sticky first column (Meta name) so the user
   never loses orientation while scrolling.
   IMPORTANT: border-collapse:separate (NOT collapse) — with collapse,
   borders are shared between cells and the sticky thead loses its
   bottom border to the scrolling first row, letting data peek through
   the header strip. Separate spacing 0 keeps each cell's borders
   self-contained so the sticky elements are fully opaque. */
.meta-pivot{font-family:var(--mono);
  height:calc(900px - 40px - 36px - 28px - 118px);overflow:auto;background:var(--s1)}
.meta-pivot table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;font-feature-settings:"tnum"}
.meta-pivot th, .meta-pivot td{
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:10px 14px;text-align:right;white-space:nowrap;
  background-clip:padding-box}
.meta-pivot th:last-child, .meta-pivot td:last-child{border-right:0}
/* sticky first column (Meta name) — fully opaque, padded background */
.meta-pivot td:first-child{
  text-align:left;position:sticky;left:0;z-index:1;background:var(--s1);min-width:240px}
.meta-pivot tbody tr:hover td:first-child{background:var(--s3)}
/* sticky header — solid bg + box-shadow line for the bottom edge that
   stays glued to the header (vs a real border which would scroll away
   with the first tr). z-index above the first column.
   The 2nd box-shadow (large blur, downward) is a small drop that adds
   visual separation between the sticky strip and the scrolling rows. */
.meta-pivot thead th{
  background:var(--s2);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-lo);position:sticky;top:0;z-index:2;font-weight:400;padding-top:11px;padding-bottom:11px;
  box-shadow:inset 0 -1px 0 var(--line-strong), 0 6px 8px -6px rgba(0,0,0,.4)}
/* the corner cell (top-left, first row + first column) needs the highest
   z-index because it sits at the intersection of both sticky regions. */
.meta-pivot thead th:first-child{
  text-align:left;position:sticky;left:0;z-index:3;background:var(--s2);min-width:240px}
.meta-pivot tbody tr{cursor:pointer;transition:background 120ms;color:var(--t-hi)}
.meta-pivot tbody tr:hover td{background:var(--s2)}
.meta-pivot tbody tr:focus-visible{outline:none}
.meta-pivot tbody tr:focus-visible td{background:var(--s2);outline:1px solid var(--a);outline-offset:-1px}
.meta-pivot .nm{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.meta-pivot .nm .swatch{width:9px;height:9px;transform:rotate(45deg);flex:none}
.meta-pivot .nm .name{font-family:var(--sans);font-size:14px;color:var(--t-hi);font-weight:500;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-pivot .nm .slug{font-family:var(--mono);font-size:10px;letter-spacing:.04em;margin-left:4px;flex:none}
.meta-pivot .pos{color:var(--pos)} .meta-pivot .neg{color:var(--neg)}
.meta-pivot .dim{color:var(--t-dim)}

/* ─── /trending route — accelerating tokens ─── */
.trend-hero{display:grid;grid-template-columns:1fr 1px 1fr;height:140px;
  border-bottom:1px solid var(--line);background:var(--s1)}
.trend-hero .th-div{background:var(--line);width:1px;height:auto}
.trend-hero .th-left{padding:24px 28px;display:flex;align-items:center}
.trend-hero .th-label .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-lo);margin-bottom:8px}
.trend-hero .th-label .th-title{font-family:var(--display);font-style:italic;font-weight:300;font-size:28px;
  color:var(--t-hi);letter-spacing:-.01em;line-height:1.1;margin-bottom:6px}
.trend-hero .th-label .th-sub{font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.04em}
.trend-hero .th-right{padding:24px 28px;display:flex;align-items:center;
  background:linear-gradient(180deg,transparent 0%,var(--s2) 100%)}
.trend-hero .th-token{display:grid;grid-template-columns:54px 1fr auto auto;gap:18px;align-items:center;width:100%}
.trend-hero .av.lg{width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;overflow:hidden;font-family:var(--mono);font-size:18px;font-weight:600;
  position:relative}
.trend-hero .av.lg .av-img{width:100%;height:100%;object-fit:cover}
.trend-hero .th-id{min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.trend-hero .th-id .th-sym{font-family:var(--mono);font-size:24px;color:var(--t-hi);font-weight:500;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trend-hero .th-id .th-meta{font-family:var(--mono);font-size:11px;color:var(--t-lo);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trend-hero .th-stats{display:flex;flex-direction:column;gap:4px;text-align:right;font-family:var(--mono)}
.trend-hero .th-stats .row{display:flex;gap:10px;justify-content:flex-end;align-items:baseline}
.trend-hero .th-stats .row .l{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo)}
.trend-hero .th-stats .row .v{font-size:14px;color:var(--t-hi);font-feature-settings:"tnum"}
.trend-hero .th-actions{display:flex;flex-direction:column;gap:6px}

/* token list (left col) — same skeleton as constituents .tt + .tt-row */
.tt.trend-tt{flex:1;display:flex;flex-direction:column;background:var(--s1);min-height:0;overflow:hidden}
.tt-head.trend-head, .tt-row.trend-row{display:grid;
  grid-template-columns:36px 1fr 78px 64px 64px 70px 64px 56px;
  gap:8px;align-items:center;height:36px;padding:0 14px;border-bottom:1px solid var(--line-soft)}
.tt-head.trend-head{height:26px;background:var(--s2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.tt-head.trend-head > div{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-lo)}
.tt-head.trend-head > div.r{text-align:right}
.tt-row.trend-row{cursor:pointer;font-size:13px}
.tt-row.trend-row > div.r{text-align:right;font-family:var(--mono);font-feature-settings:"tnum","calt" 0;font-size:12px}
.tt-row.trend-row .rk{font-family:var(--mono);font-size:11px;color:var(--t-lo)}
.tt-row.trend-row .accel{font-weight:500;font-size:13px}
.tt-row.trend-row .accel.pos{color:var(--pos)}
.tt-row.trend-row .accel.neg{color:var(--neg)}
.tt-row.trend-row:hover{background:var(--s2)}
.tt-row.trend-row.sel{background:var(--s4)}
.tt-row.trend-row .sym{display:flex;align-items:center;gap:10px;min-width:0}
.tt-row.trend-row .sym .av{width:22px;height:22px;border-radius:50%;flex:none;background:var(--s4);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--t-mid);font-family:var(--mono);
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;overflow:hidden;position:relative}
.tt-row.trend-row .sym .av .av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.tt-row.trend-row .sym .av .av-fb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:10px;font-weight:600}
/* Token list: single-line layout — symbol, chain mark, meta pills all
   on one row so the .tt-row stays at the same 36px height as the other
   columns (mcap, deltas, accel) and nothing looks vertically off-center. */
.tt-row.trend-row .sym .l-inline{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden;white-space:nowrap}
.tt-row.trend-row .sym .l-inline .s{font-size:13px;color:var(--t-hi);font-weight:500;flex:none}
.tt-row.trend-row .sym .l-inline .chain-mark{font-size:9px;letter-spacing:.08em;text-transform:uppercase;flex:none}
.tt-row.trend-row .sym .l-inline .trend-pills-inline{display:inline-flex;align-items:center;gap:4px;
  flex:1 1 auto;min-width:0;overflow:hidden}

/* Meta pills inside the trend list — small chips marking which metas the
   token belongs to. Clicking a pill navigates directly to that meta.
   IMPORTANT: display:inline-block (NOT inline-flex) so text-overflow:ellipsis
   actually renders the `…` indicator. Inline-flex creates a flex formatting
   context where text-overflow doesn't apply on the container's own text. */
.trend-meta-pill{display:inline-block;font-family:var(--mono);font-size:9px;
  letter-spacing:.04em;padding:2px 6px;border:1px solid;border-radius:2px;cursor:pointer;
  background:transparent;line-height:1.4;font-weight:500;vertical-align:middle;
  transition:background 100ms;white-space:nowrap;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0}
.trend-meta-pill:hover{background:rgba(255,255,255,.04)}
.trend-meta-more{font-family:var(--mono);font-size:9px;color:var(--t-dim);letter-spacing:.04em;flex:none;margin-left:2px;vertical-align:middle}

/* Trending panels — DA: editorial Fraunces italic for verdicts, terminal
   ASCII pipes (├ └) for the acceleration formula breakdown, mono dense
   stat-grid (matching /meta on-chain panel) for the rest. No emojis,
   no tinted-bg verdict boxes, no big-number-with-unit-suffix patterns. */

/* Verdict — single italic Fraunces sentence, semantic color. Sits between
   the panel header and the data. Works like a magazine pull-quote. */
.trend-verdict{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:18px;line-height:1.25;letter-spacing:-.005em;color:var(--t-hi);
  margin:6px 0 14px 0}
.trend-verdict.pos{color:var(--pos)}
.trend-verdict.neg{color:var(--neg)}
.trend-verdict.mid{color:#FBBF24}

/* Acceleration formula — terminal-tree style matching the meta-hero
   v-terminal pattern (├ │ └ pipes, mono key/value rows). */
.trend-formula{display:grid;gap:4px;font-family:var(--mono);font-feature-settings:"calt" 0,"liga" 0}
.trend-formula .f-row{display:grid;grid-template-columns:14px 64px 80px 1fr;
  gap:8px;align-items:baseline;font-size:12px;color:var(--t-mid)}
.trend-formula .f-row .pipe{color:var(--t-dim);text-align:left}
.trend-formula .f-row .key{color:var(--t-lo);font-size:11px;letter-spacing:.06em}
.trend-formula .f-row .v{font-size:13px;color:var(--t-hi);font-feature-settings:"tnum";text-align:right}
.trend-formula .f-row .v.pos{color:var(--pos)} .trend-formula .f-row .v.neg{color:var(--neg)}
.trend-formula .f-row .v.mid{color:#FBBF24}
.trend-formula .f-row .note{color:var(--t-dim);font-size:10px;letter-spacing:.04em;font-feature-settings:"calt" 0}
.trend-formula .f-row.total{padding-top:6px;margin-top:2px;border-top:1px solid var(--line-soft)}

/* Mono dense stat-grid — matches the /meta page on-chain panel pattern.
   2-col on narrow, expand to 4-col on wider panels. */
.trend-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:14px 18px;
  margin-top:4px}
.trend-grid > div{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.trend-grid .lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-lo);font-feature-settings:"calt" 0,"liga" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-grid .num{font-family:var(--mono);font-size:18px;color:var(--t-hi);line-height:1;
  font-feature-settings:"tnum";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-grid .num.pos{color:var(--pos)} .trend-grid .num.neg{color:var(--neg)}
.trend-grid .num.mid{color:#FBBF24} .trend-grid .num.dim{color:var(--t-dim)}
.trend-grid .sub{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--t-dim);
  font-feature-settings:"calt" 0,"liga" 0}

/* Bipolar buy/sell bar — single 3px line, two segments. No rounding,
   no gap, no shadows. Matches the deltas-bar in the meta-hero perf. */
.trend-bipolar{height:3px;display:flex;background:var(--s4);overflow:hidden;margin:6px 0 12px 0}
.trend-bipolar .seg{display:block;height:100%}
.trend-bipolar .seg.pos{background:var(--pos)} .trend-bipolar .seg.neg{background:var(--neg)}

/* Liquidity spectrum — track of 3 zones with a diamond mark indicating
   where the current ratio sits. Replaces the bootstrap-style 3-segment
   legend with a real visual position indicator. */
.trend-spectrum{position:relative;height:18px;margin:8px 0 14px 0}
.trend-spectrum .track{position:absolute;left:0;right:0;top:8px;height:2px;
  display:flex;background:var(--s4)}
.trend-spectrum .track .zone{display:block;height:100%}
.trend-spectrum .track .zone.pos{background:var(--pos);opacity:.45;flex:0 0 15%}
.trend-spectrum .track .zone.mid{background:#FBBF24;opacity:.45;flex:0 0 35%}
.trend-spectrum .track .zone.neg{background:var(--neg);opacity:.45;flex:1 1 50%}
.trend-spectrum .mark{position:absolute;top:5px;width:8px;height:8px;
  background:var(--t-hi);transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 0 2px var(--s2)}
.trend-spectrum .ticks{position:absolute;left:0;right:0;top:13px;
  display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:9px;color:var(--t-dim);letter-spacing:.04em}

/* ─── /pumpfun route — migrated tokens filter bar + sortable table ─── */
/* The migrated-tokens column gets a thicker header (44px vs the default
   30px .col-h) to host the window + mcap segmented controls. Sort is
   driven by clicking column headers in the table itself (▼/▲ arrow). */
.col-h.pf-bar{height:44px;padding:0 16px;gap:10px;
  text-transform:none;letter-spacing:.04em;font-size:11px;
  display:flex;align-items:center;background:var(--s1)}
.col-h.pf-bar .pf-bar-title{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-mid);flex:none}
.col-h.pf-bar .pf-bar-count{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--t-lo);flex:none}
.col-h.pf-bar .pf-bar-lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-lo);flex:none}
.col-h.pf-bar .pf-bar-sep{width:1px;height:18px;background:var(--line);flex:none}
.col-h.pf-bar .ln{flex:1 1 auto}
.pf-chip-group{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:3px;overflow:hidden;flex:none;height:24px}
.pf-chip{appearance:none;background:none;border:0;border-right:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:var(--t-mid);padding:0 10px;cursor:pointer;
  font-feature-settings:"calt" 0,"liga" 0;
  display:inline-flex;align-items:center;line-height:1}
.pf-chip:last-child{border-right:0}
.pf-chip:hover{color:var(--t-hi);background:var(--s2)}
.pf-chip.active{color:var(--s0);background:var(--a)}
.pf-chip.active:hover{background:var(--a)}

/* ─── PumpView — Now / Since-bond split cards + Momentum footer ───
   Each card surfaces one migrated token in three stacked panels:
     1. head  : PFP avatar + symbol + name + age badge
     2. pair  : "Now Δ24h" left | "Since bond" right (split with hairline)
     3. foot  : Momentum (Δ1h/6h/24h + intensity bars + Vol 1h/6h/24h)
   Left-border tint = direction cue. Card-wide click opens Padre. */
.pv-grid{
  display:grid;
  /* minmax(300px, 1fr) → 4 cols at the 1440 canvas width, each card ≈ 338px.
     Drop to 3 cols smoothly if the viewport shrinks. */
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  /* CRITICAL: lock auto-rows to max-content so cards keep their natural
     height regardless of how many fit. Without this, the grid's default
     "auto" rows treat .pv-card's overflow:hidden as a hint that the card
     can shrink to min-content, squashing cards to 30-130px when many. */
  grid-auto-rows:max-content;
  gap:12px;
  padding:14px 16px;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  background:var(--s0);
  scrollbar-width:thin;
  scrollbar-color:var(--s3) var(--s0);
}
.pv-grid::-webkit-scrollbar{width:10px;height:10px}
.pv-grid::-webkit-scrollbar-track{background:var(--s0)}
.pv-grid::-webkit-scrollbar-thumb{background:var(--s3);border-radius:5px;border:2px solid var(--s0)}
.pv-grid::-webkit-scrollbar-thumb:hover{background:var(--s4)}

.pv-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--s1);
  border:1px solid var(--line);border-left-width:3px;border-radius:6px;
  cursor:pointer;text-align:left;font:inherit;color:inherit;appearance:none;
  overflow:hidden;
  transition:background 120ms ease, border-color 120ms ease;
  min-width:0;padding:0;
}
.pv-card.pos{border-left-color:var(--pos)}
.pv-card.neg{border-left-color:var(--neg)}
.pv-card:hover{border-color:var(--line-strong)}
.pv-card:focus-visible{outline:1px solid var(--a);outline-offset:-1px}

/* Inner font + padding scale was tuned for the 420-px-wide variant; with
   4 cols (≈ 338-px-wide cards) we tighten everything ~15-20% so the +%
   numbers don't crash into each other and the head row doesn't push the
   age badge off-screen. */

/* — Head — */
.pv-card-head{display:flex;align-items:center;gap:10px;min-width:0;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.pv-avatar{width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;
  font-family:var(--mono);font-size:14px;font-weight:600}
.pv-avatar .av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pv-avatar .av-fb{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--t-mid)}
.pv-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.pv-id .pv-sym{font-family:var(--mono);font-size:14px;font-weight:500;
  color:var(--t-hi);letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-id .pv-name{font-family:var(--mono);font-size:10px;color:var(--t-lo);
  letter-spacing:.06em;text-transform:lowercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-age{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--t-mid);background:var(--s2);
  border:1px solid var(--line);border-radius:2px;
  padding:3px 6px;line-height:1;font-feature-settings:"calt" 0,"liga" 0}

/* — Pair (Now / Since bond) — */
.pv-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.pv-half{background:var(--s1);padding:11px 14px;display:flex;flex-direction:column;gap:5px;min-width:0}
.pv-half .lab{font-family:var(--mono);font-size:9px;color:var(--t-lo);
  letter-spacing:.14em;text-transform:uppercase}
.pv-half .big{font-family:var(--mono);font-size:19px;font-weight:500;line-height:1;
  font-feature-settings:"tnum";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-half .big.pos{color:var(--pos)}
.pv-half .big.neg{color:var(--neg)}
.pv-half .sub{font-family:var(--mono);font-size:10px;color:var(--t-mid);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* — Foot (Momentum + Volume per window) — */
.pv-foot{background:var(--s0);border-top:1px solid var(--line);
  padding:10px 14px 12px;display:flex;flex-direction:column;gap:8px}
.pv-foot-title{font-family:var(--mono);font-size:9px;color:var(--t-mid);
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:baseline}
.pv-foot-title .windows{color:var(--t-lo);font-size:9px}
.pv-foot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:6px 0;border-bottom:1px solid var(--line-soft)}
.pv-foot-row:last-child{border-bottom:0;padding-bottom:0}
.pv-foot-row > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-foot-row .l{font-family:var(--mono);font-size:9px;color:var(--t-lo);
  letter-spacing:.10em;text-transform:uppercase}
.pv-foot-row .v{font-family:var(--mono);font-size:13px;color:var(--t-hi);
  font-weight:500;font-feature-settings:"tnum";line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-foot-row .v.pos{color:var(--pos)}
.pv-foot-row .v.neg{color:var(--neg)}
.pv-foot-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:1px;margin-bottom:1px}
.pv-foot-bar{height:3px;background:var(--s2);border-radius:1.5px;overflow:hidden}
.pv-foot-bar i{display:block;height:100%;border-radius:1.5px}
.pv-foot-bar i.pos{background:var(--pos)}
.pv-foot-bar i.neg{background:var(--neg)}

/* ─── Pumpfun "rich rows" list (replaces the prior .tt-row table) ───
   Each row carries: PFP avatar · sym + name · age · sparkline · 4-stat
   grid · big %Δ · per-row actions. Left border tinted by direction for
   instant scan. Selected row highlights via filled border + s2 bg. */
.pf-rich-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:0;background:var(--s0);
  scrollbar-width:thin;scrollbar-color:var(--s3) var(--s0)}
.pf-rich-list::-webkit-scrollbar{width:10px}
.pf-rich-list::-webkit-scrollbar-track{background:var(--s0)}
.pf-rich-list::-webkit-scrollbar-thumb{background:var(--s3);border-radius:5px;border:2px solid var(--s0)}
.pf-rich-list::-webkit-scrollbar-thumb:hover{background:var(--s4)}

.pf-rich-row{display:grid;
  grid-template-columns:44px 1fr 56px 132px 1fr 104px 60px;
  gap:14px;align-items:center;padding:12px 18px 12px 21px;
  background:var(--s1);border:1px solid var(--line);
  border-radius:0;position:relative;
  cursor:pointer;transition:background 120ms ease, border-color 120ms ease}
.pf-rich-row + .pf-rich-row{border-top:0}
.pf-rich-row:first-child{border-top-left-radius:4px;border-top-right-radius:4px}
.pf-rich-row:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
/* Directional tint via ::before — decoupled from the border so sel/hover
   state can change border-color (gray for emphasis) without erasing the
   pos/neg cue. Also avoids the border-radius rounding-off-corners issue
   that made the first row's green stripe look "missing" at the top. */
.pf-rich-row::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--line);pointer-events:none}
.pf-rich-row.pos::before{background:var(--pos)}
.pf-rich-row.neg::before{background:var(--neg)}
.pf-rich-row:first-child::before{border-top-left-radius:4px}
.pf-rich-row:last-child::before{border-bottom-left-radius:4px}
.pf-rich-row:hover{background:var(--s2);border-color:var(--line-strong)}
.pf-rich-row.sel{background:var(--s2);border-color:var(--line-strong)}
.pf-rich-row:focus-visible{outline:1px solid var(--a);outline-offset:-1px}

.pf-rich-pfp{width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;
  font-family:var(--mono);font-size:14px;font-weight:600}
.pf-rich-pfp .av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pf-rich-pfp .av-fb{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--t-mid)}

.pf-rich-id{min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.pf-rich-id .pf-rich-sym{font-family:var(--mono);font-size:15px;font-weight:500;
  color:var(--t-hi);letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-rich-id .pf-rich-name{font-family:var(--mono);font-size:10px;color:var(--t-lo);
  letter-spacing:.04em;text-transform:lowercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pf-rich-age{font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.04em;text-align:right}

.pf-rich-spark{display:flex;align-items:center;justify-content:center;height:32px}
.pf-rich-spark svg{display:block}

.pf-rich-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-width:0}
.pf-rich-stats > div{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.pf-rich-stats .l{font-family:var(--mono);font-size:9px;color:var(--t-lo);
  letter-spacing:.10em;text-transform:uppercase}
.pf-rich-stats .v{font-family:var(--mono);font-size:12px;color:var(--t-hi);
  font-feature-settings:"tnum";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-rich-stats .v.pos{color:var(--pos)}
.pf-rich-stats .v.neg{color:var(--neg)}

.pf-rich-pct{font-family:var(--mono);font-size:22px;font-weight:500;
  font-feature-settings:"tnum","calt" 0;line-height:1;text-align:right;letter-spacing:-.01em}
.pf-rich-pct.pos{color:var(--pos)}
.pf-rich-pct.neg{color:var(--neg)}

.pf-rich-actions{display:flex;gap:4px;justify-content:flex-end}
.pf-rich-actions .row-action{appearance:none;border:1px solid var(--line);
  background:var(--s2);color:var(--t-mid);font:inherit;
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;cursor:pointer;font-size:14px;line-height:1}
.pf-rich-actions .row-action:hover{color:var(--t-hi);border-color:var(--line-strong);background:var(--s3)}
.pf-rich-actions .dex-link{text-decoration:none}

/* Sort indicator arrow inside the pf-chip (active sort key). The arrow
   inherits its colour from the active chip (.pf-chip.active uses
   color:var(--s0) on accent bg), so we don't restate the colour here. */
.pf-chip .pf-sort-ind{font-size:9px;margin-left:3px;line-height:1;
  font-feature-settings:"calt" 0,"liga" 0;display:inline-block;
  position:relative;top:-1px}

/* watchlist v2 — full-route table */
.wl-table .tt-head.wl-head-row, .wl-table .wl-table-row{
  display:grid;grid-template-columns:32px 1fr 110px 80px 110px 90px 1fr 80px 36px;gap:10px;align-items:center}
.wl-table .since-pin{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-family:var(--mono);font-feature-settings:"tnum"}
.wl-table .since-pin .ts{font-size:10px}
.wl-table .note-cell{display:flex;align-items:center;min-width:0;overflow:hidden}
.wl-table .note-input{appearance:none;background:transparent;border:0;border-bottom:1px dashed transparent;color:var(--t-mid);
  font-family:var(--sans);font-size:12px;width:100%;padding:2px 0;outline:none;transition:border-color 120ms,color 120ms}
.wl-table .note-input::placeholder{color:var(--t-dim);font-style:italic}
.wl-table .note-input:hover{border-bottom-color:var(--line)}
.wl-table .note-input:focus{border-bottom-color:var(--a);color:var(--t-hi)}
.wl-table .alert-btn{appearance:none;border:1px solid var(--line);background:var(--s2);
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--t-mid);padding:3px 8px;border-radius:3px;
  cursor:pointer;transition:color 120ms,background 120ms,border-color 120ms;font-feature-settings:"calt" 0,"liga" 0}
.wl-table .alert-btn:hover{color:var(--t-hi);background:var(--s3);border-color:var(--line-strong)}
.wl-table .alert-badge.active{color:var(--a)}

/* star/favorite toggle button (☆ ↔ ★) */
.fav-btn{appearance:none;border:0;background:none;cursor:pointer;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;color:var(--t-dim);
  font-size:14px;line-height:1;padding:0;border-radius:3px;flex:none;
  transition:color 120ms,background 120ms,transform 120ms}
.fav-btn:hover{color:var(--t-hi);background:var(--s3)}
.fav-btn.on{color:var(--a)}
.fav-btn.on:hover{color:var(--a);background:rgba(157,227,74,.10)}
.fav-btn:active{transform:scale(.92)}

/* ─── Command palette ─── */
.cmdk-bg{position:absolute;inset:0;background:rgba(8,8,11,.55);backdrop-filter:blur(2px);z-index:50;
  display:none;align-items:flex-start;justify-content:center;padding-top:120px}
.cmdk-bg.show{display:flex}
.cmdk{width:560px;background:rgba(20,20,26,.78);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04) inset;overflow:hidden}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-input .arr{color:var(--t-mid);font-family:var(--mono)}
.cmdk-input input{flex:1;background:none;border:0;outline:none;color:var(--t-hi);font-family:var(--mono);font-size:13px;font-feature-settings:"calt" 0}
.cmdk-input input::placeholder{color:var(--t-dim)}
.cmdk-input .meta{font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.04em;white-space:nowrap}
.cmdk-list{padding:6px 0;max-height:380px;overflow-y:auto}
.cmdk-section{padding:8px 16px 4px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-dim);font-feature-settings:"calt" 0}
.cmdk-row{display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:13px;color:var(--t-mid);cursor:pointer}
.cmdk-row .ic{width:10px;height:10px;border-radius:1px;background:var(--t-dim);flex:none}
.cmdk-row .lbl{color:var(--t-hi)}
.cmdk-row .sub{color:var(--t-dim);font-size:11px;font-family:var(--mono);margin-left:8px;font-feature-settings:"tnum","calt" 0}
.cmdk-row .k{font-family:var(--mono);font-size:11px;color:var(--t-dim);margin-left:auto;letter-spacing:.04em}
.cmdk-row.sel{background:var(--s4);color:var(--t-hi)}
.cmdk-row.sel .sub{color:var(--t-mid)}

/* ─── Help overlay ─── */
.help-bg{position:absolute;inset:0;background:rgba(8,8,11,.6);z-index:55;display:none;align-items:center;justify-content:center}
.help-bg.show{display:flex}
.help{width:580px;background:var(--s2);border:1px solid var(--line-strong);border-radius:4px;padding:24px 28px}
.help h3{margin:0 0 18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);color:var(--t-lo);font-weight:500}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.help-footer{margin-top:24px;padding-top:18px;border-top:1px solid var(--line-soft);text-align:right;
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
.help-link-btn{appearance:none;background:none;border:0;color:var(--a);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;cursor:pointer;padding:6px 10px;border-radius:2px;transition:background 120ms}
.help-link-btn:hover{background:rgba(157,227,74,.10)}
/* Privacy disclosure line under the analytics opt-out button. flex-basis:100%
   forces it onto its own row below the buttons; subtle color so it doesn't
   compete visually with the action buttons. */
.help-privacy{flex-basis:100%;margin-top:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;color:var(--t-lo);text-align:right;line-height:1.5}
.help-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--t-mid)}
.help-row b{color:var(--t-hi);font-weight:400}
.help-row .ks{font-family:var(--mono);font-size:11px;color:var(--t-hi);letter-spacing:.04em}
.help-row .ks kbd{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 5px;
  border:1px solid var(--line-strong);border-radius:2px;font-family:var(--mono);font-size:10px;color:var(--t-hi);background:var(--s3);margin-left:3px}

/* ─── Detail panel (glass — used in 2 places per brief) ─── */
.detail{position:absolute;right:24px;top:130px;width:340px;background:rgba(20,20,26,.78);
  backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--line-strong);border-radius:4px;padding:18px 20px;z-index:30;display:none;
  box-shadow:0 16px 40px rgba(0,0,0,.5)}
.detail.show{display:block}

/* ─── Meta drilldown · Split: ID / Performance ─── */
.meta-hero{display:grid;grid-template-columns:1fr 1px 1fr;height:200px;
  border-bottom:1px solid var(--line);background:var(--s1)}
.meta-hero .div{background:var(--line);width:1px;height:auto}
.meta-hero .id{padding:24px 28px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;overflow:hidden}
.meta-hero .id .swatch-line{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;row-gap:4px}
.meta-hero .id .swatch{width:14px;height:14px;border-radius:1px;transform:rotate(45deg);flex:none}
.meta-hero .id .smcaps{color:var(--t-lo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:none}

/* Chain tags — used in the meta hero swatch-line */
.meta-hero .id .chains-line{display:inline-flex;align-items:center;gap:0;flex-wrap:wrap;row-gap:4px;min-width:0}
.meta-hero .id .chain-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--t-mid);font-feature-settings:"calt" 0,"liga" 0;white-space:nowrap;
  text-transform:none}
.meta-hero .id .chain-tag .dot{width:6px;height:6px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.meta-hero .id .ch-sep{color:var(--t-dim);font-family:var(--mono);font-size:11px;margin:0 8px;font-feature-settings:"calt" 0,"liga" 0;
  flex:none;user-select:none}
.meta-hero .id h1{margin:0;font-family:var(--display);font-weight:400;font-size:42px;letter-spacing:-.018em;line-height:1;color:var(--t-hi);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-hero .id h1 em{font-style:italic;color:var(--t-mid);font-weight:300}
.meta-hero .id .desc{color:var(--t-mid);font-size:13px;line-height:1.5;max-width:520px;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* meta hero · v-terminal — monospace command-line treatment */
.meta-hero .id.v-terminal{padding:20px 28px;display:flex;flex-direction:column;gap:6px;justify-content:center;
  font-family:var(--mono);font-feature-settings:"calt" 0,"liga" 0;
  background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(255,255,255,.012) 22px 23px)}
.meta-hero .id.v-terminal .row{display:flex;align-items:baseline;gap:8px;color:var(--t-mid);font-size:13px;line-height:1.5;min-width:0}
.meta-hero .id.v-terminal .row > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.meta-hero .id.v-terminal .row .pp{color:var(--a);font-weight:500;flex:none}
.meta-hero .id.v-terminal .row .pipe{color:var(--t-dim);flex:none}
.meta-hero .id.v-terminal .row .key{color:var(--t-lo);font-size:11px;letter-spacing:.06em;flex:none;width:54px}
.meta-hero .id.v-terminal .row.title{font-size:24px;color:var(--t-hi);letter-spacing:-.01em;line-height:1.1;margin-bottom:2px}
.meta-hero .id.v-terminal .row.title .name{color:var(--t-hi);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.meta-hero .id.v-terminal .row.title .swatch{width:9px;height:9px;border-radius:1px;transform:rotate(45deg);display:inline-block;flex:none}
.meta-hero .id.v-terminal .row.desc{color:var(--t-mid);font-size:12px;line-height:1.4}
.meta-hero .id.v-terminal .row.desc > span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;max-width:540px}

.meta-hero .perf{padding:24px 28px;display:flex;flex-direction:column;gap:12px;justify-content:center;
  background:linear-gradient(180deg,transparent 0%,var(--s2) 100%);min-width:0;overflow:hidden}
.meta-hero .perf .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.meta-hero .perf .mcap{display:flex;flex-direction:column;gap:2px}
.meta-hero .perf .mcap .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo)}
.meta-hero .perf .mcap .v{font-family:var(--mono);font-size:36px;color:var(--t-hi);font-feature-settings:"tnum";line-height:1}
.meta-hero .perf .mcap .d{font-family:var(--mono);font-size:13px;font-feature-settings:"tnum";margin-top:2px}
.meta-hero .perf .mcap .d.pos{color:var(--pos)} .meta-hero .perf .mcap .d.neg{color:var(--neg)}
.meta-hero .perf .deltas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.meta-hero .perf .delta-cell{display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:rgba(255,255,255,.025);border-radius:3px;border:1px solid var(--line-soft)}
.meta-hero .perf .delta-cell .l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo)}
.meta-hero .perf .delta-cell .v{font-family:var(--mono);font-size:14px;font-feature-settings:"tnum";margin-top:3px}
.meta-hero .perf .delta-cell .v.pos{color:var(--pos)} .meta-hero .perf .delta-cell .v.neg{color:var(--neg)}
.meta-hero .perf .deltas-bar{height:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:0 4px}
.meta-hero .perf .deltas-bar .b{flex:1;border-radius:1px 1px 0 0;min-height:2px}

/* token table — Dual-Rank History layout (9 columns: + actions) */
.tt{flex:1;display:flex;flex-direction:column;background:var(--s1);min-height:0;overflow:hidden}
.tt-head, .tt-row{display:grid;grid-template-columns:54px 1fr 86px 64px 64px 74px 80px 80px 56px;
  gap:8px;align-items:center;height:36px;padding:0 14px;border-bottom:1px solid var(--line-soft)}
.tt-head{height:26px;background:var(--s2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;gap:10px}
.tt-head > div{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-lo);font-feature-settings:"calt" 0,"liga" 0}
.tt-head > div.r{text-align:right}
.tt-row{cursor:pointer;font-size:13px;width:100%;background:none;border-left:0;border-right:0;border-top:0;font-family:inherit;color:var(--t-hi);text-align:left}
.tt-row > div.r{text-align:right;font-family:var(--mono);font-feature-settings:"tnum","calt" 0;font-size:12px}
/* Dual-rank: current rank + synthesized 24h-ago rank delta */
.tt-row .rk-block{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-feature-settings:"tnum"}
.tt-row .rk-block .rk{font-size:13px;color:var(--t-hi)}
.tt-row .rk-block .rk-delta{font-size:10px;letter-spacing:.04em}
.tt-row .rk-block .rk-delta.up{color:var(--pos)}
.tt-row .rk-block .rk-delta.down{color:var(--neg)}
.tt-row .rk-block .rk-delta.flat{color:var(--t-dim)}
.tt-row .sym{display:flex;align-items:center;gap:10px;min-width:0}
.tt-row .sym .av{width:22px;height:22px;border-radius:50%;flex:none;background:var(--s4);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--t-mid);font-family:var(--mono);
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;overflow:hidden;position:relative}
.tt-row .sym .av .av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.tt-row .sym .av .av-fb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:10px;font-weight:600;letter-spacing:.02em}
.tt-row .sym .l{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.tt-row .sym .s{font-size:13px;color:var(--t-hi);font-weight:500;letter-spacing:-.005em}
.tt-row .sym .n{font-family:var(--mono);font-size:10px;color:var(--t-lo);font-feature-settings:"calt" 0,"liga" 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-row:hover{background:var(--s2)}
.tt-row:focus{outline:none;background:var(--s2)}
.tt-row.sel{background:var(--s4)}
.tt-row .pct.pos{color:var(--pos)} .tt-row .pct.neg{color:var(--neg)}

/* row actions (chart · DexScreener external link) */
.tt-row .actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;opacity:.45;transition:opacity 120ms}
.tt-row:hover .actions, .tt-row.sel .actions, .tt-row:focus .actions{opacity:1}
.row-action{appearance:none;border:1px solid var(--line);background:var(--s2);color:var(--t-mid);
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;cursor:pointer;text-decoration:none;font-family:var(--mono);font-size:12px;
  line-height:1;padding:0;transition:color 120ms,background 120ms,border-color 120ms;flex:none}
.row-action:hover{color:var(--t-hi);background:var(--s3);border-color:var(--line-strong)}
.row-action.dex-link{color:var(--a)}
.row-action.dex-link:hover{color:var(--a);background:rgba(157,227,74,.10);border-color:rgba(157,227,74,.30)}

/* sortable column-header buttons inside .tt-head */
.tt-head .th-btn{appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px}
.tt-head .th-btn:hover{color:var(--t-hi)}
.tt-head .th-btn.active{color:var(--a)}

/* constituents filter strip */
.cf-strip{display:flex;align-items:stretch;gap:0;height:30px;flex:none;
  border-bottom:1px solid var(--line);background:var(--s1)}
.cf-strip .cf-group{display:flex;align-items:stretch;gap:8px;padding:0 12px;
  border-right:1px solid var(--line-soft)}
.cf-strip .cf-group:last-child{border-right:0}
.cf-strip .cf-lbl{display:flex;align-items:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-lo);
  font-feature-settings:"calt" 0,"liga" 0}
.cf-strip .chip-group{display:flex;align-items:stretch;gap:0}
.cf-strip .chip{display:inline-flex;align-items:center;gap:6px;padding:0 10px;
  font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.02em;
  font-feature-settings:"calt" 0,"liga" 0;cursor:pointer;
  background:none;border:0;border-right:1px solid var(--line-soft);height:100%}
.cf-strip .chip-group .chip:last-child{border-right:0}
.cf-strip .chip:hover{color:var(--t-hi);background:var(--s2)}
.cf-strip .chip.active{color:var(--s0);background:var(--a)}
.cf-strip .chip.active:hover{background:var(--a)}
.cf-strip .chip .dot{width:6px;height:6px;border-radius:50%;display:inline-block}

/* compare grid */
.cmp{display:grid;grid-template-columns:200px repeat(var(--cols,4),1fr);height:100%;background:var(--s1);min-height:0;overflow:auto}
.cmp .h-cell{position:sticky;top:0;background:var(--s2);border-bottom:1px solid var(--line);height:96px;padding:14px 18px;
  display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line-soft);z-index:2}
.cmp .h-cell:last-child{border-right:0}
.cmp .h-cell.lbl{justify-content:flex-end;color:var(--t-lo);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-feature-settings:"calt" 0,"liga" 0;background:var(--s1)}
.cmp .h-cell .nm{display:flex;align-items:center;gap:8px}
.cmp .h-cell .nm .dot{width:8px;height:8px;border-radius:1px;flex:none}
.cmp .h-cell .nm .name{font-size:18px;letter-spacing:-.01em;color:var(--t-hi);font-weight:500}
.cmp .h-cell .nm .x{margin-left:auto;color:var(--t-dim);font-family:var(--mono);font-size:10px;cursor:pointer;padding:2px 4px;border:1px solid var(--line);border-radius:2px}
.cmp .h-cell .nm .x:hover{color:var(--t-hi);border-color:var(--line-strong)}
.cmp .h-cell .sub{font-family:var(--mono);font-size:11px;color:var(--t-lo);font-feature-settings:"calt" 0,"liga" 0}
.cmp .h-cell .pct{font-family:var(--mono);font-size:14px}
.cmp .h-cell.add{background:var(--s1);border-right:1px solid var(--line-soft);align-items:center;justify-content:center;
  color:var(--t-mid);font-size:13px;cursor:pointer;text-align:center;font-family:inherit;border-top:0;border-bottom:1px solid var(--line);border-left:0}
.cmp .h-cell.add:hover{color:var(--a);background:var(--s2)}
.cmp .h-cell.add .plus{font-family:var(--mono);font-size:18px;color:var(--t-lo);margin-bottom:4px}
.cmp .row-lbl{position:sticky;left:0;background:var(--s1);border-right:1px solid var(--line);
  padding:14px 18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mid);
  font-feature-settings:"calt" 0,"liga" 0;display:flex;flex-direction:column;justify-content:center;gap:2px;z-index:1;border-bottom:1px solid var(--line-soft)}
.cmp .row-lbl .sub{font-size:9px;letter-spacing:.06em;color:var(--t-dim);text-transform:none}
.cmp .c-cell{padding:14px 18px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:6px;justify-content:center;font-family:var(--mono);font-feature-settings:"tnum"}
.cmp .c-cell:last-child{border-right:0}
.cmp .c-cell .v{font-size:18px;color:var(--t-hi)}
.cmp .c-cell .d{font-size:11px}
.cmp .c-cell .bar{height:4px;background:var(--s3);border-radius:1px;overflow:hidden;margin-top:2px}
.cmp .c-cell .bar > i{display:block;height:100%;background:var(--a);border-radius:1px}
.cmp .c-cell .sp{height:24px;margin-top:2px}
.cmp .c-cell.best{background:linear-gradient(180deg,var(--a-soft) 0%,transparent 80%)}
.cmp .c-cell.best .v{color:var(--a)}

/* divergence visuals — leader/laggard per row + spread label */
.cmp .c-cell.lead{background:linear-gradient(180deg,oklch(74% 0.16 152 / .12) 0%, transparent 70%)}
.cmp .c-cell.lead .v{color:var(--pos)}
.cmp .c-cell.lag{background:linear-gradient(180deg,oklch(66% 0.18 25 / .10) 0%, transparent 70%)}
.cmp .c-cell.lag  .v{color:var(--neg);opacity:.85}
.cmp .c-cell .badge{font-size:10px;letter-spacing:0;font-family:var(--mono);margin-left:4px}
.cmp .c-cell .lead-badge{color:var(--pos)}
.cmp .c-cell .lag-badge{color:var(--neg)}
.cmp .row-lbl .spread{margin-top:2px;font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.04em;text-transform:none}
.cmp .row-lbl .spread.wide{color:var(--a)}

/* divergence banner */
.cmp-divergence{display:flex;align-items:center;gap:10px;padding:11px 24px;border-bottom:1px solid var(--line-soft);
  background:var(--s2);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--t-mid)}
.cmp-divergence .lbl{color:var(--t-lo);text-transform:uppercase;letter-spacing:.14em;font-size:10px}
.cmp-divergence .metric{color:var(--t-hi);font-weight:500}
.cmp-divergence .spread{display:flex;align-items:center;gap:6px;margin-left:8px}
.cmp-divergence .spread .dim{color:var(--t-dim);font-size:10px}
.cmp-divergence .spread .num{color:var(--a);font-feature-settings:"tnum"}

/* ─── Charts ─── */
.chart{width:100%;height:100%;display:block}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .grid{stroke:var(--line-soft);stroke-width:1;stroke-dasharray:2 4}
.chart .lbl{font-family:var(--mono);font-size:9px;fill:var(--t-dim);letter-spacing:.04em}

/* dominance / panels */
.panel{padding:16px;border-bottom:1px solid var(--line);background:var(--s1)}
.panel:last-child{border-bottom:0}
.panel .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.panel .ph .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mid);font-feature-settings:"calt" 0,"liga" 0}
.panel .ph .v{font-family:var(--mono);font-size:11px;color:var(--t-lo)}

/* Card-bordered signals column · used in /meta page right pane */
.signals-cards{padding:12px;gap:12px;background:var(--s1)}
.signals-cards .panel{border:1px solid var(--line);border-radius:6px;background:var(--s2);
  border-bottom:1px solid var(--line);
  transition:border-color 120ms,background 120ms}
.signals-cards .panel:hover{border-color:var(--line-strong);background:var(--s3)}
.signals-cards .panel:last-child{border-bottom:1px solid var(--line)}

/* correlation matrix */
.corr{display:grid;gap:1px;background:var(--line-soft);padding:1px}
.corr .x{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--t-mid);font-feature-settings:"tnum","calt" 0}
.corr .x.h{background:var(--s1);color:var(--t-lo);font-size:9px;letter-spacing:.04em}

/* sparkline tiny inline */
.sl{display:inline-block;vertical-align:middle}

/* number flash */
@keyframes flash-up{0%{background:var(--pos-soft)}100%{background:transparent}}
@keyframes flash-dn{0%{background:var(--neg-soft)}100%{background:transparent}}
.fl-up{animation:flash-up .6s ease-out}
.fl-dn{animation:flash-dn .6s ease-out}

/* count-up */
.count{display:inline-block}

/* skeleton */
.sk{background:linear-gradient(90deg,var(--s2),var(--s3),var(--s2));background-size:200% 100%;animation:skl 1.2s linear infinite}
@keyframes skl{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* visually hidden */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* skip-link — visible only on keyboard focus, jumps to <main id="route"> */
.skip-link{position:fixed;left:8px;top:8px;z-index:100;padding:8px 14px;
  background:var(--a);color:var(--s0);font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  border-radius:3px;text-decoration:none;font-weight:500;
  transform:translateY(-200%);transition:transform 120ms}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--s0)}

/* Image avatar fallback strategy — letter-glyph sits behind <img>; if img fails,
   onerror hides it (display:none) and the letter shows through.
   IMPORTANT: pointer-events:none on the fallback span. Without this, if a
   parent ever lacks `position:relative`, the absolute span escapes to the
   viewport and intercepts ALL clicks page-wide (the bug shipped in v=18). */
.tt-row .sym .av .av-fb-bg, .bridge-card .bc-av .av-fb-bg, .trend-hero .av.lg .av-fb-bg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:0; pointer-events:none
}
.tt-row .sym .av .av-img, .bridge-card .bc-av .b-av, .trend-hero .av.lg .av-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block
}

/* respect prefers-reduced-motion — only kill DECORATIVE motion (ticker
   scroll, pulse dots, skeleton shimmer). Hover/focus transitions stay so
   interactive feedback remains crisp. Per WCAG 2.3.3 we don't need to
   eliminate ALL motion, just non-essential animations. */
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
  .pulse{animation:none}
  .sk{animation:none}
}

/* Visible focus outline on tt-row & wl-row.
   Distinction:
   - hover  = bg s2, no outline
   - focus  = bg s2 + accent outline (keyboard nav indicator)
   - sel    = bg s4 (selected stays distinct from focus) */
.tt-row:focus-visible, .sb-row.wl-row:focus-visible{
  outline:1px solid var(--a); outline-offset:-2px
}
/* When a row is BOTH selected and focused, the .sel bg wins (s4 > s2) and
   the outline overlays it — preserves both signals. */
.tt-row.sel:focus-visible, .sb-row.wl-row.sel:focus-visible{
  background:var(--s4)
}

/* ─── Bridges panel (cross-meta tokens) ─── */
.bridges-panel{border-top:1px solid var(--line);background:var(--s1);display:flex;flex-direction:column}
.bridges-panel .col-h{padding:0 16px}
.bridges-panel .bridges-empty{padding:18px 16px;color:var(--t-dim);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.bridges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--line-soft)}
.bridge-card{background:var(--s1);padding:12px 14px;display:flex;flex-direction:column;gap:8px;
  transition:background 120ms;min-height:96px}
.bridge-card:hover{background:var(--s2)}
.bc-head{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;min-width:0}
.bc-av{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;overflow:hidden;font-family:var(--mono);font-size:11px;font-weight:600;
  position:relative}  /* containing block for .av-fb-bg child — without it, the absolute fallback span escapes to viewport */
.bc-av img.b-av{width:100%;height:100%;object-fit:cover;display:block}
.bc-av .b-av-fb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:11px;font-weight:600}
.bc-id{min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.bc-sym{font-size:13px;color:var(--t-hi);font-weight:500;letter-spacing:-.005em;display:flex;align-items:baseline;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-sym .bc-count{font-family:var(--mono);font-size:10px;color:var(--a);letter-spacing:.04em;font-feature-settings:"tnum"}
.bc-chain{font-family:var(--mono);font-size:10px;color:var(--t-lo);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-actions{display:flex;align-items:center;gap:4px;flex:none;opacity:.5;transition:opacity 120ms}
.bridge-card:hover .bc-actions{opacity:1}
.bc-stats{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bc-stats .mcap{font-size:12px;color:var(--t-hi);font-feature-settings:"tnum"}
.bc-stats .pct{font-size:11px;font-feature-settings:"tnum"}
.bc-stats .pct.pos{color:var(--pos)} .bc-stats .pct.neg{color:var(--neg)}
.bc-metas{display:flex;flex-wrap:wrap;gap:4px}
.bridge-meta-tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  background:transparent;transition:background 120ms,color 120ms}
.bridge-meta-tag:hover{background:var(--s3)}

/* ─── Mobile view (viewport < 768px) ─── */
#mobile-view{display:none;background:var(--s0);color:var(--t-hi);min-height:100vh;
  padding:24px 18px 80px;font-family:var(--sans)}
.m-loading{display:flex;align-items:center;gap:10px;color:var(--t-mid);font-family:var(--mono);font-size:12px;padding:32px 0}
.m-pulse-dot{display:inline-block;width:6px;height:6px;background:var(--a);border-radius:50%;
  animation:pulse-dot 1.4s ease-in-out infinite;box-shadow:0 0 8px var(--a)}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.m-head{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.m-head .m-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.m-head .m-mark{width:16px;height:16px;background:var(--a);transform:rotate(45deg);border-radius:1px}
.m-head .m-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:32px;color:var(--t-hi);letter-spacing:-.02em;line-height:1}
.m-head .m-tag{font-family:var(--mono);font-size:11px;color:var(--t-mid);letter-spacing:.04em;margin-left:26px}
.m-section{margin-bottom:24px}
.m-section-title{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-lo);font-weight:400;margin:0 0 12px 0}
/* Pulse list mobile */
.m-pulse-list{display:flex;flex-direction:column;gap:8px}
.m-pulse-row{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:start;
  padding:10px 12px;background:var(--s1);border-left:2px solid var(--t-dim);border-radius:3px}
.m-pulse-row.pos{border-left-color:var(--pos)}
.m-pulse-row.neg{border-left-color:var(--neg)}
.m-pulse-row .m-pulse-icon{font-family:var(--mono);font-size:14px;line-height:1;color:var(--t-mid)}
.m-pulse-row.pos .m-pulse-icon{color:var(--pos)} .m-pulse-row.neg .m-pulse-icon{color:var(--neg)}
.m-pulse-row .m-pulse-title{font-size:13px;color:var(--t-hi);font-weight:500;line-height:1.3;letter-spacing:-.005em}
.m-pulse-row .m-pulse-detail{font-family:var(--mono);font-size:11px;color:var(--t-lo);letter-spacing:.02em;margin-top:2px;font-feature-settings:"tnum","calt" 0}
.m-pulse-row .m-pulse-time{font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.04em;align-self:start;white-space:nowrap}
/* Meta list mobile */
.m-meta-list{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border-radius:3px;overflow:hidden}
.m-meta-row{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;
  padding:14px 14px;background:var(--s1);text-decoration:none;color:var(--t-hi);
  transition:background 120ms}
.m-meta-row:active{background:var(--s2)}
.m-meta-row .m-swatch{width:8px;height:8px;border-radius:50%}
.m-meta-row .m-meta-id{min-width:0;overflow:hidden}
.m-meta-row .m-meta-name{font-size:15px;color:var(--t-hi);font-weight:500;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-meta-row .m-meta-sub{font-family:var(--mono);font-size:10px;color:var(--t-lo);letter-spacing:.02em;
  margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-meta-row .m-meta-stats{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-feature-settings:"tnum"}
.m-meta-row .m-pct{font-family:var(--mono);font-size:13px;font-weight:500}
.m-meta-row .m-pct.pos{color:var(--pos)} .m-meta-row .m-pct.neg{color:var(--neg)}
.m-meta-row .m-mcap{font-family:var(--mono);font-size:11px;color:var(--t-mid)}
/* Footer */
.m-foot{margin-top:32px;padding:20px 16px;background:var(--s1);border-radius:3px;border:1px solid var(--line)}
.m-foot .m-foot-title{font-family:var(--display);font-style:italic;font-weight:300;font-size:16px;color:var(--t-hi);letter-spacing:-.01em;margin-bottom:8px}
.m-foot .m-foot-sub{font-size:12px;color:var(--t-mid);line-height:1.5;margin-bottom:12px}
.m-foot .m-foot-meta{font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.04em}

@media (max-width: 767px){
  .stage{display:none !important}
  #mobile-view{display:block !important}
  /* Onboarding overlay also needs to be touch-friendly on mobile */
  .onboarding-card{padding:24px 22px;max-height:90vh}
  .onboarding-card .ob-title{font-size:36px}
  .onboarding-card .ob-steps{gap:14px}
  .onboarding-card .ob-step{grid-template-columns:28px 1fr;gap:12px}
}

/* ─── First-launch onboarding ─── */
.onboarding-bg{position:fixed;inset:0;z-index:200;background:rgba(8,8,11,.78);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:32px;
  animation:ob-fade-in 240ms ease-out}
@keyframes ob-fade-in{from{opacity:0}to{opacity:1}}
.onboarding-card{width:560px;max-width:100%;max-height:calc(100vh - 64px);overflow:auto;
  background:var(--s1);border:1px solid var(--line-strong);border-radius:8px;
  padding:36px 40px 28px;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px var(--line) inset;
  text-align:left}
.onboarding-card .ob-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-lo);margin-bottom:4px}
.onboarding-card .ob-title{margin:0;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:48px;color:var(--t-hi);letter-spacing:-.025em;line-height:1}
.onboarding-card .ob-tagline{font-size:14px;color:var(--t-mid);line-height:1.5;margin:14px 0 24px 0;letter-spacing:-.005em}
.onboarding-card .ob-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.onboarding-card .ob-step{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.onboarding-card .ob-step-num{width:24px;height:24px;border:1px solid var(--a);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;
  color:var(--a);font-weight:600;margin-top:1px}
.onboarding-card .ob-step-title{font-size:13px;color:var(--t-hi);font-weight:500;margin-bottom:3px;letter-spacing:-.005em}
.onboarding-card .ob-step-text{font-size:12px;color:var(--t-mid);line-height:1.5;letter-spacing:-.002em}
.onboarding-card .ob-step kbd, .onboarding-card .ob-tip kbd{font-family:var(--mono);font-size:10px;color:var(--t-hi);
  border:1px solid var(--line);padding:1px 5px;border-radius:2px;background:var(--s2);margin:0 1px}
.onboarding-card .ob-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:18px;border-top:1px solid var(--line-soft);margin-top:4px}
.onboarding-card .ob-tip{font-family:var(--mono);font-size:11px;color:var(--t-lo);letter-spacing:.02em}
.onboarding-card .ob-cta{appearance:none;background:var(--a);color:var(--s0);border:0;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:10px 18px;border-radius:3px;cursor:pointer;transition:background 120ms}
.onboarding-card .ob-cta:hover{background:oklch(90% 0.16 112)}

/* ─── Owner unlock prompt (shown inside /admin route for non-owners) ─── */
.unlock-shell{display:flex;align-items:center;justify-content:center;
  height:calc(900px - 40px - 36px - 28px);background:var(--s0)}
.unlock-card{width:420px;background:var(--s1);border:1px solid var(--line);border-radius:6px;
  padding:32px 32px 24px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.4)}
.unlock-card .unlock-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-lo);margin-bottom:6px}
.unlock-card .unlock-title{margin:0;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:32px;color:var(--t-hi);letter-spacing:-.018em;line-height:1}
.unlock-card .unlock-sub{font-size:13px;color:var(--t-mid);line-height:1.5;margin:8px 0 18px 0}
.unlock-card .unlock-input{appearance:none;background:var(--s2);border:1px solid var(--line);
  color:var(--t-hi);font:inherit;font-size:14px;padding:10px 14px;border-radius:3px;outline:none;
  font-family:var(--mono);letter-spacing:.04em;transition:border-color 120ms,transform 60ms}
.unlock-card .unlock-input:focus{border-color:var(--a)}
.unlock-card .unlock-input.shake{animation:shake .35s ease-in-out;border-color:var(--neg)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.unlock-card .unlock-err{min-height:18px;font-family:var(--mono);font-size:11px;color:var(--neg);
  letter-spacing:.04em;margin:6px 0 4px 2px}
.unlock-card .unlock-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.unlock-card .unlock-btn{appearance:none;background:var(--s2);border:1px solid var(--line);
  color:var(--t-mid);font:inherit;font-size:12px;padding:8px 16px;border-radius:3px;cursor:pointer;
  font-family:var(--mono);letter-spacing:.04em;
  transition:color 120ms,background 120ms,border-color 120ms}
.unlock-card .unlock-btn:hover{color:var(--t-hi);background:var(--s3);border-color:var(--line-strong)}
.unlock-card .unlock-btn.primary{background:var(--a);color:var(--s0);border-color:var(--a)}
.unlock-card .unlock-btn.primary:hover{background:oklch(90% 0.16 112);border-color:oklch(90% 0.16 112);color:var(--s0)}

/* ─── Admin · custom metas ─── */
.adm-shell{display:grid;grid-template-columns:280px 1fr;height:calc(900px - 40px - 36px - 28px);background:var(--s0)}
.adm-sidebar{border-right:1px solid var(--line);background:var(--s1);padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.adm-side-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-lo);
  display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.adm-side-h .ct{margin-left:auto;color:var(--t-dim);font-size:10px;letter-spacing:.04em}
.adm-list{display:flex;flex-direction:column;gap:1px;flex:1;overflow:auto;min-height:0}
.adm-list-row{appearance:none;border:0;background:none;font:inherit;cursor:pointer;color:var(--t-hi);text-align:left;
  display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:3px}
.adm-list-row:hover{background:var(--s2)}
.adm-list-row.sel{background:var(--s3);color:var(--t-hi)}
.adm-list-row .dot{width:8px;height:8px;border-radius:50%;flex:none}
.adm-list-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.adm-list-row .ct{font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.04em}
.adm-hint{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--t-dim);letter-spacing:.04em;line-height:1.5;padding-top:8px;border-top:1px solid var(--line-soft)}
.adm-btn{appearance:none;background:var(--s2);border:1px solid var(--line);color:var(--t-mid);font:inherit;font-size:12px;
  padding:6px 12px;border-radius:3px;cursor:pointer;letter-spacing:.04em;font-family:var(--mono);font-feature-settings:"calt" 0,"liga" 0;
  transition:color 120ms,background 120ms,border-color 120ms}
.adm-btn:hover{color:var(--t-hi);background:var(--s3);border-color:var(--line-strong)}
.adm-btn.primary{color:var(--s0);background:var(--a);border-color:var(--a)}
.adm-btn.primary:hover{background:oklch(90% 0.16 112);border-color:oklch(90% 0.16 112);color:var(--s0)}
.adm-btn.danger{color:var(--neg);border-color:var(--line)}
.adm-btn.danger:hover{color:#fff;background:var(--neg);border-color:var(--neg)}
.adm-btn.full{width:100%}

.adm-main{padding:24px 28px;overflow:auto;min-width:0}
.adm-editor{display:flex;flex-direction:column;gap:0}
.adm-form-row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.adm-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo)}
.adm-input{appearance:none;background:var(--s1);border:1px solid var(--line);color:var(--t-hi);
  font:inherit;font-size:13px;padding:7px 10px;border-radius:3px;outline:none;transition:border-color 120ms;width:100%;
  font-family:var(--sans)}
.adm-input:focus{border-color:var(--a)}
.adm-select{appearance:none;background:var(--s1);border:1px solid var(--line);color:var(--t-hi);
  font:inherit;font-size:12px;padding:7px 10px;border-radius:3px;outline:none;cursor:pointer;font-family:var(--mono);min-width:140px}
.adm-palette{display:flex;gap:6px;flex-wrap:wrap}
.adm-swatch{appearance:none;width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform 120ms,border-color 120ms}
.adm-swatch:hover{transform:scale(1.12)}
.adm-swatch.sel{border-color:var(--t-hi);box-shadow:0 0 0 1px var(--s0)}
.adm-add-token{display:flex;gap:6px;align-items:stretch}
.adm-add-token .adm-input{flex:1;font-family:var(--mono);font-size:11px}
.adm-tokens{padding-top:14px;display:flex;flex-direction:column;gap:6px}
.adm-section-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);margin-bottom:6px}
.adm-tk-list{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border-radius:3px;overflow:hidden}
.adm-tk-row{display:grid;grid-template-columns:10px 80px 130px 90px 70px 24px;gap:10px;align-items:center;padding:8px 12px;background:var(--s1);font-size:13px}
.adm-tk-row .cdot{width:8px;height:8px;border-radius:50%}
.adm-tk-row .sym{font-weight:500;color:var(--t-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-tk-row .addr{font-size:10px;letter-spacing:.04em}
.adm-tk-row .r{text-align:right;font-feature-settings:"tnum";font-size:11px}
.adm-tk-row .pos{color:var(--pos)} .adm-tk-row .neg{color:var(--neg)} .adm-tk-row .dim{color:var(--t-dim)}
.adm-empty{padding:18px;color:var(--t-dim);font-family:var(--mono);font-size:11px;text-align:center;background:var(--s1);border-radius:3px;border:1px dashed var(--line)}
.adm-actions-row{display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line-soft);margin-top:14px}
.adm-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:14px;color:var(--t-mid)}
.adm-empty-icon{font-size:48px;color:var(--t-dim)}
.adm-empty-title{font-family:var(--display);font-style:italic;font-weight:300;font-size:24px;color:var(--t-hi)}
.adm-empty-sub{font-family:var(--mono);font-size:11px;color:var(--t-lo);line-height:1.6;max-width:360px;letter-spacing:.04em}

/* ─── Chart popup (DexScreener iframe embed) ─── */
.chart-bg{position:absolute;inset:0;background:rgba(8,8,11,.78);backdrop-filter:blur(2px);z-index:60;
  display:none;align-items:center;justify-content:center}
.chart-bg.show{display:flex}
.chart-modal{width:1100px;height:720px;max-width:calc(100vw - 80px);max-height:calc(100vh - 80px);
  background:var(--s1);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.chart-head{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 16px;background:var(--s2);gap:14px;flex:none}
.chart-head .title{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--t-hi);
  letter-spacing:.02em;font-feature-settings:"calt" 0,"liga" 0}
.chart-head .title .sym{color:var(--t-hi);font-weight:500}
.chart-head .title .dim{color:var(--t-mid);font-size:12px}
.chart-head .actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.chart-head .ext{font-family:var(--mono);font-size:11px;color:var(--a);text-decoration:none;letter-spacing:.04em;
  border:1px solid var(--line);padding:4px 10px;border-radius:3px;background:var(--s1);transition:background 120ms}
.chart-head .ext:hover{background:rgba(157,227,74,.08)}
.chart-head .close{appearance:none;border:1px solid var(--line);background:var(--s1);color:var(--t-mid);
  width:28px;height:28px;border-radius:3px;cursor:pointer;font-size:18px;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:color 120ms,background 120ms}
.chart-head .close:hover{color:var(--t-hi);background:var(--s3)}
.chart-iframe{flex:1;border:0;width:100%;background:var(--s0)}