/* ══════════════════════════════════════════════════════════════
   DEX Flow page (pages/dex.html). Uses --flow-in / --flow-out for
   SENTIMENT coloring (buy = bullish, sell = bearish) so the admin
   invert toggle holds. No font-family here (lives in style.css).
   ══════════════════════════════════════════════════════════════ */

/* body is display:flex app-wide, so .dex-shell is a flex item - min-width:auto would let it grow
   past the viewport to its content's min-content (horizontal overflow). Pin it to the container. */
.dex-shell { width: 100%; min-width: 0; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 18px 16px 90px; }
/* The main dashboard uses the full width (subpages keep the narrower reading width above).
   Horizontal padding matches the app standard (.shell = 16px) so cards sit the same distance
   from the edges as the analytics page - 24px looked inset/inconsistent next to it. */
.dex-shell.dex-dash { max-width: 1600px; padding: 16px 16px 90px; }
/* Tighter side padding on phones so content isn't unnecessarily inset from the edges. */
@media (max-width: 640px) {
  .dex-shell, .dex-shell.dex-dash { padding-left: 10px; padding-right: 10px; }
  .dex-card { padding: 13px; }          /* card content sat ~28px from the edge; tighten on phones */
  .dex-grid-top, .dex-grid-bottom { gap: 10px; }
}

/* Header + period filter */
.dex-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.dex-head-title h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text-hi); }
.dex-sub { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-lo); max-width: 52ch; }

