/*
 * Rabid Pool 3D Theme — ChatGPT design package
 * Visual target: futuristic mining control console / machined black-metal instrumentation.
 * Integration contract: loaded LAST, after page inline CSS and rabid-pool-charts.css.
 * No JS framework. No decorative image assets. Presentation only.
 */

:root{
  /* Base material palette — deliberately neutral; per-coin --rc-accent remains page-owned. */
  --bg:#05080c;
  --panel:#0c141d;
  --panel-2:#111d29;
  --line:#1b3040;
  --line-2:#2d485c;
  --ink:#f3f8fc;
  --ink-2:#c2d2df;
  --ink-3:#7f97aa;

  /* Theme-only materials. */
  --rp-chassis:#05080c;
  --rp-chassis-2:#081019;
  --rp-metal-0:#09111a;
  --rp-metal-1:#0e1924;
  --rp-metal-2:#132231;
  --rp-metal-3:#182b3a;
  --rp-screen:#03080d;
  --rp-screen-2:#071019;
  --rp-edge-hi:rgba(188,225,246,.22);
  --rp-edge-mid:rgba(122,174,205,.13);
  --rp-edge-low:rgba(0,0,0,.88);
  --rp-contact:rgba(0,0,0,.62);
  --rp-grid:rgba(73,119,146,.12);
  --rp-grid-strong:rgba(73,119,146,.18);
  --rp-notch:10px;
  --rp-notch-sm:7px;
  --rp-rail:rgba(126,184,215,.20);

  /* Replace the conservative Phase-8 depth tokens with a visibly stronger hardware hierarchy. */
  --rc-plate-bg:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 22%,rgba(0,0,0,.18) 100%),
    linear-gradient(145deg,#132230 0%,#0c151f 48%,#081019 100%);
  --rc-plate-border:rgba(113,166,197,.18);
  --rc-plate-shadow:
    inset 0 1px 0 rgba(214,239,252,.11),
    inset 0 -1px 0 rgba(0,0,0,.85),
    inset 8px 0 22px rgba(0,0,0,.15),
    0 28px 62px rgba(0,0,0,.44),
    0 6px 16px rgba(0,0,0,.52);
  --rc-plate-radius:6px;

  --rc-module-bg:
    linear-gradient(145deg,rgba(222,243,255,.105) 0%,rgba(116,168,198,.032) 23%,rgba(0,0,0,.24) 100%),
    linear-gradient(180deg,#132230 0%,#0c1620 64%,#081019 100%);
  --rc-module-border-top:rgba(205,235,251,.24);
  --rc-module-border-side:rgba(84,132,160,.18);
  --rc-module-border-bottom:rgba(0,0,0,.90);
  --rc-module-shadow:
    inset 1px 1px 0 rgba(220,241,252,.095),
    inset -1px -1px 0 rgba(0,0,0,.65),
    inset 0 -16px 24px rgba(0,0,0,.17),
    0 12px 0 -8px rgba(0,0,0,.65),
    0 18px 34px rgba(0,0,0,.48),
    0 4px 10px rgba(0,0,0,.66);
  --rc-module-shadow-hover:
    inset 1px 1px 0 rgba(229,246,255,.13),
    inset -1px -1px 0 rgba(0,0,0,.62),
    inset 0 -14px 22px rgba(0,0,0,.15),
    0 14px 0 -8px rgba(0,0,0,.62),
    0 24px 42px rgba(0,0,0,.55),
    0 5px 12px rgba(0,0,0,.72);
  --rc-module-shadow-pressed:
    inset 0 7px 15px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(0,0,0,.92),
    0 2px 4px rgba(0,0,0,.46);
  --rc-module-radius:6px;

  --rc-recess-bg:
    linear-gradient(180deg,rgba(14,27,39,.70),rgba(2,7,11,.98)),
    var(--rp-screen);
  --rc-recess-shadow:
    inset 0 8px 18px rgba(0,0,0,.82),
    inset 0 -1px 0 rgba(164,209,232,.055),
    inset 0 0 0 1px rgba(0,0,0,.92),
    0 1px 0 rgba(134,190,219,.06);
  --rc-recess-radius:4px;

  --rc-elev-1:var(--rc-module-shadow);
  --rc-elev-2:var(--rc-plate-shadow);
  --rc-top-highlight:rgba(204,235,250,.17);
  --rc-bottom-shade:rgba(0,0,0,.92);
  --rc-pressed-bg:#0a121a;
  --rc-pressed-shadow:inset 0 5px 10px rgba(0,0,0,.75),inset 0 0 0 1px rgba(127,181,210,.12);
  --rc-chart-bg:var(--rp-screen);
  --rc-chart-grid:#193042;
  --rc-chart-axis:#8198aa;
  --rc-chart-crosshair:#d4e8f4;

  --r:8px;
  --r-sm:6px;
}

html,body{ background:var(--rp-chassis); }
body{
  background:
    radial-gradient(1000px 520px at 50% -180px,rgba(var(--rc-accent-rgb),.055),transparent 64%),
    linear-gradient(180deg,#05080c 0%,#060b10 55%,#04070a 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.24;
  background-image:
    linear-gradient(rgba(101,155,184,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(101,155,184,.022) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 72%);
}

/* ---------------------------------------------------------------------
   Shared hardware language
   --------------------------------------------------------------------- */
#pane-stats,
#pane-stats *{ min-width:0; }

#pane-stats .rc-plate{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:6px !important;
  border-color:var(--rc-plate-border) !important;
  background:var(--rc-plate-bg) !important;
  box-shadow:var(--rc-plate-shadow) !important;
}
#pane-stats .rc-plate::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:5;
  clip-path:polygon(
    var(--rp-notch) 0,
    calc(100% - var(--rp-notch)) 0,
    100% var(--rp-notch),
    100% calc(100% - var(--rp-notch)),
    calc(100% - var(--rp-notch)) 100%,
    var(--rp-notch) 100%,
    0 calc(100% - var(--rp-notch)),
    0 var(--rp-notch)
  );
  border:1px solid rgba(128,185,214,.21);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.72);
}
#pane-stats .rc-plate::after{
  content:"";
  position:absolute;
  top:-1px;
  left:22px;
  width:160px;
  height:2px;
  pointer-events:none;
  z-index:6;
  background:linear-gradient(90deg,transparent,rgba(var(--rc-accent-rgb),.70),rgba(200,235,252,.36),transparent);
  box-shadow:0 0 8px rgba(var(--rc-accent-rgb),.14);
}

/* Technical section headers: compact rail + notch, not marketing banners. */
#pane-stats .sec-h{
  position:relative;
  align-items:center;
  padding:0 0 7px 15px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(77,124,151,.17);
}
#pane-stats .sec-h::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:6px;
  height:14px;
  background:var(--rc-accent);
  clip-path:polygon(0 0,100% 0,100% 70%,55% 100%,0 100%);
  box-shadow:0 0 7px rgba(var(--rc-accent-rgb),.25);
}
#pane-stats .sec-h::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:90px;
  height:1px;
  background:linear-gradient(90deg,var(--rc-accent),transparent);
}
#pane-stats .sec-h h2{
  font-size:13px;
  letter-spacing:.075em;
  color:#d7e7f1;
  text-shadow:0 1px 0 #000;
}
#pane-stats .sec-h .note{ color:#92aabd; opacity:.95; }

/* ---------------------------------------------------------------------
   Lookup + identity row
   --------------------------------------------------------------------- */
#pane-stats > .rc-plate > .panel,
#pane-stats .miner-head{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.09)),
    #0b141e !important;
  border:1px solid rgba(100,153,183,.20) !important;
  border-radius:6px !important;
  box-shadow:
    inset 0 1px 0 rgba(209,237,251,.07),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 8px 20px rgba(0,0,0,.34) !important;
}
#pane-stats .lookup input{
  background:#03080d;
  border:1px solid #28475b;
  border-radius:4px;
  box-shadow:inset 0 5px 12px rgba(0,0,0,.72),inset 0 0 0 1px rgba(0,0,0,.75);
  color:#f5fbff;
}
#pane-stats .lookup input:focus{
  border-color:rgba(var(--rc-accent-rgb),.72);
  box-shadow:inset 0 5px 12px rgba(0,0,0,.72),0 0 0 1px rgba(var(--rc-accent-rgb),.20);
}
#pane-stats .btn.primary{
  position:relative;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(0,0,0,.16)),
    var(--rc-accent);
  border-color:rgba(var(--rc-accent-rgb),.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.28),0 5px 12px rgba(0,0,0,.38);
  color:#0c1116; /* XBT color-system correction: dark text reads reliably against both coins own bright accent (bronze or teal) -- white had marginal contrast on both */
}
#pane-stats .btn.primary:active{ transform:translateY(1px); box-shadow:inset 0 4px 8px rgba(0,0,0,.35); }
#pane-stats .miner-head-id{ max-width:100%; }
#pane-stats .miner-head-addr{ min-width:0; }

/* ---------------------------------------------------------------------
   Six primary instrument modules
   --------------------------------------------------------------------- */
#pane-stats .mstats-primary{ gap:12px; }
/* Stage 2 correction: the clickable primary cards are real <button> elements
   (Phase 8G), and a <button> does not inherit the page's text color from its
   UA stylesheet the way a <div>/<span> does -- every value inside one that
   didn't already set its own color (e.g. .accent/.gold/.cyan) rendered in
   the browser's default black ButtonText instead of --ink. Confirmed live:
   #mRejectRate and #mWorkerCount were literal rgb(0,0,0) on a dark card. */
