/**
 * FAK LAB MUSIC — Unified Theme System
 * 20 music-centric presets delivered via CSS custom properties.
 *
 * Architecture
 * ────────────
 * Each [data-theme="key"] block overrides the same token set that
 * style.css already consumes, so ZERO existing component CSS breaks.
 *
 * Token glossary
 * ──────────────
 * --bg  bg1  bg2  bg3  bg4   → layered surface backgrounds
 * --bd  bd2  bd3             → border alphas
 * --or  or2  or-d  or-g      → primary accent (sliders, active states)
 * --pk  pk2  pk-d  pk-g      → secondary accent (gradients, mini touches)
 * --tx  tx2  tx3  tx4        → text hierarchy
 * --blur-overlay              → fallback opacity layer over blurred cover art
 * --eq-bar-a  eq-bar-b        → live EQ visualizer bar colours
 * --nav-bg                    → navigation bar glass tint
 * --card-hover-border         → card hover border glow colour
 * --orb1-color  orb2-color    → background orb radial gradients
 */

/* ══════════════════════════════════════════════════════════════
   GLOBAL TRANSITION SYSTEM — 400ms smooth interpolation
   ══════════════════════════════════════════════════════════════ */
:root,
[data-theme] {
    transition:
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s ease;
}
body * {
    transition:
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        color 0.3s ease,
        fill 0.3s ease,
        stroke 0.3s ease;
}

