/* G4MM4 Validator Stats - Modern Dark Theme */
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #0f0f0f;
  --bg-card: #141414;
  --bg-input: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-muted: #666666;
  --accent-cyan: rgb(60, 190, 230);
  --accent-green: rgb(60, 230, 140);
  --accent-yellow: rgb(195, 195, 70);
  --accent-red: rgb(255, 80, 80);
  --accent-mainnet: #3cbe6e;
  --accent-testnet: #f0883e;
  --border-color: #2a2a2a;
  --border-subtle: #1f1f1f;
  --font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, monospace;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  /* Tokens existing rules already referenced but never
     defined. They silently inherited before; these definitions match the
     dark theme accents. */
  --accent-purple: rgb(186, 104, 200);
  --bg-hover: #1c1c1c;
  --accent-primary: var(--accent-cyan);
  --accent-secondary: var(--accent-green);
  --status-active: var(--accent-green);
  --status-pending: var(--accent-yellow);
  --status-exiting: var(--accent-yellow);
  --status-exited: var(--text-muted);
  --status-slashed: var(--accent-red);
  --status-green: var(--accent-green);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Header */
header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding: 1rem 0;
  position: relative;
}

.home-link {
  position: absolute;
  top: 1rem;
  left: 0;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.home-link:hover {
  color: var(--text-primary);
  background: var(--bg-input);
  border-color: var(--accent-cyan);
}

header h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

header .subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 400;
}

.page-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.page-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}
.page-nav a:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--bg-input);
}

/* Divider between the chain list pages and the rewards pages in the header
   nav row (Blocks/Epochs/Slots/Transactions first). */
.page-nav .nav-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border-color);
  margin: 0 0.25rem;
}

/* Global search (header top-right on every page): compact input + button
   with a dark-theme popup that disambiguates plain integers. */
.global-search {
  position: absolute;
  top: 1rem;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
}

