/* ═══════════════════════════════════════════════════════════════════════
   Wolf Theme System — shared across all pages
   Include this BEFORE page-specific <style> blocks.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;   /* native <select> option popups render dark (fixes Windows/Chrome
                           white-on-white dropdown text in dark mode); light mode overrides below */
  --accent: #CC2030; --accent2: #FF3344; --accent-rgb: 204,32,48;
  --glass-bg: rgba(255,255,255,.04); --glass-border: rgba(255,255,255,.08);
  --surface: rgba(14,14,18,.72); --surface2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.09); --fg: #e8eaf0; --fg-dim: #8a8fa8;
  --glow-red: 0 0 32px rgba(204,32,48,.35);
  --bg-overlay-opacity: 0.85;
  /* legacy aliases — keep existing page styles working */
  --primary: #CC2030; --secondary: #FF3344;
  --error: #f87171; --danger: #CC2030; --danger2: #FF3344;
  --success: #34d399; --warn: #fbbf24;
}

/* ── Anti-flash canvas (accessibility) ─────────────────────────────────────
   The dark look is painted by body::before (a fixed layer) and light-mode by a
   body class set by JS after load — so html/body themselves had NO solid colour.
   Chrome/Firefox honour color-scheme for the canvas, but SAFARI paints the canvas
   WHITE during navigation/iframe-load before body::before renders → a full-white
   flash on every dark-mode page switch. A white strobe is a photosensitive-seizure
   risk, so give html a solid dark base that paints on the FIRST frame (render-blocking
   CSS), before body::before or any JS. theme.js's pre-paint bootstrap adds .pref-light
   for light-mode users so they don't get the inverse (dark) flash. */
