/* ============================================================
   proximapool — single stylesheet
   Variables, light/dark themes, components:
   - no remote font (Geist / Geist Mono self-hosted, otherwise
     system fonts);
   - no inline style: everything is a class (ADDITIONS section at
     the end);
   - no profitability calculator (no price is published).
   ============================================================ */

/* ---- Self-hosted fonts (OFL 1.1, see fonts/LICENSES.md) ----
   Latin subset, variable wght axis: Geist for text and figures
   (tabular figures), Geist Mono for code, keys and txids.
   No external request. */
@font-face {
  font-family: "Geist PP";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono PP";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Spacing (4px base) ---- */
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* ---- Typography ---- */
  --font-ui: "Geist PP", "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono PP", "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Fira Code", Menlo, Consolas, monospace;
  /* Numeric values: tabular figures (aligned) */
  --font-num: var(--font-ui);
  --num-features: "tnum" 1;

  /* ---- Z-index ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 500;
  --z-toast: 600;
  --z-cmd: 700;

  /* ---- Transitions ---- */
  --t-fast: 150ms ease;
  --t-normal: 250ms ease;
  --t-slow: 400ms ease;
}

/* ---- LIGHT MODE (default) ---- */
:root, [data-theme="light"] {
  --bg: #F8F9FB;
  --surface-1: #FFFFFF;
  --surface-2: #F3F4F8;
  --surface-3: #EBECF1;
  --surface-4: #E2E4EA;
  --elevated: #FFFFFF;

  --text-1: #1A1C23;
  --text-2: #5A5E6E;
  --text-3: #8B8E9E;
  --text-disabled: #B0B3C0;
  --text-inv: #F8F9FB;

  --border-subtle: rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.1);
  --border-strong: rgba(0,0,0,0.18);
  --border-active: rgba(13,148,136,0.4);

  --primary-50: #F0FDFA;
  --primary-100: #CCFBF1;
  --primary-200: #99F6E4;
  --primary-300: #5EEAD4;
  --primary-400: #2DD4BF;
  --primary-500: #14B8A6;
  --primary-600: #0D9488;
  --primary-700: #0F766E;
  --primary-800: #115E59;
  --primary-900: #134E4A;
  --primary: #0D9488;
  --primary-dim: rgba(13,148,136,0.1);

  --accent: #D97706;
  --accent-dim: rgba(217,119,6,0.1);

  --success: #059669;
  --success-dim: rgba(5,150,105,0.1);
  --warning: #D97706;
  --warning-dim: rgba(217,119,6,0.1);
  --danger: #DC2626;
  --danger-dim: rgba(220,38,38,0.1);
  --info: #2563EB;
  --info-dim: rgba(37,99,235,0.1);

  --chart-1: #0D9488;
  --chart-2: #2563EB;
  --chart-3: #7C3AED;
  --chart-4: #D97706;
  --chart-grid: rgba(0,0,0,0.04);
  --chart-axis: rgba(0,0,0,0.2);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(13,148,136,0.1);

  --overlay: rgba(0,0,0,0.4);
  --backdrop: 12px;
  color-scheme: light;
}
/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bg: #0A0B0E;
  --surface-1: #111318;
  --surface-2: #16181F;
  --surface-3: #1C1E26;
  --surface-4: #22242E;
  --elevated: #282A35;

  --text-1: #F0F1F4;
  --text-2: #A0A3B1;
  --text-3: #6B6E7E;
  --text-disabled: #4A4D5A;
  --text-inv: #0A0B0E;

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.18);
  --border-active: rgba(45,212,191,0.4);

  --primary-50: #F0FDFA;
  --primary-100: #CCFBF1;
  --primary-200: #99F6E4;
  --primary-300: #5EEAD4;
  --primary-400: #2DD4BF;
  --primary-500: #14B8A6;
  --primary-600: #0D9488;
  --primary-700: #0F766E;
  --primary-800: #115E59;
  --primary-900: #134E4A;
  --primary: #2DD4BF;
  --primary-dim: rgba(45,212,191,0.15);

  --accent: #F59E0B;
  --accent-dim: rgba(245,158,11,0.15);

  --success: #34D399;
  --success-dim: rgba(52,211,153,0.15);
  --warning: #FBBF24;
  --warning-dim: rgba(251,191,36,0.15);
  --danger: #F87171;
  --danger-dim: rgba(248,113,113,0.15);
  --info: #60A5FA;
  --info-dim: rgba(96,165,250,0.15);

  --chart-1: #2DD4BF;
  --chart-2: #60A5FA;
  --chart-3: #A78BFA;
  --chart-4: #F59E0B;
  --chart-grid: rgba(255,255,255,0.04);
  --chart-axis: rgba(255,255,255,0.15);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(45,212,191,0.12);

  --overlay: rgba(0,0,0,0.7);
  --backdrop: 16px;
  color-scheme: dark;
}
/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t-normal), color var(--t-normal);
}

a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-300); }

::selection { background: var(--primary-dim); color: var(--text-1); }

/* Focus ring: keeps the element's radius (a border-radius here used to
   distort buttons on keyboard focus). */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================
   LAYOUT
   ============================================================ */
/* Wider on large screens, so that a 16:9 monitor is not left with a narrow column */
.container { max-width: min(2400px, max(1280px, 88vw)); margin: 0 auto; padding: 0 var(--sp-lg); }
.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 var(--sp-lg); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 64px;
  background: color-mix(in srgb, var(--surface-1) 80%, transparent);
  backdrop-filter: blur(var(--backdrop));
  -webkit-backdrop-filter: blur(var(--backdrop));
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item {
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: all var(--t-fast);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-ui);
}

.nav-item:hover { color: var(--text-1); background: var(--surface-2); }
.nav-item.active { color: var(--primary); background: var(--primary-dim); }

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

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.theme-toggle:hover { color: var(--text-1); border-color: var(--border-default); }

/* Language toggle */
.lang-toggle {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: var(--font-ui);
}
.lang-toggle:hover { color: var(--text-1); }

/* Mobile menu button */
.menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  padding: var(--sp-4xl) 0 var(--sp-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--primary-dim) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--sp-md);
  position: relative;
}

.hero h1 .gradient {
  background: linear-gradient(135deg, var(--primary-300), var(--primary), var(--info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 18px;
  color: var(--text-2);
  max-width: 600px;
  margin: 0 auto var(--sp-xl);
  position: relative;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  position: relative;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  border: none;
  font-family: var(--font-ui);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary-500);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { background: var(--primary-400); transform: translateY(-1px); box-shadow: 0 0 30px rgba(45,212,191,0.25); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  padding: 8px 16px;
}
.btn-ghost:hover { color: var(--text-1); background: var(--surface-2); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }

/* ============================================================
   LIVE STATS TICKER (below hero)
   ============================================================ */
.ticker-bar {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
  padding: var(--sp-sm) 0;
}

.ticker-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xl);
  flex-wrap: wrap;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 13px;
  color: var(--text-2);
}

.ticker-item .label { color: var(--text-3); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
.ticker-item .value { font-family: var(--font-mono); font-weight: 500; color: var(--text-1); font-size: 14px; }
.ticker-item .unit { font-size: 12px; color: var(--text-3); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section { padding: var(--sp-3xl) 0; }
.section-header { margin-bottom: var(--sp-xl); }
.section-header h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-xs);
}
.section-header p { color: var(--text-2); font-size: 16px; }
.section-header .section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.section-header .section-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--primary-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}

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

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  transition: all var(--t-fast);
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

.stat-card .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--sp-xs);
}

.stat-card .stat-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stat-card .stat-unit {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 4px;
}

.stat-card .stat-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: var(--sp-xs);
}

.stat-card .stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-top: var(--sp-xs);
}

.stat-card .stat-trend.up { color: var(--success); }
.stat-card .stat-trend.down { color: var(--danger); }

.stat-card .stat-trend .arrow { font-size: 10px; }

/* Sparkline in stat card */
.stat-sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  opacity: 0.3;
}

/* ============================================================
   CHARTS
   ============================================================ */
.chart-container {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-lg);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-md);
}

.chart-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}

.chart-range {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 2px;
}

.chart-range button {
  padding: 4px 12px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: var(--font-ui);
}

.chart-range button:hover { color: var(--text-1); }
.chart-range button.active { background: var(--surface-3); color: var(--text-1); }

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

.chart-area svg {
  width: 100%;
  height: 100%;
}

.chart-tooltip {
  position: absolute;
  display: none;
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-1);
  pointer-events: none;
  z-index: 10;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   TABLES
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 64px;
  background: var(--surface-1);
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-2);
}

.data-table tr:hover td { background: var(--surface-2); }
.data-table tr:last-child td { border-bottom: none; }

.data-table .mono { font-family: var(--font-mono); font-size: 13px; }
.data-table .right { text-align: right; }

/* ============================================================
   BADGES & STATUS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
}

.badge-success { background: var(--success-dim); color: var(--success); }
.badge-warning { background: var(--warning-dim); color: var(--warning); }
.badge-danger { background: var(--danger-dim); color: var(--danger); }
.badge-info { background: var(--info-dim); color: var(--info); }
.badge-neutral { background: var(--surface-3); color: var(--text-3); }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--danger); }
.status-dot.degraded { background: var(--warning); }

/* ============================================================
   WALLET SEARCH (Hero interaction)
   ============================================================ */
.wallet-search {
  max-width: 560px;
  margin: var(--sp-xl) auto 0;
  position: relative;
}

.wallet-search input {
  width: 100%;
  padding: 16px 56px 16px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-default);
  background: var(--surface-1);
  color: var(--text-1);
  font-size: 15px;
  font-family: var(--font-mono);
  transition: all var(--t-fast);
  box-shadow: var(--shadow-md);
}

.wallet-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim), var(--shadow-md);
}

.wallet-search input::placeholder {
  color: var(--text-3);
  font-family: var(--font-ui);
}

.wallet-search .search-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  width: 44px;
  border-radius: var(--r-md);
  background: var(--primary-500);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}

.wallet-search .search-btn:hover { background: var(--primary-400); }

.wallet-search .search-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  margin-top: var(--sp-sm);
}

/* ============================================================
   START MINING WIZARD
   ============================================================ */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-xl);
  overflow-x: auto;
  padding-bottom: var(--sp-xs);
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
  position: relative;
}

.wizard-step::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--border-subtle);
  margin-left: var(--sp-sm);
}
.wizard-step:last-child::after { display: none; }

.wizard-step.active { color: var(--primary); }
.wizard-step.completed { color: var(--success); }

.wizard-step .step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-3);
}

.wizard-step.active .step-num { background: var(--primary); color: #fff; }
.wizard-step.completed .step-num { background: var(--success); color: #fff; }

/* Option cards for wizard */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.option-card {
  padding: var(--sp-lg);
  border: 2px solid var(--border-subtle);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: center;
  background: var(--surface-1);
}

.option-card:hover { border-color: var(--border-default); background: var(--surface-2); }
.option-card.selected { border-color: var(--primary); background: var(--primary-dim); }

.option-card .option-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-sm);
  font-size: 24px;
}

.option-card.selected .option-icon { background: var(--primary); }

.option-card .option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.option-card .option-desc {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Command output */
.command-output {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  margin-top: var(--sp-md);
  position: relative;
  overflow-x: auto;
}

.command-output code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-all;
}

.command-output .copy-btn {
  position: absolute;
  top: var(--sp-xs);
  right: var(--sp-xs);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-default);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: var(--font-ui);
}

.command-output .copy-btn:hover { color: var(--text-1); border-color: var(--primary); }
.command-output .copy-btn.copied { color: var(--success); border-color: var(--success); }

/* ============================================================
   FEATURES GRID
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.feature-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  transition: all var(--t-fast);
}

.feature-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); }

.feature-card .feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-md);
  font-size: 20px;
}

.feature-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--sp-xs);
}

.feature-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ============================================================
   BLOCKS TABLE
   ============================================================ */
.block-hash {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-fast);
}
.block-hash:hover { color: var(--primary); }

/* ============================================================
   FORMS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.form-group input, .form-group select {
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 14px;
  font-family: var(--font-mono);
  transition: all var(--t-fast);
}

.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.form-group .input-hint {
  font-size: 11px;
  color: var(--text-3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--sp-2xl) 0;
  margin-top: var(--sp-3xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-xl);
}

.footer-brand .logo { margin-bottom: var(--sp-sm); }
.footer-brand p { font-size: 13px; color: var(--text-3); max-width: 300px; }

.footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--sp-sm);
}

.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  padding: 4px 0;
  transition: color var(--t-fast);
}

.footer-col a:hover { color: var(--primary); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-3);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.toast {
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-1);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  animation: toast-in 300ms ease;
  max-width: 360px;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.info { border-left: 3px solid var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-4px); }
}

/* ============================================================
   COMMAND PALETTE (⌘K)
   ============================================================ */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(var(--backdrop));
  -webkit-backdrop-filter: blur(var(--backdrop));
  z-index: var(--z-cmd);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.cmd-overlay.open { display: flex; }

.cmd-box {
  width: 640px;
  max-width: 90vw;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl, 0 16px 48px rgba(0,0,0,0.6));
  overflow: hidden;
}

.cmd-input-wrap {
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.cmd-input-wrap .cmd-icon { color: var(--text-3); }

.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-1);
  font-size: 16px;
  font-family: var(--font-ui);
  outline: none;
}

.cmd-input::placeholder { color: var(--text-3); }

.cmd-results {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--sp-xs) 0;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px var(--sp-lg);
  cursor: pointer;
  transition: background var(--t-fast);
}

.cmd-item:hover, .cmd-item.selected { background: var(--surface-3); }

