:root{
  --bg:#0a0d11; --panel:#111823; --panel-2:#18222e; --line:#243240; --line-2:#31404f;
  --ink:#f2f6fa; --ink-2:#c3d0dc; --ink-3:#8ea0b2;
  --red:#e12d32; --gold:#d7a928; --green:#20d984; --cyan:#22bceb; --violet:#8b7cf6; --btcg:#f2a900;
  --r:16px; --r-sm:10px;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --rc-accent: var(--btcg); /* Phase 8A: shared components inherit BTC's own accent */
  --rc-accent-rgb: 242,169,0; /* Job 1 (3D pass): same color as --btcg, as r,g,b for rgba() glows -- CSS cannot derive this from the hex custom property itself */
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.shell{max-width:1220px;margin:0 auto;padding:0 20px 80px}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--btcg);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- top bar ---- */
.topbar{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:56px;height:56px;flex:none}
.mark img{width:100%;height:100%;object-fit:contain;display:block}
nav.main{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center}
nav.main a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);padding:7px 11px;border-radius:8px}
nav.main a:hover{background:var(--panel);color:var(--ink);text-decoration:none}
nav.main a.here{color:var(--ink);background:var(--panel);border:1px solid var(--line-2)}
.nav-drop{position:relative}
.nav-drop>button{font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);padding:7px 11px;border-radius:8px;border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav-drop>button:hover{background:var(--panel);color:var(--ink)}
.nav-drop>button.here{color:var(--ink);background:var(--panel);border:1px solid var(--line-2)}
.nav-drop .care{font-size:9px;opacity:.7}
.nav-drop-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:170px;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:50}
.nav-drop-menu a{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);padding:8px 10px;border-radius:7px}
.nav-drop-menu a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.nav-drop-menu a.here{color:var(--ink);background:var(--panel-2)}
.brand h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px}
.brand .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.topmeta{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2)}
.chip b{color:var(--ink);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--btcg);box-shadow:0 0 0 3px rgba(242,169,0,.16)}
.dot.warn{background:var(--gold);box-shadow:0 0 0 3px rgba(215,169,40,.16)}

/* ---- tab bar ---- */
.tabs{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{cursor:pointer;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 16px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-3);margin-bottom:-1px}
.tabs button:hover{color:var(--ink-2)}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--btcg)}
.tabpane[hidden]{display:none}

/* ---- sections ---- */
section{margin-top:34px}
.sec-h{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.sec-h h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
.sec-h .note{font-family:var(--mono);font-size:11px;color:var(--ink-2);opacity:.85}

/* ---- stat grid ---- */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px 14px;display:flex;flex-direction:column;gap:3px;min-height:104px}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.7px;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.15}
.stat .v small{font-size:14px;color:var(--ink-3);font-weight:500;letter-spacing:0}
.stat .s{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:auto}
.stat.accent .v{color:var(--btcg)}
.stat.gold .v{color:var(--gold)}
.stat.cyan .v{color:var(--cyan)}
/* Job 2 (3D dashboard pass): the sparkline is now a real recessed display
   window (Level 3 of the depth system) filling roughly the lower third of
   a graph-capable card, not a decorative hairline. Previously had NO
   explicit CSS at all here -- it rendered only via the SVG's own
   viewBox-aspect-ratio fallback sizing, an accidental behavior rather than
   a deliberate one. margin-top:auto (the card is a flex column) pushes it
   down to occupy the remaining space once .k/.v/.s have taken theirs. */
.spark{
  margin-top:auto; height:52px; width:100%; display:block; box-sizing:border-box;
  background:var(--rc-recess-bg); border-radius:7px; box-shadow:var(--rc-recess-shadow);
  padding:5px 7px;
}
.stat.stat-graph{ min-height:158px; }
.stat.stat-graph .s{ margin-top:4px; } /* only .spark itself absorbs the auto space now */

/* ---- Phase 8 correction Job 3/4: dense data-grid for secondary metrics --
   Replaces a wall of individual .stat mini-cards (Earnings/Maturity/Blocks
   and Block Odds sections) with label:value rows in one bordered panel,
   separated by fine dividers -- "less boxes, more data terminal". Panel
   radius is 7px, tighter than the primary .stat cards' 16px, per the
   restrained industrial-style pass. The approved top-6 primary .stat cards
   are untouched -- this only applies where explicitly used below.
   Gap-as-divider grid: 1px gaps show the container's own background as
   fine dividers between cells. Chosen over nth-child border rules because
   several tiles here toggle [hidden] per mode (PPLNS/SOLO) -- nth-child
   counts DOM position, not visible position, so border rules would
   misalign when a tile drops out; a gap-drawn divider always lines up. */