#pane-stats button.stat.clickable{ color:var(--ink); }
#pane-stats .mstats-primary .stat{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:6px !important;
  border-top-color:rgba(216,240,252,.20) !important;
  border-right-color:rgba(81,132,159,.18) !important;
  border-bottom-color:#020508 !important;
  border-left-color:rgba(81,132,159,.18) !important;
  background:var(--rc-module-bg) !important;
  box-shadow:var(--rc-module-shadow) !important;
  padding:16px 15px 14px;
}
#pane-stats .mstats-primary .stat::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  z-index:4;
  clip-path:polygon(
    var(--rp-notch-sm) 0,
    calc(100% - var(--rp-notch-sm)) 0,
    100% var(--rp-notch-sm),
    100% calc(100% - var(--rp-notch-sm)),
    calc(100% - var(--rp-notch-sm)) 100%,
    var(--rp-notch-sm) 100%,
    0 calc(100% - var(--rp-notch-sm)),
    0 var(--rp-notch-sm)
  );
  border:1px solid rgba(120,177,207,.16);
}
#pane-stats .mstats-primary .stat::after{
  content:"";
  position:absolute;
  left:11px;
  top:0;
  width:48px;
  height:2px;
  pointer-events:none;
  z-index:5;
  background:linear-gradient(90deg,var(--rc-accent),rgba(var(--rc-accent-rgb),.12),transparent);
  opacity:.78;
}
#pane-stats .mstats-primary .stat.clickable:hover{
  transform:translateY(-2px) !important;
  box-shadow:var(--rc-module-shadow-hover) !important;
}
#pane-stats .mstats-primary .stat.clickable:active{
  transform:translateY(0) !important;
  box-shadow:var(--rc-module-shadow-pressed) !important;
}
#pane-stats .stat .k{
  color:#9eb5c6;
  letter-spacing:.15em;
}
#pane-stats .stat .v{
  text-shadow:0 1px 0 #000,0 0 12px rgba(var(--rc-accent-rgb),.035);
}
#pane-stats .stat .s{ color:#afc1ce; }

/* Mini display windows: visibly inset instrument screens. */
#pane-stats .spark{
  height:64px;
  padding:7px 8px;
  border-radius:4px;
  border:1px solid rgba(49,83,104,.34);
  background:
    linear-gradient(rgba(69,111,136,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(69,111,136,.055) 1px,transparent 1px),
    linear-gradient(180deg,#061019,#02070b);
  background-size:100% 16px,24px 100%,100% 100%;
  box-shadow:
    inset 0 7px 16px rgba(0,0,0,.82),
    inset 0 -1px 0 rgba(152,205,230,.055),
    inset 0 0 0 1px rgba(0,0,0,.80),
    0 1px 0 rgba(139,193,219,.04);
}
#pane-stats .stat.stat-graph{ min-height:178px; }
#pane-stats .rc-spark-line{ filter:drop-shadow(0 0 2px rgba(var(--rc-accent-rgb),.20)); }
#pane-stats .rc-spark-grid{ opacity:.75; }

/* ---------------------------------------------------------------------
   BCH PPLNS/SOLO: physical recessed mode selector
   --------------------------------------------------------------------- */
#pane-stats .mode-seg-wrap{ gap:10px; }
#pane-stats .seg.mode-seg{
  position:relative;
  padding:5px;
  gap:4px;
  border-radius:5px;
  border:1px solid #29465a;
  background:linear-gradient(180deg,#050a0f,#0a1118);
  box-shadow:inset 0 6px 12px rgba(0,0,0,.78),inset 0 -1px 0 rgba(147,199,225,.06),0 1px 0 rgba(255,255,255,.02);
}
#pane-stats .seg.mode-seg::before{
  content:"MODE";
  position:absolute;
  top:-15px;
  left:8px;
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.16em;
  color:#607e91;
}
#pane-stats .seg.mode-seg button{
  position:relative;
  border-radius:3px;
  background:linear-gradient(180deg,#172634,#0d1721);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 5px rgba(0,0,0,.44);
  border:1px solid rgba(105,159,188,.10);
  min-height:34px;
}
#pane-stats .seg.mode-seg button[aria-pressed=true]{
  background:linear-gradient(180deg,#081018,#0c151c) !important;
  box-shadow:inset 0 5px 9px rgba(0,0,0,.78),inset 0 0 0 1px currentColor !important;
  transform:translateY(1px);
}
#pane-stats .seg.mode-seg button[aria-pressed=true]::after{
  left:8px !important;
  right:8px !important;
  bottom:2px !important;
  height:2px !important;
  border-radius:2px;
  box-shadow:0 0 7px currentColor;
}

/* ---------------------------------------------------------------------
   Main history chart: outer housing -> control rail -> recessed display -> telemetry rail
   --------------------------------------------------------------------- */
#pane-stats .rc-chart-panel{
  position:relative;
  isolation:isolate;
  overflow:visible;
  padding:18px 18px 16px;
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.010) 22%,rgba(0,0,0,.24) 100%),
    linear-gradient(145deg,#12212e,#0a121a 62%,#070c12);
  border:1px solid rgba(102,158,187,.23);
  box-shadow:
    inset 0 1px 0 rgba(218,240,251,.11),
    inset 0 -1px 0 rgba(0,0,0,.90),
    0 14px 0 -10px rgba(0,0,0,.65),
    0 24px 48px rgba(0,0,0,.52),
    0 5px 12px rgba(0,0,0,.66);
}
#pane-stats .rc-chart-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:6;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  border:1px solid rgba(123,181,211,.22);
}
#pane-stats .rc-chart-panel::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:-1px;
  height:2px;
  pointer-events:none;
  z-index:7;
  background:linear-gradient(90deg,transparent 0%,rgba(var(--rc-accent-rgb),.28) 14%,rgba(193,229,246,.22) 50%,rgba(var(--rc-accent-rgb),.28) 86%,transparent 100%);
}
#pane-stats .rc-chart-panel-head{
  padding:1px 2px 2px;
}
#pane-stats .rc-chart-panel-title{
  color:#d9e9f2;
  letter-spacing:.10em;
}
#pane-stats .rc-chart-panel-controls .seg{
  border-radius:4px;
  padding:4px;
  background:#050a0f;
  border:1px solid #29465a;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.75),inset 0 -1px 0 rgba(148,199,224,.05);
}
#pane-stats .rc-chart-panel-controls .seg button{
  border-radius:3px;
  background:linear-gradient(180deg,#172635,#0d1721);
  border:1px solid rgba(97,151,179,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 2px 4px rgba(0,0,0,.42);
}
#pane-stats .rc-chart-panel-controls .seg button[aria-pressed=true]{
  color:#f3f8fc;
  background:linear-gradient(180deg,#0a1219,#0b151d);
  border-color:rgba(var(--rc-accent-rgb),.42);
  box-shadow:inset 0 5px 9px rgba(0,0,0,.78),inset 0 -1px 0 rgba(var(--rc-accent-rgb),.16),0 0 7px rgba(var(--rc-accent-rgb),.08);
}
#pane-stats .rc-chart-live-badge{
  border-radius:3px;
  background:rgba(32,217,132,.08);
  border-color:rgba(32,217,132,.33);
  box-shadow:inset 0 0 8px rgba(32,217,132,.05),0 0 8px rgba(32,217,132,.06);
}
#pane-stats .rc-chart-close{
  border-radius:3px;
  background:linear-gradient(180deg,#152431,#0b141d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.35);
}
#pane-stats .rc-chart-host{
  min-height:250px;
  border:1px solid #183247;
  border-radius:4px;
  background:
    linear-gradient(rgba(50,90,115,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(50,90,115,.07) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 15%,rgba(var(--rc-accent-rgb),.022),transparent 60%),
    linear-gradient(180deg,#061019,#02070b);
  background-size:100% 42px,68px 100%,100% 100%,100% 100%;
  box-shadow:
    inset 0 10px 24px rgba(0,0,0,.86),
    inset 0 -1px 0 rgba(143,197,223,.06),
    inset 0 0 0 1px rgba(0,0,0,.90),
    0 1px 0 rgba(120,175,201,.04);
}
#pane-stats .rc-chart-host .u-wrap{ padding:12px 8px 8px; }
#pane-stats .rc-chart-host .u-cursor-x{
  border-right-width:1px !important;
  box-shadow:1px 0 5px rgba(var(--rc-accent-rgb),.52),0 0 1px rgba(255,255,255,.55);
}
#pane-stats .rc-chart-host .u-cursor-pt{
  border:1px solid #e8f6ff !important;
  box-shadow:0 0 0 3px rgba(var(--rc-accent-rgb),.16),0 0 9px rgba(var(--rc-accent-rgb),.45);
}
#pane-stats .rc-chart-summary{
  border:1px solid rgba(50,84,106,.32);
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.13)),
    #050a0f;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.72),inset 0 -1px 0 rgba(139,192,218,.05);
}
#pane-stats .rc-chart-summary > div{ border-color:#173044; }
#pane-stats .rc-chart-summary dt{ color:#708fa3; letter-spacing:.09em; }
#pane-stats .rc-chart-summary dd{ color:#edf7fb; }

/* Inspector looks like a small diagnostic HUD, not a generic web tooltip. */
#pane-stats .rc-inspector{
  border-radius:3px;
  border:1px solid #35566b;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.10)),
    #050b10;
  box-shadow:inset 0 1px 0 rgba(214,240,252,.075),0 12px 26px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.55);
  padding:9px 11px 10px;
}
#pane-stats .rc-inspector::after{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--rc-accent);
  box-shadow:0 0 5px rgba(var(--rc-accent-rgb),.30);
}
#pane-stats .rc-insp-when{ color:#90a9ba; border-color:#193346; }
#pane-stats .rc-insp-k{ color:#809bad; }

/* ---------------------------------------------------------------------
   Dense instrumentation grids: framed hardware panel, not card soup
   --------------------------------------------------------------------- */
