/* Theme previews. Only active when <html data-theme="..."> is set (open the site with ?theme=onyx|broadcast|vault).
   The default look is unchanged for everyone else. */

/* ---------- ONYX: premium collectible (black + metallic gold, serif headlines) ---------- */
html[data-theme="onyx"]{
  --bg:#070708; --panel:#101012; --panel2:#17171a; --line:#2b2a26;
  --text:#ecebe6; --muted:#9a978d; --gold:#c9a24a; --blue:#8fa7c4; --green:#7fbf8f; --red:#c96a5a; --purple:#a593c9;
}
html[data-theme="onyx"] body{background:radial-gradient(1200px 600px at 50% -10%,#1d1a12,transparent 70%),#070708;font-family:'Inter',system-ui,sans-serif;letter-spacing:.1px}
html[data-theme="onyx"] h1,html[data-theme="onyx"] h2,html[data-theme="onyx"] h3,html[data-theme="onyx"] .brand{font-family:'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:.2px}
html[data-theme="onyx"] h1{font-size:clamp(34px,6vw,60px)}
html[data-theme="onyx"] .eyebrow{color:var(--gold);letter-spacing:4px;font-weight:600;font-size:11px}
html[data-theme="onyx"] .top{background:rgba(7,7,8,.88);border-bottom:1px solid #2b2a26}
html[data-theme="onyx"] nav a{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:600;border-radius:0;color:#cfcdc5}
html[data-theme="onyx"] nav a:hover,html[data-theme="onyx"] nav a.on{background:transparent;color:var(--gold);box-shadow:inset 0 -1px 0 var(--gold)}
html[data-theme="onyx"] .btn{background:linear-gradient(180deg,#e2c272,#b08a33);color:#120f05;border-radius:2px;text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:700;padding:13px 22px}
html[data-theme="onyx"] .btn.ghost{background:transparent;color:var(--gold);border:1px solid #6d5a2c}
html[data-theme="onyx"] .panel,html[data-theme="onyx"] .tile{border-radius:4px;background:linear-gradient(180deg,#121214,#0d0d0f);border:1px solid #26251f}
html[data-theme="onyx"] .tile:hover{border-color:#6d5a2c}
html[data-theme="onyx"] .badge{border-radius:2px;letter-spacing:1px;text-transform:uppercase;font-size:10px}
html[data-theme="onyx"] .tabs button{border-radius:2px;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
html[data-theme="onyx"] .tabs button.on{background:var(--gold);color:#120f05}
html[data-theme="onyx"] .fund-strip{border-radius:4px;background:linear-gradient(90deg,#14130f,#1b1810);border-color:#3d3420}
html[data-theme="onyx"] .fund-strip b{color:var(--gold)}

/* ---------- BROADCAST: Sunday-night TV graphics (navy + red, condensed caps, hard edges) ---------- */
html[data-theme="broadcast"]{
  --bg:#06101f; --panel:#0c1a30; --panel2:#11233f; --line:#1f3558;
  --text:#f4f7fb; --muted:#93a5c2; --gold:#ffffff; --blue:#3b82f6; --green:#34d399; --red:#e11d2e; --purple:#8b5cf6;
}
html[data-theme="broadcast"] body{background:linear-gradient(180deg,#06101f,#0a1a33 55%,#06101f);font-family:'Barlow',system-ui,sans-serif}
html[data-theme="broadcast"] h1,html[data-theme="broadcast"] h2,html[data-theme="broadcast"] h3,html[data-theme="broadcast"] .brand{font-family:'Barlow Condensed','Oswald',sans-serif;text-transform:uppercase;font-weight:800;letter-spacing:.5px;font-style:italic}
html[data-theme="broadcast"] h1{font-size:clamp(40px,7vw,72px)}
html[data-theme="broadcast"] .eyebrow{display:inline-block;background:var(--red);color:#fff;padding:3px 10px;letter-spacing:2px;transform:skewX(-12deg)}
html[data-theme="broadcast"] .top{background:#e11d2e;border-bottom:3px solid #fff}
html[data-theme="broadcast"] nav a{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:17px;letter-spacing:1px;color:#fff;border-radius:0}
html[data-theme="broadcast"] nav a:hover,html[data-theme="broadcast"] nav a.on{background:#06101f;color:#fff}
html[data-theme="broadcast"] .btn{background:var(--red);color:#fff;border-radius:0;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:18px;letter-spacing:1px;transform:skewX(-10deg)}
html[data-theme="broadcast"] .btn.ghost{background:transparent;border:2px solid #fff;color:#fff}
html[data-theme="broadcast"] .panel,html[data-theme="broadcast"] .tile{border-radius:0;border:0;border-left:5px solid var(--red);background:linear-gradient(90deg,#0f213d,#0b1830)}
html[data-theme="broadcast"] .tile:hover{border-left-color:#fff}
html[data-theme="broadcast"] th{background:#e11d2e;color:#fff}
html[data-theme="broadcast"] .badge{border-radius:0;background:#fff;color:#06101f;border:0}
html[data-theme="broadcast"] .tabs button{border-radius:0;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:16px}
html[data-theme="broadcast"] .tabs button.on{background:var(--red);border-color:var(--red);color:#fff}
html[data-theme="broadcast"] a{color:#7fb2ff}
html[data-theme="broadcast"] .fund-strip{border-radius:0;border-left:6px solid #34d399}

/* ---------- VAULT: modern fantasy app (graphite + electric green, tight sans, glass) ---------- */
html[data-theme="vault"]{
  --bg:#0b0c0e; --panel:#131418; --panel2:#1a1c21; --line:#25272e;
  --text:#f2f3f5; --muted:#8b8f99; --gold:#2cf28a; --blue:#4c8dff; --green:#2cf28a; --red:#ff4d5e; --purple:#9b7bff;
}
html[data-theme="vault"] body{background:#0b0c0e;font-family:'Inter',system-ui,sans-serif;letter-spacing:-.1px}
html[data-theme="vault"] h1,html[data-theme="vault"] h2,html[data-theme="vault"] h3,html[data-theme="vault"] .brand{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-1.2px}
html[data-theme="vault"] h1{font-size:clamp(36px,6.5vw,64px)}
html[data-theme="vault"] .eyebrow{color:var(--gold);letter-spacing:1px;font-size:12px}
html[data-theme="vault"] .top{background:rgba(11,12,14,.75);border-bottom:1px solid #1d1f25}
html[data-theme="vault"] nav a{font-weight:600;font-size:14px;color:#c9ccd3;border-radius:999px}
html[data-theme="vault"] nav a:hover,html[data-theme="vault"] nav a.on{background:#1d2025;color:#fff}
html[data-theme="vault"] .btn{background:var(--gold);color:#04140b;border-radius:12px;font-weight:700}
html[data-theme="vault"] .btn.ghost{background:#1a1c21;color:#f2f3f5;border:1px solid #2a2d35}
html[data-theme="vault"] .panel,html[data-theme="vault"] .tile{border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid #23252c;backdrop-filter:blur(6px)}
html[data-theme="vault"] .tile:hover{border-color:#2cf28a55}
html[data-theme="vault"] .badge{background:#1d2025;border-color:#2a2d35}
html[data-theme="vault"] .tabs button{background:#16181c;border-color:#24262d}
html[data-theme="vault"] .tabs button.on{background:var(--gold);color:#04140b;border-color:var(--gold)}
html[data-theme="vault"] a{color:#2cf28a}
html[data-theme="vault"] .fund-strip{border-radius:14px;background:#10241a;border-color:#1d4a33}

/* Theme picker (preview only) */
.theme-pick{position:fixed;left:12px;bottom:12px;z-index:50;display:flex;gap:6px;align-items:center;background:rgba(0,0,0,.8);border:1px solid #444;border-radius:999px;padding:6px 8px;font:600 12px system-ui,sans-serif;color:#fff}
.theme-pick button{background:#222;color:#fff;border:1px solid #555;border-radius:999px;padding:5px 10px;cursor:pointer;font:inherit}
.theme-pick button.on{background:#fff;color:#000}
html[data-theme] .brand{color:#fff}