/* ═══════════════════════════════════════════════════════════════
   AckiScan — Design System v4.0 "Neural Grid"
   Syne + JetBrains Mono · Deep space · Glassmorphic · App-native
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --font-display: 'Syne', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace;

  /* Core palette */
  --void:    #030609;
  --bg:      #060c14;
  --surface: rgba(12, 20, 36, 0.7);
  --glass:   rgba(255, 255, 255, 0.038);
  --glass-2: rgba(255, 255, 255, 0.06);

  /* Borders */
  --border:    rgba(255, 255, 255, 0.07);
  --border-2:  rgba(255, 255, 255, 0.13);
  --border-3:  rgba(255, 255, 255, 0.22);

  /* Accent colors */
  --cyan:        #00C8FF;
  --cyan-dim:    rgba(0, 200, 255, 0.10);
  --cyan-glow:   rgba(0, 200, 255, 0.22);
  --cyan-border: rgba(0, 200, 255, 0.28);

  --violet:        #8B5CF6;
  --violet-dim:    rgba(139, 92, 246, 0.10);
  --violet-glow:   rgba(139, 92, 246, 0.20);
  --violet-border: rgba(139, 92, 246, 0.28);

  --emerald:        #10D98F;
  --emerald-dim:    rgba(16, 217, 143, 0.10);
  --emerald-glow:   rgba(16, 217, 143, 0.20);
  --emerald-border: rgba(16, 217, 143, 0.26);

  --amber:        #F59E0B;
  --amber-dim:    rgba(245, 158, 11, 0.10);
  --amber-glow:   rgba(245, 158, 11, 0.20);
  --amber-border: rgba(245, 158, 11, 0.26);

  --rose:     #F43F5E;
  --rose-dim: rgba(244, 63, 94, 0.10);

  /* Text */
  --fg:   #EDF2F8;
  --fg-2: #8A9AB4;
  --fg-3: #4A5A72;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  --header-h: 58px;
  --nav-h: 52px;
  --max-w: 1440px;

  --gap: 20px;
  --gap-sm: 14px;
  --gap-xs: 10px;
  --section-gap: 28px;

  --blur-card: blur(24px);
  --blur-heavy: blur(40px);

  /* Accent shortcuts for old code refs */
  --accent:   var(--cyan);
  --accent-d: var(--cyan-dim);
  --bg-alt:   var(--bg);
  --surface-2: rgba(255,255,255,0.03);
  --surface-3: rgba(255,255,255,0.05);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --sh-sm: 0 2px 12px rgba(0,0,0,0.4);
  --sh-md: 0 8px 40px rgba(0,0,0,0.5);
  --sh-lg: 0 20px 80px rgba(0,0,0,0.6);
  --font-sans: var(--font-display);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: var(--fs-base, 15px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-display);
  background: var(--void);
  color: var(--fg);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: var(--cyan); text-decoration: none; transition: color 0.15s; }
a:hover { color: #5DD6FF; }
button { cursor: pointer; font-family: inherit; }
img, svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.15); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,0.28); }

/* ─────────────────────────────────────────────────────────────
   ANIMATED BACKGROUND
───────────────────────────────────────────────────────────── */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: blob-appear 2s ease-out forwards;
  will-change: transform;
}
.aurora-blob--1 {
  width: 60vw; height: 60vw;
  top: -20vw; left: -10vw;
  background: radial-gradient(circle, rgba(0,200,255,0.09) 0%, transparent 70%);
  animation-delay: 0.2s;
  animation: blob-appear 2s ease-out 0.2s forwards, blob-float-1 22s ease-in-out 2.2s infinite alternate;
}
.aurora-blob--2 {
  width: 50vw; height: 50vw;
  top: 20vh; right: -15vw;
  background: radial-gradient(circle, rgba(139,92,246,0.09) 0%, transparent 70%);
  animation: blob-appear 2s ease-out 0.5s forwards, blob-float-2 28s ease-in-out 2.5s infinite alternate;
}
.aurora-blob--3 {
  width: 40vw; height: 40vw;
  bottom: 5vh; left: 20vw;
  background: radial-gradient(circle, rgba(16,217,143,0.06) 0%, transparent 70%);
  animation: blob-appear 2s ease-out 0.8s forwards, blob-float-3 24s ease-in-out 2.8s infinite alternate;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

@keyframes blob-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes blob-float-1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(4vw, 3vh) scale(1.08); } }
@keyframes blob-float-2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-3vw, 4vh) scale(0.94); } }
@keyframes blob-float-3 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(2vw, -3vh) scale(1.05); } }

/* ── SKELETON ─────────────────────────────────────────────── */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: 4px;
  color: transparent;
  display: inline-block;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(3, 6, 9, 0.82);
  backdrop-filter: var(--blur-heavy) saturate(180%);
  -webkit-backdrop-filter: var(--blur-heavy) saturate(180%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,200,255,0.04), 0 4px 32px rgba(0,0,0,0.4);
}

/* Scan line sweep animation — uses transform (not left) to avoid layout triggers on mobile.
   No overflow:hidden on header — transform doesn't create scrollable overflow,
   and overflow:hidden would trap position:fixed nav sheet on iOS Safari (backdrop-filter bug). */
.site-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.04), transparent);
  transform: translateX(-250%);
  animation: header-scan 8s ease-in-out 3s infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes header-scan { 0%, 100% { transform: translateX(-250%); } 50% { transform: translateX(350%); } }

.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ── Brand row ── */
.header-brand-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__img--logo {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(0,200,255,0.3));
  transition: filter 0.3s;
}
.brand:hover .brand__img--logo { filter: drop-shadow(0 0 20px rgba(0,200,255,0.5)); }

/* ── Live Ticker ── */
.live-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ticker__live {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  background: rgba(0,200,255,0.07);
  border: 1px solid rgba(0,200,255,0.18);
  border-radius: 20px;
  flex-shrink: 0;
}
.ticker__dot {
  width: 7px; height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  animation: dot-pulse 2.4s ease-in-out infinite;
}
.ticker__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  opacity: 0;
  animation: ring-expand 2.4s ease-out infinite;
}
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes ring-expand {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

.ticker__live-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
  text-transform: uppercase;
}

.ticker__sep {
  width: 1px; height: 14px;
  background: var(--border);
  margin: 0 10px;
  flex-shrink: 0;
}
.ticker__sep--hide-sm { }
.ticker__sep--hide-md { }

.ticker__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  flex-shrink: 0;
}
.ticker__item--hide-sm { }
.ticker__item--hide-md { }