.cmd-item .cmd-item-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.cmd-item .cmd-item-label { font-size: 14px; color: var(--text-1); }
.cmd-item .cmd-item-desc { font-size: 12px; color: var(--text-3); margin-left: auto; }

.cmd-footer {
  padding: var(--sp-sm) var(--sp-lg);
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  gap: var(--sp-md);
}

.cmd-footer kbd {
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .option-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }
  .stats-grid, .stats-grid-3, .stats-grid-2 { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .ticker-inner { gap: var(--sp-md); }
  .main-nav { display: none; }
  .menu-btn { display: flex; }
  .chart-area { height: 200px; }
  .wizard-steps { display: none; }
  .container, .container-narrow { padding: 0 var(--sp-md); }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 26px; }
  .hero-cta { flex-direction: column; }
  .btn { width: 100%; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.fade-in {
  animation: fadeIn 400ms ease;
}

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

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--sp-3xl) var(--sp-lg);
  color: var(--text-3);
}

.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: var(--sp-md);
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--sp-xs);
}

.empty-state p {
  font-size: 14px;
  max-width: 400px;
  margin: 0 auto;
}

/* ============================================================
   NETWORK BANNER
   ============================================================ */
.network-banner {
  margin: var(--sp-lg) 0;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  align-items: center;
}
.network-banner .nb-line {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.network-banner .nb-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.network-banner .nb-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-1);
}
.network-banner .nb-value.warn {
  color: var(--warning);
}
.network-banner .nb-status {
  font-size: 12px;
  color: var(--text-3);
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================
   ADDITIONS proximapool (2026-10-28)
   ============================================================ */
[hidden] { display: none !important; }

/* Multilingual: static text is written once per language (lang attribute),
   the active language is that of <html lang>. */
html[lang="fr"] body [lang="en"] { display: none !important; }
html:not([lang="fr"]) body [lang="fr"] { display: none !important; }

html, body { overflow-x: hidden; }
img, canvas, svg { max-width: 100%; }
code, kbd, pre { font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); }
.break { overflow-wrap: anywhere; word-break: break-all; }
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }
.small { font-size: 13px; }
.xsmall { font-size: 12px; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--sp-sm); } .mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); } .mt-xl { margin-top: var(--sp-xl); } .mt-2xl { margin-top: var(--sp-2xl); }
.mb-sm { margin-bottom: var(--sp-sm); } .mb-md { margin-bottom: var(--sp-md); } .mb-lg { margin-bottom: var(--sp-lg); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }
.row-between { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-md); }
.surface-band { background: var(--surface-1); }
main { min-height: 60vh; }
/* Short pages: the footer stays at the bottom of the screen */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }

/* ---- Header: links instead of buttons, mobile menu ---- */
a.nav-item { display: inline-block; }
a.nav-item:hover { color: var(--text-1); }
.nav-cta { margin-left: var(--sp-xs); }
.site-header .logo:hover { color: var(--text-1); }
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .menu-btn { display: flex; }
  .main-nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 64px; left: 0; right: 0;
    padding: var(--sp-sm) var(--sp-md) var(--sp-md);
    background: var(--surface-1); border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg); z-index: var(--z-dropdown);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .main-nav.open .nav-item { padding: 12px 16px; }
  .nav-cta { margin: var(--sp-xs) 0 0; }
}
@media (max-width: 420px) {
  .header-actions { gap: 4px; }
  .lang-toggle { padding: 6px 8px; }
}

/* ---- Banners ---- */
.banner { padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
.banner .container { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; }
.banner-warn { background: var(--warning-dim); color: var(--text-1); }
.banner-info { background: var(--info-dim); color: var(--text-1); }
.banner-danger { background: var(--danger-dim); color: var(--text-1); }
.banner strong { font-weight: 600; }

/* ---- Notices ---- */
.notice {
  padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-md);
  border: 1px solid var(--border-subtle); background: var(--surface-2);
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}
.notice .notice-title { display: block; color: var(--text-1); margin-bottom: 4px; font-weight: 600; }
.notice-warn { background: var(--warning-dim); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.notice-warn .notice-title { color: var(--warning); }
.notice-info { background: var(--info-dim); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.notice-info .notice-title { color: var(--info); }
.notice-danger { background: var(--danger-dim); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.notice-danger .notice-title { color: var(--danger); }
.notice-success { background: var(--success-dim); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.notice-success .notice-title { color: var(--success); }
.notice ul, .notice ol { padding-left: var(--sp-lg); margin-top: var(--sp-xs); }
.notice li { margin: 2px 0; }
.notice code { font-size: 12px; overflow-wrap: anywhere; }

/* ---- Generic cards ---- */
.card {
  background: var(--surface-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-lg);
}
.card h3 { font-size: 16px; font-weight: 600; margin-bottom: var(--sp-sm); }
.card + .card { margin-top: var(--sp-md); }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--primary-dim); color: var(--primary); vertical-align: middle;
}
.tag-muted { background: var(--surface-3); color: var(--text-3); }

/* ---- Key / value pairs ---- */
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px var(--sp-md); font-size: 14px; }
.kv dt { color: var(--text-3); }
.kv dd { color: var(--text-1); font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 6px; } }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface-1); }
.data-table th { position: static; white-space: nowrap; }
.data-table td.empty { text-align: center; padding: 40px 16px; color: var(--text-3); }
.data-table td.empty .empty-title { font-size: 15px; font-weight: 500; color: var(--text-2); }
.data-table td.empty .empty-sub { font-size: 13px; margin-top: 4px; }
.data-table a.mono { color: var(--primary); }
.reported { color: var(--text-3); }
@media (max-width: 600px) {
  .data-table { font-size: 13px; }
  .data-table th, .data-table td { padding: 8px 10px; }
}
.pager { display: flex; gap: var(--sp-xs); align-items: center; justify-content: flex-end; margin-top: var(--sp-sm); flex-wrap: wrap; font-size: 13px; color: var(--text-3); }

/* ---- Block statuses ---- */
.badge-pending { background: var(--info-dim); color: var(--info); }

/* ---- Secondary values in stat cards ---- */
.stat-card .stat-value.small-value { font-size: 20px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 4px var(--sp-md); font-family: var(--font-mono); font-size: 13px; color: var(--text-2); margin-top: var(--sp-xs); }
.stat-row b { color: var(--text-3); font-weight: 500; font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.info-tip { cursor: help; border-bottom: 1px dotted var(--text-3); }

/* ---- Copy fields ---- */
.copy-field {
  display: flex; align-items: stretch; border: 1px solid var(--border-default);
  border-radius: var(--r-md); background: var(--surface-2); overflow: hidden;
}
.copy-field code { flex: 1; padding: 10px 14px; font-size: 13px; color: var(--text-1); overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.copy-field button {
  flex: none; border: none; border-left: 1px solid var(--border-default); background: var(--surface-3);
  color: var(--text-2); padding: 0 14px; font: 600 12px var(--font-ui); cursor: pointer;
}
.copy-field button:hover { color: var(--text-1); }
.copy-field button.copied { color: var(--success); }
.secret-label { font-size: 13px; font-weight: 600; color: var(--text-1); margin: var(--sp-md) 0 6px; }
.secret-help { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.command-output { padding-right: 88px; }
.command-output pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 13px; color: var(--text-1); }
@media (max-width: 480px) { .command-output { padding: 40px var(--sp-sm) var(--sp-sm); } }

/* ---- Forms ---- */
.form-group input[aria-invalid="true"] { border-color: var(--danger); }
.form-group input.valid { border-color: var(--success); }
.form-msg { font-size: 12px; min-height: 1.2em; color: var(--text-3); }
.form-msg.err { color: var(--danger); }
.form-msg.ok { color: var(--success); }
.form-inline { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: flex-end; }
.form-inline .form-group { flex: 1 1 220px; min-width: 0; }
.form-group input, .form-group select, .form-group textarea { width: 100%; min-width: 0; }
.form-group textarea {
  padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--border-default);
  background: var(--surface-2); color: var(--text-1); font-size: 13px; font-family: var(--font-mono);
}
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-1); cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary-600); flex: none; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

/* ---- ALTCHA captcha (self-hosted, no third party) ---- */
.captcha {
  display: flex; align-items: center; gap: var(--sp-sm); padding: 12px 16px;
  border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--surface-2);
  max-width: 460px; font-size: 14px; cursor: pointer;
}
.captcha input { width: 20px; height: 20px; accent-color: var(--primary-600); flex: none; }
.captcha .captcha-state { margin-left: auto; font-size: 12px; color: var(--text-3); text-align: right; }
.captcha.done { border-color: var(--success); }
.captcha.fail { border-color: var(--danger); }

/* ---- Start Mining wizard ---- */
.wizard-panel h3 { margin-bottom: var(--sp-md); font-size: 18px; }
.wizard-nav { margin-top: var(--sp-lg); display: flex; justify-content: space-between; gap: var(--sp-sm); flex-wrap: wrap; }
.machine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); align-items: stretch; }
.machine-card { text-align: left; font: inherit; color: inherit; }
.machine-card .option-label { font-size: 15px; }
.machine-detail { margin-top: var(--sp-lg); }
.machine-detail ol { padding-left: var(--sp-lg); }
.machine-detail ol > li { margin: var(--sp-md) 0; color: var(--text-2); font-size: 14px; }
.live-box { padding: var(--sp-lg); border-radius: var(--r-lg); border: 1px solid var(--border-default); background: var(--surface-1); }
.live-box .live-title { font-size: 17px; font-weight: 600; display: flex; gap: var(--sp-xs); align-items: center; color: var(--text-1); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--primary); animation: spin 1s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .machine-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .wizard-steps { display: flex; flex-wrap: wrap; }
  .wizard-step::after { width: 12px; margin-left: 6px; }
  .wizard-step { padding: 6px 4px; }
}

/* ---- Canvas charts ---- */
.chart-box { position: relative; width: 100%; height: 260px; }
.chart-box canvas { display: block; width: 100%; height: 100%; }
.chart-box .chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 14px; text-align: center; padding: var(--sp-md); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px var(--sp-md); font-size: 12px; color: var(--text-2); margin-top: var(--sp-xs); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chart-tooltip { white-space: nowrap; }
.chart-header { flex-wrap: wrap; gap: var(--sp-xs); }
@media (max-width: 768px) { .chart-box { height: 200px; } }

/* ---- Long text (terms) ---- */
.prose { color: var(--text-2); font-size: 15px; line-height: 1.7; }
.prose h2 { font-size: 22px; color: var(--text-1); margin: var(--sp-xl) 0 var(--sp-sm); letter-spacing: -0.01em; }
.prose h3 { font-size: 17px; color: var(--text-1); margin: var(--sp-lg) 0 var(--sp-xs); }
/* About, Terms: title and closing cross */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-sm); }
.page-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: var(--sp-xl); border-radius: 50%; color: var(--text-2); transition: background var(--t-fast), color var(--t-fast); }
.page-close:hover { background: var(--row-hover); color: var(--text-1); }
.page-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.prose p, .prose ul, .prose ol, .prose pre, .prose table { margin-bottom: var(--sp-sm); }
.prose ul, .prose ol { padding-left: var(--sp-lg); }
.prose code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.prose pre { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--sp-md); overflow-x: auto; font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.prose pre code { background: none; padding: 0; }
.prose strong { color: var(--text-1); }
.prose .formula { font-family: var(--font-mono); background: var(--surface-2); padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-md); display: block; overflow-x: auto; color: var(--text-1); font-size: 14px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { border-bottom: 1px solid var(--border-subtle); padding: 6px 8px; text-align: left; }
.toc { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-lg); }
.toc a { padding: 6px 12px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-2); }
.toc a:hover { color: var(--primary); }

/* Generic collapsible block */
details.fold { border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--sp-sm) var(--sp-md); background: var(--surface-1); }
details.fold > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-1); }
details.fold[open] > summary { margin-bottom: var(--sp-sm); }

/* Honest comparison */
.compare-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-md); }
.compare-list li { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-lg); font-size: 14px; color: var(--text-2); }
.compare-list li strong { display: block; color: var(--text-1); font-size: 15px; margin-bottom: 4px; }
@media (max-width: 768px) { .compare-list { grid-template-columns: 1fr; } }

/* API page: live test */
.api-route { margin: var(--sp-lg) 0; }
.api-route .route { font-family: var(--font-mono); font-size: 14px; color: var(--text-1); display: flex; gap: var(--sp-xs); align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.api-route .verb { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--primary-dim); color: var(--primary); }
.api-route .verb.post { background: var(--accent-dim); color: var(--accent); }
.api-out { max-height: 360px; overflow: auto; }

/* Mobile 360 px */
.hero-cta { flex-wrap: wrap; }
.hero .hero-note { font-size: 13px; color: var(--text-3); margin-top: var(--sp-md); position: relative; }
.hero-cta.mt { margin-top: var(--sp-xl); }
@media (max-width: 480px) {
  .hero { padding: var(--sp-2xl) 0 var(--sp-xl); }
  .section { padding: var(--sp-2xl) 0; }
  .stat-card .stat-value { font-size: 22px; }
  .grid-2 { grid-template-columns: 1fr; }
  .network-banner { padding: var(--sp-sm) var(--sp-md); }
  .network-banner .nb-line { min-width: 0; }
  .network-banner .nb-status { margin-left: 0; white-space: normal; }
  .footer-bottom { flex-direction: column; gap: var(--sp-xs); align-items: flex-start; }
  .toast-container { left: var(--sp-md); right: var(--sp-md); }
  .wallet-search input { font-size: 13px; padding-right: 52px; }
  .section-header h2 { font-size: 22px; }
}