.global-search input {
  width: 240px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.global-search input::placeholder {
  color: var(--text-muted);
}

.global-search input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.global-search button {
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.global-search button:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.gs-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 10;
}

.gs-popup[hidden] {
  display: none;
}

.gs-popup a {
  padding: 8px 14px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}

.gs-popup a:last-child {
  border-bottom: none;
}

.gs-popup a:hover,
.gs-popup a.gs-active {
  color: var(--accent-cyan);
  background: var(--bg-input);
}

.gs-msg {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  max-width: 320px;
  padding: 8px 14px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 10;
}

.gs-msg[hidden] {
  display: none;
}

/* Narrow screens: the search drops into normal flow below the nav row
   instead of overlapping the centered title. */
@media (max-width: 900px) {
  .global-search {
    position: static;
    justify-content: center;
    margin-top: 0.75rem;
  }
}

/* Stats Section */
.stats-section {
  margin-bottom: 2.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

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

.stats-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.stats-card.mainnet::before {
  background: linear-gradient(90deg, var(--accent-mainnet), var(--accent-cyan));
}

.stats-card.testnet::before {
  background: linear-gradient(90deg, var(--accent-testnet), var(--accent-yellow));
}

.stats-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.stats-card.mainnet h2 {
  color: var(--accent-mainnet);
}

.stats-card.testnet h2 {
  color: var(--accent-testnet);
}

.stats-group {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.stats-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.stats-group h3 {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stat {
  background: var(--bg-secondary);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-subtle);
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.stat:hover {
  border-color: var(--border-color);
  transform: translateY(-2px);
}

.stat .label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat .value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
}

.stats-card.testnet .stat .value {
  color: var(--accent-yellow);
}

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

.stats-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

/* Lookup Section */
.lookup-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
}

.lookup-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.lookup-form .form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.lookup-form select,
.lookup-form input[type='text'] {
  padding: 0.875rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.lookup-form select:focus,
.lookup-form input[type='text']:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(60, 190, 230, 0.15);
}

.lookup-form select {
  min-width: 200px;
  cursor: pointer;
}

.lookup-form input[type='text'] {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.lookup-form input[type='text']::placeholder {
  color: var(--text-muted);
}

.lookup-form button {
  padding: 0.875rem 2rem;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  color: #000;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.lookup-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(60, 230, 140, 0.3);
}

.lookup-form button:active {
  transform: translateY(0);
}

.lookup-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.lookup-form button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Button spinner for loading state */
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* Search loading indicator below form */
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  margin-top: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.search-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.lookup-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
}

.file-dropzone {
  position: relative;
  padding: 2rem;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.file-dropzone:hover,
.file-dropzone.dragover {
  border-color: var(--accent-cyan);
  background: var(--bg-input);
}

.file-dropzone.dragover {
  background: rgba(60, 190, 230, 0.05);
}

.file-dropzone input[type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone-content {
  pointer-events: none;
}

.dropzone-title {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.dropzone-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Results Section */
.results-section {
  margin-bottom: 2rem;
}

.results-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.results-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
}

.results-card.mainnet::before {
  background: linear-gradient(180deg, var(--accent-mainnet), var(--accent-cyan));
}

.results-card.testnet::before {
  background: linear-gradient(180deg, var(--accent-testnet), var(--accent-yellow));
}

.results-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-left: 1rem;
}

.results-card.mainnet h3 {
  color: var(--accent-mainnet);
}

.results-card.testnet h3 {
  color: var(--accent-testnet);
}

.table-wrapper {
  overflow-x: auto;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* Results table column widths for proper spacing */
.results-card table {
  table-layout: fixed;
}

.results-card th:nth-child(1),
.results-card td:nth-child(1) {
  width: 4%;
} /* # */

.results-card th:nth-child(2),
.results-card td:nth-child(2) {
  width: 14%;
} /* Pubkey */

.results-card th:nth-child(3),
.results-card td:nth-child(3) {
  width: 10%;
} /* Status */

.results-card th:nth-child(4),
.results-card td:nth-child(4) {
  width: 8%;
} /* Val Idx */

.results-card th:nth-child(5),
.results-card td:nth-child(5) {
  width: 14%;
} /* Activation */

.results-card th:nth-child(6),
.results-card td:nth-child(6) {
  width: 22%;
} /* Withdrawal */

.results-card th:nth-child(7),
.results-card td:nth-child(7) {
  width: 8%;
} /* Dep Idx */

.results-card th:nth-child(8),
.results-card td:nth-child(8) {
  width: 10%;
} /* Block */

th,
td {
  padding: 1rem 0.75rem;
  text-align: left;
}

th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
}

td {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

tr:last-child td {
  border-bottom: none;
}

td.pubkey {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status colors */
.status-active {
  color: var(--accent-green) !important;
  font-weight: 600;
}

.status-pending {
  color: var(--accent-yellow) !important;
}

.status-deposited {
  color: var(--accent-cyan) !important;
}

.status-not-deposited {
  color: var(--accent-red) !important;
}

.status-exiting {
  color: var(--accent-yellow) !important;
}

.status-exited {
  color: var(--text-muted) !important;
}

.status-slashed {
  color: var(--accent-red) !important;
  font-weight: 600;
}

.status-offline {
  color: var(--accent-red) !important;
  font-weight: 600;
}

.status-invalid {
  color: var(--text-muted) !important;
}

.withdrawal-creds-link {
  color: var(--accent-cyan);
  text-decoration: none;
  font-size: 0.85em;
}

.withdrawal-creds-link:hover {
  text-decoration: underline;
}

.creds-updated,
.withdrawal-complete {
  color: var(--status-green, #22c55e);
  font-size: 0.85em;
}

.exec-addr {
  font-family: monospace;
  font-size: 0.82em;
  color: var(--accent-cyan);
  text-decoration: none;
}

.exec-addr:hover {
  text-decoration: underline;
}

.no-results {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 2rem;
  font-size: 1rem;
}

/* Loading / Error */
.loading {
  text-align: center;
  padding: 3rem;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.error {
  background: rgba(255, 80, 80, 0.1);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Diagnostic Error Display */
.diagnostic-error {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.diagnostic-error h3 {
  color: var(--accent-red);
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.diagnostic-error p {
  margin: 0.75rem 0;
  color: var(--text-secondary);
}

.diagnostic-error strong {
  color: var(--text-primary);
}

.diagnostic-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
}

.diagnostic-list li {
  padding: 0.25rem 0;
  color: var(--text-secondary);
}

.diagnostic-list code {
  background: var(--bg-primary);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85rem;
  word-break: break-all;
}

.diagnostic-list .error-reason {
  color: var(--accent-red);
  font-size: 0.85rem;
}

.diagnostic-warning-text {
  color: var(--accent-yellow) !important;
  font-size: 0.9rem;
}

/* Diagnostic Warning Banner */
.diagnostic-warning {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid var(--accent-yellow);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.diagnostic-warning .warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--accent-yellow);
  color: var(--bg-primary);
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.8rem;
}

/* Footer */
footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

/* Footer navigation links. Sits directly above the stats line
   on every page. Side by side, small, muted, cyan on hover like the
   header's page-nav links. */
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

/* Footer disclaimer lines: the two parity sentences plus the
   /disclaimer link. The link shares the footer-links treatment: muted,
   cyan on hover. The paragraphs inherit `footer p`. */
.disclaimer-note a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.disclaimer-note a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

footer p {
  margin-bottom: 0.5rem;
}

.last-update {
  color: var(--text-secondary);
}

.version {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }

  header h1 {
    font-size: 1.75rem;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat .value {
    font-size: 1rem;
  }

  .lookup-form .form-row {
    flex-direction: column;
  }

  .lookup-form select,
  .lookup-form input[type='text'] {
    width: 100%;
  }

  .lookup-section {
    padding: 1.25rem;
  }

  table {
    font-size: 0.8rem;
  }

  td.pubkey {
    max-width: 100px;
  }

  th,
  td {
    padding: 0.75rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .stat {
    padding: 0.75rem 0.5rem;
  }

  .stat .value {
    font-size: 0.9rem;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Selection */
::selection {
  background: rgba(60, 190, 230, 0.3);
  color: var(--text-primary);
}

/* Lookup Header with Reset Button */
.lookup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.lookup-header h2 {
  margin-bottom: 0;
}

.reset-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  border: 1px solid var(--accent-red);
  background: transparent;
  color: var(--accent-red);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn:hover {
  background: var(--accent-red);
  color: #000;
}

/* In-Process Section */
.in-process-section {
  margin-bottom: 2.5rem;
}

.in-process-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

/* In-Process Section (Collapsible) */
.in-process-section.collapsible .section-header-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
  margin-bottom: 1rem;
}

.in-process-section.collapsible .section-header-collapsible:hover {
  border-color: var(--accent-cyan);
}

.in-process-section.collapsible .toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.in-process-section.collapsible .toggle-icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1;
  transition: transform 0.2s ease;
}

/* Single card layout for network activity */
.in-process-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
}

.in-process-card > .empty-message {
  display: none;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}

.in-process-card.all-empty > .empty-message {
  display: block;
}

/* Network sections (Mainnet/Testnet) */
.network-section {
  display: none;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.network-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.network-section.has-items {
  display: block;
}

.network-section > h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid;
}

.network-section.mainnet > h3 {
  color: var(--accent-mainnet);
  border-color: var(--accent-mainnet);
}

.network-section.testnet > h3 {
  color: var(--accent-testnet);
  border-color: var(--accent-testnet);
}

/* Collapsible Network Sections (Mainnet/Testnet in Network Activity) */
.collapsible-network .network-header-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid;
  margin-bottom: 1.25rem;
}

.collapsible-network.mainnet .network-header-collapsible {
  border-color: var(--accent-mainnet);
}

.collapsible-network.testnet .network-header-collapsible {
  border-color: var(--accent-testnet);
}

.collapsible-network .network-header-collapsible h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
  border: none;
}

.collapsible-network.mainnet .network-header-collapsible h3 {
  color: var(--accent-mainnet);
}

.collapsible-network.testnet .network-header-collapsible h3 {
  color: var(--accent-testnet);
}

.collapsible-network .toggle-btn-network {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.collapsible-network .toggle-btn-network:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-input);
}

.collapsible-network .toggle-btn-network .toggle-icon {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1;
}

.collapsible-network .network-content {
  display: block;
}

.collapsible-network.collapsed .network-content {
  display: none;
}

/* Individual pending groups (deposits, exits, slashes) */
.in-process-group {
  display: none;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.in-process-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.in-process-group.has-items {
  display: block;
}

.in-process-group h4 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Collapsible in-process groups (e.g., Active Offline) */
.in-process-group.collapsible .group-header-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 1rem;
}

.in-process-group.collapsible .group-header-collapsible h4 {
  margin-bottom: 0;
}

.in-process-group.collapsible .toggle-btn-sm {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.in-process-group.collapsible .toggle-btn-sm:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-input);
}

.in-process-group.collapsible .toggle-icon {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1;
}

.in-process-group.collapsible .group-content {
  display: block;
}

.in-process-group.collapsible.collapsed .group-content {
  display: none;
}

.in-process-group .count {
  color: var(--text-muted);
  font-weight: 400;
}

.in-process-group .table-wrapper {
  display: block;
}

/* Fixed column widths for consistent alignment across all in-process tables */
.in-process-group table {
  table-layout: fixed;
  width: 100%;
}

.in-process-group th:nth-child(1),
.in-process-group td:nth-child(1) {
  width: 5%; /* # */
}

.in-process-group th:nth-child(2),
.in-process-group td:nth-child(2) {
  width: 18%; /* Pubkey */
}

.in-process-group th:nth-child(3),
.in-process-group td:nth-child(3) {
  width: 10%; /* Status */
}

.in-process-group th:nth-child(4),
.in-process-group td:nth-child(4) {
  width: 8%; /* Val Idx */
}

.in-process-group th:nth-child(5),
.in-process-group td:nth-child(5) {
  width: 35%; /* Timing column (Activation/Withdrawal/Offline Since) */
}

.in-process-group th:nth-child(6),
.in-process-group td:nth-child(6) {
  width: 8%; /* Dep Idx */
}

.in-process-group th:nth-child(7),
.in-process-group td:nth-child(7) {
  width: 10%; /* Block */
}

/* Ensure text doesn't overflow */
.in-process-group td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pretty table styling */
.in-process-group table {
  border-collapse: separate;
  border-spacing: 0;
}

.in-process-group th {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.in-process-group td {
  padding: 0.75rem 0.5rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border-subtle);
}

.in-process-group tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.in-process-group tbody tr:last-child td {
  border-bottom: none;
}

/* Show all row styling */
.in-process-group .show-all-row td {
  border-bottom: none;
  padding: 1rem 0.5rem;
}

/* BLS Credentials Section (collapsible) */
.bls-section {
  margin-bottom: 2.5rem;
}

.bls-section .section-header-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

.bls-section .section-header-collapsible:hover {
  border-color: var(--accent-cyan);
}

.bls-section .section-header-collapsible h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

.bls-section .bls-counts {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.bls-section .bls-count {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bls-section .bls-count.mainnet {
  color: var(--accent-mainnet);
}

.bls-section .bls-count.testnet {
  color: var(--accent-testnet);
}

.bls-section .toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bls-section .toggle-icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1;
  transition: transform 0.2s ease;
}

.bls-section .section-content {
  display: block;
  margin-top: 1rem;
}

.bls-section.collapsed .section-content,
.in-process-section.collapsed .section-content {
  display: none;
}

.bls-section .section-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-style: italic;
}

.bls-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
}

.bls-card > .empty-message {
  display: none;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}

.bls-card.all-empty > .empty-message {
  display: block;
}

/* Genesis validator summary row */
.genesis-summary-row {
  background: var(--bg-secondary);
}

.genesis-summary {
  padding: 1rem !important;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px dashed var(--border-color);
}

/* Show All / Show Less row */
.show-all-row {
  background: var(--bg-secondary);
}

.show-all-cell {
  padding: 0.75rem !important;
  text-align: center;
  border-top: 1px dashed var(--border-color);
}

.show-all-link {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}

.show-all-link:hover {
  text-decoration: underline;
  color: var(--accent-secondary);
}

/* Stats Section Title */
.stats-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.stats-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.stats-card.mainnet h3 {
  color: var(--accent-mainnet);
}

.stats-card.testnet h3 {
  color: var(--accent-testnet);
}

.stats-group h4 {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pagination */
.pagination-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.pagination-info {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pagination-page {
  font-size: 0.9rem;
  color: var(--text-secondary);
  min-width: 100px;
  text-align: center;
}

.btn-pagination {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pagination:hover:not(:disabled) {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.btn-pagination:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .pagination-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }

  .btn-pagination {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
}

/* Network Overview Section */
.network-overview-section {
  margin-bottom: 2rem;
}

.network-overview-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.network-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .network-overview-grid {
    grid-template-columns: 1fr;
  }
}

.network-overview-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.network-overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.network-overview-card.mainnet::before {
  background: linear-gradient(90deg, var(--accent-mainnet), var(--accent-cyan));
}

.network-overview-card.testnet::before {
  background: linear-gradient(90deg, var(--accent-testnet), var(--accent-yellow));
}

.network-overview-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.network-overview-card.mainnet h3 {
  color: var(--accent-mainnet);
}

.network-overview-card.testnet h3 {
  color: var(--accent-testnet);
}

.participation-banner {
  display: grid;
  /* 12-column track so each stat's center lands on an exact quarter of the
     row: spans 3/5, 6/8, and 9/11 center at 25%, 50%, and 75%. The column
     gap is zero on purpose — the quarter math is exact only without gaps,
     and the spans themselves provide the spacing. */
  grid-template-columns: repeat(12, 1fr);
  column-gap: 0;
  row-gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.participation-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

/* Card centers at 25% / 50% / 75% of the row, tight under the six
   overview stat cards above. */
.participation-stat:nth-child(1) {
  grid-column: 3 / 5;
}

.participation-stat:nth-child(2) {
  grid-column: 6 / 8;
}

.participation-stat:nth-child(3) {
  grid-column: 9 / 11;
}

@media (max-width: 600px) {
  .participation-banner {
    grid-template-columns: 1fr;
  }

  .participation-stat,
  .participation-stat:nth-child(1),
  .participation-stat:nth-child(2),
  .participation-stat:nth-child(3) {
    grid-column: auto;
  }
}

.participation-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Info icon — small "i" button next to a label */
.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  text-transform: none;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.info-icon:hover,
.info-icon:focus {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  outline: none;
}

/* Tooltip rendered from data-tooltip on hover/focus.
   Renders BELOW the icon — the banner sits near the top of the page so above
   would push tooltips off-screen. */
.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: 90vw;
  padding: 0.625rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s,
    visibility 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Arrow pointing up to the icon */
.info-icon::before {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--border-color);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s,
    visibility 0.15s;
  z-index: 101;
}

.info-icon:hover::after,
.info-icon:focus::after,
.info-icon:hover::before,
.info-icon:focus::before {
  opacity: 1;
  visibility: visible;
}

/* On narrow screens, anchor tooltip to the left edge of the banner instead of the icon center */
@media (max-width: 600px) {
  .info-icon::after {
    left: 0;
    transform: none;
    width: min(280px, calc(100vw - 2rem));
  }
  .info-icon::before {
    left: 12px;
    transform: none;
  }
}

.participation-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.1;
  color: var(--text-primary);
}

.participation-value.health-good {
  color: var(--accent-green);
}
.participation-value.health-warn {
  color: var(--accent-yellow);
}
.participation-value.health-bad {
  color: var(--accent-red);
}

.participation-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.overview-stat {
  background: var(--bg-secondary);
  padding: 0.875rem;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-subtle);
}

.overview-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.overview-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.overview-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.overview-detail {
  background: var(--bg-secondary);
  padding: 0.875rem;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-subtle);
}

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

.detail-value {
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* Metric value colors — g4mm4.io dashboard parity:
   cyan for counts and chain stats, green for timing, yellow for the tx pool.
   Slashed keeps its red status color; the values use these classes as the
   single color mechanism. */
.overview-value.metric-cyan,
.detail-value.metric-cyan {
  color: var(--accent-cyan); /* rgb(60, 190, 230) */
}

.overview-value.metric-green,
.detail-value.metric-green {
  color: var(--accent-green); /* rgb(60, 230, 140) */
}

.overview-value.metric-yellow,
.detail-value.metric-yellow {
  color: var(--accent-yellow); /* rgb(195, 195, 70) */
}

/* Below ~990px the six-across stats grid gives each cell less than the
   ~108px that 1.6rem mono seven-digit counts need, so values would clip.
   Keep the proven 1.1rem size there (measured clean at 375px). */
@media (max-width: 990px) {
  .overview-value,
  .detail-value {
    font-size: 1.1rem;
  }
}

/* Overview Timing Stats (integrated) */
.overview-timing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 600px) {
  .overview-timing {
    grid-template-columns: 1fr;
  }
}

.timing-group h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timing-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.timing-stat {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.timing-stat em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.network-overview-card.mainnet .timing-stat span[data-stat] {
  color: var(--accent-cyan);
}

.network-overview-card.testnet .timing-stat span[data-stat] {
  color: var(--accent-yellow);
}

/* Consolidated Metrics */
.consolidated-metrics {
  background: linear-gradient(135deg, rgba(60, 190, 230, 0.1), rgba(60, 230, 140, 0.1));
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.consolidated-metrics h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--accent-cyan);
}

.consolidated-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .consolidated-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .consolidated-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Group view: aggregate performance panel between the
   metrics strip and the per-validator tables. Dark theme, existing tokens. */
.group-view {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.gv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.9rem 1.25rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

.gv-header:hover {
  border-color: var(--accent-cyan);
}

.gv-header h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-cyan);
}

.gv-header .toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.gv-header .toggle-icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1;
  transition: transform 0.2s ease;
}