/* Job 3: dgrid gets the same restrained plate shadow as .panel -- it's a
   grouped instrumentation surface sitting on the section, not flush with
   the page background. Layout (the gap-as-divider grid) is untouched. */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:var(--rc-plate-shadow)}
.dgrid>.dg{background:var(--rc-module-bg);padding:13px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.dg .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.dg .v{font-size:19px;font-weight:700;letter-spacing:-.4px;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.2;color:var(--ink)}
.dg .v small{font-size:12.5px;color:var(--ink-2);font-weight:500;letter-spacing:0}
.dg .s{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:auto;line-height:1.4}
.dg.accent .v{color:var(--btcg)}
.dg.gold .v{color:var(--gold)}
.dg.cyan .v{color:var(--cyan)}
.dg .bar{height:5px;margin-top:2px;margin-bottom:1px}
.panel-tight{border-radius:7px}
#pane-stats .panel.panel-tight{border-radius:7px}
@media(max-width:720px){ .dgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:440px){ .dgrid{grid-template-columns:1fr} }

/* progress */
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--btcg)}
.bar i.gold{background:var(--gold)} .bar i.red{background:var(--red)} .bar i.cyan{background:var(--cyan)}

/* ---- panels ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.grid2{display:grid;gap:14px;grid-template-columns:1.25fr .75fr}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.progress-wrap{margin-top:10px}
.progress-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px}

.connect-url{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 15px;font-family:var(--mono);font-size:15px;font-weight:500;flex-wrap:wrap}
.connect-url .u{color:var(--btcg)}
.btn{cursor:pointer;font:inherit;font-size:12px;font-family:var(--mono);letter-spacing:.05em;padding:6px 12px;border-radius:7px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-2)}
.btn:hover{border-color:var(--btcg);color:var(--btcg)}
.btn.primary{background:var(--btcg);border-color:var(--btcg);color:#06110d;font-weight:600}
.btn.primary:hover{background:#0dd9a1;color:#06110d}

table{width:100%;border-collapse:collapse;font-size:13.5px}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
th{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(242,169,0,.035)}
td.r,th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:3px 8px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
.tag.ok{background:rgba(32,217,132,.12);color:var(--green);border-color:rgba(32,217,132,.28)}
.tag.warn{background:rgba(215,169,40,.12);color:var(--gold);border-color:rgba(215,169,40,.28)}
.tag.bad{background:rgba(225,45,50,.12);color:#ff6b6f;border-color:rgba(225,45,50,.3)}
.tag.info{background:rgba(34,188,235,.1);color:var(--cyan);border-color:rgba(34,188,235,.26)}
.tag.mute{background:var(--panel-2);color:var(--ink-3);border-color:var(--line-2)}

/* Phase 8D: My Stats address header + PPLNS/SOLO mode selector + clickable
   primary cards. Replaces the old always-both-visible mode banner + two
   stacked sections with a compact segmented control -- PPLNS and SOLO are
   rendered from the same shared markup/ids, never both at once, never
   summed together. */
.miner-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--rc-elev-1,none);border-top-color:var(--rc-top-highlight,var(--line));
}
.miner-head-id{display:flex;align-items:center;gap:10px;min-width:0}
.miner-head-addr{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(58vw,440px)}
.btn.sm{padding:4px 10px;font-size:11px}

.mode-seg-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mode-seg-status{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.seg.mode-seg{padding:4px;gap:4px}
.seg.mode-seg button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:12px;letter-spacing:.03em}
/* Job 6 (visual acceptance correction): this control represents a major
   mining-mode change (PPLNS/SOLO are never mixed), so it gets a slightly
   stronger selected/pressed state and a visible status word -- previously
   status was color-only (the dot) plus a screen-reader-only aria-label,
   which was too easy to miss/misread at a glance. Stays a compact
   segmented control, not a tab bar. */
