/* F&G Timeline styles */
.fng-timeline {
  width: 100%;
  min-height: 24px;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  margin: 12px auto 0 auto;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.fng-timeline-bar {
  width: 16px;
  border-radius: 3px 3px 0 0;
  background: var(--timeline-bar-bg, #eab308);
  opacity: 0.92;
  transition: height 0.3s, background 0.3s;
}
.fng-timeline-bar.fear { background: #ef4444; }
.fng-timeline-bar.neutral { background: #eab308; }
.fng-timeline-bar.greed { background: #22c55e; }
.fng-timeline-bar.extreme-fear { background: #b91c1c; }
.fng-timeline-bar.extreme-greed { background: #16a34a; }
.fng-timeline-bar.current {
  box-shadow: 0 0 0 2px #fff2, 0 0 4px #fff6;
  opacity: 1;
}

/* Simple loader overlay styles */
/* Matrix terminal boot styles */
.terminal-boot {
  position: fixed;
  inset: 0;
  background: rgba(5,8,12,0.98);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, visibility 0.3s;
}
.matrix-glitch-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(10,14,18,0.92);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease-in-out;
}
.matrix-glitch-overlay.active {
  display: flex;
  opacity: 1;
}
.matrix-glitch-code {
  font-family: 'Fira Mono', 'Courier New', monospace;
  /* Slightly smaller by default for less visual dominance */
  font-size: clamp(12px, 1.8vw, 22px);
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px #22c55e, 0 0 2px #fff;
  user-select: none;
  white-space: pre;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 1100px; /* match dashboard width, broad across the dashboard */
  text-align: center;
}
.matrix-glitch-code > span { display: flex; justify-content: center; gap: .06em; white-space: nowrap; overflow: hidden; }
.matrix-glitch-code > span > span { display: inline-block; }
.terminal-boot.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.terminal-content {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 1.18rem;
  color: #22c55e;
  background: rgba(0,0,0,0.7);
  border-radius: 8px;
  padding: 32px 38px 24px 38px;
  box-shadow: 0 2px 16px #000a;
  min-width: 320px;
  text-align: left;
  position: relative;
}
.terminal-line {
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 6px;
}
.terminal-line.visible {
  opacity: 1;
}
.terminal-cursor {
  color: #fff;
  font-weight: bold;
  font-size: 1.1em;
  margin-left: 2px;
  animation: blink-cursor 1.1s steps(2) infinite;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* Matrix Terminal Boot Overlay */
.terminal-boot {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease-out;
}
.terminal-boot.fade-out {
  opacity: 0;
  pointer-events: none;
}
.terminal-boot.hidden {
  display: none;
}
.terminal-content {
  font-family: 'Courier New', monospace;
  font-size: clamp(14px, 3vw, 18px);
  color: #22c55e;
  text-align: left;
  line-height: 1.8;
}
.terminal-line {
  opacity: 0;
  white-space: nowrap;
}
.terminal-line.visible {
  opacity: 1;
}
.terminal-cursor {
  display: inline-block;
  animation: blink-cursor 0.7s infinite;
  margin-left: 2px;
}
@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.pill-value.light-bg,
.pill-value.skeleton-text.light-bg {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-weight: 800 !important;
}
#bgToggleBtn,
#soundToggleBtn {
  position: fixed;
  top: 18px;
  z-index: 200;
  background: var(--surface);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px #0002;
  border: 1px solid var(--border);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  outline: none;
  user-select: none;
  pointer-events: auto;
}
#bgToggleBtn {
  right: 18px;
}
#soundToggleBtn {
  right: 62px;
}
@media (max-width: 700px) {
  #bgToggleBtn {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }
  #soundToggleBtn {
    top: 12px;
    right: 54px;
    width: 34px;
    height: 34px;
  }
  #soundToggleBtn #soundMusicNote {
    font-size: 16px;
  }
  /* Hide SVG icons on mobile */
  #soundOnIcon,
  #soundOffIcon {
    display: none !important;
  }
  /* Show music note */
  #soundMusicNote {
    display: inline !important;
  }
}

@keyframes halving-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes price-pill-pulse-up {
  0%, 100% {
    box-shadow: inset 0 0 16px rgba(16,185,129,0.15);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 30px rgba(16,185,129,0.3), 0 0 25px rgba(16,185,129,0.25);
    transform: scale(1.015);
  }
}

@keyframes price-pill-pulse-down {
  0%, 100% {
    box-shadow: inset 0 0 16px rgba(244,63,94,0.15);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 30px rgba(244,63,94,0.3), 0 0 25px rgba(244,63,94,0.25);
    transform: scale(1.015);
  }
}

/* Socials & Useful Links Table: More padding for cells */
table.socials-useful-table td, table.socials-useful-table th {
  padding: 10px 12px;
}
/* Links are always green, even when visited */
a,
a:visited {
  color: rgba(34, 197, 94, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* ---- Dark UI + Fluid Design System ---- */
:root {
  --bg: #0a0e12;
  --surface: #111318;
  --border: rgba(255,255,255,0.08);
  --text: #e8eaed;
  --text-muted: #9ca3af;
  --brand: #ff6b35;
  --accent: #22c55e;
  --accent-dim: #16a34a;
  --glow: rgba(34,197,94,0.15);
  --space-xs: clamp(4px, 1vw, 8px);
  --space-sm: clamp(8px, 2vw, 12px);
  --space-md: clamp(12px, 2.5vw, 16px);
  --space-lg: clamp(16px, 3vw, 20px);
  --space-xl: clamp(20px, 4vw, 40px);
  --text-xs: clamp(0.6rem, 1.5vw, 0.7rem);
  --text-sm: clamp(0.7rem, 1.8vw, 0.85rem);
  --text-base: clamp(0.8rem, 2vw, 1rem);
  --text-lg: clamp(0.95rem, 2.5vw, 1.15rem);
  --text-xl: clamp(1rem, 2.8vw, 1.25rem);
  --text-2xl: clamp(1.15rem, 3.5vw, 1.6rem);
  --icon-sm: clamp(28px, 6vw, 40px);
  --badge-size: clamp(14px, 3vw, 18px);
  --pill-padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
  --card-padding: clamp(10px, 2.5vw, 16px);
  --gap-sm: clamp(6px, 1.5vw, 10px);
  --gap-md: clamp(8px, 2vw, 12px);
  --gap-lg: clamp(12px, 2.5vw, 16px);
}

*, *::before, *::after { box-sizing: border-box; }
html { text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---- Holiday: Simple Snowfall Effect ---- */
#snowfall {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997; /* just under terminal overlay (9999) */
  overflow: hidden;
}
.snowflake {
  position: absolute;
  top: -10vh;
  color: #fff;
  will-change: transform, opacity;
  opacity: 0.9;
  user-select: none;
  -webkit-user-select: none;
  animation-name: fall, spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.snowflake::before {
  content: '❄';
  display: inline-block;
  transform: translateZ(0);
}
@keyframes fall {
  to { transform: translateY(120vh); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Larger flakes styling */
.snowflake.large {
  font-size: 28px;
  opacity: 0.9;
  text-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* Improve visibility in light mode: use a darker blue snow glyph for better contrast */
@media (prefers-color-scheme: light) {
  .snowflake {
    /* Dark Blue for light mode */
    color: rgba(43,109,246,0.96); /* #2b6df6 */
    text-shadow: 0 0 8px rgba(43,109,246,0.35), 0 0 2px rgba(43,109,246,0.18);
  }
  .snowflake.large {
    color: rgba(82,144,255,0.96); /* #5290ff */
    text-shadow: 0 0 10px rgba(82,144,255,0.36), 0 0 2px rgba(82,144,255,0.22);
  }
  .snowflake::before { filter: drop-shadow(0 1px 0 rgba(43,109,246,0.18)); }
}

/* Also support toggled Light Mode via `.light-bg` on the body (explicit theme switch).
   This mirrors the `prefers-color-scheme: light` styles but applies when the app
   switches theme via JS toggling `body.light-bg` (more reliable for user toggles). */
body.light-bg .snowflake {
  /* Use a darker blue for Light Mode toggles (consistent with prefers-color-scheme) */
  color: rgba(43,109,246,0.96); /* #2b6df6 */
  text-shadow: 0 0 8px rgba(43,109,246,0.35), 0 0 2px rgba(43,109,246,0.18);
}
body.light-bg .snowflake.large {
  color: rgba(82,144,255,0.96); /* #5290ff */
  text-shadow: 0 0 10px rgba(82,144,255,0.36), 0 0 2px rgba(82,144,255,0.22);
}
body.light-bg .snowflake::before { filter: drop-shadow(0 2px 0 rgba(43,109,246,0.18)); }

/* Reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .snowflake { animation: none; opacity: 0.85; }
}

/* Mobile tuning: fewer/ smaller flakes */
@media (max-width: 420px) {
  .snowflake { font-size: 10px !important; opacity: 0.85 !important; }
}

/* End Snowfall */

/* ---- Holiday: NYE Sparkles ---- */
#nye-sparkles {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 30vh; /* keep sparkles near top */
  pointer-events: none;
  z-index: 9998; /* above snowfall, under terminal */
  overflow: visible;
}
.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd700 60%);
  box-shadow: 0 0 8px rgba(255,215,0,0.9), 0 0 18px rgba(255,215,0,0.12);
  opacity: 0;
  will-change: transform, opacity;
  animation: sparkle-pop 900ms ease-out forwards;
}
@keyframes sparkle-pop {
  0% { transform: scale(0.0) translateY(0); opacity: 0; }
  30% { transform: scale(1.2) translateY(-6px); opacity: 1; }
  100% { transform: scale(0.6) translateY(-40px); opacity: 0; }
}

/* fewer sparkles and smaller on very small screens */
@media (max-width: 420px) {
  .sparkle { width: 6px; height: 6px; box-shadow: 0 0 6px rgba(255,215,0,0.85); }
  #nye-sparkles { height: 22vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none !important; opacity: 0.9 !important; transform: none !important; }
}

/* End NYE Sparkles */

/* ---- NYE Confetti ---- */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996; /* below sparkles */
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  will-change: transform, opacity;
  opacity: 0.95;
  transform-origin: center;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-6vh) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg) translateX(30px); opacity: 0; }
}

/* ---- NYE Rockets ---- */
#rockets {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999; /* above everything except terminal */
}
.rocket {
  position: absolute;
  font-size: 18px;
  transform-origin: center bottom;
  will-change: transform, opacity;
  animation: rocket-launch 1400ms ease-in forwards;
  text-shadow: 0 0 6px rgba(255,160,40,0.9);
}
@keyframes rocket-launch {
  0% { transform: translateY(0) scale(1) rotate(-6deg); opacity: 1; }
  60% { transform: translateY(-60vh) scale(1.05) rotate(6deg); opacity: 1; }
  100% { transform: translateY(-120vh) scale(0.9) rotate(12deg); opacity: 0; }
}

@media (max-width: 420px) {
  .rocket { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-piece, .rocket { animation: none !important; opacity: 0.9 !important; }
}

/* End confetti & rockets */

/* ---- Header: Logo at the top, pills below, always centered ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 18, 0.95);
  border-bottom: 1px solid var(--border);
  padding-top: 12px;
  padding-bottom: 12px;
  animation: fadeInUp 0.6s ease-out;
}

/* Max Supply Terminal Badge - Matrix style */
#maxSupplyTerminal {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 150;
  pointer-events: none;
  user-select: none;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-weight: 500;
  font-size: clamp(10px, 1.8vw, 14px);
  color: #22c55e;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 4px rgba(34, 197, 94, 0.7),
    0 0 10px rgba(34, 197, 94, 0.5),
    0 0 20px rgba(34, 197, 94, 0.3);
  opacity: 0.9;
  animation: matrixGlow 4s ease-in-out infinite, matrixFlicker 8s step-end infinite;
}
/* Subtle glow pulse */
@keyframes matrixGlow {
  0%, 100% {
    text-shadow: 0 0 4px rgba(34,197,94,0.7), 0 0 10px rgba(34,197,94,0.5), 0 0 20px rgba(34,197,94,0.3);
    filter: brightness(1);
  }
  50% {
    text-shadow: 0 0 8px rgba(34,197,94,0.9), 0 0 16px rgba(34,197,94,0.7), 0 0 30px rgba(34,197,94,0.4);
    filter: brightness(1.1);
  }
}
/* Occasional flicker like old CRT */
@keyframes matrixFlicker {
  0%, 97%, 100% { opacity: 0.9; }
  97.5% { opacity: 0.7; }
  98% { opacity: 0.95; }
  98.5% { opacity: 0.75; }
  99% { opacity: 0.9; }
}
@media (max-width: 700px) {
  #maxSupplyTerminal {
    left: 6px;
    top: 6px;
    font-size: 8px;
    opacity: 0.6;
    letter-spacing: 0.04em;
  }
}
@media (min-width: 1200px) {
  #maxSupplyTerminal {
    font-size: 15px;
    letter-spacing: 0.1em;
  }
}
body.light-bg #maxSupplyTerminal {
  color: #15803d;
  text-shadow:
    0 0 4px rgba(21, 128, 61, 0.6),
    0 0 10px rgba(21, 128, 61, 0.4);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.logo-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pills-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
  justify-content: center;
  width: 100%;
}

.halving-pill,
.price-pill {
  min-width: 160px;
  flex-shrink: 1;
  border-radius: 999px;
  box-shadow: 0 2px 8px 0 rgba(34,197,94,0.08) inset, 0 1px 8px 0 rgba(0,0,0,0.08);
  background: linear-gradient(135deg, rgba(34,197,94,0.08) 0%, rgba(34,197,94,0.03) 100%);
}

/* Pills mobile optimization */
@media (max-width: 480px) {
  .pills-row {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  /* Smaller date on mobile instead of hiding */
  .halving-date-row {
    font-size: 0.52em;
  }
}

@media (max-width: 400px) {
  .pills-row {
    gap: 5px;
  }
  .halving-pill,
  .price-pill {
    min-width: 120px;
    font-size: 0.88em;
    padding: 4px 8px;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.brand-mark {
  flex-shrink: 0;
  width: clamp(20px, 4vw, 22px);
  height: clamp(20px, 4vw, 22px);
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.logo-subtitle {
  font-size: var(--text-xs);
  font-weight: 400;
  /* Use muted text color by default so it remains readable in Dark Mode.
     Light Mode overrides will set this darker where needed. */
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.price-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 10px);
  /* Independent from stat-card CSS variables */
  padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 22px);
  background: linear-gradient(135deg, rgba(14,165,255,0.08), rgba(14,165,255,0.02));
  border: 1px solid rgba(14,165,255,0.45);
  border-radius: 22px;
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  font-weight: 800;
  color: var(--text);
  transition: box-shadow 0.3s ease;
  white-space: nowrap;
  cursor: help;
  position: relative;
}

/* [pill me] stays centered below the pill content */
.price-pill .pill-tap-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
}

/* Currency toggle button in price pill */
.pill-currency-toggle {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: #aaa;
  font-size: 0.8em;
  font-weight: 700;
  padding: 3px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pill-currency-toggle:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.pill-currency-toggle.active {
  background: rgba(34,197,94,0.35);
  border-color: rgba(34,197,94,0.6);
  color: #22c55e;
}
/* Light Mode: currency toggle */
.pill-currency-toggle.light-bg {
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.25);
  color: #555;
}
.pill-currency-toggle.light-bg:hover {
  background: rgba(0,0,0,0.15);
  color: #222;
}
.pill-currency-toggle.light-bg.active {
  background: rgba(22,163,74,0.2);
  border-color: rgba(22,163,74,0.5);
  color: #16a34a;
}

/* Mobile: compact currency toggle */
@media (max-width: 480px) {
  .pill-currency-toggle {
    padding: 2px 4px;
    font-size: 0.75em;
  }
  .price-pill {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 155px;
  }
  .price-pill .price-change {
    font-size: 0.8em;
  }
}

/* Subtle [pill me] hint for tooltip discovery */
.pill-tap-hint {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: lowercase;
  opacity: 0.4;
  color: inherit;
  pointer-events: none;
  white-space: nowrap;
}
.price-pill:hover .pill-tap-hint,
.halving-pill:hover .pill-tap-hint {
  opacity: 0.6;
}

/* Ensure pill-tap-hint is truly centered in price-pill */
.price-pill .pill-tap-hint {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.price-pill#taoPricePill {
  background: linear-gradient(135deg, rgba(14,165,255,0.1), rgba(14,165,255,0.02));
  border-color: rgba(14,165,255,0.5);
}

/* Price pill confidence-style accent based on 24h change */
#taoPricePill.price-up {
  box-shadow: inset 0 0 18px rgba(16,185,129,0.2);
  border-right: 4px solid #10b981;
  animation: price-pill-pulse-up 6.5s ease-in-out infinite;
}

#taoPricePill.price-down {
  box-shadow: inset 0 0 18px rgba(244,63,94,0.2);
  border-right: 4px solid #f43f5e;
  animation: price-pill-pulse-down 6.5s ease-in-out infinite;
}

#taoPricePill.price-neutral {
  box-shadow: inset 0 0 18px rgba(148,163,184,0.15);
  border-right: 4px solid #94a3b8;
  animation: price-pill-pulse-neutral 6.5s ease-in-out infinite;
}

