:root {
  color-scheme: light;
  --font-body:      'Inter', ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-display:   'Space Grotesk', 'Inter', ui-sans-serif, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --surface-1:      #ffffff;
  --page-plane:     #f4f4f1;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #89877f;
  --gridline:       #e6e5dd;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.08);
  --shadow-color:   rgba(20,20,15,0.06);
  --shadow-color-strong: rgba(20,20,15,0.10);
  --brand-ink:      #52514e;
  /* Robinhood's rebrand neon (#CCFF00, sampled from their logo) is ~1.2:1
     against white — unusable as a mark color here, and its legible same-hue
     steps all land in an olive/bile zone. This is a fresher green pulled
     away from yellow that stays legible on the light surface; the true neon
     appears in the logo badges and in dark mode. */
  /* Per-chain identity colors — a chain's color follows it into either
     comparison slot, so these are keyed by chain, not by left/right position.
     Validated pairwise (all 10 combinations) via the dataviz skill's
     validate_palette.js. Ethereum vs Solana sits just under the CVD-safe
     floor — an unavoidable tradeoff with three brand-mandated blues in a
     5-chain set — mitigated by every color dot always pairing with the
     chain's icon + name, never color alone. */
  --chain-robinhood: #2FB600;
  --chain-solana:    #9945FF; /* Solana brand purple */
  --chain-ethereum:  #627EEA;
  --chain-base:      #0052FF; /* Coinbase / Base blue */
  --chain-arbitrum:  #3DB8FF;
  --good:           #006300;
  --bad:            #c23a3a;
  /* Categorical palette for donut-slice identity (not the two brand series
     above) — fixed order, CVD-validated as a set via the dataviz skill's
     validate_palette.js against this surface. Never reorder per-chart. */
  --cat-1:          #2a78d6; /* blue */
  --cat-2:          #008300; /* green */
  --cat-3:          #e87ba4; /* magenta */
  --cat-4:          #eda100; /* yellow */
  --cat-5:          #1baf7a; /* aqua */
  --cat-6:          #eb6834; /* orange */
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #18181a;
    --page-plane:     #0b0b0c;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2ba;
    --text-muted:     #8f8d86;
    --gridline:       #2a2a2b;
    --baseline:       #3a3a3a;
    --border:         rgba(255,255,255,0.09);
    --shadow-color:   rgba(0,0,0,0.35);
    --shadow-color-strong: rgba(0,0,0,0.55);
    --brand-ink:      #ffffff;
    --chain-robinhood: #CCFF00; /* Robinhood rebrand neon — huge contrast on the dark surface */
    --chain-solana:    #a855ff;
    --chain-ethereum:  #627EEA;
    --chain-base:      #0052FF;
    --chain-arbitrum:  #3DB8FF;
    --good:           #1fce1f;
  --bad:            #ff6b6b;
    --cat-1:          #3987e5;
    --cat-2:          #008300;
    --cat-3:          #d55181;
    --cat-4:          #c98500;
    --cat-5:          #199e70;
    --cat-6:          #d95926;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #18181a;
  --page-plane:     #0b0b0c;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2ba;
  --text-muted:     #8f8d86;
  --gridline:       #2a2a2b;
  --baseline:       #3a3a3a;
  --border:         rgba(255,255,255,0.09);
  --shadow-color:   rgba(0,0,0,0.35);
  --shadow-color-strong: rgba(0,0,0,0.55);
  --brand-ink:      #ffffff;
  --chain-robinhood: #CCFF00;
  --chain-solana:    #a855ff;
  --chain-ethereum:  #627EEA;
  --chain-base:      #0052FF;
  --chain-arbitrum:  #3DB8FF;
  --good:           #1fce1f;
  --bad:            #ff6b6b;
  --cat-1:          #3987e5;
  --cat-2:          #008300;
  --cat-3:          #d55181;
  --cat-4:          #c98500;
  --cat-5:          #199e70;
  --cat-6:          #d95926;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 32px 72px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 5px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.brand-glyph {
  width: 14px;
  height: 14px;
  flex: none;
}

.subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.muted { color: var(--text-muted); font-size: 13px; }