.ticker__label {
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ticker__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.ticker__value.--cyan   { color: var(--cyan); }
.ticker__value.--violet { color: var(--violet); }
.ticker__value.--amber  { color: var(--amber); }

.fetch-badge { display: none; }

/* ── Header controls ── */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.header-clock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
}
.header-clock__time {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.header-clock__sep { color: var(--fg-3); font-size: 11px; }
.header-clock__date { font-size: 11px; color: var(--fg-3); }

.lang-select {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 24px 5px 9px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A5A72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.15s, background-color 0.15s;
}
.lang-select:hover { border-color: var(--border-2); background-color: var(--glass-2); }
.lang-select:focus { outline: none; border-color: var(--cyan-border); }

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  transition: all 0.15s;
  flex-shrink: 0;
  touch-action: manipulation; /* eliminate 300ms tap delay on iOS */
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-toggle:hover { border-color: var(--border-2); color: var(--fg); }

/* ── Nav + Search row ── */
.header-nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--nav-h);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.global-search { flex-shrink: 0; }
.global-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 10px;
  height: 34px;
  width: 260px;
  transition: all 0.2s;
}
.global-search__field:focus-within {
  border-color: var(--cyan-border);
  background: rgba(0,200,255,0.04);
  box-shadow: 0 0 0 3px rgba(0,200,255,0.08);
}
.global-search__icon { color: var(--fg-3); flex-shrink: 0; transition: color 0.15s; }
.global-search__field:focus-within .global-search__icon { color: var(--cyan); }
.global-search__input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--fg);
  width: 100%;
  min-width: 0;
}
.global-search__input::placeholder { color: var(--fg-3); }
.global-search__kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.primary-nav::-webkit-scrollbar { display: none; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  position: relative;
  border: 1px solid transparent;
}
.nav-link:hover {
  color: var(--fg-2);
  background: var(--glass);
  border-color: var(--border);
}
.nav-link--active {
  color: var(--cyan) !important;
  background: var(--cyan-dim) !important;
  border-color: var(--cyan-border) !important;
}
.nav-link svg { opacity: 0.7; }
.nav-link--active svg { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
═══════════════════════════════════════════════════════════ */
.dashboard {
  position: relative;
  z-index: 1;
  padding: 28px 24px 100px;
}
.dashboard__container {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ── Glass card base ── */
.kpi-card, .widget, .nackl-dist-banner {
  background: var(--surface);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

/* Card entrance animation */
.kpi-card, .widget, .nackl-dist-banner {
  animation: card-rise 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger KPI cards */
.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.12s; }
.kpi-card:nth-child(3) { animation-delay: 0.19s; }
.kpi-card:nth-child(4) { animation-delay: 0.26s; }
.nackl-dist-banner { animation-delay: 0.3s; }
.pulse-row > .widget:nth-child(1) { animation-delay: 0.33s; }
.pulse-row > .widget:nth-child(2) { animation-delay: 0.38s; }
.pulse-row > .widget:nth-child(3) { animation-delay: 0.43s; }

/* Card hover lift */
.kpi-card { transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s, border-color 0.25s; }
.kpi-card:hover { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════
   KPI CARDS
═══════════════════════════════════════════════════════════ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.kpi-card {
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 120px;
}

.kpi-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Card-specific accent colors */
.kpi-card--tps     .kpi-accent-bar { background: linear-gradient(90deg, var(--amber), transparent 80%); }
.kpi-card--block   .kpi-accent-bar { background: linear-gradient(90deg, var(--violet), transparent 80%); }
.kpi-card--validators .kpi-accent-bar { background: linear-gradient(90deg, var(--cyan), transparent 80%); }
.kpi-card--verifiers  .kpi-accent-bar { background: linear-gradient(90deg, var(--emerald), transparent 80%); }

.kpi-card--tps:hover        { box-shadow: 0 8px 40px var(--amber-glow),   inset 0 0 0 1px var(--amber-border); border-color: var(--amber-border); }
.kpi-card--block:hover      { box-shadow: 0 8px 40px var(--violet-glow),  inset 0 0 0 1px var(--violet-border); border-color: var(--violet-border); }
.kpi-card--validators:hover { box-shadow: 0 8px 40px var(--cyan-glow),    inset 0 0 0 1px var(--cyan-border); border-color: var(--cyan-border); }
.kpi-card--verifiers:hover  { box-shadow: 0 8px 40px var(--emerald-glow), inset 0 0 0 1px var(--emerald-border); border-color: var(--emerald-border); }

/* Scan line on hover */
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  transition: height 0.25s;
  pointer-events: none;
}
.kpi-card:hover::after { height: 50%; }

.kpi-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon--amber   { background: var(--amber-dim);   color: var(--amber);   box-shadow: 0 0 16px var(--amber-glow); }
.kpi-icon--violet  { background: var(--violet-dim);  color: var(--violet);  box-shadow: 0 0 16px var(--violet-glow); }
.kpi-icon--cyan    { background: var(--cyan-dim);    color: var(--cyan);    box-shadow: 0 0 16px var(--cyan-glow); }
.kpi-icon--emerald { background: var(--emerald-dim); color: var(--emerald); box-shadow: 0 0 16px var(--emerald-glow); }
.kpi-icon--yellow  { background: var(--amber-dim);   color: var(--amber);   box-shadow: 0 0 16px var(--amber-glow); }

.kpi-body { display: flex; flex-direction: column; gap: 4px; }

.kpi-label {
  font-size: 0.667rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg-3);
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: 1.867rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kpi-card--tps     .kpi-value { color: var(--amber); }
.kpi-card--block   .kpi-value { color: var(--violet); }
.kpi-card--validators .kpi-value { color: var(--cyan); }
.kpi-card--verifiers  .kpi-value { color: var(--emerald); }

.kpi-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 5px;
}
.kpi-delta.positive { color: var(--emerald); }
.kpi-delta.negative { color: var(--rose); }

/* Pulse dot on live block */
.pulse-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--emerald);
  border-radius: 50%;
  position: relative;
  animation: pulse-dot 2s ease-in-out infinite;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--emerald);
  opacity: 0;
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}
/* Also handle .pulse-animate from JS */
.pulse-animate .pulse-dot { animation: pulse-dot-fast 0.4s ease-out; }
@keyframes pulse-dot-fast { 0% { transform: scale(1); } 50% { transform: scale(1.8); } 100% { transform: scale(1); } }

.stat-performance-arrow { display: none; }

/* ═══════════════════════════════════════════════════════════
   NACKL DISTRIBUTION BANNER
═══════════════════════════════════════════════════════════ */
.nackl-dist-banner {
  padding: 0;
  background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(0,200,255,0.04));
  border-color: rgba(139,92,246,0.18);
}

.nackl-dist-banner__header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.nackl-dist-banner__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.nackl-dist-banner__title svg { color: var(--violet); flex-shrink: 0; }

.nackl-dist-banner__sub {
  font-size: 11px;
  color: var(--fg-3);
  margin-left: auto;
}
.nackl-dist-banner__link {
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--cyan-border);
  border-radius: var(--radius-sm);
  background: var(--cyan-dim);
  transition: all 0.15s;
}
.nackl-dist-banner__link:hover { background: rgba(0,200,255,0.15); color: var(--cyan); }

.nackl-dist-cells {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.nackl-dist-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s;
}
.nackl-dist-cell:last-child { border-right: 0; }
.nackl-dist-cell:hover { background: rgba(255,255,255,0.02); }

.nackl-dist-cell--highlight { background: rgba(139,92,246,0.05); }

.nackl-dist-cell__label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 5px;
}
.nackl-dist-cell__value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.nackl-dist-cell__unit {
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 400;
}
.nackl-dist-cell__total { font-size: 10px; color: var(--fg-3); }

.role-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.role-dot--violet  { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
.role-dot--cyan    { background: var(--cyan);   box-shadow: 0 0 6px var(--cyan); }
.role-dot--emerald { background: var(--emerald); box-shadow: 0 0 6px var(--emerald); }

/* ═══════════════════════════════════════════════════════════
   PULSE ROW (gauge + epoch + summary)
═══════════════════════════════════════════════════════════ */
.pulse-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  gap: var(--gap);
}