/* Swiss International — the product default. */
[data-theme="swiss-international"] {
    --bg:#f4f2ed; --bg1:#ffffff; --bg2:#eceae4; --bg3:#dedbd3; --bg4:#cbc7bd;
    --bd:rgba(17,17,17,.12); --bd2:rgba(17,17,17,.28); --bd3:rgba(17,17,17,.55);
    --or:#e6332a; --or2:#e6332a; --or-d:rgba(230,51,42,.1); --or-g:rgba(230,51,42,.18);
    --pk:#e6332a; --pk2:#e6332a; --pk-d:rgba(230,51,42,.1); --pk-g:rgba(230,51,42,.18);
    --tx:#111111; --tx2:#36342f; --tx3:#6c6962; --tx4:#aaa69d;
    --eq-bar-a:#111111; --eq-bar-b:#e6332a; --nav-bg:rgba(244,242,237,.97);
    --card-hover-border:#111111; --blur-overlay:#f4f2ed;
    --orb1-color:transparent; --orb2-color:transparent;
    --rsm:0px; --rmd:0px; --rlg:0px; --rxl:0px;
}
[data-theme="swiss-international"] body,
[data-theme="swiss-international"] html { background:#f4f2ed; color:#111; }
[data-theme="swiss-international"] .seekbar-fill,
[data-theme="swiss-international"] .vol-fill,
[data-theme="swiss-international"] #mini-progress,
[data-theme="swiss-international"] .eq-bar { background:#e6332a!important; }
[data-theme="swiss-international"] .seekbar-thumb,
[data-theme="swiss-international"] .vol-thumb { box-shadow:none!important; background:#111!important; }
[data-theme="swiss-international"] .filter-tab.active,
[data-theme="swiss-international"] .speed-chip.active,
[data-theme="swiss-international"] .timer-chip.active,
[data-theme="swiss-international"] .eq-toggle.on { background:#e6332a!important; box-shadow:none!important; }
/* Hardware acceleration for blur containers — prevents audio stutter */
#full-bg-blur,
.bgl,
.bg-orb1,
.bg-orb2,
.bg-orb3 {
    will-change: transform, opacity;
}

/* ══════════════════════════════════════════════════════════════
   EQ VISUALIZER BARS — theme-driven colours
   ══════════════════════════════════════════════════════════════ */
.eq-bar {
    background: linear-gradient(to top, var(--eq-bar-a), var(--eq-bar-b)) !important;
}
.dj-mascot-svg .eq-bar-1,
.dj-mascot-svg .eq-bar-3 {
    fill: var(--eq-bar-a) !important;
}
.dj-mascot-svg .eq-bar-2,
.dj-mascot-svg .eq-bar-4 {
    fill: var(--eq-bar-b) !important;
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS / VOLUME SLIDERS — theme accent
   ══════════════════════════════════════════════════════════════ */
[data-theme] .seekbar-fill,
[data-theme] #mini-progress {
    background: linear-gradient(90deg, var(--or2), var(--pk)) !important;
}
[data-theme] .vol-fill {
    background: linear-gradient(90deg, var(--or2), var(--pk)) !important;
}
[data-theme] .seekbar-thumb {
    box-shadow: 0 0 0 3px var(--or), 0 0 12px var(--or-g), 0 2px 8px rgba(0,0,0,0.5) !important;
}
[data-theme] .vol-thumb {
    box-shadow: 0 0 0 2px var(--or), 0 0 8px var(--or-g) !important;
}
[data-theme] .eq-vslider::-webkit-slider-thumb {
    background: var(--or) !important;
    box-shadow: 0 0 8px var(--or-g) !important;
}
[data-theme] .eq-vslider::-moz-range-thumb {
    background: var(--or) !important;
}

/* ══════════════════════════════════════════════════════════════
   BLUR CONTAINER — fallback opacity layer over cover art
   ══════════════════════════════════════════════════════════════
   Ensures text on top of the blurred now-playing background
   always stays readable regardless of the active theme.
   ══════════════════════════════════════════════════════════════ */
[data-theme] #full-player .absolute.inset-0 > div {
    background: var(--blur-overlay) !important;
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION GLASS — theme tint
   ══════════════════════════════════════════════════════════════ */
[data-theme] .nav {
    background: var(--nav-bg) !important;
}

/* ══════════════════════════════════════════════════════════════
   CARDS & PANELS — theme border glows
   ══════════════════════════════════════════════════════════════ */
[data-theme] .cb:hover {
    border-color: var(--card-hover-border) !important;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--card-hover-border) 15%, transparent),
                0 2px 8px rgba(0,0,0,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   BACKGROUND ORBS — theme colours
   ══════════════════════════════════════════════════════════════ */
[data-theme] .bg-orb1 {
    background: radial-gradient(ellipse, var(--orb1-color) 0%, transparent 70%) !important;
}
[data-theme] .bg-orb2 {
    background: radial-gradient(ellipse, var(--orb2-color) 0%, transparent 70%) !important;
}

/* ══════════════════════════════════════════════════════════════
   ACTIVE CONTROLS — shuffle, repeat, EQ button active state
   ══════════════════════════════════════════════════════════════ */
[data-theme] .filter-tab.active {
    background: linear-gradient(135deg, var(--or), var(--pk)) !important;
}
[data-theme] .speed-chip.active,
[data-theme] .timer-chip.active {
    background: linear-gradient(135deg, var(--or), var(--pk)) !important;
    box-shadow: 0 4px 16px var(--or-g) !important;
}
[data-theme] .eq-toggle.on {
    background: linear-gradient(135deg, var(--or), var(--pk)) !important;
}
[data-theme] .queue-item.playing {
    background: var(--or-d) !important;
    border-left-color: var(--or) !important;
}
[data-theme] .lyric-line.active-lyric {
    color: var(--or) !important;
    border-left-color: var(--or) !important;
    text-shadow: 0 0 15px var(--or-g) !important;
    background: var(--or-d) !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME HELPERS — adjusts body texture & scrollbar
   ══════════════════════════════════════════════════════════════ */
[data-theme~="light"] body::before {
    opacity: 0.04 !important;
    filter: invert(1);
}
[data-theme~="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   THEME PANEL UI STYLES
   ══════════════════════════════════════════════════════════════ */
#theme-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: bj-fade-in 0.2s ease;
}
#theme-panel-box {
    width: 100%;
    max-width: 500px;
    background: var(--bg1);
    border: 1px solid var(--bd2);
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    animation: bj-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
#theme-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--bd);
    background: var(--bg2);
    flex-shrink: 0;
}
#theme-panel-body {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.theme-group-title {
    font-family: var(--fm);
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tx3);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
@media (min-width: 400px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } }
.theme-swatch {
    border: 2px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    position: relative;
}
.theme-swatch:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.theme-swatch.active {
    border-color: var(--or) !important;
    box-shadow: 0 0 0 1px var(--or-g), 0 6px 20px rgba(0,0,0,0.4) !important;
}
.theme-swatch.active::after {
    content: '✓';
    position: absolute;
    top: 5px; right: 6px;
    font-size: 0.65rem;
    font-weight: 900;
    color: #fff;
    background: var(--or);
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    line-height: 16px;
}
.theme-preview {
    width: 100%;
    padding: 0.55rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.theme-preview-bar {
    height: 5px;
    border-radius: 99px;
    width: 100%;
}
.theme-preview-sub {
    height: 3px;
    border-radius: 99px;
    width: 60%;
    opacity: 0.5;
}
.theme-preview-label {
    font-family: var(--fd);
    font-size: 0.65rem;
    font-weight: 800;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   ══  THEME PRESET DEFINITIONS  ══════════════════════════════
   ══════════════════════════════════════════════════════════════
   Convention: light themes use the "light" tag in data-theme so
   the light-helper rules above apply automatically.
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. DEFAULT STUDIO LIGHT
   Crisp white · deep charcoal · electric blue sliders
   ────────────────────────────────────────────────────────────── */
[data-theme="studio-light"] {
    --bg:  #f5f7fa;
    --bg1: #ffffff;
    --bg2: #eef1f6;
    --bg3: #e2e7ef;
    --bg4: #d4dbe8;
    --bd:  rgba(30, 40, 80, 0.08);
    --bd2: rgba(30, 40, 80, 0.14);
    --bd3: rgba(30, 40, 80, 0.24);
    --or:  #1a73e8;
    --or2: #4d9fff;
    --or-d: rgba(26, 115, 232, 0.1);
    --or-g: rgba(26, 115, 232, 0.28);
    --pk:  #0050c8;
    --pk2: #3376e0;
    --pk-d: rgba(0, 80, 200, 0.1);
    --pk-g: rgba(0, 80, 200, 0.28);
    --tx:  #1c2333;
    --tx2: #4a5568;
    --tx3: #718096;
    --tx4: #a0aec0;
    --eq-bar-a: #1a73e8;
    --eq-bar-b: #4d9fff;
    --nav-bg: rgba(245, 247, 250, 0.92);
    --card-hover-border: rgba(26, 115, 232, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(245,247,250,0.55) 0%, rgba(245,247,250,0.82) 40%, rgba(245,247,250,0.97) 80%, rgba(245,247,250,1) 100%);
    --orb1-color: rgba(26, 115, 232, 0.07);
    --orb2-color: rgba(0, 80, 200, 0.05);
}
[data-theme="studio-light"] body,
[data-theme="studio-light"] html { background: #f5f7fa; color: #1c2333; }

/* ──────────────────────────────────────────────────────────────
   2. ACOUSTIC CREAM
   Warm ivory · espresso text · terracotta accents
   ────────────────────────────────────────────────────────────── */
[data-theme="acoustic-cream"] {
    --bg:  #faf4ec;
    --bg1: #fff9f2;
    --bg2: #f3ece0;
    --bg3: #e9dece;
    --bg4: #ddd0be;
    --bd:  rgba(90, 50, 20, 0.08);
    --bd2: rgba(90, 50, 20, 0.14);
    --bd3: rgba(90, 50, 20, 0.24);
    --or:  #c0622a;
    --or2: #e0824a;
    --or-d: rgba(192, 98, 42, 0.1);
    --or-g: rgba(192, 98, 42, 0.28);
    --pk:  #8b3d1a;
    --pk2: #ae5930;
    --pk-d: rgba(139, 61, 26, 0.1);
    --pk-g: rgba(139, 61, 26, 0.28);
    --tx:  #2c1a0e;
    --tx2: #5c3d22;
    --tx3: #8c6040;
    --tx4: #b08060;
    --eq-bar-a: #c0622a;
    --eq-bar-b: #e8a060;
    --nav-bg: rgba(250, 244, 236, 0.92);
    --card-hover-border: rgba(192, 98, 42, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(250,244,236,0.55) 0%, rgba(250,244,236,0.82) 40%, rgba(250,244,236,0.97) 80%, rgba(250,244,236,1) 100%);
    --orb1-color: rgba(192, 98, 42, 0.07);
    --orb2-color: rgba(139, 61, 26, 0.05);
}
[data-theme="acoustic-cream"] body,
[data-theme="acoustic-cream"] html { background: #faf4ec; color: #2c1a0e; }

/* ──────────────────────────────────────────────────────────────
   3. NORDIC CHILL
   Frost white · cool grey · ice-blue/teal accents
   ────────────────────────────────────────────────────────────── */
[data-theme="nordic-chill"] {
    --bg:  #f0f5f9;
    --bg1: #ffffff;
    --bg2: #e6edf4;
    --bg3: #d8e4ee;
    --bg4: #c8d8e8;
    --bd:  rgba(20, 60, 100, 0.08);
    --bd2: rgba(20, 60, 100, 0.13);
    --bd3: rgba(20, 60, 100, 0.22);
    --or:  #00acc1;
    --or2: #26c6da;
    --or-d: rgba(0, 172, 193, 0.1);
    --or-g: rgba(0, 172, 193, 0.28);
    --pk:  #0077a8;
    --pk2: #0095cc;
    --pk-d: rgba(0, 119, 168, 0.1);
    --pk-g: rgba(0, 119, 168, 0.28);
    --tx:  #0d2235;
    --tx2: #3a5672;
    --tx3: #6a8aaa;
    --tx4: #9ab0c6;
    --eq-bar-a: #00acc1;
    --eq-bar-b: #80deea;
    --nav-bg: rgba(240, 245, 249, 0.92);
    --card-hover-border: rgba(0, 172, 193, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(240,245,249,0.55) 0%, rgba(240,245,249,0.82) 40%, rgba(240,245,249,0.97) 80%, rgba(240,245,249,1) 100%);
    --orb1-color: rgba(0, 172, 193, 0.07);
    --orb2-color: rgba(0, 119, 168, 0.05);
}
[data-theme="nordic-chill"] body,
[data-theme="nordic-chill"] html { background: #f0f5f9; color: #0d2235; }

/* ──────────────────────────────────────────────────────────────
   4. MINIMAL STARK
   Pure white · pitch black · hairline borders
   ────────────────────────────────────────────────────────────── */
[data-theme="minimal-stark"] {
    --bg:  #ffffff;
    --bg1: #fafafa;
    --bg2: #f0f0f0;
    --bg3: #e4e4e4;
    --bg4: #d4d4d4;
    --bd:  rgba(0, 0, 0, 0.06);
    --bd2: rgba(0, 0, 0, 0.10);
    --bd3: rgba(0, 0, 0, 0.18);
    --or:  #111111;
    --or2: #333333;
    --or-d: rgba(0, 0, 0, 0.07);
    --or-g: rgba(0, 0, 0, 0.18);
    --pk:  #444444;
    --pk2: #666666;
    --pk-d: rgba(0, 0, 0, 0.06);
    --pk-g: rgba(0, 0, 0, 0.15);
    --tx:  #000000;
    --tx2: #333333;
    --tx3: #777777;
    --tx4: #aaaaaa;
    --eq-bar-a: #111111;
    --eq-bar-b: #555555;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --card-hover-border: rgba(0, 0, 0, 0.2);
    --blur-overlay: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.82) 40%, rgba(255,255,255,0.97) 80%, rgba(255,255,255,1) 100%);
    --orb1-color: rgba(0, 0, 0, 0.04);
    --orb2-color: rgba(0, 0, 0, 0.03);
}
[data-theme="minimal-stark"] body,
[data-theme="minimal-stark"] html { background: #ffffff; color: #000000; }

/* ──────────────────────────────────────────────────────────────
   5. CORPORATE SLATE
   Light grey · dark navy · professional accents
   ────────────────────────────────────────────────────────────── */
[data-theme="corporate-slate"] {
    --bg:  #edf0f5;
    --bg1: #f7f9fc;
    --bg2: #e3e8f0;
    --bg3: #d5dce8;
    --bg4: #c5cedd;
    --bd:  rgba(15, 30, 70, 0.08);
    --bd2: rgba(15, 30, 70, 0.14);
    --bd3: rgba(15, 30, 70, 0.24);
    --or:  #1e3a6e;
    --or2: #2d5099;
    --or-d: rgba(30, 58, 110, 0.1);
    --or-g: rgba(30, 58, 110, 0.25);
    --pk:  #0f2244;
    --pk2: #1a3566;
    --pk-d: rgba(15, 34, 68, 0.1);
    --pk-g: rgba(15, 34, 68, 0.22);
    --tx:  #0a1628;
    --tx2: #2e4470;
    --tx3: #5a6e99;
    --tx4: #8a9dbf;
    --eq-bar-a: #1e3a6e;
    --eq-bar-b: #4a72b8;
    --nav-bg: rgba(237, 240, 245, 0.92);
    --card-hover-border: rgba(30, 58, 110, 0.25);
    --blur-overlay: linear-gradient(to bottom, rgba(237,240,245,0.55) 0%, rgba(237,240,245,0.82) 40%, rgba(237,240,245,0.97) 80%, rgba(237,240,245,1) 100%);
    --orb1-color: rgba(30, 58, 110, 0.06);
    --orb2-color: rgba(15, 34, 68, 0.04);
}
[data-theme="corporate-slate"] body,
[data-theme="corporate-slate"] html { background: #edf0f5; color: #0a1628; }

/* ──────────────────────────────────────────────────────────────
   6. DEFAULT STUDIO DARK  (existing base theme, formalised)
   True dark grey · off-white · electric blue
   ────────────────────────────────────────────────────────────── */
[data-theme="studio-dark"] {
    --bg:  #0d0f14;
    --bg1: #13161e;
    --bg2: #181c26;
    --bg3: #1e2330;
    --bg4: #242b3a;
    --bd:  rgba(0, 229, 255, 0.06);
    --bd2: rgba(0, 229, 255, 0.12);
    --bd3: rgba(0, 229, 255, 0.22);
    --or:  #00e5ff;
    --or2: #40f0ff;
    --or-d: rgba(0, 229, 255, 0.08);
    --or-g: rgba(0, 229, 255, 0.28);
    --pk:  #ff00aa;
    --pk2: #ff40c8;
    --pk-d: rgba(255, 0, 170, 0.08);
    --pk-g: rgba(255, 0, 170, 0.28);
    --tx:  #e8edf5;
    --tx2: #7a8799;
    --tx3: #475060;
    --tx4: #2e3848;
    --eq-bar-a: #00e5ff;
    --eq-bar-b: #ff00aa;
    --nav-bg: rgba(19, 21, 26, 0.85);
    --card-hover-border: rgba(0, 229, 255, 0.2);
    --blur-overlay: linear-gradient(to bottom, rgba(0,229,255,0.08) 0%, rgba(10,13,18,0.7) 35%, rgba(16,13,24,0.85) 70%, rgba(10,13,18,1) 100%);
    --orb1-color: rgba(0, 229, 255, 0.07);
    --orb2-color: rgba(255, 0, 170, 0.07);
}

/* ──────────────────────────────────────────────────────────────
   7. DEEP OCEAN BASS
   Rich navy · silver text · cyan glow
   ────────────────────────────────────────────────────────────── */
[data-theme="deep-ocean-bass"] {
    --bg:  #050e1f;
    --bg1: #0a1628;
    --bg2: #0d1e35;
    --bg3: #112642;
    --bg4: #162e50;
    --bd:  rgba(0, 220, 255, 0.07);
    --bd2: rgba(0, 220, 255, 0.13);
    --bd3: rgba(0, 220, 255, 0.24);
    --or:  #00d4ff;
    --or2: #33dfff;
    --or-d: rgba(0, 212, 255, 0.1);
    --or-g: rgba(0, 212, 255, 0.32);
    --pk:  #0077b6;
    --pk2: #0096c7;
    --pk-d: rgba(0, 119, 182, 0.12);
    --pk-g: rgba(0, 119, 182, 0.28);
    --tx:  #d0e8f8;
    --tx2: #7aa8cc;
    --tx3: #3d6a90;
    --tx4: #1e3d58;
    --eq-bar-a: #00d4ff;
    --eq-bar-b: #0096c7;
    --nav-bg: rgba(5, 14, 31, 0.9);
    --card-hover-border: rgba(0, 212, 255, 0.25);
    --blur-overlay: linear-gradient(to bottom, rgba(0,212,255,0.1) 0%, rgba(5,14,31,0.72) 35%, rgba(5,14,31,0.9) 70%, rgba(5,14,31,1) 100%);
    --orb1-color: rgba(0, 212, 255, 0.09);
    --orb2-color: rgba(0, 119, 182, 0.07);
}

/* ──────────────────────────────────────────────────────────────
   8. AMOLED MIDNIGHT
   True #000000 · vivid white · neon purple (battery-saving)
   ────────────────────────────────────────────────────────────── */
[data-theme="amoled-midnight"] {
    --bg:  #000000;
    --bg1: #0a0a0a;
    --bg2: #111111;
    --bg3: #1a1a1a;
    --bg4: #222222;
    --bd:  rgba(180, 0, 255, 0.07);
    --bd2: rgba(180, 0, 255, 0.13);
    --bd3: rgba(180, 0, 255, 0.22);
    --or:  #bf00ff;
    --or2: #d44dff;
    --or-d: rgba(191, 0, 255, 0.1);
    --or-g: rgba(191, 0, 255, 0.3);
    --pk:  #7c00cc;
    --pk2: #a033dd;
    --pk-d: rgba(124, 0, 204, 0.1);
    --pk-g: rgba(124, 0, 204, 0.28);
    --tx:  #ffffff;
    --tx2: #b0b0b0;
    --tx3: #666666;
    --tx4: #333333;
    --eq-bar-a: #bf00ff;
    --eq-bar-b: #d44dff;
    --nav-bg: rgba(0, 0, 0, 0.97);
    --card-hover-border: rgba(191, 0, 255, 0.28);
    --blur-overlay: linear-gradient(to bottom, rgba(191,0,255,0.06) 0%, rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.9) 70%, rgba(0,0,0,1) 100%);
    --orb1-color: rgba(191, 0, 255, 0.08);
    --orb2-color: rgba(124, 0, 204, 0.06);
}

/* ──────────────────────────────────────────────────────────────
   9. CHARCOAL UNDERGROUND
   Matte dark-grey · muted silver · pure white accents
   ────────────────────────────────────────────────────────────── */
[data-theme="charcoal-underground"] {
    --bg:  #1a1a1a;
    --bg1: #222222;
    --bg2: #2a2a2a;
    --bg3: #333333;
    --bg4: #3c3c3c;
    --bd:  rgba(255, 255, 255, 0.06);
    --bd2: rgba(255, 255, 255, 0.1);
    --bd3: rgba(255, 255, 255, 0.18);
    --or:  #e8e8e8;
    --or2: #ffffff;
    --or-d: rgba(255, 255, 255, 0.08);
    --or-g: rgba(255, 255, 255, 0.22);
    --pk:  #aaaaaa;
    --pk2: #cccccc;
    --pk-d: rgba(200, 200, 200, 0.07);
    --pk-g: rgba(200, 200, 200, 0.2);
    --tx:  #eeeeee;
    --tx2: #999999;
    --tx3: #606060;
    --tx4: #404040;
    --eq-bar-a: #cccccc;
    --eq-bar-b: #ffffff;
    --nav-bg: rgba(26, 26, 26, 0.9);
    --card-hover-border: rgba(255, 255, 255, 0.2);
    --blur-overlay: linear-gradient(to bottom, rgba(26,26,26,0.5) 0%, rgba(26,26,26,0.78) 40%, rgba(26,26,26,0.95) 80%, rgba(26,26,26,1) 100%);
    --orb1-color: rgba(255, 255, 255, 0.04);
    --orb2-color: rgba(200, 200, 200, 0.03);
}

/* ──────────────────────────────────────────────────────────────
   10. CYBERPUNK RAVE
   Deep ink · hot-pink sliders · neon-yellow EQ bars
   ────────────────────────────────────────────────────────────── */
[data-theme="cyberpunk-rave"] {
    --bg:  #09070f;
    --bg1: #110e1c;
    --bg2: #181428;
    --bg3: #201a34;
    --bg4: #272040;
    --bd:  rgba(255, 0, 128, 0.08);
    --bd2: rgba(255, 0, 128, 0.14);
    --bd3: rgba(255, 0, 128, 0.26);
    --or:  #ff0080;
    --or2: #ff40a0;
    --or-d: rgba(255, 0, 128, 0.1);
    --or-g: rgba(255, 0, 128, 0.35);
    --pk:  #ffe600;
    --pk2: #fff066;
    --pk-d: rgba(255, 230, 0, 0.1);
    --pk-g: rgba(255, 230, 0, 0.35);
    --tx:  #fff0f8;
    --tx2: #cc80aa;
    --tx3: #663366;
    --tx4: #331a33;
    --eq-bar-a: #ff0080;
    --eq-bar-b: #ffe600;
    --nav-bg: rgba(9, 7, 15, 0.92);
    --card-hover-border: rgba(255, 0, 128, 0.35);
    --blur-overlay: linear-gradient(to bottom, rgba(255,0,128,0.07) 0%, rgba(9,7,15,0.75) 35%, rgba(9,7,15,0.92) 70%, rgba(9,7,15,1) 100%);
    --orb1-color: rgba(255, 0, 128, 0.1);
    --orb2-color: rgba(255, 230, 0, 0.07);
}

/* ──────────────────────────────────────────────────────────────
   11. FOREST MOSS
   Deep sage green · cream text · gold accents (lo-fi / ambient)
   ────────────────────────────────────────────────────────────── */
[data-theme="forest-moss"] {
    --bg:  #0f1a12;
    --bg1: #162019;
    --bg2: #1d2820;
    --bg3: #243028;
    --bg4: #2b3830;
    --bd:  rgba(100, 180, 80, 0.07);
    --bd2: rgba(100, 180, 80, 0.13);
    --bd3: rgba(100, 180, 80, 0.24);
    --or:  #c8a83c;
    --or2: #dfc058;
    --or-d: rgba(200, 168, 60, 0.1);
    --or-g: rgba(200, 168, 60, 0.3);
    --pk:  #7a9e50;
    --pk2: #96ba68;
    --pk-d: rgba(122, 158, 80, 0.1);
    --pk-g: rgba(122, 158, 80, 0.28);
    --tx:  #e8e0cc;
    --tx2: #9aaa88;
    --tx3: #556644;
    --tx4: #2e3d28;
    --eq-bar-a: #c8a83c;
    --eq-bar-b: #7a9e50;
    --nav-bg: rgba(15, 26, 18, 0.9);
    --card-hover-border: rgba(200, 168, 60, 0.28);
    --blur-overlay: linear-gradient(to bottom, rgba(200,168,60,0.07) 0%, rgba(15,26,18,0.75) 35%, rgba(15,26,18,0.92) 70%, rgba(15,26,18,1) 100%);
    --orb1-color: rgba(200, 168, 60, 0.08);
    --orb2-color: rgba(122, 158, 80, 0.07);
}

/* ──────────────────────────────────────────────────────────────
   12. DESERT NOMAD
   Warm tan sand · dark espresso text · burnt orange controls
   ────────────────────────────────────────────────────────────── */
[data-theme="desert-nomad"] {
    --bg:  #f2e8d8;
    --bg1: #faf3e8;
    --bg2: #ecddc8;
    --bg3: #e0cfb4;
    --bg4: #d3c0a0;
    --bd:  rgba(100, 50, 10, 0.08);
    --bd2: rgba(100, 50, 10, 0.14);
    --bd3: rgba(100, 50, 10, 0.24);
    --or:  #c45020;
    --or2: #e06830;
    --or-d: rgba(196, 80, 32, 0.1);
    --or-g: rgba(196, 80, 32, 0.28);
    --pk:  #8b3010;
    --pk2: #aa4820;
    --pk-d: rgba(139, 48, 16, 0.1);
    --pk-g: rgba(139, 48, 16, 0.25);
    --tx:  #1e0e04;
    --tx2: #4a2810;
    --tx3: #7a5030;
    --tx4: #aa7850;
    --eq-bar-a: #c45020;
    --eq-bar-b: #e8a020;
    --nav-bg: rgba(242, 232, 216, 0.92);
    --card-hover-border: rgba(196, 80, 32, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(242,232,216,0.55) 0%, rgba(242,232,216,0.82) 40%, rgba(242,232,216,0.97) 80%, rgba(242,232,216,1) 100%);
    --orb1-color: rgba(196, 80, 32, 0.08);
    --orb2-color: rgba(139, 48, 16, 0.05);
}
[data-theme="desert-nomad"] body,
[data-theme="desert-nomad"] html { background: #f2e8d8; color: #1e0e04; }

/* ──────────────────────────────────────────────────────────────
   13. RETRO VINYL
   Aged sepia · monochrome text · brass/copper controls
   ────────────────────────────────────────────────────────────── */
[data-theme="retro-vinyl"] {
    --bg:  #f5eed8;
    --bg1: #faf5e4;
    --bg2: #ede4ca;
    --bg3: #e0d8b6;
    --bg4: #d3caa2;
    --bd:  rgba(80, 60, 20, 0.09);
    --bd2: rgba(80, 60, 20, 0.16);
    --bd3: rgba(80, 60, 20, 0.26);
    --or:  #b5762a;
    --or2: #cc9040;
    --or-d: rgba(181, 118, 42, 0.1);
    --or-g: rgba(181, 118, 42, 0.3);
    --pk:  #7a4810;
    --pk2: #986025;
    --pk-d: rgba(122, 72, 16, 0.1);
    --pk-g: rgba(122, 72, 16, 0.25);
    --tx:  #1a1008;
    --tx2: #3d2810;
    --tx3: #7a5a30;
    --tx4: #aa8a60;
    --eq-bar-a: #b5762a;
    --eq-bar-b: #cc9040;
    --nav-bg: rgba(245, 238, 216, 0.92);
    --card-hover-border: rgba(181, 118, 42, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(245,238,216,0.55) 0%, rgba(245,238,216,0.82) 40%, rgba(245,238,216,0.97) 80%, rgba(245,238,216,1) 100%);
    --orb1-color: rgba(181, 118, 42, 0.08);
    --orb2-color: rgba(122, 72, 16, 0.05);
}
[data-theme="retro-vinyl"] body,
[data-theme="retro-vinyl"] html { background: #f5eed8; color: #1a1008; }

/* ──────────────────────────────────────────────────────────────
   14. OCEANIC BREEZE
   Seafoam backdrop · dark navy typography · coral pink buttons
   ────────────────────────────────────────────────────────────── */
[data-theme="oceanic-breeze"] {
    --bg:  #e8f5f2;
    --bg1: #f2fbf8;
    --bg2: #daeee9;
    --bg3: #cce6e0;
    --bg4: #bdddd6;
    --bd:  rgba(0, 80, 100, 0.08);
    --bd2: rgba(0, 80, 100, 0.14);
    --bd3: rgba(0, 80, 100, 0.24);
    --or:  #e8506a;
    --or2: #f07088;
    --or-d: rgba(232, 80, 106, 0.1);
    --or-g: rgba(232, 80, 106, 0.28);
    --pk:  #c0344c;
    --pk2: #d8506a;
    --pk-d: rgba(192, 52, 76, 0.1);
    --pk-g: rgba(192, 52, 76, 0.25);
    --tx:  #082030;
    --tx2: #2a5068;
    --tx3: #5a8898;
    --tx4: #8ab0bc;
    --eq-bar-a: #e8506a;
    --eq-bar-b: #00a896;
    --nav-bg: rgba(232, 245, 242, 0.92);
    --card-hover-border: rgba(232, 80, 106, 0.28);
    --blur-overlay: linear-gradient(to bottom, rgba(232,245,242,0.55) 0%, rgba(232,245,242,0.82) 40%, rgba(232,245,242,0.97) 80%, rgba(232,245,242,1) 100%);
    --orb1-color: rgba(0, 168, 150, 0.08);
    --orb2-color: rgba(232, 80, 106, 0.06);
}
[data-theme="oceanic-breeze"] body,
[data-theme="oceanic-breeze"] html { background: #e8f5f2; color: #082030; }

/* ──────────────────────────────────────────────────────────────
   15. AUTUMN SYMPHONY
   Rich burgundy/maroon · harvest-yellow text · amber accents
   ────────────────────────────────────────────────────────────── */
[data-theme="autumn-symphony"] {
    --bg:  #2a0a10;
    --bg1: #351018;
    --bg2: #401820;
    --bg3: #4c2028;
    --bg4: #582830;
    --bd:  rgba(255, 160, 30, 0.07);
    --bd2: rgba(255, 160, 30, 0.13);
    --bd3: rgba(255, 160, 30, 0.24);
    --or:  #e8a020;
    --or2: #f0bc48;
    --or-d: rgba(232, 160, 32, 0.1);
    --or-g: rgba(232, 160, 32, 0.32);
    --pk:  #c06808;
    --pk2: #d88828;
    --pk-d: rgba(192, 104, 8, 0.1);
    --pk-g: rgba(192, 104, 8, 0.28);
    --tx:  #f8e890;
    --tx2: #c8a060;
    --tx3: #805030;
    --tx4: #4a2818;
    --eq-bar-a: #e8a020;
    --eq-bar-b: #c06808;
    --nav-bg: rgba(42, 10, 16, 0.92);
    --card-hover-border: rgba(232, 160, 32, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(232,160,32,0.08) 0%, rgba(42,10,16,0.75) 35%, rgba(42,10,16,0.92) 70%, rgba(42,10,16,1) 100%);
    --orb1-color: rgba(232, 160, 32, 0.09);
    --orb2-color: rgba(192, 104, 8, 0.07);
}

/* ──────────────────────────────────────────────────────────────
   16. SYNTHWAVE NEON
   Deep retro purple · pink-to-orange gradient bars · glowing EQ
   ────────────────────────────────────────────────────────────── */
[data-theme="synthwave-neon"] {
    --bg:  #110820;
    --bg1: #190e30;
    --bg2: #201440;
    --bg3: #281a50;
    --bg4: #302060;
    --bd:  rgba(255, 60, 180, 0.08);
    --bd2: rgba(255, 60, 180, 0.15);
    --bd3: rgba(255, 60, 180, 0.28);
    --or:  #ff3ca0;
    --or2: #ff70c0;
    --or-d: rgba(255, 60, 160, 0.1);
    --or-g: rgba(255, 60, 160, 0.35);
    --pk:  #ff8c00;
    --pk2: #ffae44;
    --pk-d: rgba(255, 140, 0, 0.1);
    --pk-g: rgba(255, 140, 0, 0.32);
    --tx:  #ffe8f8;
    --tx2: #cc80c8;
    --tx3: #663088;
    --tx4: #330855;
    --eq-bar-a: #ff3ca0;
    --eq-bar-b: #ff8c00;
    --nav-bg: rgba(17, 8, 32, 0.92);
    --card-hover-border: rgba(255, 60, 160, 0.35);
    --blur-overlay: linear-gradient(to bottom, rgba(255,60,160,0.08) 0%, rgba(17,8,32,0.75) 35%, rgba(17,8,32,0.92) 70%, rgba(17,8,32,1) 100%);
    --orb1-color: rgba(255, 60, 160, 0.1);
    --orb2-color: rgba(255, 140, 0, 0.08);
}

/* ──────────────────────────────────────────────────────────────
   17. SWEET BUBBLEGUM
   Pastel pink · soft white cards · lavender sliders (pop/kawaii)
   ────────────────────────────────────────────────────────────── */
[data-theme="sweet-bubblegum"] {
    --bg:  #fce8f4;
    --bg1: #fff0fa;
    --bg2: #f5d8ee;
    --bg3: #edc8e4;
    --bg4: #e4b8d8;
    --bd:  rgba(180, 0, 160, 0.08);
    --bd2: rgba(180, 0, 160, 0.13);
    --bd3: rgba(180, 0, 160, 0.22);
    --or:  #9b59b6;
    --or2: #b97dd4;
    --or-d: rgba(155, 89, 182, 0.1);
    --or-g: rgba(155, 89, 182, 0.28);
    --pk:  #e054a0;
    --pk2: #ee7ab8;
    --pk-d: rgba(224, 84, 160, 0.1);
    --pk-g: rgba(224, 84, 160, 0.28);
    --tx:  #2a0a28;
    --tx2: #7a3a78;
    --tx3: #b078b0;
    --tx4: #d8a8d8;
    --eq-bar-a: #9b59b6;
    --eq-bar-b: #e054a0;
    --nav-bg: rgba(252, 232, 244, 0.92);
    --card-hover-border: rgba(155, 89, 182, 0.28);
    --blur-overlay: linear-gradient(to bottom, rgba(252,232,244,0.55) 0%, rgba(252,232,244,0.82) 40%, rgba(252,232,244,0.97) 80%, rgba(252,232,244,1) 100%);
    --orb1-color: rgba(155, 89, 182, 0.08);
    --orb2-color: rgba(224, 84, 160, 0.07);
}
[data-theme="sweet-bubblegum"] body,
[data-theme="sweet-bubblegum"] html { background: #fce8f4; color: #2a0a28; }

/* ──────────────────────────────────────────────────────────────
   18. ROYAL VELVET
   Deep plum/violet · metallic gold accents · crisp white text
   ────────────────────────────────────────────────────────────── */
[data-theme="royal-velvet"] {
    --bg:  #14082a;
    --bg1: #1c1038;
    --bg2: #241848;
    --bg3: #2c2058;
    --bg4: #342868;
    --bd:  rgba(220, 180, 50, 0.08);
    --bd2: rgba(220, 180, 50, 0.15);
    --bd3: rgba(220, 180, 50, 0.28);
    --or:  #d4a820;
    --or2: #e8c84a;
    --or-d: rgba(212, 168, 32, 0.1);
    --or-g: rgba(212, 168, 32, 0.32);
    --pk:  #9060d0;
    --pk2: #b088e8;
    --pk-d: rgba(144, 96, 208, 0.1);
    --pk-g: rgba(144, 96, 208, 0.28);
    --tx:  #f8f4ff;
    --tx2: #c0a8e8;
    --tx3: #705898;
    --tx4: #3c2858;
    --eq-bar-a: #d4a820;
    --eq-bar-b: #9060d0;
    --nav-bg: rgba(20, 8, 42, 0.92);
    --card-hover-border: rgba(212, 168, 32, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(212,168,32,0.07) 0%, rgba(20,8,42,0.75) 35%, rgba(20,8,42,0.92) 70%, rgba(20,8,42,1) 100%);
    --orb1-color: rgba(212, 168, 32, 0.09);
    --orb2-color: rgba(144, 96, 208, 0.08);
}

/* ──────────────────────────────────────────────────────────────
   19. SOLARIZED STUDIO
   Low-contrast yellowish-green backdrop · teal text · amber
   ────────────────────────────────────────────────────────────── */
[data-theme="solarized-studio"] {
    --bg:  #002b36;
    --bg1: #073642;
    --bg2: #0a4050;
    --bg3: #0d4a5e;
    --bg4: #10556c;
    --bd:  rgba(0, 200, 180, 0.07);
    --bd2: rgba(0, 200, 180, 0.13);
    --bd3: rgba(0, 200, 180, 0.24);
    --or:  #b58900;
    --or2: #d4a820;
    --or-d: rgba(181, 137, 0, 0.12);
    --or-g: rgba(181, 137, 0, 0.32);
    --pk:  #268bd2;
    --pk2: #4aa8e8;
    --pk-d: rgba(38, 139, 210, 0.12);
    --pk-g: rgba(38, 139, 210, 0.28);
    --tx:  #839496;
    --tx2: #586e75;
    --tx3: #2a4855;
    --tx4: #1a3040;
    --eq-bar-a: #b58900;
    --eq-bar-b: #268bd2;
    --nav-bg: rgba(0, 43, 54, 0.92);
    --card-hover-border: rgba(181, 137, 0, 0.28);
    --blur-overlay: linear-gradient(to bottom, rgba(181,137,0,0.07) 0%, rgba(0,43,54,0.75) 35%, rgba(0,43,54,0.92) 70%, rgba(0,43,54,1) 100%);
    --orb1-color: rgba(181, 137, 0, 0.09);
    --orb2-color: rgba(38, 139, 210, 0.07);
}

/* ──────────────────────────────────────────────────────────────
   20. ACID TECHNO
   Dark charcoal · electric lime green · high-energy visualizer
   ────────────────────────────────────────────────────────────── */
[data-theme="acid-techno"] {
    --bg:  #0d0d0d;
    --bg1: #151515;
    --bg2: #1c1c1c;
    --bg3: #242424;
    --bg4: #2c2c2c;
    --bd:  rgba(120, 255, 0, 0.07);
    --bd2: rgba(120, 255, 0, 0.13);
    --bd3: rgba(120, 255, 0, 0.24);
    --or:  #78ff00;
    --or2: #a0ff44;
    --or-d: rgba(120, 255, 0, 0.1);
    --or-g: rgba(120, 255, 0, 0.35);
    --pk:  #44cc00;
    --pk2: #66dd22;
    --pk-d: rgba(68, 204, 0, 0.1);
    --pk-g: rgba(68, 204, 0, 0.28);
    --tx:  #e8ffe0;
    --tx2: #88bb66;
    --tx3: #446633;
    --tx4: #222e18;
    --eq-bar-a: #78ff00;
    --eq-bar-b: #a0ff44;
    --nav-bg: rgba(13, 13, 13, 0.95);
    --card-hover-border: rgba(120, 255, 0, 0.3);
    --blur-overlay: linear-gradient(to bottom, rgba(120,255,0,0.06) 0%, rgba(13,13,13,0.78) 35%, rgba(13,13,13,0.94) 70%, rgba(13,13,13,1) 100%);
    --orb1-color: rgba(120, 255, 0, 0.09);
    --orb2-color: rgba(68, 204, 0, 0.06);
}

/* ══════════════════════════════════════════════════════════════
   SPIN / PULSE ANIMATIONS for cover art — theme-aware
   Each theme overrides the disc spinning color via --or
   ══════════════════════════════════════════════════════════════ */
[data-theme] #full-cover {
    border: 2px solid color-mix(in srgb, var(--or) 30%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--or) 12%, transparent),
        0 0 30px color-mix(in srgb, var(--or) 15%, transparent),
        0 20px 60px rgba(0,0,0,0.7) !important;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform;
}
[data-theme] #full-cover:hover {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--or) 35%, transparent),
        0 0 50px color-mix(in srgb, var(--or) 25%, transparent),
        0 20px 60px rgba(0,0,0,0.7) !important;
}

/* Full player play button inherits accent */
[data-theme] #full-player button[onclick="TP()"] {
    background: linear-gradient(135deg, var(--or), var(--pk)) !important;
    box-shadow:
        0 0 0 1px var(--or-g),
        0 8px 32px var(--or-g),
        0 4px 12px var(--pk-g) !important;
}

/* Splash rings tint */
[data-theme] .splash-rings span {
    border-color: var(--or-g) !important;
}

/* Design collection v1 — complete token sets for the 19 non-Swiss directions. */
html.theme-booting *,html.theme-booting *::before,html.theme-booting *::after{transition:none!important}
[data-theme="minimalism"]{--bg:#fafafa;--bg1:#fff;--bg2:#f2f2f2;--bg3:#e5e5e5;--bg4:#d4d4d4;--bd:#00000012;--bd2:#00000038;--bd3:#00000070;--or:#111;--or2:#333;--or-d:#0000000a;--or-g:#00000018;--pk:#777;--pk2:#aaa;--pk-d:#7771;--pk-g:#7772;--tx:#111;--tx2:#333;--tx3:#737373;--tx4:#aaa;--eq-bar-a:#111;--eq-bar-b:#888;--nav-bg:#fafafaf2;--card-hover-border:#111;--blur-overlay:#fafafa;--orb1-color:transparent;--orb2-color:transparent;--rsm:2px;--rmd:4px;--rlg:6px;--rxl:8px}
[data-theme="editorial"]{--bg:#f1eee7;--bg1:#fffdf8;--bg2:#e6e0d5;--bg3:#d7d0c4;--bg4:#c5bcad;--bd:#17255418;--bd2:#17255440;--bd3:#17255480;--or:#9b1c1c;--or2:#c42b2b;--or-d:#9b1c1c12;--or-g:#9b1c1c30;--pk:#172554;--pk2:#334a82;--pk-d:#17255412;--pk-g:#17255430;--tx:#171717;--tx2:#343434;--tx3:#69645c;--tx4:#9b958b;--eq-bar-a:#172554;--eq-bar-b:#9b1c1c;--nav-bg:#f1eee7f2;--card-hover-border:#9b1c1c;--blur-overlay:#f1eee7;--orb1-color:transparent;--orb2-color:transparent;--rsm:0;--rmd:0;--rlg:0;--rxl:0}
[data-theme="handwritten"]{--bg:#fff8dc;--bg1:#fffef5;--bg2:#f4edcf;--bg3:#e8dfbd;--bg4:#d7cda8;--bd:#3b2f2020;--bd2:#3b2f2045;--bd3:#3b2f2080;--or:#255f85;--or2:#367fae;--or-d:#255f8512;--or-g:#255f8535;--pk:#d97706;--pk2:#f59e0b;--pk-d:#d9770612;--pk-g:#d9770630;--tx:#2d261f;--tx2:#4b4034;--tx3:#7b6b58;--tx4:#ac9b82;--eq-bar-a:#255f85;--eq-bar-b:#d97706;--nav-bg:#fff8dcf2;--card-hover-border:#255f85;--blur-overlay:#fff8dc;--orb1-color:#255f8512;--orb2-color:#d9770612;--rsm:7px;--rmd:12px;--rlg:18px;--rxl:26px}
[data-theme="maximalism"]{--bg:#2b0a3d;--bg1:#47115f;--bg2:#351047;--bg3:#5c1878;--bg4:#721e92;--bd:#ffcf0030;--bd2:#ffcf0060;--bd3:#ffcf00aa;--or:#ffcf00;--or2:#fff05a;--or-d:#ffcf0016;--or-g:#ffcf0050;--pk:#ff3d81;--pk2:#ff72a5;--pk-d:#ff3d8118;--pk-g:#ff3d8150;--tx:#fff9e8;--tx2:#ffe9f1;--tx3:#d6b7dd;--tx4:#956fa0;--eq-bar-a:#ffcf00;--eq-bar-b:#ff3d81;--nav-bg:#2b0a3df2;--card-hover-border:#ffcf00;--blur-overlay:#2b0a3d;--orb1-color:#ff3d8130;--orb2-color:#00e5ff22;--rsm:4px;--rmd:12px;--rlg:22px;--rxl:36px}
[data-theme="vector-art"]{--bg:#fff6df;--bg1:#fff;--bg2:#ffe8b3;--bg3:#ffd778;--bg4:#ffc24a;--bd:#0b183020;--bd2:#0b183050;--bd3:#0b183090;--or:#0057ff;--or2:#4384ff;--or-d:#0057ff12;--or-g:#0057ff40;--pk:#ff4d00;--pk2:#ff7a3d;--pk-d:#ff4d0012;--pk-g:#ff4d0040;--tx:#0b1830;--tx2:#263750;--tx3:#60708b;--tx4:#9ca9b9;--eq-bar-a:#0057ff;--eq-bar-b:#ff4d00;--nav-bg:#fff6dff2;--card-hover-border:#0057ff;--blur-overlay:#fff6df;--orb1-color:#0057ff16;--orb2-color:#ff4d0016;--rsm:0;--rmd:6px;--rlg:14px;--rxl:24px}
[data-theme="collage-art"]{--bg:#e7e1d8;--bg1:#fffaf1;--bg2:#d8d0c4;--bg3:#c8bdb0;--bg4:#b4a799;--bd:#1f293720;--bd2:#1f293750;--bd3:#1f293790;--or:#e11d48;--or2:#fb4f72;--or-d:#e11d4815;--or-g:#e11d4840;--pk:#2563eb;--pk2:#60a5fa;--pk-d:#2563eb15;--pk-g:#2563eb40;--tx:#171717;--tx2:#363636;--tx3:#68635d;--tx4:#999087;--eq-bar-a:#e11d48;--eq-bar-b:#2563eb;--nav-bg:#e7e1d8f0;--card-hover-border:#e11d48;--blur-overlay:#e7e1d8;--orb1-color:#e11d4818;--orb2-color:#2563eb18;--rsm:0;--rmd:2px;--rlg:3px;--rxl:4px}
[data-theme="pop-art"]{--bg:#ffe500;--bg1:#fff;--bg2:#ffd600;--bg3:#ffc400;--bg4:#f2a900;--bd:#0003;--bd2:#0007;--bd3:#000;--or:#ed1c24;--or2:#ff4750;--or-d:#ed1c2418;--or-g:#ed1c2448;--pk:#0066ff;--pk2:#3d8aff;--pk-d:#0066ff18;--pk-g:#0066ff48;--tx:#050505;--tx2:#242424;--tx3:#555;--tx4:#888;--eq-bar-a:#ed1c24;--eq-bar-b:#0066ff;--nav-bg:#ffe500f4;--card-hover-border:#000;--blur-overlay:#ffe500;--orb1-color:#ed1c2430;--orb2-color:#0066ff30;--rsm:0;--rmd:0;--rlg:0;--rxl:0}
[data-theme="graffiti"]{--bg:#101010;--bg1:#202020;--bg2:#181818;--bg3:#2c2c2c;--bg4:#3a3a3a;--bd:#fff2;--bd2:#fff5;--bd3:#fff9;--or:#b7ff00;--or2:#d5ff70;--or-d:#b7ff0015;--or-g:#b7ff0045;--pk:#ff2e93;--pk2:#ff72b4;--pk-d:#ff2e9315;--pk-g:#ff2e9345;--tx:#f6f6f6;--tx2:#ddd;--tx3:#999;--tx4:#666;--eq-bar-a:#b7ff00;--eq-bar-b:#ff2e93;--nav-bg:#101010f2;--card-hover-border:#b7ff00;--blur-overlay:#101010;--orb1-color:#b7ff0018;--orb2-color:#ff2e9320;--rsm:3px;--rmd:5px;--rlg:8px;--rxl:12px}
[data-theme="futuristic"]{--bg:#050816;--bg1:#0b1230;--bg2:#080e24;--bg3:#111b3d;--bg4:#182652;--bd:#37f3ff22;--bd2:#37f3ff55;--bd3:#37f3ffaa;--or:#37f3ff;--or2:#7df9ff;--or-d:#37f3ff14;--or-g:#37f3ff45;--pk:#8b5cf6;--pk2:#b79cff;--pk-d:#8b5cf614;--pk-g:#8b5cf645;--tx:#effcff;--tx2:#c8ebf5;--tx3:#7898ae;--tx4:#435a70;--eq-bar-a:#37f3ff;--eq-bar-b:#8b5cf6;--nav-bg:#050816ee;--card-hover-border:#37f3ff;--blur-overlay:#050816;--orb1-color:#37f3ff20;--orb2-color:#8b5cf625;--rsm:3px;--rmd:8px;--rlg:14px;--rxl:22px}
[data-theme="cyberpunk"]{--bg:#090713;--bg1:#171027;--bg2:#100b1e;--bg3:#241738;--bg4:#322049;--bd:#fcee0925;--bd2:#fcee0955;--bd3:#fcee09aa;--or:#fcee09;--or2:#fff568;--or-d:#fcee0915;--or-g:#fcee0950;--pk:#ff2a6d;--pk2:#ff6592;--pk-d:#ff2a6d15;--pk-g:#ff2a6d50;--tx:#fffdf0;--tx2:#f9eefa;--tx3:#a98daf;--tx4:#6d5575;--eq-bar-a:#fcee09;--eq-bar-b:#ff2a6d;--nav-bg:#090713f2;--card-hover-border:#fcee09;--blur-overlay:#090713;--orb1-color:#ff2a6d28;--orb2-color:#00e5ff20;--rsm:0;--rmd:2px;--rlg:5px;--rxl:8px}
[data-theme="glassmorphism"]{--bg:#15294d;--bg1:#ffffff22;--bg2:#ffffff18;--bg3:#ffffff2b;--bg4:#ffffff38;--bd:#fff2;--bd2:#fff5;--bd3:#fff9;--or:#86f7ff;--or2:#b7fbff;--or-d:#86f7ff16;--or-g:#86f7ff45;--pk:#d8b4fe;--pk2:#ead7ff;--pk-d:#d8b4fe16;--pk-g:#d8b4fe45;--tx:#fff;--tx2:#edf7ff;--tx3:#b7c8df;--tx4:#7f94af;--eq-bar-a:#86f7ff;--eq-bar-b:#d8b4fe;--nav-bg:#15294dd9;--card-hover-border:#fff8;--blur-overlay:#15294d;--orb1-color:#86f7ff30;--orb2-color:#d8b4fe30;--rsm:12px;--rmd:18px;--rlg:26px;--rxl:36px}
[data-theme="pixel-art"]{--bg:#17152c;--bg1:#272442;--bg2:#201d37;--bg3:#353151;--bg4:#454061;--bd:#fff2;--bd2:#fff5;--bd3:#fff9;--or:#70e000;--or2:#9ef01a;--or-d:#70e00016;--or-g:#70e00045;--pk:#ff4d6d;--pk2:#ff758f;--pk-d:#ff4d6d16;--pk-g:#ff4d6d45;--tx:#fff;--tx2:#e7e4fa;--tx3:#aaa4c7;--tx4:#6f698c;--eq-bar-a:#70e000;--eq-bar-b:#ff4d6d;--nav-bg:#17152cf2;--card-hover-border:#70e000;--blur-overlay:#17152c;--orb1-color:transparent;--orb2-color:transparent;--rsm:0;--rmd:0;--rlg:0;--rxl:0}
[data-theme="y2k"]{--bg:#d9f7ff;--bg1:#f7fdff;--bg2:#c5edfb;--bg3:#a9dff0;--bg4:#8dc9dc;--bd:#5b21b620;--bd2:#5b21b650;--bd3:#5b21b690;--or:#5b21b6;--or2:#7c3aed;--or-d:#5b21b614;--or-g:#5b21b640;--pk:#ff4fd8;--pk2:#ff8ae7;--pk-d:#ff4fd814;--pk-g:#ff4fd840;--tx:#171033;--tx2:#392b5b;--tx3:#6f628a;--tx4:#a49ab9;--eq-bar-a:#5b21b6;--eq-bar-b:#ff4fd8;--nav-bg:#d9f7fff0;--card-hover-border:#5b21b6;--blur-overlay:#d9f7ff;--orb1-color:#5b21b620;--orb2-color:#ff4fd825;--rsm:16px;--rmd:24px;--rlg:32px;--rxl:48px}
[data-theme="aurora"]{--bg:#061b2b;--bg1:#0b2c3d;--bg2:#082333;--bg3:#12394a;--bg4:#184b5b;--bd:#3df2bd20;--bd2:#3df2bd50;--bd3:#3df2bd90;--or:#3df2bd;--or2:#7fffd4;--or-d:#3df2bd14;--or-g:#3df2bd45;--pk:#a855f7;--pk2:#c084fc;--pk-d:#a855f714;--pk-g:#a855f745;--tx:#effffb;--tx2:#d5f7ef;--tx3:#86afa8;--tx4:#50756f;--eq-bar-a:#3df2bd;--eq-bar-b:#a855f7;--nav-bg:#061b2be8;--card-hover-border:#3df2bd;--blur-overlay:#061b2b;--orb1-color:#3df2bd28;--orb2-color:#a855f730;--rsm:10px;--rmd:16px;--rlg:24px;--rxl:36px}
[data-theme="surreal-design"]{--bg:#1d1233;--bg1:#30204c;--bg2:#281a40;--bg3:#422b61;--bg4:#593677;--bd:#6ee7f920;--bd2:#6ee7f950;--bd3:#6ee7f990;--or:#ff8a5c;--or2:#ffb08f;--or-d:#ff8a5c14;--or-g:#ff8a5c45;--pk:#6ee7f9;--pk2:#a5f3fc;--pk-d:#6ee7f914;--pk-g:#6ee7f945;--tx:#fff8f2;--tx2:#f5e8ff;--tx3:#b9a6ca;--tx4:#77668d;--eq-bar-a:#ff8a5c;--eq-bar-b:#6ee7f9;--nav-bg:#1d1233e8;--card-hover-border:#ff8a5c;--blur-overlay:#1d1233;--orb1-color:#ff8a5c28;--orb2-color:#6ee7f925;--rsm:18px;--rmd:28px;--rlg:44px;--rxl:64px}
[data-theme="bohemian"]{--bg:#efe3c5;--bg1:#fff5dc;--bg2:#e2d2ad;--bg3:#d3bd93;--bg4:#bea678;--bd:#3f352520;--bd2:#3f352550;--bd3:#3f352590;--or:#a34128;--or2:#c76043;--or-d:#a3412814;--or-g:#a3412840;--pk:#386641;--pk2:#5a8f62;--pk-d:#38664114;--pk-g:#38664140;--tx:#30291f;--tx2:#514634;--tx3:#776b55;--tx4:#a3977e;--eq-bar-a:#a34128;--eq-bar-b:#386641;--nav-bg:#efe3c5f2;--card-hover-border:#a34128;--blur-overlay:#efe3c5;--orb1-color:#a3412818;--orb2-color:#38664118;--rsm:8px;--rmd:14px;--rlg:24px;--rxl:36px}
[data-theme="retro"]{--bg:#f3d9a4;--bg1:#fff1c9;--bg2:#e8c783;--bg3:#d8b368;--bg4:#c19a4d;--bd:#29251e25;--bd2:#29251e55;--bd3:#29251e90;--or:#b33f2e;--or2:#d65b47;--or-d:#b33f2e14;--or-g:#b33f2e40;--pk:#1f6f78;--pk2:#3c9098;--pk-d:#1f6f7814;--pk-g:#1f6f7840;--tx:#29251e;--tx2:#4b4234;--tx3:#766a55;--tx4:#a09173;--eq-bar-a:#b33f2e;--eq-bar-b:#1f6f78;--nav-bg:#f3d9a4f2;--card-hover-border:#b33f2e;--blur-overlay:#f3d9a4;--orb1-color:#b33f2e16;--orb2-color:#1f6f7816;--rsm:3px;--rmd:7px;--rlg:12px;--rxl:18px}
[data-theme="clay-style"]{--bg:#e8ddcf;--bg1:#f7efe5;--bg2:#ddd0c0;--bg3:#ccbcaa;--bg4:#b8a590;--bd:#4b403420;--bd2:#4b403440;--bd3:#4b403470;--or:#c96d4b;--or2:#df8d6f;--or-d:#c96d4b14;--or-g:#c96d4b35;--pk:#719d8c;--pk2:#92b9aa;--pk-d:#719d8c14;--pk-g:#719d8c35;--tx:#352e28;--tx2:#544a41;--tx3:#807266;--tx4:#ac9e90;--eq-bar-a:#c96d4b;--eq-bar-b:#719d8c;--nav-bg:#e8ddcff0;--card-hover-border:#c96d4b;--blur-overlay:#e8ddcf;--orb1-color:#c96d4b18;--orb2-color:#719d8c18;--rsm:18px;--rmd:26px;--rlg:36px;--rxl:50px}
[data-theme="victorian"]{--bg:#1b1816;--bg1:#2c2520;--bg2:#241f1b;--bg3:#3a3029;--bg4:#4b3c33;--bd:#c8a96b25;--bd2:#c8a96b55;--bd3:#c8a96b90;--or:#c8a96b;--or2:#e0c78e;--or-d:#c8a96b14;--or-g:#c8a96b40;--pk:#7d2941;--pk2:#a84361;--pk-d:#7d294114;--pk-g:#7d294140;--tx:#f4ead7;--tx2:#dfd0b8;--tx3:#a99880;--tx4:#6d6253;--eq-bar-a:#c8a96b;--eq-bar-b:#7d2941;--nav-bg:#1b1816f2;--card-hover-border:#c8a96b;--blur-overlay:#1b1816;--orb1-color:#c8a96b16;--orb2-color:#7d294120;--rsm:2px;--rmd:6px;--rlg:12px;--rxl:18px}