/* ==========================================================================
   SoloBlocks themes
   - Light (default): Mineshop.eu colours — white / green / black.
   - Dark: black + brand green (the original look was black + Bitcoin orange).
   Both themes use the same fonts, sizes and layout (Bebas Neue / Inter /
   IBM Plex Mono); only colours differ.
   assets/theme.js sets <html data-theme="light|dark"> before the page paints:
   the visitor's saved choice, otherwise the system (prefers-color-scheme).
   Every light rule is scoped to html:not([data-theme="dark"]), so dark mode
   simply falls back to the page styles.
   ========================================================================== */

/* ---------- Tokens used by the page stylesheets: DARK values ----------
   The dark theme used Bitcoin orange; since 2026-09-25 it uses brand green too (Mareks:
   orange is not our brand). #22c55e is a lighter shade of the Mineshop green (#00a73d),
   about as bright on black as the old orange was. */
:root {
  --accent-rgb: 34, 197, 94;            /* brand green tints (dark theme) */
  --neon-rgb: 0, 255, 136;              /* neon green tints */
  --header-bg: rgba(13, 17, 23, .97);
  --hairline: rgba(255, 255, 255, .08);
  --gold: #22c55e;
  --gold2: #4ade80;
  --neon: #00ff88;
}
html[data-theme="dark"] { color-scheme: dark; }
/* The page stylesheets still declare the old orange accent in their own :root; in the dark
   theme these win (html[...] beats :root), so every page gets the green accent. */
html[data-theme="dark"] {
  --accent-rgb: 34, 197, 94;
  --gold: #22c55e; --gold2: #4ade80; --gold-mid: #4ade80; --gold-hover: #16a34a;
  --gold-light: rgba(34, 197, 94, .12); --gold-glow: rgba(34, 197, 94, .18);
  --orange: #22c55e; --orange-dim: #16a34a; --border-focus: #22c55e;
}

/* ==========================================================================
   LIGHT — Mineshop.eu
   Palette taken from mineshop.eu (bg #fbfbfb, brand green #00A73D, text #111827).
   Colours only — never change fonts, sizes or spacing here.
   ========================================================================== */
html:not([data-theme="dark"]) {
  /* Surfaces */
  --bg: #fbfbfb;
  --s1: #ffffff;
  --s2: #f3f3f5;
  --s3: #e9eaee;
  --border: #e5e7eb;
  --border2: #d1d5db;

  /* Text */
  --text: #111827;
  --muted: #6b7280;
  --muted2: #9ca3af;
  --dim: #9ca3af;

  /* Brand green replaces Bitcoin orange as the accent */
  --accent-rgb: 0, 167, 61;
  --neon-rgb: 0, 167, 61;
  --gold: #00a73d;
  --gold2: #4caf53;
  --orange: #00a73d;
  --orange-dim: #008a32;

  /* Status colours, darkened for contrast on white */
  --green: #15803d;
  --neon: #15803d;
  --blue: #2563eb;
  --purple: #7c3aed;
  --red: #dc2626;
  --yellow: #ca8a04;
  --amber: #b45309;

  /* calculator.php names */
  --gold-hover: #008a32;
  --gold-light: rgba(0, 167, 61, .10);
  --gold-mid: #4caf53;
  --gold-glow: rgba(0, 167, 61, .15);
  --red-light: rgba(220, 38, 38, .08);
  --bg-white: #ffffff;
  --bg-subtle: #f3f3f5;
  --border-focus: #00a73d;
  --text-1: #111827;
  --text-2: #374151;
  --text-3: #6b7280;
  --text-4: #7b8290;
  --shadow: 0 1px 2px rgba(17, 24, 39, .06);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, .08);
  --shadow-lg: 0 10px 30px rgba(17, 24, 39, .10);

  /* Page tokens */
  --header-bg: rgba(255, 255, 255, .92);
  --hairline: rgba(17, 24, 39, .08);

  color-scheme: light;
}

html:not([data-theme="dark"]) body { background: var(--bg) !important; color: var(--text); }
html:not([data-theme="dark"]) ::selection { background: rgba(0, 167, 61, .18); }

/* Header / nav (all pages) */
html:not([data-theme="dark"]) :is(header, .hdr-wrap, nav.top, .topbar) { background: rgba(255, 255, 255, .92) !important; border-bottom-color: var(--border) !important; }
html:not([data-theme="dark"]) :is(.nav a, .nav-links a):hover { background: var(--s2) !important; color: var(--text) !important; }
html:not([data-theme="dark"]) .logo-name b { color: var(--gold) !important; }