/* ── Widget base ── */
.widget { overflow: hidden; }

.widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.widget-title {
  font-size: 0.867rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.widget-sub {
  font-size: 0.733rem;
  color: var(--fg-3);
  margin-top: 2px;
}
.widget-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.info-btn {
  width: 24px; height: 24px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--fg-3);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.info-btn:hover { border-color: var(--border-2); color: var(--fg); }

.icon-btn {
  width: 28px; height: 28px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.icon-btn:hover { border-color: var(--cyan-border); color: var(--cyan); background: var(--cyan-dim); }

.muted-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 9px;
}

/* ── Gauge widget ── */
.gauge-wrap {
  position: relative;
  padding: 16px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gauge-wrap canvas {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px) !important;
  height: calc(100% - 32px) !important;
}
.gauge-readout {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 24px;
}
.gauge-readout-main {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.gauge-readout-sub {
  font-size: 10px;
  color: var(--fg-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ── Epoch widget ── */
.widget--epoch { display: flex; flex-direction: column; }

.epoch-progress {
  padding: 16px 20px 10px;
}
.epoch-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.epoch-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  border-radius: 3px;
  box-shadow: 0 0 12px var(--violet-glow);
  transition: width 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.epoch-progress-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-3);
}
.epoch-progress-meta strong {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--violet);
  font-weight: 600;
}

.epoch-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  flex: 1;
}
.epoch-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-right: 1px solid var(--border);
}
.epoch-stat:last-child, .epoch-stat:nth-child(3), .epoch-stat:nth-child(6) { border-right: 0; }
.epoch-stat:nth-child(4), .epoch-stat:nth-child(5), .epoch-stat:nth-child(6) { border-top: 1px solid var(--border); }
.epoch-stat__lbl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.epoch-stat__val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}

/* ── TPS Summary ── */
.widget--summary { }

.tps-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 6px 12px 14px;
}
.tps-summary-col { padding: 10px 10px; }
.tps-summary-col:not(:last-child) { border-right: 1px solid var(--border); }

.tps-summary-head {
  font-size: 10px;
  color: var(--cyan);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 9px;
}
.tps-summary-col--alltime .tps-summary-head { color: var(--amber); }

.tps-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  margin: 2px 0;
  font-size: 11px;
}
.tps-summary-row span { color: var(--fg-3); font-weight: 500; }
.tps-summary-row strong { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }

.tps-summary-row--avg   { background: rgba(96,165,250,0.08);  }
.tps-summary-row--avg   span { color: rgba(96,165,250,0.8); }
.tps-summary-row--avg   strong { color: #60a5fa; }

.tps-summary-row--peak  { background: rgba(52,211,153,0.08); }
.tps-summary-row--peak  span { color: rgba(52,211,153,0.8); }
.tps-summary-row--peak  strong { color: #34d399; }

.tps-summary-row--min   { background: rgba(248,113,113,0.08); }
.tps-summary-row--min   span { color: rgba(248,113,113,0.8); }
.tps-summary-row--min   strong { color: #f87171; }

/* ═══════════════════════════════════════════════════════════
   CHARTS
═══════════════════════════════════════════════════════════ */
.full-chart-section { }
.widget--full-chart { padding: 0; overflow: hidden; }
.widget--full-chart .widget-header { padding: 16px 20px 12px; }

/* Heatmap mount div in full-chart widget */
.widget--full-chart > #tpsHeatmap {
  display: block;
  overflow: hidden;
}
/* .acki-heatmap is now fully defined in the widget CSS section below */

.chart-container {
  position: relative;
  height: clamp(180px, 30vw, 280px);
  padding: 12px 16px 10px;
}
.chart-container--lg { height: clamp(200px, 34vw, 320px); }
.chart-container--network { height: clamp(200px, 32vw, 300px); }
/* Block activity chart: fills remaining widget height after the header */
.chart-container--block {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 0 16px 10px;
}
.chart-container canvas { position: absolute; inset: 12px 16px 10px; }
.chart-container--block canvas { position: absolute; inset: 0 16px 10px; }

/* TPS range buttons */
.tps-range-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.tps-range-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 30px;
}
.tps-range-btn:hover { border-color: var(--border-2); color: var(--fg-2); background: var(--glass); }
.tps-range-btn.active { border-color: var(--cyan-border); color: var(--cyan); background: var(--cyan-dim); }

/* ── Twin section ── */
.twin-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

/* Fixed height on twin widgets — explicit so canvas _resize() reads a real value */
.widget--twin {
  height: 340px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The JS mount divs (#tpsFlare, #tpsRadar) must fill the widget.
   Without this, height:100% on .acki-flare resolves to 0 (auto parent). */
.widget--twin > div {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════
   NETWORK CHART / MINING
═══════════════════════════════════════════════════════════ */
.twin-section--emissions { }

.network-stats {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.network-stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.network-stat-label {
  font-size: 12px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 7px;
}
.legend-dot, .legend-dot--violet, .legend-dot--cyan, .legend-dot--emerald {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot--violet  { background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
.legend-dot--cyan    { background: var(--cyan);   box-shadow: 0 0 6px var(--cyan-glow); }
.legend-dot--emerald { background: var(--emerald); box-shadow: 0 0 6px var(--emerald-glow); }
.network-stat-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}

/* ── Mining stats ── */
.mining-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.mining-cards--row2,
.mining-cards--row3 {
  border-top: 1px solid var(--border);
}
.mining-card {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  transition: background 0.15s;
}
.mining-card:last-child { border-right: 0; }
.mining-card:hover { background: rgba(255,255,255,0.02); }

.mining-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-3);
  font-weight: 600;
  margin-bottom: 7px;
}
.mining-card-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.mining-card-value--sm { font-size: 18px; }
.mining-card-purple .mining-card-value { color: var(--violet); }
.mining-card-violet .mining-card-value { color: var(--violet); }
.mining-card-cyan   .mining-card-value { color: var(--cyan); }
.mining-card-emerald .mining-card-value { color: var(--emerald); }
.mining-card-amber  .mining-card-value { color: var(--amber); }
.mining-card-rose   .mining-card-value { color: var(--rose); }

.mining-card-change { font-size: 11px; color: var(--fg-3); font-weight: 500; }
.mining-card-change--positive { color: var(--emerald); }

.prelaunch-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 20px;
  font-size: 12px;
  color: var(--fg-3);
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--border);
}
.prelaunch-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--fg-3); }

/* ── Stability KPIs ── */
.stability-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.stability-kpi { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--glass); }
.stability-kpi-label { color: var(--fg-3); font-size: 10px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.stability-kpi-value { color: var(--fg); font-weight: 700; font-size: 17px; font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════
   SUB-PAGE STYLES
═══════════════════════════════════════════════════════════ */
.page-container { max-width: var(--max-w); margin: 0 auto; padding: var(--section-gap) 24px 100px; position: relative; z-index: 1; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: var(--gap); flex-wrap: wrap; }
.page-header h1 { font-size: 22px; font-weight: 800; color: var(--fg); letter-spacing: -0.01em; }
.page-header .page-sub { font-size: 13px; color: var(--fg-3); margin-top: 3px; }

.stats-strip { display: flex; gap: 0; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--gap); backdrop-filter: var(--blur-card); }
.stats-strip__item { flex: 1; padding: 14px 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.stats-strip__item:last-child { border-right: 0; }
.stats-strip__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); font-weight: 600; }
.stats-strip__value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--fg); }