@keyframes price-pill-pulse-neutral {
  0%, 100% { box-shadow: inset 0 0 18px rgba(148,163,184,0.15); }
  50% { box-shadow: inset 0 0 24px rgba(148,163,184,0.25); }
}

.price-change {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.price-change.positive {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);

}

.price-change.negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);

}

/* 7d price change in pill */
.price-change-7d {
  font-size: 0.7em;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}
.price-change-7d.positive {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}
.price-change-7d.negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}
.price-change-7d.neutral {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.15);
}

/* Generic positive/negative color classes */
.positive {
  color: #22c55e;
}
.negative {
  color: #ef4444;
}

.price-icon {
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-icon.tao-logo {
  margin-right: 4px;
}

.price-icon.tao-logo svg {
  width: 26px;
  height: 26px;
}

.skeleton-text {
  display: inline-block;
  min-width: 75px;
  height: 1em;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 200% 100%;
  animation: skeleton 2.5s ease-in-out infinite;
  border-radius: 4px;
}

.chart-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton 3.5s ease-in-out infinite;
  border-radius: 8px;
  opacity: 0.6;
}

@keyframes skeleton {
  0% { 
    background-position: 200% 0;
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% { 
    background-position: -200% 0;
    opacity: 0.6;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Volume Signal Glow Animations - uses outline for clean glow effect */
.stat-card.blink-green,
.stat-card.blink-red,
.stat-card.blink-yellow,
.stat-card.blink-orange,
.stat-card.blink-white {
  outline: none;
  outline-offset: 0px;
  /* Force default border - same as other stat-cards - GRAY not green! */
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Light mode: keep gray border */
.stat-card.blink-green.light-bg,
.stat-card.blink-red.light-bg,
.stat-card.blink-yellow.light-bg,
.stat-card.blink-orange.light-bg,
.stat-card.blink-white.light-bg {
  border: 1px solid #c0c0c0 !important;
}

.stat-card.blink-green {
  animation: glow-green 6s ease-in-out infinite;
}

.stat-card.blink-red {
  animation: glow-red 6s ease-in-out infinite;
}

.stat-card.blink-yellow {
  animation: glow-yellow 6s ease-in-out infinite;
}

.stat-card.blink-orange {
  animation: glow-orange 6s ease-in-out infinite;
}

.stat-card.blink-white {
  animation: glow-white 6s ease-in-out infinite;
}

@keyframes glow-green {
  0%, 100% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.25), 0 0 30px rgba(34, 197, 94, 0.1), 0 4px 12px rgba(0,0,0,0.2); }
  50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.6), 0 0 50px rgba(34, 197, 94, 0.25), 0 4px 12px rgba(0,0,0,0.2); }
}

@keyframes glow-red {
  0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.25), 0 0 30px rgba(239, 68, 68, 0.1), 0 4px 12px rgba(0,0,0,0.2); }
  50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), 0 0 50px rgba(239, 68, 68, 0.25), 0 4px 12px rgba(0,0,0,0.2); }
}

@keyframes glow-yellow {
  0%, 100% { box-shadow: 0 0 15px rgba(234, 179, 8, 0.25), 0 0 30px rgba(234, 179, 8, 0.1), 0 4px 12px rgba(0,0,0,0.2); }
  50% { box-shadow: 0 0 30px rgba(234, 179, 8, 0.6), 0 0 50px rgba(234, 179, 8, 0.25), 0 4px 12px rgba(0,0,0,0.2); }
}

@keyframes glow-orange {
  0%, 100% { box-shadow: 0 0 15px rgba(249, 115, 22, 0.25), 0 0 30px rgba(249, 115, 22, 0.1), 0 4px 12px rgba(0,0,0,0.2); }
  50% { box-shadow: 0 0 30px rgba(249, 115, 22, 0.6), 0 0 50px rgba(249, 115, 22, 0.25), 0 4px 12px rgba(0,0,0,0.2); }
}

@keyframes glow-white {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.12), 0 0 20px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0,0,0,0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.25), 0 0 35px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0,0,0,0.2); }
}

/* Ensure signal cards keep normal border on hover (no green tint) */
/* The animation handles the glow via box-shadow, so don't override it here */
.stat-card.blink-green:hover,
.stat-card.blink-red:hover,
.stat-card.blink-yellow:hover,
.stat-card.blink-orange:hover,
.stat-card.blink-white:hover {
  border-color: rgba(255,255,255,0.1) !important;
  /* Don't set box-shadow here - let the animation control it */
}

/* Also disable the green ::before gradient on signal cards */
.stat-card.blink-green::before,
.stat-card.blink-red::before,
.stat-card.blink-yellow::before,
.stat-card.blink-orange::before,
.stat-card.blink-white::before {
  display: none !important;
}

/* Fear & Greed stat-card color variants (subtle, light tints for small cards) */
.stat-card.fng-red {
  background: linear-gradient(180deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02));
  border: 1px solid rgba(239,68,68,0.14);
}
.stat-card.fng-red .stat-value {
  color: #ef4444; /* red */
}

.stat-card.fng-yellow {
  background: linear-gradient(180deg, rgba(234,179,8,0.06), rgba(234,179,8,0.02));
  border: 1px solid rgba(234,179,8,0.14);
}
.stat-card.fng-yellow .stat-value {
  color: #eab308; /* yellow */
}

.stat-card.fng-green {
  background: linear-gradient(180deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02));
  border: 1px solid rgba(34,197,94,0.14);
}
.stat-card.fng-green .stat-value {
  color: #22c55e; /* green */
}

/* F&G Card styling */
.fng-card {
  border-radius: 8px;
  position: relative;
  /* Use true black to avoid perceived brightness differences across devices */
  background: #000000 !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(34,197,94,0.15);
  min-height: 120px;
  width: 100%;
}

/* Light mode */
body.light-bg .fng-card {
  background: #ffffff !important;
}

.fng-card .fng-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 20px 8px 20px;
  overflow: visible;
  position: relative;
  z-index: 1;
  min-height: 120px;
  /* match the card background exactly to avoid a visible inner panel */
  background: #000000;
}

body.light-bg .fng-card .fng-card-body {
  background: #ffffff;
}

/* Matrix Easter Egg */
.matrix-quote {
  position: absolute;
  bottom: 8px;
  left: 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  color: #00ff41;
  opacity: 0.25;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
  letter-spacing: 0.05em;
  z-index: 10;
  animation: matrixGlitch 8s ease-in-out infinite;
}

body.light-bg .matrix-quote {
  color: #00cc33;
  opacity: 0.35;
  text-shadow: 0 0 6px rgba(0, 204, 51, 0.4);
}

/* F&G timeline text: console / matrix-style and slightly smaller */
#fngTimelineText,
.fng-timeline-text {
  font-family: ui-monospace, 'Fira Mono', 'Courier New', monospace;
  font-size: 0.9rem; /* slightly smaller */
  color: var(--text-muted);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  opacity: 0.95;
}

/* Slightly darker muted text for Light Mode so it remains readable */
body.light-bg #fngTimelineText,
body.light-bg .fng-timeline-text {
  color: #6b7280; /* slate-500 */
}

@media (max-width: 900px) {
  #fngTimelineText, .fng-timeline-text { font-size: 0.82rem; }
}

@media (max-width: 420px) {
  #fngTimelineText, .fng-timeline-text { font-size: 0.78rem; }
}

@keyframes matrixGlitch {
  0%, 90%, 100% { opacity: 0.25; }
  93%, 96% { opacity: 0.5; }
  94%, 97% { opacity: 0.1; }
}

/* Place the Matrix quote in the F&G card header to avoid overlapping the timeline */
.fng-card .matrix-quote {
  bottom: auto;
  top: 6px;
  left: 12px;
  font-size: 0.68rem;
  opacity: 0.45;
  z-index: 25;
  text-shadow: 0 0 6px rgba(0,255,65,0.28);
}

body.light-bg .fng-card .matrix-quote {
  color: #00cc33;
  opacity: 0.5;
  text-shadow: 0 0 4px rgba(0,204,51,0.18);
}

body.light-bg .matrix-quote {
  animation: matrixGlitchLight 8s ease-in-out infinite;
}

@keyframes matrixGlitchLight {
  0%, 90%, 100% { opacity: 0.35; }
  93%, 96% { opacity: 0.6; }
  94%, 97% { opacity: 0.15; }
}

/* Spoon Gauge */
.fng-spoon-bg {
  position: absolute;
  width: 60%;
  height: 85%;
  object-fit: contain;
  object-position: center center;
  /* centered vertically for better balance */
  top: 0;
  left: 50%;
  transform: translateX(-33%);
  /* keep image visible but slightly brighten it so it doesn't disappear on black */
  opacity: 0.95;
  z-index: 0;
  pointer-events: none;
  /* counteract darker source image backgrounds: brighten + slightly increase contrast */
  filter: brightness(1.12) contrast(1.06) drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  background-color: transparent;
}
body.light-bg .fng-spoon-bg {
  /* Use a lighter filter in light mode and avoid blend modes that can
     remove the image against white backgrounds. The loader (`useFngGraphics`)
     will swap in a light variant image when available. */
  filter: brightness(1.02) contrast(1.04) drop-shadow(0 6px 14px rgba(0,0,0,0.06));
  transition: filter 300ms ease, opacity 200ms ease;
}

/* Light mode spoon styling */
body.light-bg .fng-spoon-img {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}