/* Printing the secrets summary: nothing but the result block */
@media print {
  .site-header, .site-footer, .banner, .wizard-steps, .wizard-nav, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Skip link, icons, button cards */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: var(--z-toast); background: var(--surface-1); color: var(--primary); padding: 8px 12px; border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; }
.ico { display: inline-flex; align-items: center; justify-content: center; }
ol.wizard-steps { list-style: none; }
button.option-card { width: 100%; font-family: var(--font-ui); color: var(--text-1); }
.option-card .option-desc code { font-size: 11px; }
.toast.fade-out { animation: toast-out 300ms ease forwards; }

/* ============================================================
   PREMIUM (2026-10-29)
   Finishing layer: same colours, same structure. Self-hosted fonts,
   tabular figures, polished buttons and fields, depth on cards,
   tables with sticky headers, page transitions (View Transitions)
   with a no-animation fallback.
   ============================================================ */
:root, [data-theme="light"] {
  --text-3: #6B7080;            /* was #8B8E9E: 3.3:1 → 4.9:1 on white (AA) */
  --card-bg: var(--surface-1);
  --card-border: rgba(16,24,40,0.08);
  --card-border-strong: rgba(16,24,40,0.14);
  --card-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 2px 8px -2px rgba(16,24,40,0.05);
  --card-shadow-hover: 0 2px 4px rgba(16,24,40,0.05), 0 12px 28px -8px rgba(16,24,40,0.14);
  --hi: rgba(255,255,255,0.75);  /* inner top highlight */
  --glass: rgba(255,255,255,0.72);
  --zebra: rgba(16,24,40,0.022);
  --row-hover: rgba(13,148,136,0.06);
  --th-bg: #F6F7FA;
  --success-ink: #047857; --warning-ink: #B45309; --danger-ink: #B91C1C; --info-ink: #1D4ED8;
  --btn-grad: linear-gradient(180deg, #11A394 0%, var(--primary-600) 45%, var(--primary-700) 100%);
  --btn-ink: #FFFFFF;
  --btn-glow: 0 6px 16px -6px rgba(13,148,136,0.55);
  --ring: var(--primary-600);
}
[data-theme="dark"] {
  --text-3: #8A8E9F;            /* was #6B6E7E: 3.6:1 → 5.6:1 on #111318 (AA) */
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 60%), var(--surface-1);
  --card-border: rgba(255,255,255,0.075);
  --card-border-strong: rgba(255,255,255,0.13);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.035);
  --card-shadow-hover: 0 1px 2px rgba(0,0,0,0.4), 0 14px 32px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
  --hi: rgba(255,255,255,0.08);
  --glass: rgba(28,30,38,0.6);
  --zebra: rgba(255,255,255,0.018);
  --row-hover: rgba(45,212,191,0.06);
  --th-bg: #15171D;
  --success-ink: var(--success); --warning-ink: var(--warning); --danger-ink: var(--danger); --info-ink: var(--info);
  --btn-grad: linear-gradient(180deg, #5EEAD4 0%, var(--primary-400) 40%, var(--primary-500) 100%);
  --btn-ink: #042F2E;
  --btn-glow: 0 6px 20px -6px rgba(45,212,191,0.5);
  --ring: var(--primary-300);
}

/* ---- Typography ---- */
body {
  font-feature-settings: "cv11" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}
h1, h2, h3 { letter-spacing: -0.022em; }
code, kbd, pre, .mono { font-variant-ligatures: none; }
.section-header h2 { font-weight: 650; letter-spacing: -0.028em; }
.hero h1 { font-weight: 750; letter-spacing: -0.04em; font-size: 56px; }
.hero h1 .gradient { background-image: linear-gradient(120deg, var(--primary-400) 0%, var(--primary) 40%, var(--info) 100%); padding-bottom: .06em; }
@media (max-width: 768px) { .hero h1 { font-size: 38px; } }
@media (max-width: 480px) { .hero h1 { font-size: 32px; } }

/* Figures: Inter with tabular figures (aligned in columns, same width for
   each digit), smaller and more discreet units. */
.stat-card .stat-value, .ticker-item .value, .network-banner .nb-value, .stat-row,
.data-table td.right, .data-table td.right.mono, .num, .pager, time, .step-num,
.chart-legend, .kv dd {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
}
.kv dd { font-family: var(--font-mono); }
.data-table td.right.mono { font-size: 13.5px; font-weight: 500; color: var(--text-1); }
.data-table td.right.mono.reported, .data-table td.right.mono.muted { color: var(--text-3); font-weight: 400; }
.stat-card .stat-value { font-size: 30px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.15; }
.stat-card .stat-value.small-value { font-size: 21px; letter-spacing: -0.02em; }
.ticker-item .value { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.network-banner .nb-value { font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
.u, .stat-card .stat-unit, .ticker-item .unit {
  color: var(--text-3); font-weight: 500; letter-spacing: 0; font-family: var(--font-ui);
}
.stat-card .stat-value .u, .stat-card .stat-unit { font-size: 0.5em; vertical-align: 0.06em; }
.stat-card .stat-unit { margin-left: 6px; }
.stat-card .stat-value .u { margin-left: 1px; }
.ticker-item .value .u { font-size: 11px; margin-left: 2px; }
.ticker-item .unit { font-size: 11px; margin-left: -4px; }
.network-banner .nb-value .u, .data-table .u, .kv dd .u, .stat-row .u { font-size: 0.82em; }
.stat-card .stat-unit .u { font-size: 1em; margin: 0; }
.stat-card .stat-label { color: var(--text-3); letter-spacing: 0.07em; font-size: 11px; }

/* ---- Header and navigation ---- */
.site-header {
  view-transition-name: site-header;
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  backdrop-filter: blur(var(--backdrop)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--backdrop)) saturate(1.6);
  border-bottom-color: var(--card-border);
  box-shadow: 0 1px 0 var(--hi) inset;
}
.logo { font-weight: 650; letter-spacing: -0.03em; }
.main-nav { gap: 2px; }
.nav-item {
  position: relative; padding: 8px 14px; border-radius: 9px;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav-item:hover { background: color-mix(in srgb, var(--text-1) 5%, transparent); }
.nav-item.active { color: var(--text-1); background: color-mix(in srgb, var(--primary) 9%, transparent); }
[data-theme="dark"] .nav-item.active { color: var(--primary-200); }
.nav-ind {
  position: absolute; left: 12px; right: 12px; bottom: -14px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-400), var(--primary), var(--info));
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 60%, transparent);
  view-transition-name: nav-ind;
  pointer-events: none;
}
.nav-cta { margin-left: 10px; }
@media (max-width: 1100px) {
  .main-nav.open { background: color-mix(in srgb, var(--surface-1) 96%, transparent); border-bottom-color: var(--card-border); }
  .main-nav.open .nav-item { border-radius: 10px; }
  .nav-ind { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; view-transition-name: none; }
}

/* Header icon buttons (theme, language, menu): same 36 px size */
.theme-toggle, .lang-toggle, .menu-btn {
  height: 36px; min-width: 36px; border-radius: 10px;
  border: 1px solid var(--card-border-strong);
  background: var(--glass);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(16,24,40,0.05);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.lang-toggle { padding: 0 11px; font-size: 12px; letter-spacing: 0.04em; display: inline-flex; align-items: center; }
.theme-toggle:hover, .lang-toggle:hover, .menu-btn:hover { color: var(--text-1); border-color: var(--border-strong); background: var(--surface-1); }
.theme-toggle:active, .lang-toggle:active, .menu-btn:active { transform: scale(0.96); }
/* Icons: never squeezed (the generic max-width:100% crushed the theme
   button SVG into two dots). */
.ico { line-height: 0; flex: none; }
.ico svg, .btn svg, .search-btn svg, .search-lead { display: block; flex: none; max-width: none; }
.theme-toggle .ico svg { width: 18px; height: 18px; }

/* ---- Buttons ---- */
.btn {
  position: relative; min-height: 40px; padding: 0 18px; gap: 8px;
  border-radius: 11px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; letter-spacing: -0.006em; line-height: 1.2;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, filter 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn-lg { min-height: 48px; padding: 0 26px; font-size: 15px; border-radius: 13px; }
.btn-primary, .wallet-search .search-btn {
  background: var(--btn-grad);
  color: var(--btn-ink);
  border-color: color-mix(in srgb, var(--primary-700) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.10), 0 1px 2px rgba(16,24,40,0.12), var(--btn-glow);
}
[data-theme="dark"] .btn-primary, [data-theme="dark"] .wallet-search .search-btn { border-color: rgba(94,234,212,0.55); }
.btn-primary:hover, .wallet-search .search-btn:hover {
  background: var(--btn-grad);
  color: var(--btn-ink);
  filter: brightness(1.07) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.10), 0 2px 4px rgba(16,24,40,0.12), 0 10px 24px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}
.btn-primary:active, .wallet-search .search-btn:active {
  transform: translateY(0); filter: brightness(0.96);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18), 0 1px 1px rgba(16,24,40,0.1);
}
.btn-secondary {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  color: var(--text-1);
  border-color: var(--card-border-strong);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(16,24,40,0.05);
}
.btn-secondary:hover { background: var(--surface-1); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--hi), var(--card-shadow-hover); }
[data-theme="dark"] .btn-secondary:hover { background: var(--surface-3); }
.btn-secondary:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(0,0,0,0.12); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--text-1) 6%, transparent); }
.btn-danger {
  background: linear-gradient(180deg, #E5484D, #C62828); color: #fff; border-color: rgba(120,20,20,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(16,24,40,0.12), 0 6px 16px -6px rgba(220,38,38,0.5);
}
.btn-danger:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:focus-visible, .theme-toggle:focus-visible, .lang-toggle:focus-visible, .menu-btn:focus-visible,
.copy-field button:focus-visible, .command-output .copy-btn:focus-visible, .search-btn:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none !important; filter: grayscale(0.35) !important;
  box-shadow: none !important;
}

/* ---- Address search (home): button inside the field ---- */
.wallet-search { max-width: 600px; }
.search-field {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 16px;
  border-radius: 16px;
  border: 1px solid var(--card-border-strong);
  background: var(--surface-1);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(16,24,40,0.05), 0 10px 30px -12px rgba(16,24,40,0.18);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
[data-theme="dark"] .search-field { background: var(--surface-2); box-shadow: inset 0 1px 0 var(--hi), 0 10px 30px -12px rgba(0,0,0,0.7); }
.search-field:hover { border-color: var(--border-strong); }
.search-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-dim), 0 10px 30px -12px rgba(16,24,40,0.2);
}
.search-field .search-lead { color: var(--text-3); }
.search-field:focus-within .search-lead { color: var(--primary); }
.wallet-search .search-field input,
.wallet-search .search-field input:focus {
  flex: 1 1 auto; width: auto; min-width: 0; height: 44px;
  padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  font-size: 14px; letter-spacing: 0;
  text-overflow: ellipsis;
}
.wallet-search .search-btn {
  position: static; inset: auto; flex: none;
  width: 44px; height: 44px; border-radius: 12px; border-width: 1px; border-style: solid;
}
.wallet-search .search-hint { margin-top: 10px; }
@media (max-width: 480px) {
  .search-field { padding-left: 12px; gap: 6px; }
  .search-field .search-lead { display: none; }
  .wallet-search .search-field input { font-size: 13px; }
}

/* ---- Fields ---- */
.form-group input, .form-group select, .form-group textarea {
  min-height: 42px; border-radius: 11px;
  border-color: var(--card-border-strong);
  background: var(--surface-1);
  box-shadow: inset 0 1px 2px rgba(16,24,40,0.05);
}
[data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--border-strong); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-dim);
}
.form-group input[aria-invalid="true"] { border-color: var(--danger); }
.form-group input.valid { border-color: var(--success); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-3); opacity: 0.8; }
.form-group label { color: var(--text-1); font-weight: 550; }
.captcha { border-radius: 12px; border-color: var(--card-border-strong); background: var(--surface-1); box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(16,24,40,0.04); }
[data-theme="dark"] .captcha { background: var(--surface-2); }
.captcha.done { border-color: var(--success); }
.captcha.fail { border-color: var(--danger); }
.copy-field { border-radius: 11px; border-color: var(--card-border-strong); background: var(--surface-2); }
.copy-field code { font-size: 12.5px; }
.copy-field button { background: var(--glass); border-left-color: var(--card-border-strong); padding: 0 16px; transition: color var(--t-fast), background-color var(--t-fast); }
.copy-field button:hover { background: var(--surface-1); color: var(--primary); }
.command-output { border-radius: 12px; border-color: var(--card-border-strong); background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(16,24,40,0.04); }
.command-output .copy-btn {
  border-radius: 8px; border-color: var(--card-border-strong); background: var(--glass);
  box-shadow: inset 0 1px 0 var(--hi); font-weight: 600; min-height: 28px;
}
.command-output .copy-btn:hover { border-color: var(--primary); color: var(--primary); }
.command-output .copy-btn.copied { color: var(--success); border-color: var(--success); }

/* ---- Cards: depth, 1 px semi-transparent border ---- */
.stat-card, .card, .chart-container, .feature-card, .compare-list li, .live-box,
.option-card, .table-wrap, details.fold, .network-banner {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.network-banner { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-1)); }
[data-theme="dark"] .network-banner { background: var(--card-bg); }
.stat-card, .feature-card, .compare-list li, .option-card {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background-color 200ms ease;
}
.stat-card::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 55%, transparent), transparent);
  opacity: 0; transition: opacity 200ms ease;
}
.stat-card:hover, .feature-card:hover, .compare-list li:hover { border-color: var(--card-border-strong); box-shadow: var(--card-shadow-hover); }
.stat-card:hover::before { opacity: 1; }
.option-card { border-width: 1px; }
.option-card:hover { border-color: var(--border-strong); background: var(--card-bg); box-shadow: var(--card-shadow-hover); transform: translateY(-1px); }
.option-card.selected { border-color: var(--primary); background: linear-gradient(180deg, var(--primary-dim), transparent), var(--surface-1); box-shadow: 0 0 0 3px var(--primary-dim), var(--card-shadow); }
.section-header .section-icon { border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 9px; box-shadow: inset 0 1px 0 var(--hi); }
.notice { border-radius: 12px; }