.table-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; backdrop-filter: var(--blur-card); }
.table-widget__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.table-widget__title { font-size: 14px; font-weight: 700; color: var(--fg); }
.table-widget__actions { display: flex; align-items: center; gap: 8px; }

.countdown-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--glass); border: 1px solid var(--border); border-radius: 20px; font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }
.countdown-badge .refresh-dot { width: 6px; height: 6px; background: var(--emerald); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; }

.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th { padding: 10px 18px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); border-bottom: 1px solid var(--border); white-space: nowrap; background: rgba(255,255,255,0.015); }
.data-table thead th.r { text-align: right; }
.data-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.12s; }
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.data-table td { padding: 13px 18px; vertical-align: middle; white-space: nowrap; }
.data-table td.r { text-align: right; }
.mono { font-family: var(--font-mono); }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); }
.pagination__info { font-size: 12px; color: var(--fg-3); }
.pagination__btns { display: flex; gap: 8px; }
.page-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--glass); color: var(--fg-2); font-family: var(--font-display); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.page-btn:hover:not(:disabled) { border-color: var(--cyan-border); color: var(--cyan); background: var(--cyan-dim); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge--ok   { background: rgba(16,185,129,0.1); color: var(--emerald); border: 1px solid rgba(16,185,129,0.2); }
.badge--bad  { background: rgba(244,63,94,0.1);  color: var(--rose);    border: 1px solid rgba(244,63,94,0.2); }
.badge--pend { background: rgba(245,158,11,0.1);  color: var(--amber);  border: 1px solid rgba(245,158,11,0.2); }
.badge--gray { background: var(--glass); color: var(--fg-3); border: 1px solid var(--border); }

.hash-link { color: var(--cyan); font-family: var(--font-mono); font-size: 12px; }
.hash-link:hover { color: #5DD6FF; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   SITE FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  background: rgba(3,6,9,0.8);
  backdrop-filter: var(--blur-card);
  padding: 22px 24px;
  margin-bottom: 60px; /* space for bottom nav on mobile */
}
@media (min-width: 769px) { .site-footer { margin-bottom: 0; } }

.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 10px; }
.footer-brand { font-size: 13px; font-weight: 800; color: var(--fg); letter-spacing: -0.01em; }
.footer-sep { color: var(--fg-3); }
.footer-tag { font-size: 12px; color: var(--fg-3); }
.footer-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.footer-link { font-size: 11px; color: var(--fg-3); padding: 4px 9px; border-radius: var(--radius-sm); transition: color 0.12s, background 0.12s; border: 1px solid transparent; }
.footer-link:hover { color: var(--cyan); background: var(--cyan-dim); border-color: var(--cyan-border); }
.footer-link--coffee { color: var(--amber) !important; font-weight: 700; }
.footer-link--coffee:hover { color: var(--amber) !important; background: var(--amber-dim) !important; border-color: var(--amber-border) !important; }
.footer-meta { font-size: 11px; color: var(--fg-3); }

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — App-style
═══════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: rgba(3, 6, 9, 0.94);
  backdrop-filter: var(--blur-heavy) saturate(180%);
  -webkit-backdrop-filter: var(--blur-heavy) saturate(180%);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(env(safe-area-inset-bottom, 0px) + 8px);
  box-shadow: 0 -4px 40px rgba(0,0,0,0.5);
  justify-content: space-around;
  align-items: stretch;
  gap: 0;
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  padding: 6px 4px;
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  min-height: 48px;
  border: 1px solid transparent;
}
.bottom-nav__item:hover { color: var(--fg-2); background: var(--glass); }
.bottom-nav__item--active { color: var(--cyan); }
.bottom-nav__item--active svg { filter: drop-shadow(0 0 6px var(--cyan-glow)); }

.bottom-nav__item--search {
  position: relative;
}
.bottom-nav__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  border-radius: 50%;
  margin-bottom: -2px;
  box-shadow: 0 4px 20px rgba(0,200,255,0.35);
  color: #000;
}
.bottom-nav__item--search { color: var(--fg-2); }
.bottom-nav__item--search span:last-child { color: var(--fg-3); font-size: 9px; }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════ */
.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.lightbox[aria-hidden="false"] { display: flex; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: var(--blur-card); }
.lightbox__panel { position: relative; z-index: 1; width: min(95vw,1200px); height: min(90vh,800px); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-xl); display: flex; flex-direction: column; overflow: hidden; backdrop-filter: var(--blur-card); }
.lightbox__topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.lightbox__url { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lightbox__opennew { font-size: 12px; color: var(--cyan); font-weight: 600; }
.lightbox__close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--glass); color: var(--fg-2); font-size: 14px; transition: all 0.12s; }
.lightbox__close:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-dim); }
.lightbox__framewrap { flex: 1; overflow: hidden; }
.lightbox__frame { width: 100%; height: 100%; border: 0; }

/* ═══════════════════════════════════════════════════════════
   THEME PICKER (pass-through)
═══════════════════════════════════════════════════════════ */
.theme-picker-panel { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 1000; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-xl); padding: 20px; width: 260px; box-shadow: var(--sh-lg); backdrop-filter: var(--blur-card); }
.theme-picker-panel.is-open { display: block; }
.theme-picker__title { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: 14px; }
.theme-picker__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.theme-swatch { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active { border-color: var(--cyan); }
.theme-picker__footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }

/* ═══════════════════════════════════════════════════════════
   SHARED WIDGET CHROME — used by heatmap, flare, radar
═══════════════════════════════════════════════════════════ */