.gv-content {
  padding: 1.25rem;
}

.group-view.collapsed .gv-content {
  display: none;
}

/* Layout review: named areas keep the DOM
   order (attestation, proposals, sweeps, related) and reflow through
   grid-template-areas. Row 1: attestation full width. Row 2: proposals and
   sweeps paired. Row 3: related full width. */
.gv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    'att att'
    'prop sweep'
    'related related';
  gap: 1rem;
}

.gv-card--att {
  grid-area: att;
}

.gv-card--prop {
  grid-area: prop;
}

.gv-card--sweep {
  grid-area: sweep;
}

.gv-card--related {
  grid-area: related;
}

/* The 20-row outlier cap stacks endlessly in one column at desktop width;
   two columns halve it. Only the outlier list gets this — the missed and
   no-sweep rows carry slot + timestamp and stay single-column. */
.gv-outlier-cols {
  columns: 2;
  column-gap: 1rem;
}

.gv-outlier-cols .gv-row {
  break-inside: avoid;
}

@media (max-width: 900px) {
  .gv-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'att'
      'prop'
      'sweep'
      'related';
  }

  .gv-outlier-cols {
    columns: 1;
  }
}

.gv-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1rem;
}

.gv-card-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.gv-big {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-green);
  margin-bottom: 0.5rem;
}