/* ---- Badges ---- */
.badge {
  padding: 2px 9px; line-height: 18px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  white-space: nowrap;
}
.badge-success { color: var(--success-ink); }
.badge-warning { color: var(--warning-ink); }
.badge-danger { color: var(--danger-ink); }
.badge-info, .badge-pending { color: var(--info-ink); }
.badge-neutral { color: var(--text-2); }
.badge .status-dot { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.tag { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.notice-success .notice-title { color: var(--success-ink); }
.notice-warn .notice-title { color: var(--warning-ink); }
.notice-danger .notice-title { color: var(--danger-ink); }
.notice-info .notice-title { color: var(--info-ink); }

/* ---- Tables: marked header, subtle stripes, hover ---- */
.table-wrap { border-radius: var(--r-lg); }
.data-table th {
  background: var(--th-bg); color: var(--text-3);
  font-size: 11px; letter-spacing: 0.07em; padding: 11px 16px;
  border-bottom: 1px solid var(--card-border);
}
.data-table td { border-bottom-color: var(--card-border); transition: background-color 120ms ease; }
.data-table tbody tr:nth-child(even) td { background: var(--zebra); }
.data-table tbody tr:hover td { background: var(--row-hover); }
.data-table td.empty, .data-table tbody tr:hover td.empty { background: transparent; }
@media (max-width: 600px) { .data-table th, .data-table td { padding: 8px 10px; } }
/* Sticky headers below the site header when the table fits in its frame
   (.fits class set by ui.js); otherwise the frame scrolls horizontally. */
.data-table td.right, .data-table td.mono:not(.break) { white-space: nowrap; }
.table-wrap.fits { overflow: visible; }
.table-wrap.fits .data-table th { position: sticky; top: 64px; z-index: 2; }
.table-wrap.fits .data-table thead th:first-child { border-top-left-radius: calc(var(--r-lg) - 1px); }
.table-wrap.fits .data-table thead th:last-child { border-top-right-radius: calc(var(--r-lg) - 1px); }
.table-wrap.fits .data-table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--r-lg) - 1px); }
.table-wrap.fits .data-table tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--r-lg) - 1px); }
.pager { gap: 10px; }

/* ---- Start Mining wizard ---- */
.wizard-step .step-num { border: 1px solid var(--card-border-strong); background: var(--surface-1); box-shadow: inset 0 1px 0 var(--hi); }
.wizard-step.active .step-num { background: var(--btn-grad); color: var(--btn-ink); border-color: transparent; box-shadow: var(--btn-glow); }
.wizard-step.completed .step-num { background: var(--success); color: #fff; border-color: transparent; }
.wizard-step.active { color: var(--text-1); font-weight: 600; }

/* ---- Dots, palette, misc ---- */
.toc a { border-color: var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); transition: color var(--t-fast), border-color var(--t-fast); }
.toc a:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.cmd-box { border-color: var(--card-border-strong); box-shadow: 0 24px 64px -12px rgba(0,0,0,0.45), inset 0 1px 0 var(--hi); border-radius: 18px; }
.toast { border-radius: 12px; border-color: var(--card-border-strong); background: var(--elevated); }
.ticker-bar { background: color-mix(in srgb, var(--surface-1) 85%, transparent); border-color: var(--card-border); }
.site-footer { border-top-color: var(--card-border); }

/* ============================================================
   PAGE TRANSITIONS
   Recent browsers (Chrome/Edge 126+, Safari 18.2+): cross-document
   View Transitions, no JS. The header stays still, the content fades
   and slides slightly, the tab indicator moves between tabs.
   Elsewhere: simple fade-in of the content.
   ============================================================ */
@view-transition { navigation: auto; }
main { view-transition-name: page; }
::view-transition-group(root) { animation-duration: 220ms; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(page) { animation: pp-vt-out 150ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(page) { animation: pp-vt-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 50ms both; }
::view-transition-group(nav-ind) { animation-duration: 360ms; animation-timing-function: cubic-bezier(0.3, 0.9, 0.25, 1); }
@keyframes pp-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pp-vt-in { from { opacity: 0; transform: translateY(10px); } }

@supports not (view-transition-name: none) {
  main { animation: pp-page-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .nav-ind { animation: pp-ind-in 320ms cubic-bezier(0.3, 0.9, 0.25, 1) backwards; }
}
@keyframes pp-page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes pp-ind-in { from { transform: scaleX(0.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  main, .nav-ind { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .btn:hover, .option-card:hover, .btn-secondary:hover, .btn-primary:hover { transform: none; }
}
@media print {
  main, .site-header { view-transition-name: none; }
}

/* ---- Responsive adjustments (premium) ---- */
/* Tablet: two stat cards per row instead of one (768 px wasted the width). */
@media (min-width: 481px) and (max-width: 768px) {
  .stats-grid, .stats-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stats-grid > *, .grid-2 > *, .machine-grid > *, .option-grid > * { min-width: 0; }
/* Narrow tables: one line per record and horizontal scrolling of the frame,
   instead of columns squeezed word by word (200 px high rows at 360 px). */
@media (max-width: 899px) {
  .data-table td, .data-table th { white-space: nowrap; }
  .data-table td.empty { white-space: normal; }
}
.data-table td:first-child { white-space: nowrap; }
/* Status: ".card + .card" offset the second card of each grid row by 16 px. */
.grid-2 > .card + .card, .machine-grid > .card + .card { margin-top: 0; }
.kv dd .badge, .kv dd .tag { font-family: var(--font-ui); }
/* Terms: the title (h2 in .prose) took the text title margin and shifted
   below its icon; commands had a double frame (.prose pre). */
.section-title h2, .prose .section-title h2 { margin: 0; }
.command-output pre, .prose .command-output pre { background: none; border: 0; padding: 0; margin: 0; border-radius: 0; }

/* ============================================================
   ONE-SHOT: one-command "Start mining" (start, account, oneshot.js)
   ============================================================ */
.os-form .wizard-nav { margin-top: var(--sp-lg); }
.os-invite { text-transform: uppercase; letter-spacing: 0.06em; }
.os-cmd-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; color: var(--text-1); }
.os-command { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; margin-top: var(--sp-sm); padding: var(--sp-md);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border-default)); border-radius: var(--r-lg); background: var(--surface-2); }
.os-command pre { flex: 1 1 320px; min-width: 0; margin: 0; background: none; border: 0; padding: 0; }
.os-command code { font-family: var(--font-mono); font-size: 15px; color: var(--text-1); white-space: pre-wrap; word-break: break-all; }
.os-copy { flex: 0 0 auto; min-width: 140px; }
@media (max-width: 480px) { .os-copy { flex: 1 1 100%; } }
.os-hint { margin-top: var(--sp-sm); font-size: 14px; color: var(--text-1); }
.os-warn { margin-top: 4px; font-size: 13px; color: var(--warning); }
.os-live { margin-top: var(--sp-sm); }
.os-steps { list-style: none; padding: 0; margin: 0 0 var(--sp-md); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-xs); }
.os-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border-subtle); background: var(--surface-2); min-width: 0; }
.os-steps li > span:last-child { overflow-wrap: anywhere; }
.os-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--surface-3); color: var(--text-3); }
.os-steps li.done { color: var(--text-1); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-dim); }
.os-steps li.done .os-dot { background: var(--success); color: #fff; }
.os-steps li.current { color: var(--text-1); border-color: color-mix(in srgb, var(--primary) 50%, transparent); background: var(--primary-dim); }
.os-steps li.current .os-dot { background: var(--primary); color: #fff; animation: os-pulse 1.6s ease-in-out infinite; }
@keyframes os-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .os-steps li.current .os-dot { animation: none; } }
@media (max-width: 640px) { .os-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.os-ok { color: var(--success); font-variant-numeric: tabular-nums; }
.os-workers { list-style: none; padding: 0; margin: var(--sp-md) 0 0; display: grid; gap: 6px; }
.os-workers li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--border-subtle); font-size: 13px; }
.os-workers .mono { overflow-wrap: anywhere; }
.os-w-rate { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; margin-left: auto; }
.os-diag ol { margin-top: var(--sp-sm); }
.os-diag li { margin: var(--sp-sm) 0; }
.os-diag .command-output, .os-none .command-output { margin-top: 6px; padding-top: 40px; }
@media (min-width: 640px) { .os-diag .command-output, .os-none .command-output { padding-top: var(--sp-md); padding-right: 84px; } }
.os-none ol { margin: var(--sp-sm) 0 0; padding-left: var(--sp-lg); font-size: 14px; }
.os-rig { margin-top: var(--sp-md); padding: var(--sp-md); border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-1); }
.os-rig-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: var(--sp-sm); font-weight: 600; }
.os-rig .os-steps { margin-bottom: var(--sp-sm); }
.os-journal { list-style: none; padding: 0; margin: var(--sp-sm) 0 0; font-size: 14px; display: grid; gap: 4px; }
.os-journal li { padding: 6px 10px; border-left: 3px solid var(--border-default); background: var(--surface-2); border-radius: var(--r-sm); }
.os-recovery { border-color: color-mix(in srgb, var(--warning) 45%, var(--card-border-strong, var(--border-default))); }
.copy-field code.os-secret { font-size: 14px; letter-spacing: 0.01em; }

/* Private area (My account) / public view (miner): the difference shows at a glance */
.space-banner { display: flex; gap: var(--sp-md); align-items: flex-start; padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-lg);
  border: 1px solid var(--border-default); margin-bottom: var(--sp-lg); font-size: 14px; color: var(--text-1); }
.space-banner .space-ico { font-size: 22px; line-height: 1.2; flex: none; }
.space-banner .space-sub { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.space-banner .space-warn { color: var(--warning); font-weight: 500; }
.space-private { background: var(--primary-dim); border-color: color-mix(in srgb, var(--primary) 45%, transparent); border-left-width: 4px; }
.space-private.space-readonly { background: var(--warning-dim); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.space-public { background: var(--surface-2); border-style: dashed; }


/* ============================================================
   ONBOARDING (2026-10-29): "Your platform" screen, username account,
   Security (start.html, account.html, js/auth.js)
   ============================================================ */
/* 1-2-3 bar: past steps clickable until sign-up is done */
.wizard-step.clickable { cursor: pointer; }
.wizard-step.clickable:hover { color: var(--primary); }
.wizard-step.completed .step-num { color: #fff; }

/* OS cards: a row of four on large screens, two columns below 640 px */
.os-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm); }
@media (max-width: 760px) { .os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.os-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-md) var(--sp-sm); font: inherit; color: var(--text-1); }
.os-card .option-icon { width: 44px; height: 44px; margin: 0; font-size: 0; color: var(--text-2); }
.os-card.selected .option-icon { color: var(--btn-ink, #fff); }
.os-card .option-label { font-size: 15px; font-weight: 600; }
.os-card .option-desc { font-size: 12px; color: var(--text-3); margin: 0; }
.os-card.soon { opacity: .62; cursor: default; }
.os-card.soon:hover { transform: none; box-shadow: none; border-color: var(--border-default); background: var(--surface-1); }
.os-card .os-soon { position: absolute; top: 8px; right: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.os-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Compact prerequisites (screen 1) */
.os-prereq { font-size: 13px; }
.os-prereq .os-prereq-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }

/* Password rule: the 4 criteria, ticked live */
.pw-rules { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-3); }
.pw-rules li { display: inline-flex; align-items: center; gap: 6px; }
.pw-rules .pw-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: background-color var(--t-fast); }
.pw-rules li.ok { color: var(--success); }
.pw-rules li.ok .pw-dot { background: currentColor; }
/* Address already set on the account: read-only */
.os-form input[readonly] { background: var(--surface-2); color: var(--text-2); cursor: default; }

/* Log: failed login in orange */
.os-journal li.os-j-warn { border-left-color: var(--warning); }

/* ============================================================
   THEME (2026-10-31)
   Black page, raised blue-black boxes, controls with a real
   edge: a top light, a ring and a press state.
   ============================================================ */