/* Segment button strip */
.acki-heatmap__seg,
.acki-flare__seg,
.acki-radar__seg {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.acki-heatmap__segbtn,
.acki-flare__segbtn,
.acki-radar__segbtn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--fg-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.acki-heatmap__segbtn:last-child,
.acki-flare__segbtn:last-child,
.acki-radar__segbtn:last-child { border-right: none; }

.acki-heatmap__segbtn:hover,
.acki-flare__segbtn:hover,
.acki-radar__segbtn:hover { color: var(--fg); background: var(--glass-2); }

.acki-heatmap__segbtn.is-active,
.acki-flare__segbtn.is-active,
.acki-radar__segbtn.is-active { color: var(--cyan); background: var(--cyan-dim); }

/* Timezone toggle */
.acki-heatmap__tz,
.acki-flare__tz,
.acki-radar__tz {
  padding: 4px 10px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.acki-heatmap__tz:hover,
.acki-flare__tz:hover,
.acki-radar__tz:hover { color: var(--fg); border-color: var(--border-2); }

/* Status text */
.acki-heatmap__status,
.acki-flare__status,
.acki-radar__status {
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
}
.acki-heatmap__status.is-error,
.acki-flare__status.is-error,
.acki-radar__status.is-error { color: var(--rose); }
.acki-heatmap__status.is-ok,
.acki-flare__status.is-ok,
.acki-radar__status.is-ok { color: var(--emerald); }

/* Titles */
.acki-heatmap__title,
.acki-flare__title,
.acki-radar__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.acki-heatmap__subtitle,
.acki-flare__subtitle,
.acki-radar__subtitle {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 1px;
}

/* Tooltips */
.acki-heatmap__tooltip,
.acki-flare__tooltip,
.acki-radar__tooltip {
  background: rgba(6, 12, 22, 0.95);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--fg);
  pointer-events: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  max-width: 220px;
  z-index: 9999;
}
.acki-flare__tt1, .acki-radar__tt1,
.acki-heatmap__tt1 { font-weight: 700; font-family: var(--font-mono); color: var(--cyan); }
.acki-flare__tt2, .acki-radar__tt2,
.acki-heatmap__tt2 { color: var(--fg-2); margin-top: 3px; }
.acki-flare__tt3, .acki-radar__tt3,
.acki-heatmap__tt3 { color: var(--fg-3); font-size: 11px; margin-top: 2px; }
.acki-flare__tt4 { color: var(--fg-3); font-size: 10px; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   TPS HEATMAP — full component CSS
═══════════════════════════════════════════════════════════ */
#tpsHeatmap { width: 100%; }

/* Root card fills the widget */
.acki-heatmap {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  /* CSS vars set by JS: --hm-gap, --hm-labelw, --hm-headh, --hm-cellh */
}

/* Header: title + controls */
.acki-heatmap__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.acki-heatmap__titles { display: flex; flex-direction: column; gap: 2px; }

.acki-heatmap__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Meta bar: legend + status */
.acki-heatmap__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.acki-heatmap__legend {
  display: flex;
  align-items: center;
  gap: 6px;
}
.acki-heatmap__legendlabel { font-size: 10px; color: var(--fg-3); font-weight: 500; }
.acki-heatmap__swatches { display: flex; gap: 2px; align-items: center; }

/* Color level swatches */
.acki-heatmap__sw {
  display: inline-block;
  width: 14px; height: 10px;
  border-radius: 2px;
}
.acki-heatmap__sw.s0 { background: rgba(255,255,255,0.06); }
.acki-heatmap__sw.s1 { background: rgba(0,200,255,0.15); }
.acki-heatmap__sw.s2 { background: rgba(0,200,255,0.32); }
.acki-heatmap__sw.s3 { background: rgba(0,200,255,0.52); }
.acki-heatmap__sw.s4 { background: rgba(0,200,255,0.72); }
.acki-heatmap__sw.s5 { background: rgba(0,200,255,0.92); }

/* Scrollable grid area */
.acki-heatmap__scroller {
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 8px 20px 12px;
  flex-shrink: 0;
}

/* Grid itself */
.acki-heatmap__grid {
  display: flex;
  flex-direction: column;
  gap: var(--hm-gap, 4px);
  width: 100%;
}

/* Each row: label + 24 hour cells laid out horizontally */
.acki-heatmap__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--hm-gap, 4px);
  width: 100%;
}