html { background-color: #08080c; }
html.pref-light { background-color: #f0f2f8; }

/* ── Animated mesh background ──────────────────────────────────────────── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,  rgba(var(--accent-rgb),.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(var(--accent-rgb),.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(var(--accent-rgb),.05) 0%, transparent 70%),
    linear-gradient(160deg, #0c0c10 0%, #09090d 40%, #0d0d12 100%);
}
body.bg-void::before        { background: #060606; }
body.bg-aurora::before      { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(var(--accent-rgb),.28) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(14,165,233,.18) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139,92,246,.10) 0%, transparent 70%), #080808; }
body.bg-blueprint::before   { background: linear-gradient(rgba(14,165,233,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,.13) 1px, transparent 1px), #040c14; background-size: 32px 32px, 32px 32px, auto; }
body.bg-carbon::before      { background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 6px), #0a0a0a; }
body.bg-dots::before        { background: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px) 16px 16px / 16px 16px, #06060e; }
body.bg-topographic::before { background: repeating-radial-gradient(ellipse 70% 50% at 50% 50%, transparent 0, transparent 8px, rgba(255,255,255,.07) 9px, transparent 10px), #080a08; }
body.bg-space::before       { background: radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.85) 0%, transparent 100%), radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,.70) 0%, transparent 100%), radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.50) 0%, transparent 100%), radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,.65) 0%, transparent 100%), #020208; }
body.bg-nebula::before      { background: radial-gradient(ellipse 90% 70% at 20% 10%, rgba(139,92,246,.25) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 85% 85%, rgba(236,72,153,.22) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 50% 60%, rgba(6,182,212,.18) 0%, transparent 60%), radial-gradient(1.5px 1.5px at 25% 35%, #fff 0%, transparent 100%), radial-gradient(2px 2px at 70% 20%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 80% 75%, #a78bfa 0%, transparent 100%), radial-gradient(1.5px 1.5px at 15% 80%, #38bdf8 0%, transparent 100%), linear-gradient(175deg, #05050d 0%, #080614 50%, #03040a 100%); }
body.bg-cyberpunk::before   { background: linear-gradient(180deg, transparent 55%, rgba(244,63,94,.18) 75%, rgba(6,182,212,.25) 100%), linear-gradient(rgba(6,182,212,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,.16) 1px, transparent 1px), radial-gradient(circle 320px at 50% 65%, rgba(244,63,94,.28) 0%, transparent 70%), #05050c; background-size: 100% 100%, 48px 48px, 48px 48px, 100% 100%, auto; }
body.bg-supernova::before   { background: radial-gradient(circle 450px at 50% 35%, rgba(239,68,68,.32) 0%, rgba(249,115,22,.22) 40%, rgba(234,179,8,.08) 65%, transparent 80%), radial-gradient(ellipse 90% 40% at 50% 40%, rgba(255,255,255,.15) 0%, transparent 60%), radial-gradient(2px 2px at 20% 15%, #fef08a 0%, transparent 100%), radial-gradient(1.5px 1.5px at 80% 25%, #fed7aa 0%, transparent 100%), radial-gradient(1px 1px at 30% 85%, #fca5a5 0%, transparent 100%), linear-gradient(180deg, #0d0505 0%, #080303 60%, #040202 100%); }
body.bg-warp::before        { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(56,189,248,.22) 0%, transparent 65%), repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 40px, rgba(14,165,233,.08) 42px, transparent 45px), radial-gradient(1px 40px at 15% 30%, rgba(255,255,255,.8) 0%, transparent 100%), radial-gradient(1px 60px at 85% 60%, rgba(255,255,255,.7) 0%, transparent 100%), radial-gradient(1.5px 50px at 45% 80%, rgba(56,189,248,.9) 0%, transparent 100%), radial-gradient(1px 70px at 75% 20%, rgba(168,85,247,.8) 0%, transparent 100%), #02040a; }
body.bg-fantasy::before     { background: radial-gradient(ellipse 80% 60% at 20% 90%, rgba(16,185,129,.24) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 15%, rgba(6,182,212,.22) 0%, transparent 55%), radial-gradient(circle 250px at 50% 40%, rgba(168,85,247,.16) 0%, transparent 70%), radial-gradient(2.5px 2.5px at 30% 70%, rgba(52,211,153,.9) 0%, transparent 100%), radial-gradient(2px 2px at 75% 80%, rgba(34,211,238,.9) 0%, transparent 100%), radial-gradient(3px 3px at 20% 30%, rgba(192,132,252,.8) 0%, transparent 100%), linear-gradient(160deg, #040d0a 0%, #03080c 45%, #080410 100%); }
body.bg-crystal::before     { background: linear-gradient(135deg, rgba(204,32,48,.15) 0%, transparent 40%), linear-gradient(225deg, rgba(6,182,212,.18) 0%, transparent 45%), linear-gradient(315deg, rgba(168,85,247,.15) 0%, transparent 50%), repeating-linear-gradient(60deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(-60deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 40px), #07090e; }
body.bg-singularity::before { background: radial-gradient(circle 180px at 50% 50%, #000 0%, #000 70%, transparent 72%), radial-gradient(circle 240px at 50% 50%, rgba(245,158,11,.35) 60%, rgba(239,68,68,.25) 80%, transparent 95%), radial-gradient(ellipse 90% 25% at 50% 50%, rgba(251,191,36,.4) 0%, rgba(239,68,68,.2) 60%, transparent 85%), radial-gradient(1px 1px at 15% 20%, #fff 0%, transparent 100%), radial-gradient(1.5px 1.5px at 85% 80%, #fff 0%, transparent 100%), #020204; }
body.bg-solaris::before     { background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(245,158,11,.30) 0%, rgba(234,88,12,.18) 45%, transparent 70%), radial-gradient(ellipse 80% 50% at 80% 80%, rgba(239,68,68,.12) 0%, transparent 60%), radial-gradient(circle 350px at 20% 40%, rgba(251,191,36,.10) 0%, transparent 70%), #090503; }
body.bg-tokyo::before       { background: repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(236,72,153,.07) 81px, transparent 83px), repeating-linear-gradient(90deg, transparent 0, transparent 120px, rgba(6,182,212,.08) 121px, transparent 123px), radial-gradient(ellipse 70% 60% at 20% 20%, rgba(236,72,153,.22) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 80% 80%, rgba(6,182,212,.20) 0%, transparent 55%), linear-gradient(180deg, #090610 0%, #05040a 50%, #03060c 100%); }
body.bg-aether::before      { background: radial-gradient(ellipse 80% 60% at 50% 10%, rgba(56,189,248,.25) 0%, transparent 65%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(168,85,247,.20) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 80% 70%, rgba(251,191,36,.16) 0%, transparent 60%), radial-gradient(2px 2px at 50% 30%, rgba(255,255,255,.9) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 25% 65%, rgba(255,255,255,.8) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 75% 45%, rgba(255,255,255,.8) 0%, transparent 100%), linear-gradient(160deg, #030812 0%, #060b18 50%, #0a0614 100%); }
body.bg-boardroom::before   { background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(245,158,11,.14) 0%, transparent 65%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(180deg, #0a0e17 0%, #07090e 60%, #040508 100%); background-size: 100% 100%, 64px 64px, 64px 64px, 100% 100%; }
body.bg-atrium::before      { background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 45%), linear-gradient(225deg, rgba(255,255,255,.06) 0%, transparent 45%), linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px), #080c14; background-size: 100% 100%, 100% 100%, 100% 40px, auto; }
body.bg-fintech::before     { background: radial-gradient(ellipse 80% 50% at 90% 10%, rgba(16,185,129,.12) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 10% 90%, rgba(14,165,233,.12) 0%, transparent 55%), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), #050811; background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px, auto; }
body.bg-executive::before   { background: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(255,255,255,.12) 0%, transparent 60%), linear-gradient(180deg, #0e121c 0%, #080a10 50%, #05060a 100%); }
body.bg-upload::before      { background-image: linear-gradient(rgba(0,0,0,var(--bg-overlay-opacity,.85)), rgba(0,0,0,var(--bg-overlay-opacity,.85))), var(--upload-bg-url); background-size: cover; background-position: center; }
body.bg-upload              { background: transparent !important; }

/* ── Visual modes ──────────────────────────────────────────────────────── */
body.vmode-mono {
  --success: color-mix(in srgb, var(--accent) 46%, black);
  --warn:    color-mix(in srgb, var(--accent) 72%, white);
  --error:   color-mix(in srgb, var(--accent) 52%, black);
  --danger:  var(--accent);
  --green:   color-mix(in srgb, var(--accent) 46%, black);
  --red:     color-mix(in srgb, var(--accent) 52%, black);
  --amber:   color-mix(in srgb, var(--accent) 72%, white);
  --blue:    color-mix(in srgb, var(--accent) 52%, black);
  --purple:  color-mix(in srgb, var(--accent) 78%, white);
  --teal:    color-mix(in srgb, var(--accent) 58%, black);
}
body.vmode-duotone {
  --success: #3d5e50; --green: #3d5e50;
  --warn: #8a7a5a;    --amber: #8a7a5a;
  --error: #8a5a5a;   --red: #8a5a5a;
  --blue: #406070; --purple: #565070; --teal: #3d6060;
}
body.vmode-hcontrast { filter: grayscale(1) contrast(1.15); }

/* ── Light mode — backgrounds ──────────────────────────────────────────── */
body.light-mode { background: #f0f2f8; color: #111318; color-scheme: light; }
body.light-mode::before {
  background:
    radial-gradient(ellipse 80% 55% at 15% 0%, rgba(var(--accent-rgb),.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(var(--accent-rgb),.04) 0%, transparent 55%),
    linear-gradient(160deg, #eef0f5 0%, #f0f2f8 50%, #eceef4 100%) !important;
}
body.light-mode.bg-void::before        { background: #e8eaef !important; }
body.light-mode.bg-aurora::before      { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(var(--accent-rgb),.10) 0%, transparent 60%), linear-gradient(160deg,#eef0f5,#f0f2f8) !important; }
body.light-mode.bg-blueprint::before   { background: linear-gradient(rgba(14,165,233,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,.08) 1px, transparent 1px), #eef2f8 !important; background-size: 32px 32px, 32px 32px, auto !important; }
body.light-mode.bg-carbon::before      { background: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0, rgba(0,0,0,.04) 1px, transparent 1px, transparent 6px), #ededf0 !important; }
body.light-mode.bg-dots::before        { background: radial-gradient(circle, rgba(0,0,0,.12) 1px, transparent 1px) 16px 16px / 16px 16px, #f0f2f8 !important; }
body.light-mode.bg-topographic::before { background: repeating-radial-gradient(ellipse 70% 50% at 50% 50%, transparent 0, transparent 8px, rgba(0,0,0,.05) 9px, transparent 10px), #f0f2f8 !important; }
body.light-mode.bg-space::before       { background: #f0f2f8 !important; }
body.light-mode.bg-nebula::before      { background: radial-gradient(ellipse 90% 60% at 20% 10%, rgba(139,92,246,.08) 0%, transparent 60%), linear-gradient(160deg,#eef0f5,#f0f2f8) !important; }
body.light-mode.bg-cyberpunk::before   { background: linear-gradient(rgba(6,182,212,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,.08) 1px, transparent 1px), #eef2f8 !important; background-size: 48px 48px, 48px 48px, auto !important; }
body.light-mode.bg-supernova::before   { background: radial-gradient(circle 350px at 50% 30%, rgba(249,115,22,.12) 0%, transparent 70%), #f0f2f8 !important; }
body.light-mode.bg-warp::before        { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(56,189,248,.10) 0%, transparent 65%), #eef2f8 !important; }
body.light-mode.bg-fantasy::before     { background: radial-gradient(ellipse 80% 60% at 20% 90%, rgba(16,185,129,.10) 0%, transparent 60%), linear-gradient(160deg,#eef0f8,#f0f8f5) !important; }
body.light-mode.bg-crystal::before     { background: linear-gradient(135deg, rgba(6,182,212,.08) 0%, transparent 50%), linear-gradient(225deg, rgba(168,85,247,.08) 0%, transparent 50%), #f0f2f8 !important; }
body.light-mode.bg-singularity::before { background: #e8eaef !important; }
body.light-mode.bg-solaris::before     { background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(245,158,11,.12) 0%, transparent 70%), #f0f2f8 !important; }
body.light-mode.bg-tokyo::before       { background: radial-gradient(ellipse 70% 60% at 20% 20%, rgba(236,72,153,.08) 0%, transparent 60%), #f0f2f8 !important; }
body.light-mode.bg-aether::before      { background: radial-gradient(ellipse 80% 60% at 50% 10%, rgba(56,189,248,.10) 0%, transparent 65%), linear-gradient(160deg,#f0f4fc,#eef0f8) !important; }
body.light-mode.bg-boardroom::before   { background: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px), #f0f2f8 !important; background-size: 64px 64px, 64px 64px, auto !important; }
body.light-mode.bg-atrium::before      { background: linear-gradient(135deg, rgba(0,0,0,.03) 0%, transparent 50%), #f0f2f8 !important; }
body.light-mode.bg-fintech::before     { background: linear-gradient(rgba(14,165,233,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,.06) 1px, transparent 1px), #eef2f8 !important; background-size: 32px 32px, 32px 32px, auto !important; }
body.light-mode.bg-executive::before   { background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(0,0,0,.04) 0%, transparent 60%), #f0f2f8 !important; }
/* THE VEIL IS TINTED, AND IT HONOURS THE SLIDER EXACTLY.
   It used to be a flat cool grey (238,240,244) with the accent nowhere in it, so a
   wallpaper in light mode sat under dead grey while every card on top of it was dead
   white — nothing to separate the two, which is what "everything is white" means.

   The alpha is applied by mixing an OPAQUE tinted base toward transparent, rather than
   mixing the accent into an already-transparent colour. That matters: mixing accent into
   rgba(...,.85) raises the alpha toward 1 and would have made the veil MORE opaque while
   claiming to tint it — the wallpaper would have got dimmer, the opposite of the ask. */
/* NEVER TINT THE USER'S PHOTOGRAPH. The veil sits ON TOP of the wallpaper, so mixing the
   accent into it does not tint the UI — it tints the PICTURE. Crimson over a green forest
   is mud: rendered side by side, a 6%-accent veil at 35% killed the greens and turned the
   whole image brown, while the same veil neutral stayed clean.

   The accent belongs on the chrome — cards, borders, pills, the hairline — where it is OUR
   surface to colour. The wallpaper is the user's content and gets a neutral scrim or none.
   (Dark mode already had this right: rgba(0,0,0,...), no accent in it.) */
body.light-mode { --veil-base: #eef0f4; }
body.light-mode.bg-upload::before      { background-image: linear-gradient(color-mix(in srgb, var(--veil-base) calc(var(--bg-overlay-opacity,.85) * 100%), transparent), color-mix(in srgb, var(--veil-base) calc(var(--bg-overlay-opacity,.85) * 100%), transparent)), var(--upload-bg-url) !important; background-size: cover !important; background-position: center !important; }

/* ── Theme panel ───────────────────────────────────────────────────────── */
/* PARKED WITH A TRANSFORM, NOT AN OFFSET.
   This used to sit at `right:-290px`, which leaves a 290px-wide fixed element beyond the
   right edge of every page that loads theme.js — and nothing in the shared stylesheets ever
   clips `overflow-x`. On a desktop nobody notices; on a phone the whole page slides sideways,
   which is precisely what "everything is off-centre" feels like. A transformed element does
   not extend the scrollable area, so the drawer still slides in exactly as before and the
   page stops scrolling horizontally. */
#theme-panel {
  position: fixed; top: 0; right: 0; width: 270px; height: 100vh;
  transform: translateX(100%);
  background: rgba(10,10,14,.93);
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-left: 1px solid var(--glass-border); z-index: 900;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.2rem 1rem 2rem; overflow-y: auto;
}
#theme-panel.open { transform: translateX(0); }
.tp-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); margin-top: .2rem; }
.tp-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
/* The category picker. Sized and coloured from the shared tokens so it inverts with the
   theme like everything else in this panel — no bespoke light-mode override needed. */
.tp-select {
  width: 100%; margin-bottom: .45rem; padding: .35rem .5rem; border-radius: 7px;
  font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--glass-border);
}
.tp-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Collapsible Appearance sections ──────────────────────────────────────────
   The header is a real <button>: it is the control that opens and closes the
   group, so it must be reachable by keyboard and announce its state. It inherits
   .tp-title's look so the panel reads exactly as it did before — the only new
   affordance is the chevron. */
.tp-sec { display: flex; flex-direction: column; gap: .35rem; }
.tp-sech {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: .2rem 0; margin: 0; cursor: pointer;
  font: inherit; font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); text-align: left;
  transition: color .15s;
}
.tp-sech:hover  { color: var(--text); }
.tp-sech:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tp-chev { font-size: .8rem; line-height: 1; transition: transform .18s ease; opacity: .7; }
.tp-sec.collapsed .tp-chev { transform: rotate(-90deg); }
/* display:none rather than a height animation — the body is a wrapping flex grid whose
   height is not knowable in advance, so an animated max-height would either clip the tall
   sections or lurch on the short ones. */
.tp-sec.collapsed .tp-secb { display: none; }
@media (prefers-reduced-motion: reduce) { .tp-chev { transition: none; } }
.tp-swatch {
  display: flex; align-items: center; gap: 5px; padding: .35rem .6rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; cursor: pointer; font-size: .72rem; color: var(--fg-dim);
  transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.tp-swatch:hover  { border-color: rgba(var(--accent-rgb),.5); color: var(--fg); background: rgba(var(--accent-rgb),.08); }
.tp-swatch.active { border-color: var(--accent); color: var(--fg); background: rgba(var(--accent-rgb),.14); }
.tp-dot    { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.tp-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: .2rem 0; }
.tp-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; }
.tp-toggle-label { font-size: .75rem; color: var(--fg-dim); }
.tp-switch  { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.tp-switch input { opacity: 0; width: 0; height: 0; }
.tp-slider  { position: absolute; inset: 0; background: rgba(255,255,255,.12); border-radius: 18px; cursor: pointer; transition: background .2s; }
.tp-slider::before { content: ''; position: absolute; width: 12px; height: 12px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.tp-switch input:checked + .tp-slider             { background: var(--accent); }
.tp-switch input:checked + .tp-slider::before     { transform: translateX(16px); }

/* ── Light mode — theme panel ──────────────────────────────────────────── */
body.light-mode #theme-panel     { background: rgba(250,251,253,.97); border-color: rgba(0,0,0,.1); }
body.light-mode .tp-title        { color: #888; }
body.light-mode .tp-swatch       { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: #555; }
body.light-mode .tp-swatch:hover { background: rgba(var(--accent-rgb),.07); color: #111; }
body.light-mode .tp-swatch.active{ background: rgba(var(--accent-rgb),.13); border-color: var(--accent); color: #111; }
body.light-mode .tp-divider      { border-color: rgba(0,0,0,.08); }
body.light-mode .tp-toggle-label { color: #555; }
body.light-mode .tp-slider       { background: rgba(0,0,0,.18); }