/* ═══════════════════════════════════════════════════════════════════════
   SOQUPOOL — Unified Dashboard Styles
   Premium member dashboard component CSS.
   Uses design tokens from style.css (:root variables).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ SHARED HEADER BAR — Two-tier: topbar + ticker ═══ */
.shared-header {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 100;
  font-family: var(--mono);
}

/* ── Top Bar: Logo + Nav + User ── */
.sh-topbar {
  display: flex;
  align-items: center;
  padding: 6px 24px;
  background: #111822;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sh-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  letter-spacing: 2px;
  text-decoration: none;
  flex-shrink: 0;
}

.sh-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.15);
}

/* Nav links */
.sh-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.1);
}

.sh-nav a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sh-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}

/* Right side of top bar: user info OR sign-in */
.sh-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Member-only elements: hidden by default, shown on auth */
.sh-member-info {
  display: none;
  align-items: center;
  gap: 10px;
  animation: fadeSlideIn .3s ease;
}
.sh-member-info.visible { display: flex; }

.sh-username {
  color: #fff;
  font-weight: 600;
  font-size: .72rem;
}

.sh-badge {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255,215,0,.12);
  border: 1px solid rgba(255,215,0,.25);
  color: #ffd700;
}

.sh-signout {
  color: var(--text3);
  text-decoration: none;
  font-size: .62rem;
  transition: color .15s;
  cursor: pointer;
}
.sh-signout:hover { color: var(--green); }

/* Sign in button in top bar */
.sh-signin {
  padding: 4px 14px;
  background: transparent;
  border: 1px solid rgba(25,135,84,.3);
  color: var(--green);
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
  transition: all .15s;
}
.sh-signin:hover {
  background: rgba(25,135,84,.1);
  border-color: rgba(25,135,84,.5);
}
.sh-signin.hidden { display: none; }

/* ── Ticker Bar: Live Pool Data ── */
.sh-ticker {
  display: flex;
  align-items: center;
  padding: 4px 24px;
  background: #0d1117;
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: 0;
  font-size: .66rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sh-ticker::-webkit-scrollbar { display: none; }

.sh-ticker-stats {
  display: flex;
  align-items: center;
  gap: 0;
}

.sh-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 14px;
  color: var(--text3);
  font-size: .66rem;
  line-height: 1.4;
  border-left: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}