.gv-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
  padding: 0.5rem 0;
}

.gv-muted {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 0.5rem;
}

.gv-green {
  color: var(--accent-green);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.gv-stat {
  margin: 0.15rem 0;
  font-size: 0.9rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  /* Dense-state review: the totals rows wrap on word boundaries,
     and an unbreakable token (a wide PLS/USD pair) breaks instead of
     overflowing the card at narrow viewports. */
  overflow-wrap: break-word;
}

.gv-stat em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.gv-usd {
  color: var(--text-muted);
  font-size: 0.72rem;
  margin-left: 0.3rem;
}

.gv-segbar {
  display: flex;
  height: 0.6rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-input);
  margin: 0.5rem 0 0.4rem;
}

.gv-seg {
  height: 100%;
}

.gv-seg-green {
  background: var(--accent-green);
}

.gv-seg-cyan {
  background: var(--accent-cyan);
}

.gv-seg-yellow {
  background: var(--accent-yellow);
}

.gv-seg-red {
  background: var(--accent-red);
}

.gv-seg-muted {
  background: var(--bg-hover);
}

.gv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.gv-strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3rem;
  margin: 0.75rem 0;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.gv-strip-bar {
  flex: 0 0 4px;
  width: 4px;
  min-height: 2px;
  border-radius: 1px;
}

.gv-bar-green {
  background: var(--accent-green);
}

.gv-bar-yellow {
  background: var(--accent-yellow);
}

.gv-bar-red {
  background: var(--accent-red);
}

.gv-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gv-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  background: var(--bg-secondary);
}

/* One-line rows at 375px: the smaller row font and tighter gaps keep the
   missed row ("#104 9123456 2026-04-06 14:09 UTC") unwrapped. The "slot"
   label hides at narrow widths so the row fits on one line; the row keeps
   it at desktop widths. Floor 0.72rem. Placed after the base .gv-row rule
   so the cascade keeps the override. */
@media (max-width: 900px) {
  .gv-row {
    font-size: 0.78rem;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
  }

  .gv-slot-label {
    display: none;
  }
}

