/* ============================================================================
   FirePool2 — Vault-Tec design system
   Ported from GOStratum's theme tokens. Shared by the public site and admin.
   Pure CSS, no build step — served straight from the firepool binary.
   ========================================================================== */

/* ── Theme tokens ─────────────────────────────────────────────────────────
   Default is Vault-Tec (amber/CRT). Other GOStratum themes included so the
   header switcher works; the value persists in localStorage. */
:root,
.theme-vault-tec {
  --bg-primary:      #0d0f08;
  --bg-secondary:    #141a0e;
  --bg-card:         #1a1f12;
  --bg-card-hover:   #252d1a;
  --accent:          #f5a623;
  --accent-rgb:      245, 166, 35;
  --accent-glow:     rgba(245, 166, 35, 0.30);
  --accent-secondary:#00ff41;
  --text-primary:    #fff5e0;
  --text-secondary:  #9f9070;
  --border:          rgba(245, 166, 35, 0.14);
  --success:         #00ff41;
  --warning:         #f5a623;
  --error:           #ff3333;
}

.theme-nuclear {
  --bg-primary:#0a0e0a; --bg-secondary:#0f1a0f; --bg-card:#121f12; --bg-card-hover:#1a2f1a;
  --accent:#39ff14; --accent-rgb:57,255,20; --accent-glow:rgba(57,255,20,.3); --accent-secondary:#ffe600;
  --text-primary:#e0ffe0; --text-secondary:#7a9f7a; --border:rgba(57,255,20,.12);
  --success:#39ff14; --warning:#ffe600; --error:#ff3333;
}
.theme-tron {
  --bg-primary:#0a0a0f; --bg-secondary:#0f0f1a; --bg-card:#12121f; --bg-card-hover:#1a1a2f;
  --accent:#00d4ff; --accent-rgb:0,212,255; --accent-glow:rgba(0,212,255,.3); --accent-secondary:#ff6600;
  --text-primary:#e0f0ff; --text-secondary:#7a8faf; --border:rgba(0,212,255,.12);
  --success:#00d4ff; --warning:#ff6600; --error:#ff3355;
}
.theme-bitcoin {
  --bg-primary:#0f0c08; --bg-secondary:#1a1408; --bg-card:#1f1a0f; --bg-card-hover:#2f2518;
  --accent:#f7931a; --accent-rgb:247,147,26; --accent-glow:rgba(247,147,26,.3); --accent-secondary:#ffd700;
  --text-primary:#fff0d0; --text-secondary:#9f8a60; --border:rgba(247,147,26,.12);
  --success:#22cc55; --warning:#ffd700; --error:#ff4444;
}
.theme-mono {
  --bg-primary:#0a0a0a; --bg-secondary:#141414; --bg-card:#181818; --bg-card-hover:#262626;
  --accent:#dadada; --accent-rgb:218,218,218; --accent-glow:rgba(218,218,218,.22); --accent-secondary:#8c8c8c;
  --text-primary:#f2f2f2; --text-secondary:#8a8a8a; --border:rgba(255,255,255,.13);
  --success:#ffffff; --warning:#a6a6a6; --error:#6f6f6f;
}
/* desaturate coin logos so they fit the greyscale theme */
.theme-mono .coin-icon img, .theme-mono .pool-card .coin .sym img { filter: grayscale(1) brightness(1.15) contrast(.95); }

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

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Share Tech Mono', ui-monospace, 'JetBrains Mono', 'Consolas', monospace;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* never allow the whole page to scroll sideways */
  max-width: 100%;
}
/* Keep the layout shell and main column inside the viewport; wide tables get
   their own internal horizontal scroll (see the table rules below). */
.app { max-width: 100vw; }
.content { min-width: 0; }
.content > *, .card { max-width: 100%; }

/* Subtle CRT scanline + vignette over the whole app. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-shadow: 0 0 8px var(--accent-glow); }

/* ── Layout shell ─────────────────────────────────────────────────────── */
/* Background FX canvas — subtle hash/network/block lattice behind content */
#bgfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.app { display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; }