.chain-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.chain-picker-vs {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chain-picker-group {
  flex-wrap: wrap;
  justify-content: center;
  border: none;
  border-radius: 0;
  overflow: visible;
  gap: 5px;
}
.chain-picker-group .btn-pill {
  border: 1px solid var(--border);
  border-radius: 7px;
}

.chain-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.chain-link-group { display: flex; align-items: center; gap: 6px; }
.chain-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; }
.chain-links a:hover { color: var(--text-primary); text-decoration: underline; }

.methodology-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: -10px 0 28px;
  line-height: 1.6;
  text-align: center;
}

.refresh-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.refresh-btn:hover { background: var(--gridline); }
.refresh-btn:active { box-shadow: inset 0 1px 2px var(--shadow-color-strong); }

.theme-btn {
  padding: 7px 11px;
  line-height: 1;
  font-size: 14px;
}

.stat-rows {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-row {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 26px;
  row-gap: 6px;
  box-shadow: 0 1px 2px var(--shadow-color);
}

.stat-row-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-label.align-right { justify-content: flex-end; }

.series-dot {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex: none;
  /* These CDN chain icons ship with a lot of flat padding around a small
     centered mark (DeFiLlama's icon is roughly half whitespace) — sizing at
     100% just shows a solid color block at badge size, so zoom past the
     padding to make the actual logo mark legible. */
  background-size: 145% 145%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-value.align-right { text-align: right; }

.stat-change {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
}
.stat-change.align-right { justify-content: flex-end; }
.chg-up { color: var(--good); }
.chg-down { color: var(--bad); }

.stat-ratio {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px var(--shadow-color), 0 10px 28px -18px var(--shadow-color-strong);
}

.card-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
  margin-bottom: 14px;
}

.card-header h2 {
  font-family: var(--font-display);
  font-size: 15.5px;
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
}

.card-header-aux {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Little circled "i" next to a card title; its explainer text expands on
   hover or keyboard focus. */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  cursor: help;
  flex: none;
}
.info-tip:hover,
.info-tip:focus-visible {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.info-tip-text {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-width: 80vw;
  padding: 10px 13px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 28px -10px var(--shadow-color-strong);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 40;
}
/* Hover-to-open is desktop-only: on touch, :hover sticks after a tap and
   the tooltip could never be closed. Touch uses the JS-managed .open class. */
@media (hover: hover) {
  .info-tip:hover .info-tip-text {
    opacity: 1;
    pointer-events: auto;
  }
}
.info-tip:focus-visible .info-tip-text,
.info-tip.open .info-tip-text {
  opacity: 1;
  pointer-events: auto;
}

.legend { display: flex; justify-content: center; gap: 16px; margin-bottom: 4px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.legend-key { width: 14px; height: 2px; border-radius: 1px; flex: none; }

.btn-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.btn-pill {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border: none;
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-pill + .btn-pill { border-left: 1px solid var(--border); }
.btn-pill:hover { background: var(--gridline); }
.btn-pill.active { background: var(--text-primary); color: var(--surface-1); }
.btn-pill:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.btn-group.tiny .btn-pill { padding: 3px 8px; font-size: 10.5px; }

/* Standalone PNG-export pill: matches the tiny button-group look but sits
   outside any group, so it carries its own border and radius. */
.png-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  line-height: 0;
}
.png-btn svg { display: block; }

.chart-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; }

.viz-root { position: relative; width: 100%; }
.viz-root svg { display: block; width: 100%; height: auto; touch-action: pan-y; }

.gridline { stroke: var(--gridline); stroke-width: 1; }
.axis-text { fill: var(--text-muted); font-size: 10.5px; font-family: var(--font-mono); }
.crosshair { stroke: var(--baseline); stroke-width: 1; }
.milestone-line { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 3 3; }
.milestone-text { fill: var(--text-secondary); font-size: 9.5px; font-weight: 600; font-family: var(--font-body); }

.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 12px;
  box-shadow: 0 8px 24px -4px var(--shadow-color-strong);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .tt-date { color: var(--text-muted); margin-bottom: 4px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.chart-tooltip .tt-row + .tt-row { margin-top: 2px; }
.chart-tooltip .tt-key { width: 10px; height: 2px; flex: none; }
.chart-tooltip .tt-value { font-family: var(--font-mono); font-weight: 600; margin-left: 10px; font-variant-numeric: tabular-nums; }

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}


.panel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.panel-controls { display: flex; align-items: center; gap: 8px; }

.share-bar-track {
  display: flex;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
}
.share-bar-seg { display: flex; align-items: center; }
.share-bar-seg:first-child { margin-right: 2px; }
.share-bar-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.share-bar-legend span { display: flex; align-items: center; gap: 6px; }

.donut-root {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.donut-svg-wrap { position: relative; flex: none; line-height: 0; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  line-height: normal;
}
.donut-center-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.donut-center-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend-key { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.donut-legend-name { color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.donut-legend-pct {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
  padding-left: 16px;
  font-variant-numeric: tabular-nums;
}

.live-stat-list { display: flex; flex-direction: column; gap: 11px; }
.live-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
}
.live-stat-row .live-label { color: var(--text-muted); }
.live-stat-row .live-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.live-source { font-size: 11px; color: var(--text-muted); margin-top: 10px; text-align: center; }

.dex-rank-list { display: flex; flex-direction: column; gap: 5px; }
.dex-rank-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  overflow: hidden;
}
.dex-rank-row .bar-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 7px;
  opacity: 0.12;
}
.dex-rank-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  width: 13px;
  flex: none;
}
.dex-rank-name {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.dex-rank-value {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.error-banner {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  box-shadow: 0 1px 2px var(--shadow-color);
}

.site-footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.site-footer p {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.site-footer a { color: var(--text-secondary); font-weight: 500; text-decoration: none; }
.site-footer a:hover { color: var(--text-primary); text-decoration: underline; }

/* Mobile overrides live at the end of the file so they win the source-order
   tiebreak against every component rule above. */
@media (max-width: 700px) {
  .panel-grid { grid-template-columns: 1fr; }

  .page { padding: 22px 14px 48px; }
  .page-header h1 { font-size: 23px; }
  .card { padding: 16px 13px 14px; }

  /* Two 5-pill groups side by side don't fit a phone width even wrapped,
     so the picker stacks: group A, the "vs" label, then group B. */
  .chain-picker { flex-direction: column; gap: 8px; }

  /* Card headers: absolute-positioned aux controls overlap the title on
     narrow screens. Instead the title and its info dot stay on one row and
     the control cluster wraps to a full-width row beneath them. */
  .card-header {
    flex-wrap: wrap;
    row-gap: 10px;
    min-height: 0;
    margin-bottom: 12px;
  }
  .card-header-aux {
    position: static;
    transform: none;
    flex-basis: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Stat rows: the desktop 3-column grid overflows a phone, so rearrange
     into a 2-column card: full-width title, then label/value/change pairs
     side by side, ratio line centered underneath. Items are placed by
     order, the desktop-only spacer cell is dropped. */
  .stat-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    padding: 13px 14px;
  }
  .stat-row-title {
    grid-column: 1 / -1;
    order: 0;
    white-space: normal;
    margin-bottom: 5px;
  }
  .stat-label { order: 1; }
  .stat-label.align-right { order: 2; }
  .stat-value { order: 3; font-size: 18px; }
  .stat-value.align-right { order: 4; }
  .stat-change { order: 5; gap: 7px; flex-wrap: wrap; }
  .stat-change.align-right { order: 6; }
  .stat-change span { white-space: nowrap; }
  .stat-ratio {
    grid-column: 1 / -1;
    order: 7;
    white-space: normal;
    margin-top: 6px;
  }
  .stat-spacer { display: none; }

  /* Long panel titles and share-bar labels wrap instead of clipping. */
  .share-bar-legend { flex-wrap: wrap; gap: 6px 14px; }
  .legend { flex-wrap: wrap; }
  .info-tip-text { width: 260px; }

  .methodology-note { font-size: 11px; }

  /* Donut + legend always stack centered; side-by-side only when both
     donuts' legends fit, which they never both do on a phone, and the
     mixed result looked misaligned. */
  .donut-wrap { flex-direction: column; gap: 12px; }

  /* Ranked lists (top DEXes, aggregators, yields): names truncate so the
     value column never pushes past the card edge. */
  .dex-rank-row { gap: 7px; padding: 7px 8px; }
  .dex-rank-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  .dex-rank-value { flex: none; white-space: nowrap; font-size: 11px; }
}