.gv-row-warn {
  background: rgba(195, 195, 70, 0.08);
}

.gv-row-bad {
  background: rgba(255, 80, 80, 0.1);
}

.gv-index-link {
  color: var(--accent-cyan);
  text-decoration: none;
}

.gv-index-link:hover {
  color: var(--accent-green);
  text-decoration: underline;
}

.gv-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  border: 1px solid;
  background: var(--bg-hover);
}

.gv-tag--red {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.gv-tag--yellow {
  color: var(--accent-yellow);
  border-color: var(--accent-yellow);
}

/* Amber has no theme token; a literal keeps the token set. */
.gv-tag--amber {
  color: #e6a23c;
  border-color: #e6a23c;
}

.gv-related-banner {
  border: 1px solid var(--accent-cyan);
  border-left: 4px solid var(--accent-cyan);
}

.gv-related-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.gv-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.gv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.gv-addr {
  color: var(--accent-cyan);
}

.gv-chip-count {
  color: var(--text-muted);
}

.gv-chip-note {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.gv-add-btn {
  background: var(--bg-input);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gv-add-btn:hover {
  background: var(--accent-cyan);
  color: var(--bg-primary);
}

/* Cross-highlight tints for the results table. */
.row-warn td {
  background: rgba(195, 195, 70, 0.07);
}

.row-bad td {
  background: rgba(255, 80, 80, 0.1);
}

/* Muted income-coverage note under the income card. */
.income-coverage-note {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-family: var(--font-mono);
}

.consolidated-stat {
  background: var(--bg-card);
  padding: 0.875rem;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-subtle);
}

.consolidated-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.consolidated-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* Premium Metrics Cards */
.metrics-primary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem;
  border: 1px solid var(--border-subtle);
}

.metric-card.rewards {
  border-left: 3px solid var(--accent-green);
}

.metric-card.income {
  border-left: 3px solid var(--accent-cyan);
}

.metric-card.apr {
  border-left: 3px solid var(--accent-purple);
}

.metric-card.stake {
  border-left: 3px solid var(--text-muted);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-badge {
  font-size: 0.65rem;
  background: var(--bg-hover);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--text-secondary);
}

.metric-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-green);
}

.metric-card.stake .metric-value {
  color: var(--text-primary);
}

.metric-usd {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  font-family: var(--font-mono);
}

/* Period breakdown within cards */
.metric-periods {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.period {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  background: var(--bg-hover);
  border-radius: 6px;
}

.period-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.period-value {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent-green);
}

.period-usd {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.metric-card.apr .period-value {
  color: var(--accent-purple);
}

/* Metrics Note */
.metrics-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Status Bar */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--bg-hover);
}

.status-count {
  font-weight: 700;
  font-family: var(--font-mono);
}

.status-item.active .status-count {
  color: var(--status-active);
}
.status-item.pending .status-count {
  color: var(--status-pending);
}
.status-item.exiting .status-count {
  color: var(--status-exiting);
}
.status-item.exited .status-count {
  color: var(--status-exited);
}
.status-item.slashed .status-count {
  color: var(--status-slashed);
}
.status-item.offline .status-count {
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .metrics-primary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .metrics-primary {
    grid-template-columns: 1fr;
  }

  .status-bar {
    justify-content: center;
  }
}

/* Validator Links */
.validator-link {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color 0.2s ease;
}

.validator-link:hover {
  color: var(--accent-green);
  text-decoration: underline;
}

.block-link,
.tx-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.block-link:hover,
.tx-link:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

/* ====================================
   Network Mode Switcher
   ==================================== */