/* ── Top navigation bar ───────────────────────────────────────────────── */
.topnav {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 0 26px; height: 60px;
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: 22px; margin-right: 2px;
  border-right: 1px solid var(--border); align-self: stretch;
}
.brand .mark {
  width: 34px; height: 34px; border-radius: 6px;
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
  color: var(--bg-primary); background: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}
.brand .title { font-size: 16px; letter-spacing: 1px; line-height: 1.1; }
.brand .title small { display: block; font-size: 9px; color: var(--text-secondary); letter-spacing: 2px; }

.nav { list-style: none; display: flex; flex-direction: row; align-items: center; gap: 4px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 6px;
  color: var(--text-secondary); letter-spacing: 1px; font-size: 13px;
  border: 1px solid transparent; transition: all .18s ease; white-space: nowrap;
}
.nav a:hover { background: var(--bg-card-hover); color: var(--text-primary); text-shadow: none; }
.nav a.active {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent); border-color: var(--border);
  box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.06);
}
.nav .ico { width: 16px; text-align: center; }
.nav .nav-ext { margin-left: auto; color: var(--text-secondary); }
.nav .ext-arrow { font-size: 11px; opacity: .7; }

.topnav-foot { display: flex; align-items: center; font-size: 11px; color: var(--text-secondary); }

.content { padding: 26px 34px 60px; max-width: 1400px; width: 100%; margin: 0 auto; flex: 1 0 auto; }

/* ── Site footer ──────────────────────────────────────────────────────── */
.site-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; position: relative; z-index: 1;
  padding: 18px 34px; border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.035));
  color: var(--text-secondary); font-size: 12px;
}
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-mark { color: var(--accent); font-size: 16px; text-shadow: 0 0 10px var(--accent-glow); }
.foot-brand b { color: var(--text-primary); letter-spacing: 1px; }
.foot-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-link { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); transition: color .18s ease; }
.foot-link:hover { color: var(--accent); }
.foot-link .ext-arrow { font-size: 11px; opacity: .7; }
.foot-social {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--border); color: var(--text-secondary); cursor: default; transition: all .18s ease;
}
.foot-social svg { width: 15px; height: 15px; display: block; }
.foot-social:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .15); }
.foot-donate {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 6px;
  border: 1px solid var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .08);
  font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: all .18s ease;
}
.foot-donate:hover { background: var(--accent); color: var(--bg-primary); box-shadow: 0 0 16px var(--accent-glow); }
@media (max-width: 640px) { .site-footer { flex-direction: column; text-align: center; padding: 16px; } }
/* Breathing room between stacked top-level blocks (hero, grids, tables).
   `* + *` skips the leading topbar so it keeps its own margin. */
.content > * + * { margin-top: 22px; }

/* ── Hero (landing mission) ───────────────────────────────────────────── */
.hero { display: flex; align-items: center; gap: 22px; }
.hero-mark {
  flex: none; width: 72px; height: 72px; border-radius: 10px;
  display: grid; place-items: center; font-size: 38px;
  color: var(--bg-primary); background: var(--accent);
  box-shadow: 0 0 26px var(--accent-glow);
}
.hero-body h2 { font-size: 24px; letter-spacing: 2px; font-weight: 400; margin-bottom: 6px; }
.hero-body p { color: var(--text-secondary); font-size: 13px; line-height: 1.6; max-width: 72ch; }
/* Dweller lookup help (empty-state instructions) */
.lookup-steps { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lookup-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; }
.lookup-steps .ls-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: var(--bg-primary); background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
}

/* Payout modes (SOLO / PROP) on the landing */
.payout-modes { display: flex; flex-direction: column; gap: 14px; }
.payout-mode .pm-head { display: flex; align-items: center; gap: 9px; font-size: 14px; letter-spacing: 1px; margin-bottom: 5px; }
.payout-mode p { font-size: 12px; line-height: 1.55; margin: 0; }
.payout-mode b { color: var(--text-primary); }