#pane-stats .seg.mode-seg .rc-status-dot{ width:8px; height:8px; }
.mode-seg-name{ font-weight:700; }
.seg.mode-seg button .mode-seg-hash{color:var(--ink-2);font-variant-numeric:tabular-nums}
.mode-seg-stat{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.mode-seg-stat.live{color:var(--rc-live)}
.seg.mode-seg button[data-mode=pplns][aria-pressed=true]{background:rgba(242,169,0,.16);color:var(--btcg);box-shadow:inset 0 0 0 1px rgba(242,169,0,.4)}
.seg.mode-seg button[data-mode=solo][aria-pressed=true]{background:rgba(215,169,40,.16);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(215,169,40,.4)}
.seg.mode-seg button[aria-pressed=true] .mode-seg-hash{color:inherit;opacity:.95}
.seg.mode-seg button[aria-pressed=true] .mode-seg-stat.live{color:inherit}

.stat.clickable{cursor:pointer;transition:border-color .15s}
.stat.clickable:hover{border-color:var(--line-2)}
.stat.clickable:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ===================================================================
   Phase 8G -- My Stats visual polish. Scoped to #pane-stats so the Pool
   tab, Connect, Miners and FAQ (not in scope this phase) keep their
   existing look exactly as-is on this same page.

   3D dashboard pass (Job 3) upgrades this from a flat card + border to
   Depth Level 2 -- a raised module physically mounted to the section
   plate beneath it: brighter top/left edge, darker bottom/right, a real
   contact shadow, a directional material gradient. Still restrained --
   no glow, no gradient hue shift, no glassmorphism.
   =================================================================== */
#pane-stats .stat{
  border-radius:var(--rc-module-radius);
  background:var(--rc-module-bg);
  border-top-color:var(--rc-module-border-top);
  border-right-color:var(--rc-module-border-side);
  border-bottom-color:var(--rc-module-border-bottom);
  border-left-color:var(--rc-module-border-side);
  box-shadow:var(--rc-module-shadow);
}
#pane-stats .panel{
  border-radius:var(--rc-plate-radius);
  background:var(--rc-plate-bg);
  border-top-color:var(--rc-top-highlight);
  border-bottom-color:var(--rc-bottom-shade);
  box-shadow:var(--rc-plate-shadow);
}
#pane-stats .miner-head{ border-radius:var(--rc-module-radius); }

/* Clickable primary cards: a real <button> now (see markup), styled to
   match a plain .stat exactly, plus a deliberate hover lift and a
   distinct pressed state -- a control you press, not a link you click. */
#pane-stats button.stat.clickable{
  appearance:none; -webkit-appearance:none; margin:0;
  font:inherit; text-align:left; width:100%; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#pane-stats .stat.clickable:hover{
  transform:translateY(-1px);
  box-shadow:var(--rc-module-shadow-hover);
  border-color:var(--line-2);
}
#pane-stats .stat.clickable:active{
  transform:translateY(0);
  box-shadow:var(--rc-module-shadow-pressed);
}
@media (prefers-reduced-motion: reduce){
  #pane-stats .stat.clickable{ transition:none; }
  #pane-stats .stat.clickable:hover{ transform:none; }
}

/* Worker rows: same restrained lift/press language as the primary cards,
   applied per-row instead of per-card. */
#pane-stats tr.worker-row{ transition:background-color .12s ease; }
#pane-stats tr.worker-row:active td{ background:var(--rc-pressed-bg); }

/* Job 5 (3D dashboard pass): the PPLNS/SOLO control redesigned as a real
   physical two-position mode selector -- a serious mining-mode switch, not
   a marketing tab. HOUSING: recessed/inset base (Depth Level 3 treatment).
   UNSELECTED button: slightly raised off that base. SELECTED button:
   pressed INTO the surface, with a stronger inset shadow and a thin
   illuminated accent rail along its bottom edge in the mode's own color
   (green PPLNS / gold SOLO) -- restrained, not a glow. Still compact, never
   a giant tab. */
#pane-stats .seg.mode-seg{
  background:var(--rc-recess-bg); box-shadow:var(--rc-recess-shadow); padding:4px; gap:4px;
}
#pane-stats .seg.mode-seg button{
  transition:background-color .12s ease, color .12s ease, box-shadow .12s ease;
  background:var(--panel-2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.3);
  position:relative;
}
#pane-stats .seg.mode-seg button:active{ background:var(--rc-pressed-bg); }
#pane-stats .seg.mode-seg button[aria-pressed=true]{
  box-shadow:inset 0 3px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(0,0,0,.6);
}
#pane-stats .seg.mode-seg button[aria-pressed=true]::after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px; height:2px; border-radius:2px;
  background:currentColor; opacity:.85;
}