#pane-stats .dgrid{
  position:relative;
  border-radius:4px;
  border:1px solid rgba(78,127,154,.24);
  background:#193143;
  gap:1px;
  box-shadow:
    inset 0 1px 0 rgba(188,223,240,.055),
    inset 0 -1px 0 rgba(0,0,0,.86),
    0 10px 22px rgba(0,0,0,.34);
}
#pane-stats .dgrid>.dg{
  position:relative;
  background:
    linear-gradient(150deg,rgba(255,255,255,.034),rgba(0,0,0,.11)),
    #0b141d;
  padding:14px 16px;
}
#pane-stats .dgrid>.dg::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:24px;
  height:1px;
  background:rgba(var(--rc-accent-rgb),.34);
}
#pane-stats .dg .k{ color:#89a5b7; }
#pane-stats .dg .s{ color:#afc2ce; }
#pane-stats .panel.panel-tight{
  border-radius:4px !important;
  border-color:rgba(83,135,163,.23) !important;
  background:linear-gradient(160deg,#101c27,#091119) !important;
}

/* Current Round: make the first cell read as an active target instrument without changing IDs/markup. */
#pane-stats .dg:has(#crHeight){
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at calc(100% - 34px) 50%,rgba(var(--rc-accent-rgb),.11) 0 10px,transparent 11px 17px,rgba(var(--rc-accent-rgb),.14) 18px 19px,transparent 20px 27px,rgba(var(--rc-accent-rgb),.08) 28px 29px,transparent 30px),
    linear-gradient(150deg,rgba(255,255,255,.038),rgba(0,0,0,.12)),
    #0b141d;
}
#pane-stats #crHeight{
  color:#f1f8fb;
  font-size:21px;
  text-shadow:0 0 10px rgba(var(--rc-accent-rgb),.14);
}

/* ---------------------------------------------------------------------
   Recent Rabid Pool blocks: connected machined modules on a rail
   --------------------------------------------------------------------- */
#pane-stats .rc-block-rail{
  position:relative;
  gap:12px;
  padding:8px 4px 16px;
  max-width:100%;
  overscroll-behavior-x:contain;
}
#pane-stats .rc-block-rail::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(var(--rc-accent-rgb),.25),var(--rp-rail),rgba(72,112,135,.12));
  box-shadow:0 1px 0 rgba(0,0,0,.65);
  pointer-events:none;
}
#pane-stats .rc-block-card{
  position:relative;
  width:166px;
  min-height:132px;
  z-index:1;
  border-radius:5px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(0,0,0,.20)),
    linear-gradient(180deg,#132230,#09121b);
  border-top-color:rgba(211,238,251,.20);
  border-right-color:rgba(87,138,166,.18);
  border-bottom-color:#020406;
  border-left-color:rgba(87,138,166,.18);
  box-shadow:
    inset 1px 1px 0 rgba(222,241,251,.08),
    inset -1px -1px 0 rgba(0,0,0,.62),
    0 8px 0 -5px rgba(0,0,0,.70),
    0 14px 22px rgba(0,0,0,.48);
  padding:13px 14px;
}
#pane-stats .rc-block-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  border:1px solid rgba(113,169,198,.14);
}
#pane-stats .rc-block-card + .rc-block-card::before{
  left:-13px;
  width:13px;
  height:2px;
  background:#315064;
  box-shadow:0 1px 0 #000;
}
#pane-stats .rc-block-live{
  border-color:rgba(var(--rc-accent-rgb),.62);
  background:
    radial-gradient(circle at 85% 16%,rgba(var(--rc-accent-rgb),.13),transparent 26%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(0,0,0,.18)),
    linear-gradient(180deg,#132230,#09121b);
  box-shadow:
    inset 1px 1px 0 rgba(222,241,251,.08),
    inset 0 0 18px rgba(var(--rc-accent-rgb),.035),
    0 0 0 1px rgba(var(--rc-accent-rgb),.25),
    0 12px 24px rgba(0,0,0,.52),
    0 0 12px rgba(var(--rc-accent-rgb),.11);
}
#pane-stats .rc-block-live .rc-block-height{ font-size:19px; }
#pane-stats .rc-block-tag{ border-radius:3px; }

/* ---------------------------------------------------------------------
   Worker table: recessed rack bay, not a stack of cards
   --------------------------------------------------------------------- */
#pane-stats .scroll{
  max-width:100%;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:5px;
  border:1px solid rgba(80,132,159,.22);
  background:#060c12;
  box-shadow:inset 0 8px 18px rgba(0,0,0,.58),0 8px 20px rgba(0,0,0,.28);
  contain:inline-size;
}
#pane-stats .scroll table{ min-width:700px; }
#pane-stats .scroll thead th{
  background:linear-gradient(180deg,#172735,#0f1c27);
  color:#8ca9bb;
  border-bottom-color:#28475b;
  box-shadow:inset 0 1px 0 rgba(212,238,250,.055);
}
#pane-stats .scroll tbody td{
  background:rgba(10,18,26,.74);
  border-bottom-color:#162c3b;
}
#pane-stats .scroll tbody tr:hover td{
  background:linear-gradient(90deg,rgba(var(--rc-accent-rgb),.055),rgba(16,31,42,.92));
}
#pane-stats tr.worker-row:focus-visible{
  outline:1px solid rgba(var(--rc-accent-rgb),.85);
  outline-offset:-2px;
}
#pane-stats .worker-spark{
  border-radius:3px;
  background:#02070b;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.7);
  padding:2px;
}

/* ---------------------------------------------------------------------
   Callouts / status surfaces
   --------------------------------------------------------------------- */
#pane-stats .callout{
  border-radius:0 4px 4px 0;
  border-left-width:2px;
  background:linear-gradient(90deg,rgba(215,169,40,.08),rgba(215,169,40,.025));
}
#pane-stats .tag,
#pane-stats .rc-block-tag{ text-transform:uppercase; letter-spacing:.08em; }

/* ---------------------------------------------------------------------
   Responsive fixes, including the known BCH address and worker overflow.
   --------------------------------------------------------------------- */
@media (max-width:900px){
  #pane-stats .rc-plate{ padding:16px !important; }
  #pane-stats .rc-chart-panel{ padding:15px 14px; }
}

@media (max-width:640px){
  #pane-stats .lookup{ width:100%; }
  #pane-stats .lookup input{ min-width:0 !important; width:100%; flex:1 1 100%; }
  #pane-stats .lookup .btn{ width:max-content; }
  #pane-stats .miner-head{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  #pane-stats .miner-head-id{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  #pane-stats .miner-head-addr{
    display:block;
    flex:1 1 auto;
    width:0;
    max-width:100% !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #pane-stats .miner-head-meta{ width:100%; }
  #pane-stats .rc-chart-host{ min-height:230px; }
  #pane-stats .rc-chart-panel-controls{ width:100%; justify-content:flex-start; }
  #pane-stats .rc-chart-panel-controls .seg{ max-width:100%; overflow-x:auto; }
  #pane-stats .rc-block-card{ width:150px; min-height:124px; }
}

@media (max-width:440px){
  #pane-stats .rc-plate{ padding:12px !important; }
  #pane-stats .sec-h{ padding-left:13px; }
  #pane-stats .mstats-primary{ grid-template-columns:1fr !important; }
  #pane-stats .mstats-primary .stat{ min-height:136px; }
  #pane-stats .mstats-primary .stat.stat-graph{ min-height:176px; }
  #pane-stats .spark{ height:66px; }
  #pane-stats .mode-seg-wrap{ width:100%; }
  #pane-stats .seg.mode-seg{ width:100%; }
  #pane-stats .seg.mode-seg button{ flex:1 1 50%; min-width:0; padding-left:8px; padding-right:8px; }
  #pane-stats .rc-chart-panel{ padding:13px 11px; }
  #pane-stats .rc-chart-host{ min-height:220px; }
  #pane-stats .rc-chart-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #pane-stats .scroll{ width:100%; max-width:100%; overflow-x:auto; }
  #pane-stats .scroll table{ min-width:650px; width:650px; }
  #pane-stats .worker-name-wrap{ max-width:180px !important; }
}

/* Accessibility / reduced-motion parity. */
@media (prefers-reduced-motion:reduce){
  #pane-stats .mstats-primary .stat,
  #pane-stats .rc-chart-panel,
  #pane-stats .seg.mode-seg button{ transition:none !important; transform:none !important; }
}

/* =========================================================================
   Stage 3 -- Pool Overview: exact mirrors of the same #pane-stats rules
   above, scoped to #pane-pool instead. Generated (not hand-retyped) from
   the approved My Stats theme so Pool Overview uses byte-identical
   chassis/module/chart/block-rail/scroll treatment -- no second theme,
   no visual drift. See gen_pool_overview_css.py.
   ========================================================================= */