/* Machinery hardware badge (miner model / ASIC) */
.rig { display: inline-flex; align-items: center; gap: 8px; }
.rig-ico {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 5px; font-size: 13px; line-height: 1;
  color: var(--accent); background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.10);
}
.rig.dim { color: var(--text-secondary); }
.rig.dim .rig-ico { color: var(--text-secondary); background: var(--bg-card-hover); border-color: var(--border); box-shadow: none; }

.hero-badges { margin-top: 14px; }
.fee-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px;
  font-size: 13px; letter-spacing: 2px; font-weight: 600;
  color: var(--accent); border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.12);
}
.hero-cta { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 620px){ .hero { flex-direction: column; text-align: center; } .hero-cta { justify-content: center; } }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.topbar h1 { font-size: 26px; letter-spacing: 2px; font-weight: 400; }
.topbar h1 .sub { display:block; font-size: 12px; color: var(--text-secondary); letter-spacing: 3px; }
.topbar .tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.theme-select, .search-input {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
  padding: 9px 12px; border-radius: 6px; font-family: inherit; font-size: 13px;
}
.search-input { min-width: 260px; }
.theme-select:focus, .search-input:focus { outline: none; border-color: var(--accent); }

/* ── Status pill ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; letter-spacing: 1px;
  border: 1px solid var(--border); background: var(--bg-card);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); }
.pill.ok    .dot { background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse 3s ease-in-out infinite; }
.pill.warn  .dot { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.pill.err   .dot { background: var(--error);   box-shadow: 0 0 8px var(--error); }
.pill.ok  { color: var(--success); }
.pill.warn{ color: var(--warning); }
.pill.err { color: var(--error); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ── Cards & grids ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 860px){
  .topnav{height:auto;padding:12px 16px;gap:10px}
  .brand{border-right:none;padding-right:0}
  .nav{flex-basis:100%;flex-wrap:wrap;order:3}
  .nav .nav-ext{margin-left:0}
  .topnav-foot{margin-left:auto}
}
@media (max-width: 720px){
  .nav a{padding:8px 12px}
  .content{padding:18px 16px 48px}
  .grid{grid-template-columns:1fr!important}
  .topbar h1{font-size:22px}
  .search-input{min-width:0;width:100%}
  /* let wide tables scroll horizontally instead of overflowing the card */
  .card > table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}
@media (max-width: 420px){
  .content{padding:14px 12px 40px}
  .stat .value{font-size:24px}
}

.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px 22px; position: relative; overflow: hidden;
}
/* Page transition (ZombieOS-style): cards/tiles fade + rise in, staggered by
   --ci (set per view in render()). 'backwards' keeps them hidden pre-delay. */
@keyframes card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.card, .stat { animation: card-enter .4s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--ci, 0) * 55ms); }
@media (prefers-reduced-motion: reduce) { .card, .stat { animation: none; } }
.card::before { /* corner bracket flourish */
  content:""; position:absolute; top:8px; left:8px; width:14px; height:14px;
  border-top:2px solid var(--accent); border-left:2px solid var(--accent); opacity:.5;
  z-index: 2;
}
/* CRT scanline beam — ambient + sporadic: each card sweeps top→bottom slowly,
   then goes dark for a long gap. Periods and phases are staggered per card so
   the scans never sync — sometimes one fires, sometimes none. */