/* ---- Section rhythm: one consistent vertical gap between major blocks,
   replacing the ad-hoc inline margins with a single rule. ---- */
#pane-stats .sec-h{ margin-top:26px; }
#pane-stats .mode-seg-wrap{ margin-top:12px; }
#pane-stats .mstats-primary{ margin-top:14px; }

/* ---- Responsive: My Stats specifically, beyond the page's one 900px
   breakpoint. Card grids already reflow for free (CSS Grid auto-fit);
   these rules cover the pieces that don't. ---- */
@media (max-width:640px){
  #pane-stats .miner-head{ padding:12px 14px; }
  #pane-stats .miner-head-addr{ max-width:62vw; font-size:13px; }
  #pane-stats .seg.mode-seg{ width:100%; }
  #pane-stats .seg.mode-seg button{ flex:1; justify-content:center; }
  #pane-stats .rc-chart-panel-head{ gap:8px 10px; }
}
@media (max-width:420px){
  #pane-stats .miner-head-addr{ max-width:100%; }
  #pane-stats .miner-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  #pane-stats .seg.mode-seg button .mode-seg-hash{ display:none; } /* keep the control usable; the card below already shows the number */
  #pane-stats .seg.mode-seg button .mode-seg-stat{ display:none; } /* the status dot alone still conveys ACTIVE/quiet at this width */
  #pane-stats .worker-name-wrap{ max-width:38vw; }
}

.lookup{display:flex;gap:10px;flex-wrap:wrap}
.lookup input{flex:1;min-width:280px;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink);font-family:var(--mono);font-size:13.5px;padding:13px 15px}
.lookup input::placeholder{color:var(--ink-3)}

.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:3px;gap:2px}
.seg button{cursor:pointer;font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:5px 12px;border:0;border-radius:6px;background:transparent;color:var(--ink-3)}
.seg button[aria-pressed=true]{background:var(--line-2);color:var(--ink)}

.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 18px;font-size:13.5px}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;align-self:center}
.kv dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.callout{border-left:3px solid var(--gold);background:rgba(215,169,40,.06);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 16px;font-size:13.5px;color:var(--ink-2)}
.callout.green{border-left-color:var(--btcg);background:rgba(242,169,0,.05)}
.callout.red{border-left-color:var(--red);background:rgba(225,45,50,.06)}
.callout b{color:var(--ink)}

.hint{font-size:12.5px;color:var(--ink-2);opacity:.85;margin-top:10px}
.hint code{font-family:var(--mono);background:var(--panel-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;color:var(--ink-2);font-size:11.5px}

.mrow{display:flex;align-items:center;gap:10px}
.hw{width:30px;height:30px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font-size:13px;flex:none}

.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 16px;margin-bottom:8px}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--btcg);font-family:var(--mono);margin-right:10px}
.faq details[open] summary::before{content:"\2212"}
.faq details p{margin:0 0 14px;color:var(--ink-2);font-size:13.5px}

.databanner{margin-top:16px;border:1px dashed var(--line-2);background:var(--panel-2);border-radius:var(--r-sm);padding:10px 14px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em}

/* ---- block-found celebration ---- */
#blockfx{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
#blockfx .ring{position:absolute;left:50%;top:38%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:3px solid var(--btcg);opacity:0;animation:bfring 1100ms cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bfring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(46)}}
#blockfx .cf{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:0;animation:bffall var(--d,2600ms) ease-in forwards;animation-delay:var(--dl,0ms)}
@keyframes bffall{0%{opacity:0;transform:translateY(-10px) rotate(0)}8%{opacity:1}100%{opacity:.15;transform:translateY(102vh) rotate(720deg)}}
.block-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(160%);z-index:10000;max-width:calc(100vw - 32px);width:430px;
  background:linear-gradient(180deg,#0e1f1a,var(--panel));border:1px solid var(--btcg);border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(242,169,0,.15);padding:16px 18px;transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.block-toast.show{transform:translateX(-50%) translateY(0)}
.block-toast .bt-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.block-toast .bt-h .spark2{font-size:17px}
.block-toast .bt-sub{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:7px;line-height:1.7}
.block-toast .bt-sub b{color:var(--btcg)}
.block-toast .bt-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.block-toast .bt-x{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--ink-3);font-family:var(--mono);font-size:14px;background:none;border:0}
.block-toast .bt-x:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){#blockfx .ring,#blockfx .cf{animation:none;display:none}}

footer{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}