/* Header row: slightly taller */
.acki-heatmap__row--head .acki-heatmap__cell {
  height: var(--hm-headh, 28px);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Label cells (date column, leftmost) */
.acki-heatmap__cell--label {
  width: var(--hm-labelw, 96px);
  min-width: var(--hm-labelw, 96px);
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.acki-heatmap__cell--headlabel {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hour cells (header) */
.acki-heatmap__cell--hour {
  height: var(--hm-headh, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  flex: 1;
  min-width: 0;
  flex-shrink: 1;
}

/* Data cells — the colored squares */
.acki-heatmap__cell--data {
  height: var(--hm-cellh, 12px);
  flex: 1;
  min-width: 0;
  flex-shrink: 1;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  padding: 0;
}
.acki-heatmap__cell--data:hover,
.acki-heatmap__cell--data:focus-visible {
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(0,200,255,0.4);
  outline: none;
  z-index: 1;
  position: relative;
}

/* Level color mapping — matching swatches */
.acki-heatmap__cell--data.lvl-0 { background: rgba(255,255,255,0.05); }
.acki-heatmap__cell--data.lvl-1 { background: rgba(0,200,255,0.16); }
.acki-heatmap__cell--data.lvl-2 { background: rgba(0,200,255,0.33); }
.acki-heatmap__cell--data.lvl-3 { background: rgba(0,200,255,0.52); }
.acki-heatmap__cell--data.lvl-4 { background: rgba(0,200,255,0.72); }
.acki-heatmap__cell--data.lvl-5 { background: rgba(0,200,255,0.92); box-shadow: 0 0 6px rgba(0,200,255,0.4); }

/* ═══════════════════════════════════════════════════════════
   TPS FLARE (Reliability chart) — full component CSS
═══════════════════════════════════════════════════════════ */
.acki-flare {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.acki-flare__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.acki-flare__titles { display: flex; flex-direction: column; gap: 2px; }
.acki-flare__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Plot area fills remaining height */
.acki-flare__plot {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Canvas absolutely positioned — NEVER drives parent height */
.acki-flare__canvas {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   TPS RADAR — full component CSS
═══════════════════════════════════════════════════════════ */
.acki-radar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.acki-radar__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.acki-radar__titles { display: flex; flex-direction: column; gap: 2px; }
.acki-radar__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Plot area fills remaining height */
.acki-radar__plot {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas absolutely positioned */
.acki-radar__canvas {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Hint label below the radar */
.acki-radar__hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--fg-3);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────── */
.dashboard-break { grid-column: 1/-1; height: 0; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max 1100px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .pulse-row { grid-template-columns: 1fr 1fr; }
  .pulse-row .widget--summary { grid-column: span 2; }
  .nackl-dist-cells { grid-template-columns: repeat(3, 1fr); }
  .nackl-dist-cell { border-bottom: 1px solid var(--border); }
  .nackl-dist-cell:nth-child(3), .nackl-dist-cell:nth-child(6) { border-right: 0; }
  .tps-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .twin-section { grid-template-columns: 1fr; }
  .widget--twin { height: 280px; } /* tighter on mobile, still explicit */
  .global-search__field { width: 200px; }
  /* Speedometer and epoch must stack — never side by side on mobile/small tablet */
  .pulse-row { grid-template-columns: 1fr; }
  .pulse-row .widget--gauge { grid-column: 1; }
  .pulse-row .widget--epoch { grid-column: 1; }
  .pulse-row .widget--summary { grid-column: 1; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max 768px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Show bottom nav */
  .bottom-nav { display: flex; }

  /* Layout */
  .dashboard { padding: 16px 12px 80px; }
  :root { --gap: 14px; --section-gap: 20px; }

  /* Header */
  .site-header__inner { padding: 0 14px; }
  .header-brand-row { gap: 10px; height: 52px; }
  .brand__img--logo { height: 28px; }
  .header-clock { display: none; }
  .mobile-menu-toggle { display: flex; }

  /* Ticker */
  .ticker__sep--hide-sm,
  .ticker__item--hide-sm { display: none; }

  /* Nav row becomes full-screen bottom sheet */
  .header-nav-row {
    display: none;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .header-nav-row.is-open {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(3,6,9,0.97);
    backdrop-filter: var(--blur-heavy);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    border: 1px solid var(--border-2);
    border-bottom: 0;
    padding: 6px 14px calc(env(safe-area-inset-bottom,0px) + 20px);
    z-index: 310; /* above bottom-nav (300) so it's not covered */
    box-shadow: 0 -20px 80px rgba(0,0,0,0.7);
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Hide bottom-nav when the mobile menu sheet is open so it doesn't overlap */
  .html--menu-open .bottom-nav,
  body:has(.header-nav-row.is-open) .bottom-nav {
    display: none;
  }
  .header-nav-row.is-open::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    margin: 10px auto 14px;
    flex-shrink: 0;
  }

  /* Scrim is now injected by JS for reliable z-index and touch control */

  .global-search { width: 100%; order: -1; }
  .global-search__field { width: 100%; }

  .primary-nav { flex-direction: column; gap: 4px; }
  .nav-link { padding: 13px 16px; font-size: 14px; border-radius: var(--radius-md); }
  .nav-link--active { background: var(--cyan-dim) !important; border-color: var(--cyan-border) !important; }
  .nav-link svg { width: 18px; height: 18px; }

  /* KPI */
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { padding: 14px 14px 12px; min-height: 100px; }
  .kpi-value { font-size: 22px; }
  .kpi-icon { width: 32px; height: 32px; }

  /* NACKL Banner */
  .nackl-dist-cells { grid-template-columns: repeat(2, 1fr); }
  .nackl-dist-cell { border-right: 0 !important; border-bottom: 1px solid var(--border); }
  .nackl-dist-cell:nth-child(odd) { border-right: 1px solid var(--border) !important; }
  .nackl-dist-cell:last-child { border-bottom: 0; }
  .nackl-dist-cell__value { font-size: 14px; }

  /* Pulse row */
  .pulse-row { grid-template-columns: 1fr; }
  .gauge-wrap { height: 160px; }

  /* Epoch stats */
  .epoch-stats { grid-template-columns: repeat(2, 1fr); }
  .epoch-stat:nth-child(2n) { border-right: 0; }
  .epoch-stat:nth-child(n+3) { border-top: 1px solid var(--border); }

  /* TPS summary */
  .tps-summary-grid { grid-template-columns: 1fr 1fr; }
  .tps-summary-col:nth-child(2n) { border-right: 0; }
  .tps-summary-col:nth-child(n+3) { border-top: 1px solid var(--border); }

  /* Charts */
  .chart-container { height: clamp(160px, 50vw, 220px); }
  .chart-container--lg { height: clamp(180px, 54vw, 250px); }

  /* Mining — 2 cards per row on mobile */
  .mining-cards { grid-template-columns: repeat(2, 1fr); }
  .mining-card { border-right: 0; border-bottom: 1px solid var(--border); }
  /* Restore right border on odd cards (left column) */
  .mining-card:nth-child(odd) { border-right: 1px solid var(--border); }
  /* Last card in each row group — remove bottom border only if it's the last row */
  .mining-cards--row3 .mining-card:nth-last-child(-n+2) { border-bottom: 0; }
  /* If last row has odd number of cards, last card spans 2 cols */
  .mining-cards--row3 .mining-card:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; border-bottom: 0; }
  /* Row dividers between grid groups */
  .mining-cards--row2 .mining-card { border-top: 0; }
  .mining-cards--row3 .mining-card { border-top: 0; }

  /* Widget header */
  .widget-header { padding: 14px 16px 10px; }
  .widget-title { font-size: 12px; }

  /* Footer */
  .site-footer { padding: 18px 16px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-nav { gap: 2px; }

  /* Table */
  .data-table td, .data-table thead th { padding: 10px 12px; }
  .col-hide-mobile { display: none; }

  /* Range buttons */
  .tps-range-btn { min-height: 38px; font-size: 12px; }

  /* Stats strip */
  .stats-strip { flex-wrap: wrap; }
  .stats-strip__item { flex: 0 0 50%; border-bottom: 1px solid var(--border); }
  .stats-strip__item:nth-child(even) { border-right: 0; }

  /* Pagination */
  .pagination { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* Extra small */
@media (max-width: 400px) {
  .ticker__live-text { display: none; }
  .kpi-value { font-size: 19px; }
  .kpi-row { gap: 8px; }
  .nackl-dist-cells { grid-template-columns: 1fr; }
  .nackl-dist-cell { border-right: 0 !important; }
  .nackl-dist-cell:nth-child(odd) { border-right: 0 !important; }
}

/* Tablet between 769-1100 */
@media (min-width: 769px) and (max-width: 1100px) {
  .ticker__sep--hide-md,
  .ticker__item--hide-md { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME
═══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --void:    #f2f5fb;
  --bg:      #edf1f8;
  --surface: rgba(255, 255, 255, 0.90);
  --glass:   rgba(0, 0, 0, 0.03);
  --glass-2: rgba(0, 0, 0, 0.06);

  --border:    rgba(0, 0, 0, 0.08);
  --border-2:  rgba(0, 0, 0, 0.14);
  --border-3:  rgba(0, 0, 0, 0.22);

  --cyan:         #006fa8;
  --cyan-dim:     rgba(0, 111, 168, 0.10);
  --cyan-glow:    rgba(0, 111, 168, 0.18);
  --cyan-border:  rgba(0, 111, 168, 0.28);

  --violet:        #5b21b6;
  --violet-dim:    rgba(91, 33, 182, 0.10);
  --violet-glow:   rgba(91, 33, 182, 0.18);
  --violet-border: rgba(91, 33, 182, 0.28);

  --emerald:        #047857;
  --emerald-dim:    rgba(4, 120, 87, 0.10);
  --emerald-glow:   rgba(4, 120, 87, 0.18);
  --emerald-border: rgba(4, 120, 87, 0.26);

  --amber:        #b45309;
  --amber-dim:    rgba(180, 83, 9, 0.10);
  --amber-glow:   rgba(180, 83, 9, 0.18);
  --amber-border: rgba(180, 83, 9, 0.26);

  --rose:     #be123c;
  --rose-dim: rgba(190, 18, 60, 0.10);

  --fg:   #0f1820;
  --fg-2: #3a4a5e;
  --fg-3: #7a8a9e;

  --surface-2: rgba(0,0,0,0.03);
  --surface-3: rgba(0,0,0,0.05);
}

/* Light mode specific overrides */
[data-theme="light"] body { background: var(--void); }
[data-theme="light"] .bg-aurora { opacity: 0.25; }
[data-theme="light"] .aurora-blob--1 { background: radial-gradient(ellipse, rgba(0,150,255,0.4) 0%, transparent 70%); }
[data-theme="light"] .aurora-blob--2 { background: radial-gradient(ellipse, rgba(100,60,220,0.3) 0%, transparent 70%); }
[data-theme="light"] .aurora-blob--3 { background: radial-gradient(ellipse, rgba(0,170,120,0.3) 0%, transparent 70%); }
[data-theme="light"] .bg-grid { opacity: 0.3; }
[data-theme="light"] .site-header { background: rgba(240,244,251,0.88); border-bottom-color: var(--border); }
[data-theme="light"] .widget { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
[data-theme="light"] .kpi-card { background: rgba(255,255,255,0.92); }
[data-theme="light"] .nackl-dist-banner { background: linear-gradient(135deg, rgba(91,33,182,0.08) 0%, rgba(0,111,168,0.08) 100%); }
[data-theme="light"] .ticker__value.--amber { color: var(--amber); }
[data-theme="light"] .ticker__value.--cyan { color: var(--cyan); }
[data-theme="light"] .ticker__value.--violet { color: var(--violet); }
[data-theme="light"] select, [data-theme="light"] .lang-select { background: rgba(255,255,255,0.8); color: var(--fg); }
[data-theme="light"] .bottom-nav { background: rgba(240,244,251,0.92); border-top-color: var(--border); }

/* ═══════════════════════════════════════════════════════════
   FONT SCALE SYSTEM
   Controlled via JS: document.documentElement style --fs-base
═══════════════════════════════════════════════════════════ */
html {
  font-size: var(--fs-base, 15px);
}

/* Font control buttons */
.font-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}
.font-btn,
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  color: var(--fg-2);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  transition: all 0.12s;
  flex-shrink: 0;
}
.font-btn:hover,
.theme-toggle-btn:hover { border-color: var(--border-2); color: var(--fg); background: var(--glass-2); }
.font-btn--sm { font-size: 10px; }
.font-btn--lg { font-size: 13px; }

.theme-toggle-btn {
  width: 32px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   REVISED LAYOUT: Heatmap+Radar row, Reliability+Block row
═══════════════════════════════════════════════════════════ */
/* Heatmap (2/3) + Radar (1/3) side by side */
.split-section {
  display: grid;
  gap: var(--gap);
}
.split-section--heatmap-radar {
  grid-template-columns: 2fr 1fr;
}
.split-section--flare-block {
  grid-template-columns: 1fr 1fr;
}

/* Widget inside split sections must fill height properly */
.split-section .widget {
  min-height: 0;
}

/* Radar in the heatmap row: fill height of sibling heatmap */
.split-section--heatmap-radar .widget--radar-side {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.split-section--heatmap-radar .widget--radar-side > div {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Block chart in the flare row: consistent height */
.split-section--flare-block .widget--twin {
  height: 340px;
}

/* Shared page styles for /tps and /nackl-emission-distribution */
.page-body {
  min-height: 100vh;
  background: var(--void);
  color: var(--fg);
  font-family: var(--font-display);
}

/* ═══════════════════════════════════════════════════════════
   SUBPAGE DASHBOARD LAYOUT
═══════════════════════════════════════════════════════════ */
.subpage-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px var(--gap) 80px;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.subpage-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-sm);
}

.subpage-title-bar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.subpage-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.subpage-subtitle {
  font-size: 12px;
  color: var(--fg-3);
}

/* ECharts container for /tps */
.echarts-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: var(--blur-card);
}
#tpsEchart {
  width: 100%;
  height: clamp(300px, 50vh, 520px);
}
.echarts-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.echarts-range-btn {
  padding: 5px 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.echarts-range-btn:hover { border-color: var(--border-2); color: var(--fg); }
.echarts-range-btn.is-active { background: var(--cyan-dim); border-color: var(--cyan-border); color: var(--cyan); }
.echarts-range-sep { flex: 1; }
.echarts-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.echarts-export-btn:hover { color: var(--fg); border-color: var(--border-2); }

/* Tps stats table under chart */
.tps-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.tps-stat-cell {
  background: var(--surface);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tps-stat-cell__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.tps-stat-cell__value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }
.tps-stat-cell__sub { font-size: 11px; color: var(--fg-3); }
.tps-stat-cell--amber .tps-stat-cell__value { color: var(--amber); }
.tps-stat-cell--cyan  .tps-stat-cell__value { color: var(--cyan); }
.tps-stat-cell--emerald .tps-stat-cell__value { color: var(--emerald); }
.tps-stat-cell--violet .tps-stat-cell__value { color: var(--violet); }

/* Period breakdown table on /tps */
.period-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-card);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.period-table {
  width: 100%;
  border-collapse: collapse;
}
.period-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}
.period-table td {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.period-table tr:last-child td { border-bottom: 0; }
.period-table tr:hover td { background: var(--glass); }
.period-table td.period-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg); }
.period-table td.col-avg  { color: var(--cyan); }
.period-table td.col-peak { color: var(--emerald); }
.period-table td.col-min  { color: var(--fg-3); }
.period-table td.col-p95  { color: var(--amber); }

/* Emission page */
.emission-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-sm);
}
.emission-chart-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: var(--blur-card);
}
#emissionChart {
  width: 100%;
  height: clamp(280px, 45vh, 480px);
  display: block;
}
.emission-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.emission-info-cell {
  background: var(--surface);
  padding: 14px 20px;
}
.emission-info-cell__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); margin-bottom: 4px; }
.emission-info-cell__value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--fg); }
.emission-info-cell__sub { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.emission-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(6,12,22,0.95);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 13px;
  color: var(--fg);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 240px;
  z-index: 999;
}
[data-theme="light"] .emission-tooltip { background: rgba(255,255,255,0.95); }

@media (max-width: 768px) {
  .tps-stat-grid { grid-template-columns: 1fr 1fr; }
  .emission-info-grid { grid-template-columns: 1fr; }
  .split-section--heatmap-radar { grid-template-columns: 1fr; }
  .split-section--flare-block { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tps-stat-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES — consolidated v5.0
   Single authoritative block. Fixes:
   1. Header controls overflow (font/theme/lang hidden on mobile)
   2. Live ticker shrinking correctly
   3. Atom scene clips orbit rings and dApp cards
   4. Period tables scroll horizontally instead of clipping
   5. Stat grids reflow to 2 columns
   6. All page wrappers contain their children
   7. dApp grid/cards fit narrow screens
   8. Footer nav wraps on small screens
   9. blk-strip stats reflow on very narrow screens
  10. Echarts controls wrap on mobile
═══════════════════════════════════════════════════════════ */

/* ── Global: hard-stop for any stray overflow ─────────────── */
html {
  overflow-x: hidden;
}

/* ── Atom scene: clips orbit rings + dApp cards ───────────── */
.atom-scene {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   TABLET (max 900px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Search bar narrower */
  .global-search__field { width: 180px; }
  /* Hide lang select to save space */
  .lang-select { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (max 768px) — primary breakpoint
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. HEADER: collapse controls to just hamburger ──────── */
  /* Font A+/A− and theme toggle hidden in header bar on mobile.
     They're still functional via JS and the bottom nav theme picker. */
  .font-controls      { display: none; }
  .theme-toggle-btn   { display: none; }
  .lang-select        { display: none; }

  /* header-controls only shows the hamburger button */
  .header-controls {
    gap: 0;
    min-width: 0;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* ── 2. TICKER: allow aggressive shrink ──────────────────── */
  .live-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .ticker__item {
    min-width: 0;
    flex-shrink: 1;
    padding: 0 4px;
  }
  .ticker__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 72px;
  }
  /* Separator takes less space */
  .ticker__sep { margin: 0 6px; }

  /* Brand logo never shrinks */
  .brand { flex-shrink: 0; }

  /* ── 3. DASHBOARD / PAGE CONTAINERS ─────────────────────── */
  body { overflow-x: hidden; }
  .dashboard,
  .dashboard__container,
  .page-container,
  .blocks-page,
  .subpage-main,
  .mg-page {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── 4. KPI CARDS ────────────────────────────────────────── */
  .kpi-card {
    min-width: 0;
    overflow: hidden;
  }
  .kpi-value { word-break: break-all; }

  /* ── 5. WIDGETS: prevent horizontal bleed ────────────────── */
  .widget { overflow: hidden; }
  .widget--full-chart { overflow: hidden; }
  .nackl-dist-banner { overflow: hidden; }

  /* ── 6. PERIOD TABLE: scrollable not clipped ─────────────── */
  /* Note: base rule already sets overflow-x:auto now.
     On mobile, also ensure the table inside has a min-width for readability. */
  .period-table-wrap {
    max-width: 100%;
    box-sizing: border-box;
  }
  .period-table {
    min-width: 440px; /* 6 readable columns at minimum */
  }

  /* ── 7. TPS STAT GRID under chart: 2 cols ────────────────── */
  .tps-stat-grid { grid-template-columns: 1fr 1fr; }
  .tps-stat-cell__value { font-size: 18px; }

  /* ── 8. ECHARTS controls: wrap on small screen ───────────── */
  .echarts-controls {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 6px;
  }
  .echarts-range-sep { display: none; }
  .echarts-export-btn { order: 9; }

  /* ── 9. SUBPAGE KPI ROW: smaller min-cell ────────────────── */
  .subpage-kpi-row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  /* ── 10. EMISSION CHART ──────────────────────────────────── */
  .emission-chart-wrap { overflow: hidden; }
  .emission-kpi-row { grid-template-columns: 1fr 1fr; }

  /* ── 11. MINERS & GAMES PAGE ─────────────────────────────── */
  /* Atom scene: use 96vw so it fits within any padding */
  .atom-scene {
    width: min(820px, 96vw) !important;
    height: min(820px, 96vw) !important;
  }
  /* dApp cards: scale down for narrow screens */
  .dapp-card { width: 108px; }
  .dapp-card__icon { width: 38px; height: 38px; font-size: 20px; }
  .dapp-card__name { font-size: 0.65rem; }

  /* Network stats strip: vertical stack */
  .mg-network-strip { flex-direction: column; }
  .mg-network-stat {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
  }
  .mg-network-stat:last-child { border-bottom: none; }

  /* dApp directory grid: single column */
  .dapp-grid { grid-template-columns: 1fr; }

  /* mg-page: tighter padding, bottom nav clearance */
  .mg-page { padding: 20px 14px 80px; }

  /* ── 12. FOOTER NAV ──────────────────────────────────────── */
  .footer-nav { flex-wrap: wrap; gap: 4px 8px; }
  .site-footer__inner { overflow: hidden; }

  /* ── 13. TOOLTIP: clamp to viewport ─────────────────────── */
  .acki-heatmap__tooltip {
    max-width: calc(100vw - 24px);
    word-break: break-word;
  }
  .emission-tooltip {
    max-width: calc(100vw - 24px);
    min-width: 160px;
  }

  /* ── 14. SITE HEADER SCAN LINE: transform-based, no overflow clip needed ─── */
  /* overflow:hidden removed — would trap position:fixed nav on iOS Safari */
}

/* ═══════════════════════════════════════════════════════════
   EXTRA SMALL (max 400px — iPhone SE, small Androids)
═══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {

  /* Ticker: further trim */
  .ticker__live-text { display: none; } /* already in original but repeated for safety */
  .ticker__value { max-width: 60px; }

  /* KPI cards: even tighter */
  .kpi-row { gap: 8px; }
  .kpi-value { font-size: 19px; }

  /* NACKL banner: single column */
  .nackl-dist-cells { grid-template-columns: 1fr; }
  .nackl-dist-cell { border-right: 0 !important; }
  .nackl-dist-cell:nth-child(odd) { border-right: 0 !important; }

  /* dApp cards even smaller */
  .dapp-card { width: 94px; padding: 8px; }
  .dapp-card__name { font-size: 0.58rem; }
  .dapp-card__icon { width: 32px; height: 32px; font-size: 18px; }

  /* Period table readable at 320px */
  .period-table { min-width: 360px; }

  /* Subpage KPI: 2 cols */
  .subpage-kpi-row { grid-template-columns: 1fr 1fr; }

  /* Header brand row: ultra-compact */
  .site-header__inner { padding: 0 10px; }
  .header-brand-row { gap: 8px; }
  .brand__img--logo { height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEATMAP ½ + EPOCH MONITOR ½  —  50/50 split row
═══════════════════════════════════════════════════════════════════════ */

.split-section--heatmap-epoch {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* Heatmap half — strip widget padding, let heatmap fill naturally */
.widget--heatmap-half {
  padding: 0;
  overflow: hidden;
}
.widget--heatmap-half > #tpsHeatmap {
  display: block;
}

/* ── Epoch Monitor widget ── */
.widget--epoch-mon {
  display: flex;
  flex-direction: column;
}

/* LIVE badge */
.em-live-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--emerald);
  background: var(--emerald-dim);
  border: 1px solid var(--emerald-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  animation: em-pulse 2.4s ease-in-out infinite;
}
@keyframes em-pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }

/* ── Top banner: start | % | end ── */
.em-banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.em-banner-side { display: flex; flex-direction: column; gap: 3px; }
.em-banner-side--right { text-align: right; align-items: flex-end; }
.em-banner-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.em-banner-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.em-banner-time--cyan  { color: var(--cyan); }
.em-banner-time--amber { color: var(--amber); }
.em-banner-utc {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  letter-spacing: 0.01em;
}
.em-banner-center { text-align: center; padding: 0 8px; }
.em-elapsed-pct {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--cyan);
}
.em-elapsed-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-top: 3px;
}

/* ── Progress bar ── */
.em-bar-wrap {
  padding: 8px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.em-bar-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: visible;
}
.em-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--emerald) 0%, var(--cyan) 100%);
  border-radius: 4px;
  transition: width 0.6s linear;
  box-shadow: 0 0 12px rgba(0,200,255,0.30);
}
.em-bar-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2.5px solid var(--bg);
  box-shadow: 0 0 10px rgba(0,200,255,0.65);
  transition: left 0.6s linear;
  z-index: 1;
}