#pane-pool .rc-plate{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:6px !important;
  border-color:var(--rc-plate-border) !important;
  background:var(--rc-plate-bg) !important;
  box-shadow:var(--rc-plate-shadow) !important;
}
#pane-pool .rc-plate::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:5;
  clip-path:polygon(
    var(--rp-notch) 0,
    calc(100% - var(--rp-notch)) 0,
    100% var(--rp-notch),
    100% calc(100% - var(--rp-notch)),
    calc(100% - var(--rp-notch)) 100%,
    var(--rp-notch) 100%,
    0 calc(100% - var(--rp-notch)),
    0 var(--rp-notch)
  );
  border:1px solid rgba(128,185,214,.21);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.72);
}
#pane-pool .rc-plate::after{
  content:"";
  position:absolute;
  top:-1px;
  left:22px;
  width:160px;
  height:2px;
  pointer-events:none;
  z-index:6;
  background:linear-gradient(90deg,transparent,rgba(var(--rc-accent-rgb),.70),rgba(200,235,252,.36),transparent);
  box-shadow:0 0 8px rgba(var(--rc-accent-rgb),.14);
}
#pane-pool .sec-h{
  position:relative;
  align-items:center;
  padding:0 0 7px 15px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(77,124,151,.17);
}
#pane-pool .sec-h::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:6px;
  height:14px;
  background:var(--rc-accent);
  clip-path:polygon(0 0,100% 0,100% 70%,55% 100%,0 100%);
  box-shadow:0 0 7px rgba(var(--rc-accent-rgb),.25);
}
#pane-pool .sec-h::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:90px;
  height:1px;
  background:linear-gradient(90deg,var(--rc-accent),transparent);
}
#pane-pool .sec-h h2{
  font-size:13px;
  letter-spacing:.075em;
  color:#d7e7f1;
  text-shadow:0 1px 0 #000;
}
#pane-pool .sec-h .note{ color:#92aabd; opacity:.95; }
#pane-pool .spark{
  height:64px;
  padding:7px 8px;
  border-radius:4px;
  border:1px solid rgba(49,83,104,.34);
  background:
    linear-gradient(rgba(69,111,136,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(69,111,136,.055) 1px,transparent 1px),
    linear-gradient(180deg,#061019,#02070b);
  background-size:100% 16px,24px 100%,100% 100%;
  box-shadow:
    inset 0 7px 16px rgba(0,0,0,.82),
    inset 0 -1px 0 rgba(152,205,230,.055),
    inset 0 0 0 1px rgba(0,0,0,.80),
    0 1px 0 rgba(139,193,219,.04);
}
#pane-pool .rc-chart-panel{
  position:relative;
  isolation:isolate;
  overflow:visible;
  padding:18px 18px 16px;
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.010) 22%,rgba(0,0,0,.24) 100%),
    linear-gradient(145deg,#12212e,#0a121a 62%,#070c12);
  border:1px solid rgba(102,158,187,.23);
  box-shadow:
    inset 0 1px 0 rgba(218,240,251,.11),
    inset 0 -1px 0 rgba(0,0,0,.90),
    0 14px 0 -10px rgba(0,0,0,.65),
    0 24px 48px rgba(0,0,0,.52),
    0 5px 12px rgba(0,0,0,.66);
}
#pane-pool .rc-chart-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:6;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  border:1px solid rgba(123,181,211,.22);
}
#pane-pool .rc-chart-panel::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:-1px;
  height:2px;
  pointer-events:none;
  z-index:7;
  background:linear-gradient(90deg,transparent 0%,rgba(var(--rc-accent-rgb),.28) 14%,rgba(193,229,246,.22) 50%,rgba(var(--rc-accent-rgb),.28) 86%,transparent 100%);
}
#pane-pool .rc-chart-panel-head{
  padding:1px 2px 2px;
}
#pane-pool .rc-chart-panel-title{
  color:#d9e9f2;
  letter-spacing:.10em;
}
#pane-pool .rc-chart-panel-controls .seg{
  border-radius:4px;
  padding:4px;
  background:#050a0f;
  border:1px solid #29465a;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.75),inset 0 -1px 0 rgba(148,199,224,.05);
}
#pane-pool .rc-chart-panel-controls .seg button{
  border-radius:3px;
  background:linear-gradient(180deg,#172635,#0d1721);
  border:1px solid rgba(97,151,179,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 2px 4px rgba(0,0,0,.42);
}
#pane-pool .rc-chart-panel-controls .seg button[aria-pressed=true]{
  color:#f3f8fc;
  background:linear-gradient(180deg,#0a1219,#0b151d);
  border-color:rgba(var(--rc-accent-rgb),.42);
  box-shadow:inset 0 5px 9px rgba(0,0,0,.78),inset 0 -1px 0 rgba(var(--rc-accent-rgb),.16),0 0 7px rgba(var(--rc-accent-rgb),.08);
}
#pane-pool .rc-chart-live-badge{
  border-radius:3px;
  background:rgba(32,217,132,.08);
  border-color:rgba(32,217,132,.33);
  box-shadow:inset 0 0 8px rgba(32,217,132,.05),0 0 8px rgba(32,217,132,.06);
}
#pane-pool .rc-chart-close{
  border-radius:3px;
  background:linear-gradient(180deg,#152431,#0b141d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.35);
}
#pane-pool .rc-chart-host{
  min-height:250px;
  border:1px solid #183247;
  border-radius:4px;
  background:
    linear-gradient(rgba(50,90,115,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(50,90,115,.07) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 15%,rgba(var(--rc-accent-rgb),.022),transparent 60%),
    linear-gradient(180deg,#061019,#02070b);
  background-size:100% 42px,68px 100%,100% 100%,100% 100%;
  box-shadow:
    inset 0 10px 24px rgba(0,0,0,.86),
    inset 0 -1px 0 rgba(143,197,223,.06),
    inset 0 0 0 1px rgba(0,0,0,.90),
    0 1px 0 rgba(120,175,201,.04);
}
#pane-pool .rc-chart-host .u-wrap{ padding:12px 8px 8px; }
#pane-pool .rc-chart-host .u-cursor-x{
  border-right-width:1px !important;
  box-shadow:1px 0 5px rgba(var(--rc-accent-rgb),.52),0 0 1px rgba(255,255,255,.55);
}
#pane-pool .rc-chart-host .u-cursor-pt{
  border:1px solid #e8f6ff !important;
  box-shadow:0 0 0 3px rgba(var(--rc-accent-rgb),.16),0 0 9px rgba(var(--rc-accent-rgb),.45);
}
#pane-pool .rc-chart-summary{
  border:1px solid rgba(50,84,106,.32);
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.13)),
    #050a0f;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.72),inset 0 -1px 0 rgba(139,192,218,.05);
}
#pane-pool .rc-chart-summary > div{ border-color:#173044; }
#pane-pool .rc-chart-summary dt{ color:#708fa3; letter-spacing:.09em; }
#pane-pool .rc-chart-summary dd{ color:#edf7fb; }
#pane-pool .rc-inspector{
  border-radius:3px;
  border:1px solid #35566b;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.10)),
    #050b10;
  box-shadow:inset 0 1px 0 rgba(214,240,252,.075),0 12px 26px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.55);
  padding:9px 11px 10px;
}
#pane-pool .rc-inspector::after{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--rc-accent);
  box-shadow:0 0 5px rgba(var(--rc-accent-rgb),.30);
}
#pane-pool .rc-insp-when{ color:#90a9ba; border-color:#193346; }
#pane-pool .rc-insp-k{ color:#809bad; }
#pane-pool .dgrid{
  position:relative;
  border-radius:4px;
  border:1px solid rgba(78,127,154,.24);
  background:#193143;
  gap:1px;
  box-shadow:
    inset 0 1px 0 rgba(188,223,240,.055),
    inset 0 -1px 0 rgba(0,0,0,.86),
    0 10px 22px rgba(0,0,0,.34);
}
#pane-pool .dgrid>.dg{
  position:relative;
  background:
    linear-gradient(150deg,rgba(255,255,255,.034),rgba(0,0,0,.11)),
    #0b141d;
  padding:14px 16px;
}
#pane-pool .dgrid>.dg::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:24px;
  height:1px;
  background:rgba(var(--rc-accent-rgb),.34);
}
#pane-pool .rc-block-rail{
  position:relative;
  gap:12px;
  padding:8px 4px 16px;
  max-width:100%;
  overscroll-behavior-x:contain;
}
#pane-pool .rc-block-rail::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(var(--rc-accent-rgb),.25),var(--rp-rail),rgba(72,112,135,.12));
  box-shadow:0 1px 0 rgba(0,0,0,.65);
  pointer-events:none;
}
#pane-pool .rc-block-card{
  position:relative;
  width:166px;
  min-height:132px;
  z-index:1;
  border-radius:5px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(0,0,0,.20)),
    linear-gradient(180deg,#132230,#09121b);
  border-top-color:rgba(211,238,251,.20);
  border-right-color:rgba(87,138,166,.18);
  border-bottom-color:#020406;
  border-left-color:rgba(87,138,166,.18);
  box-shadow:
    inset 1px 1px 0 rgba(222,241,251,.08),
    inset -1px -1px 0 rgba(0,0,0,.62),
    0 8px 0 -5px rgba(0,0,0,.70),
    0 14px 22px rgba(0,0,0,.48);
  padding:13px 14px;
}
#pane-pool .rc-block-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  border:1px solid rgba(113,169,198,.14);
}
#pane-pool .rc-block-live{
  border-color:rgba(var(--rc-accent-rgb),.62);
  background:
    radial-gradient(circle at 85% 16%,rgba(var(--rc-accent-rgb),.13),transparent 26%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(0,0,0,.18)),
    linear-gradient(180deg,#132230,#09121b);
  box-shadow:
    inset 1px 1px 0 rgba(222,241,251,.08),
    inset 0 0 18px rgba(var(--rc-accent-rgb),.035),
    0 0 0 1px rgba(var(--rc-accent-rgb),.25),
    0 12px 24px rgba(0,0,0,.52),
    0 0 12px rgba(var(--rc-accent-rgb),.11);
}
#pane-pool .rc-block-live .rc-block-height{ font-size:19px; }
#pane-pool .rc-block-tag{ border-radius:3px; }
#pane-pool .scroll{
  max-width:100%;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:5px;
  border:1px solid rgba(80,132,159,.22);
  background:#060c12;
  box-shadow:inset 0 8px 18px rgba(0,0,0,.58),0 8px 20px rgba(0,0,0,.28);
  contain:inline-size;
}
#pane-pool .scroll table{ min-width:700px; }
#pane-pool .scroll thead th{
  background:linear-gradient(180deg,#172735,#0f1c27);
  color:#8ca9bb;
  border-bottom-color:#28475b;
  box-shadow:inset 0 1px 0 rgba(212,238,250,.055);
}
#pane-pool .scroll tbody td{
  background:rgba(10,18,26,.74);
  border-bottom-color:#162c3b;
}
#pane-pool .scroll tbody tr:hover td{
  background:linear-gradient(90deg,rgba(var(--rc-accent-rgb),.055),rgba(16,31,42,.92));
}
#pane-pool .rc-block-card + .rc-block-card::before{
  left:-13px;
  width:13px;
  height:2px;
  background:#315064;
  box-shadow:0 1px 0 #000;
}