/* Price chip: brand green */
html:not([data-theme="dark"]) .btc-chip { background: #00a73d !important; color: #fff !important; border-color: #00a73d !important; }
html:not([data-theme="dark"]) :is(.live-d, .live-dot) { background: var(--gold) !important; box-shadow: none !important; }

/* Footer: same layout as dark, light colours */
html:not([data-theme="dark"]) footer a { color: var(--gold) !important; }

/* Primary buttons: black, like mineshop.eu */
html:not([data-theme="dark"]) :is(.cta-btn, .pg.act, button[type="submit"]) {
  background: #111827 !important; border-color: #111827 !important; color: #fff !important; box-shadow: none !important;
}
html:not([data-theme="dark"]) :is(.cta-btn, button[type="submit"]):hover { background: #00a73d !important; border-color: #00a73d !important; }

/* Elements that sat on dark backgrounds */
html:not([data-theme="dark"]) :is(.mega-pool-tag, .pool-tag, .pool-badge) { background: #fff !important; }
html:not([data-theme="dark"]) .mega-hero-btc { color: rgba(var(--accent-rgb), .06) !important; }

/* pools.php */
html:not([data-theme="dark"]) .top3-card.gold   { background: linear-gradient(135deg, #fffbeb, #ffffff); }
html:not([data-theme="dark"]) .top3-card.silver { background: linear-gradient(135deg, #f8fafc, #ffffff); }
html:not([data-theme="dark"]) .top3-card.bronze { background: linear-gradient(135deg, #fff7ed, #ffffff); }
html:not([data-theme="dark"]) .top3-card.gold   .top3-luck { color: #b45309; }
html:not([data-theme="dark"]) .top3-card.silver .top3-luck { color: #475569; }
html:not([data-theme="dark"]) .top3-card.bronze .top3-luck { color: #c2410c; }
html:not([data-theme="dark"]) tbody tr:hover { background: rgba(var(--accent-rgb), .05); }
html:not([data-theme="dark"]) .pool-expand { background: #f9fafb; }
html:not([data-theme="dark"]) .fml-box { background: var(--s1); }
html:not([data-theme="dark"]) .calc-hd { background: linear-gradient(135deg, #f0fdf4, #ffffff); }
html:not([data-theme="dark"]) .connect-cmd { color: #15803d; background: var(--s2); }
html:not([data-theme="dark"]) .connect-cmd:hover { border-color: #2563eb; }
html:not([data-theme="dark"]) .fv { color: #2563eb; }
html:not([data-theme="dark"]) .fn { color: #b45309; }
html:not([data-theme="dark"]) .exp-stat-val.blue { color: #2563eb; }
html:not([data-theme="dark"]) :is(.lb-cold, .hb-lbl.c-cold span) { color: #2563eb; }

/* ==========================================================================
   Theme toggle button (both themes) — inserted by assets/theme.js
   ========================================================================== */
#theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; margin-right: 6px;
  border-radius: 8px; border: 1px solid var(--border, #30363d);
  background: transparent; color: var(--text, #e6edf3);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color .15s, color .15s;
}
#theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
#theme-toggle.floating {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 40px; height: 40px; margin: 0;
  border-radius: 50%; background: var(--s1, #161b22); box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* ==========================================================================
   Shared site header (partials/header.php) — identical on every page
   ========================================================================== */
:root {
  --hdr-bg: rgba(13, 17, 23, .97);
  --hdr-border: #30363d;
  --hdr-text: #e6edf3;
  --hdr-muted: #8b949e;
  --hdr-hover: #21262d;
  --hdr-accent: #22c55e;
  --hdr-font: 'Inter', sans-serif;
  --hdr-logo-font: 'Bebas Neue', sans-serif;
  --hdr-logo-size: 21px;
  --hdr-logo-ls: 2px;
  --hdr-price-bg: rgba(34, 197, 94, .12);
  --hdr-price-fg: #22c55e;
  --hdr-price-border: rgba(34, 197, 94, .25);
}
html:not([data-theme="dark"]) {
  --hdr-bg: rgba(255, 255, 255, .92);
  --hdr-border: #e5e7eb;
  --hdr-text: #111827;
  --hdr-muted: #6b7280;
  --hdr-hover: #f3f3f5;
  --hdr-accent: #00a73d;
  --hdr-price-bg: #00a73d;             /* brand green, same as the Connect / Calculate buttons */
  --hdr-price-fg: #ffffff;
  --hdr-price-border: #00a73d;
}

.sb-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--hdr-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hdr-border);
  font-family: var(--hdr-font); line-height: 1.4;
}
.sb-header * { box-sizing: border-box; }
.sb-hdr {
  max-width: 1440px; margin: 0 auto; padding: 0 24px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sb-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.sb-logo svg { display: block; flex-shrink: 0; }
.sb-logo-words { display: flex; flex-direction: column; }
.sb-logo-name {
  font-family: var(--hdr-logo-font); font-size: var(--hdr-logo-size); font-weight: 700;
  letter-spacing: var(--hdr-logo-ls); color: var(--hdr-text); line-height: 1;
}
.sb-logo-name b { color: var(--hdr-accent); font-weight: inherit; }
.sb-logo-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--hdr-muted); margin-top: 3px; white-space: nowrap;
}

/* Logo mark "Hash Block": a # (hashing, block numbers) with one glowing block in the centre.
   Loops forever (6 s): the centre empties, a small block runs clockwise around the #
   twice (miners trying), then the found block drops into the centre and stays ~3 s. */
:root { --mark-ink: #e6edf3; --mark-hi: #4ade80; --mark-acc: #22c55e; --mark-lo: #15803d; }
html:not([data-theme="dark"]) { --mark-ink: #111827; --mark-hi: #35c46a; --mark-acc: #00a73d; --mark-lo: #007a2c; }
.sb-logo .sb-mark { height: 34px; width: auto; overflow: visible; }
.sb-mark .sbm-bars { fill: var(--mark-ink); }
.sb-mark .sbm-s1 { stop-color: var(--mark-hi); }
.sb-mark .sbm-s2 { stop-color: var(--mark-acc); }
.sb-mark .sbm-ex { fill: var(--mark-lo); }
.sb-mark .sbm-try, .sb-mark .sbm-glow { fill: var(--mark-acc); }
.sb-mark .sbm-try { opacity: 0; animation: sbm-run 6s infinite; animation-delay: calc(.3s + var(--i) * .15s); }
.sb-mark .sbm-blk { transform-box: fill-box; transform-origin: 50% 50%; animation: sbm-land 6s infinite cubic-bezier(.2, .8, .3, 1); }
.sb-mark .sbm-glow { opacity: .5; animation: sbm-glow 6s infinite; }
html:not([data-theme="dark"]) .sb-mark .sbm-glow { display: none; }
/* one square: lit 0.15 s, then a short fading trail; the 2nd lap starts 1.2 s (20%) later */
@keyframes sbm-run {
  0% { opacity: 0; } 1% { opacity: 1; } 3.5% { opacity: .45; } 6% { opacity: 0; }
  20% { opacity: 0; } 21% { opacity: 1; } 23.5% { opacity: .45; } 26%, 100% { opacity: 0; }
}
@keyframes sbm-land {
  0% { opacity: 1; transform: none; }
  4% { opacity: 0; transform: scale(.6); }
  44% { opacity: 0; transform: translateY(-16px) scale(.5); }
  50% { opacity: 1; transform: translateY(0) scale(1.12); }
  55% { transform: scale(.96); }
  60%, 100% { opacity: 1; transform: none; }
}
@keyframes sbm-glow { 0% { opacity: .5; } 4%, 49% { opacity: 0; } 53% { opacity: 1; } 75%, 100% { opacity: .5; } }
/* Visitors who turned on "reduce motion" get the finished logo, no animation */
@media (prefers-reduced-motion: reduce) {
  .sb-mark .sbm-try, .sb-mark .sbm-blk, .sb-mark .sbm-glow { animation: none; }
}
.sb-nav { display: flex; align-items: center; gap: 4px; }
.sb-nav a {
  padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: .2px;
  color: var(--hdr-muted); text-decoration: none; white-space: nowrap; transition: color .15s, background .15s;
}
.sb-nav a:hover, .sb-nav a.active { color: var(--hdr-text); background: var(--hdr-hover); }
.sb-hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sb-price {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px;
  background: var(--hdr-price-bg); color: var(--hdr-price-fg); border: 1px solid var(--hdr-price-border);
}
.sb-live {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 700; color: #16a34a;
  background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .22);
}
.sb-live-d { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: sb-pulse 1.8s ease-in-out infinite; }
@keyframes sb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* The theme toggle sits in the header, same look on every page */
.sb-header #theme-toggle { border-color: var(--hdr-border); color: var(--hdr-text); margin-right: 0; }
.sb-header #theme-toggle:hover { border-color: var(--hdr-accent); color: var(--hdr-accent); }

/* Tablet / mobile: menu moves to its own row and scrolls sideways */
@media (max-width: 1080px) {
  .sb-hdr { flex-wrap: wrap; height: auto; padding: 10px 16px 0; row-gap: 0; }
  .sb-nav {
    order: 3; width: 100%; margin-top: 10px; padding: 6px 0;
    border-top: 1px solid var(--hdr-border);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sb-nav::-webkit-scrollbar { display: none; }
  .sb-nav a { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .sb-logo-tag { display: none; }
  .sb-logo .sb-mark { height: 27px; }
  .sb-logo-name { font-size: calc(var(--hdr-logo-size) - 3px); }
  .sb-live-txt { display: none; }
  .sb-hdr-right { gap: 6px; }
  .sb-nav a { padding: 6px 10px; font-size: 12px; }
}
/* Guard against page stylesheets that target bare elements (e.g. pools.php "nav{flex-wrap:wrap}") */
.sb-header .sb-nav { flex-wrap: nowrap; padding: 0; margin: 0; }
.sb-header a { text-decoration: none; }
@media (max-width: 1080px) {
  .sb-header .sb-nav { padding: 6px 0; margin-top: 10px; }
}

/* ==========================================================================
   LIGHT — readability fixes (colours only)
   Pale greys/greens/yellows/blues that were made for a black background are
   too faint on white. Found with a contrast scan of every page.
   ========================================================================== */
html:not([data-theme="dark"]) {
  --muted2: #7b8290;
  --dim: #7b8290;
}

/* Pool identity colours printed inline by PHP (pool_color()) / set by JS: darker shade on white */
html:not([data-theme="dark"]) :is([style*="color:#58a6ff"], [style*="color:#60a5fa"], [style*="color: #58a6ff"]) { color: #2563eb !important; }
html:not([data-theme="dark"]) :is([style*="color:#f7931a"], [style*="color: #f7931a"]) { color: #c2410c !important; }
html:not([data-theme="dark"]) :is([style*="color:#3fb950"], [style*="color:#00ff88"], [style*="color:#4ade80"], [style*="rgb(74, 222, 128)"]) { color: #15803d !important; }
html:not([data-theme="dark"]) :is([style*="color:#a78bfa"], [style*="color:#bc8cff"]) { color: #7c3aed !important; }
html:not([data-theme="dark"]) :is([style*="color:#f87171"], [style*="rgb(248, 113, 113)"]) { color: #dc2626 !important; }
html:not([data-theme="dark"]) :is([style*="color:#facc15"], [style*="rgb(250, 204, 21)"]) { color: #a16207 !important; }
html:not([data-theme="dark"]) [style*="color:#8b949e"] { color: #6b7280 !important; }

/* index.php / block.php */
html:not([data-theme="dark"]) .share-btn-img { color: #2563eb; border-color: rgba(37, 99, 235, .3); background: rgba(37, 99, 235, .06); }
html:not([data-theme="dark"]) .bh-pool { background: #fff !important; }

/* pools.php luck colours */
html:not([data-theme="dark"]) .lb-hot  { color: #dc2626; }
html:not([data-theme="dark"]) .lb-good { color: #15803d; }
html:not([data-theme="dark"]) .lb-ok   { color: #a16207; }
html:not([data-theme="dark"]) .hb-lbl.c-hot span  { color: #dc2626; }
html:not([data-theme="dark"]) .hb-lbl.c-good span { color: #15803d; }
html:not([data-theme="dark"]) .hb-lbl.c-ok span   { color: #a16207; }
html:not([data-theme="dark"]) :is(.cr-val.cr-g, .cmp-earn, .td-usd, .exp-stat-val.green, .copy-flash) { color: #15803d; }
html:not([data-theme="dark"]) .cr-val.cr-r { color: #dc2626; }
html:not([data-theme="dark"]) :is(.live-badge, .live-chip) { color: #15803d; }
html:not([data-theme="dark"]) .rank.t1 { color: #b45309; }
html:not([data-theme="dark"]) .rank.t2 { color: #64748b; }

/* Pool Rankings embed snippet: light code colours (GitHub light) */
html:not([data-theme="dark"]) {
  --code-tag: #cf222e;
  --code-attr: #0550ae;
  --code-val: #0a3069;
}

/* 3D emoji images (assets/emoji3d.js) — same size as the text emoji they replace, both themes */
img.e3d {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 .05em;
  vertical-align: -0.22em;
  object-fit: contain;
}

/* ==========================================================================
   Sticker cards: big tilted 3D icon in the top-right corner of a card, a soft
   glow in the card's own colour and a small accent bar that grows on hover.
   Used for Calculator stats, Pool Rankings how-it-works, Alerts and Firmware
   cards. Heading icons: bare tilted 3D icon, no tile. Both themes, same sizes.
   ========================================================================== */
html body :is(.stats-grid .stat-card, .hw-card, .feat, .feat-card, .compat-card, .wn-card) {
  --sc: #f59e0b;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sc) 20%, transparent), transparent 58%),
    var(--bg-white, var(--s1));
}
/* colours: calculator by stat, other grids cycle through the same six */
html body :is(.hw-card.ca, .feat:nth-child(6n+1), .feat-card:nth-child(6n+1), .compat-card:nth-child(6n+1), .wn-card:nth-child(6n+1)) { --sc: #f59e0b; }
html body :is(.hw-card.cb, .feat:nth-child(6n+2), .feat-card:nth-child(6n+2), .compat-card:nth-child(6n+2), .wn-card:nth-child(6n+2)) { --sc: #3b82f6; }
html body :is(.hw-card.cc, .feat:nth-child(6n+3), .feat-card:nth-child(6n+3), .compat-card:nth-child(6n+3), .wn-card:nth-child(6n+3)) { --sc: #10b981; }
html body :is(.feat:nth-child(6n+4), .feat-card:nth-child(6n+4), .compat-card:nth-child(6n+4), .wn-card:nth-child(6n+4)) { --sc: #8b5cf6; }
html body :is(.feat:nth-child(6n+5), .feat-card:nth-child(6n+5), .compat-card:nth-child(6n+5), .wn-card:nth-child(6n+5)) { --sc: #ef4444; }
html body :is(.feat:nth-child(6n+6), .feat-card:nth-child(6n+6), .compat-card:nth-child(6n+6), .wn-card:nth-child(6n+6)) { --sc: #ec4899; }
html body .stats-grid .stat-card:nth-child(1) { --sc: #ef4444; }
html body .stats-grid .stat-card:nth-child(2) { --sc: #f59e0b; }
html body .stats-grid .stat-card:nth-child(3) { --sc: #3b82f6; }
html body .stats-grid .stat-card:nth-child(4) { --sc: #eab308; }
html body .stats-grid .stat-card:nth-child(5) { --sc: #f97316; }
html body .stats-grid .stat-card:nth-child(6) { --sc: #8b5cf6; }

html body :is(.stats-grid .stat-card, .hw-card, .feat, .feat-card, .compat-card, .wn-card):hover { border-color: color-mix(in srgb, var(--sc) 45%, transparent); }
/* accent bar (replaces the old 2px top lines) */
html body :is(.hw-card, .feat-card)[class]::before,
html body :is(.hw-card, .feat-card)[class]:hover::before { content: none; }
html body :is(.stats-grid .stat-card, .hw-card, .feat, .feat-card, .compat-card, .wn-card)::after {
  content: '';
  position: absolute;
  left: 18px; bottom: 0;
  width: 34px; height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--sc);
  transition: width .3s ease;
}
html body :is(.stats-grid .stat-card, .hw-card, .feat, .feat-card, .compat-card, .wn-card):hover::after { width: calc(100% - 36px); }

/* the corner sticker icon */
html body :is(.stats-grid .sc-icon, .hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon, .compat-card .compat-icon, .wn-card .wn-icon) {
  position: absolute;
  top: -12px; right: -10px;
  width: auto; height: auto;
  margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none;
  font-size: 56px; line-height: 1;
  pointer-events: none;
}
html body :is(.stats-grid .sc-icon, .hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon, .compat-card .compat-icon, .wn-card .wn-icon) img.e3d {
  width: 68px; height: 68px; margin: 0;
  transform: rotate(-14deg);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25));
  transition: transform .3s ease;
}
html body :is(.stats-grid .stat-card, .hw-card, .feat, .feat-card, .compat-card, .wn-card):hover img.e3d { transform: rotate(0deg) scale(1.08) translate(-4px, 4px); }
html body :is(.hw-card, .feat-card) :is(.hw-icon, .feat-icon) img.e3d { width: 80px; height: 80px; }
/* keep text above the sticker; titles leave room for it */
html body :is(.stats-grid .stat-card, .hw-card, .feat, .feat-card, .compat-card, .wn-card) > :not(:is(.sc-icon, .hw-icon, .feat-icon, .compat-icon, .wn-icon)) { position: relative; z-index: 1; }
/* text-heavy cards: the sticker floats so the text flows around it */
html body :is(.hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon) {
  position: relative;
  top: auto; right: auto;
  float: right;
  display: block;
  width: 68px; height: 78px;
  margin: -34px -30px 0 10px;
}
html body :is(.hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon) img.e3d { position: absolute; top: 0; right: 0; }
html body .feat :is(.feat-icon) img.e3d { width: 64px; height: 64px; }
html body .feat .feat-icon { width: 54px; height: 62px; margin: -30px -28px 0 8px; }
@media (max-width: 640px) {
  html body :is(.hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon) { width: 54px; height: 62px; margin: -22px -16px 0 8px; }
  html body :is(.hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon) img.e3d { width: 58px; height: 58px; }
}
@media (max-width: 640px) {
  html body :is(.stats-grid .sc-icon, .hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon, .compat-card .compat-icon, .wn-card .wn-icon) { top: -8px; right: -8px; }
  html body :is(.stats-grid .sc-icon, .hw-card .hw-icon, .feat .feat-icon, .feat-card .feat-icon, .compat-card .compat-icon, .wn-card .wn-icon) img.e3d { width: 52px; height: 52px; }
}
/* Firmware device cards: a small 3D model of each miner (inline SVG from
   assets/devices/, made by _mockups/devices-src/build.js), whole and centred on the
   right edge. Fans spin slowly and speed up on hover; warm air and Wi-Fi pulse. */
html body .compat-card { padding-right: 124px; min-height: 104px; }
html body .compat-card .compat-icon { top: 50%; right: 12px; transform: translateY(-50%); }
.compat-icon .dev3d { display: block; width: 104px; height: 78px; overflow: visible; filter: drop-shadow(0 9px 7px rgba(15, 23, 42, .22)); transition: transform .3s ease; }
.compat-card:hover .dev3d { transform: translateY(-3px) scale(1.04); }
.dev3d .fan { animation: sb-fan 6s linear infinite; }
.compat-card:hover .dev3d .fan { animation-duration: .9s; }
@keyframes sb-fan { to { transform: rotate(360deg); } }
.dev3d .heat { animation: sb-heat 2.6s ease-in-out infinite; }
@keyframes sb-heat { 0%, 100% { opacity: .3; transform: translateY(1.5px); } 50% { opacity: 1; transform: translateY(-1.5px); } }
.dev3d .wifi path { animation: sb-wifi 2.4s ease-in-out infinite; }
.dev3d .wifi path:nth-child(2) { animation-delay: .3s; }
.dev3d .wifi path:nth-child(3) { animation-delay: .6s; }
@keyframes sb-wifi { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dev3d * { animation: none !important; } }
/* Firmware "What's New": icon whole on the right edge, not half outside the corner */
html body .wn-card > div:not(.wn-icon) { padding-right: 64px; }
html body .wn-card .wn-icon { top: 50%; right: 16px; transform: translateY(-50%); }
html body .wn-card .wn-icon img.e3d { width: 50px; height: 50px; }

/* Heading icons: bare, a bit bigger, tilted, with a soft shadow */
html body :is(.e3d-badge, .panel-heading-icon, .card-title-icon) {
  display: inline-grid;
  place-items: center;
  width: auto; height: auto;
  flex: 0 0 auto;
  margin-right: 10px;
  border: 0; background: none; box-shadow: none;
  line-height: 1;
  vertical-align: middle;
}
html body :is(.e3d-badge, .panel-heading-icon, .card-title-icon) img.e3d {
  width: 1.45em; height: 1.45em; margin: 0;
  transform: rotate(-10deg);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .22));
}
html body .panel-heading-icon, html body .card-title-icon { font-size: 22px; margin-right: 0; }
html body .card-title-icon { font-size: 18px; }
html body .diff-chart-title .e3d-badge img.e3d { width: 1.6em; height: 1.6em; }

/* ==========================================================================
   Fold sections ("dropdowns") — <details class="sb-fold"><summary>Title…</summary>
   <div class="sb-fold-body">…</div></details>. Closed by default, so only the
   title shows; a click opens it. Used for explanations and secondary info on
   every page. assets/fold.js adds the open/close animation.
   Variants: .sb-fold-sec = a full section folded behind a title bar.
   ========================================================================== */
:root { --fold-line: #30363d; --fold-muted: #8b949e; --fold-bg: #161b22; }
html:not([data-theme="dark"]) { --fold-line: #e5e7eb; --fold-muted: #6b7280; --fold-bg: #ffffff; }
.sb-fold > summary {
  display: flex; align-items: center; gap: 10px;
  list-style: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.sb-fold > summary::-webkit-details-marker { display: none; }
.sb-fold > summary::marker { content: ""; }
.sb-fold > summary:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .6); outline-offset: 3px; border-radius: 10px; }
.sb-fold:not([open]) > summary { margin-bottom: 0; }
/* Round chevron button on the right of the title */
.sb-fold-chev {
  order: 9; margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--fold-line); color: var(--fold-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.sb-fold-chev::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease;
}
.sb-fold[open]:not(.sb-fold-closing) > summary .sb-fold-chev::before { transform: translateY(2px) rotate(-135deg); }
.sb-fold > summary:hover .sb-fold-chev,
.sb-fold[open] > summary .sb-fold-chev { border-color: var(--hdr-accent); color: var(--hdr-accent); background: rgba(var(--accent-rgb), .08); }
/* "Show" / "Hide" text next to the chevron on big section folds */
.sb-fold-hint { order: 8; margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--fold-muted); white-space: nowrap; }
.sb-fold-hint::before { content: "Show"; }
.sb-fold[open]:not(.sb-fold-closing) > summary .sb-fold-hint::before { content: "Hide"; }
.sb-fold-hint + .sb-fold-chev { margin-left: 0; }
.sb-fold > summary:hover .sb-fold-hint { color: var(--hdr-accent); }

/* A whole page section folded behind a title bar */
.sb-fold-sec { margin-bottom: 24px; }
.sb-fold-sec > summary {
  padding: 18px 22px; background: var(--fold-bg); border: 1px solid var(--fold-line); border-radius: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.sb-fold-sec > summary:hover { border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 6px 18px -12px rgba(var(--accent-rgb), .5); }
.sb-fold-sec[open] > summary { margin-bottom: 16px; border-color: rgba(var(--accent-rgb), .35); }
.sb-fold-sec > summary .sb-fold-chev { width: 30px; height: 30px; }
@media (max-width: 600px) { .sb-fold-sec > summary { padding: 14px 16px; } .sb-fold-hint { display: none; } }
@media print { .sb-fold > .sb-fold-body { display: block !important; } }

/* ==========================================================================
   Shared site footer (partials/footer.php) — identical on every page.
   Uses the header tokens (--hdr-*), so it looks the same whatever colours a page declares.
   ========================================================================== */
.sb-footer {
  margin-top: 48px; background: var(--s1, #161b22); border-top: 1px solid var(--hdr-border);
  font-family: var(--hdr-font); font-size: 13px; line-height: 1.6; color: var(--hdr-muted);
  text-align: left;
}
.sb-footer * { box-sizing: border-box; }
.sb-footer a { color: var(--hdr-muted); text-decoration: none; transition: color .15s; }
.sb-footer a:hover { color: var(--hdr-accent); text-decoration: none; }
.sb-ft {
  max-width: 1440px; margin: 0 auto; padding: 40px 24px 30px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px;
}
.sb-ft-logo { display: inline-flex; align-items: center; gap: 9px; }
.sb-ft-mark { height: 26px; width: auto; overflow: visible; }
.sb-ft-bars { fill: var(--mark-ink); }
.sb-ft-blk { fill: var(--mark-acc); }
.sb-footer .sb-ft-name {
  font-family: var(--hdr-logo-font); font-size: 20px; letter-spacing: var(--hdr-logo-ls); line-height: 1;
  color: var(--hdr-text);
}
.sb-ft-name b { color: var(--hdr-accent); font-weight: inherit; }
.sb-ft-brand p { margin: 12px 0 14px; max-width: 360px; }
.sb-footer .sb-ft-x {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--hdr-border); color: var(--hdr-text); font-weight: 600; font-size: 12.5px;
}
.sb-footer .sb-ft-x:hover { border-color: var(--hdr-accent); }
.sb-ft-col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.sb-ft-h {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--hdr-text); margin-bottom: 4px;
}
.sb-ft-note, .sb-ft-bottom { max-width: 1440px; margin: 0 auto; padding: 14px 24px; border-top: 1px solid var(--hdr-border); }
.sb-ft-note { font-size: 12px; }
.sb-ft-bottom { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: 12px; }
.sb-footer .sb-ft-note a, .sb-footer .sb-ft-bottom a { color: var(--hdr-accent); }
@media (max-width: 860px) {
  .sb-ft { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; padding: 32px 16px 24px; }
  .sb-ft-brand { grid-column: 1 / -1; }
  .sb-ft-note, .sb-ft-bottom { padding: 14px 16px; }
  .sb-ft-bottom { flex-direction: column; }
}
@media print { .sb-footer { display: none; } }

/* ==========================================================================
   Cookie consent banner (assets/consent.js)
   ========================================================================== */
.sb-consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 1000; box-sizing: border-box;
  width: calc(100% - 32px); max-width: 440px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--s1, #161b22); color: var(--hdr-muted); border: 1px solid var(--hdr-border); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .35); font-family: var(--hdr-font); font-size: 13px; line-height: 1.55;
  opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.sb-consent.show { opacity: 1; transform: none; pointer-events: auto; }
.sb-consent-txt b { display: block; margin-bottom: 3px; color: var(--hdr-text); font-size: 14px; }
.sb-consent-txt a { color: var(--hdr-accent); text-decoration: underline; text-underline-offset: 2px; }
.sb-consent-btns { display: flex; gap: 8px; }
.sb-consent .sb-consent-btns button {
  flex: 1; margin: 0; padding: 10px 14px; border-radius: 9px; cursor: pointer;
  font-family: var(--hdr-font); font-size: 13px; font-weight: 700; line-height: 1.2;
  border: 1px solid var(--hdr-border); background: var(--hdr-hover); color: var(--hdr-text);
  transition: filter .15s, border-color .15s;
}
.sb-consent .sb-consent-btns button:hover { border-color: var(--hdr-accent); }
.sb-consent .sb-consent-btns .sb-consent-yes { background: var(--hdr-accent); border-color: var(--hdr-accent); color: #052e16; }
html:not([data-theme="dark"]) .sb-consent { box-shadow: 0 16px 44px rgba(17, 24, 39, .16); }
html:not([data-theme="dark"]) .sb-consent .sb-consent-btns .sb-consent-yes { color: #fff; }
.sb-consent .sb-consent-btns .sb-consent-yes:hover { filter: brightness(1.08); }
@media (max-width: 520px) {
  .sb-consent { left: 8px; bottom: 8px; width: calc(100% - 16px); padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sb-consent { transition: none; } }
@media print { .sb-consent { display: none; } }

/* ==========================================================================
   Text pages: privacy policy, terms, 404 (privacy.php, terms.php, partials/404.php)
   ========================================================================== */
.sb-doc { max-width: 820px; margin: 0 auto; padding: 36px 24px 24px; color: var(--text); font-size: 15px; line-height: 1.7; }
.sb-doc .sb-doc-crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.sb-doc .sb-doc-crumbs a { color: var(--muted); }
.sb-doc h1 {
  font-family: var(--f-display, 'Bebas Neue', sans-serif); font-weight: 400; font-size: clamp(40px, 6vw, 58px);
  letter-spacing: 2px; line-height: 1; margin: 0 0 10px; color: var(--text);
}
.sb-doc h1 span { color: var(--gold); }
.sb-doc .sb-doc-date { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin: 0 0 26px; }
.sb-doc h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3; color: var(--text);
  margin: 38px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); scroll-margin-top: 90px;
}
.sb-doc h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 22px 0 8px; scroll-margin-top: 90px; }
.sb-doc p, .sb-doc ul, .sb-doc ol { margin: 0 0 14px; }
.sb-doc ul, .sb-doc ol { padding-left: 22px; }
.sb-doc li { margin-bottom: 6px; }
.sb-doc li::marker { color: var(--gold); }
.sb-doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.sb-doc strong { color: var(--text); }
.sb-doc code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: var(--s2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.sb-doc .sb-doc-box {
  background: var(--s1); border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 18px 22px; margin: 0 0 22px;
}
.sb-doc .sb-doc-box ul { margin: 0; }
.sb-doc .sb-doc-toc { background: var(--s1); border: 1px solid var(--border); border-radius: 12px; padding: 16px 22px; margin: 0 0 8px; font-size: 14px; }
.sb-doc .sb-doc-toc b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sb-doc .sb-doc-toc ol { margin: 0; columns: 2; column-gap: 28px; }
.sb-doc .sb-doc-toc a { text-decoration: none; }
.sb-doc .sb-doc-table { width: 100%; overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--border); border-radius: 12px; }
.sb-doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.55; min-width: 560px; }
.sb-doc th, .sb-doc td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.sb-doc th { background: var(--s2); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sb-doc tr:last-child td { border-bottom: 0; }
.sb-doc address { font-style: normal; }
@media (max-width: 600px) {
  .sb-doc { padding: 24px 16px 12px; font-size: 14.5px; }
  .sb-doc .sb-doc-toc ol { columns: 1; }
}