.sh-stat:first-child { border-left: none; }
.sh-stat-label {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,.35);
}
.sh-stat span:not(.sh-stat-label) { color: #fff; font-weight: 700; font-size: .78rem; }

/* Personal stats slide in from right */
.sh-personal {
  display: none;
  align-items: center;
  gap: 0;
  animation: fadeSlideIn .3s ease;
}
.sh-personal.visible { display: flex; }
.sh-personal .sh-stat span:not(.sh-stat-label) { color: var(--green); }

/* Chain status indicators */
.sh-chains {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 14px;
  margin-right: 0;
}

.sh-chain {
  font-size: .58rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .5px;
  font-weight: 500;
}

.sh-chain-dot {
  font-size: .5rem;
}
.sh-chain-dot.live { color: var(--green); }
.sh-chain-dot.degraded { color: #ffc107; }
.sh-chain-dot.down { color: #dc3545; }

/* LIVE indicator */
.sh-live {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 14px;
  color: var(--green);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-left: auto;
}

.sh-live-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

.sh-live-time {
  color: var(--text3);
  font-weight: 400;
  font-size: .56rem;
}

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

/* ═══ PAGE TRANSITION — Crossfade ═══ */
.page-transition-out {
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.page-transition-in {
  animation: fadeIn .3s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══ UNIFIED DASHBOARD CONTAINER ═══ */
#unifiedDashboard {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: none; /* shown when authenticated */
}
#unifiedDashboard.active { display: block; }

/* ═══ SECTIONS ═══ */
.ud-section {
  margin-bottom: 28px;
}

.ud-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ═══ HERO KPI CARDS ═══ */
.ud-kpi-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ud-settings-btn {
  display: flex; align-items: center; gap: 6px;
  background: #f8f9fa; border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px; padding: 6px 14px;
  font-family: var(--mono); font-size: .65rem; font-weight: 600;
  color: #495057; cursor: pointer; transition: all .2s;
  letter-spacing: .5px; text-transform: uppercase;
}
.ud-settings-btn:hover {
  background: #e9ecef; border-color: rgba(25,135,84,.2); color: #198754;
}
.ud-settings-btn svg { opacity: .6; transition: opacity .2s; }
.ud-settings-btn:hover svg { opacity: 1; }

/* Worker action buttons */
.ud-action-btn {
  background: none; border: 1px solid transparent; border-radius: 4px;
  padding: 2px 6px; font-size: .7rem; cursor: pointer; transition: all .15s;
}
.ud-action-btn:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
.ud-action-delete:hover { background: rgba(220,53,69,.06); border-color: rgba(220,53,69,.2); color: #dc3545; }

.ud-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

.ud-kpi-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 4px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ud-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(25,135,84,.25), transparent);
}
.ud-kpi-card:hover {
  border-color: rgba(25,135,84,.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ud-kpi-label {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 6px;
}

.ud-kpi-value {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: #212529;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ud-kpi-sub {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--text3);
  margin-top: 4px;
}

/* Feature 3: Pool Share % badge */
.ud-kpi-share {
  display: none;
  font-family: var(--mono);
  font-size: .62rem;
  color: #198754;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: .5px;
}

/* Feature 4: Payout countdown card accent */
.ud-kpi-payout::before {
  background: linear-gradient(90deg, transparent, rgba(13,110,253,.3), transparent);
}
.ud-kpi-payout .ud-kpi-value {
  font-variant-numeric: tabular-nums;
}

/* Feature 1: Live Block Finder Feed */
.ud-block-feed { padding-bottom: 12px; }
.ud-block-feed-live {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .62rem;
  color: var(--green); text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
}
.ud-block-ticker {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 8px 0 4px; scrollbar-width: thin;
}
.ud-block-ticker::-webkit-scrollbar { height: 4px; }
.ud-block-ticker::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 2px; }
.ud-block-card {
  flex: 0 0 auto; min-width: 130px;
  background: #f8f9fa; border: 1px solid rgba(0,0,0,.06);
  border-radius: 6px; padding: 10px 12px;
  font-family: var(--mono); transition: all .3s;
}
.ud-block-card:hover { border-color: rgba(25,135,84,.2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ud-block-new {
  border-color: rgba(25,135,84,.3); background: rgba(25,135,84,.03);
  animation: blockPulse 2s ease-in-out;
}
@keyframes blockPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25,135,84,0); }
  50% { box-shadow: 0 0 12px 2px rgba(25,135,84,.2); }
}
.ud-block-chain { font-size: .58rem; color: var(--text3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px; }
.ud-block-height { font-size: .82rem; font-weight: 700; color: #212529; }
.ud-block-finder { font-size: .6rem; color: #495057; margin-top: 2px; }
.ud-block-finder strong { color: #198754; }
.ud-block-time { font-size: .56rem; color: var(--text3); margin-top: 2px; }
.ud-block-ticker-empty { font-family: var(--mono); font-size: .68rem; color: var(--text3); padding: 12px 0; }

/* Block Toast Notification */
.ud-block-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: #198754; color: #fff; padding: 12px 20px;
  border-radius: 8px; font-family: var(--mono); font-size: .72rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  transform: translateY(100px); opacity: 0; transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.ud-block-toast-show { transform: translateY(0); opacity: 1; }
.ud-block-toast strong { color: #fff; }

/* Feature 9: PQ-Safe badge */
.ud-pq-badge {
  display: inline-block; margin-left: 6px;
  font-family: var(--mono); font-size: .55rem;
  color: #198754; background: rgba(25,135,84,.06);
  border: 1px solid rgba(25,135,84,.15); border-radius: 3px;
  padding: 1px 5px; letter-spacing: .5px; font-weight: 600;
  vertical-align: middle; cursor: help;
}

.ud-kpi-revenue .ud-kpi-value {
  color: var(--green);
}

/* ═══ DATA TABLES ═══ */
.ud-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ud-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* BUG-06: Prevent column width jitter between data refreshes */
  font-family: var(--mono);
  font-size: .78rem;
}

/* BUG-06: Fixed column widths for Fleet Status table */
#udWorkerTable th:nth-child(1) { width: 18%; } /* Rig */
#udWorkerTable th:nth-child(2) { width: 7%; }  /* Health */
#udWorkerTable th:nth-child(3) { width: 13%; } /* Speed */
#udWorkerTable th:nth-child(4) { width: 13%; } /* 24h Avg */
#udWorkerTable th:nth-child(5) { width: 8%; }  /* Rej % */
#udWorkerTable th:nth-child(6) { width: 10%; } /* Uptime */
#udWorkerTable th:nth-child(7) { width: 15%; } /* Last Share */
#udWorkerTable th:nth-child(8) { width: 16%; } /* Actions */

/* UX-03: Fleet inline actions */
.ud-actions { white-space: nowrap; text-align: center; }
.ud-alert-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer; vertical-align: middle;
}
.ud-alert-toggle input[type="checkbox"] {
  display: none;
}
.ud-alert-icon { font-size: 14px; opacity: 0.7; transition: opacity 0.2s; }
.ud-alert-toggle:hover .ud-alert-icon { opacity: 1; }
.ud-remove-btn {
  background: none; border: 1px solid rgba(220,53,69,0.3); color: #dc3545;
  cursor: pointer; font-size: 11px; padding: 2px 6px; border-radius: 4px;
  margin-left: 6px; opacity: 0.5; transition: all 0.2s;
}
.ud-remove-btn:hover { opacity: 1; background: rgba(220,53,69,0.08); border-color: #dc3545; }
.ud-actions-loading { color: #adb5bd; font-size: 11px; }

.ud-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text3);
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(0,0,0,.08);
  background: #f8f9fb;
  white-space: nowrap;
  user-select: none;
}

.ud-table td {
  padding: 8px 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,.06);
  white-space: nowrap;
}

.ud-table tbody tr:hover {
  background: rgba(25,135,84,.04);
}

.ud-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Earnings table — fixed column widths for clean alignment */
.ud-table-earnings { table-layout: fixed; width: 100%; }
.ud-table-earnings th:nth-child(1),
.ud-table-earnings td:nth-child(1) { width: 20%; text-align: left; }
.ud-table-earnings th:nth-child(2),
.ud-table-earnings td:nth-child(2) { width: 25%; text-align: right; }
.ud-table-earnings th:nth-child(3),
.ud-table-earnings td:nth-child(3) { width: 25%; text-align: right; }
.ud-table-earnings th:nth-child(4),
.ud-table-earnings td:nth-child(4) { width: 20%; text-align: right; }
.ud-table-earnings th:nth-child(5),
.ud-table-earnings td:nth-child(5) { width: 10%; text-align: right; }

.ud-empty {
  text-align: center;
  color: var(--text3);
  padding: 28px 12px !important;
  font-size: .75rem;
}

/* Sortable column headers */
.ud-sortable {
  cursor: pointer;
  position: relative;
}
.ud-sortable::after {
  content: '⇅';
  margin-left: 4px;
  opacity: .3;
  font-size: .6rem;
}
.ud-sortable.ud-sort-asc::after { content: '↑'; opacity: .8; color: var(--green); }
.ud-sortable.ud-sort-desc::after { content: '↓'; opacity: .8; color: var(--green); }

/* Key-value tables (Pool Stats) */
.ud-table-kv { max-width: 600px; }
.ud-table-kv td:first-child { color: var(--text3); font-weight: 500; width: 200px; }
.ud-table-kv td:nth-child(2) { font-weight: 700; color: #212529; }

/* ═══ FLEET STATUS ═══ */
.ud-fleet-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .72rem;
}
.ud-fleet-count { font-weight: 600; }
.ud-fleet-count.active { color: var(--green); }
.ud-fleet-count.idle { color: var(--amber); }
.ud-fleet-count.offline { color: var(--red); }
.ud-fleet-dot { color: var(--text3); }

.ud-worker-name {
  font-weight: 700;
  color: #212529 !important;
}

.ud-worker-row {
  cursor: default;
  transition: background .15s;
}
.ud-worker-row:hover {
  background: rgba(25,135,84,.04) !important;
}

.ud-health {
  font-size: .9rem;
  display: inline-block;
  width: 20px;
  text-align: center;
}
.ud-health-active { color: var(--green); }
.ud-health-idle { color: var(--amber); }
.ud-health-offline { color: var(--red); }

.ud-warn { color: var(--red) !important; }
.ud-caution { color: var(--amber) !important; }

.ud-time { color: var(--text3) !important; font-size: .72rem; }

/* ═══ HASHRATE CHART ═══ */
.ud-chart-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ud-chart-avg {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text2);
}

.ud-chart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ud-period-btns {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 3px;
  overflow: hidden;
}

.ud-period-btn {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(0,0,0,.08);
  color: var(--text3);
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .15s, color .15s;
}
.ud-period-btn:last-child { border-right: none; }
.ud-period-btn:hover { background: rgba(25,135,84,.04); color: #212529; }
.ud-period-btn.active {
  background: rgba(25,135,84,.1);
  color: var(--green);
}

.ud-chart-legends {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--text3);
}
.ud-legend { display: flex; align-items: center; gap: 6px; }
.ud-legend-swatch {
  width: 12px;
  height: 3px;
  border-radius: 1px;
  display: inline-block;
}
.ud-legend-dashed {
  background: none !important;
  border-top: 2px dashed var(--amber);
  height: 0;
}

.ud-chart-wrap {
  position: relative;
  height: 220px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ud-chart-footer {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--text3);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══ EARNINGS TABLE ═══ */
.ud-coin-tag {
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid;
  display: inline-block;
}
.ud-tag-soq  { border-color: var(--green); color: var(--green); background: rgba(25,135,84,.06); }
.ud-tag-ltc  { border-color: #9e9e9e; color: #C0C0C0; background: rgba(192,192,192,.06); }
.ud-tag-doge { border-color: #C2A633; color: #C2A633; background: rgba(194,166,51,.06); }

/* ═══ PAYOUT LEDGER ═══ */
.ud-ledger-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ud-select {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.1);
  color: var(--text);
  font-family: var(--mono);
  font-size: .68rem;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7f91' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ud-select:focus {
  outline: none;
  border-color: rgba(25,135,84,.3);
}

.ud-btn-export {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(0,0,0,.1);
  color: var(--text2);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
}
.ud-btn-export:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(25,135,84,.05);
}

.ud-payout-row { cursor: pointer; }
.ud-payout-row:hover { background: rgba(25,135,84,.04) !important; }

.ud-payout-date {
  display: flex;
  flex-direction: column;
}
.ud-date-main {
  color: #212529;
  font-weight: 600;
  font-size: .76rem;
}
.ud-date-time {
  color: var(--text3);
  font-size: .6rem;
}

.ud-payout-amount {
  color: var(--green) !important;
  font-weight: 700;
}

.ud-payout-balance {
  color: var(--text2) !important;
}

.ud-status {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}
.ud-status-confirmed { background: rgba(25,135,84,.1); color: var(--green); }
.ud-status-pending   { background: rgba(255,171,0,.1); color: var(--amber); }

.ud-payout-expand {
  color: var(--text3);
  font-size: .8rem;
  cursor: pointer;
  padding: 0 4px;
  transition: color .15s;
}
.ud-payout-expand:hover { color: var(--green); }

/* Detail row (expanded) */
.ud-payout-detail {
  background: rgba(25,135,84,.03);
}
.ud-payout-detail td {
  padding: 0 !important;
  border: none !important;
}

.ud-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  padding: 12px 20px 16px;
  font-size: .72rem;
  overflow: hidden;
}

.ud-detail-label {
  display: block;
  color: var(--text3);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.ud-detail-val {
  display: block;
  color: #212529;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ud-txid-link {
  color: var(--blue);
  text-decoration: none;
  font-size: .68rem;
  word-break: break-all;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ud-txid-link:hover { text-decoration: underline; white-space: normal; }

/* ═══ PAGINATION ═══ */
.ud-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  background: #f8f9fb;
  border: 1px solid rgba(0,0,0,.06);
  border-top: none;
  font-family: var(--mono);
}

.ud-page-btn {
  background: transparent;
  border: 1px solid rgba(0,0,0,.08);
  color: var(--text2);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  padding: 5px 10px;
  min-width: 32px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
}
.ud-page-btn:hover:not(.disabled):not(.active) {
  border-color: rgba(25,135,84,.3);
  color: #212529;
  background: rgba(25,135,84,.04);
}
.ud-page-btn.active {
  background: rgba(25,135,84,.12);
  border-color: rgba(25,135,84,.3);
  color: var(--green);
}
.ud-page-btn.disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

.ud-page-ellipsis {
  color: var(--text3);
  font-size: .72rem;
  padding: 0 4px;
  user-select: none;
}

.ud-page-info {
  margin-left: 12px;
  font-size: .65rem;
  color: var(--text3);
  letter-spacing: .5px;
}

/* Ledger summary footer */
.ud-ledger-summary {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background: #f8f9fb;
  border: 1px solid rgba(0,0,0,.06);
  border-top: none;
  border-radius: 0 0 4px 4px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text3);
  flex-wrap: wrap;
}
.ud-ledger-summary strong {
  color: #212529;
  margin-left: 4px;
}

/* ═══ COLLAPSIBLE SECTIONS ═══ */
.ud-collapse {
  margin-bottom: 2px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 3px;
  overflow: hidden;
}

.ud-collapse-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 1px;
  cursor: pointer;
  background: #f8f9fb;
  transition: background .15s, color .15s;
  list-style: none;
}
.ud-collapse-header::-webkit-details-marker { display: none; }
.ud-collapse-header::marker { content: ''; }

.ud-collapse-header svg {
  transition: transform .2s ease;
  flex-shrink: 0;
}
.ud-collapse[open] > .ud-collapse-header svg {
  transform: rotate(180deg);
}
.ud-collapse-header:hover {
  background: #eef0f3;
  color: #212529;
}

.ud-collapse-body {
  padding: 16px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
  animation: fadeIn .2s ease;
}

/* ═══ STRATUM CONFIG ═══ */
.ud-stratum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ud-stratum-label {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.ud-stratum-val {
  font-family: var(--mono);
  font-size: .78rem;
  color: #212529;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ud-copyable {
  background: rgba(25,135,84,.04);
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid rgba(25,135,84,.1);
}

.ud-copy-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: .85rem;
  padding: 0 2px;
  transition: color .15s;
}
.ud-copy-btn:hover { color: var(--green); }

/* ═══ FAQ ═══ */
.ud-faq {
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ud-faq:last-child { border-bottom: none; }

.ud-faq summary {
  padding: 10px 0;
  cursor: pointer;
  color: var(--text);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  list-style: none;
  transition: color .15s;
}
.ud-faq summary::-webkit-details-marker { display: none; }
.ud-faq summary::marker { content: ''; }
.ud-faq summary::before {
  content: '▸ ';
  color: var(--text3);
  transition: transform .15s;
}
.ud-faq[open] summary::before { content: '▾ '; color: var(--green); }
.ud-faq summary:hover { color: #212529; }

.ud-faq-body {
  padding: 0 0 12px 14px;
  color: var(--text2);
  font-size: .82rem;
  line-height: 1.6;
}
.ud-faq-body code {
  font-family: var(--mono);
  background: rgba(25,135,84,.06);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: .76rem;
  color: var(--green);
}

/* ═══ ONBOARDING BANNER ═══ */
.ud-onboarding {
  margin-bottom: 16px;
  border: 1px solid rgba(25,135,84,.2);
  border-radius: 4px;
  background: rgba(25,135,84,.03);
  overflow: hidden;
  animation: sectionSlide .35s ease both;
}

.ud-onboard-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(25,135,84,.06);
  border-bottom: 1px solid rgba(25,135,84,.12);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: .5px;
}

.ud-onboard-header svg {
  flex-shrink: 0;
  color: var(--green);
}

.ud-onboard-header span {
  flex: 1;
}

.ud-onboard-dismiss {
  background: transparent;
  border: 1px solid rgba(25,135,84,.2);
  color: var(--green);
  width: 24px;
  height: 24px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.ud-onboard-dismiss:hover {
  background: rgba(25,135,84,.1);
  border-color: var(--green);
}

.ud-onboard-steps {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ud-onboard-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ud-onboard-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
}

.ud-onboard-step strong {
  font-family: var(--mono);
  font-size: .78rem;
  color: #212529;
  letter-spacing: .3px;
}

.ud-onboard-step p {
  font-size: .75rem;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.5;
}

.ud-onboard-code {
  display: block;
  margin: 6px 0;
  padding: 8px 12px;
  background: rgba(25,135,84,.06);
  border: 1px solid rgba(25,135,84,.12);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--green);
  font-weight: 600;
  letter-spacing: .3px;
}

/* ═══ RESPONSIVE ═══ */

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
  .sh-topbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 16px;
  }
  .sh-nav { margin-left: 0; padding-left: 0; border-left: none; flex-wrap: wrap; }
  .sh-topbar-right { width: 100%; justify-content: flex-end; }
  .sh-ticker { padding: 4px 12px; flex-wrap: wrap; }
  .sh-ticker-stats { flex-wrap: wrap; }
  .sh-personal { flex-wrap: wrap; }

  .ud-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .ud-block-ticker { gap: 8px; }

  .ud-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ud-ledger-controls {
    flex-wrap: wrap;
  }

  .ud-stratum-grid {
    grid-template-columns: 1fr;
  }

  .ud-detail-grid {
    grid-template-columns: 1fr;
  }

  /* Fleet table: hide Reject%, Uptime, Actions on tablet */
  .ud-table th:nth-child(5),
  .ud-table td:nth-child(5),
  .ud-table th:nth-child(6),
  .ud-table td:nth-child(6),
  .ud-table th:nth-child(8),
  .ud-table td:nth-child(8) {
    display: none;
  }

  /* Chart container */
  .ud-chart-container {
    min-height: 200px;
  }
}

/* ── Small phone (≤480px) ── */
@media (max-width: 480px) {
  .ud-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  #unifiedDashboard {
    padding: 12px 8px 60px;
  }

  .sh-topbar { padding: 6px 12px; }
  .sh-ticker { padding: 4px 8px; }
  .sh-stat { padding: 2px 8px; font-size: .6rem; }
  .sh-stat span:not(.sh-stat-label) { font-size: .7rem; }
  .sh-chains { display: none; } /* Hide chain dots on tiny screens */

  /* Fleet table: only show Name, Status, Hashrate, Last Seen */
  .ud-table th:nth-child(4),
  .ud-table td:nth-child(4),
  .ud-table th:nth-child(5),
  .ud-table td:nth-child(5),
  .ud-table th:nth-child(6),
  .ud-table td:nth-child(6),
  .ud-table th:nth-child(7),
  .ud-table td:nth-child(7),
  .ud-table th:nth-child(8),
  .ud-table td:nth-child(8) {
    display: none;
  }

  .ud-table {
    font-size: .65rem;
    table-layout: auto;
  }

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

  /* KPI card text sizing */
  .ud-kpi-value {
    font-size: 1.1rem;
  }

  .ud-kpi-label {
    font-size: .5rem;
    letter-spacing: 1px;
  }

  .ud-kpi-sub {
    font-size: .55rem;
  }

  /* Section headers */
  .ud-section-title {
    font-size: .7rem;
  }

  /* Payout/earnings table */
  .ud-table-earnings {
    table-layout: auto;
    font-size: .6rem;
  }

  /* Fleet summary badges */
  .ud-fleet-summary {
    flex-wrap: wrap;
    gap: 4px;
    font-size: .6rem;
  }

  /* Chart period buttons */
  .ud-chart-controls {
    flex-wrap: wrap;
    gap: 4px;
  }

  .ud-period-btn {
    padding: 3px 8px;
    font-size: .55rem;
  }

  /* Shared header on small phones */
  .shared-header {
    padding: 6px 10px;
  }

  .sh-nav a {
    font-size: .55rem;
    padding: 3px 5px;
  }

  /* Block ticker */
  .ud-block-ticker {
    flex-wrap: wrap;
    gap: 4px;
  }

  .ud-block-item {
    font-size: .55rem;
    padding: 3px 6px;
  }
}

/* ── Tiny phone (≤360px) ── */
@media (max-width: 360px) {
  .ud-kpi-grid {
    grid-template-columns: 1fr;
  }

  .sh-nav {
    display: none;
  }
}