/* -------------------------------------------------------------------------
   Stage 3 -- Pool Overview: new rules (no My Stats equivalent existed).
   Same token system as everything above (--rc-*, --rp-*), same restrained
   raised/recessed language -- just new component shapes this page needs.
   ------------------------------------------------------------------------- */

/* Top 12 headline stat cards: same raised-module material as My Stats'
   .mstats-primary .stat, but plain <div>s (no click/keyboard interaction on
   this page), so no button color-inherit class of bug to reintroduce. */
#pane-pool .pool-stats-primary{ gap:12px; }
#pane-pool .pool-stats-primary .stat{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:6px !important;
  border-top-color:rgba(216,240,252,.20) !important;
  border-right-color:rgba(81,132,159,.18) !important;
  border-bottom-color:#020508 !important;
  border-left-color:rgba(81,132,159,.18) !important;
  background:var(--rc-module-bg) !important;
  box-shadow:var(--rc-module-shadow) !important;
  padding:16px 15px 14px;
}
#pane-pool .pool-stats-primary .stat::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  z-index:4;
  clip-path:polygon(
    var(--rp-notch-sm) 0,
    calc(100% - var(--rp-notch-sm)) 0,
    100% var(--rp-notch-sm),
    100% calc(100% - var(--rp-notch-sm)),
    calc(100% - var(--rp-notch-sm)) 100%,
    var(--rp-notch-sm) 100%,
    0 calc(100% - var(--rp-notch-sm)),
    0 var(--rp-notch-sm)
  );
  border:1px solid rgba(120,177,207,.16);
}
#pane-pool .pool-stats-primary .stat::after{
  content:"";
  position:absolute;
  left:11px;
  top:0;
  width:48px;
  height:2px;
  pointer-events:none;
  z-index:5;
  background:linear-gradient(90deg,var(--rc-accent),rgba(var(--rc-accent-rgb),.12),transparent);
  opacity:.78;
}
#pane-pool .pool-stats-primary .stat .k{ color:#9eb5c6; letter-spacing:.15em; }
#pane-pool .pool-stats-primary .stat .v{ text-shadow:0 1px 0 #000; }
#pane-pool .pool-stats-primary .stat .s{ color:#afc1ce; }

/* Pool Hashrate top-module mini history graph -- same recessed screen as
   .spark elsewhere, just sized for this card. */
#pane-pool #pPoolHashSpark{ margin-top:8px; height:52px; }

/* Network Stats summary tiles: compact clickable instruments that switch
   the one shared detail chart below (mirrors My Stats' clickable primary
   cards, incl. the same color-inherit fix since these ARE real buttons). */
#pane-pool .ns-tiles{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
#pane-pool button.ns-tile{
  appearance:none; -webkit-appearance:none; margin:0; font:inherit; text-align:left; width:100%; cursor:pointer;
  color:var(--rc-ink,var(--ink));
  position:relative; isolation:isolate; overflow:visible;
  border-radius:6px; border:1px solid rgba(81,132,159,.18);
  border-top-color:rgba(216,240,252,.20); border-bottom-color:#020508;
  background:var(--rc-module-bg); box-shadow:var(--rc-module-shadow);
  padding:14px 14px 12px;
  transition:transform .12s ease, box-shadow .12s ease;
}
#pane-pool button.ns-tile:hover{ transform:translateY(-2px); box-shadow:var(--rc-module-shadow-hover); }
#pane-pool button.ns-tile:active{ transform:translateY(0); box-shadow:var(--rc-module-shadow-pressed); }
#pane-pool button.ns-tile[aria-pressed=true]{ border-color:rgba(var(--rc-accent-rgb),.5); }
#pane-pool button.ns-tile[aria-pressed=true]::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px;
  background:var(--rc-accent); box-shadow:0 0 6px rgba(var(--rc-accent-rgb),.4);
}
#pane-pool .ns-tile .k{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#9eb5c6; }
#pane-pool .ns-tile .v{ font-family:var(--mono); font-size:19px; font-weight:700; color:var(--ink); margin-top:2px; display:block; }
#pane-pool .ns-tile .spark{ height:40px; margin-top:8px; }

/* Pool Distribution redesign: leaderboard rows with a real proportional
   share bar, replacing the old donut. Rabid Pool's own row gets the accent
   treatment; Unknown stays visually muted, never hidden. */
#pane-pool .pd-list{
  display:flex; flex-direction:column; gap:1px;
  background:rgba(78,127,154,.24); border:1px solid rgba(78,127,154,.24); border-radius:4px; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(188,223,240,.055), inset 0 -1px 0 rgba(0,0,0,.86), 0 10px 22px rgba(0,0,0,.34);
}
#pane-pool .pd-row{
  display:grid; grid-template-columns:28px minmax(120px,1fr) 90px 92px 70px; gap:10px; align-items:center;
  padding:10px 14px; background:#0b141d;
}
#pane-pool .pd-row.pd-rabid{ background:linear-gradient(90deg,rgba(var(--rc-accent-rgb),.10),#0b141d 60%); }
#pane-pool .pd-rank{ font-family:var(--mono); font-size:11px; color:#6f8ba0; }
#pane-pool .pd-name{ font-size:13px; color:var(--ink); display:flex; align-items:center; gap:8px; }
#pane-pool .pd-row.pd-rabid .pd-name{ color:var(--rc-accent); font-weight:700; }
#pane-pool .pd-name.pd-unknown{ color:#7f97aa; font-style:italic; }
#pane-pool .pd-blocks{ font-family:var(--mono); font-size:12.5px; color:#c2d2df; text-align:right; }
#pane-pool .pd-hash{ font-family:var(--mono); font-size:12.5px; color:#8fc7e8; text-align:right; }
#pane-pool .pd-pct{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink); text-align:right; }
#pane-pool .pd-bar-row{ grid-column:1 / -1; height:5px; border-radius:99px; background:#050a0f; box-shadow:inset 0 2px 4px rgba(0,0,0,.7); overflow:hidden; margin-top:2px; }
#pane-pool .pd-bar-row > i{ display:block; height:100%; border-radius:99px; background:var(--rc-accent); }
#pane-pool .pd-row.pd-rabid .pd-bar-row > i{ box-shadow:0 0 6px rgba(var(--rc-accent-rgb),.5); }
#pane-pool .pd-row.pd-unknown .pd-bar-row > i{ background:#3a4f5e; }

/* Network Block Flow: same rail/card language as Rabid blocks, distinct
   heading color only (no new geometry) so the two rails read as siblings,
   not duplicates. */
#pane-pool #networkBlockRail .rc-block-k{ letter-spacing:.1em; }
#pane-pool .nbf-producer{ font-size:9.5px; color:#8ea6b8; margin-top:4px; }
#pane-pool .nbf-producer.nbf-rabid{ color:var(--rc-accent); font-weight:700; }

/* Recent Rabid Pool blocks table: mode/kind tag, safe legacy styling. */
#pane-pool .kind-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; padding:1px 6px; border-radius:4px; margin-left:6px; }
#pane-pool .kind-tag.kind-pplns{ background:rgba(10,193,142,.14); color:var(--bchg,var(--rc-accent)); }
#pane-pool .kind-tag.kind-solo{ background:rgba(215,169,40,.14); color:var(--gold); }
#pane-pool .kind-tag.kind-legacy{ background:rgba(120,140,155,.14); color:#8ea6b8; }

@media (max-width:640px){
  #pane-pool .pd-row{ grid-template-columns:22px 1fr 64px 54px; padding:9px 10px; gap:6px; }
  #pane-pool .pd-name{ font-size:12px; }
  #pane-pool .pd-hash{ display:none; }  /* dropped on mobile: no room for a 5th column, % + bar already carry the story */
}

/* -------------------------------------------------------------------------
   Stage 3 correction pass: distribution scale guide, block-rail scrollbar
   styling + scroll-snap, network-block-flow freshness text.
   ------------------------------------------------------------------------- */

/* Job 2: understated 0/25/50/75/100% guide above the leaderboard so the
   bar track's scale is obvious without a chart-library axis. */
#pane-pool .pd-scale-row{
  display:grid; grid-template-columns:28px minmax(120px,1fr) 90px 70px;
  padding:0 14px 4px; gap:10px;
}
#pane-pool .pd-scale-labels{
  grid-column:1/-1; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9px; letter-spacing:.05em;
  color:#5c7d8a; padding:0 1px;
}
@media (max-width:640px){
  #pane-pool .pd-scale-row{ grid-template-columns:22px 1fr 64px 54px; padding:0 10px 4px; gap:6px; }
}

/* Job 7: styled internal scrollbars -- dark track, subtle graphite thumb,
   accent on hover -- instead of the default white OS scrollbar clashing
   with the machined chassis look. Applied to both the block rails and any
   internally-scrolling table (.scroll). Chromium/WebKit + Firefox. */
#pane-pool .rc-block-rail,
#pane-pool .scroll,
#pane-stats .rc-block-rail,
#pane-stats .scroll{
  scrollbar-width: thin;
  scrollbar-color: #2d485c #060c12;
}
#pane-pool .rc-block-rail::-webkit-scrollbar,
#pane-pool .scroll::-webkit-scrollbar,
#pane-stats .rc-block-rail::-webkit-scrollbar,
#pane-stats .scroll::-webkit-scrollbar{
  height:8px; width:8px;
}
#pane-pool .rc-block-rail::-webkit-scrollbar-track,
#pane-pool .scroll::-webkit-scrollbar-track,
#pane-stats .rc-block-rail::-webkit-scrollbar-track,
#pane-stats .scroll::-webkit-scrollbar-track{
  background:#060c12;
}
#pane-pool .rc-block-rail::-webkit-scrollbar-thumb,
#pane-pool .scroll::-webkit-scrollbar-thumb,
#pane-stats .rc-block-rail::-webkit-scrollbar-thumb,
#pane-stats .scroll::-webkit-scrollbar-thumb{
  background:#2d485c; border-radius:99px;
}
#pane-pool .rc-block-rail::-webkit-scrollbar-thumb:hover,
#pane-pool .scroll::-webkit-scrollbar-thumb:hover,
#pane-stats .rc-block-rail::-webkit-scrollbar-thumb:hover,
#pane-stats .scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(var(--rc-accent-rgb),.55);
}