.card::after, .stat::after {
  content:""; position:absolute; left:0; right:0; top:0; height:6%;
  pointer-events:none; z-index:3;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(var(--accent-rgb), 0.05) 42%,
    rgba(var(--accent-rgb), 0.22) 50%,
    rgba(var(--accent-rgb), 0.05) 58%,
    transparent 100%);
  opacity: 0;
  animation: cardScan 62s linear infinite;
}
/* Desync per card — long, varied periods + phase so scans are rare and random. */
.card:nth-child(3n)::after,   .stat:nth-child(3n)::after   { animation-duration: 78s; animation-delay: -30s; }
.card:nth-child(3n+1)::after, .stat:nth-child(3n+1)::after { animation-duration: 54s; animation-delay: -44s; }
.card:nth-child(3n+2)::after, .stat:nth-child(3n+2)::after { animation-duration: 92s; animation-delay: -12s; }
.card:nth-child(5n)::after,   .stat:nth-child(5n)::after   { animation-delay: -55s; }
.card:nth-child(7n)::after,   .stat:nth-child(7n)::after   { animation-duration: 70s; animation-delay: -25s; }
.card:hover { box-shadow: inset 0 0 32px rgba(var(--accent-rgb), .07); }
/* One sweep in the first ~5% of the (long) cycle, then dark for the rest. */
@keyframes cardScan {
  0%   { opacity: 0; transform: translateY(-100%); }
  1%   { opacity: 1; transform: translateY(-100%); }
  6%   { opacity: 1; transform: translateY(1680%); }
  7%   { opacity: 0; transform: translateY(1680%); }
  100% { opacity: 0; transform: translateY(1680%); }
}
@media (prefers-reduced-motion: reduce) { .card::after, .stat::after { animation: none; opacity: 0; } }
.card h3 { font-size: 13px; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 14px; font-weight: 400; }

/* Label/value rows (pool info, connect, etc.) — global so any card can use them */
.rows { display: flex; flex-direction: column; gap: 11px; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; font-size: 13px; }
.row > span:first-child { color: var(--text-secondary); flex: 0 0 auto; }
.row > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Stat tile */
.stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; transition: all .2s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.stat:hover { background: var(--bg-card-hover); box-shadow: 0 0 18px rgba(var(--accent-rgb),.08); }
.stat .label { font-size: 11px; letter-spacing: 2px; color: var(--text-secondary); text-transform: uppercase; }
.stat .value { font-size: 28px; margin-top: 6px; color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
.stat .value small { font-size: 14px; color: var(--text-secondary); text-shadow: none; }
.stat .delta { font-size: 12px; margin-top: 4px; color: var(--text-secondary); }
/* sparkline grows to fill whatever vertical space the tile has (tiles in a row
   stretch to the tallest sibling, so this fills the gap under Total Power) */
.stat .spark { flex: 1 1 auto; height: auto; min-height: 48px; margin-top: 10px; position: relative; }

/* Active-Vaults coin strip: one chip per coin, lit (online) / greyed (offline) */
.vault-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 4px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg-primary);
  font-size: 10px; letter-spacing: 1px; transition: all .2s ease; }
.vchip .coin-icon { width: 18px; height: 18px; border-radius: 5px; }
.vchip .coin-icon.coin-icon-text { font-size: 9px; }
.vchip small { color: var(--text-secondary); font-weight: 600; }
.vchip.on { border-color: rgba(var(--accent-rgb),.55);
  box-shadow: 0 0 9px rgba(var(--accent-rgb),.18) inset; }
.vchip.on small { color: var(--accent); }
.vchip.off { opacity: .42; filter: grayscale(1); }
.vchip.off .coin-icon img { filter: grayscale(1) brightness(.8); }

