/* =========================================================================
   The M.U.L.E. System — Stats Terminal
   Retro CRT + banana palette. Matches markup in index.php and app.js.
   ========================================================================= */

/* --------- Tokens --------- */
:root {
  --background:   #14120a;
  --surface:      #1c1a10;
  --surface-2:    #242114;
  --border:       #4a4227;
  --border-soft:  #322c1a;
  --foreground:   #f4ecd6;
  --muted:        #a39870;

  --primary:      #ffd23f;   /* banana */
  --primary-soft: rgba(255, 210, 63, 0.15);
  --primary-ink:  #1a1606;

  --accent:       #8ee06b;   /* CRT green */
  --accent-soft:  rgba(142, 224, 107, 0.15);

  --danger:       #ff6b6b;
  --warning:      #ffb347;

  /* Set from body[data-token] below */
  --token:       var(--primary);
  --token-soft:  var(--primary-soft);
}

body[data-token="nanana"]   { --token: #ffd23f; --token-soft: rgba(255,210,63,.18); }
body[data-token="nananax"]  { --token: #4dd7ff; --token-soft: rgba(77,215,255,.18); }
body[data-token="mule"]     { --token: #ff6b6b; --token-soft: rgba(255,107,107,.18); }
body[data-token="crystite"] { --token: #6ea8ff; --token-soft: rgba(110,168,255,.18); }
body[data-token="smithore"] { --token: #8ee06b; --token-soft: rgba(142,224,107,.18); }

/* --------- Base --------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--background);
}

body {
  margin: 0;
  color: var(--foreground);
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 210, 63, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(142, 224, 107, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #14120a 0%, #0d0c06 100%);
  background-attachment: fixed;
  font-family: "JetBrains Mono", "IBM Plex Mono", "Menlo", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* CRT scanlines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent 0, transparent 2px,
    rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 3px
  );
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
  font-family: "VT323", "JetBrains Mono", "Courier New", monospace;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--foreground);
}
h1 { font-size: 28px; line-height: 1; }
h2 { font-size: 20px; line-height: 1.1; color: var(--token); text-shadow: 0 0 12px rgba(255,210,63,0.25); }
h3 { font-size: 16px; }

a { color: var(--token); text-decoration: none; }
a:hover { color: var(--foreground); text-decoration: underline; }

p { margin: 0; }

.mono    { font-family: "JetBrains Mono", "Menlo", monospace; }
.muted   { color: var(--muted); }
.tiny    { font-size: 11px; letter-spacing: 0.02em; }
.accent  { color: var(--accent); }
.danger  { color: var(--danger); }

/* --------- Layout: Header --------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(20, 18, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--border);
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand__text h1 {
  color: var(--token);
  text-shadow: 0 0 16px var(--token-soft);
}
.brand__text p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Address chip: clickable shortened address + copy button */
.addr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.addr-chip__link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  transition: color 120ms ease, border-color 120ms ease, text-shadow 120ms ease;
}
.addr-chip__link:hover,
.addr-chip__link:focus-visible {
  color: var(--token);
  border-bottom-color: var(--token);
  text-shadow: 0 0 8px var(--token-soft);
  outline: none;
}
.addr-chip__copy {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1.4;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.addr-chip__copy:hover,
.addr-chip__copy:focus-visible {
  color: var(--token);
  border-color: var(--token);
  background: var(--token-soft);
  outline: none;
}
.addr-chip__copy.is-copied {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}

/* Token badge (circle initial) */
.token-badge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "VT323", monospace;
  font-size: 22px;
  color: var(--primary-ink);
  font-weight: 700;
  border: 2px solid rgba(0,0,0,0.3);
  box-shadow: 0 0 16px var(--token-soft);
  background: var(--token);
}
.token-badge--nanana   { background: #ffd23f; }
.token-badge--nananax  { background: #4dd7ff; }
.token-badge--mule     { background: #ff6b6b; }
.token-badge--crystite { background: #6ea8ff; }
.token-badge--smithore { background: #8ee06b; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:hover {
  background: var(--surface-2);
  border-color: var(--token);
  color: var(--token);
  text-decoration: none;
}

.btn-ext {
  color: var(--token);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  padding: 2px 6px;
  border-radius: 2px;
}
.btn-ext:hover { background: var(--token-soft); text-decoration: none; }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Team treasury pill (header). Clicks out to PulseScan. */
.treasury-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  border-radius: 2px;
  white-space: nowrap;
}
.treasury-pill:hover,
.treasury-pill:focus-visible {
  border-color: var(--token);
  background: var(--token-soft);
  transform: translateY(-1px);
  outline: none;
  text-decoration: none;
}
.treasury-pill__label {
  color: var(--muted);
  font-size: 10px;
}
.treasury-pill__value {
  color: var(--token);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px var(--token-soft);
  font-variant-numeric: tabular-nums;
  font-family: "VT323", "JetBrains Mono", monospace;
}
.treasury-pill__meta {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.2em;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.treasury-pill.is-loading .treasury-pill__value { opacity: 0.5; }
@media (max-width: 720px) {
  .treasury-pill__meta { display: none; }
  .treasury-pill { padding: 5px 10px; gap: 8px; }
  .treasury-pill__value { font-size: 18px; }
}

/* Bot Activity pill (header). Clicks through to bots.php. */
.bot-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.bot-pill:hover,
.bot-pill:focus-visible {
  transform: translateY(-1px);
  outline: none;
  text-decoration: none;
}
.bot-pill__label { color: var(--muted); font-size: 10px; }
.bot-pill__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
}
.bot-pill__meta {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.2em;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.bot-pill.is-active {
  border-color: var(--accent);
  background: rgba(142, 224, 107, 0.08);
  color: var(--accent);
}
.bot-pill.is-active .bot-pill__label,
.bot-pill.is-active .bot-pill__meta { color: var(--muted); }
.bot-pill.is-active .status-dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.bot-pill.is-active:hover { border-color: var(--accent); background: rgba(142, 224, 107, 0.14); }
.bot-pill.is-inactive {
  border-color: var(--border);
  color: var(--muted);
}
.bot-pill.is-inactive .status-dot {
  background: var(--muted);
  box-shadow: none;
  animation: none;
}
.bot-pill.is-inactive:hover { border-color: var(--token); color: var(--token); }
.bot-pill.is-loading .bot-pill__status { opacity: 0.6; }
@media (max-width: 720px) {
  .bot-pill__meta { display: none; }
}

/* ---- Bot Activity page (/bots.php) ---- */
.bots-root {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}
.bot-card {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 16px 18px;
}
.bot-card[data-token="nanana"]   { --token: #ffd23f; --token-soft: rgba(255,210,63,.18); }
.bot-card[data-token="nananax"]  { --token: #4dd7ff; --token-soft: rgba(77,215,255,.18); }
.bot-card[data-token="mule"]     { --token: #ff6b6b; --token-soft: rgba(255,107,107,.18); }
.bot-card[data-token="crystite"] { --token: #6ea8ff; --token-soft: rgba(110,168,255,.18); }
.bot-card[data-token="smithore"] { --token: #8ee06b; --token-soft: rgba(142,224,107,.18); }
.bot-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.bot-card__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bot-card__title h2 {
  font-family: "VT323", "JetBrains Mono", monospace;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--token);
  text-shadow: 0 0 12px var(--token-soft);
  margin: 0;
}
.bot-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
.bot-card__addr {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 2px;
  transition: border-color 120ms ease, color 120ms ease;
}
.bot-card__addr:hover { border-color: var(--token); color: var(--token); text-decoration: none; }

.bot-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.bot-status--active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(142, 224, 107, 0.1);
}
.bot-status--active .status-dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.bot-status--inactive { color: var(--muted); }
.bot-status--inactive .status-dot {
  background: var(--muted);
  box-shadow: none;
  animation: none;
}

.bot-table { min-width: 760px; }
.bot-table td, .bot-table th { font-size: 12px; }
.bot-table .right { text-align: right; }

.bot-dir {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--border);
  min-width: 40px;
  text-align: center;
}
.bot-dir--in   { color: var(--accent); border-color: var(--accent); background: rgba(142,224,107,.08); }
.bot-dir--out  { color: var(--danger); border-color: var(--danger); background: rgba(255,107,107,.08); }
.bot-dir--self { color: var(--muted); }

.bot-chip {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--muted);
}
.bot-chip--token { color: var(--token); border-color: var(--token); }
.bot-chip--native { color: var(--muted); }
.bot-chip--error {
  color: var(--danger);
  border-color: var(--danger);
  margin-left: 6px;
}

.bot-amount {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.bot-link {
  color: var(--token);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.bot-link:hover { text-decoration: underline; }

.right { text-align: right; }

.brand__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--token);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 20px;
  text-decoration: none;
  margin-right: 10px;
  transition: border-color 120ms ease, background 120ms ease;
}
.brand__back:hover {
  border-color: var(--token);
  background: var(--token-soft);
  text-decoration: none;
}

/* Scan status pill (LIVE / SCANNING…) */
.scan-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.scan-status__label { color: inherit; }
.scan-status.is-scanning {
  border-color: var(--token);
  color: var(--token);
  background: var(--token-soft);
}
.scan-status.is-scanning .status-dot {
  background: var(--token);
  box-shadow: 0 0 10px var(--token);
  animation: scan-pulse 0.8s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}
/* Cron heartbeat pill — sits next to LIVE, shows Wedos cron+ freshness. */
.scan-status--cron .scan-status__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-left: 1px solid var(--border);
  margin-left: 2px;
  padding-left: 8px;
}
.scan-status.is-healthy {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.scan-status.is-healthy .status-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.scan-status.is-stale {
  border-color: var(--danger, #ff6b6b);
  color: var(--danger, #ff6b6b);
}
.scan-status.is-stale .status-dot {
  background: var(--danger, #ff6b6b);
  box-shadow: 0 0 8px var(--danger, #ff6b6b);
}
.scan-status.is-idle {
  opacity: 0.55;
}
.scan-status.is-idle .status-dot {
  background: var(--muted);
  box-shadow: none;
}

/* Sliding scan bar under the header, visible only while fetching */
.scan-bar {
  position: relative;
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  background: linear-gradient(90deg, transparent 0%, var(--token-soft) 50%, transparent 100%);
  transition: max-height 220ms ease, border-color 220ms ease;
}
.scan-bar.is-scanning {
  max-height: 22px;
  border-top: 1px solid var(--token);
  border-bottom: 1px solid var(--border-soft);
}
.scan-bar__track {
  display: flex;
  white-space: nowrap;
  animation: scan-scroll 9s linear infinite;
  will-change: transform;
}
.scan-bar__text {
  flex: 0 0 auto;
  padding: 3px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--token);
  text-shadow: 0 0 8px var(--token-soft);
}
@keyframes scan-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scan-bar__track { animation: none; }
  .scan-status.is-scanning .status-dot { animation: pulse 2s ease-in-out infinite; }
}

/* --------- Dashboard strip (between top bar + token tabs) --------- */
.dash-strip {
  max-width: 1280px;
  margin: 12px auto 14px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2.4fr minmax(200px, 1.2fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 2px;
  position: relative;
}
.dash-strip::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,210,63,0.02), transparent 60%);
  pointer-events: none;
}

/* ---- Fold toggle + collapsed state ------------------------------------ */
/* The toggle floats above the grid content in the top-right corner and is
   always visible. The collapsed state hides every .dash-strip__cell and
   replaces it with a single-line .dash-strip__mini summary. `max-height`
   drives the transition so expanding/collapsing animates smoothly without
   JS-measured heights. */
.dash-strip__toggle {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.dash-strip__toggle:hover,
.dash-strip__toggle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}
.dash-strip__toggle-chev {
  display: inline-block;
  line-height: 1;
  transition: transform 180ms ease;
}
/* When collapsed: chevron flips 180° so it reads as "expand" (▴). */
.dash-strip.is-collapsed .dash-strip__toggle-chev { transform: rotate(180deg); }

/* The overview grid cells hide when collapsed — use display:none so they
   don't take up grid track space (visibility:hidden would leave the height
   behind and defeat the whole point). */
.dash-strip__mini { display: none; }
.dash-strip.is-collapsed {
  grid-template-columns: 1fr;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 0;
}
.dash-strip.is-collapsed > .dash-strip__cell { display: none; }
.dash-strip.is-collapsed > .dash-strip__mini  { display: flex; }

/* The mini summary — a single-line row with small K/V chips separated by
   thin vertical dashes. Right-padded so the absolute-positioned toggle
   button doesn't overlap the rightmost chip on narrow viewports. */
.dash-strip__mini {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 2px 72px 2px 2px;   /* right pad reserves space for the toggle */
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  min-height: 20px;
}
.dash-strip__mini-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dash-strip__mini-k {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.dash-strip__mini-v {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dash-strip__mini-sep {
  width: 1px;
  height: 12px;
  background: var(--border-soft);
  opacity: 0.6;
}
/* Peg indicator — a tiny dot that inherits the same green/red semantics
   as the full Stable Check row when expanded. */
.dash-strip__mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.55;
}
.dash-strip__mini-item--peg[data-state="stable"] .dash-strip__mini-dot {
  background: #8ee06b;
  opacity: 1;
  box-shadow: 0 0 6px rgba(142, 224, 107, 0.55);
  animation: stable-pulse-green 1.8s ease-in-out infinite;
}
.dash-strip__mini-item--peg[data-state="broken"] .dash-strip__mini-dot {
  background: #e06b6b;
  opacity: 1;
  box-shadow: 0 0 6px rgba(224, 107, 107, 0.55);
  animation: stable-pulse-red 1.2s ease-in-out infinite;
}
.dash-strip__cell {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 10px;
  border-right: 1px dashed var(--border-soft);
  min-width: 0;
  position: relative;
  z-index: 1;
}
.dash-strip__cell:last-child { border-right: none; }
.dash-strip__cell:first-child { padding-left: 0; }
.dash-strip__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
/* Grand-total chip in the strip header ("total $98.28M") — shown inline
   with the LIQUID LIQUIDITY label so the summed backing is legible at a
   glance without mentally adding the four gauge values. */
.dash-strip__total {
  margin-left: auto;
  margin-right: 8px;
  padding: 1px 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 2px;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.dash-strip__scale {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  opacity: 0.7;
  text-transform: none;
}
.dash-strip__value {
  font-family: "VT323", "JetBrains Mono", monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(142,224,107,0.28);
  font-variant-numeric: tabular-nums;
}
.dash-strip__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  opacity: 0.85;
  text-transform: uppercase;
}
/* Secondary stat under the 24h volume — sums unclaimed LP fees across all
   5 team tokens. Sits tight against the meta line so the cell height
   doesn't grow noticeably. */
.dash-strip__sub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
}
.dash-strip__sub-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}
.dash-strip__sub-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* --------- Health Check cell (three stacked sub-rows) --------- */
/* The cell used to be a single big gauge; now it stacks a "Price" bar, a
   "Liquidity" bar, and a "Stable Check" dot. The per-row gauge bars are
   slightly shorter than the LIQUID LIQUIDITY gauges because three rows need
   to fit in the same vertical budget. */
.dash-strip__cell--health { gap: 4px; }
.health-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.health-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.health-row__name {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.9;
}
.health-row__scale {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.7;
}
/* Compact gauge variant for stacked rows. Overrides the .gauge__bar--wide
   height so three of them fit in the same cell height as the old single
   gauge without crowding. */
.dash-strip__cell--health .gauge__bar--wide { height: 12px; }
.dash-strip__cell--health .gauge__value {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  min-width: 58px;
  text-align: right;
}

/* --------- Stable Check dot --------- */
/* A compact peg indicator that says GREEN = both Crystite + Smithore are at
   or above $1, RED = at least one slipped below, GREY = unknown. The dot
   pulses to draw the eye without being noisy. */
.stable-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
}
.stable-check__name {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.stable-check__state {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.stable-check__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: background 200ms ease;
}
/* Stable: green pulse. Uses oklab colour-mix so the glow matches the rest
   of the accent palette (same green as the "LIVE" status dot). */
.stable-check[data-state="stable"] .stable-check__dot {
  background: #8ee06b;
  animation: stable-pulse-green 1.8s ease-in-out infinite;
}
.stable-check[data-state="stable"] .stable-check__state { color: #8ee06b; }

/* Broken: red pulse, slightly faster so it reads as more urgent. */
.stable-check[data-state="broken"] .stable-check__dot {
  background: #e06b6b;
  animation: stable-pulse-red 1.2s ease-in-out infinite;
}
.stable-check[data-state="broken"] .stable-check__state { color: #e06b6b; }

/* Unknown: neutral, no animation — we don't want a grey dot to compete with
   the active indicators elsewhere on the page. */
.stable-check[data-state="unknown"] .stable-check__dot { opacity: 0.55; }

@keyframes stable-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(142, 224, 107, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(142, 224, 107, 0.00); }
}
@keyframes stable-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 107, 107, 0.65); }
  50%      { box-shadow: 0 0 0 6px rgba(224, 107, 107, 0.00); }
}
@media (prefers-reduced-motion: reduce) {
  .stable-check__dot { animation: none !important; }
}

/* Gauge row: 4 mini fuel gauges for NananaX/MULE/Crystite/Smithore */
.gauge-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}

/* Gauge (fuel-gauge style) — shared between strip + LQ cards */
.gauge {
  --fill: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gauge[data-token="nanana"]   { --gauge-accent: #ffd23f; }
.gauge[data-token="nananax"]  { --gauge-accent: #4dd7ff; }
.gauge[data-token="mule"]     { --gauge-accent: #ff6b6b; }
.gauge[data-token="crystite"] { --gauge-accent: #6ea8ff; }
.gauge[data-token="smithore"] { --gauge-accent: #8ee06b; }
.gauge--health                { --gauge-accent: var(--accent); width: 100%; }

/* Full-width gauge row — used by the new Nanana bar beneath LIQUID LIQUIDITY.
   Stretches across the entire strip cell so its visual weight matches that
   of Nanana's status as the "mother token". The bar itself flexes to fill
   the leftover horizontal space between the name label (left) and the
   inline scale + value (right). */
.gauge--wide-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
  width: 100%;
}
.gauge--wide-row .gauge__name {
  flex: 0 0 auto;
  width: auto;
  min-width: 52px;
  font-weight: 700;
}
.gauge--wide-row .gauge__bar { flex: 1 1 auto; }
.gauge--wide-row .gauge__value {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.gauge__scale--inline {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.7;
}
.gauge__name {
  flex: 0 0 auto;
  width: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gauge-accent, var(--muted));
}
.gauge__bar {
  flex: 1 1 auto;
  position: relative;
  height: 12px;
  border: 1px solid var(--border);
  background: #0a0d0a;
  overflow: hidden;
  /* A ::after pseudo-element (declared below) draws a thin pulsing
     white/grey marker at exactly `--fill%` across the bar so you can
     see the current position at a glance — esp. useful once values
     dip near zero or sit in the middle of the red-green gradient. */
  min-width: 40px;
  border-radius: 1px;
}
.gauge__bar--wide { height: 16px; }
/* Red→orange→yellow→green segmented fill, revealed left-to-right by the mask */
.gauge__bar-segments {
  position: absolute; inset: 0;
  background-image: linear-gradient(
    90deg,
    #ff3b3b 0%, #ff3b3b 12%,
    #ff7a1a 26%,
    #ffcb1f 48%,
    #b6e04b 72%,
    #4bd36a 92%, #4bd36a 100%
  );
}
.gauge__bar-mask {
  /* Covers the un-filled portion. We slide from the right as --fill grows. */
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--fill, 0) * 1%);
  right: 0;
  background: rgba(0,0,0,0.78);
  border-left: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 6px rgba(0,0,0,0.8);
  transition: left 600ms cubic-bezier(.2,.6,.2,1);
}
.gauge--empty .gauge__bar-mask { left: 0 !important; }

/* Pulsing "current value" marker — a 2px vertical bar sitting at the exact
   `--fill` position on top of the mask. Low-contrast white/grey so it
   reads against both the coloured gradient and the dark mask without
   fighting either. Animation is subtle (~opacity 0.35→0.85) so it never
   strobes, and transitions `left` in lock-step with the mask so a value
   change animates smoothly. Hidden entirely on empty/placeholder gauges. */
.gauge__bar::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(var(--fill, 0) * 1%);
  width: 2px;
  margin-left: -1px;                 /* centre the 2px tick on the fill edge */
  background: rgba(240, 240, 240, 0.82);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 2;
  transition: left 600ms cubic-bezier(.2, .6, .2, 1);
  animation: gauge-tick-pulse 1.6s ease-in-out infinite;
}
.gauge--empty .gauge__bar::after,
.gauge--placeholder .gauge__bar::after { display: none; }
@keyframes gauge-tick-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.30; }
}
@media (prefers-reduced-motion: reduce) {
  .gauge__bar::after { animation: none; opacity: 0.65; }
}
.gauge__value {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.gauge--placeholder .gauge__value { color: var(--muted); opacity: 0.6; }
.gauge__scale {
  margin-left: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  opacity: 0.7;
}
.gauge--card { margin-top: 10px; }

/* KPI delta badge (24h change). Rendered below the big KPI number. */
.kpi__delta {
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi__delta--up    { color: #8ee06b; }
.kpi__delta--down  { color: #ff6b6b; }
.kpi__delta--flat  { color: var(--muted); opacity: 0.7; }

/* LQ tab layout */
.lq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.lq-card {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.lq-card[data-token="nanana"]   { border-left: 3px solid #ffd23f; }
.lq-card[data-token="nananax"]  { border-left: 3px solid #4dd7ff; }
.lq-card[data-token="mule"]     { border-left: 3px solid #ff6b6b; }
.lq-card[data-token="crystite"] { border-left: 3px solid #6ea8ff; }
.lq-card[data-token="smithore"] { border-left: 3px solid #8ee06b; }
.lq-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.lq-card__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "VT323", "JetBrains Mono", monospace;
  font-size: 22px;
  color: var(--foreground);
}
.lq-card__title .chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 1px 6px;
}
.lq-card__total {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Team-cross pool rows — shown for transparency, de-emphasised so the real
   liquid backing dominates visually. */
.lq-card tr.row--internal td { opacity: 0.55; }
.lq-card tr.row--internal .pair { font-style: italic; }
/* Excluded counterparty rows (TANG / CREAM / MILK): same muted treatment as
   internal team-cross rows, but slightly less dimmed so the operator can
   still read the pool name clearly when auditing why something was left
   out of the totals. */
.lq-card tr.row--excluded td { opacity: 0.65; }
.lq-card tr.row--excluded .pair { font-style: italic; }
.badge.badge--muted {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  font-size: 9px;
  letter-spacing: 0.14em;
  margin-left: 4px;
}

@media (max-width: 960px) {
  .dash-strip { grid-template-columns: 1fr; gap: 14px; }
  .dash-strip__cell { border-right: none; border-bottom: 1px dashed var(--border-soft); padding: 0 0 12px; }
  .dash-strip__cell:last-child { border-bottom: none; padding-bottom: 0; }
  .dash-strip__value { font-size: 26px; }
  .gauge-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gauge__name { width: 28px; font-size: 8px; }
  .gauge__value { min-width: 42px; font-size: 10px; }
}

/* --------- Token selector bar --------- */
.token-selector-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 14px;
}
.token-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 4px;
}
.token-btn {
  flex: 1 1 auto;
  min-width: 110px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.token-btn:hover {
  color: var(--foreground);
  background: rgba(255,255,255,0.02);
  border-color: var(--border-soft);
}
.token-btn.is-active {
  color: var(--primary-ink);
  background: var(--token);
  border-color: var(--token);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.token-btn__name {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.token-btn__sym {
  font-size: 10px;
  opacity: 0.75;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.token-btn.is-active .token-btn__sym { opacity: 0.85; }

.token-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.token-dot--nanana   { background: #ffd23f; }
.token-dot--nananax  { background: #4dd7ff; }
.token-dot--mule     { background: #ff6b6b; }
.token-dot--crystite { background: #6ea8ff; }
.token-dot--smithore { background: #8ee06b; }

/* --------- Layout: Main --------- */
.site-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 80px;
  position: relative;
  z-index: 2;
}

/* --------- Tabs --------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 2px solid var(--border);
  background: var(--surface);
  margin-bottom: 20px;
}
.tab-btn {
  flex: 1 1 0;
  /* 90px here instead of 120px — we went from 5 tabs to 6 with shorter
     labels (DexScr. / GeckoTr. / On-Chain / LQ / APR / Δ) and need them to
     fit on one line without wrapping on ~1100px viewports. */
  min-width: 90px;
  padding: 12px 14px;
  font-family: "VT323", "JetBrains Mono", monospace;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-soft);
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color 120ms ease, background 120ms ease;
}
.tab-btn:last-child { border-right: none; }
.tab-btn:hover { color: var(--foreground); background: rgba(255,210,63,0.04); }
.tab-btn.is-active {
  color: var(--token);
  background: var(--surface-2);
}
.tab-btn.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: var(--token);
  box-shadow: 0 0 12px var(--token);
}

/* Panels: only active shows */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ===================== Δ (composition) tab ============================== */
/* Two-column grid of per-token composition cards on wide viewports, single
   column on tablet/mobile. The card itself is a standard .section-style
   surface but with a left border colored per token for quick scanning. */
.delta-intro {
  margin-bottom: 14px;
}
.delta-intro .tab-title {
  margin: 0 0 4px 0;
  font-family: "VT323", "JetBrains Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* Warming-state banner, shown when api/delta.php ships a `_healthy:false`
   placeholder with a `_notice` string (cron hasn't populated the cache
   yet). Amber palette + pulsing dot distinguishes it from a hard error:
   "Failed to load" is red, "building" is amber, "stale data" would be
   muted. Intentionally non-alarming — the skeleton cards below are
   doing the heavy lifting of communicating "data is coming". */
.delta-warming {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--warning) 35%, transparent);
  border-radius: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--warning);
  letter-spacing: 0.04em;
}
.delta-warming__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  flex: 0 0 auto;
  animation: delta-warming-pulse 1.6s ease-in-out infinite;
}
@keyframes delta-warming-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .delta-warming__dot { animation: none; }
}
.delta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1180px) {
  .delta-grid { grid-template-columns: 1fr 1fr; }
}

.delta-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border-soft);
  padding: 14px 16px 10px 16px;
  /* Grid children default to min-width: auto (= content width), so the
     inner breakdown table was pushing each card wider than its 1fr share
     and bleeding past the viewport on the right. Forcing min-width: 0
     lets the cell honor the grid track; any leftover horizontal overflow
     is absorbed by the .table-wrap's own scroll. */
  min-width: 0;
  /* Belt-and-braces: don't leak any descendant (e.g. a long number) out
     of the card if table-wrap ever fails to contain it. */
  overflow: hidden;
}
.delta-card[data-token="nananax"]  { border-left-color: #4dd7ff; }
.delta-card[data-token="mule"]     { border-left-color: #ff6b6b; }
.delta-card[data-token="crystite"] { border-left-color: #6ea8ff; }
.delta-card[data-token="smithore"] { border-left-color: #8ee06b; }

/* Card header: token name on the left, big weighted-basket number on the right. */
.delta-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
  margin-bottom: 12px;
}
.delta-card__name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.delta-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.delta-card__name {
  margin: 0;
  font-family: "VT323", "JetBrains Mono", monospace;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--foreground);
}
.delta-card__symbol {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Weighted 24h number — the single most-scannable thing on the card.
   Color-coded via the --accent / --danger semantic tokens with a soft glow
   so it reads like a status indicator, not just another stat. */
.delta-card__weighted {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  flex: 0 0 auto;
}
.delta-card__weighted-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.delta-card__weighted-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.delta-card__weighted--accent .delta-card__weighted-value {
  color: #8ee06b;
  text-shadow: 0 0 12px rgba(142, 224, 107, 0.35);
}
.delta-card__weighted--danger .delta-card__weighted-value {
  color: #e06b6b;
  text-shadow: 0 0 12px rgba(224, 107, 107, 0.35);
}
.delta-card__weighted--muted .delta-card__weighted-value {
  color: var(--muted);
}

/* KPI strip below the header — 4 tiny stats stacked in a flex row that
   wraps onto 2 rows on narrow screens. */
.delta-card__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 12px;
}
.delta-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}
.delta-kpi__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.delta-kpi__v {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.delta-kpi__d {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.delta-kpi__d.accent { color: #8ee06b; }
.delta-kpi__d.danger { color: #e06b6b; }

/* The .table-wrap inside a Δ card gets its own horizontal scroll so wide
   breakdown tables (many counterparties + 6 columns) don't try to stretch
   the parent card. Paired with .delta-card { min-width: 0 } above this is
   what keeps the 2-up grid tidy on ~1200-1400px viewports. */
.delta-card .table-wrap {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
}

/* Breakdown table: inherits .data-table base styles. Tightened horizontal
   padding + smaller font so all 6 columns fit in a ~560px-wide card on
   desktop without triggering scroll; nowrap on cells so numbers never
   break into two lines and pretend to be taller. */
.delta-table {
  width: 100%;
  table-layout: auto;
}
.delta-table th,
.delta-table td {
  padding: 6px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.delta-table .accent { color: #8ee06b; }
.delta-table .danger { color: #e06b6b; }

/* At narrow viewports the tab nav was already scrollable via overflow:auto
   elsewhere; nothing to change here for Δ. */

/* --------- Sections inside tab panels --------- */
.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-head h2 { margin-bottom: 4px; }
.section-head p  { color: var(--muted); font-size: 12px; }

.section-sub {
  font-family: "VT323", monospace;
  font-size: 16px;
  color: var(--foreground);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* --------- KPIs (stat cards) --------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kpi {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--border);
}
.kpi--primary::before { background: var(--primary); }
.kpi--accent::before  { background: var(--accent); }
.kpi--danger::before  { background: var(--danger); }

.kpi__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi__value {
  font-family: "VT323", "JetBrains Mono", monospace;
  font-size: 24px;
  color: var(--foreground);
  line-height: 1;
}
.kpi--primary .kpi__value { color: var(--primary); text-shadow: 0 0 10px rgba(255,210,63,0.3); }
.kpi--accent  .kpi__value { color: var(--accent);  text-shadow: 0 0 10px rgba(142,224,107,0.3); }
.kpi--danger  .kpi__value { color: var(--danger); }

/* --------- Tables --------- */
.table-wrap {
  border: 2px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}
.table-wrap--scroll {
  max-height: 360px;
  overflow-y: auto;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.table-wrap th,
.table-wrap td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  vertical-align: middle;
}
.table-wrap thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 2px solid var(--border);
  z-index: 1;
}
.table-wrap tbody tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover { background: rgba(255,210,63,0.03); }

.table-wrap .num { text-align: right; font-family: "JetBrains Mono", monospace; }

/* Pair / chip / badges */
.pair {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--foreground);
}
.chip {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.badge {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
}
.badge--buy  { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.badge--sell { color: var(--danger); border-color: var(--danger); background: rgba(255,107,107,0.12); }

/* --------- Wallet banner / empty / loading --------- */
.wallet-banner {
  border: 2px dashed var(--border);
  padding: 10px 14px;
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wallet-banner .mono { color: var(--foreground); }

.empty,
.loading {
  border: 2px dashed var(--border);
  padding: 24px 16px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
}
.loading {
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --------- Footer --------- */
.site-footer {
  max-width: 1280px;
  margin: 40px auto 0;
  padding: 20px;
  border-top: 2px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* --------- Responsive tweaks --------- */
@media (max-width: 640px) {
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }
  .site-header__inner { padding: 14px 14px 10px; }
  .token-selector-wrap { padding: 0 14px 10px; }
  .site-main { padding: 16px 14px 60px; }
  .tab-btn { font-size: 13px; padding: 10px 12px; min-width: 0; }
  .kpi__value { font-size: 20px; }
}