/* Spoon Gauge Container with Needle Overlay */
.fng-spoon-gauge-container {
  position: relative;
  width: 100%;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Light-mode: make sure the spoon container doesn't add heavy shadows/white boxes */
body.light-bg .fng-spoon-gauge-container {
  box-shadow: none;
  background: transparent;
}

/* Left-side status badge */
.fng-side-status {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

.fng-side-status .status-text {
  font-family: ui-monospace, 'Caveat', 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 800;
  color: #111;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  text-transform: uppercase;
}

@keyframes statusFloat {
  0% { transform: translateY(-50%) translateX(0) scale(1); }
  50% { transform: translateY(-52%) translateX(-2px) scale(1.02); }
  100% { transform: translateY(-50%) translateX(0) scale(1); }
}

/* Animation for centered bottom badge (desktop) */
@keyframes statusFloatBottom {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-3px) scale(1.02); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes statusPulse {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 0 18px rgba(255,0,0,0.12); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* State styles */
.fng-card.fng-red .fng-side-status {
  transform-origin: left center;
  animation: statusFloat 3.2s ease-in-out infinite;
}
.fng-card.fng-red .fng-side-status .status-text {
  background: linear-gradient(180deg,#4b0000,#a60000);
  color:#fff;
  box-shadow:0 0 10px rgba(255,50,50,0.9);
  text-shadow:0 0 8px rgba(255,80,80,0.95);
}

.fng-card.fng-green .fng-side-status .status-text {
  background: linear-gradient(180deg,#003a00,#007a1a);
  color:#eaffea;
  box-shadow:0 0 10px rgba(34,197,94,0.75);
  text-shadow:0 0 8px rgba(34,197,94,0.6);
}

.fng-card.fng-yellow .fng-side-status .status-text {
  background: linear-gradient(180deg,#9a6a00,#f7b500);
  color:#111;
  box-shadow:0 0 8px rgba(234,179,8,0.35);
}

/* 'Matrix' neon accent for red (extra glow) */
.fng-card.fng-red .fng-side-status .status-text {
  font-family: ui-monospace, 'Courier New', monospace;
  letter-spacing:0.18em;
}
.fng-card.fng-red .fng-side-status {
  box-shadow: 0 6px 28px rgba(166,0,0,0.18), inset 0 0 18px rgba(255,77,77,0.06);
}

/* Adjust badge on wide screens - center it at the bottom */
@media (min-width:800px) {
  .fng-side-status {
    left: 50% !important;
    top: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    width: 140px;
    height: 100px;
  }
  .fng-side-status .status-text { font-size: 1.65rem; }

  /* Use bottom-centered animation on desktop for all states */
  .fng-card.fng-red .fng-side-status,
  .fng-card.fng-green .fng-side-status,
  .fng-card.fng-yellow .fng-side-status {
    transform-origin: center center !important;
    animation: statusFloatBottom 3.2s ease-in-out infinite !important;
  }
}

@media (min-width:1000px) {
  .fng-side-status {
    bottom: 25px;
    width: 145px;
    height: 105px;
  }
  .fng-side-status .status-text { font-size: 1.7rem; }
}

/* On very large screens, adjust positioning */
@media (min-width:1400px) {
  .fng-side-status {
    bottom: 30px;
    width: 140px;
    height: 100px;
  }
  .fng-side-status .status-text { font-size: 1.65rem; }
}

@media (min-width:1600px) {
  .fng-side-status {
    bottom: 30px;
    width: 135px;
    height: 95px;
  }
  .fng-side-status .status-text { font-size: 1.6rem; }
}

/* Hide or shrink on very small screens */
@media (max-width:460px) {
  .fng-side-status { width: 96px; height: 84px; left: 8px; }
  .fng-side-status .status-text { font-size: 1.1rem; padding:4px 6px; }
}

/* SVG Needle Overlay - positioned absolutely over the image */
.fng-needle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 320px;
  pointer-events: none;
  z-index: 10;
}

/* Needle animation */
.needle-group {
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#fngNeedleCircle {
  transition: fill 0.5s ease, stroke 0.5s ease;
}

/* Pulsing animation for the needle */
@keyframes needlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* Display section below SVG */
.fng-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.fng-value-display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fng-value-large {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.5s ease;
}

/* Color classes for value display */
.fng-red .fng-value-large {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fng-yellow .fng-value-large {
  background: linear-gradient(135deg, #eab308, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fng-green .fng-value-large {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fng-class-display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fng-class-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

/* Responsive adjustments for spoon gauge */
@media (max-width: 900px) {
  .fng-spoon-gauge-container {
    max-width: 100%;
  }

  .fng-spoon-img {
    max-height: 240px;
  }

  .fng-needle-overlay {
    max-height: 240px;
  }

  .fng-value-large {
    font-size: 2rem;
  }

  .fng-class-text {
    font-size: 0.9rem;
  }
}

.fng-gauge-track {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  height: 12px;
  overflow: hidden;
}
.fng-gauge-fill {
  height: 100%;
  width: 0%;
  transition: width 900ms cubic-bezier(.22,.9,.25,1);
  background: linear-gradient(90deg,#22c55e,#16a34a);
}

/* Color the gauge fill to match classification */
.fng-red .fng-gauge-fill { background: linear-gradient(90deg, rgba(239,68,68,0.95), rgba(244,63,94,0.95)); }
.fng-yellow .fng-gauge-fill { background: linear-gradient(90deg, rgba(234,179,8,0.95), rgba(245,158,11,0.95)); }
.fng-green .fng-gauge-fill { background: linear-gradient(90deg, rgba(34,197,94,0.95), rgba(16,163,74,0.95)); }

.fng-main .stat-value { font-variant-numeric: tabular-nums; }

/* Barometer (semicircular gauge) - positioned inside spoon handle curve */
.fng-barometer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 200px;
  position: relative;
  margin-top: 10px;
}

.barometer-plate {
  position: relative;
  width: 100%;
  max-width: 180px;
  height: 90px;
}

.barometer-face {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 120px 120px 0 0;
  background: radial-gradient(120% 80% at 50% 40%, rgba(34,197,94,0.08), rgba(0,0,0,0.75));
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.4);
  border: 1px solid rgba(34,197,94,0.2);
}

/* Light mode barometer styling */
body.light-bg .barometer-face {
  background: radial-gradient(120% 80% at 50% 40%, rgba(34,197,94,0.1), rgba(255,255,255,0.85));
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.1), 0 6px 18px rgba(0,0,0,0.15);
  border: 1px solid rgba(34,197,94,0.25);
}

.barometer-needle {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 3px;
  height: 75%;
  transform-origin: 50% 92%;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.6));
  box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 12px rgba(255,255,255,0.3);
  border-radius: 2px;
  transition: transform 900ms cubic-bezier(.22,.9,.25,1);
  z-index: 5;
}
.barometer-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: 88px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  border-radius: 26px;
  color: var(--text);
  border: 1px solid rgba(34,197,94,0.1);
  z-index: 6;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.barometer-class {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  z-index: 6;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fng-red .barometer-class { color: #ef4444; }
.fng-yellow .barometer-class { color: #eab308; }
.fng-green .barometer-class { color: #22c55e; }

/* Hide the small classification label below the barometer — the large left-side
  badge communicates the status more clearly. Kept via CSS so it's reversible.
*/
.barometer-class { display: none !important; }

/* Red 'Matrix' status: move slightly left, stronger red and neon-like glow, monospace */
.fng-card.fng-red .barometer-class {
  transform: translateX(-65%);
  color: #ff4d4d;
  font-family: ui-monospace, 'Courier New', monospace;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(255,77,77,0.9), 0 0 16px rgba(255,77,77,0.18);
  font-weight: 800;
}

/* Keep the red/matrix look legible in light mode as well */
body.light-bg .fng-card.fng-red .barometer-class {
  color: #c53030;
  text-shadow: 0 0 6px rgba(197,48,48,0.9), 0 0 12px rgba(197,48,48,0.12);
}

/* Barometer scale */
.barometer-scale {
  width: 100%;
  max-width: 240px;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(34,197,94,0.5);
  font-weight: 600;
  font-family: ui-monospace, monospace;
}

/* needle color by classification */
.fng-red .barometer-needle { background: linear-gradient(180deg,#ef4444,#f43f5e); box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.fng-yellow .barometer-needle { background: linear-gradient(180deg,#eab308,#f59e0b); box-shadow: 0 0 8px rgba(234,179,8,0.5); }
.fng-green .barometer-needle { background: linear-gradient(180deg,#22c55e,#16a34a); box-shadow: 0 0 8px rgba(34,197,94,0.5); }

/* responsive */
@media (max-width:900px) {
  .fng-card {
    min-height: 220px;
  }

  .fng-card .fng-card-body {
    padding: 30px 20px 20px 20px;
    min-height: 220px;
  }

  .fng-barometer {
    max-width: 140px;
    margin-top: 15px;
  }

  .barometer-plate {
    max-width: 120px;
    height: 60px;
  }

  .barometer-scale {
    max-width: 120px;
    font-size: 0.7rem;
  }

  .barometer-center {
    width: 60px;
    height: 36px;
    font-size: 0.85rem;
  }
}

/* Container for Fear & Greed and Miner Map Cards */
.fng-map-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  width: 100%;
}

/* Desktop: side-by-side layout */
@media (min-width:800px) {
  .fng-map-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    gap: var(--gap-lg);
  }

  .fng-card {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }

  .fng-map-container .map-preview-card {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Larger screens: keep cards compact */
@media (min-width:1400px) {
  .fng-card {
    max-width: 550px;
  }

  .fng-map-container .map-preview-card {
    max-width: 550px;
  }
}

/* Desktop: slightly larger spoon graphic and adjusted placement */
@media (min-width:1000px) {
  .fng-spoon-bg {
    width: 68%;
    max-width: 420px;
    /* centered via left: 50% + transform: translateX(-33%) from base style */
    /* centered vertically on wide screens */
    top: 30px;
    opacity: 0.95;
  }

  .fng-barometer {
    max-width: 180px;
    margin-top: 50px;
  }
}

/* Extra large screens: further constraints */
@media (min-width:1600px) {
  .fng-spoon-bg {
    width: 60%;
    max-width: 400px;
  }

  .fng-barometer {
    margin-top: 65px;
  }
}

/* ---- Halving Pill ---- */
.halving-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  /* INDEPENDENT: Event pill slightly larger than price pill */
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  padding: clamp(6px, 1.5vw, 8px) clamp(14px, 3.5vw, 18px);
  animation: halving-pulse 7s infinite;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(255,148,118,0.18), rgba(255,92,60,0.08));
  border: 1px solid rgba(255,148,118,0.55);
  border-radius: 22px;
  color: var(--text);
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: help;
  position: relative;
}

.halving-pill:hover {
  background: linear-gradient(135deg, rgba(255,107,53,0.12), rgba(255,107,53,0.05));
  border-color: rgba(255,107,53,0.3);
  box-shadow: 0 4px 12px rgba(255,107,53,0.15);
}

.halving-pill.just-halved {
  transform: scale(1.04);
  box-shadow: 0 10px 30px rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.35);
}

/* Confidence color variants for the halving pill (subtle, design-matching)
   - low: red-ish (uses existing red used elsewhere)
   - medium: yellow-ish
   - high: green (uses --accent)
   Only a left accent border + gentle inset glow so overall design remains unchanged. */
.halving-pill.confidence-low {
  border-left: 4px solid #ff7a7a;
  box-shadow: inset 0 0 32px rgba(255,122,122,0.12), 0 4px 24px rgba(0,0,0,0.32);
}
.halving-pill.confidence-low .halving-icon {
  filter: drop-shadow(0 0 10px rgba(255,122,122,0.2));
}
.halving-pill.confidence-medium {
  border-left: 4px solid #eab308;
  box-shadow: inset 0 0 24px rgba(234,179,8,0.03), 0 4px 18px rgba(0,0,0,0.28);
}
.halving-pill.confidence-medium .halving-icon {
  filter: drop-shadow(0 0 6px rgba(234,179,8,0.06));
}
.halving-pill.confidence-high {
  /* Distinct color for high confidence to avoid clashing with price green */
  border-left: 4px solid #0ea5ff; /* cyan-blue */
  box-shadow: inset 0 0 24px rgba(14,165,255,0.03), 0 4px 18px rgba(0,0,0,0.22);
}
.halving-pill.confidence-high .halving-icon {
  filter: drop-shadow(0 0 6px rgba(14,165,255,0.06));
}

.halving-icon {
  color: var(--brand);
  display: flex;
  align-items: center;
  font-size: 1.1em;
}

.halving-countdown {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Halving pill layout - date in top-right corner */
.halving-content {
  display: flex;
  align-items: center;
}

.halving-countdown-row {
  display: flex;
  align-items: center;
}

/* Position "Last Halving:" centered at top */
.halving-date-row {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6em;
  opacity: 0.6;
}

.halving-date-label {
  color: var(--text-muted, #888);
}

.halving-date-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Equal width pills on tablet/desktop */
@media (min-width: 600px) {
  .halving-pill,
  .price-pill {
    min-width: 220px;
  }
  .halving-pill {
    padding: 14px 18px 14px 14px;
  }
  .halving-date-row {
    font-size: 0.65em;
  }
}

@media (min-width: 900px) {
  .halving-pill,
  .price-pill {
    min-width: 240px;
  }
}

/* ---- Dashboard (Container Query Ready) ---- */
.dashboard {
  container-type: inline-size;
  container-name: dashboard;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* ---- Stats Grid (Glassmorphism Enhanced) ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 2 rows, 4 columns */
  gap: var(--gap-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  animation: fadeInUp 0.8s ease-out 0.1s both;
}

.stat-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: var(--card-padding);
  background: rgba(17, 19, 24, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
  min-width: 0;
  overflow: visible;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover:not(.blink-green):not(.blink-red):not(.blink-yellow):not(.blink-orange):not(.blink-white) {
  border-color: rgba(34,197,94,0.3);
  background: rgba(17, 19, 24, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(34,197,94,0.1);
}

.stat-card:hover:not(.blink-green):not(.blink-red):not(.blink-yellow):not(.blink-orange):not(.blink-white)::before {
  opacity: 1;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-sm);
  height: var(--icon-sm);
  background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
  border-radius: 10px;
  color: var(--accent);
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
}

.stat-card:hover:not(.blink-green):not(.blink-red):not(.blink-yellow):not(.blink-orange):not(.blink-white) .stat-icon {
  background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(34,197,94,0.1));
  box-shadow: 0 0 20px rgba(34,197,94,0.3);
}

/* Override the green icon background for the Fear & Greed card specifically
   to avoid showing the decorative green block when the icon SVG is removed. */
.fng-card .stat-icon {
  background: transparent !important;
  box-shadow: none !important;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Small API status badge placed before the API status text */
.api-status-badge {
  display: inline-block;
  min-width: 36px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  text-align: center;
  color: #fff;
  margin-right: 8px;
  vertical-align: middle;
}
.api-status-badge.ok { background: #22c55e; }
.api-status-badge.error { background: #ef4444; }
.api-status-badge.partial { background: #eab308; color: #111; }
.api-status-text { vertical-align: middle; color: var(--text); font-weight: 700; }

/* Larger centered badge variant used inside the API Status card */
/* API Status Card - Badge zentral mit absolutem Positioning */
#apiStatusCard {
  align-items: stretch;
}

#apiStatusCard .stat-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#apiStatus {
  position: absolute;
  top: 55%;
  left: 45%;
  transform: translate(-50%, -50%);
}

/* Desktop/Vollbild: Badge zentral */
@media (min-width: 1000px) {
  #apiStatus {
    top: 50%;
  }
}
.api-status-badge.api-status-large {
  min-width: 44px;
  padding: 6px 12px;
  font-size: 0.94rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), inset 0 -1px 4px rgba(0,0,0,0.05);
}
@media (max-width: 700px) {
  .api-status-badge.api-status-large {
    min-width: 40px;
    padding: 6px 12px;
    font-size: 0.98rem;
  }
}

.stat-value {
  /* SMALLER: Cards should be less dominant than pills */
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* Unit suffix used in compact number display for K/M/B etc. */
/* .stat-unit removed to revert previous local unit suffix styling. */

/* ---- Dynamic Tooltip (Improved for desktop) ---- */
.dynamic-tooltip {
  position: fixed;
  background: #222;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 1em;
  white-space: pre-line;
  word-break: break-word;
  box-shadow: 0 4px 24px #000a;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  max-width: 240px;
  text-align: left;
}
.dynamic-tooltip.wide {
  /* Wider variant for complex/long content (desktop halving pill) */
  max-width: 520px;
  padding: 12px 20px;
}
.dynamic-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Persistent tooltip variant (used for mobile halving pill) */
.dynamic-tooltip.persistent {
  max-width: 92vw;
  max-height: 72vh;
  overflow: auto;
  padding-right: 28px; /* space for close button */
}
.dynamic-tooltip .tooltip-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.dynamic-tooltip .tooltip-body {
  white-space: pre-line;
}

/* Tooltip chips used inside dynamic tooltips (small colored badges) */
.dynamic-tooltip .tooltip-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  margin-right: 8px;
  vertical-align: middle;
  color: #fff;
}
.dynamic-tooltip .tooltip-chip.ok { background: #22c55e; }
.dynamic-tooltip .tooltip-chip.error { background: #ef4444; }
.dynamic-tooltip .tooltip-chip.partial { background: #eab308; color: #111; }

.svg-attribution {
  font-size: 0.95em;
  color: #bbb;
  margin-top: 0.7em;
  margin-bottom: 0.2em;
}
.svg-attribution a {
  color: #fff;
  text-decoration: underline;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.svg-attribution a:hover {
  opacity: 1;
}

/* ---- Charts (Dynamisch) ---- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.dashboard-card {
  background: rgba(17, 19, 24, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: var(--space-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  /* No fixed height; cards are dynamic */
}

/* Map Preview Card - Minimal styling */
.map-preview-card .card-header h2, .map-preview-card .card-header h3 {
  margin: 0;
  /* Match other card headers for a consistent look */
  font-size: 1.1em;
  font-weight: 600;
  text-align: left;
}
.map-preview-card .map-preview-body {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center; /* Fixed alignment */
  width: 100%;
}
.map-preview-card img#mapThumb {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.04);
}
.map-preview-card .card-badge { margin-top: 6px; display:inline-block }
.map-preview-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
.map-preview-card .map-preview-body { justify-content:center; width:100%; }

/* Keep map preview header consistent with other card headers */
.map-preview-card .card-header { justify-content: space-between; width: 100%; }

/* Attribution for the Map preview image */
.map-preview-card .map-attribution {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.map-preview-card .map-attribution a {
  color: rgba(34,197,94,0.8);
  text-decoration: underline;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dashboard-card:hover {
  border-color: rgba(34,197,94,0.25);
  background: rgba(17, 19, 24, 0.8);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,197,94,0.1);
}
.dashboard-card.light-bg:hover {
  background: #fff !important; /* keep it white in Light Mode */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.dashboard-card.light-bg:hover::before { opacity: 0 !important; }

.dashboard-card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.card-header h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}

/* Center the title for the Fear & Greed card while keeping the info-badge at the card corner */
.fng-card .card-header {
  /* use block layout so header's internal flex rules don't force left alignment */
  display: block;
  text-align: center;
  padding-top: 2px; /* small top spacing so title isn't flush with card edge */
  margin-bottom: 0; /* remove default margin */
  position: relative;
  z-index: 30; /* Above spoon image (z-index: 0) */
}
.fng-card .card-header h2 {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 30;
}
/* position the info badge in the card's top-right corner */
.fng-card > .info-badge, .fng-card .info-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 40;
}

/* Unified rule for the main dashboard card headlines (TAO Price, Miner Map, Film) */
.dashboard-grid .dashboard-card .card-header h2 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  text-align: left;
  color: var(--text);
}

/* Make TAO Price History header black in Light Mode */
.dashboard-card.light-bg .card-header h2 {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* Safari / iOS fallback */
}
/* Optional: target the specific chart card when :has is supported */
@supports selector(:has) {
  .dashboard-card:has(#priceChart) .card-header h2 {
    color: #000 !important;
  }
}

.card-badge {
  padding: clamp(3px, 0.8vw, 4px) clamp(8px, 2vw, 10px);
  font-size: clamp(0.65rem, 1.5vw, 0.75rem);
  font-weight: 600;
  color: var(--accent);
  background: var(--glow);
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.card-badge.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.card-action {
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  cursor: pointer;
}
.card-action:hover { opacity: 0.95; transform: translateY(-1px); }

/* Icon-only variant (e.g., magnifying glass for 'Open full') */
.card-action.icon-btn {
  padding: 8px;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
}
.card-action.icon-btn svg { width: 24px; height: 24px; color: currentColor; }
.card-action.icon-btn:focus { outline: 2px solid rgba(34,197,94,0.15); outline-offset: 2px; }
.card-action.icon-btn:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }

/* Placeholder so layout doesn't collapse when iframe is moved into modal */
.tao-embed-placeholder { display:block; width:100%; min-height:560px; }
@media (max-width: 768px) { .tao-embed-placeholder { min-height: 720px; } }
@media (max-width: 420px) { .tao-embed-placeholder { min-height: 760px; } }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.dashboard-card:not(.loading) .chart-skeleton { display: none; }

.chart-note {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}

.chart-placeholder {
  width: 100%;
  min-height: 140px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.08);
}

/* ---- Disclaimer Card (Subtle & Compact) ---- */
.disclaimer-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  border-left: 2px solid rgba(255, 107, 53, 0.3);
  padding: var(--space-md);
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--space-sm);
  color: rgba(255, 255, 255, 0.5);
}

.disclaimer-header svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.disclaimer-header h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.disclaimer-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.disclaimer-text {
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-xs);
}

.disclaimer-text strong {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.data-sources-grid {
  display: grid;
  /* 4 columns x 2 rows layout for compact source listing */
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(32px, auto);
  gap: clamp(8px, 1.5vw, 12px);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}

.source-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.source-item a {
  font-size: var(--text-xs);
  color: rgba(34, 197, 94, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
  display: inline;
  padding: 0;
  background: none;
  border: none;
}

.source-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.source-item-wide {
  grid-column: 1 / -1;
  margin-top: 12px;
}

.source-label {
  font-size: clamp(0.55rem, 1.2vw, 0.65rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.source-item a {
  font-size: var(--text-xs);
  color: rgba(34, 197, 94, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
}

.source-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.coingecko-attribution {
  margin: 0;
  font-size: clamp(0.55rem, 1.2vw, 0.65rem);
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  font-style: italic;
}

/* ---- Footer (Minimal) ---- */
.site-footer {
  max-width: 1200px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid var(--border);
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.site-footer p {
  margin: 0;
  line-height: 1.5;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.footer-brand:hover {
  opacity: 1;
}

.footer-brand span {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}

.footer-bittensor-logo {
  height: 16px;
  width: auto;
  opacity: 0.9;
  filter: brightness(1.1);
}

.site-footer .data-sources,
.site-footer .separator,
.site-footer .badge-demo,
.site-footer .attribution {
  display: none;
}

/* ---- Chart Controls (2-row layout) ---- */
.chart-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.time-range-toggle {
  display: flex;
  gap: clamp(4px, 1vw, 6px);
  background: rgba(255,255,255,0.03);
  padding: 3px;
  border-radius: 10px;
}

.time-btn {
  padding: clamp(4px, 1vw, 6px) clamp(10px, 2vw, 14px);
  font-size: clamp(0.65rem, 1.5vw, 0.75rem);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.time-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

.time-btn.active {
  color: var(--accent);
  background: var(--glow);
}

/* Chart toggle buttons (EUR, BTC, ETH, SOL) */
.chart-toggles {
  display: inline-flex;
  gap: clamp(4px, 1vw, 6px);
  background: rgba(255,255,255,0.06);
  padding: 3px;
  border-radius: 10px;
}

/* Make toggle buttons more visible in inactive state */
.chart-toggles .time-btn {
  color: #888;
  border: 1px solid transparent;
  font-weight: 700;
}
.chart-toggles .time-btn:hover {
  color: #bbb;
  background: rgba(255,255,255,0.08);
}

/* EUR toggle active state */
#eurToggle.active {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.2) !important;
  border-color: rgba(251, 191, 36, 0.4);
}

/* Comparison toggle colors when active */
.time-btn.compare-toggle.active[id="btcToggle"] {
  color: #f7931a !important;
  background: rgba(247, 147, 26, 0.25) !important;
  border-color: rgba(247, 147, 26, 0.5);
}
.time-btn.compare-toggle.active[id="ethToggle"] {
  color: #b0b0b0 !important;
  background: rgba(160, 160, 160, 0.2) !important;
  border-color: rgba(160, 160, 160, 0.5);
}
.time-btn.compare-toggle.active[id="solToggle"] {
  color: #9945ff !important;
  background: rgba(153, 69, 255, 0.2) !important;
  border-color: rgba(153, 69, 255, 0.4);
}

/* Light mode: darker ETH for better contrast */
body.light-bg .time-btn.compare-toggle.active[id="ethToggle"] {
  color: #555 !important;
  background: rgba(85, 85, 85, 0.15) !important;
  border-color: rgba(85, 85, 85, 0.4);
}

/* Toggle separator */
.toggle-separator {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9em;
  margin: 0 2px;
  user-select: none;
}
body.light-bg .toggle-separator {
  color: rgba(0, 0, 0, 0.25);
}

/* Chart type toggles (Candle, Volume) - cyan accent */
.time-btn.chart-type-toggle.active {
  color: #22d3ee !important;
  background: rgba(34, 211, 238, 0.2) !important;
  border-color: rgba(34, 211, 238, 0.5);
}
body.light-bg .time-btn.chart-type-toggle.active {
  color: #0891b2 !important;
  background: rgba(8, 145, 178, 0.15) !important;
  border-color: rgba(8, 145, 178, 0.4);
}

/* Mobile: wrap time buttons and toggles */
@media (max-width: 600px) {
  .chart-controls {
    align-items: center;
  }
  .time-range-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
  .chart-toggles {
    justify-content: center;
  }
}

/* Duplicate dynamic-tooltip block removed (canonical block defined earlier incl. .wide/.persistent) */

.info-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: rgba(156,163,175,0.13);
  color: #9ca3af;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  border: none;
  box-shadow: none;
  letter-spacing: 0;
}

.info-badge:hover,
.info-badge:focus {
  background: rgba(34,197,94,0.13);
  color: #22c55e;
}

/* Price chart info badge - position outside of button area */
section[aria-labelledby="price-heading"] > .info-badge {
  top: 12px;
  right: 12px;
  z-index: 10;
}
section[aria-labelledby="price-heading"] .chart-controls {
  padding-right: 28px; /* Make room for info badge */
}

/* Inline info badge for TAOTensor card header to avoid overlap with other controls */
/* TAO Tensor Law header no longer shows an inline info-badge; remove styling here. */
/* No inline info badge in the TAO Tensor Law header; was removed intentionally. */

.refresh-logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On mobile, reduce gap even more */
@media (max-width: 600px) {
  .refresh-logo-row {
    gap: 4px;
  }
}

/* --- Refresh Indicator (Klickbar & Interaktiv) --- */
.refresh-indicator {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0.95;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.refresh-indicator:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.2);
}
.refresh-indicator:active {
  transform: scale(0.92);
}
.refresh-indicator svg {
  width: 26px;
  height: 26px;
  display: block;
}
.refresh-indicator svg circle {
  stroke-width: 2.2px;
}
.refresh-indicator .refresh-label {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: 700;
  color: #22c55e;
  -webkit-text-fill-color: #22c55e;
  pointer-events: none;
  letter-spacing: -0.5px;
}
@media (min-width: 600px) {
  .refresh-indicator {
    width: 32px;
    height: 32px;
  }
  .refresh-indicator svg {
    width: 28px;
    height: 28px;
  }
  .refresh-indicator .refresh-label {
    font-size: 0.8em;
  }
}
@media (max-width: 420px) {
  .refresh-indicator {
    width: 22px;
    height: 22px;
    margin-right: 6px;
    margin-left: 4px;
  }
  .refresh-indicator svg { width: 18px; height: 18px; }
  .refresh-indicator .refresh-label { font-size: 0.68em; }
}
@media (max-width: 700px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .dashboard-card, .stat-card {
    width: 100%;
    min-width: 0;
    border-radius: 10px;
    padding: var(--space-md);
  }
  .card-header h2, .card-header h3 {
    font-size: 1.1em;
  }
  .socials-links a, .useful-links a {
    font-size: 1em;
    padding: 8px 0;
    min-height: 44px;
  }
  .socials-links a svg, .useful-links a svg {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
  }
}

/* Correct: last-update outside media queries */
.last-update {
  text-align: center;
  color: #9ca3af;
  font-size: 0.70em;
  margin: 0 0 12px 0;
  opacity: 0.7;
  letter-spacing: 0.01em;
}

@media (max-width: 700px) {
  .last-update {
    text-align: center;
    font-size: 0.70em;
    margin-left: 2px;
  }
  /* Map preview thumbnail: larger and stacked on mobile */
  .map-preview-card .map-preview-body { flex-direction: column; align-items: center; }
  .map-preview-card img#mapThumb { width: 90% !important; height: auto !important; max-height: 260px; }
}

.stat-card .info-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}
.stat-card .info-badge:active,
.stat-card .info-badge:focus {
  outline: none;
}
/* Prevents link from triggering when clicking info-badge */
.stat-card .info-badge {
  cursor: pointer;
}

#priceChart {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent;
}

/* If parent container is too small: */

/* stray empty rule removed */
.chart-container {
  position: relative;
  width: 100%;
  min-height: 320px;
  height: 320px;
  display: flex;
  align-items: stretch;
}

/* ---- Social Media Cards ---- */
.socials-card {
  background: rgba(17, 19, 24, 0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: var(--space-md) var(--space-md);
  gap: 0.5em;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex-grow: 1;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* ---- TAO Tensor Law Embed Card ---- */
.taotensor-card .card-header h2 { display:flex; align-items:center; gap:8px; }
.taotensor-card .card-header { align-items: center; }
.taotensor-card .card-header > div { display:flex; align-items:center; gap:8px; flex: 0 0 auto; }
.taotensor-card .card-header h2 { flex: 1 1 auto; min-width: 0; margin-right: 12px; }
.taotensor-embed {
  display: block;
  width: 100%;
  /* Increase height to make the chart more visible and comparable with Miner Map */
  /* Min height 600px on most screens, but on small screens it will clamp down */
  height: clamp(420px, 62vh, 960px);
  min-height: 560px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.taotensor-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Mobile overlay CTA: show on phones to avoid clipped embed tooltips */
.taotensor-embed { position: relative; }
.embed-overlay-mobile {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.18) 100%);
  color: #fff;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
@media (max-width: 768px) {
  .embed-overlay-mobile { display: flex; }
  .embed-overlay-mobile[aria-hidden="true"] { display: none; }
}
/* Dark mode presentation: attempt to make the embedded site look dark by filtering it.
   Only apply when the page is in dark mode (body does not have .light-bg). */
body:not(.light-bg) .taotensor-embed iframe {
  filter: invert(0.96) hue-rotate(200deg) saturate(0.9) brightness(0.95);
  transform: scale(1.01); /* slightly scale so borders don't show in some layouts */
}
/* Light mode: keep the embed unchanged */
body.light-bg .taotensor-embed { background: #fff; border-color:#e6e6e6 }
body.light-bg .taotensor-embed iframe { filter: none }

/* Fallback message styling inside the card */
.taotensor-embed .embed-fallback {
  display: none;
  padding: var(--card-padding);
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
}
.taotensor-embed .embed-fallback img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 8px; display: block }
/* Keep fallback image visible and vertically centered for tall embeds */
.taotensor-embed .embed-fallback { display:flex; flex-direction:column; justify-content:center; align-items:center }
/* When in dark mode, gently invert the preview so it looks more native */
body:not(.light-bg) .taotensor-embed .embed-fallback img {
  filter: invert(0.96) hue-rotate(200deg) saturate(0.85) brightness(0.92) contrast(0.95);
}
.taotensor-embed.fallback-active .embed-fallback { display: block }
.taotensor-embed.fallback-active iframe { display: none }

/* Mobile-specific adjustments: increase embed size on narrow screens so
   the TAO Tensor Law disclaimer is fully visible for 2 - 3 sentences.
   This addresses a UX issue where the embedded site's disclaimer is cut
   off on smaller viewports (e.g., phones). */
@media (max-width: 768px) {
  .taotensor-embed {
    /* Larger mobile-friendly min height — tuned to show more of the embed's top content */
    min-height: 720px;
    /* Make height responsive but biased to taller sizes for small devices */
    height: clamp(520px, 82vh, 1080px);
  }
  .taotensor-embed .embed-fallback img { object-position: top center; }
}

/* Very small phones (narrow screens) — still allow large previews but avoid too many scroll jumps */
@media (max-width: 420px) {
  .taotensor-embed { min-height: 760px; height: clamp(560px, 86vh, 1080px); }
}

/* Fullscreen modal for TAO Tensor Law embed */
.embed-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  z-index: 9999;
}
.embed-modal.active { display: flex; }
.embed-modal .embed-modal-body {
  display: flex;
  flex-direction: column;
  width: min(1200px, 95vw);
  height: min(1000px, 95vh);
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.embed-modal .embed-modal-header {
  display:flex; align-items:center; justify-content:flex-end; gap:8px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.embed-modal .embed-modal-content { flex: 1 1 auto; display:flex; }
.embed-modal .embed-modal-content iframe { width: 100%; height: 100%; border: none; }

/* Small screens: full-screen modal fits tight for phones */
@media (max-width: 768px) {
  .embed-modal .embed-modal-body { width: 100vw; height: 100vh; border-radius: 0; }
}

.useful-links-card {
  background: rgba(17, 19, 24, 0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: var(--space-md) var(--space-md);
  /* min-height removed, card adapts dynamically */
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.socials-card .card-header {
  margin-bottom: 0.2em;
}

.socials-links {
  margin-top: 0.2em;
  gap: 1.2em;
}

.useful-links {
  margin-top: 0.2em;
  gap: 1em;
}


.socials-card h3,
.useful-links-card h3 {
  font-size: var(--text-xs);
  color: rgba(34, 197, 94, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 0;
  background: none;
  border: none;
}
/* Socials & Useful Links: Subtle hover, smaller icons/text */
.socials-links a,
.useful-links a {
  color: rgba(34, 197, 94, 0.7);
  font-size: 0.97em;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  transition: color 0.2s, background 0.2s;
}

.socials-links a svg,
.useful-links a svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  vertical-align: middle;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.socials-links a:hover,
.useful-links a:hover {
  color: #16a34a;
  background: rgba(34,197,94,0.08);
  border-radius: 6px;
  box-shadow: 0 0 8px 2px var(--glow);
}

.socials-links a:hover svg,
.useful-links a:hover svg {
  opacity: 1;
  filter: drop-shadow(0 0 2px #22c55e);
}

.whitepaper-btn {
  font-size: 0.70em;
}

/* Scale whitepaper icon to match the refresh timer and keep a consistent accent */
.whitepaper-btn svg {
  width: 22px !important;
  height: 22px !important;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
  fill: var(--accent) !important; /* ensure matching color */
}
@media (min-width: 600px) {
  .whitepaper-btn svg {
    width: 30px !important;
    height: 30px !important;
  }
}
@media (max-width: 420px) {
  .whitepaper-btn svg {
    width: 20px !important;
    height: 20px !important;
    margin-right: 4px;
  }
}

/* ---- Light Mode Overrides ---- */
body.light-bg, header.site-header.light-bg {
  background: #dadada !important;
  color: #222 !important;
}
header.site-header.light-bg {
  background: #dadada !important;
  border-bottom: 1px solid #c0c0c0 !important;
  color: #222 !important;
}
.logo-title {
  color: #ff6b35;
}
.logo-subtitle {
  color: #555 !important;
}
.site-header.light-bg .logo-subtitle {
  color: #222 !important;
}
.dashboard-card.light-bg,
.stat-card.light-bg {
  background: #e2e2e2 !important;
  color: #222 !important;
  border: 1px solid #c0c0c0 !important;
  box-shadow: 0 1px 1px #0001;
  backdrop-filter: none !important;
}

/* Specifically style card action buttons (e.g., 'Open full') for Light Mode so text is visible */
body.light-bg .card-action {
  background: linear-gradient(135deg, #ffffff 0%, #fbfbfb 100%) !important;
  border: 1px solid #e6e6e6 !important;
  color: #222 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
body.light-bg .card-action.icon-btn { color: #222; }

/* Make sure the TAO overlay CTA is still readable on Light Mode */
body.light-bg .embed-overlay-mobile {
  color: #111;
  background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.85) 100%);
  text-shadow: none;
}
.price-pill.light-bg,
.halving-pill.light-bg {
  /* higher contrast for pills in Light Mode: cleaner white background, stronger shadow and border */
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
  color: #000 !important;
  border-color: #c1c1c1 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.09) !important; /* lifts the pill above the page */
  transform: translateZ(0);
}
.price-pill.light-bg .price-icon {
  color: var(--accent) !important;
}
.price-pill.light-bg {
  border: 1px solid #c1c1c1 !important;
  border-left-width: 1px !important;
  border-top-width: 1px !important;
  border-bottom-width: 1px !important;
  border-right: 4px solid #94a3b8 !important; /* neutral gray until change status arrives */
}
.price-pill.light-bg.price-up {
  border-right: 4px solid #16a34a !important; /* stay green when 24h change is positive */
  box-shadow: inset 0 0 18px rgba(22,163,74,0.16) !important;
}
.price-pill.light-bg.price-down {
  border-right: 4px solid #dc2626 !important; /* flip to red when 24h change is negative */
  box-shadow: inset 0 0 18px rgba(220,38,38,0.16) !important;
}
.price-pill.light-bg.price-neutral {
  border-right: 4px solid #64748b !important; /* slate gray for neutral */
  box-shadow: inset 0 0 18px rgba(100,116,139,0.12) !important;
}
.halving-pill.light-bg:not(.confidence-low):not(.confidence-medium):not(.confidence-high) {
  border-left: 4px solid #ff9770 !important; /* softened orange accent for halving when no confidence class present */
}

/* Ensure confidence accents survive Light Mode overrides */
.halving-pill.light-bg.confidence-low {
  border-left: 4px solid #ff7a7a !important;
  box-shadow: inset 0 0 28px rgba(255,122,122,0.12) !important;
}
.halving-pill.light-bg.confidence-medium {
  border-left: 4px solid #f6c743 !important;
  box-shadow: inset 0 0 24px rgba(246,199,67,0.12) !important;
}
.halving-pill.light-bg.confidence-high {
  border-left: 4px solid #0ea5ff !important;
  box-shadow: inset 0 0 24px rgba(14,165,255,0.12) !important;
}
.price-pill.light-bg .pill-value,
.halving-pill.light-bg .pill-value,
.pill-value.skeleton-text.light-bg {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* Safari / iOS fallback */
  font-weight: 800 !important; /* stronger weight for better legibility */
}
.halving-pill.light-bg .halving-date-label {
  color: #666 !important;
}
.halving-pill.light-bg .halving-date-value {
  color: #333 !important;
}
.price-change.light-bg.positive {
  color: #15803d !important;
  background: #eafbe6 !important;
}
.price-change.light-bg.negative {
  color: #b91c1c !important;
  background: #fbeaea !important;
}
.ath-atl-pill.light-bg {
  background: #e2e2e2 !important;
  /* Keep ATL/ATH individual accent colors even in Light Mode -- don't override with generic text color */
  border-color: #c0c0c0 !important;
}
.whitepaper-btn.light-bg {
  background: #e2e2e2 !important;
  color: #22c55e !important;
  border: 1px solid #c0c0c0 !important;
}
#bgToggleBtn.light-bg,
#soundToggleBtn.light-bg {
  /* Keep the toggle obvious in light backgrounds: use a dark rounded button */
  background: #111318 !important; /* darker for visibility */
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
}
.stat-value.light-bg {
  color: #222 !important;
}
.info-badge.light-bg {
  background: #dadada !important;
  color: #222 !important;
}
.site-footer.light-bg {
  background: #dadada !important;
  color: #222 !important;
}
/* Ensure paragraph text (footer) also switches to dark in Light Mode */
.site-footer.light-bg p {
  color: #222 !important;
  -webkit-text-fill-color: #222 !important; /* Safari fallback */
  opacity: 1 !important;
}

/* Keep links brand-colored while other text goes dark */
.site-footer.light-bg a {
  color: var(--brand) !important;
}

.site-footer.light-bg .footer-brand span {
  color: rgba(0, 0, 0, 0.6) !important;
}

.site-footer.light-bg .footer-bittensor-logo {
  filter: brightness(0) saturate(100%) invert(0);
  opacity: 0.7;
}
.last-update.light-bg {
  color: #222 !important;
}
.chart-note.light-bg {
  color: #222 !important;
}
/* ---- Refresh indicator: Light Mode fixes ---- */
/* Make auto-refresh timer label readable in Light Mode and tune the circle strokes */
.site-header.light-bg #refresh-indicator {
  opacity: 1 !important;
}
.site-header.light-bg #refresh-indicator .refresh-label {
  color: #222 !important; /* dark label for better contrast */
  -webkit-text-fill-color: #222 !important; /* Safari fallback */
  font-weight: 700 !important;
}
/* Darken the background circle and slightly desaturate the progress stroke */
.site-header.light-bg #refresh-indicator svg circle:nth-of-type(1) {
  stroke: rgba(0,0,0,0.12) !important; /* faint outline for light backgrounds */
}
.site-header.light-bg #refresh-indicator svg circle:nth-of-type(2) {
  stroke: #15803d !important; /* slightly darker green in light mode */
}
/* Also support refresh-indicator receiving the light-bg class directly (failsafe) */
.refresh-indicator.light-bg .refresh-label,
.refresh-indicator.light-bg .refresh-label {
  color: #222 !important;
  -webkit-text-fill-color: #222 !important;
}
.refresh-indicator.light-bg svg circle:nth-of-type(1) {
  stroke: rgba(0,0,0,0.12) !important;
}
.refresh-indicator.light-bg svg circle:nth-of-type(2) {
  stroke: #15803d !important;
}
.disclaimer-card.light-bg {
  /* stronger, near-white background for maximal contrast in Light Mode */
  background: #ffffff !important;
  background-image: none !important;
  color: #000 !important;
  border: 1px solid #c0c0c0 !important;
  backdrop-filter: none !important;
  filter: none !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
}
.disclaimer-card.light-bg .disclaimer-header {
  color: #000 !important;
}
.disclaimer-card.light-bg .disclaimer-header h3 {
  color: #000 !important;
}
.disclaimer-card.light-bg .disclaimer-text,
.disclaimer-card.light-bg .source-label {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* Safari / iOS fallback for disclaimer text */
  /* Keep the original font-weight to preserve the existing design */
  font-weight: 400 !important;
}

/* Ensure all disclaimer-descendants are dark in Light Mode; but keep links colored */
.disclaimer-card.light-bg *:not(a) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Remove :before overlay on cards (in case it darkens the card in Safari) */
.disclaimer-card.light-bg::before { display: none !important; }

/* Accessibility: honor reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .halving-pill,
  #taoPricePill.price-up,
  #taoPricePill.price-down,
  .card-badge.pulse,
  .stat-card.blink-green,
  .stat-card.blink-red,
  .stat-card.blink-yellow,
  .stat-card.blink-orange,
  .stat-card.blink-white,
  .skeleton-text,
  .chart-skeleton {
    animation: none !important;
    transition: none !important;
  }
}
.disclaimer-card.light-bg .disclaimer-text strong {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* Safari fallback */
}
.disclaimer-card.light-bg .coingecko-attribution {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* Safari fallback */
  font-weight: 500 !important;
}
.disclaimer-card.light-bg a {
  /* Use greenish links to match dark-mode link style */
  color: rgba(34, 197, 94, 0.8) !important;
}

/* Light mode: brighten the map thumbnail so it reads on light backgrounds.
   This is a minimal fix — we only add a soft brightness filter and a lighter
   border color, leaving the original image unchanged. */
body.light-bg .map-preview-card img#mapThumb {
  filter: brightness(1.45) saturate(0.88) contrast(1.02);
  border-color: rgba(0,0,0,0.08) !important;
}
/* Also slightly lighten the card background and border for contrast */
body.light-bg .map-preview-card {
  background: #fff !important;
  border-color: #e6e6e6 !important;
}

/* Ensure map attribution text is visible in Light Mode */
body.light-bg .map-preview-card .map-attribution {
  color: #111 !important;
}

/* Make sure disclaimer links are green across browsers and modes (Safari fallback) */
.disclaimer-card a,
.disclaimer-card .source-item a,
.disclaimer-card.light-bg a {
  color: rgba(34, 197, 94, 0.85) !important;
  -webkit-text-fill-color: rgba(34, 197, 94, 0.85) !important; /* Safari fallback */
}

/* Strong override when .source-item receives the light-bg parent color (prevents inheritance overrides) */
.data-sources-grid .source-item.light-bg a,
.disclaimer-card.light-bg .source-item a,
.disclaimer-card.light-bg .source-item a:visited {
  color: rgba(34,197,94,0.9) !important;
  -webkit-text-fill-color: rgba(34,197,94,0.9) !important;
}

/* ATH / ATL color accents - keep them color-coded across themes */
.ath-atl-pill.atl-pill {
  background: rgba(239,68,68,0.04) !important;
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.13) !important;
}
.ath-atl-pill.ath-pill {
  background: rgba(34,197,94,0.04) !important;
  color: #22c55e !important;
  border-color: rgba(34,197,94,0.13) !important;
}

/* Price Chart Footer */
.price-chart-footer {
  text-align: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-update {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.8;
}

body.light-bg .price-chart-footer {
  border-top-color: rgba(0, 0, 0, 0.05);
}

.data-sources-grid .source-item.light-bg {
  background: #e2e2e2 !important;
  color: #222 !important;
  border: 1px solid #c0c0c0 !important;
}

#subnetsCard {
  position: relative;
  z-index: 10;
}

/* Top Subnets Tooltip - Simple centered modal */
.top-subnets-tooltip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222;
  color: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 999999;
  pointer-events: auto;
  max-width: 520px;
  max-height: 400px;
  overflow: hidden;
  display: none;
}

.top-subnets-tooltip[style*="display: block"] {
  opacity: 1;
  pointer-events: auto;
}

.top-subnets-tooltip.light-bg {
  background: #f5f5f5;
  color: #222;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.top-subnets-tooltip.light-bg {
  background: #f5f5f5;
  color: #222;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-subnets-tooltip.light-bg .tooltip-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tooltip-title {
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -0.02em;
}

.tooltip-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  padding: 4px 6px;
  line-height: 1;
  transition: opacity 0.2s;
  font-weight: 600;
}

.tooltip-close:hover {
  opacity: 0.8;
}

.top-subnets-tooltip.light-bg .tooltip-close {
  color: #222;
}

.tooltip-content {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.tooltip-content::-webkit-scrollbar {
  width: 6px;
}

.tooltip-content::-webkit-scrollbar-track {
  background: transparent;
}

.tooltip-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.tooltip-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.top-subnets-tooltip.light-bg .tooltip-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.top-subnets-tooltip.light-bg .tooltip-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

.top-subnets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  color: #fff;
}

.top-subnets-table.light-bg {
  color: #222;
}

.top-subnets-table thead {
  background: rgba(34, 197, 94, 0.12);
}

.top-subnets-table.light-bg thead {
  background: rgba(34, 197, 94, 0.08);
}

.top-subnets-table th {
  padding: 10px 8px;
  text-align: left;
  font-weight: 700;
  color: #22c55e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.02em;
  font-size: 0.85em;
  text-transform: uppercase;
}

.top-subnets-table.light-bg th {
  color: #15803d;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.top-subnets-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-subnets-table.light-bg td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.top-subnets-table tbody tr {
  transition: background 0.15s ease;
}

.top-subnets-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.08);
}

.top-subnets-table.light-bg tbody tr:hover {
  background: rgba(34, 197, 94, 0.06);
}

.top-subnets-table .rank {
  font-weight: 700;
  color: #22c55e;
  min-width: 24px;
}

.top-subnets-table.light-bg .rank {
  color: #15803d;
}

.top-subnets-table .subnet-name {
  font-weight: 600;
}

.top-subnets-table .share {
  color: #22c55e;
  font-weight: 600;
}

.top-subnets-table.light-bg .share {
  color: #15803d;
}

/* ===== Top Subnets Display Card ===== */
.top-subnets-card {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.top-subnets-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-subnets-card .card-header h2 {
  flex: 1 1 auto;
}

/* Toggle wrapper for centering */
.toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

/* View Toggle Buttons */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 5px;
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.view-toggle .toggle-btn {
  padding: 4px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.view-toggle .toggle-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.view-toggle .toggle-btn.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

/* Larger toggle on tablet+ */
@media (min-width: 768px) {
  .view-toggle {
    gap: 4px;
    padding: 5px;
  }
  .view-toggle .toggle-btn {
    padding: 7px 18px;
    font-size: 0.85rem;
  }
}

/* Probability column for Hybrid view */
.subnets-display-table .prob-col {
  color: #a855f7;
  font-weight: 600;
}

.subnets-display-table th.prob-header {
  color: #a855f7;
}

/* Hybrid teaser: blurred rows */
.subnets-display-table .blurred-row {
  filter: blur(4px);
  opacity: 0.4;
  user-select: none;
  pointer-events: none;
  contain: paint; /* isolate blur effect from layout */
}

/* Pro overlay row */
.subnets-display-table .pro-overlay-row td {
  padding: 0;
  border: none;
  background: transparent;
}

.pro-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 6px;
  margin: 8px 0;
  transition: all 0.2s ease;
}

.pro-overlay:hover {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.25) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-color: rgba(168, 85, 247, 0.5);
  transform: scale(1.01);
}

.pro-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #ffd700 100%);
  background-size: 200% 100%;
  color: #1a1a2e;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(255, 215, 0, 0.4);
  animation: pro-shimmer 2s ease-in-out infinite;
}

@keyframes pro-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.pro-text {
  color: #a855f7;
  font-size: 0.8rem;
  font-weight: 500;
}

.pro-joke {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-style: italic;
}

/* Light mode: dark joke text */
@media (prefers-color-scheme: light) {
  .pro-joke {
    color: rgba(30, 30, 30, 0.8);
  }
}
body.light-bg .pro-joke {
  color: rgba(30, 30, 30, 0.8);
}

/* Mobile: compact pro overlay */
@media (max-width: 600px) {
  .subnets-display-table .pro-overlay-row td {
    position: relative;
  }

  .pro-overlay {
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    margin: 4px 0;
  }

  .pro-text {
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.4;
  }

  .pro-joke {
    display: block;
    font-size: 0.7rem;
    margin-top: 4px;
    white-space: normal;
  }

  /* Force table to respect container on mobile */
  .subnets-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  .subnets-display-table {
    min-width: 0;
  }
}

.subnets-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(34, 197, 94, 0.1);
}

.subnets-display-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1em;
  color: var(--text);
  table-layout: fixed;
  font-family: 'Courier New', Consolas, monospace;
}

.subnets-display-table thead {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.06) 100%);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(34, 197, 94, 0.25);
}

.subnets-display-table th {
  padding: 14px 8px;
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9em;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
}

/* 7-column layout with golden ratio proportions (φ ≈ 1.618)
   Primary columns (Subnet, MCap) get φ weight, secondary get 1 weight
   Rank: 5% | Subnet: 26% | Share: 8% | Daily: 13% | Alpha: 13% | Pool: 13% | MCap: 22% */
.subnets-display-table th:nth-child(1),
.subnets-display-table td:nth-child(1) {
  width: 5%;
}

.subnets-display-table th:nth-child(2),
.subnets-display-table td:nth-child(2) {
  width: 26%;
}

.subnets-display-table th:nth-child(3),
.subnets-display-table td:nth-child(3) {
  width: 8%;
}

.subnets-display-table th:nth-child(4),
.subnets-display-table td:nth-child(4) {
  width: 13%;
}

.subnets-display-table th:nth-child(5),
.subnets-display-table td:nth-child(5) {
  width: 13%;
}

.subnets-display-table th:nth-child(6),
.subnets-display-table td:nth-child(6) {
  width: 13%;
}

.subnets-display-table th:nth-child(7),
.subnets-display-table td:nth-child(7) {
  width: 22%;
}

.subnets-display-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.subnets-display-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.06);
  border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.subnets-display-table td {
  padding: 12px 8px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* white-space for all td */
.subnets-display-table td {
  white-space: nowrap;
}

.subnets-display-table .rank-col {
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.0em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.subnets-display-table tbody tr:hover .rank-col {
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.subnets-display-table .subnet-col {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.subnets-display-table .share-col {
  text-align: left;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.subnets-display-table .daily-col {
  text-align: left;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Alpha price columns - all left-aligned */
.subnets-display-table .price-col {
  text-align: left;
  color: #3b82f6;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.subnets-display-table .pool-col {
  text-align: left;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.subnets-display-table .mcap-col {
  text-align: left;
  color: #f59e0b;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.subnets-display-table .mcap-usd {
  color: #22c55e;
  font-size: 0.85em;
  font-weight: 500;
}

/* Change column and rank indicators */
.subnets-display-table .change-col {
  text-align: center;
  font-weight: 700;
  font-size: 0.85em;
  padding: 12px 4px;
}

.subnets-display-table .rank-up {
  color: #22c55e;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.subnets-display-table .rank-down {
  color: #ef4444;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.subnets-display-table .rank-same {
  color: var(--text-muted);
  opacity: 0.5;
}

.subnets-display-table .rank-new {
  color: #3b82f6;
  font-size: 0.75em;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
  white-space: nowrap;
}

.subnets-display-table .rank-up,
.subnets-display-table .rank-down {
  white-space: nowrap;
}

/* Zero emission warning (high mcap, no revenue) */
.subnets-display-table .zero-emission-row {
  background: rgba(239, 68, 68, 0.08) !important;
}

.subnets-display-table .zero-emission-row:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* ===== Momentum Indicators (3+ rank change in 7d) ===== */

/* Glowing badge indicator */
.momentum-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  cursor: help;
}

/* Rising badge - green glow */
.momentum-badge.fire {
  background: radial-gradient(circle at 30% 70%, #22c55e 0%, #16a34a 50%, #4ade80 100%);
  box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34, 197, 94, 0.4);
  animation: rise-glow 2s ease-in-out infinite;
}

/* Falling badge - red glow */
.momentum-badge.cold {
  background: radial-gradient(circle at 30% 70%, #ef4444 0%, #dc2626 50%, #f87171 100%);
  box-shadow: 0 0 6px #ef4444, 0 0 12px rgba(239, 68, 68, 0.4);
  animation: fall-glow 2s ease-in-out infinite;
}

@keyframes rise-glow {
  0%, 100% { box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 10px #16a34a, 0 0 20px rgba(22, 163, 74, 0.5); }
}

@keyframes fall-glow {
  0%, 100% { box-shadow: 0 0 6px #ef4444, 0 0 12px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 10px #dc2626, 0 0 20px rgba(220, 38, 38, 0.5); }
}

/* Row highlight for rising - gold gradient + border */
.subnets-display-table .momentum-up {
  background: linear-gradient(90deg,
    rgba(247, 147, 26, 0.1) 0%,
    rgba(255, 215, 0, 0.05) 30%,
    transparent 60%) !important;
}

.subnets-display-table .momentum-up td:first-child {
  border-left: 3px solid #f7931a;
}

/* Row highlight for falling - red gradient + border */
.subnets-display-table .momentum-down {
  background: linear-gradient(90deg,
    rgba(239, 68, 68, 0.1) 0%,
    rgba(248, 113, 113, 0.05) 30%,
    transparent 60%) !important;
}

.subnets-display-table .momentum-down td:first-child {
  border-left: 3px solid #ef4444;
}

/* Mobile: smaller badge, thinner border */
@media (max-width: 768px) {
  .momentum-badge {
    width: 6px;
    height: 6px;
    margin-right: 4px;
  }

  .subnets-display-table .momentum-up td:first-child,
  .subnets-display-table .momentum-down td:first-child {
    border-left-width: 2px;
  }
}

.subnets-display-table .emission-warning {
  font-size: 0.85em;
  margin-left: 4px;
  cursor: help;
}

.subnets-display-table .zero-emission {
  color: #ef4444;
  font-weight: 600;
}

/* 7-day rank change indicator (compact, under the ranking) */
.subnets-display-table .rank-7d {
  font-size: 0.65em;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.7;
}

.subnets-display-table .rank-7d-up {
  color: #f7931a;
}

.subnets-display-table .rank-7d-down {
  color: #ef4444;
}

.subnets-display-table .sn-id {
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
  opacity: 0.7;
}

/* Champion Title Rows - Boxing Style */
.subnets-display-table .champion-title-row {
  background: transparent;
  border: none;
}

.subnets-display-table .champion-title-row td {
  padding: 14px 12px 6px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  border: none;
  background: transparent;
}

/* Champion SVG icons */
.subnets-display-table .champion-belt-icon,
.subnets-display-table .champion-crown-icon {
  width: 1.4em;
  height: 0.8em;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
}

.subnets-display-table .champion-crown-icon {
  height: 1em;
}

.subnets-display-table .champion-title-row:hover {
  background: transparent;
}

/* P4P Champion - Gold */
.subnets-display-table .champion-p4p td {
  color: #D4AF37;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

/* WBA Champion - Red/Gold */
.subnets-display-table .champion-wba td {
  color: #dc2626;
  text-shadow: 0 0 8px rgba(220, 38, 38, 0.3);
}

/* WBC Champion - Green */
.subnets-display-table .champion-wbc td {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

/* IBF Champion - Blue */
.subnets-display-table .champion-ibf td {
  color: #3b82f6;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

/* IBO Champion - Purple */
.subnets-display-table .champion-ibo td {
  color: #a855f7;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

/* Contenders - Silver/Gray */
.subnets-display-table .champion-contender td {
  color: #9ca3af;
  text-shadow: 0 0 6px rgba(156, 163, 175, 0.3);
  font-size: 0.8rem;
  padding-top: 18px;
}

/* Glove icon sizing */
.subnets-display-table .champion-glove-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
}

/* Gold highlight for first-place subnet */
.subnets-display-table tbody tr:first-child {
  background: transparent;
}

.subnets-display-table tbody tr:first-child::before {
  background: transparent;
  box-shadow: none;
}

.subnets-display-table tbody tr:first-child:hover {
  background: rgba(34, 197, 94, 0.06);
}

/* Champion gold accent - Apple-like subtle elegance */
.subnets-display-table tbody tr:first-child .rank-col {
  color: #D4AF37;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.subnets-display-table tbody tr:first-child .share-col {
  color: #D4AF37;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
}

/* Loading row styling */
.subnets-display-table .loading-row td {
  padding: 24px 8px;
  color: var(--text-muted);
  text-align: center;
}

/* ===== Light Mode Overrides for Top Subnets Table ===== */
.top-subnets-card.light-bg .subnets-table-wrapper {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.top-subnets-card.light-bg .subnets-display-table thead {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.05) 100%);
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.top-subnets-card.light-bg .subnets-display-table th {
  border-bottom: none;
  color: #15803d;
}

.top-subnets-card.light-bg .subnets-display-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
}

.top-subnets-card.light-bg .subnets-display-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.05);
  border-bottom: 1px solid rgba(34, 197, 94, 0.12);
}

.top-subnets-card.light-bg .subnets-display-table .rank-col,
.top-subnets-card.light-bg .subnets-display-table .share-col {
  color: #15803d;
}

.top-subnets-card.light-bg .subnets-display-table .subnet-col {
  color: #1a1a1a;
}

.top-subnets-card.light-bg .subnets-display-table .daily-col {
  color: #666;
}

.top-subnets-card.light-bg .subnets-display-table .price-col {
  color: #2563eb;
}

.top-subnets-card.light-bg .subnets-display-table .pool-col {
  color: #666;
}

.top-subnets-card.light-bg .subnets-display-table .mcap-col {
  color: #d97706;
}

.top-subnets-card.light-bg .subnets-display-table tbody tr:first-child {
  background: transparent;
}

.top-subnets-card.light-bg .subnets-display-table tbody tr:first-child .rank-col {
  color: #B8860B;
  text-shadow: none;
}

.top-subnets-card.light-bg .subnets-display-table tbody tr:first-child .share-col {
  color: #B8860B;
  text-shadow: none;
}

.top-subnets-card.light-bg .subnets-display-table .loading-row td {
  color: #888;
}

/* Light mode champion titles */
.top-subnets-card.light-bg .subnets-display-table .champion-title-row td {
  text-shadow: none;
}

.top-subnets-card.light-bg .subnets-display-table .champion-p4p td {
  color: #B8860B;
}

.top-subnets-card.light-bg .subnets-display-table .champion-wba td {
  color: #b91c1c;
}

.top-subnets-card.light-bg .subnets-display-table .champion-wbc td {
  color: #15803d;
}

.top-subnets-card.light-bg .subnets-display-table .champion-ibf td {
  color: #1d4ed8;
}

.top-subnets-card.light-bg .subnets-display-table .champion-ibo td {
  color: #7c3aed;
}

.top-subnets-card.light-bg .subnets-display-table .champion-contender td {
  color: #6b7280;
}

/* ===== Responsive Styles for Subnets Table (7 columns) ===== */
@media (max-width: 900px) {
  /* Hide Pool column on tablets */
  .subnets-display-table .pool-col {
    display: none;
  }
}

@media (max-width: 768px) {
  .subnets-display-table {
    font-size: 0.88em;
    table-layout: auto;
  }

  .subnets-display-table th,
  .subnets-display-table td {
    padding: 10px 5px;
  }

  /* Hide Pool column on smaller tablets - keep Share/Probability visible */
  .subnets-display-table .pool-col {
    display: none;
  }
}

@media (max-width: 600px) {
  .subnets-display-table {
    font-size: 0.82em;
  }

  .subnets-display-table th,
  .subnets-display-table td {
    padding: 10px 3px;
  }

  .subnets-display-table .rank-col {
    min-width: 50px;
    max-width: 70px;
  }
}

@media (max-width: 480px) {
  .subnets-display-table {
    font-size: 0.75em;
  }

  .subnets-display-table th,
  .subnets-display-table td {
    padding: 8px 2px;
  }

  .subnets-display-table .rank-col {
    min-width: 45px;
    max-width: 60px;
  }

  /* Hide Daily column on mobile phones */
  .subnets-display-table .daily-col {
    display: none;
  }

  .subnets-display-table .rank-new {
    font-size: 0.7em;
  }
}

/* ===== Newcomers Card (Talent Scouting) ===== */
.newcomers-card {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.newcomers-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(168, 85, 247, 0.15);
}

.newcomers-display-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  color: var(--text);
  table-layout: fixed;
  font-family: 'Courier New', Consolas, monospace;
}

.newcomers-display-table thead {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%);
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

.newcomers-display-table th {
  padding: 10px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a855f7;
  border-bottom: none;
}

.newcomers-display-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease;
}

.newcomers-display-table tbody tr:hover {
  background: rgba(168, 85, 247, 0.08);
}

.newcomers-display-table td {
  padding: 10px 8px;
  vertical-align: middle;
}

.newcomers-display-table .rank-col { width: 50px; color: #a855f7; font-weight: 600; }
.newcomers-display-table .subnet-col { width: auto; }
.newcomers-display-table .share-col { width: 85px; color: #22c55e; }
.newcomers-display-table .momentum-col { width: 60px; text-align: center; }
.newcomers-display-table .pool-col { width: 80px; color: #888; }
.newcomers-display-table .mcap-col { width: 120px; color: #f59e0b; }

/* Emission health indicator */
.newcomers-display-table .health-icon {
  margin-right: 3px;
  font-size: 0.9em;
}
.newcomers-display-table .emission-healthy { color: #22c55e; }
.newcomers-display-table .emission-rising { color: #eab308; }
.newcomers-display-table .emission-struggling { color: #f97316; }
.newcomers-display-table .emission-critical { color: #ef4444; }

.newcomers-display-table .sn-id {
  color: #a855f7;
  font-weight: 700;
  margin-right: 4px;
  opacity: 0.7;
}

.newcomers-display-table .mcap-usd {
  color: #666;
  font-size: 0.85em;
}

/* Star icon for newcomers */
.newcomer-star-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 4px;
  color: #f59e0b;
  display: inline-block;
}

/* Momentum badge */
.newcomers-display-table .momentum-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: 600;
}

/* Prospect title rows */
.newcomers-display-table .prospect-title-row {
  background: transparent;
  border: none;
}

.newcomers-display-table .prospect-title-row td {
  padding: 12px 8px 4px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border: none;
  background: transparent;
}

.newcomers-display-table .prospect-title-row:hover {
  background: transparent;
}

/* Top Prospect - Gold star */
.newcomers-display-table .prospect-top td {
  color: #f59e0b;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Hot Prospects - Orange fire */
.newcomers-display-table .prospect-hot td {
  color: #f97316;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
}

/* Rising Prospects - Green chart */
.newcomers-display-table .prospect-rising td {
  color: #22c55e;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

/* Watch List - Blue eye (no historical data yet) */
.newcomers-display-table .prospect-watch td {
  color: #3b82f6;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

/* Fallen Angels - Red warning */
.newcomers-display-table .prospect-fallen td {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* Intro row - TOP PROSPECT or FALLEN ANGEL?! (during data collection) */
.newcomers-display-table .prospect-intro-row td {
  text-align: center;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 12px 8px 8px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.newcomers-display-table .prospect-intro-row .or-text {
  color: #888;
  font-weight: 400;
  font-style: italic;
  margin: 0 4px;
}

.newcomers-display-table .prospect-intro-row .question-mark {
  color: #ef4444;
  animation: pulse-question 2s ease-in-out infinite;
}

@keyframes pulse-question {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Rising momentum badge - green */
.newcomers-display-table .momentum-badge.rising {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

/* Falling momentum badge - red */
.newcomers-display-table .momentum-badge.falling {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Fallen Giant styling - former Top 10 that crashed */
.newcomers-display-table .momentum-badge.fallen-giant {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(239, 68, 68, 0.3));
  color: #f97316;
  font-weight: 600;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.newcomers-display-table .fallen-giant-row {
  background: rgba(139, 69, 19, 0.1);
}

.newcomers-display-table .giant-badge {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-left: 0.25rem;
}

/* Watch list row styling */
.newcomers-display-table .watchlist-row {
  opacity: 0.9;
}

/* TBD momentum badge */
.newcomers-display-table .momentum-tbd {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 500;
}

/* Eye icon */
.newcomer-eye-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
}

/* Prospect icons */
.newcomer-star-icon,
.newcomer-fire-icon,
.newcomer-chart-icon,
.newcomer-hourglass-icon,
.newcomer-fallen-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
}

/* Newcomers blur teaser */
.newcomers-display-table .blurred-row {
  filter: blur(4px);
  opacity: 0.4;
  user-select: none;
  pointer-events: none;
}

.newcomers-display-table .pro-overlay-row td {
  padding: 0;
  border: none;
  background: transparent;
}

/* Light mode */
.newcomers-card.light-bg .newcomers-table-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(168, 85, 247, 0.2);
}

.newcomers-card.light-bg .newcomers-display-table thead {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.newcomers-card.light-bg .newcomers-display-table th {
  color: #7c3aed;
}

.newcomers-card.light-bg .newcomers-display-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.newcomers-card.light-bg .newcomers-display-table tbody tr:hover {
  background: rgba(168, 85, 247, 0.08);
}

.newcomers-card.light-bg .newcomers-display-table .rank-col,
.newcomers-card.light-bg .newcomers-display-table .sn-id {
  color: #7c3aed;
}

.newcomers-card.light-bg .newcomers-display-table .prospect-title-row td {
  text-shadow: none;
}

.newcomers-card.light-bg .newcomers-display-table .prospect-top td {
  color: #d97706;
}

.newcomers-card.light-bg .newcomers-display-table .prospect-hot td {
  color: #ea580c;
}

.newcomers-card.light-bg .newcomers-display-table .prospect-rising td {
  color: #16a34a;
}

.newcomers-card.light-bg .newcomers-display-table .prospect-fallen td {
  color: #dc2626;
}

.newcomers-card.light-bg .newcomers-display-table .prospect-intro-row td {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.15));
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.newcomers-card.light-bg .newcomers-display-table .prospect-intro-row .or-text {
  color: #666;
}

.newcomers-card.light-bg .newcomers-display-table .momentum-badge.falling {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.newcomers-card.light-bg .newcomers-display-table .momentum-badge.fallen-giant {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.2), rgba(220, 38, 38, 0.2));
  color: #c2410c;
  border-color: rgba(194, 65, 12, 0.3);
}

.newcomers-card.light-bg .newcomers-display-table .fallen-giant-row {
  background: rgba(180, 83, 9, 0.08);
}

.newcomers-card.light-bg .newcomers-display-table .prospect-watch td {
  color: #2563eb;
}

.newcomers-card.light-bg .newcomers-display-table .momentum-tbd {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

/* ===== Talent Scouting Mobile Styles ===== */
@media (max-width: 768px) {
  .newcomers-display-table {
    font-size: 0.85em;
    table-layout: auto;
  }

  .newcomers-display-table th,
  .newcomers-display-table td {
    padding: 8px 4px;
  }

  .newcomers-display-table .rank-col { width: 35px; }
  .newcomers-display-table .subnet-col { min-width: 80px; }
  .newcomers-display-table .share-col { width: 65px; }
  .newcomers-display-table .momentum-col { width: 45px; }
  .newcomers-display-table .pool-col { width: 55px; }
  .newcomers-display-table .mcap-col { width: 70px; }

  /* Hide USD mcap on tablet */
  .newcomers-display-table .mcap-usd {
    display: none;
  }
}

@media (max-width: 600px) {
  .newcomers-display-table {
    font-size: 0.8em;
  }

  .newcomers-display-table th,
  .newcomers-display-table td {
    padding: 6px 3px;
  }

  .newcomers-display-table .rank-col { width: 30px; font-size: 0.9em; }
  .newcomers-display-table .subnet-col { min-width: 70px; }
  .newcomers-display-table .share-col { width: 55px; }
  .newcomers-display-table .momentum-col { width: 40px; }
  .newcomers-display-table .pool-col { display: none; }
  .newcomers-display-table .mcap-col { width: 60px; }

  /* Hide pool header on small screens */
  .newcomers-display-table th:nth-child(5) {
    display: none;
  }

  .newcomers-display-table .sn-id {
    display: block;
    font-size: 0.85em;
  }

  .newcomers-display-table .momentum-badge {
    padding: 1px 4px;
    font-size: 0.8em;
  }

  .newcomers-display-table .prospect-title-row td {
    font-size: 0.7rem;
    padding: 8px 4px 2px 4px;
  }
}

@media (max-width: 420px) {
  .newcomers-display-table {
    font-size: 0.75em;
  }

  .newcomers-display-table th,
  .newcomers-display-table td {
    padding: 5px 2px;
  }

  .newcomers-display-table .rank-col { width: 25px; }
  .newcomers-display-table .share-col { width: 50px; }
  .newcomers-display-table .momentum-col { width: 35px; }
  .newcomers-display-table .mcap-col { width: 50px; }

  .newcomers-display-table .health-icon {
    font-size: 0.8em;
    margin-right: 1px;
  }

  .newcomers-display-table .momentum-badge {
    padding: 1px 3px;
    font-size: 0.75em;
  }

  .newcomers-display-table .prospect-title-row td {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
  }
}

/* ===== Top Validators Card ===== */
.top-validators-card {
  animation: fadeInUp 0.8s ease-out 0.25s both;
}

.validators-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(34, 197, 94, 0.1);
}

.validators-display-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96em;
  color: var(--text);
  table-layout: fixed;
  font-family: 'Courier New', Consolas, monospace;
}

.validators-display-table thead {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.06) 100%);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(34, 197, 94, 0.25);
}

.validators-display-table th {
  padding: 14px 8px;
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  font-size: 0.9em;
  text-transform: uppercase;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
}

/* Header colors to match data values */
.validators-display-table th.dominance-col {
  color: rgba(255, 255, 255, 0.85);
}

.validators-display-table th.nominators-col {
  color: rgba(255, 255, 255, 0.7);
}

/* 5 columns: Rank(12%), Validator(26%), Stake(24%), Dom%(19%), Noms(19%) */
.validators-display-table th:nth-child(1),
.validators-display-table td:nth-child(1) {
  width: 12%;
}

.validators-display-table th:nth-child(2),
.validators-display-table td:nth-child(2) {
  width: 26%;
}

.validators-display-table th:nth-child(3),
.validators-display-table td:nth-child(3) {
  width: 24%;
}

.validators-display-table th:nth-child(4),
.validators-display-table td:nth-child(4) {
  width: 19%;
}

.validators-display-table th:nth-child(5),
.validators-display-table td:nth-child(5) {
  width: 19%;
}

.validators-display-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.validators-display-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.06);
  border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.validators-display-table td {
  padding: 12px 8px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.validators-display-table td:nth-child(2) {
  white-space: normal;
}

.validators-display-table .rank-col {
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.0em;
  font-variant-numeric: tabular-nums;
}

.validators-display-table .validator-col {
  font-weight: 600;
  color: var(--text);
}

.validators-display-table td.stake-col {
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.validators-display-table td.dominance-col {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

.validators-display-table td.nominators-col {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

/* Rank change indicators */
.validators-display-table .rank-up {
  color: #22c55e;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.validators-display-table .rank-down {
  color: #ef4444;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.validators-display-table .rank-new {
  color: #3b82f6;
  font-size: 0.75em;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
  white-space: nowrap;
}

.validators-display-table .rank-up,
.validators-display-table .rank-down {
  white-space: nowrap;
}

/* Champion gold accent - #1 Validator */
.validators-display-table tbody tr:first-child .rank-col {
  color: #D4AF37;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.validators-display-table tbody tr:first-child .stake-col {
  color: #D4AF37;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
}

/* Light mode */
.top-validators-card.light-bg .validators-table-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.top-validators-card.light-bg .validators-display-table thead {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.04) 100%);
}

.top-validators-card.light-bg .validators-display-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.top-validators-card.light-bg .validators-display-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.08);
}

.top-validators-card.light-bg .validators-display-table .validator-col {
  color: #1a1a1a;
}

.top-validators-card.light-bg .validators-display-table .stake-col {
  color: #15803d;
}

.top-validators-card.light-bg .validators-display-table .dominance-col {
  color: #444;
}

.top-validators-card.light-bg .validators-display-table .nominators-col {
  color: #666;
}

/* Light mode gold for #1 validator */
.top-validators-card.light-bg .validators-display-table tbody tr:first-child .rank-col {
  color: #B8860B;
  text-shadow: none;
}

.top-validators-card.light-bg .validators-display-table tbody tr:first-child .stake-col {
  color: #B8860B;
  text-shadow: none;
}


/* ===== Alpha Pressure Card ===== */
.alpha-pressure-card {
  animation: fadeInUp 0.8s ease-out 0.25s both;
}

.alpha-pressure-card .filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.alpha-pressure-card .filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.alpha-pressure-card .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.alpha-pressure-card .subnet-search {
  padding: 6px 12px 6px 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 0.85em;
  width: 140px;
  transition: all 0.2s ease;
}

.alpha-pressure-card .subnet-search:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.05);
  width: 180px;
}

.alpha-pressure-card .subnet-search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.alpha-pressure-card .search-icon {
  position: absolute;
  left: 8px;
  font-size: 0.75em;
  opacity: 0.5;
  pointer-events: none;
}

.alpha-pressure-card .filter-btn {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alpha-pressure-card .filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.alpha-pressure-card .filter-btn.active {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.alpha-pressure-card .filter-btn.dumpers-btn {
  border-color: rgba(239, 68, 68, 0.3);
}

.alpha-pressure-card .filter-btn.dumpers-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
}

.alpha-pressure-card .filter-btn.dumpers-btn.active {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.alpha-pressure-card .pressure-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 0.9em;
}

.alpha-pressure-card .summary-item {
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.pressure-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
}

.pressure-display-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
  color: var(--text);
}

.pressure-display-table thead {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.04) 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pressure-display-table th {
  padding: 12px 8px;
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85em;
  letter-spacing: 0.03em;
}

.pressure-display-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease;
}

.pressure-display-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.06);
}

.pressure-display-table td {
  padding: 10px 8px;
  vertical-align: middle;
}

/* Column widths - compact for more data density */
.pressure-display-table .fav-col { width: 28px; text-align: center; }
.pressure-display-table .subnet-col { width: 18%; min-width: 100px; }
.pressure-display-table .emission-col { width: 12%; text-align: right; }
.pressure-display-table .flow-col { width: 14%; text-align: right; }
.pressure-display-table .pressure-col { width: 16%; text-align: right; }
.pressure-display-table .owner-col { width: 18%; text-align: center; }
.pressure-display-table .trend-col { width: 8%; text-align: center; }

/* Favorite button */
.pressure-display-table .fav-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 1.1em;
  padding: 4px;
  transition: all 0.2s ease;
}

.pressure-display-table .fav-btn:hover {
  color: #f59e0b;
  transform: scale(1.1);
}

.pressure-display-table .fav-btn.active {
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* Subnet column */
.pressure-display-table .subnet-name {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.pressure-display-table .subnet-id {
  display: block;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'SF Mono', monospace;
}

/* Pressure status colors (simple: green = buying, red = selling) */
.pressure-display-table .pressure-buying { color: #22c55e; font-weight: 500; }
.pressure-display-table .pressure-selling { color: #ef4444; font-weight: 500; }

/* Flow column colors */
.pressure-display-table .flow-col {
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}
.pressure-display-table .flow-positive { color: #22c55e; }
.pressure-display-table .flow-negative { color: #ef4444; }

/* Owner dump column */
.pressure-display-table .owner-col {
  font-size: 0.85em;
  text-align: center;
  cursor: help;
  white-space: nowrap;
}
.pressure-display-table .owner-unknown { color: rgba(255, 255, 255, 0.3); }
.pressure-display-table .owner-healthy { color: #22c55e; }
.pressure-display-table .owner-moderate { color: #fbbf24; }
.pressure-display-table .owner-high { color: #f97316; }
.pressure-display-table .owner-aggressive { color: #ef4444; font-weight: 600; }
.pressure-display-table .owner-30d { font-size: 0.8em; opacity: 0.6; }

/* Separator row */
.pressure-display-table .separator-row td {
  background: rgba(34, 197, 94, 0.08);
  font-weight: 600;
  text-align: center;
  color: var(--accent);
  font-size: 0.85em;
  padding: 6px;
}

/* Expand button */
.pressure-display-table .expand-row td {
  background: transparent;
}
.pressure-display-table .expand-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.2s ease;
}
.pressure-display-table .expand-btn:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* Light mode */
.alpha-pressure-card.light-bg .filter-btn {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.02);
}

.alpha-pressure-card.light-bg .filter-btn.active {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.alpha-pressure-card.light-bg .pressure-display-table .subnet-name {
  color: #1a1a1a;
}

.alpha-pressure-card.light-bg .pressure-display-table .fav-btn {
  color: rgba(0, 0, 0, 0.3);
}

.alpha-pressure-card.light-bg .subnet-search {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.02);
  color: #1a1a1a;
}

.alpha-pressure-card.light-bg .subnet-search::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.alpha-pressure-card.light-bg .subnet-search:focus {
  background: rgba(34, 197, 94, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
  .alpha-pressure-card .filter-bar {
    gap: 6px;
    flex-direction: column;
    align-items: stretch;
  }
  .alpha-pressure-card .filter-buttons {
    justify-content: center;
  }
  .alpha-pressure-card .search-wrapper {
    width: 100%;
  }
  .alpha-pressure-card .subnet-search {
    width: 100%;
  }
  .alpha-pressure-card .subnet-search:focus {
    width: 100%;
  }
  .alpha-pressure-card .filter-btn {
    padding: 5px 10px;
    font-size: 0.8em;
  }
  .pressure-display-table {
    font-size: 0.85em;
  }
  .pressure-display-table th,
  .pressure-display-table td {
    padding: 8px 5px;
  }
}

/* ===== Top Wallets Card ===== */
.top-wallets-card {
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.wallets-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(34, 197, 94, 0.1);
}

.wallets-display-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96em;
  color: var(--text);
  table-layout: fixed;
  font-family: 'Courier New', Consolas, monospace;
}

.wallets-display-table thead {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.06) 100%);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(34, 197, 94, 0.25);
}

.wallets-display-table th {
  padding: 14px 8px;
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  font-size: 0.9em;
  text-transform: uppercase;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
}

/* Header colors to match data values */
.wallets-display-table th.dominance-col {
  color: rgba(255, 255, 255, 0.85);
}

.wallets-display-table th.staked-col {
  color: rgba(255, 255, 255, 0.7);
}

/* 5 columns: Rank(12%), Wallet(28%), Balance(24%), Dom%(18%), Staked%(18%) */
.wallets-display-table th:nth-child(1),
.wallets-display-table td:nth-child(1) {
  width: 12%;
}

.wallets-display-table th:nth-child(2),
.wallets-display-table td:nth-child(2) {
  width: 28%;
}

.wallets-display-table th:nth-child(3),
.wallets-display-table td:nth-child(3) {
  width: 24%;
}

.wallets-display-table th:nth-child(4),
.wallets-display-table td:nth-child(4) {
  width: 18%;
}

.wallets-display-table th:nth-child(5),
.wallets-display-table td:nth-child(5) {
  width: 18%;
}

.wallets-display-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.wallets-display-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.06);
  border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.wallets-display-table td {
  padding: 12px 8px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallets-display-table td:nth-child(2) {
  white-space: normal;
}

.wallets-display-table .rank-col {
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.0em;
  font-variant-numeric: tabular-nums;
}

.wallets-display-table .wallet-col {
  font-weight: 600;
  color: var(--text);
}

.wallets-display-table .wallet-col .wallet-identity {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.wallets-display-table .wallet-col .wallet-address {
  display: block;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.wallets-display-table .wallet-col .wallet-address-only {
  font-size: 0.9em;
  color: var(--text);
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.wallets-display-table td.balance-col {
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.wallets-display-table td.dominance-col {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

.wallets-display-table td.staked-col {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

/* Rank change indicators */
.wallets-display-table .rank-up {
  color: #22c55e;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.wallets-display-table .rank-down {
  color: #ef4444;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.wallets-display-table .rank-new {
  color: #3b82f6;
  font-size: 0.75em;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
  white-space: nowrap;
}

.wallets-display-table .rank-up,
.wallets-display-table .rank-down {
  white-space: nowrap;
}

/* Champion gold accent - #1 Wallet */
.wallets-display-table tbody tr:first-child .rank-col {
  color: #D4AF37;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.wallets-display-table tbody tr:first-child .balance-col {
  color: #D4AF37;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
}

/* Light mode */
.top-wallets-card.light-bg .wallets-table-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.top-wallets-card.light-bg .wallets-display-table thead {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.04) 100%);
}

.top-wallets-card.light-bg .wallets-display-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.top-wallets-card.light-bg .wallets-display-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.08);
}

.top-wallets-card.light-bg .wallets-display-table .wallet-col {
  color: #1a1a1a;
}

.top-wallets-card.light-bg .wallets-display-table .wallet-col .wallet-identity {
  color: #1a1a1a;
}

.top-wallets-card.light-bg .wallets-display-table .wallet-col .wallet-address {
  color: #555;
}

.top-wallets-card.light-bg .wallets-display-table .wallet-col .wallet-address-only {
  color: #1a1a1a;
  font-size: 0.9em;
}

.top-wallets-card.light-bg .wallets-display-table .balance-col {
  color: #15803d;
}

.top-wallets-card.light-bg .wallets-display-table .dominance-col {
  color: #1a1a1a;
}

.top-wallets-card.light-bg .wallets-display-table .staked-col {
  color: #1a1a1a;
}

/* Light mode gold for #1 wallet */
.top-wallets-card.light-bg .wallets-display-table tbody tr:first-child .rank-col {
  color: #B8860B;
  text-shadow: none;
}

.top-wallets-card.light-bg .wallets-display-table tbody tr:first-child .balance-col {
  color: #B8860B;
  text-shadow: none;
}

/* ===== Responsive Styles for 5-column Tables (Validators & Wallets) ===== */
@media (max-width: 768px) {
  .validators-display-table,
  .wallets-display-table {
    font-size: 0.88em;
    table-layout: auto;
  }

  .validators-display-table th,
  .validators-display-table td,
  .wallets-display-table th,
  .wallets-display-table td {
    padding: 10px 5px;
  }
}

@media (max-width: 600px) {
  .validators-display-table,
  .wallets-display-table {
    font-size: 0.82em;
  }

  .validators-display-table th,
  .validators-display-table td,
  .wallets-display-table th,
  .wallets-display-table td {
    padding: 10px 3px;
  }

  /* Rank-Spalte schmaler auf Mobile */
  .validators-display-table th:nth-child(1),
  .validators-display-table td:nth-child(1),
  .wallets-display-table th:nth-child(1),
  .wallets-display-table td:nth-child(1) {
    width: auto;
    min-width: 50px;
    max-width: 70px;
  }

  .validators-display-table .rank-col,
  .wallets-display-table .rank-col {
    min-width: 50px;
    max-width: 70px;
  }
}

@media (max-width: 480px) {
  .validators-display-table,
  .wallets-display-table {
    font-size: 0.75em;
  }

  .validators-display-table th,
  .validators-display-table td,
  .wallets-display-table th,
  .wallets-display-table td {
    padding: 8px 2px;
  }

  /* Rank-Spalte noch schmaler auf sehr kleinen Screens */
  .validators-display-table th:nth-child(1),
  .validators-display-table td:nth-child(1),
  .wallets-display-table th:nth-child(1),
  .wallets-display-table td:nth-child(1) {
    width: auto;
    min-width: 45px;
    max-width: 60px;
  }

  .validators-display-table .rank-col,
  .wallets-display-table .rank-col {
    min-width: 45px;
    max-width: 60px;
  }

  .validators-display-table .rank-new,
  .wallets-display-table .rank-new {
    font-size: 0.7em;
  }
}

/* ===== Leaderboard Footer (Subnets, Validators, Wallets) ===== */
.leaderboard-footer {
  text-align: center;
  padding-top: 0.5rem;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.leaderboard-update {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.top-subnets-card.light-bg .leaderboard-footer,
.top-validators-card.light-bg .leaderboard-footer,
.top-wallets-card.light-bg .leaderboard-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* ===== Modern Tooltip System ===== */
.modern-tooltip {
  position: fixed;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  max-width: 320px;
  font-size: 0.85em;
  line-height: 1.6;
  color: #e5e7eb;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(34, 197, 94, 0.15);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modern-tooltip.visible {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}

.modern-tooltip.wide {
  max-width: 500px;
}

.modern-tooltip.has-close {
  padding-right: 40px;
}

.modern-tooltip .tooltip-body {
  white-space: pre-line;
}

.modern-tooltip .tooltip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  color: #22c55e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  pointer-events: auto;
}

.modern-tooltip .tooltip-close:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
}

/* Tooltip arrow (optional, using data-position) */
.modern-tooltip[data-position="bottom"]::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(34, 197, 94, 0.3);
}

.modern-tooltip[data-position="top"]::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(34, 197, 94, 0.3);
}

/* Tooltip chips (for status indicators) */
.tooltip-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.tooltip-chip.ok {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.tooltip-chip.error {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.tooltip-chip.partial {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

/* Light mode tooltips */
body.light-bg .modern-tooltip {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(22, 163, 74, 0.3);
  color: #1a1a1a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 15px rgba(22, 163, 74, 0.1);
}

body.light-bg .modern-tooltip .tooltip-close {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.3);
  color: #16a34a;
}

body.light-bg .modern-tooltip .tooltip-close:hover {
  background: rgba(22, 163, 74, 0.2);
  border-color: rgba(22, 163, 74, 0.5);
}

body.light-bg .modern-tooltip[data-position="bottom"]::before {
  border-bottom-color: rgba(22, 163, 74, 0.3);
}

body.light-bg .modern-tooltip[data-position="top"]::before {
  border-top-color: rgba(22, 163, 74, 0.3);
}

body.light-bg .tooltip-chip.ok {
  background: rgba(22, 163, 74, 0.15);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.4);
}

body.light-bg .tooltip-chip.error {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.4);
}

body.light-bg .tooltip-chip.partial {
  background: rgba(202, 138, 4, 0.15);
  color: #ca8a04;
  border-color: rgba(202, 138, 4, 0.4);
}

/* --- System Failure Easter Egg --- */
.refresh-indicator.system-failure {
  animation: failure-blink 0.5s ease-in-out infinite;
}

.refresh-indicator .failure-text {
  color: #ef4444;
  -webkit-text-fill-color: #ef4444;
  font-family: 'Courier New', monospace;
  font-size: 6px;
  font-weight: bold;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

@media (min-width: 600px) {
  .refresh-indicator .failure-text {
    font-size: 7px;
  }
}

@keyframes failure-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Glitch effect for system failure trigger */
@keyframes failure-glitch {
  0% { transform: translate(0); filter: hue-rotate(0deg); }
  10% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  20% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
  30% { transform: translate(-1px, 2px); filter: hue-rotate(270deg); }
  40% { transform: translate(1px, -2px); filter: hue-rotate(360deg); }
  50% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  60% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
  70% { transform: translate(-1px, 2px); filter: hue-rotate(270deg); }
  80% { transform: translate(1px, -2px); filter: hue-rotate(0deg); }
  90% { transform: translate(-2px, 1px); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

.glitch-effect {
  animation: failure-glitch 0.3s ease-in-out;
}


/* --- Distribution Card --- */
.distribution-card {
  grid-column: span 1;
}

.distribution-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.distribution-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #a1a1a1);
  margin-bottom: 0.75rem;
}

/* Percentile Grid */
.percentile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.percentile-item {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 8px;
}

.percentile-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary, #a1a1a1);
  margin-bottom: 0.25rem;
}

.percentile-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-primary, #22c55e);
}

/* Brackets List */
.brackets-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bracket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border-left: 3px solid rgba(34, 197, 94, 0.4);
}

.bracket-threshold {
  font-size: 0.85rem;
  color: var(--text-primary, #fff);
  font-weight: 500;
}

.bracket-count {
  font-size: 0.8rem;
  color: var(--text-secondary, #a1a1a1);
}

/* Distribution Footer */
.distribution-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  color: var(--text-tertiary, #666);
}

/* Light mode adjustments */
body.light-bg .percentile-item {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}

body.light-bg .bracket-item {
  background: rgba(0, 0, 0, 0.03);
}

body.light-bg .distribution-footer {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (min-width: 768px) {
  .percentile-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .brackets-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .bracket-item {
    flex: 1 1 calc(50% - 0.25rem);
  }
}

/* Distribution Credit Link */
.distribution-credit {
  font-size: 0.65rem;
  color: var(--text-tertiary, #555);
}

.distribution-credit a {
  color: var(--accent-primary, #22c55e);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.distribution-credit a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEVELOPER ACTIVITY CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.developer-activity-card {
  grid-column: span 1;
}

.developer-activity-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Headline Metrics Grid */
.dev-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.dev-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 8px;
  text-align: center;
}

.dev-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary, #22c55e);
  line-height: 1.1;
}

.dev-metric-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-primary, #fff);
  margin-top: 0.25rem;
}

.dev-metric-sub {
  font-size: 0.65rem;
  color: var(--text-tertiary, #666);
}

.dev-metric-trend {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--accent-primary, #22c55e);
  margin-top: 0.25rem;
}

/* Repository Section */
.dev-repos-section {
  margin-top: 0.5rem;
}

.dev-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #a1a1a1);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-repos-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dev-repo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border-left: 3px solid rgba(34, 197, 94, 0.4);
}

.dev-repo-item.loading {
  opacity: 0.5;
}

.dev-repo-name {
  font-size: 0.8rem;
  color: var(--text-primary, #fff);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-repo-bar-container {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.dev-repo-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 4px;
  transition: width 0.5s ease-out;
}

.dev-repo-commits {
  font-size: 0.75rem;
  color: var(--text-secondary, #a1a1a1);
  min-width: 70px;
  text-align: right;
}

/* Footer */
.developer-activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  color: var(--text-tertiary, #666);
}

.dev-github-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary, #a1a1a1);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.2s;
}

.dev-github-link:hover {
  color: var(--accent-primary, #22c55e);
}

.dev-github-link svg {
  opacity: 0.8;
}

.dev-update {
  font-size: 0.65rem;
  color: var(--text-tertiary, #555);
}

/* Light mode adjustments */
body.light-bg .dev-metric {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}

body.light-bg .dev-metric-label {
  color: var(--text-primary, #1a1a1a);
}

body.light-bg .dev-repo-item {
  background: rgba(0, 0, 0, 0.03);
}

body.light-bg .dev-section-title {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light-bg .developer-activity-footer {
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.light-bg .dev-repo-bar-container {
  background: rgba(0, 0, 0, 0.08);
}

/* Responsive - Mobile */
@media (max-width: 480px) {
  .dev-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .dev-metric {
    padding: 0.5rem 0.25rem;
  }

  .dev-metric-value {
    font-size: 1.2rem;
  }

  .dev-metric-label {
    font-size: 0.6rem;
  }

  .dev-repo-name {
    font-size: 0.7rem;
    max-width: 100px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DECENTRALIZATION SCORE CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.decentralization-card {
  /* Full width like Distribution card */
}

.decentralization-content {
  padding: 0 1.5rem 0.8rem;
}

.decentralization-score-section {
  text-align: center;
  margin-bottom: 1rem;
}

.decentralization-main-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
}

.decentralization-main-score .score-value {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--accent-primary);
  line-height: 1;
}

.decentralization-main-score .score-max {
  font-size: 1.4rem;
  color: var(--text-muted);
}

.score-rating {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.4rem;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.score-bar-container {
  width: 100%;
  max-width: 400px;
  margin: 1rem auto 0;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.score-bar {
  height: 100%;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 35%, #22c55e 65%, #22c55e 100%);
  border-radius: 5px;
  transition: width 0.8s ease-out;
}

/* Component Score Boxes */
.decentralization-components {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.component-item {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
  padding: 1rem 0.8rem;
  text-align: center;
}

.component-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.component-score {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary);
}

/* History Chart Section */
.decentralization-history-section {
  margin-bottom: 1rem;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 12px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.history-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.history-controls {
  display: flex;
  gap: 0.5rem;
}

.history-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-btn:hover {
  color: var(--accent-primary);
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.history-btn.active {
  color: var(--accent-primary);
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
}

.chart-container {
  position: relative;
  height: 280px;
  width: 100%;
}

.chart-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Detailed Metrics Grid - 3 columns */
.decentralization-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.metrics-column {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 0.8rem;
}

.metrics-column-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.metric-row {
  display: flex;
  align-items: center;
  padding: 0.4rem 0;
  gap: 0.5rem;
}

.metric-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.metric-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex: 1;
}

.metric-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 60px;
  text-align: right;
}

/* Footer */
.decentralization-footer {
  text-align: center;
  padding-top: 0.5rem;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.decentralization-update {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Rating colors */
.score-rating.excellent { color: #22c55e; }
.score-rating.good { color: #84cc16; }
.score-rating.moderate { color: #f59e0b; }
.score-rating.concerning { color: #f97316; }
.score-rating.poor { color: #ef4444; }

/* Score description */
.score-description {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Metric context (Nakamoto assessment) */
.metric-context {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 55px;
  text-align: center;
}
.metric-context.critical { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.metric-context.low { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.metric-context.moderate { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.metric-context.good { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
  .decentralization-metrics {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .decentralization-components {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }

  .component-item {
    padding: 0.7rem 0.4rem;
  }

  .component-label {
    font-size: 0.65rem;
  }

  .component-score {
    font-size: 1.2rem;
  }
}

/* Light mode adjustments */
body.light-bg .decentralization-card .component-item {
  background: rgba(34, 197, 94, 0.1);
}

body.light-bg .decentralization-card .metrics-column {
  background: rgba(0, 0, 0, 0.02);
}

body.light-bg .score-bar-container {
  background: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERIMENTAL DECENTRALIZATION SCORE CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.decentralization-card-experimental {
  /* Inherits from .dashboard-card */
}

.decentralization-card-experimental .card-header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exp-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  margin-left: 0.75rem;
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.decentralization-exp-content {
  padding: 0 1rem 1rem;
}

/* Three Score Grid */
.exp-scores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.exp-score-item {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  padding: 0.8rem 0.5rem;
  text-align: center;
}

.exp-score-item.hybrid {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.exp-score-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.exp-score-sublabel {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.exp-score-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.exp-score-item.hybrid .exp-score-value {
  color: #818cf8;
}

/* Details Grid - 2 columns */
.exp-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-bottom: 0.7rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.exp-column {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  padding: 0.6rem;
}

.exp-column-header {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.exp-metric {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.7rem;
}

.exp-metric span:first-child {
  color: var(--text-muted);
}

.exp-metric span:last-child {
  color: var(--text-primary);
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}

.exp-footer {
  text-align: center;
  padding-top: 0.5rem;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.exp-update {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 600px) {
  .exp-scores-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }

  .exp-score-item {
    padding: 0.6rem 0.3rem;
  }

  .exp-score-label {
    font-size: 0.7rem;
  }

  .exp-score-value {
    font-size: 1.3rem;
  }

  .exp-details-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* Light mode */
body.light-bg .exp-score-item {
  background: rgba(34, 197, 94, 0.1);
}

body.light-bg .exp-score-item.hybrid {
  background: rgba(99, 102, 241, 0.12);
}

body.light-bg .exp-column {
  background: rgba(0, 0, 0, 0.02);
}

body.light-bg .exp-badge {
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
  border-color: rgba(251, 191, 36, 0.5);
}

/* Learn Bittensor Button */
.learn-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, #7c7ff7, #9d7cf7);
}

/* ==============================================
   HALVING PREDICTION HERO BANNER
   ============================================== */
.halving-hero-banner {
  max-width: 1100px;
  margin: 1rem auto 0.8rem auto;
  padding: 0 20px;
}

.hero-content {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(16, 163, 74, 0.03));
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 12px;
  padding: 0.9rem 1.4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08);
}

.hero-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

.hero-icon {
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
  animation: pulse-icon 2s infinite;
}

@keyframes pulse-icon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.hero-title {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: #22c55e;
  margin: 0 0 0.4rem 0;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 0.7rem 0;
  line-height: 1.4;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin: 0.8rem 0 0.7rem 0;
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 100px;
}

.hero-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.hero-stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

.hero-stat-block {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: -0.15rem;
}

.hero-stat.accuracy .hero-stat-value {
  color: #22c55e;
  font-size: 1rem;
}

.hero-proof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem 0 0.6rem 0;
}

.proof-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.hero-proof-links {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.proof-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 6px;
  color: #22c55e;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s;
}

.proof-link:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.proof-link svg {
  flex-shrink: 0;
}

.proof-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.hero-disclaimer {
  margin: 1.5rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Light mode adjustments */
body.light-bg .hero-content {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 163, 74, 0.08));
  border-color: rgba(34, 197, 94, 0.4);
}

body.light-bg .hero-title {
  color: #16a34a;
}

body.light-bg .proof-link {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #16a34a;
}

body.light-bg .proof-link:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: #16a34a;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .halving-hero-banner {
    margin: 1.5rem auto 1rem auto;
  }

  .hero-content {
    padding: 1.5rem 1.2rem;
  }

  .hero-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .hero-stats {
    gap: 1.2rem;
    margin: 1.5rem 0;
  }

  .hero-stat {
    min-width: 120px;
  }

  .hero-stat-value {
    font-size: 1.3rem;
  }

  .hero-stat.accuracy .hero-stat-value {
    font-size: 1.5rem;
  }

  .hero-proof {
    flex-direction: column;
    gap: 0.8rem;
  }

  .proof-label {
    font-size: 0.9rem;
  }
}

/* ============================================
   UX IMPROVEMENTS - Mobile/Tablet Enhancements
   ============================================ */

/* === Back to Top Button === */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #16a34a;
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

/* Light mode */
body.light-bg .back-to-top {
  background: #16a34a;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

body.light-bg .back-to-top:hover {
  background: #15803d;
}

/* === Enhanced Focus States === */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

/* Table row focus highlight */
.subnets-display-table tbody tr:focus-within,
.validators-display-table tbody tr:focus-within,
.wallets-display-table tbody tr:focus-within,
.pressure-display-table tbody tr:focus-within,
.newcomers-display-table tbody tr:focus-within {
  background: rgba(34, 197, 94, 0.08);
  outline: 1px solid rgba(34, 197, 94, 0.3);
}

/* Light mode focus states */
body.light-bg *:focus-visible {
  outline-color: #15803d;
}

body.light-bg button:focus-visible,
body.light-bg a:focus-visible {
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.2);
}

/* === Touch Targets (44px minimum for touch devices) === */
@media (pointer: coarse) {
  /* Chart time range buttons */
  .time-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
  }

  /* View toggle buttons (Emissions/MCap/Hybrid) */
  .view-toggle .toggle-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Filter buttons (Alpha Pressure) */
  .alpha-pressure-card .filter-btn,
  .filter-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Favorite buttons in tables */
  .pressure-display-table .fav-btn,
  .fav-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  /* Expand/collapse buttons */
  .pressure-display-table .expand-btn,
  .expand-btn {
    min-height: 44px;
    padding: 12px 24px;
  }

  /* Theme and sound toggles - keep original mobile sizes, don't enlarge */
  /* These are already adequately sized at 34px/28px for header controls */

  /* History period buttons (7d/30d/90d) */
  .history-btn,
  .period-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
  }

  /* Info badges - make slightly larger for easier tapping */
  .info-badge {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* === Mobile Header Redesign === */
@media (max-width: 480px) {
  .site-header {
    padding-top: 8px;
    padding-bottom: 12px;
  }

  .header-content {
    gap: 10px;
  }

  /* Stack pills vertically on small screens */
  .pills-row {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
  }

  .halving-pill,
  .price-pill {
    width: 92%;
    max-width: 300px;
    justify-content: center;
  }

  /* Keep Max Supply Terminal top-left on mobile */
  #maxSupplyTerminal {
    opacity: 0.7;
    font-size: clamp(9px, 1.6vw, 12px);
  }

  /* Price pill needs more height - increase bottom padding for [pill me] */
  .price-pill {
    padding-bottom: 18px !important;
  }

  .price-pill .pill-tap-hint {
    bottom: 4px;
  }
}

@media (max-width: 360px) {
  /* Ultra-small screens */
  .halving-content {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }

  .halving-icon {
    font-size: 1.4em !important;
  }

  .logo-title {
    font-size: 0.95rem;
  }

  .logo-subtitle {
    display: none;
  }

  .pills-row {
    gap: 10px;
    margin-top: 6px;
  }

  .halving-pill {
    padding: 12px 14px;
    font-size: 0.85rem;
  }

  .price-pill {
    padding: 12px 14px 18px 14px;
    font-size: 0.85rem;
  }
}

/* === Mobile Table Layout Improvements === */

/* Scroll indicator gradient on right edge */
.subnets-table-wrapper,
.validators-table-wrapper,
.wallets-table-wrapper,
.newcomers-table-wrapper,
.pressure-table-wrapper {
  position: relative;
}

.subnets-table-wrapper::after,
.validators-table-wrapper::after,
.wallets-table-wrapper::after,
.newcomers-table-wrapper::after,
.pressure-table-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to left, rgba(10, 14, 18, 0.95), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show gradient only when scrollable */
.subnets-table-wrapper.scrollable::after,
.validators-table-wrapper.scrollable::after,
.wallets-table-wrapper.scrollable::after,
.newcomers-table-wrapper.scrollable::after,
.pressure-table-wrapper.scrollable::after {
  opacity: 1;
}

/* Light mode gradient */
body.light-bg .subnets-table-wrapper::after,
body.light-bg .validators-table-wrapper::after,
body.light-bg .wallets-table-wrapper::after,
body.light-bg .newcomers-table-wrapper::after,
body.light-bg .pressure-table-wrapper::after {
  background: linear-gradient(to left, rgba(226, 226, 226, 0.95), transparent);
}

@media (max-width: 600px) {
  /* Increase base font size on mobile for readability */
  .subnets-display-table,
  .validators-display-table,
  .wallets-display-table,
  .newcomers-display-table,
  .pressure-display-table {
    font-size: 0.85em;
  }

  /* Sticky first column for context while scrolling */
  .subnets-display-table th:first-child,
  .subnets-display-table td:first-child,
  .validators-display-table th:first-child,
  .validators-display-table td:first-child,
  .wallets-display-table th:first-child,
  .wallets-display-table td:first-child,
  .newcomers-display-table th:first-child,
  .newcomers-display-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--surface);
  }

  /* Light mode sticky column */
  body.light-bg .subnets-display-table th:first-child,
  body.light-bg .subnets-display-table td:first-child,
  body.light-bg .validators-display-table th:first-child,
  body.light-bg .validators-display-table td:first-child,
  body.light-bg .wallets-display-table th:first-child,
  body.light-bg .wallets-display-table td:first-child,
  body.light-bg .newcomers-display-table th:first-child,
  body.light-bg .newcomers-display-table td:first-child {
    background: #e2e2e2;
  }
}

/* === Jump Navigation (TOC) === */
.jump-nav {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(10, 14, 18, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
}

.jump-nav-container {
  position: relative;
  width: 100%;
  max-width: 280px;
}

.jump-nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  min-height: 44px;
  transition: all 0.2s;
}

.jump-nav-toggle:hover,
.jump-nav-toggle[aria-expanded="true"] {
  background: rgba(34, 197, 94, 0.2);
}

.jump-nav-icon {
  font-size: 1.1rem;
}

.jump-nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.jump-nav-menu.open {
  display: block;
}

/* Scroll margin for jump targets - accounts for sticky header + jump-nav */
/* Large Desktop (>1024px): header ~70px + jump-nav ~60px = 140px */
/* Small Desktop/Tablet landscape (769-1024px): ~150px */
/* Tablet portrait (481-768px): ~170px */
/* Mobile (<480px): header stacked ~150px + jump-nav ~60px = 240px */
#marketConditionsCard,
#priceChartCard,
#subnetsCard,
#topSubnetsCard,
#newcomersCard,
#alphaPressureCard,
#topValidatorsCard,
#topWalletsCard,
#devActivityCard,
#distributionCard,
#decentralizationCard,
#decentralizationExpCard,
#fngCard,
#mapPreviewCard,
#taotensorCard {
  scroll-margin-top: 140px;
}

@media (max-width: 1024px) {
  #marketConditionsCard,
  #priceChartCard,
  #subnetsCard,
  #topSubnetsCard,
  #newcomersCard,
  #alphaPressureCard,
  #topValidatorsCard,
  #topWalletsCard,
  #devActivityCard,
  #distributionCard,
  #decentralizationCard,
  #decentralizationExpCard,
  #fngCard,
  #mapPreviewCard,
  #taotensorCard {
    scroll-margin-top: 160px;
  }
}

@media (max-width: 768px) {
  #marketConditionsCard,
  #priceChartCard,
  #subnetsCard,
  #topSubnetsCard,
  #newcomersCard,
  #alphaPressureCard,
  #topValidatorsCard,
  #topWalletsCard,
  #devActivityCard,
  #distributionCard,
  #decentralizationCard,
  #decentralizationExpCard,
  #fngCard,
  #mapPreviewCard,
  #taotensorCard {
    scroll-margin-top: 180px;
  }
}

@media (max-width: 480px) {
  #marketConditionsCard,
  #priceChartCard,
  #subnetsCard,
  #topSubnetsCard,
  #newcomersCard,
  #alphaPressureCard,
  #topValidatorsCard,
  #topWalletsCard,
  #devActivityCard,
  #distributionCard,
  #decentralizationCard,
  #decentralizationExpCard,
  #fngCard,
  #mapPreviewCard,
  #taotensorCard {
    scroll-margin-top: 260px;
  }
}

.jump-nav-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.jump-nav-menu li:last-child {
  border-bottom: none;
}

.jump-nav-menu a {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s;
  min-height: 44px;
}

.jump-nav-menu a:hover {
  background: rgba(34, 197, 94, 0.1);
  color: var(--accent);
}

/* Light mode jump nav */
body.light-bg .jump-nav {
  background: rgba(226, 226, 226, 0.98);
}

body.light-bg .jump-nav-toggle {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.4);
}

body.light-bg .jump-nav-menu {
  background: #e8e8e8;
  border-color: rgba(0, 0, 0, 0.1);
}

body.light-bg .jump-nav-menu li {
  border-color: rgba(0, 0, 0, 0.05);
}

body.light-bg .jump-nav-menu a {
  color: #222;
}

body.light-bg .jump-nav-menu a:hover {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}

/* === Abbreviation Tooltips === */
abbr[data-tooltip],
.abbr-tooltip {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  border-bottom: none;
}

abbr[data-tooltip]:focus,
.abbr-tooltip:focus {
  outline: 2px solid rgba(34, 197, 94, 0.5);
  outline-offset: 2px;
}

/* Touch devices: make abbreviations more tappable */
@media (pointer: coarse) {
  abbr[data-tooltip],
  .abbr-tooltip {
    display: inline-block;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.08);
  }

  body.light-bg abbr[data-tooltip],
  body.light-bg .abbr-tooltip {
    background: rgba(34, 197, 94, 0.12);
  }
}

/* === Skeleton Loading Enhancements === */
.skeleton-card {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton 2.5s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton-row {
  display: flex;
  gap: 8px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.skeleton-cell {
  height: 16px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton 2s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-cell.narrow { width: 40px; flex-shrink: 0; }
.skeleton-cell.medium { width: 80px; flex-shrink: 0; }
.skeleton-cell.wide { flex: 1; }

/* Light mode skeleton */
body.light-bg .skeleton-card,
body.light-bg .skeleton-cell {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 75%);
  background-size: 200% 100%;
}