/* Connect → config generator */
.cfg-gen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 4px 0 16px; }
.cfg-gen label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 1px; color: var(--text-secondary); text-transform: uppercase; }
.cfg-gen select, .cfg-gen input {
  background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14px;
}
.cfg-gen select:focus, .cfg-gen input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .15); }
.cfg-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.cfg-presets .muted { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.chip-btn {
  background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 6px; padding: 5px 11px; font-family: inherit; font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip-btn.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.cfg-out { border-top: 1px solid var(--border); padding-top: 16px; }
.cfg-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cfg-field { display: flex; align-items: center; gap: 12px; }
.cfg-field > span { flex: 0 0 84px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.cfg-field > code {
  flex: 1; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px; color: var(--accent); font-size: 14px; word-break: break-all;
}
.cfg-tip {
  margin-top: 16px; padding: 11px 14px; border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), .06); border-radius: 0 6px 6px 0;
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.cfg-tip b { color: var(--accent); }
@media (max-width: 560px) { .cfg-gen { grid-template-columns: 1fr; } }

/* Vault Nodes table: coin logo + name in the first cell */
.node-coin { display: inline-flex; align-items: center; gap: 8px; }
.node-coin .coin-icon { width: 22px; height: 22px; border-radius: 6px; }

/* Dwellers-Online network meta: peers + live ping + last signal.
   Stacks as rows that spread to fill the tile's vertical space. */
.net-meta { display: flex; flex-direction: column; justify-content: space-between;
  flex: 1 1 auto; gap: 8px; margin-top: 12px; font-size: 14px;
  color: var(--text-secondary); }
.net-meta > span { display: flex; align-items: center; }
.net-meta b { color: var(--accent); font-weight: 700; font-size: 17px; margin: 0 4px; }
.net-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 7px; background: var(--text-secondary); vertical-align: middle; flex: 0 0 auto; }
.net-dot.good { background: #4ade80; box-shadow: 0 0 6px #4ade8088; }
.net-dot.ok   { background: #facc15; box-shadow: 0 0 6px #facc1588; }
.net-dot.bad  { background: #f87171; box-shadow: 0 0 6px #f8717188; }

/* ── Pool cards ───────────────────────────────────────────────────────── */
.pool-card { cursor: pointer; }

/* Vault-101 gear watermark — only on the Pools page (.pools-grid). The source
   is a green wireframe on black, so mix-blend-mode: screen drops the black and
   leaves just the faint gear centered behind each card's content. */
.card-wm { display: none; }
.pools-grid .pool-card { overflow: hidden; }
.pools-grid .card-wm {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(/static/vaultdoor.png) center / auto 72% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;                       /* hidden until hover */
  transition: opacity .45s ease;
}
.pools-grid .pool-card:hover .card-wm { opacity: .12; }   /* fade in on mouseover */
.pools-grid .pool-card .head, .pools-grid .pool-card .rows { position: relative; z-index: 1; }
/* mono theme: desaturate the green gear so it fits greyscale */
.theme-mono .pools-grid .card-wm { filter: grayscale(1) brightness(1.2); }
.theme-mono .pools-grid .pool-card:hover .card-wm { opacity: .08; }
.pool-card:hover { background: var(--bg-card-hover); border-color: var(--accent); box-shadow: 0 0 22px rgba(var(--accent-rgb),.12); }
.pool-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pool-card .coin { display: flex; align-items: center; gap: 10px; }
.pool-card .coin .sym {
  width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
  overflow: hidden; flex: 0 0 auto;
}
.pool-card .coin .sym.sym-text {
  font-size: 13px; font-weight: 700; color: var(--bg-primary); background: var(--accent);
}
.pool-card .coin .sym img { width: 100%; height: 100%; object-fit: contain; }

/* Coin logo next to a page title (pool detail header) */
.tb-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.coin-icon { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.coin-icon img { width: 100%; height: 100%; object-fit: contain; }
.coin-icon.coin-icon-text { background: var(--accent); color: var(--bg-primary); font-weight: 700; font-size: 15px; }
.pool-card .coin .nm { font-size: 16px; letter-spacing: 1px; }
.pool-card .coin .nm small { display: block; font-size: 11px; color: var(--text-secondary); }
.pool-card .rows { display: flex; flex-direction: column; gap: 8px; }
.pool-card .row { display: flex; justify-content: space-between; font-size: 13px; }
.pool-card .row span:first-child { color: var(--text-secondary); }
.tag { font-size: 10px; letter-spacing: 1px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-secondary); }
.tag.prop { color: var(--accent); border-color: var(--accent); }
.tag.solo { color: var(--accent-secondary); border-color: var(--accent-secondary); }

/* ── Tables ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 10px 12px; color: var(--text-secondary);
  font-weight: 400; letter-spacing: 1px; font-size: 11px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--accent-rgb),.06); }
tbody tr:hover { background: var(--bg-card-hover); }
td.mono, .mono { font-family: 'JetBrains Mono', monospace; }
td.num, th.num { text-align: right; }

.badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; letter-spacing: 1px; }
.badge.confirmed { color: var(--success); background: rgba(0,255,65,.08); }
.badge.pending   { color: var(--warning); background: rgba(245,166,35,.08); }
.badge.orphaned, .badge.failed { color: var(--error); background: rgba(255,51,51,.08); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg-card); color: var(--accent); border: 1px solid var(--accent);
  padding: 10px 18px; border-radius: 6px; font-family: inherit; font-size: 13px; letter-spacing: 1px;
  transition: all .18s ease;
}
.btn:hover { background: var(--accent); color: var(--bg-primary); box-shadow: 0 0 18px var(--accent-glow); }
.btn.ghost { border-color: var(--border); color: var(--text-secondary); }
.btn.ghost:hover { color: var(--text-primary); background: var(--bg-card-hover); box-shadow: none; }

/* ── Misc ─────────────────────────────────────────────────────────────── */
.section-title { font-size: 14px; letter-spacing: 2px; color: var(--text-secondary); margin: 28px 0 14px; text-transform: uppercase; }
.muted { color: var(--text-secondary); }
.right { text-align: right; }
.spacer { flex: 1; }
.empty { padding: 40px; text-align: center; color: var(--text-secondary); }
.loading { padding: 40px; text-align: center; color: var(--accent); }
.loading::after { content:" ▮"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
.crumb { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px; margin-bottom: 6px; }
.crumb a { color: var(--text-secondary); }
.crumb a:hover { color: var(--accent); }

/* hashrate chart */
.chart-wrap { height: 220px; position: relative; }
/* Pip-Boy style filled meter bars (ported from FoureverUI, amber theme) */
.meter-row { margin: 14px 0; }
.meter-row:first-child { margin-top: 4px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 7px; }
.meter-head .lbl { color: var(--text-secondary); letter-spacing: 1px; }
.meter {
  width: 100%; height: 22px; background: rgba(0,0,0,.5);
  border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
  position: relative; box-shadow: inset 0 0 12px rgba(var(--accent-rgb), .12);
}
.meter::after { /* scanlines across the whole bar */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.18) 3px, transparent 4px);
}
.meter-fill {
  height: 100%; min-width: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.55) 0%, var(--accent) 50%, rgba(var(--accent-rgb),.55) 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 14px var(--accent-glow);
  transition: width 1s ease;
  animation: meterShimmer 4s linear infinite;
}
@keyframes meterShimmer { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }

/* Fallout S.P.E.C.I.A.L. stat rows */
.special-row { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 14px; padding: 7px 0; }
.special-k { text-align: center; }
.special-k .k { font-size: 26px; font-weight: 700; line-height: 1; }
.special-k .sub { font-size: 9px; opacity: .5; letter-spacing: 1px; margin-top: 2px; }
.special-name { font-size: 11px; opacity: .65; margin-bottom: 5px; letter-spacing: 2px; }
.special-score { font-size: 20px; font-weight: 700; text-align: right; }
.special-fill { background-image: none !important; animation: none !important; }

.live-bar { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.live-bar #wLiveTs, .live-bar .muted { font-size: 12px; }
.rng-group { display: flex; gap: 6px; }
.btn.rng { padding: 5px 12px; font-size: 11px; letter-spacing: 1px; }
.btn.ghost.rng.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.10); }

/* log tail (admin) */
.logtail { font-family: 'JetBrains Mono', monospace; font-size: 12px; max-height: 360px; overflow-y: auto; }
.logtail .line { padding: 2px 6px; white-space: pre-wrap; word-break: break-word; }
.logtail .ts { color: var(--text-secondary); }
.logtail .debug { color: var(--text-secondary); }
.logtail .info  { color: var(--accent); }
.logtail .warn  { color: var(--warning); }
.logtail .error { color: var(--error); }