/* ===== Skins: whole-site looks layered on The Vault layout (data-skin) ===== */
html[data-skin] .tile-icon{border-radius:var(--r-md)}
html[data-skin] .stat-grid,html[data-skin] .hub-tiles{border-radius:var(--r-lg)}

/* ---------- CHROME: brushed steel + refractor rainbow ---------- */
html[data-design=vault][data-skin=chrome]{color-scheme:dark;--bg:#0a0c11;--surf:#14171f;--surf-2:#1b1f29;--surf-3:#262b37;--line:#343a49;--line-2:#5b6478;--ink:#f3f6fb;--ink-2:#b4bccb;--ink-3:#8b94a6;--gold:#d8e2f2;--gold-ink:#0a0c11;--gold-soft:#d8e2f220;--pos:#7ff0c0;--neg:#ff8aa0;--r-md:8px;--r-lg:12px;--font-head:Inter,system-ui,sans-serif;--head-weight:800;--head-weight-2:700}
html[data-skin=chrome] body{background:linear-gradient(115deg,transparent 30%,#ffffff0a 38%,transparent 46%,transparent 60%,#ffffff08 66%,transparent 74%),radial-gradient(ellipse at 100% 0,#7b5cff22,transparent 45%),radial-gradient(ellipse at 0 100%,#00d4ff1c,transparent 45%),#0a0c11}
html[data-skin=chrome] .ph h1,html[data-skin=chrome] h1{background:linear-gradient(92deg,#fff 0%,#9fd8ff 25%,#d9a8ff 50%,#ffb3c7 70%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;letter-spacing:-.03em}
html[data-skin=chrome] .stat-grid,html[data-skin=chrome] .hub-tiles,html[data-skin=chrome] .od-card,html[data-skin=chrome] .tile,html[data-skin=chrome] .stat{background:linear-gradient(160deg,#242a37 0%,#14171f 42%,#1e2330 100%);border-color:#4a5266;box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #0006,0 6px 18px #0007}
html[data-skin=chrome] .stat-grid,html[data-skin=chrome] .hub-tiles{position:relative}
html[data-skin=chrome] .stat-grid::before,html[data-skin=chrome] .od-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#ff5f9e,#ffb35f,#f5ec6b,#6bf59a,#5fd4ff,#9d7bff,#ff5f9e);border-radius:12px 12px 0 0;opacity:.9}
html[data-skin=chrome] .od-card{position:relative}
html[data-skin=chrome] .section-label,html[data-skin=chrome] .pkz-dh{letter-spacing:.18em;color:#9fb4d4}
html[data-skin=chrome] .topbar{border-bottom:1px solid #4a5266;background:linear-gradient(180deg,#ffffff10,transparent)}
html[data-skin=chrome] .brand{background:linear-gradient(90deg,#fff,#a9d9ff,#e0b3ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
html[data-skin=chrome] .tile-icon{background:linear-gradient(145deg,#e8eefb,#8a94a8);color:#0a0c11}
html[data-skin=chrome] .pkz-drawer{background:linear-gradient(170deg,#1f2430,#0d0f15);border-right-color:#5b6478}

/* ---------- ARENA: dark hardwood court + scoreboard type ---------- */
html[data-design=vault][data-skin=arena]{color-scheme:dark;--bg:#0d0b09;--surf:#171310;--surf-2:#201a15;--surf-3:#2c231b;--line:#3a2d20;--line-2:#6a4b2c;--ink:#f5ecdf;--ink-2:#c6b49c;--ink-3:#97836b;--gold:#ff9d2e;--gold-ink:#1a0e00;--gold-soft:#ff9d2e1f;--pos:#8cf06b;--neg:#ff5b4a;--r-md:3px;--r-lg:4px;--font-head:"Oswald","Arial Narrow",Impact,sans-serif;--head-weight:700;--head-weight-2:600}
html[data-skin=arena] body{font-family:"Barlow Condensed","Oswald",Inter,system-ui,sans-serif;background:repeating-linear-gradient(90deg,#ffffff06 0 2px,transparent 2px 46px),radial-gradient(ellipse at 50% -10%,#c9843a30,transparent 55%),#0d0b09}
html[data-skin=arena] button,html[data-skin=arena] input,html[data-skin=arena] select{font-family:"Barlow Condensed","Oswald",Inter,sans-serif}
html[data-skin=arena] .ph h1,html[data-skin=arena] h1,html[data-skin=arena] .section-label,html[data-skin=arena] .pkz-dh,html[data-skin=arena] .tile-name,html[data-skin=arena] .brand,html[data-skin=arena] .tab{text-transform:uppercase;letter-spacing:.06em}
html[data-skin=arena] .ph h1,html[data-skin=arena] h1{color:#fff;text-shadow:0 2px 0 #c9843a55;border-left:6px solid #ff9d2e;padding-left:12px}
html[data-skin=arena] .stat strong,html[data-skin=arena] .tile-big,html[data-skin=arena] .fact{font-family:"Share Tech Mono",ui-monospace,monospace;color:#ffb347;text-shadow:0 0 8px #ff9d2e66;font-weight:400}
html[data-skin=arena] .stat-grid,html[data-skin=arena] .hub-tiles,html[data-skin=arena] .od-card,html[data-skin=arena] .tile,html[data-skin=arena] .stat{background:linear-gradient(180deg,#1b1611,#120f0c);border:2px solid #3a2d20;border-radius:4px;box-shadow:inset 0 0 0 1px #00000088,0 3px 0 #000}
html[data-skin=arena] .stat-grid{border-bottom:4px solid #c9843a}
html[data-skin=arena] .topbar{border-bottom:4px solid #c9843a;background:linear-gradient(180deg,#2a1d12,transparent)}
html[data-skin=arena] .tab[aria-current=page]{background:#ff9d2e;color:#1a0e00}
html[data-skin=arena] .tile-icon{background:#ff9d2e;color:#1a0e00;border-radius:3px}
html[data-skin=arena] .pkz-drawer{background:#120f0c;border-right:4px solid #c9843a}
html[data-skin=arena] .pkz-di{text-transform:uppercase;letter-spacing:.05em;border-radius:3px}

/* ---------- DAY BREAK: bright card-stock light mode ---------- */
html[data-design=vault][data-skin=daybreak]{color-scheme:light;--bg:#f7f8fb;--surf:#ffffff;--surf-2:#f1f3f8;--surf-3:#e6eaf2;--line:#e1e5ee;--line-2:#c4cbda;--ink:#14181f;--ink-2:#4b5566;--ink-3:#6f7a8d;--gold:#2563eb;--gold-ink:#ffffff;--gold-soft:#2563eb14;--pos:#0f9d63;--neg:#d92d4a;--r-md:14px;--r-lg:20px;--font-head:Inter,system-ui,sans-serif;--head-weight:800;--head-weight-2:700}
html[data-skin=daybreak] body{background:linear-gradient(180deg,#ffffff,#f3f5fa 420px),#f7f8fb;color:#14181f}
html[data-skin=daybreak] .stat-grid,html[data-skin=daybreak] .hub-tiles,html[data-skin=daybreak] .od-card,html[data-skin=daybreak] .tile,html[data-skin=daybreak] .stat{background:#fff;border:1px solid #e8ebf2;box-shadow:0 1px 2px #1018280d,0 8px 24px #1018280f}
html[data-skin=daybreak] .topbar{border-bottom:0;background:transparent}
html[data-skin=daybreak] .ph h1,html[data-skin=daybreak] h1{letter-spacing:-.035em}
html[data-skin=daybreak] .section-label,html[data-skin=daybreak] .pkz-dh{color:#6f7a8d}
html[data-skin=daybreak] .tile-icon{background:#e9f0ff;color:#2563eb}
html[data-skin=daybreak] .pkz-drawer{background:#fff;box-shadow:8px 0 40px #10182840;border-right:0}
html[data-skin=daybreak] .pkz-scrim{background:rgba(20,24,31,.35)}
html[data-skin=daybreak] .pkz-di.cur{background:#eef3ff}
html[data-skin=daybreak] .brand{color:#14181f}
html[data-skin=daybreak] img.brand-logo{filter:none}

/* ---------- NEON VAULT: electric blue/purple glow ---------- */
html[data-design=vault][data-skin=neon]{color-scheme:dark;--bg:#06041a;--surf:#0d0a2a;--surf-2:#151140;--surf-3:#1f1a58;--line:#2d2a7a;--line-2:#5a4ff0;--ink:#eef0ff;--ink-2:#b7b9f2;--ink-3:#8a8cd6;--gold:#59f0ff;--gold-ink:#02061a;--gold-soft:#59f0ff1c;--pos:#5dffb4;--neg:#ff5d9e;--r-md:14px;--r-lg:20px;--font-head:"Space Grotesk",Inter,system-ui,sans-serif;--head-weight:700;--head-weight-2:600}
html[data-skin=neon] body{font-family:"Space Grotesk",Inter,system-ui,sans-serif;background:radial-gradient(ellipse at 85% -5%,#7a2cff55,transparent 50%),radial-gradient(ellipse at 0 40%,#1fa2ff33,transparent 45%),radial-gradient(ellipse at 60% 110%,#ff2cd633,transparent 50%),#06041a}
html[data-skin=neon] button,html[data-skin=neon] input,html[data-skin=neon] select{font-family:"Space Grotesk",Inter,sans-serif}
html[data-skin=neon] .ph h1,html[data-skin=neon] h1{color:#fff;text-shadow:0 0 12px #59f0ff99,0 0 32px #8a4dff88}
html[data-skin=neon] .stat-grid,html[data-skin=neon] .hub-tiles,html[data-skin=neon] .od-card,html[data-skin=neon] .tile,html[data-skin=neon] .stat{background:linear-gradient(160deg,#16124a99,#0a0824cc);border:1px solid #4a3fe8;box-shadow:0 0 0 1px #59f0ff22,0 0 22px #6a4dff55,inset 0 0 24px #4a3fe822}
html[data-skin=neon] .stat strong,html[data-skin=neon] .tile-big{color:#59f0ff;text-shadow:0 0 10px #59f0ffaa}
html[data-skin=neon] .topbar{border-bottom:1px solid #4a3fe8;box-shadow:0 8px 28px -12px #8a4dff}
html[data-skin=neon] .brand{text-shadow:0 0 10px #59f0ffaa}
html[data-skin=neon] .section-label,html[data-skin=neon] .pkz-dh{color:#59f0ff;text-shadow:0 0 8px #59f0ff88;letter-spacing:.16em}
html[data-skin=neon] .tile-icon{background:linear-gradient(135deg,#59f0ff,#8a4dff);color:#06041a;box-shadow:0 0 14px #59f0ff88}
html[data-skin=neon] .pkz-drawer{background:linear-gradient(170deg,#140f45,#06041a);border-right:1px solid #59f0ff;box-shadow:0 0 40px #8a4dff88}
html[data-skin=neon] .search-box:focus-within{box-shadow:0 0 0 2px #59f0ff,0 0 18px #59f0ff88}

/* ---------- VINTAGE: old cardboard, cream, 90s borders ---------- */
html[data-design=vault][data-skin=vintage]{color-scheme:light;--bg:#efe3c8;--surf:#f8efd9;--surf-2:#efe2c3;--surf-3:#e3d3ad;--line:#c9b184;--line-2:#8a6a3c;--ink:#3a2615;--ink-2:#6a4b2c;--ink-3:#8a6f4e;--gold:#b3392f;--gold-ink:#fff6e0;--gold-soft:#b3392f1a;--pos:#2f7a4a;--neg:#b3392f;--r-md:2px;--r-lg:2px;--font-head:"DM Serif Display",Georgia,serif;--head-weight:400;--head-weight-2:400}
html[data-skin=vintage] body{font-family:"Courier Prime","Courier New",Georgia,serif;color:#3a2615;background:repeating-linear-gradient(0deg,#0000000a 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 0,#fff6dc,transparent 60%),#efe3c8}
html[data-skin=vintage] button,html[data-skin=vintage] input,html[data-skin=vintage] select{font-family:"Courier Prime","Courier New",serif}
html[data-skin=vintage] .ph h1,html[data-skin=vintage] h1{color:#3a2615;text-transform:uppercase;letter-spacing:.04em;border-bottom:4px double #8a6a3c;padding-bottom:8px}
html[data-skin=vintage] .stat-grid,html[data-skin=vintage] .hub-tiles,html[data-skin=vintage] .od-card,html[data-skin=vintage] .tile,html[data-skin=vintage] .stat{background:#f8efd9;border:3px double #8a6a3c;border-radius:2px;box-shadow:3px 3px 0 #c9b184}
html[data-skin=vintage] .topbar{border-bottom:4px double #8a6a3c}
html[data-skin=vintage] .brand{color:#b3392f;font-family:"DM Serif Display",Georgia,serif;text-transform:none;letter-spacing:0}
html[data-skin=vintage] .section-label,html[data-skin=vintage] .pkz-dh{color:#6a4b2c;letter-spacing:.14em;border-bottom:1px dashed #8a6a3c;padding-bottom:4px}
html[data-skin=vintage] .tile-icon{background:#b3392f;color:#fff6e0;border-radius:2px;box-shadow:2px 2px 0 #3a2615}
html[data-skin=vintage] .pkz-drawer{background:#f3e7cb;border-right:4px double #8a6a3c}
html[data-skin=vintage] .pkz-di.cur{background:#e3d3ad}
html[data-skin=vintage] .od-in,html[data-skin=vintage] .search-box{border-radius:2px;border:2px solid #8a6a3c}

/* ---------- theme picker previews ---------- */
.design-mini.chrome{background:linear-gradient(115deg,transparent 30%,#ffffff22 40%,transparent 50%),linear-gradient(90deg,#ff5f9e,#ffb35f,#f5ec6b,#6bf59a,#5fd4ff,#9d7bff) bottom/100% 6px no-repeat,#14171f!important}
.design-mini.arena{background:repeating-linear-gradient(90deg,#c9843a33 0 2px,transparent 2px 30px),linear-gradient(#ff9d2e,#ff9d2e) bottom/100% 8px no-repeat,#120f0c!important}
.design-mini.daybreak{background:linear-gradient(#fff,#f1f3f8)!important;box-shadow:inset 0 0 0 1px #e1e5ee}
.design-mini.neon{background:radial-gradient(ellipse at 80% 0,#8a4dff88,transparent 60%),radial-gradient(ellipse at 10% 100%,#1fa2ff66,transparent 60%),#06041a!important;box-shadow:inset 0 0 0 1px #59f0ff66}
.design-mini.vintage{background:repeating-linear-gradient(0deg,#0000000d 0 1px,transparent 1px 4px),#efe3c8!important;border:3px double #8a6a3c}

/* light skins: form controls and order strips */
html[data-skin=daybreak] .od-in,html[data-skin=vintage] .od-in{background:var(--surf);color:var(--ink);border-color:var(--line-2)}
html[data-skin=daybreak] .od-in::placeholder,html[data-skin=vintage] .od-in::placeholder{color:var(--ink-3);opacity:1}
html[data-skin=daybreak] .od-toggle,html[data-skin=vintage] .od-toggle{background:var(--surf-2);color:var(--ink)}
html[data-skin=daybreak] .od-gray,html[data-skin=vintage] .od-gray{background:var(--surf-3);color:var(--ink)}
html[data-skin=arena] body{font-size:17px}
html[data-skin=chrome] .tile-icon{background:linear-gradient(#12151c,#12151c) padding-box,linear-gradient(135deg,#ff5f9e,#ffb35f,#f5ec6b,#6bf59a,#5fd4ff,#9d7bff) border-box!important;border:1.5px solid transparent!important;color:#cfeaff!important;box-shadow:inset 0 1px 0 #ffffff30,0 0 10px #5fd4ff33,0 2px 6px #0008}
html[data-skin=chrome] .tile-icon svg{filter:drop-shadow(0 0 3px #7fd0ff99);stroke-width:2}
html[data-skin=chrome] .pkz-di:hover .tile-icon,html[data-skin=chrome] .pkz-di:active .tile-icon{color:#fff!important}