:root, [data-theme="light"] {
  --bg: #F2F4F6;
  --surface-1: #FFFFFF;
  --surface-2: #F0F3F5;
  --surface-3: #E7EBEF;
  --surface-4: #DDE2E7;
  --elevated: #FFFFFF;
  --text-1: #0B1014;
  --text-2: #46525C;
  --text-3: #6C7883;
  --primary: #087F6F;
  --primary-dim: rgba(8,127,111,0.1);
  --info: #2F65D6;
  --chart-1: #0A8F7D;
  --chart-2: #3E73DC;
  --chart-grid: rgba(13,30,45,0.07);
  --chart-axis: rgba(13,30,45,0.16);
  --card-bg: #FFFFFF;
  --card-border: rgba(13,30,45,0.08);
  --card-border-strong: rgba(13,30,45,0.15);
  --card-shadow: 0 1px 1px rgba(13,30,45,0.03), 0 2px 6px -2px rgba(13,30,45,0.05), 0 22px 40px -32px rgba(13,30,45,0.2);
  --card-shadow-hover: 0 1px 1px rgba(13,30,45,0.04), 0 4px 10px -3px rgba(13,30,45,0.07), 0 26px 44px -30px rgba(13,30,45,0.28);
  --hi: transparent;
  --glass: #FFFFFF;
  --well: #F6F8F9;
  --well-shadow: inset 0 1px 2px rgba(13,30,45,0.06);
  --ctl-bg: linear-gradient(180deg, #FFFFFF, #F5F7F8);
  --ctl-bg-hover: linear-gradient(180deg, #FFFFFF, #ECEFF2);
  --ctl-shadow: inset 0 0 0 1px rgba(13,30,45,0.13), 0 1px 2px rgba(13,30,45,0.07);
  --ctl-shadow-hover: inset 0 0 0 1px rgba(13,30,45,0.2), 0 2px 5px -1px rgba(13,30,45,0.12);
  --ctl-shadow-active: inset 0 0 0 1px rgba(13,30,45,0.18), inset 0 2px 3px rgba(13,30,45,0.1);
  --btn-grad: linear-gradient(180deg, #0B9987, #087F6F);
  --btn-hover: linear-gradient(180deg, #0DAA96, #098A79);
  --btn-ink: #FFFFFF;
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 0 0 1px rgba(4,70,61,0.5), 0 1px 2px rgba(4,70,61,0.3), 0 10px 22px -12px rgba(8,127,111,0.75);
  --btn-shadow-active: inset 0 0 0 1px rgba(4,70,61,0.55), inset 0 2px 4px rgba(2,40,35,0.35);
}
[data-theme="dark"] {
  --bg: #000000;
  --surface-1: #0B1016;
  --surface-2: #11171E;
  --surface-3: #181F27;
  --surface-4: #202932;
  --elevated: #131A21;
  --text-1: #F5F7F9;
  --text-2: #A7B2BB;
  --text-3: #7D8A95;
  --border-subtle: rgba(170,200,225,0.07);
  --border-default: rgba(170,200,225,0.12);
  --border-strong: rgba(170,200,225,0.2);
  --primary: #2BE0BE;
  --primary-dim: rgba(43,224,190,0.12);
  --info: #7DA8FF;
  --chart-1: #2BE0BE;
  --chart-2: #7DA8FF;
  --chart-grid: rgba(170,200,225,0.07);
  --chart-axis: rgba(170,200,225,0.18);
  --card-bg: linear-gradient(180deg, #0E141A 0%, #090D12 100%);
  --card-border: rgba(170,200,225,0.1);
  --card-border-strong: rgba(170,200,225,0.17);
  --card-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 24px 48px -36px rgba(0,0,0,0.9);
  --card-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.06), 0 28px 52px -34px rgba(0,0,0,1);
  --hi: transparent;
  --glass: #11171E;
  --well: #05080B;
  --well-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  --ctl-bg: linear-gradient(180deg, #1B232B, #131920);
  --ctl-bg-hover: linear-gradient(180deg, #232C35, #1A2129);
  --ctl-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(170,200,225,0.14), 0 1px 2px rgba(0,0,0,0.6);
  --ctl-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(170,200,225,0.24), 0 2px 6px -1px rgba(0,0,0,0.7);
  --ctl-shadow-active: inset 0 0 0 1px rgba(170,200,225,0.18), inset 0 2px 4px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(180deg, #43EDCE, #22D4B2);
  --btn-hover: linear-gradient(180deg, #62F3D9, #33DFBE);
  --btn-ink: #03211C;
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(6,110,92,0.45), 0 1px 2px rgba(0,0,0,0.6), 0 10px 26px -12px rgba(43,224,190,0.5);
  --btn-shadow-active: inset 0 0 0 1px rgba(6,110,92,0.6), inset 0 2px 4px rgba(2,60,50,0.45);
}
body { letter-spacing: -0.004em; font-weight: 420; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* ---- Clickable controls ---- */
.btn { border: 0; border-radius: 10px; font-weight: 550; letter-spacing: -0.008em; transition: background 130ms ease, box-shadow 130ms ease, transform 90ms ease, color 130ms ease; }
.btn-sm { border-radius: 8px; font-weight: 520; }
.btn-lg { min-height: 46px; padding: 0 22px; font-size: 14.5px; border-radius: 11px; }
.btn-primary, [data-theme="dark"] .btn-primary {
  background: var(--btn-grad); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
.btn-primary:hover { background: var(--btn-hover); color: var(--btn-ink); filter: none; transform: none; box-shadow: var(--btn-shadow); }
.btn-primary:active { background: var(--btn-grad); filter: none; transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.btn-secondary, .theme-toggle, .menu-btn, .lang-toggle {
  background: var(--ctl-bg); color: var(--text-1); border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--ctl-shadow);
}
.btn-secondary:hover, [data-theme="dark"] .btn-secondary:hover, .theme-toggle:hover, .menu-btn:hover, .lang-toggle:hover {
  background: var(--ctl-bg-hover); color: var(--text-1); transform: none; box-shadow: var(--ctl-shadow-hover);
}
.btn-secondary:active, .theme-toggle:active, .menu-btn:active, .lang-toggle:active { transform: translateY(1px); box-shadow: var(--ctl-shadow-active); }
.btn-arrow { transition: transform 160ms ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn:focus-visible, .theme-toggle:focus-visible, .menu-btn:focus-visible, .nav-item:focus-visible, .search-btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.nav-item { font-size: 14px; font-weight: 500; letter-spacing: -0.006em; color: var(--text-2); transition: color 130ms ease, background 130ms ease; }
.nav-item.active, a.nav-item.active:hover { color: var(--text-1); background: var(--ctl-bg); box-shadow: var(--ctl-shadow); }

/* ---- Tables ---- */
.table-wrap { border-radius: 16px; }
.data-table th {
  padding: 12px 16px; background: transparent; border-bottom: 1px solid var(--card-border);
  font-size: 12.5px; font-weight: 480; letter-spacing: 0; text-transform: none; color: var(--text-3);
}
.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; color: var(--text-2); }
.data-table tr:hover td { background: color-mix(in srgb, var(--text-1) 3.5%, transparent); }
.data-table td.right.mono { font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-1); }
.data-table a.mono { font-size: 12.5px; }
.data-table a.mono:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   HOME
   ============================================================ */
.ico-duo { flex: none; color: var(--primary); }
.ico-duo .duo { fill: currentColor; opacity: 0.2; }

.home-hero { position: relative; padding: 76px 0 52px; text-align: center; }
.home-hero .container { position: relative; }
.home-wordmark {
  margin: 0 0 22px; font-size: 68px; line-height: 1; font-weight: 700;
  letter-spacing: -0.055em; color: var(--text-1);
}
.home-wordmark span { color: var(--primary); }
.home-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.home-board { padding: 0 0 24px; }
.home-board.page-top { padding-top: 28px; padding-bottom: 40px; }
.home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-mined { display: flex; flex-direction: column; }
.home-mined .home-title { margin-bottom: 18px; }
.home-mined-tx { margin-left: auto; font-size: 12px; font-weight: 450; letter-spacing: 0; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-mined-bar { display: block; height: 6px; margin-top: auto; border-radius: 3px; background: var(--well); box-shadow: inset 0 0 0 1px var(--card-border); overflow: hidden; }
.home-mined-bar i { display: block; width: 0; min-width: 5px; height: 100%; border-radius: 3px; background: var(--grad); box-shadow: 0 0 8px var(--primary); transition: width 800ms cubic-bezier(.2,.7,.2,1); }
.home-mined-sub { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--text-3); font-variant-numeric: tabular-nums; }
.home-mined .home-value + .home-mined-bar { margin-top: 12px; }
.home-card {
  min-width: 0; padding: 20px 22px 22px; border-radius: 16px;
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.home-card:hover { border-color: var(--card-border-strong); box-shadow: var(--card-shadow-hover); }
.home-title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14.5px; font-weight: 560; line-height: 20px; letter-spacing: -0.012em; color: var(--text-1);
}
.home-pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.home-metric { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.home-metric + .home-metric { padding-left: 20px; border-left: 1px solid var(--card-border); }
.home-label { font-size: 13px; font-weight: 450; line-height: 1.3; color: var(--text-3); }
.home-label[title] { cursor: help; }
.home-value, .home-cell-value {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-weight: 580; letter-spacing: -0.03em; color: var(--text-1); white-space: nowrap;
}
.home-value { font-size: 32px; line-height: 1.1; }
.home-unit { margin-left: 5px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.home-value .u, .home-cell-value .u { margin-left: 2px; font-size: 0.62em; font-weight: 600; color: var(--text-3); }

.home-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px;
  border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
}
.home-cell {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 15px 22px; color: inherit;
}
.home-cell + .home-cell { border-left: 1px solid var(--card-border); }
.home-cell-name { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 480; color: var(--text-2); }
.home-cell-name .ico-duo { width: 18px; height: 18px; }
.home-cell-value { font-size: 19px; line-height: 1.2; }
.home-cell-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-cell-more { padding-left: 27px; font-size: 12px; font-weight: 550; color: var(--primary); }
.home-cell-link { text-decoration: none; border-radius: 0 15px 15px 0; transition: background-color 160ms ease; }
.home-cell-more { transition: color 130ms ease; }
.home-cell-link:hover { background: color-mix(in srgb, var(--text-1) 4%, transparent); text-decoration: none; }
.home-cell-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.home-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.home-list { margin-top: 14px; padding: 0; overflow: hidden; }
.home-list .home-title { padding: 18px 22px 14px; }
.home-list .table-wrap { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.home-list .data-table tr:last-child td { border-bottom: 0; }
.home-filter { display: flex; gap: 10px; padding: 18px 22px 2px; }
.home-filter input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border-radius: 10px; color: var(--text-1);
  font: 450 14px/1 var(--font-ui); background: var(--well); border: 1px solid var(--card-border-strong); box-shadow: var(--well-shadow);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.home-filter input::placeholder { color: var(--text-3); }
.home-filter input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.home-filter input[aria-invalid="true"] { border-color: var(--danger); }
.home-filter .btn { flex: none; min-width: 88px; }
.home-list .data-table td, .home-list .data-table th { padding-left: 22px; padding-right: 22px; }
.home-list .data-table td.num { font-weight: 550; font-variant-numeric: tabular-nums; color: var(--text-1); }
.slot-link { color: inherit; text-decoration: none; }
.slot-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.data-table .addr { font-size: 12.5px; color: var(--text-1); letter-spacing: -0.01em; }
.data-table time { color: var(--text-2); font-variant-numeric: tabular-nums; }
.data-table .badge { gap: 6px; padding: 2px 10px 2px 8px; line-height: 19px; font-size: 12px; font-weight: 520; letter-spacing: 0; border-color: color-mix(in srgb, currentColor 24%, transparent); background: color-mix(in srgb, currentColor 10%, transparent); }
.data-table .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px color-mix(in srgb, currentColor 60%, transparent); }
.home-chart { display: flex; flex-direction: column; padding-bottom: 16px; }
.home-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.home-chart .chart-box { flex: 1 1 auto; height: 270px; }
.home-chart .chart-legend { margin-top: 10px; }
.home-chart .chart-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-weight: 550; }
.home-chart .chart-legend i { width: 8px; height: 8px; margin: 0; border-radius: 50%; }

.home-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 10px; background: var(--well); box-shadow: var(--well-shadow), inset 0 0 0 1px var(--card-border); }
.home-seg button {
  min-height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 520 12px/1 var(--font-ui); color: var(--text-3); transition: color 140ms ease, background-color 140ms ease;
}
.home-seg button:hover { color: var(--text-1); }
.home-seg button[aria-pressed="true"] { background: var(--ctl-bg); color: var(--text-1); box-shadow: var(--ctl-shadow); }
.home-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Fee mentions: home and Start mining */
.fee-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 10px; border-radius: 99px;
  font-size: 13px; font-weight: 540; letter-spacing: -0.005em; color: var(--text-2);
  background: var(--primary-dim); border: 1px solid var(--border-active);
}
.fee-pill b { font-weight: 680; color: var(--primary); }
.fee-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.start-fee { margin-top: 12px; }

/* Area chart: cursor over the canvas */
.chart-area canvas { touch-action: pan-y; cursor: crosshair; }
.chart-cursor { position: absolute; inset: 0; pointer-events: none; }
.chart-cursor[hidden] { display: none; }
.chart-cursor-bar { position: absolute; width: 1px; background: var(--chart-axis); transition: left 90ms ease-out; }
.chart-cursor-dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--surface-1); transition: left 90ms ease-out, top 90ms ease-out;
}
.chart-area .chart-tooltip {
  padding: 8px 11px; border-radius: 9px; background: var(--elevated); border-color: var(--card-border-strong);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.45); transition: left 90ms ease-out;
}
.chart-tip-when { margin-bottom: 5px; font: 500 10.5px/1.2 var(--font-mono); color: var(--text-3); }
.chart-tip-row { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.chart-tip-row i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chart-tip-row b { margin-left: auto; padding-left: 14px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-1); }

@media (prefers-reduced-motion: no-preference) {
  .home-hero .container > *, .home-board .container > * { animation: home-rise 560ms cubic-bezier(.2,.7,.2,1) both; }
  .home-cta { animation-delay: 100ms; }
  .home-grid, #board { animation-delay: 150ms; }
    .home-charts { animation-delay: 250ms; }
}
@keyframes home-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1199px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .home-charts { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .home-list .data-table td, .home-list .data-table th { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
  .home-filter { padding: 14px 14px 2px; }
  .home-hero { padding: 48px 0 36px; }
  .home-wordmark { font-size: 46px; margin-bottom: 22px; }
  .home-strip { grid-template-columns: 1fr; }
  .home-cell + .home-cell { border-left: 0; border-top: 1px solid var(--card-border); }
  .home-cell-link { border-radius: 0 0 15px 15px; }
  .home-value { font-size: 26px; }
  .home-chart .chart-box { height: 220px; }
}

/* ---- Footer ---- */
.site-footer { margin-top: 0; padding: 26px 0 30px; border-top: 1px solid var(--card-border); }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; }
.footer-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.footer-copy strong { font-size: 13.5px; font-weight: 520; color: var(--text-1); }
.footer-copy span { font-size: 12.5px; color: var(--text-3); }
.footer-links { display: flex; align-items: center; gap: 22px; }
.footer-links a:not(.footer-discord) { font-size: 13.5px; font-weight: 480; color: var(--text-2); text-decoration: none; transition: color 130ms ease; }
.footer-links a:not(.footer-discord):hover { color: var(--text-1); }
.footer-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.footer-discord {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  color: var(--primary); background: var(--ctl-bg); box-shadow: var(--ctl-shadow);
  transition: color 130ms ease, background 130ms ease, box-shadow 130ms ease, transform 90ms ease;
}
.footer-discord .ico svg { width: 19px; height: 19px; }
.footer-discord:hover { color: var(--btn-ink); background: var(--btn-hover); box-shadow: var(--btn-shadow); }
.footer-discord:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }

/* ---- Miners table ---- */
.data-table td.rank { color: var(--text-3); font-weight: 500; }
.data-table td.right.mono.strong { font-weight: 650; }

/* ---- Charts: palette for more than two series ---- */
:root, [data-theme="light"] { --chart-3: #8A5CF6; --chart-4: #D97706; }
[data-theme="dark"] { --chart-3: #B79CFF; --chart-4: #F2B45A; }

/* ---- My account ---- */
.acct-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.acct-h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--text-1); }
.acct-user { padding: 5px 14px; border-radius: 999px; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; color: var(--primary); background: var(--primary-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent); }
.acct-user:empty { display: none; }
.acct-head #logout, .acct-head #signIn { margin-left: auto; }
.acct-addr[hidden] { display: none; }
.acct-rig-remove { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; transition: color 130ms ease, background 130ms ease; }
.acct-rig-remove .ico-duo { color: inherit; }
.acct-rig-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.acct-rig-remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acct-rig-remove:disabled { opacity: 0.5; cursor: default; }
.acct-addr { padding: 16px 20px; }
.acct-addr label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 450; color: var(--text-3); }
.acct-addr-row { display: flex; gap: 10px; }
.acct-addr input, .acct-addr select, .acct-settings .form-group select {
  height: 42px; padding: 0 14px; border-radius: 10px; color: var(--text-1); font: 450 14px/1 var(--font-ui);
  background: var(--well); border: 1px solid var(--card-border-strong); box-shadow: var(--well-shadow);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.acct-addr input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 13px; }
.acct-addr select { flex: 0 1 230px; min-width: 0; cursor: pointer; }
.acct-addr input:focus, .acct-addr select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.acct-addr input[aria-invalid="true"] { border-color: var(--danger); }
.acct-addr .btn { flex: none; min-height: 42px; }
.acct-addr .form-msg:empty { display: none; }
.acct-addr .form-msg { margin: 8px 0 0; }

.acct-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 14px; padding: 4px; border-radius: 14px; background: var(--well); box-shadow: var(--well-shadow), inset 0 0 0 1px var(--card-border); }
.acct-tabs[hidden] { display: none; }
.acct-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text-2); cursor: pointer; font: 520 14.5px/1 var(--font-ui); letter-spacing: -0.008em;
  transition: color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}