/* ── Countdown ── */
.em-countdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.em-cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 6px 14px;
  border-right: 1px solid var(--border);
  gap: 7px;
}
.em-cd-cell:last-child { border-right: 0; }
/* Colored top accent per cell */
.em-cd-cell--cyan   { border-top: 2px solid var(--cyan);    background: linear-gradient(180deg, var(--cyan-dim) 0%, transparent 40%); }
.em-cd-cell--violet { border-top: 2px solid var(--violet);  background: linear-gradient(180deg, var(--violet-dim) 0%, transparent 40%); }
.em-cd-cell--emerald{ border-top: 2px solid var(--emerald); background: linear-gradient(180deg, var(--emerald-dim) 0%, transparent 40%); }
.em-cd-val {
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.em-cd-val--cyan    { color: var(--cyan); }
.em-cd-val--violet  { color: var(--violet); }
.em-cd-val--emerald { color: var(--emerald); }
.em-cd-lbl {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ── Meta row ── */
.em-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 1;
}
.em-meta-cell {
  padding: 13px 14px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.em-meta-cell:last-child { border-right: 0; }
.em-meta-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
  font-weight: 600;
}
.em-meta-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.em-meta-val--cyan { color: var(--cyan); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .split-section--heatmap-epoch { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .em-banner { padding: 12px 14px 8px; }
  .em-banner-time { font-size: 11px; }
  .em-elapsed-pct { font-size: 20px; }
  .em-cd-val { font-size: 22px; }
  .em-meta { grid-template-columns: 1fr; }
  .em-meta-cell { border-right: 0; border-bottom: 1px solid var(--border); }
  .em-meta-cell:last-child { border-bottom: 0; }
}