/* Job 7: restrained scroll-snap so the rail settles on a whole block
   instead of stopping mid-card -- never fights a normal drag/flick. */
#pane-pool .rc-block-rail,
#pane-stats .rc-block-rail{
  scroll-snap-type: x proximity;
}
#pane-pool .rc-block-card,
#pane-stats .rc-block-card{
  scroll-snap-align: start;
}

/* Network Block Flow freshness text (Job 1). */
#pane-pool #networkBlockFreshness{ color:#8ea6b8; }
#pane-pool #networkBlockFreshness .rc-status-dot{ margin-right:3px; }

/* Job 4: STATUS column re-uses the existing .tag classes (ok/warn/bad/mute)
   -- map block-rail status classes onto them so no new color language is
   introduced for the same MATURE/IMMATURE/ORPHAN concept. */
#pane-pool .tag.mature{ background:rgba(32,217,132,.12); color:var(--green); border-color:rgba(32,217,132,.28); }
#pane-pool .tag.immature{ background:rgba(215,169,40,.12); color:var(--gold); border-color:rgba(215,169,40,.28); }
#pane-pool .tag.orphan{ background:rgba(225,45,50,.12); color:#ff6b6f; border-color:rgba(225,45,50,.3); }

/* =========================================================================
   STAGE 4 -- full theme integration pass.

   Part 1: Miners / Connect / FAQ panes. These reuse the exact same classes
   (.rc-plate, .sec-h, .scroll table, .tag, .btn) that Pool Overview and My
   Stats already have full theme coverage for -- they were simply never
   extended to these three panes, so they rendered with zero housing/bevel
   at all. Every declaration below is copied verbatim from the matching
   #pane-stats/#pane-pool rule; nothing new is invented here, it's the same
   visual language applied where it was missing.
   ========================================================================= */
#pane-miners, #pane-miners *,
#pane-connect, #pane-connect *,
#pane-faq, #pane-faq *{ min-width:0; }

#pane-miners .rc-plate,
#pane-connect .rc-plate,
#pane-faq .rc-plate{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:6px !important;
  border-color:var(--rc-plate-border) !important;
  background:var(--rc-plate-bg) !important;
  box-shadow:var(--rc-plate-shadow) !important;
}
#pane-miners .rc-plate::before,
#pane-connect .rc-plate::before,
#pane-faq .rc-plate::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:5;
  clip-path:polygon(
    var(--rp-notch) 0,
    calc(100% - var(--rp-notch)) 0,
    100% var(--rp-notch),
    100% calc(100% - var(--rp-notch)),
    calc(100% - var(--rp-notch)) 100%,
    var(--rp-notch) 100%,
    0 calc(100% - var(--rp-notch)),
    0 var(--rp-notch)
  );
  border:1px solid rgba(128,185,214,.21);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.72);
}
#pane-miners .rc-plate::after,
#pane-connect .rc-plate::after,
#pane-faq .rc-plate::after{
  content:"";
  position:absolute;
  top:-1px;
  left:22px;
  width:160px;
  height:2px;
  pointer-events:none;
  z-index:6;
  background:linear-gradient(90deg,transparent,rgba(var(--rc-accent-rgb),.70),rgba(200,235,252,.36),transparent);
  box-shadow:0 0 8px rgba(var(--rc-accent-rgb),.14);
}

#pane-miners .sec-h, #pane-connect .sec-h, #pane-faq .sec-h{
  position:relative;
  align-items:center;
  padding:0 0 7px 15px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(77,124,151,.17);
}
#pane-miners .sec-h::before, #pane-connect .sec-h::before, #pane-faq .sec-h::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:6px;
  height:14px;
  background:var(--rc-accent);
  clip-path:polygon(0 0,100% 0,100% 70%,55% 100%,0 100%);
  box-shadow:0 0 7px rgba(var(--rc-accent-rgb),.25);
}
#pane-miners .sec-h::after, #pane-connect .sec-h::after, #pane-faq .sec-h::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:90px;
  height:1px;
  background:linear-gradient(90deg,var(--rc-accent),transparent);
}
#pane-miners .sec-h h2, #pane-connect .sec-h h2, #pane-faq .sec-h h2{
  font-size:13px;
  letter-spacing:.075em;
  color:#d7e7f1;
  text-shadow:0 1px 0 #000;
}
#pane-miners .sec-h .note, #pane-connect .sec-h .note, #pane-faq .sec-h .note{ color:#92aabd; opacity:.95; }

#pane-miners .scroll, #pane-connect .scroll{
  max-width:100%;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:5px;
  border:1px solid rgba(80,132,159,.22);
  background:#060c12;
  box-shadow:inset 0 8px 18px rgba(0,0,0,.58),0 8px 20px rgba(0,0,0,.28);
  contain:inline-size;
}
#pane-miners .scroll table, #pane-connect .scroll table{ min-width:600px; }
#pane-miners .scroll thead th, #pane-connect .scroll thead th{
  background:linear-gradient(180deg,#172735,#0f1c27);
  color:#8ca9bb;
  border-bottom-color:#28475b;
  box-shadow:inset 0 1px 0 rgba(212,238,250,.055);
}
#pane-miners .scroll tbody td, #pane-connect .scroll tbody td{
  background:rgba(10,18,26,.74);
  border-bottom-color:#162c3b;
}
#pane-miners .scroll tbody tr:hover td{
  background:linear-gradient(90deg,rgba(var(--rc-accent-rgb),.055),rgba(16,31,42,.92));
}
#pane-miners .tag, #pane-connect .tag{ text-transform:uppercase; letter-spacing:.08em; }

#pane-connect .btn{
  border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.16)),#122031;
  border:1px solid rgba(100,153,183,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 8px rgba(0,0,0,.32);
  color:var(--ink);
}
#pane-connect .btn:active{ transform:translateY(1px); box-shadow:inset 0 3px 6px rgba(0,0,0,.35); }
#pane-connect section.panel{
  background:var(--rc-module-bg) !important;
  border-color:var(--rc-module-border-side) !important;
  box-shadow:var(--rc-module-shadow) !important;
  border-radius:var(--rc-module-radius) !important;
}

/* FAQ accordion -- recessed well per question, same bevel language as
   everything else rather than a plain flat <details>. */
#pane-faq .faq details{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.14)),#0b141e;
  border:1px solid rgba(80,132,159,.20);
  border-radius:5px;
  margin-bottom:8px;
  box-shadow:inset 0 1px 0 rgba(209,237,251,.05),0 4px 10px rgba(0,0,0,.24);
  padding:2px 4px;
}
#pane-faq .faq summary{ color:#d7e7f1; padding:10px 12px; }
#pane-faq .faq details p{ color:#c2d2df; padding:0 12px 12px; }

@media (max-width:900px){
  #pane-miners .rc-plate, #pane-connect .rc-plate, #pane-faq .rc-plate{ padding:16px !important; }
}
@media (max-width:640px){
  #pane-miners .rc-plate, #pane-connect .rc-plate, #pane-faq .rc-plate{ padding:14px !important; }
}

/* =========================================================================
   Part 2: home / Coins page (pool-index.html, id="pane-home" on its outer
   .shell). The home page keeps its own inline <style> and its own CSS
   variable names (--panel, --line, --red, --gold, --green, --cyan,
   --violet) -- this stylesheet loads after it (same "loaded last"
   integration contract as every other page) and only touches selectors
   scoped under #pane-home, so nothing here can leak onto pool-xbt.html or
   pool-bch.html and nothing there can leak here. The home page isn't one
   coin, so shared chassis elements (topbar, nav, generic stat cards) get a
   neutral cyan accent; only the per-coin card gets that coin's own red/teal
   identity via .coin.xbt / .coin.bch.
   ========================================================================= */
#pane-home{ --rc-home-rgb:34,188,235; }

#pane-home .topbar{
  position:relative;
  background:var(--rc-plate-bg) !important;
  border:1px solid var(--rc-plate-border) !important;
  border-radius:8px;
  box-shadow:var(--rc-plate-shadow) !important;
  padding:14px 20px;
}
#pane-home .mark{
  border-radius:8px;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.07),transparent 60%),#0b141e;
  box-shadow:inset 0 1px 0 rgba(209,237,251,.08),0 4px 10px rgba(0,0,0,.4);
  padding:4px;
}
#pane-home nav.main a:hover,
#pane-home .nav-drop>button:hover{
  background:#0f1a26;
}
#pane-home nav.main a.here,
#pane-home .nav-drop>button.here{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.15)),#122031 !important;
  border-color:rgba(122,174,205,.30) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.5);
}
#pane-home .nav-drop-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18)),#0f1826 !important;
  border-color:rgba(100,153,183,.28) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}

#pane-home .sec-h{
  position:relative;
  padding:0 0 9px 15px;
  border-bottom:1px solid rgba(77,124,151,.17);
}
#pane-home .sec-h::before{
  content:"";
  position:absolute; left:0; top:2px; width:6px; height:14px;
  background:rgb(var(--rc-home-rgb));
  clip-path:polygon(0 0,100% 0,100% 70%,55% 100%,0 100%);
  box-shadow:0 0 7px rgba(var(--rc-home-rgb),.3);
}