/* ── Dashboard primitives ── */
.dex-card { background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 14px; padding: 16px; min-width: 0; }
.dex-card-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-hi); margin-bottom: 12px; }
.dex-card-head .head-note { margin-left: auto; font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-lo); }
.dex-card-head .div-ico { color: var(--accent, #6ea8fe); flex: 0 0 auto; }
.pill-new { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; color: var(--accent, #6ea8fe); background: color-mix(in srgb, var(--accent, #6ea8fe) 15%, transparent); }

.dex-grid-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.dex-grid-bottom { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
@media (max-width: 1000px) {
  .dex-grid-top { grid-template-columns: 1fr; }
  .dex-grid-bottom { grid-template-columns: 1fr; }
}

/* ── Net on-chain flow hero ── */
.netflow-main { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.netflow-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.netflow-arrow svg { width: 24px; height: 24px; }
.netflow-arrow.buy  { color: var(--flow-in);  background: color-mix(in srgb, var(--flow-in) 15%, transparent); }
.netflow-arrow.sell { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 15%, transparent); }
.netflow-arrow.flat { color: var(--text-lo);  background: var(--bg-hover, rgba(255,255,255,.06)); }
.netflow-val { font-family: var(--mono); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.netflow-val.buy  { color: var(--flow-in); }
.netflow-val.sell { color: var(--flow-out); }
.netflow-val.flat { color: var(--text-hi); }
.netflow-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.netflow-lean { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.netflow-lean.buy  { color: var(--flow-in);  background: color-mix(in srgb, var(--flow-in) 13%, transparent); }
.netflow-lean.sell { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 13%, transparent); }
.netflow-lean.flat { color: var(--text-lo);  background: var(--bg-hover, rgba(255,255,255,.06)); }
.netflow-ratio { font-size: 11.5px; color: var(--text-lo); }
.netflow-bar-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-lo); margin-bottom: 5px; }
.netflow-bar-label b { color: var(--text-hi); font-weight: 700; font-family: var(--mono); }
.netflow-bar-label.r { text-align: right; }
.netflow-bar { height: 9px; margin-bottom: 16px; }
.netflow-spark-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lo); margin-bottom: 6px; }
.netflow-spark { width: 100%; height: 56px; }
.spark { width: 100%; height: 56px; display: block; overflow: visible; }
.spark-zero { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.spark-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark.up   .spark-line { stroke: var(--flow-in); }
.spark.down .spark-line { stroke: var(--flow-out); }
.spark.up   .spark-area { fill: color-mix(in srgb, var(--flow-in) 12%, transparent); }
.spark.down .spark-area { fill: color-mix(in srgb, var(--flow-out) 12%, transparent); }

/* Live Pulse (dashboard card) */
.pulse-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.pulse-cols h4, .pulse-into-h { font-size: 10.5px; font-weight: 600; margin: 0 0 8px; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.pulse-cols h4.pulse-buy  { color: var(--flow-in); }
.pulse-cols h4.pulse-sell { color: var(--flow-out); }
.pulse-into-h { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Live Pulse (legacy blocks, kept for safety) */
.pulse-wrap { margin-bottom: 20px; }
.pulse-head { font-size: 13px; font-weight: 700; color: var(--text-hi); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.pulse-window { font-size: 10px; font-weight: 500; color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.05)); padding: 2px 7px; border-radius: 10px; letter-spacing: 0; text-transform: none; }
.pulse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.pulse-card { background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.pulse-card h3 { font-size: 11px; font-weight: 600; margin: 0 0 8px; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.pulse-card h3.pulse-buy  { color: var(--flow-in); }
.pulse-card h3.pulse-sell { color: var(--flow-out); }
.pulse-rows { display: flex; flex-direction: column; gap: 6px; }
.pulse-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.pulse-row-l { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-hi); }
.pulse-row-l img, .pulse-row-l .asset-icon { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
.pulse-sym { font-weight: 600; }
.pulse-row-sub { color: var(--text-lo); font-size: 10.5px; margin-left: 6px; font-weight: 400; }
.pulse-val { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-hi); }
.pulse-val.buy  { color: var(--flow-in); }
.pulse-val.sell { color: var(--flow-out); }
.pulse-empty { color: var(--text-lo); font-size: 11px; }

.pulse-whales h3 { font-size: 11px; font-weight: 600; margin: 0 0 8px; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.pulse-tape { display: flex; flex-direction: column; gap: 4px; }
.pulse-tape-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 8px; border-radius: 7px; background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); }
.pulse-tape-row img, .pulse-tape-row .asset-icon { width: 18px; height: 18px; border-radius: 50%; }
.pulse-tape-side { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.pulse-tape-side.buy  { color: var(--flow-in);  background: color-mix(in srgb, var(--flow-in) 15%, transparent); }
.pulse-tape-side.sell { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 15%, transparent); }
.pulse-tape-usd { font-family: var(--mono); font-weight: 700; color: var(--text-hi); }
.pulse-tape-venue { font-size: 10.5px; color: var(--text-lo); }
.pulse-tape-wallet { font-family: var(--mono); font-size: 11px; color: var(--accent, #6ea8fe); text-decoration: none; }
.pulse-tape-wallet:hover { text-decoration: underline; }
.pulse-tape-wallet.pending { color: var(--text-lo); font-style: italic; }
.pulse-mixer { font-size: 10.5px; color: #f59e0b; font-weight: 600; }
.pulse-tape-ago { font-family: var(--mono); font-size: 10.5px; color: var(--text-lo); margin-left: auto; }

@media (max-width: 640px) {
  .pulse-grid { grid-template-columns: 1fr; }
}

/* Top traders leaderboard (/dex/flows) */
.traders-wrap { margin: 20px 0; }
.traders-head, .tr-row { display: grid; grid-template-columns: 1.6fr 1fr .9fr .9fr .5fr; gap: 10px; align-items: center; }
.traders-head { padding: 0 10px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lo); border-bottom: 1px solid var(--border); }
.traders-head .tr-num, .tr-row .tr-num { text-align: right; font-variant-numeric: tabular-nums; }
.traders-list { display: flex; flex-direction: column; }
.tr-row { padding: 9px 10px; border-bottom: 1px solid var(--border); text-decoration: none; }
.tr-row:hover { background: var(--bg-hover, rgba(255,255,255,.03)); }
.tr-wallet { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--accent, #6ea8fe); flex-wrap: wrap; }
.tr-pat { font-family: var(--font); font-size: 9.5px; font-weight: 600; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; background: var(--bg-hover, rgba(255,255,255,.06)); color: var(--text-lo); }
.tr-pat.pat-wash, .tr-pat.pat-off-ramp { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 13%, transparent); }
.tr-pat.pat-accumulation { color: var(--flow-in); background: color-mix(in srgb, var(--flow-in) 13%, transparent); }
.tr-asset { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--text-hi); }
.tr-asset img, .tr-asset .asset-icon { width: 17px; height: 17px; border-radius: 50%; }
.tr-num { font-family: var(--mono); font-size: 12px; color: var(--text-hi); }
.tr-net.in { color: var(--flow-in); }
.tr-net.out { color: var(--flow-out); }
.tr-trades { color: var(--text-lo); }
@media (max-width: 640px) {
  .traders-head { display: none; }
  .tr-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; row-gap: 3px; }
  .tr-row .tr-asset { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .tr-row .tr-net { grid-column: 1; grid-row: 2; text-align: left; }
  .tr-row .tr-num:not(.tr-net) { display: none; }
}

/* Squeeze radar (reuses .div-row) - squeeze types get a strong accent */
.sq-wrap { margin: 16px 0 20px; }
.div-row.sq-long-squeeze-risk { border-left-color: var(--flow-out); }
.div-row.sq-short-squeeze-fuel { border-left-color: var(--flow-in); }
.div-row.sq-long-aligned, .div-row.sq-short-aligned { border-left-color: var(--border); }

/* Divergence radar (dashboard card, /dex) */
.div-card-sub { margin: -6px 0 12px; font-size: 11.5px; color: var(--text-lo); }
.div-cards { display: flex; flex-direction: column; gap: 8px; }
.div-mini { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; background: var(--bg, transparent); text-decoration: none; }
.div-mini-main { flex: 1; min-width: 0; }
.div-mini-spark { width: 78px; height: 34px; flex: 0 0 auto; }
.div-mini-spark svg { width: 78px; height: 34px; }
.div-mini:hover { border-color: var(--text-lo); }
.div-mini.v-hidden-distribution { border-left-color: var(--flow-out); }
.div-mini.v-hidden-absorption { border-left-color: var(--flow-in); }
.div-mini.v-aligned-bullish { border-left-color: color-mix(in srgb, var(--flow-in) 55%, transparent); }
.div-mini.v-aligned-bearish { border-left-color: color-mix(in srgb, var(--flow-out) 55%, transparent); }
.div-mini-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.div-mini-asset { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--text-hi); }
.div-mini-asset img, .div-mini-asset .asset-icon { width: 18px; height: 18px; border-radius: 50%; }
.div-mini-verdict { margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-lo); }
.div-mini.v-hidden-distribution .div-mini-verdict { color: var(--flow-out); }
.div-mini.v-hidden-absorption .div-mini-verdict { color: var(--flow-in); }
.div-mini-legs { display: flex; justify-content: space-between; gap: 8px; }
.dm-leg { font-family: var(--mono); font-size: 11px; color: var(--text-lo); }
.dm-leg.in  { color: var(--flow-in); }
.dm-leg.out { color: var(--flow-out); }

/* CEX vs DEX divergence + squeeze cards (/dex/flows). Vertical layout so the leg chips wrap onto
   their own row and never clip off the right edge on mobile (the old margin-left:auto head did). */
.div-wrap { margin: 16px 0 22px; }
.div-list { display: flex; flex-direction: column; gap: 8px; }
.div-row { display: block; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bg-card, rgba(255,255,255,.02)); text-decoration: none; }
.div-row:hover { border-color: var(--text-lo); }
.div-row.conflict { border-left-color: #f5c400; }
.div-row.v-hidden-distribution, .div-row.sq-long-squeeze-risk { border-left-color: var(--flow-out); }
.div-row.v-hidden-absorption, .div-row.sq-short-squeeze-fuel { border-left-color: var(--flow-in); }
.div-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.div-asset { display: flex; align-items: center; gap: 7px; color: var(--text-hi); font-weight: 700; font-size: 14px; min-width: 0; }
.div-asset img, .div-asset .asset-icon { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.div-asset > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-verdict { margin-left: auto; flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lo); white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: var(--bg-hover, rgba(255,255,255,.05)); }
.div-row.conflict .div-verdict { color: #f5c400; background: rgba(245,196,0,.12); }
.div-row.v-hidden-distribution .div-verdict, .div-row.sq-long-squeeze-risk .div-verdict { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 13%, transparent); }
.div-row.v-hidden-absorption .div-verdict, .div-row.sq-short-squeeze-fuel .div-verdict { color: var(--flow-in); background: color-mix(in srgb, var(--flow-in) 13%, transparent); }
.div-story { font-size: 12.5px; line-height: 1.5; color: var(--text-md, var(--text-hi)); margin-bottom: 9px; }
.div-leans { display: flex; gap: 6px; flex-wrap: wrap; }
.div-lean { font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px; background: var(--bg-hover, rgba(255,255,255,.05)); color: var(--text-lo); white-space: nowrap; }
.div-lean.in { color: var(--flow-in); background: color-mix(in srgb, var(--flow-in) 13%, transparent); }
.div-lean.out { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 13%, transparent); }

/* Flow map + tokenized dashboard (/dex/flows) */
.tok-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 16px 0 20px; background: var(--bg-card, rgba(255,255,255,.02)); }
.tok-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-hi); margin-bottom: 12px; }
.tok-hero { display: flex; gap: 24px; margin-bottom: 14px; }
.tok-side { display: flex; flex-direction: column; gap: 3px; }
.tok-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lo); }
.tok-val { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.tok-val.in { color: var(--flow-in); }
.tok-val.out { color: var(--flow-out); }
.tok-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tok-cols h4 { font-size: 11px; font-weight: 600; margin: 0 0 8px; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.flow-edges { display: flex; flex-direction: column; gap: 5px; }
.flow-edge { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-hi); }
.flow-edge img, .flow-edge .asset-icon { width: 16px; height: 16px; border-radius: 50%; }
.flow-asset { color: var(--text-hi); font-weight: 600; text-decoration: none; }
.flow-asset:hover { color: var(--accent, #6ea8fe); }
.flow-arrow { color: var(--text-lo); }
.flow-edge-usd { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-lo); }

.flowmap-h { font-size: 11px; font-weight: 600; margin: 0 0 10px; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.flowmap { display: flex; flex-direction: column; gap: 8px; }
.fm-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.fm-source { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-hi); font-weight: 600; font-size: 13px; min-width: 0; }
.fm-source img, .fm-source .asset-icon { width: 20px; height: 20px; border-radius: 50%; }
.fm-source-usd { font-family: var(--mono); font-size: 10.5px; color: var(--text-lo); margin-left: auto; }
/* dest bars can outnumber the row width -> scroll them inside the track, never overflow the page */
.fm-dests { display: flex; gap: 4px; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fm-dests::-webkit-scrollbar { display: none; }
.fm-dest { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent, #6ea8fe) 12%, transparent); overflow: hidden; }
.fm-dest-label { font-size: 11px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.fm-dest-usd { font-family: var(--mono); color: var(--text-lo); }
.dex-flows-link { display: inline-flex; align-items: center; gap: 6px; margin: 16px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text-hi); font-size: 13px; font-weight: 600; }
.dex-flows-link:hover { border-color: var(--accent, #6ea8fe); }

@media (max-width: 640px) { .tok-cols { grid-template-columns: 1fr; } .fm-row { grid-template-columns: 100px 1fr; } }

/* Live signals feed (dashboard card) */
.sig-tabs { margin-bottom: 12px; }
.signals-list { display: flex; flex-direction: column; gap: 7px; }
.sig-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; background: var(--bg, transparent); }
.sig-row.sev-high { border-left-color: var(--flow-out); }
.sig-row.sev-medium { border-left-color: #f5c400; }
.sig-row.sev-info { border-left-color: var(--accent, #6ea8fe); }
.sig-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: center; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.sig-badge.sev-high { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 14%, transparent); }
.sig-badge.sev-medium { color: #f5c400; background: rgba(245,196,0,.13); }
.sig-badge.sev-info { color: var(--accent, #6ea8fe); background: color-mix(in srgb, var(--accent, #6ea8fe) 13%, transparent); }
.sig-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sig-title { font-size: 13px; font-weight: 600; color: var(--text-hi); }
.sig-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sig-wallet, .sig-asset { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--accent, #6ea8fe); text-decoration: none; }
.sig-asset img, .sig-asset .asset-icon { width: 13px; height: 13px; border-radius: 50%; }
.sig-wallet:hover, .sig-asset:hover { text-decoration: underline; }
.sig-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sig-amt { font-family: var(--mono); font-size: 15px; font-weight: 800; text-align: right; white-space: nowrap; }
.sig-amt.sev-high { color: var(--flow-out); }
.sig-amt.sev-medium { color: #f5b301; }
.sig-amt.sev-info { color: var(--flow-in); }
.sig-ago { font-family: var(--mono); font-size: 10px; color: var(--text-lo); white-space: nowrap; }

/* KPI strip + upgrade card */
.dex-kpi-row { display: grid; grid-template-columns: 1.4fr 3fr; gap: 14px; margin-top: 14px; }
.kpi-upsell { display: flex; flex-direction: column; gap: 8px; padding: 16px; text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6ea8fe) 18%, transparent), color-mix(in srgb, #8a5cf6 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent, #6ea8fe) 35%, var(--border)); border-radius: 14px; }
.kpi-upsell-title { font-size: 15px; font-weight: 800; color: var(--text-hi); line-height: 1.25; }
.kpi-upsell-list { margin: 2px 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.kpi-upsell-list li { font-size: 11.5px; color: var(--text-md, var(--text-hi)); padding-left: 16px; position: relative; }
.kpi-upsell-list li::before { content: "✓"; position: absolute; left: 0; color: var(--flow-in); font-weight: 700; }
.kpi-upsell-btn { align-self: flex-start; margin-top: 6px; padding: 7px 14px; border-radius: 8px; background: var(--accent, #6ea8fe); color: #fff; font-size: 12.5px; font-weight: 700; }
.kpi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi-card { display: flex; flex-direction: column; gap: 6px; padding: 13px; background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lo); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-tag { font-size: 9px; font-weight: 600; color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.06)); padding: 1px 6px; border-radius: 8px; text-transform: uppercase; flex: 0 0 auto; }
.kpi-val { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-val.buy { color: var(--flow-in); }
.kpi-val.sell { color: var(--flow-out); }
.kpi-spark { height: 30px; }
.kpi-spark svg { width: 100%; height: 30px; }
@media (max-width: 1000px) {
  .dex-kpi-row { grid-template-columns: 1fr; }
  .kpi-cards { grid-template-columns: repeat(2, 1fr); }
}
/* Pressure table on narrow: drop BOTH volume columns, keep asset / net / trend legible */
@media (max-width: 560px) {
  .prow, .prow-head { grid-template-columns: 1fr auto 54px; }
  .prow .prow-vol, .prow-head .prow-vol { display: none; }
  .prow-spark { justify-content: flex-end; }
  .prow-spark svg { width: 52px; }
}

/* Notable journeys feed */
.journeys-wrap { margin-bottom: 20px; }
.journeys-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.journey-item { display: flex; flex-direction: column; gap: 5px; padding: 12px; text-decoration: none;
  background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); border-left: 3px solid var(--accent, #6ea8fe); border-radius: 10px; }
.journey-item:hover { border-color: var(--text-lo); }
.journey-item.pat-off-ramp, .journey-item.pat-wash, .journey-item.pat-obfuscation { border-left-color: var(--flow-out); }
.journey-item.pat-accumulation { border-left-color: var(--flow-in); }
.journey-item-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.journey-vol { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-hi); }
.journey-item-story { font-size: 12.5px; line-height: 1.45; color: var(--text-md, var(--text-hi)); }
.journey-item-addr { font-family: var(--mono); font-size: 11px; color: var(--accent, #6ea8fe); }
@media (max-width: 640px) { .journeys-list { grid-template-columns: 1fr; } }

/* Net verdict hero (asset subpage /dex/asset still uses .dex-hero) */
.dex-hero {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; margin-bottom: 18px; padding: 16px 18px;
  background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 12px;
}
.dex-hero-side { display: flex; flex-direction: column; gap: 3px; }
.dex-hero-sell { text-align: right; }
.dex-hero-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lo); }
.dex-hero-val { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text-hi); }
.dex-hero-buy  .dex-hero-val { color: var(--flow-in); }
.dex-hero-sell .dex-hero-val { color: var(--flow-out); }
.dex-hero-net { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 16px; }
.dex-hero-net-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-lo); }
.dex-hero-net-val { font-family: var(--mono); font-size: 20px; font-weight: 800; }
.dex-hero-net-lean { font-size: 11px; font-weight: 600; }
.dex-hero-net-lean.buy  { color: var(--flow-in); }
.dex-hero-net-lean.sell { color: var(--flow-out); }
.dex-hero-net-lean.flat { color: var(--text-lo); }

/* The /dex net-flow card reuses #dex-hero but is a plain card, NOT the 3-col grid above. */
.netflow-card.dex-card { display: block; grid-template-columns: none; padding: 16px; margin-bottom: 0; border-radius: 14px; }

/* DEX selector */
.dex-venues-wrap { margin-bottom: 16px; }
.dex-venues-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lo); margin-bottom: 7px; }
.dex-venues { display: flex; gap: 8px; flex-wrap: wrap; }
.dex-venue-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 11px; color: var(--text-hi); font-size: 12.5px;
  font-family: var(--font); transition: border-color .12s, background .12s;
}
.dex-venue-chip:hover { border-color: var(--text-lo); }
.dex-venue-chip.active { border-color: var(--accent, #6ea8fe); background: color-mix(in srgb, var(--accent, #6ea8fe) 12%, transparent); }
.dex-venue-name { font-weight: 600; }
.dex-venue-net { font-family: var(--mono); font-size: 11px; }
.dex-venue-net.buy  { color: var(--flow-in); }
.dex-venue-net.sell { color: var(--flow-out); }

/* Pressure card: venue tabs + volume table */
.venue-tabs { margin-bottom: 10px; }
.prow { display: grid; grid-template-columns: minmax(120px,1.3fr) 1.3fr 1.3fr minmax(84px,.8fr) 70px; gap: 10px; align-items: center; }
.prow-head { padding: 0 6px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lo); border-bottom: 1px solid var(--border); }
.prow-head .prow-net, .prow-head .prow-spark { text-align: right; }
.prow { padding: 9px 6px; border-bottom: 1px solid var(--border); text-decoration: none; }
.prow:last-of-type { border-bottom: none; }
.prow:hover { background: var(--bg-hover, rgba(255,255,255,.03)); border-radius: 8px; }
.prow-asset { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prow-asset img, .prow-asset .asset-icon { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.prow-asset .dex-row-sym { font-weight: 600; font-size: 13px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-vol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pvol-val { font-family: var(--mono); font-size: 11.5px; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.pvol-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.pvol-fill { display: block; height: 100%; border-radius: 3px; }
.pvol-fill.buy  { background: var(--flow-in); }
.pvol-fill.sell { background: var(--flow-out); }
.prow-net { text-align: right; }
.prow-spark { height: 26px; display: flex; align-items: center; justify-content: flex-end; }
.prow-spark svg { width: 64px; height: 24px; }
.dex-more { display: block; width: 100%; margin-top: 12px; padding: 9px; background: transparent; border: 1px solid var(--border); border-radius: 9px; color: var(--text-hi); font-size: 12.5px; font-weight: 600; font-family: var(--font); cursor: pointer; }
.dex-more:hover { border-color: var(--accent, #6ea8fe); }

/* List */
.dex-list-head {
  display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr minmax(88px, .9fr);
  gap: 10px; padding: 0 12px 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-lo); border-bottom: 1px solid var(--border);
}
.dex-col-net { text-align: right; }
.dex-list { display: flex; flex-direction: column; }

.dex-row {
  display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr minmax(88px, .9fr);
  gap: 10px; align-items: center; padding: 11px 12px;
  border-bottom: 1px solid var(--border); text-decoration: none;
}
.dex-row:hover { background: var(--bg-hover, rgba(255,255,255,.03)); }
.dex-row-asset { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dex-row-asset img, .dex-row-asset .asset-icon { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.dex-row-sym { font-weight: 600; font-size: 13.5px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-row-flow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dex-row-gross { font-family: var(--mono); font-size: 10.5px; color: var(--text-lo); }
.dex-row-net { text-align: right; }

/* Buy/sell pressure bar */
.dex-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--border); }
.dex-bar-buy  { background: var(--flow-in); }
.dex-bar-sell { background: var(--flow-out); }

.dex-net { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.dex-net-buy  { color: var(--flow-in); }
.dex-net-sell { color: var(--flow-out); }
.dex-net-flat { color: var(--text-lo); }

/* ── Trace subpages (wallet + asset) ── */
.dex-back { display: inline-block; margin-bottom: 12px; font-size: 12.5px; color: var(--text-lo); text-decoration: none; }
.dex-back:hover { color: var(--text-hi); }
.trace-head h1 { font-size: 21px; font-weight: 700; margin: 0 0 6px; color: var(--text-hi); }
.trace-addr { font-family: var(--mono); font-size: 12px; color: var(--text-hi); margin-bottom: 6px; word-break: break-all; }
.trace-addr code { user-select: all; }
.trace-ext { color: var(--accent, #6ea8fe); text-decoration: none; margin-left: 8px; font-size: 11px; }

.journey-card { border: 1px solid var(--border); border-left: 3px solid var(--accent, #6ea8fe); border-radius: 10px; padding: 13px 15px; margin: 16px 0 6px; background: var(--bg-card, rgba(255,255,255,.02)); }
.journey-card.pat-off-ramp, .journey-card.pat-wash, .journey-card.pat-obfuscation { border-left-color: var(--flow-out); }
.journey-card.pat-accumulation, .journey-card.pat-dex-buyer { border-left-color: var(--flow-in); }
.journey-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.journey-pattern { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-hi); }
.journey-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; background: var(--bg-hover, rgba(255,255,255,.06)); color: var(--text-lo); }
.journey-tag.t-mixer { color: #f59e0b; background: rgba(245,158,11,.14); }
.journey-tag.t-bridge { color: #6ea8fe; background: rgba(110,168,254,.14); }
.journey-story { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-hi); }

.trace-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 20px; }
.trace-sum-cell { background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.trace-sum-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lo); }
.trace-sum-v { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text-hi); }
.trace-sum-v.in  { color: var(--flow-in); }
.trace-sum-v.out { color: var(--flow-out); }

/* The wallet-trace TIMELINE styles (.trace-timeline / -row / -kind / -day / -run / -sub) moved to
   assets/css/wallet-position.css when the DEX wallet page merged into the main page's DEX tab - both
   render the same feed from js/wallet-timeline.js, so the CSS lives in one shared place now. */

@media (max-width: 560px) {
  .trace-summary { grid-template-columns: 1fr 1fr; }
}

/* Asset daily net-flow trend - a zero-centred diverging column per day. Columns fill the width
   (wide when the window is short, thin when it's long) so a 2-day history reads as a real chart,
   not two tiny floating ticks. Dashed line marks the zero baseline. */
.atrend-wrap { margin: 18px 0; }
.atrend { position: relative; display: flex; align-items: stretch; gap: 4px; height: 88px; }
.atrend::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--border); pointer-events: none; }
.atrend-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.atrend-top, .atrend-bot { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.atrend-bot { align-items: flex-start; }
.atrend-bar { width: 62%; max-width: 44px; min-height: 2px; border-radius: 3px; }
.atrend-bar.up { background: var(--flow-in); }
.atrend-bar.down { background: var(--flow-out); }

/* Asset trace columns */
.asset-sub-title { font-size: 12px; font-weight: 400; color: var(--text-lo); }
.asset-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.asset-card { background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.asset-card h3 { font-size: 11px; font-weight: 600; margin: 0 0 8px; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.asset-tape-h { font-size: 11px; font-weight: 600; margin: 0 0 8px; color: var(--text-lo); text-transform: uppercase; letter-spacing: .04em; }
.pulse-asset-link { color: var(--text-hi); font-weight: 600; text-decoration: none; }
.pulse-asset-link:hover { color: var(--accent, #6ea8fe); text-decoration: underline; }
#asset-title img, #asset-title .asset-icon { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
@media (max-width: 700px) { .asset-cols { grid-template-columns: 1fr; } }

/* Wallets behind the flow (top buyers / sellers) */
.awallets-wrap { margin: 18px 0; }
.awallets-wrap .count { font-size: 10.5px; font-weight: 400; color: var(--text-lo); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.awallets-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.awallet-rows { display: flex; flex-direction: column; }
.awallet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); text-decoration: none; font-size: 12.5px; }
.awallet-row:last-child { border-bottom: none; }
.awallet-row:hover { background: var(--bg-hover, rgba(255,255,255,.03)); }
.awallet-addr { color: var(--text-hi); font-family: var(--mono); }
.awallet-trades { color: var(--text-lo); font-size: 10.5px; margin-left: 6px; font-family: var(--font); }
.awallet-net { font-variant-numeric: tabular-nums; font-weight: 600; }
.awallet-net.buy { color: var(--flow-in); }
.awallet-net.sell { color: var(--flow-out); }
@media (max-width: 700px) { .awallets-cols { grid-template-columns: 1fr; } }
.awh { font-size: 10.5px; font-weight: 600; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lo); }
.awh.buy { color: var(--flow-in); }
.awh.sell { color: var(--flow-out); }

/* Asset page: 2-col card rows + rotation/venue rows with proportion bars */
.asset-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; align-items: start; }
@media (max-width: 760px) { .asset-cols-2 { grid-template-columns: 1fr; } }
.rot-rows { display: flex; flex-direction: column; gap: 11px; }
.rot-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rot-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.rot-l { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-hi); overflow: hidden; }
.rot-l img, .rot-l .asset-icon { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
.rot-asset { color: var(--text-hi); font-weight: 600; text-decoration: none; }
.rot-asset:hover { color: var(--accent, #6ea8fe); }
.rot-count { color: var(--text-lo); font-size: 10.5px; margin-left: 4px; }
.rot-venue { color: var(--text-hi); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-hi); flex: 0 0 auto; }
.rot-val.buy { color: var(--flow-in); }
.rot-val.sell { color: var(--flow-out); }
.rot-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.rot-fill { display: block; height: 100%; border-radius: 3px; }
.rot-fill.buy { background: var(--flow-in); }
.rot-fill.sell { background: var(--flow-out); }
.rot-fill.neutral { background: color-mix(in srgb, var(--accent, #6ea8fe) 55%, transparent); }

/* Empty / disabled state */
.dex-empty { padding: 40px 20px; text-align: center; color: var(--text-lo); }
.dex-empty-title { font-size: 15px; font-weight: 700; color: var(--text-hi); margin-bottom: 6px; }
.dex-empty p { margin: 0 auto; max-width: 40ch; font-size: 13px; line-height: 1.5; }

@media (max-width: 560px) {
  .dex-hero { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dex-hero-net { grid-column: 1 / -1; order: -1; padding: 0 0 8px; border-bottom: 1px solid var(--border); }
  .dex-hero-sell { text-align: right; }
  .dex-list-head { grid-template-columns: 1.1fr 1.6fr .9fr; }
  .dex-row { grid-template-columns: 1.1fr 1.6fr .9fr; }
}

/* ── Flow quality (honest volume split) - 2026-07-20 ──────────────────
   churn chip on board rows + directional/churn/wash block on the asset hero.
   Amber = churn (identity marker, NOT a flow direction - keeps flow colors free). */
.churn-chip {
  display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle;
  font: 700 8px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: #e6a34d; background: rgba(230,163,77,.10);
  border: 1px solid rgba(230,163,77,.32); border-radius: 4px; padding: 3px 6px; white-space: nowrap;
}
[data-theme="light"] .churn-chip { color: #a9691a; background: rgba(169,105,26,.09); border-color: rgba(169,105,26,.35); }

/* Flow bar with a WASH-ZONE overlay: the shaded band marks the volume where buys and sells
   cancel (churn); the un-shaded coloured tip is the REAL directional flow. Toggleable. */
.flowbar { position: relative; display: flex; height: 14px; border-radius: 5px; overflow: hidden; background: var(--border); }
.flowbar-buy  { background: var(--flow-in);  height: 100%; }
.flowbar-sell { background: var(--flow-out); height: 100%; }
.flowbar-wash {
  position: absolute; top: 0; bottom: 0; pointer-events: none; box-sizing: border-box;
  opacity: 0; transition: opacity .18s ease;
  background-image: repeating-linear-gradient(45deg, rgba(8,10,16,.55) 0 4px, rgba(8,10,16,.10) 4px 8px);
  border-left: 1.5px solid rgba(230,163,77,.9); border-right: 1.5px solid rgba(230,163,77,.9);
}
.flowbar.show-wash .flowbar-wash { opacity: 1; }
[data-theme="light"] .flowbar-wash {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 4px, rgba(255,255,255,.12) 4px 8px);
}

/* Legend + wash toggle (one tidy row under the bar). */
.flow-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 11px; color: var(--text-md); margin: 9px 0 0; }
.fl-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fl-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.fl-sw.sw-buy  { background: var(--flow-in); }
.fl-sw.sw-sell { background: var(--flow-out); }
.fl-sw.sw-wash { background-image: repeating-linear-gradient(45deg, #e6a34d 0 3px, rgba(230,163,77,.25) 3px 6px); }
.wash-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin-left: auto; user-select: none; }
.wash-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wt-track { width: 30px; height: 16px; border-radius: 9px; background: var(--border); position: relative; transition: background .18s; }
.wt-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-lo); transition: transform .18s, background .18s; }
.wash-toggle input:checked + .wt-track { background: rgba(230,163,77,.4); }
.wash-toggle input:checked + .wt-track .wt-thumb { transform: translateX(14px); background: #e6a34d; }
.wt-lbl { font-size: 11px; color: var(--text-md); }

/* Flow-quality METER: one proportion bar (real vs wash/churn) with the numbers as end-labels and a
   plain-language footnote. Story-first, mobile-first, no cards, no hover. */
.flow-qm { margin: 18px 0 2px; }
.qm-ends { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.qm-end { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qm-end.r { text-align: right; }
.qm-v { font-family: var(--mono); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.qm-v.buy { color: var(--flow-in); }
.qm-v.sell { color: var(--flow-out); }
.qm-v.churn { color: #e6a34d; }
[data-theme="light"] .qm-v.churn { color: #a9691a; }
.qm-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lo); }
.qm-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--border); }
.qm-seg { height: 100%; }
.qm-seg.buy  { background: var(--flow-in); }
.qm-seg.sell { background: var(--flow-out); }
.qm-seg.churn { background: #e6a34d; }
[data-theme="light"] .qm-seg.churn { background: #c98a2e; }
.qm-foot { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-lo); }
.qm-foot .qm-wash { color: var(--flow-out); font-weight: 700; }
[data-theme="light"] .qm-foot .qm-wash { color: #c0453f; }

/* On-chain price in the context subtitle. */
.ctx-price { font-family: var(--mono); font-weight: 800; color: var(--text-hi); }
.ctx-price-note { color: var(--text-lo); }

/* Hero rhythm - give the verdict room to breathe (was cramped). */
.netflow-main { align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.netflow-headline { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.netflow-headline .netflow-tags { margin-bottom: 0; }
.netflow-bar-row { margin-bottom: 7px; }
.netflow-trend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.netflow-trend .netflow-spark-label { margin-bottom: 8px; }

/* ── Contextual page header (shared: js/context-nav.js) - a real asset HEADER BAND: name + big
   focal value (price) on the left, controls on the right, a divider under it. Reads as a header,
   not another card. Back lives in the top nav (.nav-back). ── */
.ctx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 2px 2px 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.ctx-id { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ctx-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text-hi); min-width: 0; }
.ctx-title img, .ctx-title .asset-icon { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; }
.ctx-mobile-back { display: none; }
.ctx-sub { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ctx-price-big { font-family: var(--mono); font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--text-hi); }
.ctx-price-cap { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lo); }
.ctx-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 860px) {
  .ctx-mobile-back {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px;
    width: 40px; height: 40px; margin: -5px 0 0 -6px; border-radius: 12px;
    color: var(--text-hi); background: var(--bg-card2); border: 1px solid var(--border); text-decoration: none;
  }
}
@media (max-width: 560px) {
  .ctx-title { font-size: 18px; }
  .ctx-price-big { font-size: 24px; }
}

/* Immersive directional tint on the flow hero + subtle card interactions. */
.netflow-card.flow-sell { border-color: color-mix(in srgb, var(--flow-out) 26%, var(--border)); background:
  radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, var(--flow-out) 9%, transparent), transparent 60%), var(--bg-card, rgba(255,255,255,.02)); }
.netflow-card.flow-buy { border-color: color-mix(in srgb, var(--flow-in) 26%, var(--border)); background:
  radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, var(--flow-in) 9%, transparent), transparent 60%), var(--bg-card, rgba(255,255,255,.02)); }
.dex-card { transition: border-color .15s ease, transform .12s ease; }

/* Lighter recent-swaps tape: hairline-separated rows, not boxed pills (premium, less busy). */
.pulse-tape-row { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 9px 4px; }
.pulse-tape-row:last-child { border-bottom: none; }
.pulse-tape-row:hover { background: var(--bg-hover, rgba(255,255,255,.03)); }

/* Board pressure rows: the asset SYMBOL is the primary info and must never be hidden by the badges.
   Give it a guaranteed min-width (so it can't shrink to nothing), let it ellipsis only past that, and
   clip the badges via container overflow when space is tight - the symbol wins, badges give way. */
.prow-asset { overflow: hidden; }
.prow-asset .dex-row-sym { flex: 0 1 auto; min-width: 4em; }
.prow-asset .tok-badge, .prow-asset .churn-chip { flex: 0 0 auto; }
.prow-net { white-space: nowrap; }
/* Mobile: drop the churn chip (its detail lives on the asset page) so the cell can't overrun net. */
@media (max-width: 640px) { .prow .churn-chip { display: none; } }

/* ══ Immersive flow-verdict header (dex-asset) - identity + the headline verdict fused into one
   panel with an ambient directional glow. The header itself answers "what's happening". ══ */
.afh { position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 16px; margin-bottom: 16px;
  background: var(--bg-card, rgba(255,255,255,.02)); }
.afh > * { position: relative; z-index: 1; }
.afh-glow { position: absolute; z-index: 0; top: -60%; left: -10%; right: -10%; height: 200%;
  background: radial-gradient(48% 42% at 26% 28%, var(--afh-accent, transparent), transparent 70%);
  opacity: .55; filter: blur(4px); pointer-events: none; }
.afh.flow-sell { --afh-accent: color-mix(in srgb, var(--flow-out) 32%, transparent); border-color: color-mix(in srgb, var(--flow-out) 24%, var(--border)); }
.afh.flow-buy  { --afh-accent: color-mix(in srgb, var(--flow-in) 32%, transparent);  border-color: color-mix(in srgb, var(--flow-in) 24%, var(--border)); }
.afh.flow-flat { --afh-accent: transparent; }
.afh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.afh-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.afh-icon img, .afh-icon .asset-icon { width: 26px; height: 26px; border-radius: 50%; display: block; }
.afh-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afh-verdict { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.afh-arrow { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto; }
.afh-arrow.sell { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 16%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--flow-out) 20%, transparent); }
.afh-arrow.buy  { color: var(--flow-in);  background: color-mix(in srgb, var(--flow-in) 16%, transparent);  box-shadow: 0 0 26px color-mix(in srgb, var(--flow-in) 20%, transparent); }
.afh-arrow.flat { color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.06)); }
.afh-arrow svg { width: 26px; height: 26px; }
.afh-headline { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.afh-net { font-family: var(--mono); font-size: 40px; font-weight: 800; line-height: .95; letter-spacing: -.02em; }
.afh-net.buy { color: var(--flow-in); } .afh-net.sell { color: var(--flow-out); } .afh-net.flat { color: var(--text-hi); }
.afh-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-lo); }
.afh-eyebrow.sell { color: color-mix(in srgb, var(--flow-out) 78%, var(--text-lo)); }
.afh-eyebrow.buy  { color: color-mix(in srgb, var(--flow-in) 78%, var(--text-lo)); }
.afh-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-lo); }
.afh-stat b { font-family: var(--mono); font-weight: 700; color: var(--text-hi); }
.afh-dot { opacity: .45; }
@media (max-width: 560px) { .afh-net { font-size: 33px; } .afh-arrow { width: 44px; height: 44px; } .afh-arrow svg { width: 22px; height: 22px; } }

/* Board variant of the immersive header: no coin icon, slightly larger wordmark. */
.afh-board .afh-name { font-size: 20px; }

/* Wallet-label chips (.wb) live in flow-style.css so admin + dex both get them. Here: layout only. */
.awallet-id { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.awallet-row { align-items: center; }

/* Light "Hide wash" filter in the wallets card head - a tidy inline checkbox, right-aligned. */
.wallet-filter { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-lo); user-select: none; }
.wallet-filter input { position: absolute; opacity: 0; pointer-events: none; }
.wf-box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-hover, rgba(255,255,255,.04)); display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s; }
.wf-box::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-2, #9b72ff); transform: scale(0); transition: transform .15s; }
.wallet-filter input:checked + .wf-box { border-color: var(--accent-2, #9b72ff); }
.wallet-filter input:checked + .wf-box::after { transform: scale(1); }
.wallet-filter:hover { color: var(--text-md); }

/* Recent-swaps tape: lead with WHO traded (wallet + label), not the repeated asset symbol. */
.tape-who { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
.tape-wallet { font-family: var(--mono); font-size: 12px; color: var(--accent-2, #9b72ff); text-decoration: none; white-space: nowrap; }
.tape-wallet:hover { text-decoration: underline; }
.tape-quote { color: var(--text-lo); font-size: 12px; white-space: nowrap; }
.pulse-tape-row .pulse-tape-usd, .pulse-tape-row .pulse-tape-ago { flex: 0 0 auto; }
.pulse-tape-row .pulse-tape-ago { margin-left: 4px; }

.awh-count { font-size: 10.5px; font-weight: 500; color: var(--text-lo); margin-left: 8px; }

/* ══ Immersive WALLET header (dex-wallet) - identity + journey verdict + KPI stats, one glowing
   panel. Reuses .afh-glow. Tinted by the wallet's dominant pattern (accumulation=green, off-ramp=
   red, wash/bridge=amber). ══ */
.wfh { position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin-bottom: 14px;
  background: var(--bg-card, rgba(255,255,255,.02)); }
.wfh > * { position: relative; z-index: 1; }
.wfh.flow-buy  { --afh-accent: color-mix(in srgb, var(--flow-in) 30%, transparent);  border-color: color-mix(in srgb, var(--flow-in) 22%, var(--border)); }
.wfh.flow-sell { --afh-accent: color-mix(in srgb, var(--flow-out) 30%, transparent); border-color: color-mix(in srgb, var(--flow-out) 22%, var(--border)); }
.wfh.flow-warn { --afh-accent: rgba(230,163,77,.28); border-color: rgba(230,163,77,.30); }
.wfh.flow-flat { --afh-accent: transparent; }
.wfh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wfh-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wfh-addr { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfh-copy { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 7px; border: 1px solid var(--border); background: var(--bg-hover, rgba(255,255,255,.04));
  color: var(--text-lo); cursor: pointer; transition: color .15s, border-color .15s, transform .1s; }
.wfh-copy:hover { color: var(--text-hi); border-color: var(--accent-2, #9b72ff); }
.wfh-copy:active { transform: scale(.9); }
.wfh-copy.copied { color: var(--flow-in); border-color: var(--flow-in); }
.wfh-ext { font-size: 11.5px; color: var(--text-lo); text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.wfh-ext:hover { color: var(--accent-2, #9b72ff); }
.wfh-verdict { margin-top: 16px; }
.wfh-pattern { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.wfh-pattern.buy { color: var(--flow-in); } .wfh-pattern.sell { color: var(--flow-out); }
.wfh-pattern.warn { color: #e6a34d; } .wfh-pattern.flat { color: var(--text-md); }
.wfh-story { margin: 7px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-hi); font-weight: 500; }
.wfh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; margin-top: 16px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); }
.wfh-kpi { padding: 11px 13px; background: var(--bg-card, #0d1117); min-width: 0; }
.wfh-kpi-v { font-family: var(--mono); font-size: 17px; font-weight: 800; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfh-kpi-v.in { color: var(--flow-in); } .wfh-kpi-v.out { color: var(--flow-out); }
.wfh-kpi-k { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lo); margin-top: 6px; }
.wfh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.wfh-age { font-size: 11px; color: var(--text-lo); }
.wfh-term { font: 700 8.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px;
  color: #ff7a7a; background: rgba(255,122,122,.12); border: 1px solid rgba(255,122,122,.32); }
.wfh-term.t-cex { color: #f0b232; background: rgba(240,178,50,.11); border-color: rgba(240,178,50,.3); }
.wfh-term.t-bridge { color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.05)); border-color: var(--border); }

/* Liveness pulse on the asset stat line ("traded 2m ago"). */
.afh-live { display: inline-flex; align-items: center; gap: 5px; }
.afh-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flow-in); box-shadow: 0 0 0 0 color-mix(in srgb, var(--flow-in) 60%, transparent); animation: afhpulse 2s infinite; }
@keyframes afhpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--flow-in) 55%, transparent); } 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .afh-live-dot { animation: none; } }

/* MM proof panel (wallet header) - the evidence behind the "Market maker" label. */
.wfh-proof { margin-top: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #7fb2ff 26%, var(--border)); border-radius: 12px; background: rgba(110,168,254,.05); }
.mmp-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7fb2ff; }
.mmp-note { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: #7fb2ff; background: rgba(110,168,254,.12); border: 1px solid rgba(110,168,254,.3); border-radius: 4px; padding: 2px 5px; }
.mmp-line { margin-top: 8px; font-size: 12.5px; color: var(--text-md); line-height: 1.5; }
.mmp-line b { color: var(--text-hi); font-family: var(--mono); }
.mmp-assets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mmp-asset { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-hi); background: var(--bg-hover, rgba(255,255,255,.04)); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; }
.mmp-asset img, .mmp-asset .asset-icon { width: 15px; height: 15px; border-radius: 50%; }
.mmp-rt { color: var(--text-lo); font-family: var(--mono); font-size: 10px; }
/* The anchor line: the proven on-chain relation to a known MM entity. Highlighted - it's the proof. */
.mmp-link { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: rgba(110,168,254,.09); border: 1px solid rgba(110,168,254,.22); }
.mmp-link .mmp-dot { width: 7px; height: 7px; border-radius: 50%; background: #7fb2ff; box-shadow: 0 0 0 3px rgba(110,168,254,.18); flex: none; }
.mmp-link .mmp-note { color: var(--text-lo); background: none; border: none; padding: 0; text-transform: none; letter-spacing: 0; }

/* ── On-chain proof: the ACTUAL transfers behind the "N transfers" claim ──
   The count is a <details> toggle; opening it lists each real tx, every hash a chain link. A claimed
   number is never bare - the user can read the blockchain behind it. */
.mmp-proof { display: block; padding: 0; cursor: pointer; }
.mmp-proof > summary { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 10px; list-style: none; }
.mmp-proof > summary::-webkit-details-marker { display: none; }
.mmp-proof > summary::after { content: "\25be"; font-size: 12px; color: #7fb2ff; margin-left: auto; transition: transform .15s; }
.mmp-proof[open] > summary::after { transform: rotate(180deg); }
.mmp-txs { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 8px; }
.mmp-tx { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 6px 6px; border-top: 1px solid rgba(110,168,254,.14); font-size: 12px; }
.mmp-tx-dir { color: var(--text-lo); }
.mmp-tx-usd { font-family: var(--mono); font-weight: 700; text-align: right; }
.mmp-tx.in  .mmp-tx-usd { color: var(--flow-in); }
.mmp-tx.out .mmp-tx-usd { color: var(--flow-out); }
.mmp-tx-when { color: var(--text-lo); font-size: 11px; white-space: nowrap; }

/* .trace-item / .trace-row-tx / .trace-sub-tx and the .trace-timeline .pbrow placement moved to the
   shared assets/css/wallet-position.css alongside the rest of the timeline (see note above). */