.acct-tabs button .ico-duo { color: var(--text-3); transition: color 130ms ease; }
.acct-tabs button:hover { color: var(--text-1); }
.acct-tabs button[aria-selected="true"] { background: var(--ctl-bg); color: var(--text-1); box-shadow: var(--ctl-shadow); }
.acct-tabs button[aria-selected="true"] .ico-duo { color: var(--primary); }
.acct-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.acct-panel { margin-top: 14px; }
.acct-panel[hidden] { display: none; }
.acct-note { margin-bottom: 14px; }
.acct-note[hidden] { display: none; }
.acct-tiles { display: grid; gap: 14px; }
.acct-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.acct-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acct-tile-chart { min-width: 0; }
.acct-tile-chart .chart-box { flex: 1 1 auto; height: 112px; margin-top: 8px; }
.acct-tile { display: flex; flex-direction: column; padding: 18px 20px; }
.acct-tile .home-title { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.acct-tile .home-value { display: block; margin-top: 14px; font-size: 26px; }
.acct-tile-foot { margin-top: 8px; font-size: 12.5px; color: var(--text-3); }
.acct-tile-foot:empty { display: none; }
.acct-tile-sub { margin-top: 3px; }
.acct-meter { height: 5px; margin-bottom: 8px; border-radius: 99px; overflow: hidden; background: var(--well); box-shadow: inset 0 0 0 1px var(--card-border); }
.acct-meter i { display: block; height: 100%; border-radius: 99px; background: var(--btn-grad); }
.acct-block { margin-top: 14px; }
.acct-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.acct-list-head { padding: 18px 22px 14px; }
.acct-list-head .home-title { padding: 0; }
.acct-summary { font-size: 13px; color: var(--text-3); }
.acct-pill { margin-left: 4px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 550; color: var(--primary); background: var(--primary-dim); }
.acct-est { margin-top: 14px; }
.acct-est .home-seg { margin-top: 14px; }
.acct-est-diff { font-size: 13px; color: var(--text-3); }
.acct-est-diff b { margin-left: 4px; font-weight: 560; color: var(--text-1); font-variant-numeric: tabular-nums; }
.acct-est-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 14px; margin-top: 14px; }
.acct-est-main { display: flex; align-items: baseline; gap: 8px; padding: 18px 20px; border-radius: 12px; background: var(--well); box-shadow: var(--well-shadow), inset 0 0 0 1px var(--card-border); color: var(--text-3); font-size: 14px; font-weight: 500; }
.acct-est-value { font-size: 34px; line-height: 1.1; font-weight: 580; letter-spacing: -0.03em; color: var(--primary); font-variant-numeric: tabular-nums; }
.acct-est-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.acct-fact { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 22px; border-left: 1px solid var(--card-border); }
.acct-fact span { font-size: 15px; color: var(--text-2); }
.acct-fact b { font-size: 30px; line-height: 1.1; font-weight: 580; letter-spacing: -0.03em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.acct-est-how { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.acct-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.acct-settings[hidden] { display: none; }
.acct-settings .home-card:hover { box-shadow: var(--card-shadow); }
.acct-settings > #appealCard { grid-column: 1 / -1; }
.acct-settings > #appealCard h3 { margin: 0 0 6px; font-size: 15px; font-weight: 560; letter-spacing: -0.012em; }
main h2.acct-set-group { grid-column: 1 / -1; margin: 10px 0 -2px; font-size: 13.5px; line-height: 1.4; font-weight: 580; letter-spacing: 0; }
main h2.acct-set-group:first-of-type { margin-top: 0; }
.acct-set { display: flex; flex-direction: column; padding: 18px 20px; }
.acct-set-tall { grid-row: span 2; }
/* Two lines reserved, so that the fields of neighbouring boxes start at the same height */
.acct-set-desc { min-height: 3em; margin: 10px 0 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.acct-set-desc strong { font-weight: 600; color: var(--text-1); }
.acct-set form { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; }
.acct-set .form-group { gap: 4px; }
.acct-set .form-group label { line-height: 26px; }
.acct-set .form-group input, .acct-set .form-group select { min-height: 38px; padding: 7px 12px; font-size: 13.5px; }
.acct-set .form-group input.mono-input { font-size: 12.5px; }
.acct-set-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.acct-set-label > span[hidden] { display: none; }
.acct-set .form-group .acct-set-label select { width: auto; max-width: 210px; height: 26px; min-height: 26px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.acct-set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.acct-set .form-msg { margin: 0; }
.acct-set .form-msg:empty { display: none; }
.acct-set > .form-msg, .acct-set #payPending { margin-top: 10px; }
.acct-set #payPending:empty, .acct-set #recOut:empty { display: none; }
.acct-set .pw-rules { margin: 2px 0 0; }
.data-table td.right.mono.acct-out { color: var(--info); }
.ico-wrap { display: inline-flex; flex: none; }
.data-table .nowrap { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
@media (max-width: 1180px) {
  .acct-tiles-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acct-tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-tile-chart { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .acct-settings { grid-template-columns: 1fr; }
  .acct-set-tall { grid-row: auto; }
  .acct-tiles-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-addr-row { flex-direction: column; }
  .acct-addr select { flex: none; }
  .acct-tabs button { flex-direction: column; gap: 5px; font-size: 12.5px; min-height: 58px; }
  .acct-est-body, .acct-est-facts { grid-template-columns: 1fr; }
  .acct-fact { flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 2px; border-left: 0; border-top: 1px solid var(--card-border); }
  .acct-fact b { font-size: 22px; }
}
.data-table td.acct-platform { min-width: 180px; max-width: 280px; line-height: 1.45; }

/* ---- My start commands ---- */
.acct-cmd { margin-top: 14px; padding: 16px 20px; }
.acct-cmd[hidden] { display: none; }
.acct-cmd-out { margin-top: 12px; }
.acct-cmd-out:empty { display: none; }

/* ============================================================
   GREEN GRADIENT, SHEEN, BOXES (2026-10-31)
   One left-to-right gradient (light to deep green) for headings,
   large figures and primary buttons. Sheen: a diagonal light that
   crosses a control once when the pointer enters it. Boxes: a
   lit hairline edge, a layered surface and a light that follows
   the pointer (--mx, --my, set by js/ui.js).
   ============================================================ */
:root, [data-theme="light"] {
  --primary-50: #F0F9F4; --primary-100: #DDF1E6; --primary-200: #BCE3CD; --primary-300: #8FD2AE; --primary-400: #58BC8A;
  --primary-500: #2FA36C; --primary-600: #1E8A58; --primary-700: #187349; --primary-800: #165C3C; --primary-900: #144C33;
  --primary: #17774A;
  --primary-dim: rgba(23,119,74,0.1);
  --border-active: rgba(23,119,74,0.4);
  --success: #17774A;
  --success-dim: rgba(23,119,74,0.1);
  --row-hover: rgba(13,30,45,0.065);
  --shadow-glow: 0 0 20px rgba(23,119,74,0.08);
  --chart-1: #2A9666;
  --grad-a: #38A873; --grad-b: #238F5C; --grad-c: #146E45;
  --figure-bg: none; --figure-ink: #17774A;
  --grad: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 45%, var(--grad-c) 100%);
  --page-glow: rgba(47,163,108,0.06);
  --sheen: linear-gradient(105deg, transparent 38%, rgba(47,163,108,0.16) 50%, transparent 62%);
  --sheen-fill: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.4) 50%, transparent 62%);
  --hover-tint: rgba(30,138,88,0.07);
  --hover-ring: inset 0 0 0 1px rgba(30,138,88,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
  --card-edge: linear-gradient(150deg, rgba(13,30,45,0.17) 0%, rgba(13,30,45,0.07) 38%, rgba(13,30,45,0.06) 62%, rgba(30,138,88,0.2) 100%);
  --card-bg:
    radial-gradient(130% 110% at 0% 0%, rgba(47,163,108,0.03), transparent 52%) padding-box,
    linear-gradient(180deg, #FFFFFF 0%, #FCFDFD 100%) padding-box,
    var(--card-edge) border-box;
  --card-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(13,30,45,0.05), 0 8px 18px -12px rgba(13,30,45,0.14), 0 32px 56px -38px rgba(13,30,45,0.28);
  --card-shadow-hover: inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(13,30,45,0.06), 0 14px 26px -14px rgba(13,30,45,0.18), 0 40px 64px -36px rgba(20,90,60,0.22);
  --card-glare: rgba(47,163,108,0.06);
  --card-trace: rgba(30,138,88,0.5);
  --btn-grad: linear-gradient(100deg, #4DBA88 0%, #2C9F69 100%);
  --btn-hover: linear-gradient(100deg, #58C392 0%, #33A871 100%);
  --btn-ink: #03240F;
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(4,90,46,0.3), 0 1px 2px rgba(4,60,30,0.22), 0 12px 24px -14px rgba(30,138,88,0.45);
  --btn-shadow-active: inset 0 0 0 1px rgba(4,90,46,0.4), inset 0 2px 4px rgba(2,50,25,0.3);
  --tt-track: #ECEEF0;
  --tt-track-ring: inset 0 0 0 1px rgba(13,30,45,0.09), inset 0 1px 2px rgba(13,30,45,0.09);
  --tt-knob: #FFFFFF;
  --tt-knob-shadow: 0 0 0 1px rgba(13,30,45,0.05), 0 2px 7px rgba(13,30,45,0.2);
  --tt-idle: #7C8690;
  --tt-on: #1E8A58;
}
[data-theme="dark"] {
  --primary-50: #06230F; --primary-100: #0A3A1C; --primary-200: #7DF5AF; --primary-300: #5FEF9D; --primary-400: #3DE98A;
  --primary-500: #1FDB74; --primary-600: #10C562; --primary-700: #0CA650; --primary-800: #0C7E3F; --primary-900: #0B5F31;
  --primary: #3DE98A;
  --primary-dim: rgba(61,233,138,0.12);
  --border-active: rgba(61,233,138,0.42);
  --success: #3DE98A;
  --success-dim: rgba(61,233,138,0.12);
  --row-hover: rgba(255,255,255,0.045);
  --shadow-glow: 0 0 20px rgba(61,233,138,0.14);
  --chart-1: #3DE98A;
  --grad-a: #86F7B4; --grad-b: #36E886; --grad-c: #00C455;
  --figure-bg: var(--grad); --figure-ink: transparent;
  --page-glow: rgba(46,230,130,0.11);
  --sheen: linear-gradient(105deg, transparent 38%, rgba(190,255,220,0.2) 50%, transparent 62%);
  --sheen-fill: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.72) 50%, transparent 62%);
  --hover-tint: rgba(61,233,138,0.09);
  --hover-ring: inset 0 0 0 1px rgba(61,233,138,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  --card-edge: linear-gradient(150deg, rgba(255,255,255,0.24) 0%, rgba(170,200,225,0.09) 34%, rgba(170,200,225,0.06) 64%, rgba(61,233,138,0.36) 100%);
  --card-bg:
    radial-gradient(130% 110% at 0% 0%, rgba(61,233,138,0.065), transparent 50%) padding-box,
    linear-gradient(168deg, #131A20 0%, #0B1014 55%, #080B0E 100%) padding-box,
    var(--card-edge) border-box;
  --card-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 2px rgba(0,0,0,0.7), 0 22px 44px -24px rgba(0,0,0,0.95);
  --card-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.7), 0 28px 54px -24px rgba(0,0,0,1), 0 34px 70px -40px rgba(46,230,130,0.34);
  --card-glare: rgba(120,255,185,0.11);
  --card-trace: rgba(96,245,160,0.95);
  --btn-grad: linear-gradient(100deg, #86F7B4 0%, #36E886 52%, #0DD066 100%);
  --btn-hover: linear-gradient(100deg, #A0FAC6 0%, #4FF098 52%, #1ADB72 100%);
  --btn-ink: #02200D;
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 0 0 1px rgba(4,110,55,0.4), 0 1px 2px rgba(0,0,0,0.6), 0 12px 28px -12px rgba(46,230,130,0.55);
  --btn-shadow-active: inset 0 0 0 1px rgba(4,110,55,0.55), inset 0 2px 4px rgba(1,60,30,0.45);
  --tt-track: #20262C;
  --tt-track-ring: inset 0 0 0 1px rgba(170,200,225,0.13), inset 0 1px 3px rgba(0,0,0,0.55);
  --tt-knob: linear-gradient(135deg, #86F7B4 0%, #36E886 52%, #0DD066 100%);
  --tt-knob-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 10px rgba(46,230,130,0.45);
  --tt-idle: #8C98A3;
  --tt-on: #02200D;
}
body { background: radial-gradient(1100px 520px at 50% -140px, var(--page-glow), transparent 72%) no-repeat, var(--bg); }
.home-list > .pager { margin: 0; padding: 14px 22px; }
.pager:empty { display: none; }
/* The small squares of the page background, on the whole site */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--chart-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--chart-grid) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
}

/* ---- Logo: bright green in dark mode, softer green in light mode ---- */
:root, [data-theme="light"] {
  --lg-r1: #2FA36C; --lg-r2: #146E45;
  --lg-p1: #3BAB76; --lg-p2: #1E8A58; --lg-p3: #0E4F31;
  --lg-m1: #3BAB76; --lg-m2: #238F5C; --lg-m3: #146E45;
  --lg-word: #17774A; --lg-pool: #5C6773;
}
[data-theme="dark"] {
  --lg-r1: #5AF09F; --lg-r2: #06BF58;
  --lg-p1: #6CF2A7; --lg-p2: #14A65A; --lg-p3: #05522C;
  --lg-m1: #6CF2A7; --lg-m2: #1FCB70; --lg-m3: #0A7A41;
  --lg-word: #3DE98A; --lg-pool: #A9B1BD;
}
.lg-r1 { stop-color: var(--lg-r1); } .lg-r2 { stop-color: var(--lg-r2); }
.lg-p1 { stop-color: var(--lg-p1); } .lg-p2 { stop-color: var(--lg-p2); } .lg-p3 { stop-color: var(--lg-p3); }
.lg-m1 { stop-color: var(--lg-m1); } .lg-m2 { stop-color: var(--lg-m2); } .lg-m3 { stop-color: var(--lg-m3); }
.lg-word { fill: var(--lg-word); } .lg-pool { fill: var(--lg-pool); }
.logo-art { display: block; }
.logo-art svg { display: block; width: auto; height: 44px; }
main h1.home-wordmark { padding: 0; background: none; line-height: 1; }
.home-wordmark .logo-art svg { width: min(440px, 84vw); height: auto; }

/* ---- Gradient on headings; large figures: plain green in light mode, gradient in dark mode ---- */
main h1, main h2:not(.home-title) {
  width: fit-content; max-width: 100%; padding-bottom: 0.12em; margin-bottom: -0.12em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.home-value, .home-cell-value, .stat-card .stat-value, .acct-est-value, .ww-solde {
  width: fit-content; max-width: 100%; padding-bottom: 0.12em; margin-bottom: -0.12em;
  background: var(--figure-bg); -webkit-background-clip: text; background-clip: text;
  color: var(--figure-ink); -webkit-text-fill-color: var(--figure-ink);
}
.home-wordmark { margin-inline: auto; margin-bottom: 30px; padding: 0 0.07em 0.14em; }
.home-wordmark span { color: inherit; }
.ww-hero h1, .ww-hero h2 { margin-inline: auto; }
.home-unit, .home-value .u, .home-cell-value .u, .stat-card .stat-unit, .stat-card .stat-value .u, .ww-solde small { -webkit-text-fill-color: var(--text-3); }
.home-metric { align-items: flex-start; }
.home-metric > .home-label { align-self: stretch; }
.acct-tile > .home-value { align-self: flex-start; }
.home-cell-value { flex: none; }
.nav-ind, .acct-meter i { background: var(--grad); }
.hero h1 .gradient { background-image: var(--grad); }

/* ---- Sheen: crosses once on entry, then rests out of sight ---- */
.nav-item, .btn-secondary, .home-seg button, .acct-tabs button, .home-cell-link, .menu-btn {
  background-image: var(--sheen); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 180ms ease, transform 90ms ease, background-position 0s;
}
.nav-item:hover, .btn-secondary:hover, .home-seg button:hover, .acct-tabs button:hover, .home-cell-link:hover, .menu-btn:hover {
  background-position: 0 0;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 180ms ease, transform 90ms ease, background-position 950ms cubic-bezier(.45,.05,.35,1);
}
.nav-item:hover, .home-seg button:hover, .acct-tabs button:hover { background-color: var(--hover-tint); box-shadow: var(--hover-ring); color: var(--text-1); }
.nav-item.active, a.nav-item.active:hover { background-image: var(--sheen), var(--ctl-bg); background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; }
.nav-item.active { background-position: 100% 0, 0 0; }
a.nav-item.active:hover { background-position: 0 0, 0 0; }
.home-seg button[aria-pressed="true"], .acct-tabs button[aria-selected="true"] { background-image: var(--ctl-bg); background-size: auto; background-position: 0 0; }
.btn-secondary, .menu-btn { background-image: var(--sheen), var(--ctl-bg); background-size: 300% 100%, 100% 100%; background-position: 100% 0, 0 0; }
.btn-secondary:hover, [data-theme="dark"] .btn-secondary:hover, .menu-btn:hover {
  background-image: var(--sheen), var(--ctl-bg-hover); background-size: 300% 100%, 100% 100%; background-position: 0 0, 0 0;
  box-shadow: var(--ctl-shadow-hover), inset 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent);
}
.btn-primary, [data-theme="dark"] .btn-primary {
  background-image: var(--sheen-fill), var(--btn-grad); background-size: 300% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat;
  transition: box-shadow 160ms ease, transform 90ms ease, color 130ms ease, background-position 0s;
}
.btn-primary:hover, [data-theme="dark"] .btn-primary:hover {
  background-image: var(--sheen-fill), var(--btn-hover); background-size: 300% 100%, 100% 100%; background-position: 0 0, 0 0;
  box-shadow: var(--btn-shadow), 0 0 22px -4px color-mix(in srgb, var(--primary-500) 65%, transparent);
  transition: box-shadow 160ms ease, transform 90ms ease, color 130ms ease, background-position 950ms cubic-bezier(.45,.05,.35,1);
}
.btn-primary:active, [data-theme="dark"] .btn-primary:active { background-image: var(--btn-grad); background-size: 100% 100%; }
/* Table rows: a plain, still highlight */
.data-table td { transition: none; }
.data-table tbody tr:hover td { background: var(--row-hover); }
.home-cell-link:hover { background-color: var(--row-hover); }

/* ---- My account, My wallet: ring that stays on ---- */
.nav-ring, a.nav-ring.active:hover { border-radius: 999px; padding: 7px 16px; font-weight: 560; color: var(--text-1); box-shadow: 0 0 16px -6px color-mix(in srgb, var(--primary-500) 70%, transparent); }
.nav-ring + .nav-ring { margin-left: 6px; }
.nav-ring + .nav-item:not(.nav-ring) { margin-left: 12px; }
.nav-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.nav-ring:hover, a.nav-ring.active:hover, .nav-ring.active { background-color: var(--hover-tint); box-shadow: 0 0 22px -5px color-mix(in srgb, var(--primary-500) 85%, transparent); }
.nav-ring.active, a.nav-ring.active:hover { background-image: var(--sheen); background-size: 300% 100%; }
.nav-ring .nav-ind { display: none; }
@media (max-width: 1100px) {
  .nav-ring + .nav-ring, .nav-ring + .nav-item:not(.nav-ring) { margin-left: 0; }
  .main-nav.open { gap: 6px; }
  .main-nav.open .nav-ring { border-radius: 999px; }
}

/* ---- Light / dark switch ---- */
.theme-toggle, .theme-toggle:hover, .theme-toggle:active {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; flex: none;
  width: 54px; height: 28px; min-width: 54px; padding: 3px; border: 0; border-radius: 999px;
  background: var(--tt-track); box-shadow: var(--tt-track-ring); color: var(--tt-idle); transform: none; cursor: pointer;
}
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tt-knob {
  position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tt-knob); box-shadow: var(--tt-knob-shadow); transition: transform 300ms cubic-bezier(.3,1.35,.5,1);
}
[data-theme="dark"] .tt-knob { transform: translateX(26px); }
.theme-toggle .ico svg { width: 14px; height: 14px; }
.theme-toggle .ico { position: relative; display: grid; place-items: center; width: 22px; height: 22px; color: var(--tt-idle); transition: color 200ms ease; }
.theme-toggle:hover .ico { color: var(--text-1); }
:root:not([data-theme="dark"]) .theme-toggle .tt-sun, [data-theme="dark"] .theme-toggle .tt-moon { color: var(--tt-on); }

/* ---- Text fields: an I-beam readable on any background, a border that answers the pointer ---- */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"]), textarea { cursor: url("../img/cursor-text.svg") 8 12, text; }
.form-group input:hover:not(:focus), .form-group select:hover:not(:focus), .form-group textarea:hover:not(:focus),
.acct-addr input:hover:not(:focus), .acct-addr select:hover:not(:focus), .home-filter input:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-default));
}

/* ---- Boxes ---- */
.home-card, .home-strip, .stat-card, .card, .chart-container, .feature-card, .compare-list li, .live-box,
.option-card, details.fold, .network-banner, .table-wrap {
  background: var(--card-bg); border: 1px solid transparent; border-radius: 20px; box-shadow: var(--card-shadow);
}
[data-theme="dark"] .network-banner, .option-card:hover { background: var(--card-bg); }
.home-card, .home-strip, .stat-card, .card, .chart-container, .feature-card, .live-box, .option-card { position: relative; }
.home-card, .stat-card, .chart-container, .feature-card, .live-box, .option-card, .home-strip {
  transition: box-shadow 240ms ease, transform 240ms cubic-bezier(.2,.7,.2,1);
}
.home-card:hover, .stat-card:hover, .chart-container:hover, .feature-card:hover, .live-box:hover, .option-card:hover, .home-strip:hover,
.compare-list li:hover { border-color: transparent; box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.acct-settings .home-card:hover, .home-list:hover, .acct-addr:hover, .acct-cmd:hover { transform: none; }
/* Pointer light: a glare on the surface, a trace on the edge */
.home-card::before, .home-strip::before, .stat-card::before, .card::before, .chart-container::before, .feature-card::before, .live-box::before, .option-card::before,
.home-card::after, .home-strip::after, .stat-card::after, .card::after, .chart-container::after, .feature-card::after, .live-box::after, .option-card::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 280ms ease;
}
.home-card::before, .home-strip::before, .stat-card::before, .card::before, .chart-container::before, .feature-card::before, .live-box::before, .option-card::before {
  inset: 0; height: auto;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), var(--card-glare), transparent 68%);
}
.home-card::after, .home-strip::after, .stat-card::after, .card::after, .chart-container::after, .feature-card::after, .live-box::after, .option-card::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), var(--card-trace), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.home-card:hover::before, .home-strip:hover::before, .stat-card:hover::before, .card:hover::before, .chart-container:hover::before, .feature-card:hover::before, .live-box:hover::before, .option-card:hover::before,
.home-card:hover::after, .home-strip:hover::after, .stat-card:hover::after, .card:hover::after, .chart-container:hover::after, .feature-card:hover::after, .live-box:hover::after, .option-card:hover::after { opacity: 1; }
/* A box holding a table stays still: the pointer moves along the rows, not the box */
.home-card:has(.data-table):hover, .card:has(.data-table):hover { box-shadow: var(--card-shadow); transform: none; }
.home-card:has(.data-table)::before, .home-card:has(.data-table)::after, .card:has(.data-table)::before, .card:has(.data-table)::after { display: none; }
.home-cell-link { border-radius: 0 19px 19px 0; }
.home-title .ico-duo, .acct-tile .ico-duo {
  box-sizing: content-box; width: 17px; height: 17px; padding: 6px; border-radius: 10px; color: var(--primary);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary-500) 24%, transparent), color-mix(in srgb, var(--primary-500) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.14);
}
.home-title { gap: 11px; }
.site-header { border-bottom-color: transparent; }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--card-border) 18%, color-mix(in srgb, var(--primary-500) 50%, transparent) 50%, var(--card-border) 82%, transparent 100%);
}
@media (max-width: 720px) {
  .home-cell-link { border-radius: 0 0 19px 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-card:hover, .stat-card:hover, .chart-container:hover, .feature-card:hover, .live-box:hover, .option-card:hover, .home-strip:hover, .compare-list li:hover { transform: none; }
  .tt-knob { transition: none; }
}
.option-card.selected:hover { background: linear-gradient(180deg, var(--primary-dim), transparent), var(--surface-1); }
.os-card.soon:hover { background: var(--card-bg); border-color: transparent; box-shadow: var(--card-shadow); }
.os-card.soon::before, .os-card.soon::after { display: none; }
@media (max-width: 1100px) {
  .main-nav.open { background: var(--surface-1); }
}

/* ---- Delegation: same ring, a slightly bluer green ---- */
:root, [data-theme="light"] {
  --deleg-a: #33AB9A; --deleg-b: #1E9185; --deleg-c: #12706D; --deleg-ink: #0F6F68;
  --deleg-dim: rgba(30,145,133,0.1); --deleg-dim-strong: rgba(30,145,133,0.18); --deleg-glow: #1FA697;
}
[data-theme="dark"] {
  --deleg-a: #86F7DF; --deleg-b: #36E8C4; --deleg-c: #00C4A4; --deleg-ink: #63EFD2;
  --deleg-dim: rgba(54,232,196,0.11); --deleg-dim-strong: rgba(54,232,196,0.2); --deleg-glow: #20D9B5;
}
.nav-ring-deleg, a.nav-ring-deleg.active:hover { box-shadow: 0 0 16px -6px color-mix(in srgb, var(--deleg-glow) 70%, transparent); }
.nav-ring-deleg::before { background: linear-gradient(90deg, var(--deleg-a) 0%, var(--deleg-b) 45%, var(--deleg-c) 100%); }
.nav-ring-deleg:hover, a.nav-ring-deleg.active:hover, .nav-ring-deleg.active { background-color: var(--deleg-dim); box-shadow: 0 0 22px -5px color-mix(in srgb, var(--deleg-glow) 85%, transparent); }

/* ============================================================
   COMPACT (2026-11-01): less scrolling on every tab.
   Smaller boxes and figures, tighter rows, one rhythm of 10 px.
   ============================================================ */
.section { padding: 22px 0; }
.section-header { margin-bottom: 14px; }
.section-header h2 { font-size: 24px; }
.section-header p { font-size: 14px; }
.start-fee { margin-top: 8px; }
.wizard-steps { margin-bottom: 12px; }
.option-card { padding: 12px; }
.card { padding: 14px 16px; }
.card + .card { margin-top: 10px; }

.home-hero { padding: 22px 0 14px; }
.home-wordmark { margin-bottom: 10px; }
.home-wordmark .logo-art svg { width: min(290px, 74vw); }
.home-cta { align-items: center; gap: 8px; margin-top: 0; }
.home-cta .btn-lg { min-height: 38px; padding: 0 16px; font-size: 14px; }
.home-board { padding-bottom: 14px; }
.home-board.page-top { padding-top: 14px; padding-bottom: 18px; }
.home-grid { gap: 10px; }
.home-card { padding: 11px 15px 12px; border-radius: 13px; }
.home-title { gap: 8px; font-size: 13.5px; }
.home-title .ico-duo { width: 17px; height: 17px; }
.home-pair { margin-top: 8px; }
.home-metric { gap: 2px; }
.home-metric + .home-metric { padding-left: 14px; }
.home-label { font-size: 12px; }
.home-value { font-size: 23px; }
.home-unit { font-size: 12px; }
.home-mined .home-title { margin-bottom: 7px; }
.home-mined .home-value + .home-mined-bar { margin-top: 7px; }
.home-mined-bar { height: 5px; }
.home-mined-sub { margin-top: 5px; font-size: 11.5px; }
.home-mined-tx { font-size: 11.5px; }
.home-strip { margin-top: 10px; border-radius: 13px; }
.home-cell { padding: 7px 15px; }
.home-cell-name { gap: 8px; font-size: 13px; }
.home-cell-name .ico-duo { width: 16px; height: 16px; }
.home-cell-value { font-size: 15.5px; }
.home-cell-side { flex-direction: row; align-items: center; gap: 12px; }
.home-cell-more { padding-left: 0; font-size: 11.5px; }
.home-charts { gap: 10px; margin-top: 10px; }
.home-chart { padding-bottom: 9px; }
.home-chart-head { margin-bottom: 6px; }
.home-chart .chart-box { height: 165px; }
.home-chart .chart-legend { margin-top: 4px; font-size: 12px; }
.home-seg button { min-height: 22px; padding: 0 8px; font-size: 11.5px; }

/* Tables of every tab */
.data-table th { padding: 7px 14px; font-size: 12px; }
.data-table td { padding: 6px 14px; font-size: 13px; }
.data-table td.right.mono { font-size: 13px; }
.data-table .badge { padding: 0 8px 0 7px; font-size: 11.5px; line-height: 18px; }
.home-list { margin-top: 10px; }
.home-list .home-title { padding: 11px 16px 7px; }
.home-list .data-table td, .home-list .data-table th { padding-left: 16px; padding-right: 16px; }
.home-list > .pager { padding: 7px 16px; }
.home-filter { padding: 11px 16px 2px; }
.home-filter input { height: 34px; }
.pager .btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }

/* the boxes clip their content: a sticky header would only drift inside them */
.home-list .table-wrap.fits .data-table th { position: static; }

/* My account */
.acct-head { margin-bottom: 10px; }
.acct-addr { padding: 10px 15px; }
.acct-cmd { margin-top: 10px; padding: 11px 15px; }
.acct-tabs { margin-top: 10px; }
.acct-panel, .acct-block, .acct-est { margin-top: 10px; }
.acct-note { margin-bottom: 10px; }
.acct-tiles, .acct-settings { gap: 10px; }
.acct-tile, .acct-set { padding: 11px 15px; }
.acct-fact { padding: 6px 16px; gap: 3px; }
.acct-list-head { padding: 0 0 7px; }
.acct-est-value { font-size: 25px; }

.site-footer { padding: 14px 0; margin-top: 8px; }

@media (max-width: 1080px) { .home-cell-side { flex-direction: column; align-items: flex-start; gap: 2px; } }
@media (max-width: 720px) {
  .home-hero { padding: 16px 0 12px; }
  .home-wordmark { font-size: inherit; margin-bottom: 8px; }
  .home-value { font-size: 21px; }
  .home-grid { grid-template-columns: 1fr; }
  .home-chart .chart-box { height: 150px; }
  .home-list .data-table td, .home-list .data-table th { padding-left: 12px; padding-right: 12px; }
}