#pane-home .hero-card,
#pane-home .stat,
#pane-home .panel,
#pane-home .why .item{
  position:relative;
  background:var(--rc-module-bg) !important;
  border:1px solid var(--rc-module-border-side) !important;
  box-shadow:var(--rc-module-shadow) !important;
  border-radius:var(--rc-module-radius) !important;
}
#pane-home .stat{ transition:transform .15s ease, box-shadow .15s ease; }
#pane-home .stat:hover{ transform:translateY(-2px); box-shadow:var(--rc-module-shadow-hover) !important; }

#pane-home .coin{
  position:relative;
  isolation:isolate;
  --coin-accent-rgb:34,188,235;
  background:var(--rc-plate-bg) !important;
  border:1px solid var(--rc-plate-border) !important;
  box-shadow:var(--rc-plate-shadow) !important;
  border-radius:var(--rc-plate-radius) !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
#pane-home .coin::after{
  content:"";
  position:absolute; top:-1px; left:22px; width:160px; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--coin-accent-rgb),.70),rgba(200,235,252,.36),transparent);
  box-shadow:0 0 8px rgba(var(--coin-accent-rgb),.14);
}
#pane-home .coin.xbt{ --coin-accent-rgb:196,134,58; }
#pane-home .coin.bch{ --coin-accent-rgb:10,193,142; }
#pane-home .coin.btc{ --coin-accent-rgb:242,169,0; }
#pane-home .coin.xmr{ --coin-accent-rgb:255,102,0; }
#pane-home .coin.ltc{ --coin-accent-rgb:93,132,196; }
#pane-home .coin.zec{ --coin-accent-rgb:244,183,40; }
/* XBT color-system correction: ONLINE status is a health/semantic signal,
   not a coin-identity element -- it stays the universal green every other
   "online" indicator on the site uses (see .coin-head .st's own base rule).
   The earlier XBT-red override here was exactly the identity/semantic
   conflation this pass exists to remove. */
#pane-home .coin.bch .coin-head .st{ color:#4becc4; }
#pane-home .coin.bch .coin-head .st .dot{ background:#2be6b8; box-shadow:0 0 0 3px rgba(10,193,142,.18); }

#pane-home .crows{
  background:rgba(80,132,159,.22) !important;
  border:1px solid rgba(80,132,159,.22) !important;
  box-shadow:inset 0 4px 10px rgba(0,0,0,.35);
  border-radius:6px;
  overflow:hidden;
}
#pane-home .crow{ background:rgba(10,18,26,.74) !important; }

#pane-home .scroll{
  border-radius:5px;
  border:1px solid rgba(80,132,159,.22) !important;
  background:#060c12 !important;
  box-shadow:inset 0 8px 18px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.26);
}
#pane-home th{
  background:linear-gradient(180deg,#172735,#0f1c27) !important;
  color:#8ca9bb !important;
  border-bottom-color:#28475b !important;
}
#pane-home td{ background:rgba(10,18,26,.5); border-bottom-color:#162c3b !important; }

#pane-home .btn{
  border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.16)),#122031;
  border:1px solid rgba(100,153,183,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.3);
}
#pane-home .btn:hover{ border-color:rgba(34,188,235,.5); }
#pane-home .btn:active{ transform:translateY(1px); box-shadow:inset 0 3px 6px rgba(0,0,0,.35); }
/* XBT color-system correction: .btn.primary on this page is only ever an
   XBT action today (the hero's "Mine XBT" CTA and the XBT card's "Open XBT
   pool" button -- BCH's own card button uses plain .btn, not .btn.primary),
   so it carries XBT's bronze identity directly. Dark text for contrast,
   matching the same accessible pattern pool-bch.html already uses for its
   own light-teal primary button (#06110d on #0ac18e). */
#pane-home .btn.primary{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(0,0,0,.16)),#C4863A !important;
  border-color:rgba(196,134,58,.85) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 12px rgba(0,0,0,.35) !important;
  color:#2a1a09 !important;
}
#pane-home .btn.primary:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(0,0,0,.16)),#d6994e !important;
  color:#2a1a09 !important;
}

#pane-home .faq details{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.14)),#0b141e !important;
  border:1px solid rgba(80,132,159,.20) !important;
  box-shadow:inset 0 1px 0 rgba(209,237,251,.05),0 4px 10px rgba(0,0,0,.24) !important;
}

#pane-home .tag.ok{ background:rgba(10,193,142,.14) !important; color:#4becc4 !important; border-color:rgba(10,193,142,.32) !important; }
#pane-home .tag.warn{ background:rgba(215,169,40,.14) !important; color:var(--gold) !important; border-color:rgba(215,169,40,.32) !important; }
#pane-home .tag.mute{ background:#0f1826 !important; color:var(--ink-3) !important; border-color:rgba(100,153,183,.22) !important; }

@media (max-width:900px){
  #pane-home .topbar{ padding:12px 16px; }
}
@media (max-width:640px){
  #pane-home .topbar{ padding:10px 14px; flex-direction:column; align-items:flex-start; }
  #pane-home .hero-card,
  #pane-home .stat,
  #pane-home .panel,
  #pane-home .coin{ box-shadow:var(--rc-module-shadow), none !important; }
}

/* =========================================================================
   Part 3: home page production redesign -- announcements as event
   bulletins, coin cards as tiered physical modules with live sparklines,
   the payout workflow as a connected chain. Same tokens as everywhere else;
   nothing new invented.
   ========================================================================= */

/* ---- announcements: a narrow illuminated left strip + chain badge,
   instead of a plain flat rectangle. Color keyed to the chain the
   announcement is tagged with (XBT red / BCH teal); a coin-agnostic
   announcement (tag class not matched) just gets the neutral home accent. */
#pane-home .announce{
  position:relative;
  border-left-width:3px;
  border-left-style:solid;
  border-left-color:rgb(var(--rc-home-rgb));
  padding-left:16px;
}
#pane-home .announce-xbt{ border-left-color:#C4863A; }
#pane-home .announce-bch{ border-left-color:#0ac18e; }
#pane-home .announce:hover{ transform:translateX(1px); box-shadow:var(--rc-module-shadow-hover) !important; }

/* ---- payout workflow: the 4 existing steps, now visibly a connected
   chain. Desktop: horizontal row with a right-pointing connector between
   each raised module. Mobile: connectors rotate to point down and the row
   wraps to a single column -- an intentional vertical flow, not a squeeze. */
#pane-home .workflow{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex-wrap:wrap;
}
#pane-home .workflow .stat{ flex:1 1 190px; min-width:150px; }
#pane-home .workflow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:22px;
  color:rgb(var(--rc-home-rgb));
  font-size:18px;
  opacity:.75;
  text-shadow:0 0 8px rgba(var(--rc-home-rgb),.4);
}
@media (max-width:860px){
  #pane-home .workflow{ flex-direction:column; }
  #pane-home .workflow .stat{ flex:1 1 auto; }
  #pane-home .workflow-arrow{ width:auto; height:18px; transform:rotate(90deg); }
}

/* ---- coin card status strip: small pill chips instead of a bare <span>
   tag row -- same bevel language as everything else, just compact. */
#pane-home .coin-status-strip{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:-2px 0 12px;
}
#pane-home .coin-status-strip .chip{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18)),#0e1826;
  border:1px solid rgba(100,153,183,.24);
  color:var(--ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* XBT color-system correction: "ok" is a status semantic (healthy/live),
   not identity -- both coins share the same green treatment here, same as
   pool-xbt.html/pool-bch.html's own identical .tag.ok rule. */
#pane-home .coin-status-strip .chip.ok{ color:#4becc4; border-color:rgba(10,193,142,.35); background:linear-gradient(180deg,rgba(10,193,142,.10),rgba(0,0,0,.18)),#0e1826; }
#pane-home .coin-status-strip .chip.gold{ color:var(--gold); border-color:rgba(215,169,40,.32); }
#pane-home .coin-summary{ color:var(--ink-2); font-size:13.5px; margin:0 0 14px; }

/* ---- coin card main metrics: 2-4 large illuminated tiles (the numbers
   that matter most), visually promoted above the dense secondary grid.
   The first tile carries the real pool-hashrate sparkline (RabidCharts,
   real /history/sparkline data -- see the loadHomeSparkline() JS). */
#pane-home .coin-main-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}
#pane-home .cmm{
  position:relative;
  background:var(--rc-recess-bg) !important;
  box-shadow:var(--rc-recess-shadow) !important;
  border-radius:var(--rc-recess-radius);
  padding:11px 12px 10px;
  min-width:0;
}
#pane-home .cmm .k{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:normal;
  line-height:1.3;
}
#pane-home .cmm .v{
  font-family:var(--mono);
  font-size:19px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  margin-top:2px;
  text-shadow:0 1px 0 #000;
}
/* XBT color-system correction: ".v.g" marks a healthy/positive number
   (semantic), same green for both coins -- matches pool-index.html's own
   base .crow .v.g rule. */
#pane-home .cmm .v.g{ color:#4becc4; }
#pane-home .cmm-spark{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; }
#pane-home .cmm-spark .k{ flex:0 0 auto; }
#pane-home .cmm-spark .v{ flex:0 0 auto; margin-top:0; min-width:76px; }
#pane-home .cmm-spark .spark{ flex:1 1 auto; height:34px; margin-top:0; }
#pane-home .cmm-spark .rc-spark-line{ filter:drop-shadow(0 0 2px rgba(var(--rc-home-rgb),.25)); }
#pane-home .coin.xbt .cmm-spark .rc-spark-line{ stroke:#C4863A !important; }
#pane-home .coin.xbt .cmm-spark .rc-spark-dot{ fill:#C4863A !important; }
#pane-home .coin.bch .cmm-spark .rc-spark-line{ stroke:#0ac18e !important; }
#pane-home .coin.bch .cmm-spark .rc-spark-dot{ fill:#0ac18e !important; }
/* 2026-09-25: BTC/XMR/LTC sparklines were invisible (stroke:none) -- .rc-spark-line
   draws from --rc-accent, which only xbt/bch defined a coin-scoped color for here. */