/* Testnet Mode Banner - Full width at top of page */
.testnet-mode-banner {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: white;
  padding: 0.75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.testnet-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.testnet-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.testnet-text {
  font-size: 0.9rem;
}

.switch-to-mainnet-btn {
  background: white;
  color: #6d28d9;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.switch-to-mainnet-btn:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}

/* Testnet Available Banner - Inline notification */
.testnet-available-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(109, 40, 217, 0.15) 100%);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.testnet-available-banner .banner-icon {
  font-size: 1.25rem;
}

.testnet-available-banner .banner-text {
  flex: 1;
  min-width: 200px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.testnet-available-banner strong {
  color: #a78bfa;
}

.view-testnet-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-testnet-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.dismiss-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.dismiss-btn:hover {
  opacity: 1;
}

/* Network Switcher Button at Bottom */
.network-switcher {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

.network-switch-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.network-switch-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-purple);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.network-switch-btn .switch-icon {
  font-size: 1.1rem;
}

/* Testnet mode styling for switch button */
.testnet-mode .network-switch-btn {
  border-color: rgba(124, 58, 237, 0.3);
}

.testnet-mode .network-switch-btn:hover {
  border-color: var(--accent-green);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* Hide non-active network sections based on mode.
   Mainnet page (default) shows only mainnet data; testnet page shows only
   testnet. Each network has the same structure and metrics, but only one
   is rendered at a time per the body.testnet-mode toggle. */
body:not(.testnet-mode) .network-overview-card.testnet,
body:not(.testnet-mode) .network-section.testnet,
body:not(.testnet-mode) .bls-count.testnet {
  display: none;
}

body.testnet-mode .network-overview-card.mainnet,
body.testnet-mode .network-section.mainnet,
body.testnet-mode .bls-count.mainnet {
  display: none;
}

/* Single-network mode — the visible card stretches to full width with a
   horizontal layout for stats / details / timing groups. */
body:not(.testnet-mode) .network-overview-grid,
body.testnet-mode .network-overview-grid {
  grid-template-columns: 1fr;
}

body:not(.testnet-mode) .network-overview-card.mainnet .overview-stats,
body.testnet-mode .network-overview-card.testnet .overview-stats {
  grid-template-columns: repeat(6, 1fr);
}

body:not(.testnet-mode) .network-overview-card.mainnet .overview-details,
body.testnet-mode .network-overview-card.testnet .overview-details {
  /* 9 cards: three rows of three. */
  grid-template-columns: repeat(3, 1fr);
}

body:not(.testnet-mode) .network-overview-card.mainnet .overview-timing,
body.testnet-mode .network-overview-card.testnet .overview-timing {
  display: flex;
  gap: 2rem;
}

body:not(.testnet-mode) .network-overview-card.mainnet .timing-group,
body.testnet-mode .network-overview-card.testnet .timing-group {
  flex: 1;
}

@media (max-width: 900px) {
  body:not(.testnet-mode) .network-overview-card.mainnet .overview-stats,
  body.testnet-mode .network-overview-card.testnet .overview-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  body:not(.testnet-mode) .network-overview-card.mainnet .overview-details,
  body.testnet-mode .network-overview-card.testnet .overview-details {
    grid-template-columns: repeat(3, 1fr);
  }

  body:not(.testnet-mode) .network-overview-card.mainnet .overview-timing,
  body.testnet-mode .network-overview-card.testnet .overview-timing {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  body:not(.testnet-mode) .network-overview-card.mainnet .overview-details,
  body.testnet-mode .network-overview-card.testnet .overview-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile responsiveness for banners */
@media (max-width: 640px) {
  .testnet-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .testnet-available-banner {
    flex-direction: column;
    text-align: center;
  }

  .testnet-available-banner .banner-text {
    min-width: auto;
  }

  .dismiss-btn {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }

  .testnet-available-banner {
    position: relative;
    padding-right: 2rem;
  }
}

/* Validator page */

/* Single-column detail layout sharing the global container width, so every
   page reads at the same body width. */
.vp-container {
  max-width: 1400px;
}

.vp-pubkey-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.vp-pubkey {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 12px;
  max-width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-copy-btn {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vp-copy-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.vp-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.vp-badge {
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.vp-badge-offline,
.vp-badge-slashed {
  color: var(--accent-red);
}

.vp-withdrawal-status {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.vp-loading {
  display: none;
}

.vp-loading.visible {
  display: block;
}

.vp-error {
  display: none;
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  background: rgba(255, 80, 80, 0.08);
  border-left: 3px solid var(--accent-red);
  border-radius: 4px;
  color: var(--accent-red);
  font-size: 0.95rem;
}

.vp-error.visible {
  display: block;
}

.vp-content {
  display: none;
}

.vp-content.visible {
  display: block;
}

.vp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.vp-card h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.vp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: 28px;
}

.vp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.vp-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.vp-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}

.vp-value-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

.vp-note-warning {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(195, 195, 70, 0.08);
  border-left: 3px solid var(--accent-yellow);
  border-radius: 4px;
  color: var(--accent-yellow);
  font-size: 0.9rem;
}

.vp-income-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.vp-income-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp-income-stat .vp-value {
  text-align: left;
  color: var(--text-primary);
  font-weight: 600;
}

.vp-usd {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Scrollable hex block for the transaction page's Input Data row. */
.vp-code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  margin-top: 0.25rem;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  word-break: break-all;
}

.vp-muted {
  color: var(--text-muted);
}

.vp-age {
  white-space: nowrap;
}

.vp-empty {
  color: var(--text-muted);
  padding: 1rem 0;
}

.vp-att-summary {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.vp-att-pct {
  color: var(--accent-cyan);
  font-weight: 700;
  font-family: var(--font-mono);
}

.vp-table-wrap {
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.vp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  line-height: 1.4;
}

.vp-table th,
.vp-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  white-space: nowrap;
}

.vp-table thead th {
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-color);
}

.vp-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.vp-num {
  text-align: right !important;
}

.vp-produced {
  color: var(--accent-green);
  font-weight: 600;
}

.vp-missed {
  color: var(--accent-red);
  font-weight: 600;
}

.vp-incl-optimal {
  color: var(--accent-green);
}

.vp-incl-delayed {
  color: var(--accent-yellow);
}

/* Epoch badge in the attestation table: Current marks the live epoch,
   Pending marks epochs after the finalized boundary. */
.vp-epoch-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

.vp-epoch-current {
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.vp-epoch-pending {
  color: var(--accent-yellow);
  background: rgba(195, 195, 70, 0.1);
  border: 1px solid rgba(195, 195, 70, 0.35);
}

/* One-line footnote under the attestation table. */
.vp-incl-note {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Show-more control for the related list. The table sections reuse the main
   page's show-all-row / show-all-cell / show-all-link classes directly. */
.vp-show-more-wrap {
  text-align: center;
  padding-top: 10px;
}

.vp-graffiti {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--text-secondary);
}

.vp-addr {
  color: var(--accent-cyan);
}

.vp-related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vp-related-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.vp-related-list li .vp-muted {
  margin-left: auto;
}

/* Below the tablet breakpoint the page padding tightens so the tables fit
   without horizontal scroll down to a 640px viewport; below that the wrapper
   keeps overflow: auto and scrolls. Text size never changes. */
@media (max-width: 767px) {
  .vp-container {
    padding: 1rem 0.75rem;
  }

  .vp-card {
    padding: 1rem;
  }

  .vp-table th,
  .vp-table td {
    padding: 8px 6px;
  }
}

/* Documentation pages: /resources and /validator-install.
   Static ports of the g4mm4.io endpoints-and-resources and
   validator-install pages, in the ValDash dark theme. */

/* Narrower shell so the 800px source cards stay the focal column. */
.doc-container {
  max-width: 1400px;
}

/* Static replacement for the source pages' tab labels
   (ENDPOINTS / RESOURCES and PRYSM / LIGHTHOUSE). */
.doc-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.5rem;
}

/* Card mirroring the source Card component: 1px border, rounded, padded,
   centered at 800px. */
.doc-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 30px;
  max-width: 800px;
  margin: 15px auto 0;
  font-size: 14px;
  background: var(--bg-secondary);
}

/* Cards that carry a wide table get a wider shell than the 800px text
   cards, so the table cells have room to wrap at word boundaries. */
.doc-card-table {
  max-width: 1160px;
}

.doc-card-title {
  font-size: 24px;
  font-weight: 600;
}

.doc-card-note {
  margin-top: 15px;
  color: var(--text-secondary);
}

.doc-body {
  padding: 0 40px;
  text-align: left;
}

.doc-body p {
  margin-top: 10px;
}

.doc-note {
  color: var(--text-secondary);
}

/* Long endpoint URLs inside cards wrap instead of forcing page-wide
   horizontal scroll on narrow screens. */
.doc-body a {
  overflow-wrap: anywhere;
}

/* Underlined sub-headings ("PulseChain Mainnet") as in the source. */
.doc-subtitle {
  font-size: 16px;
  text-decoration: underline;
  padding: 15px 0 10px;
}

.doc-subtitle-first {
  padding-top: 20px;
}

/* Bold sub-headings inside cards ("Install Docker"). */
.doc-subheading {
  font-weight: 500;
  font-size: 20px;
  padding-top: 10px;
}

.doc-subheading-sm {
  font-weight: 500;
  font-size: 18px;
  padding-top: 10px;
}

/* Label/value grid for endpoint tables. Two columns; labels collapse to
   their own row on narrow screens. */
.doc-endpoint-grid {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 20px 40px;
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  max-width: 100%;
}

.doc-endpoint-grid div {
  overflow-wrap: anywhere;
}

.doc-endpoint-grid div:nth-child(odd) {
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .doc-endpoint-grid {
    grid-template-columns: 1fr;
  }

  .doc-endpoint-grid div:nth-child(odd) {
    text-decoration: underline;
    font-size: 18px;
  }
}

/* Link cards for resource lists. Whole item is one link. */
.doc-list {
  list-style: none;
  margin-top: 15px;
}

.doc-list li {
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.doc-list li:hover {
  background-color: var(--bg-input);
  border-color: var(--accent-cyan);
}

.doc-list li a {
  color: var(--text-primary);
  text-decoration: none;
}

.doc-list li a:hover {
  text-decoration: underline;
}

.doc-list li a .doc-url {
  color: var(--accent-cyan);
  overflow-wrap: anywhere;
}

/* Command blocks. The wrap variant soft-wraps long lines (BLS examples,
   curl commands) instead of forcing horizontal scroll. */
.doc-code {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 15px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
}

.doc-code code {
  font-family: inherit;
  white-space: pre;
}

.doc-code.doc-code-wrap {
  overflow-x: hidden;
}

.doc-code.doc-code-wrap code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* Divider line above the Withdrawal section in each client guide. */
.doc-divider {
  height: 45px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  margin-top: 15px;
}

.doc-centered-title {
  text-align: center;
  padding-top: 25px;
  font-size: 24px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .doc-card {
    padding: 20px;
  }

  .doc-body {
    padding: 0 12px;
  }

  .doc-endpoint-grid {
    padding: 16px;
  }
}

/* ============ main-page additions ============ */

/* External site links row under the main nav. */
.page-nav.external-links {
  margin-top: 0.5rem;
  gap: 0.5rem;
}

.page-nav.external-links a {
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.25rem 0.75rem;
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

.page-nav.external-links a:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--bg-input);
}

/* Stuck-indexer warning banner (amber/red). */
.indexer-warning-banner {
  background: linear-gradient(135deg, rgba(255, 170, 40, 0.1) 0%, rgba(255, 80, 80, 0.14) 100%);
  border: 1px solid rgba(255, 170, 40, 0.45);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.indexer-warning-banner .banner-icon {
  font-size: 1.25rem;
}

.indexer-warning-banner .banner-text {
  flex: 1;
  min-width: 200px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Epoch status section. */
.epoch-status-section {
  margin-bottom: 2.5rem;
}

.epoch-status-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.epoch-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .epoch-status-grid {
    grid-template-columns: 1fr;
  }
}

.epoch-status-network {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}

.epoch-status-header {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.epoch-slots {
  display: flex;
  gap: 4px;
}

/* g4mm4.io parity: 32 equal-width boxes. Cell colors are inline styles the
   render function assigns, so no per-status color rules remain. Every cell
   links to its slot page, hence the pointer and hover. */
.epoch-slot {
  flex: 1;
  height: 30px;
  border: 2px solid var(--border-subtle);
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    filter 0.15s ease;
}

.epoch-slot:hover {
  filter: brightness(1.3);
}

/* The head-slot cell pulses (g4mm4.io keyframes: scale 1 → 1.1 → 1). */
.epoch-slot.pulse {
  animation: epoch-slot-pulse 1s ease infinite;
}

@keyframes epoch-slot-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Single-network mode: hide the inactive network's strip and stretch the
   visible one, matching the overview cards. */
body:not(.testnet-mode) .epoch-status-network.testnet,
body.testnet-mode .epoch-status-network.mainnet {
  display: none;
}

body:not(.testnet-mode) .epoch-status-grid,
body.testnet-mode .epoch-status-grid {
  grid-template-columns: 1fr;
}

/* Chain activity charts. */
.chain-charts-section {
  margin-bottom: 2.5rem;
}

.chain-charts-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.chart-network-group {
  margin-bottom: 1.25rem;
}

.chart-network-group:last-child {
  margin-bottom: 0;
}

.chart-network-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

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

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}

.chart-card h3 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Title left, live value right (g4mm4.io Stat convention). */
.chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.chart-card .chart-header h3 {
  margin-bottom: 0;
}

.chart-current {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.chart-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding: 0 0.25rem;
}

/* Instant chart tooltip: one shared element per chart, positioned above
   the hovered bar by app.js (left is set in JS, translateX(-50%) centers
   it, the bottom offset keeps it clear of the tallest bar). */
.chart-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.08s ease-out;
}

.chart-tooltip.visible {
  opacity: 1;
}

.chart-bar-slot {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.chart-bar {
  width: 100%;
  max-width: 10px;
  border-radius: 2px 2px 0 0;
  background: var(--accent-cyan);
  min-height: 0;
}

.chart-network-group.testnet .chart-bar {
  background: var(--accent-yellow);
}

.chart-awaiting {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: auto;
}

.chart-minmax {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* Single-network mode: hide the inactive network's chart group. */
body:not(.testnet-mode) .chart-network-group.testnet,
body.testnet-mode .chart-network-group.mainnet {
  display: none;
}

/* Most Recent Epochs + Blocks tables. Two cards side by side
   on desktop, stacked on narrow screens, matching the g4mm4.io look. */
.recent-tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .recent-tables-grid {
    grid-template-columns: 1fr;
  }
}

.recent-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  min-width: 0;
  overflow-x: auto;
}

.recent-table-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.recent-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.recent-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Fixed body-row height keeps the Epochs and Blocks cards' rows aligned
   side by side; the single-line cell content centers within the row. */
.recent-table tbody td {
  height: 2.4rem;
  vertical-align: middle;
}

.recent-table tbody tr:last-child td {
  border-bottom: none;
}

.recent-status-pending {
  color: var(--status-pending);
}

.recent-status-finalized,
.recent-status-proposed {
  color: var(--status-active);
}

.recent-calculating {
  color: var(--text-muted);
}

.part-muted {
  color: var(--text-muted);
}

/* Single-network mode: hide the inactive network's table pair. */
body:not(.testnet-mode) .recent-tables-grid.testnet,
body.testnet-mode .recent-tables-grid.mainnet {
  display: none;
}

/* Narrow screens: smaller mono text keeps the six-column blocks table
   inside its card; the card scrolls horizontally when it still cannot. */
@media (max-width: 525px) {
  .recent-table {
    font-size: 0.75rem;
  }

  .recent-table th,
  .recent-table td {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}

/* ============ Chain detail pages (epoch/slot/block/tx) ============ */

/* Full transaction hash line under the page title. Monospaced and
   break-anywhere so a 66-character hash never overflows a narrow viewport. */
.vp-hash {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* Thin participation bar for the recent-epochs tables (main page and
   /epochs). The participation cell is a horizontal row: the percentage
   text sits left of a bar that fills the remaining cell width. The fill
   width is data-driven (set by JS from participation_pct); the color
   follows the same health thresholds as the overview participation
   metric (90 / 66.67). "Calculating" rows keep the muted text alone. */
.part-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}

.part-text {
  flex-shrink: 0;
  white-space: nowrap;
}

.part-bar {
  flex: 1;
  min-width: 60px;
  height: 5px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}

.part-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-red);
}

.part-bar-fill.good {
  background: var(--accent-green);
}

.part-bar-fill.warn {
  background: var(--accent-yellow);
}

/* Transaction execution-outcome chip colors (tx page). */
.status-failed {
  color: var(--accent-red) !important;
  font-weight: 600;
}

.status-muted {
  color: var(--text-muted) !important;
}

/* Transaction page method-id chip: inline mono over the site's input
   background, sized for the 4-byte selector. */
.vp-method-id {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-input);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ============ Transaction page etherscan-style layout ============ */

/* Status hero: the outcome badge and the full hash with its copy button
   sit above the cards. The hash breaks anywhere on narrow viewports. */
.vp-tx-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0.25rem 0 1.25rem;
}

.vp-tx-hero-hash {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.vp-tx-status {
  padding: 4px 18px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.vp-tx-status-success {
  color: var(--accent-green);
}

.vp-tx-status-failed {
  color: var(--accent-red);
}

.vp-tx-status-pending {
  color: var(--accent-yellow);
}

.vp-tx-status-muted {
  color: var(--text-muted);
}

/* Failed-execution banner: states what the receipt proves, never a revert
   reason. Red accent, the same shape as the yellow pending note. */
.vp-note-error {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 80, 80, 0.08);
  border-left: 3px solid var(--accent-red);
  border-radius: 4px;
  color: var(--accent-red);
  font-size: 0.9rem;
}

/* A grid cell that groups a parent row with its labeled sub-rows (the fee
   and gas families). Sub-rows indent under the parent row. */
.vp-grid > .vp-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vp-cell-wide {
  grid-column: 1 / -1;
}

.vp-sub {
  padding-left: 14px;
  border-bottom: none;
  font-size: 0.85rem;
}

.vp-sub .vp-label {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Gas-used bar under the Gas Used row. Failed executions fill red. */
.vp-gas-bar {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 8px;
}

.vp-gas-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-cyan);
}

.vp-gas-bar-fill.vp-gas-failed {
  background: var(--accent-red);
}

/* Input Data view toggle (Original / UTF-8). */
.vp-view-toggle {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-left: 4px;
}

.vp-view-toggle.is-active {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

/* 90-day balance sparkline card (validator page): a full-width SVG strip
   with min/max labels under it. The polyline scales to the window min/max;
   transparent per-point circles carry the hover tooltips. */
.vp-sparkline-wrap {
  width: 100%;
  border: 1px solid var(--bg-input);
  border-radius: 6px;
  background: var(--bg-card);
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
}

.vp-sparkline {
  display: block;
  width: 100%;
  height: 140px;
}

.vp-sparkline circle:hover {
  fill: var(--bg-input);
}

.vp-sparkline-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  padding-top: 0.4rem;
}

/* Income card two-row layout: the Total rewards and Total
   withdrawn tiles sit in a centered top row, and the period income and APR
   tiles fill the grid below. auto-fit collapses the top row to a single
   centered column on narrow screens. The rest row uses a 140px minimum so
   all six tiles share one row at the desktop card width (6 x 140px plus
   gaps = 900px, inside the ~1182px card grid at a 1280px viewport), and
   auto-fit collapses the unused seventh track so the six tiles stretch
   edge to edge. */
.vp-income-grid.vp-income-grid-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp-income-row-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
  justify-content: center;
  gap: 12px;
}

.vp-income-row-rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* RPC method-list pages (2026-08-31): per-network method tables.
   Row-bordered tables in the doc theme; the first column stays mono so
   method names read as code. The wrapper scrolls horizontally on narrow
   screens instead of squashing the wide table. */
.doc-table-wrapper {
  overflow-x: auto;
  margin-top: 15px;
}

/* Fixed column layout: the auto algorithm over-shares the first column
   and squeezes the Cached column into a narrow tower. These widths hold
   at every size above the floor; below it the wrapper scrolls. The
   method column fits the longest nowrap name (42 chars) with margin. */
.doc-table {
  width: 100%;
  table-layout: fixed;
  min-width: 1000px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.doc-table th:nth-child(1) {
  width: 39%;
}

.doc-table th:nth-child(2) {
  width: 11%;
}

.doc-table th:nth-child(3) {
  width: 16%;
}

.doc-table th:nth-child(4) {
  width: 34%;
}

/* Five-column comparison chart: the category names keep their mono
   nowrap form, and the four provider columns split the rest evenly.
   The floor sits just under the desktop wrapper width so no scrollbar
   appears on desktop. */
.doc-table-compare {
  min-width: 1010px;
}

.doc-table-compare th:nth-child(1) {
  width: 31%;
}

.doc-table-compare th:nth-child(2),
.doc-table-compare th:nth-child(3),
.doc-table-compare th:nth-child(4),
.doc-table-compare th:nth-child(5) {
  width: 17.25%;
}

.doc-table th,
.doc-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}

.doc-table th {
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.doc-table td:first-child {
  font-family: var(--font-mono);
  white-space: nowrap;
}

.doc-table tr:hover td {
  background-color: var(--bg-input);
}

.doc-table .cell-muted {
  color: var(--text-secondary);
}