/* Payouts: head on one line, one block per transaction */
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 16px 9px; }
.home-list .pay-head .home-title { padding: 0; }
.pay-head .home-filter { flex: 0 1 460px; gap: 8px; padding: 0; }
.pay-head .home-filter input { height: 32px; font-size: 13px; }
.pay-head .home-filter .btn { min-width: 68px; min-height: 32px; padding: 0 12px; font-size: 13px; }
.pay-table { table-layout: fixed; }
.pay-table th:nth-child(1) { width: 20%; }
.pay-table th:nth-child(2) { width: 24%; }
.pay-table th:nth-child(4) { width: 24%; }
.data-table.pay-table tbody tr td, .data-table.pay-table tbody tr:hover td { background: transparent; }
.home-list .data-table.pay-table td { border-bottom: 0; }
.pay-table tr.pay-first td { padding-top: 8px; border-top: 1px solid var(--card-border); }
.pay-table tbody tr:first-child td { border-top: 0; }
.pay-table tr.pay-next td { padding-top: 1px; }
.pay-table tbody tr td { padding-bottom: 3px; }
.pay-table td.pay-date, .pay-table td.pay-tx { vertical-align: top; padding-bottom: 7px; }
.pay-table tr.pay-first:last-child td, .pay-table tr.pay-next:last-child td { padding-bottom: 8px; }
.pay-table td.pay-amount { font-weight: 580; font-variant-numeric: tabular-nums; }
.pay-table td.pay-amount .home-unit { margin-left: 4px; font-size: 11px; font-weight: 500; }
@media (max-width: 720px) {
  .pay-head .home-filter { flex-basis: 100%; }
  .pay-head .home-filter input { flex: 1 1 0; width: auto; }
  .pay-head .home-filter .btn { width: auto; }
  .pay-table, .pay-table tbody { display: block; width: 100%; }
  .pay-table thead { display: none; }
  .pay-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 1px 12px; }
  .pay-table tr.pay-first { margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--card-border); }
  .pay-table tbody tr:first-child { border-top: 0; margin-top: 0; }
  .home-list .data-table.pay-table td { display: block; padding: 1px 0; border: 0; }
  .pay-table td.pay-date time { font-size: 12px; color: var(--text-3); }
  .pay-table td.pay-tx { text-align: right; font-size: 12px; }
}

/* Home: what the pool has done comes first, in tiles; how it runs comes second, smaller */
.home-strip.home-lead { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; transition: none; }
.home-strip.home-lead::before, .home-strip.home-lead::after { display: none; }
.home-lead .home-cell, .home-lead .home-cell + .home-cell {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 12px 16px 13px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--primary-500) 30%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary-500) 11%, transparent), transparent 62%), var(--card-bg);
}
.home-lead .home-cell:hover { border-color: color-mix(in srgb, var(--primary-500) 55%, transparent); }
.home-lead .home-cell-side { display: contents; }
.home-lead .home-cell-name { order: 0; font-size: 13.5px; font-weight: 540; color: var(--text-1); }
.home-lead .home-cell-name .ico-duo {
  box-sizing: content-box; width: 17px; height: 17px; padding: 6px; border-radius: 10px; color: var(--primary);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary-500) 24%, transparent), color-mix(in srgb, var(--primary-500) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.14);
}
.home-lead .home-cell-value { order: 1; margin-top: 8px; font-size: clamp(25px, 2.2vw, 36px); font-weight: 620; line-height: 1.1; white-space: normal; }
.home-lead .home-cell-sub, .home-lead .home-cell-more { order: 2; margin-top: 3px; padding: 0; font-size: 12px; line-height: 1.35; }
.home-cell-sub { color: var(--text-3); font-variant-numeric: tabular-nums; }
.home-lead .home-unit { display: inline-block; }
.home-strip:not(.home-lead) .home-cell-name { white-space: nowrap; }
/* The strip of the other pages holds four figures: the link text waits for the room */
@media (min-width: 1081px) and (max-width: 1500px) {
  .home-strip:not(.home-lead) .home-cell-more { display: none; }
}
.home-lead + .home-grid { margin-top: 10px; }
.home-lead + .home-grid .home-value { font-size: 19px; }
.home-lead + .home-grid .home-pair { margin-top: 6px; }
.home-lead + .home-grid .home-mined .home-title { margin-bottom: 5px; }
.home-lead + .home-grid .home-mined-sub { margin-top: 4px; }
@media (max-width: 900px) {
  .home-strip.home-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .home-lead .home-cell, .home-lead .home-cell + .home-cell { padding: 11px 13px 12px; }
  .home-lead .home-cell-value { font-size: 24px; }
  .home-lead .home-cell-name { font-size: 13px; gap: 7px; }
}

/* Home: why this pool */
.home-pitch { margin-bottom: 10px; }
.home-pitch-head { margin-bottom: 10px; text-align: center; }
.home-pitch-head h2 { margin: 0 auto; font-size: 19px; font-weight: 620; line-height: 26px; letter-spacing: -0.018em; color: var(--text-1); }
.home-pitch-head p { margin: 2px 0 0; font-size: 13.5px; line-height: 20px; color: var(--text-2); }
.home-pitch-head a { white-space: nowrap; }
.home-pitch-card { padding-block: 7px; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.home-pitch-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.home-pitch-go { flex: none; color: var(--text-3); transition: transform 150ms ease, color 150ms ease; }
.home-pitch-card:hover .home-pitch-go { color: var(--primary); transform: translateX(2px); }
dialog.pitch-sheet { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 16px 18px 20px; overflow: auto; border: 1px solid var(--card-border); border-radius: 16px; color: var(--text-1); background: var(--surface-1, var(--card-bg)); box-shadow: var(--card-shadow-hover); outline: none; }
dialog.pitch-sheet::backdrop { background: rgba(5, 8, 12, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pitch-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pitch-sheet p { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-2); }
.pitch-sheet code { font-size: 13px; }
.pitch-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 50%; font: inherit; font-size: 21px; line-height: 1; color: var(--text-2); background: none; cursor: pointer; }
.pitch-close:hover { color: var(--text-1); background: var(--row-hover); }
.pitch-close:focus-visible { outline: 2px solid var(--primary); }
@media (max-width: 720px) {
  /* The figures come first on a phone */
  body[data-page="index"] .home-board .container { display: flex; flex-direction: column; }
  body[data-page="index"] .home-board .container > * { order: 2; min-width: 0; }
  body[data-page="index"] .home-board .container > #board { order: 0; }
  body[data-page="index"] .home-board .container > .home-pitch { order: 1; margin: 12px 0 2px; }
  .home-pitch-head h2 { font-size: 17px; line-height: 23px; }
  .home-pitch-card { min-height: 48px; }
  .pitch-close { width: 44px; height: 44px; }
}