#pane-home .coin.btc .cmm-spark .rc-spark-line{ stroke:#f2a900 !important; }
#pane-home .coin.btc .cmm-spark .rc-spark-dot{ fill:#f2a900 !important; }
#pane-home .coin.xmr .cmm-spark .rc-spark-line{ stroke:#ff6600 !important; }
#pane-home .coin.xmr .cmm-spark .rc-spark-dot{ fill:#ff6600 !important; }
#pane-home .coin.ltc .cmm-spark .rc-spark-line{ stroke:#5d84c4 !important; }
#pane-home .coin.ltc .cmm-spark .rc-spark-dot{ fill:#5d84c4 !important; }
#pane-home .coin.zec .cmm-spark .rc-spark-line{ stroke:#f4b728 !important; }
#pane-home .coin.zec .cmm-spark .rc-spark-dot{ fill:#f4b728 !important; }

@media (max-width:560px){
  #pane-home .coin-main-metrics{ grid-template-columns:repeat(2,1fr); }
  #pane-home .cmm-spark{ grid-column:1 / -1; }
}

/* =========================================================================
   Part 4: block explorer (Stage 9). explorer-xbt.html / explorer-bch.html
   wrap their entire page content in id="pane-pool" -- the exact same ID
   pool-xbt.html/pool-bch.html already use -- so they inherit the FULL
   existing #pane-pool theme (housing bevels, section headers, block rail,
   tables, distribution list, tags) with ZERO new CSS. Each page still sets
   its own --rc-accent/--rc-accent-rgb the same way pool-xbt.html/
   pool-bch.html do, so bronze vs teal identity carries over automatically.
   Only two things #pane-pool didn't already have are added below: the
   lookup/search bar (previously #pane-stats-only) and a small set of
   genuinely new explorer-specific layouts (key-value detail grid, tx
   table, block-to-block connector chain). */
#pane-pool .lookup input{
  background:#03080d;
  border:1px solid #28475b;
  border-radius:4px;
  box-shadow:inset 0 5px 12px rgba(0,0,0,.72),inset 0 0 0 1px rgba(0,0,0,.75);
  color:#f5fbff;
}
#pane-pool .lookup input:focus{
  border-color:rgba(var(--rc-accent-rgb),.72);
  box-shadow:inset 0 5px 12px rgba(0,0,0,.72),0 0 0 1px rgba(var(--rc-accent-rgb),.20);
}
#pane-pool .btn.primary{
  position:relative;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(0,0,0,.16)),
    var(--rc-accent);
  border-color:rgba(var(--rc-accent-rgb),.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.28),0 5px 12px rgba(0,0,0,.38);
  color:#0c1116;
}
#pane-pool .btn.primary:active{ transform:translateY(1px); box-shadow:inset 0 4px 8px rgba(0,0,0,.35); }

/* Block detail: dense key-value grid, same visual language as .crows but
   with a wider label column for explorer-specific field names. */
#pane-pool .xrow{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:2px 14px;
  padding:8px 0;
  border-bottom:1px solid rgba(80,132,159,.14);
  font-size:13px;
}
#pane-pool .xrow:last-child{ border-bottom:none; }
#pane-pool .xrow .k{ color:#8ea6b8; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; align-self:center; }
#pane-pool .xrow .v{ color:var(--ink); font-family:var(--mono); word-break:break-all; }
#pane-pool .xrow .v.mono-hash{ font-size:12px; color:#c2d2df; }
#pane-pool .xrow .v a{ color:var(--rc-accent); }
@media (max-width:640px){
  #pane-pool .xrow{ grid-template-columns:1fr; gap:2px; }
}

/* Explorer-specific block rail: same .rc-block-rail/.rc-block-card as the
   pool page's Network Block Flow, plus a clickable affordance and a
   connecting line drawn between adjacent cards so it reads as a chain. */
#pane-pool .rc-block-card.xclick{ cursor:pointer; }
#pane-pool .rc-block-card.xclick:hover{ transform:translateY(-2px); box-shadow:var(--rc-module-shadow-hover); }
#pane-pool .xtag-rabid{ color:var(--rc-accent); font-weight:700; }

/* tx list table -- reuses .scroll table styling verbatim; only new bit is
   a monospace txid column that truncates with an ellipsis instead of
   wrapping/overflowing the row. */
#pane-pool .xtxid{
  font-family:var(--mono); font-size:12px; color:#c2d2df;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;
}
#pane-pool .xtxid.coinbase{ color:var(--rc-accent); font-weight:700; }

#pane-pool .xbreadcrumb{ font-family:var(--mono); font-size:11px; color:#8ea6b8; margin-bottom:10px; }
#pane-pool .xbreadcrumb a{ color:var(--rc-accent); }
#pane-pool .xempty{ color:#7f97aa; font-size:13px; padding:20px; text-align:center; }
#pane-pool .xpruned-note{
  background:rgba(215,169,40,.08); border-left:2px solid var(--gold);
  padding:10px 14px; font-size:12.5px; color:#c2d2df; margin:10px 0; border-radius:0 4px 4px 0;
}

/* =========================================================================
   Part 5: Network Pool Distribution -- 3D-style donut chart beside the
   existing ranked list, same panel. Scoped to #pane-pool, which
   pool-xbt.html, pool-bch.html AND explorer-xbt.html/explorer-bch.html all
   already use for their outer content wrapper -- so this one block covers
   all four pages with zero duplication. The donut is pure SVG, built by
   RabidCharts.distributionDonut() in rabid-pool-charts.js; this file only
   styles the wrapper/legend/tooltip chrome around it.
   ========================================================================= */
#pane-pool .pd-flex{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
#pane-pool .pd-donut-col{
  flex:0 0 58%;
  min-width:0;
  border-right:1px solid rgba(80,132,159,.16);
  padding-right:20px;
}
#pane-pool .pd-list-col{
  flex:1 1 auto;
  min-width:0;
}
#pane-pool .rc-donut-wrap{
  position:relative;
}
#pane-pool .rc-donut-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
#pane-pool .rc-donut-slice{ outline:none; }
#pane-pool .rc-donut-slice:focus-visible{ filter:brightness(1.2); }
#pane-pool .rc-donut-label{ transition:opacity .12s ease, filter .12s ease; cursor:pointer; }
#pane-pool .rc-donut-leader{ transition:stroke-opacity .12s ease; }
#pane-pool .rc-donut-label-text{
  font-family:var(--mono);
  font-size:9.5px;
}
#pane-pool .rc-donut-label-name{ fill:var(--ink-2); }
#pane-pool .rc-donut-label-pct{ font-weight:700; }
#pane-pool .rc-donut-tip{
  position:absolute;
  z-index:10;
  transform:translateY(-100%);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.2)),#0b141e;
  border:1px solid rgba(100,153,183,.32);
  border-radius:5px;
  padding:6px 10px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  color:var(--ink);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  pointer-events:none;
  white-space:nowrap;
}
#pane-pool .rc-donut-tip b{ color:var(--rc-accent); }
#pane-pool .rc-donut-empty{ color:#7f97aa; font-size:13px; padding:30px; text-align:center; }

#pane-pool .rc-donut-legend{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:none;
  overflow-y:visible;
}
#pane-pool .rc-donut-legend-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 6px;
  border-radius:4px;
  font-size:15px;
  cursor:pointer;
  transition:background .1s ease;
}
#pane-pool .rc-donut-legend-row:hover,
#pane-pool .rc-donut-legend-row.active{ background:rgba(255,255,255,.05); }
#pane-pool .rc-donut-legend-row.rc-donut-legend-minor{ opacity:.78; font-size:13px; }
#pane-pool .rc-donut-legend-row.rc-donut-legend-labeled{ padding:4px 6px; }
#pane-pool .rc-donut-swatch{
  width:13px; height:13px; border-radius:3px; flex:0 0 auto;
}
#pane-pool .rc-donut-legend-name{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-2);
}
#pane-pool .rc-donut-legend-pct{
  flex:0 0 auto; font-family:var(--mono); color:var(--ink); font-weight:700;
}
#pane-pool .rc-donut-legend::-webkit-scrollbar{ width:6px; }
#pane-pool .rc-donut-legend::-webkit-scrollbar-thumb{ background:rgba(100,153,183,.3); border-radius:3px; }

@media (max-width:860px){
  #pane-pool .pd-flex{ flex-direction:column; }
  #pane-pool .pd-donut-col{
    flex:1 1 auto; width:100%; border-right:none; border-bottom:1px solid rgba(80,132,159,.16);
    padding-right:0; padding-bottom:18px; margin-bottom:16px;
  }
  #pane-pool .rc-donut-svg{ max-width:320px; margin:0 auto; display:block; }
  #pane-pool .rc-donut-label-text{ font-size:9px; }
}

/* =========================================================================
   Miners leaderboards at phone width (PPLNS + SOLO).
   Both tables carry 6 real columns and every one of them is a number a
   miner actually looks for, so nothing is dropped. Instead the cells
   tighten and the already-truncated address stops wrapping onto two
   lines, which fits noticeably more of the table before the horizontal
   scroll inside .scroll takes over. The scroll stays contained -- page
   width is unaffected. Applies to both coins' Miners tabs.
   ========================================================================= */
@media (max-width:480px){
  #pane-miners .scroll table{ min-width:470px; }
  #pane-miners .scroll th,
  #pane-miners .scroll td{ padding:8px 8px; }
  #pane-miners .scroll thead th{ font-size:9px; letter-spacing:.07em; }
  #pane-miners .scroll tbody td{ font-size:12.5px; }
  #pane-miners .scroll td.mono{ white-space:nowrap; }
}