/* ════════════════════════════════════════════════
   theme.css — Meteon CRM  |  Cream + Brown theme
   Light mode ONLY — dark mode removed Apr 26 2026
   ════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ══════════════════════════════════════
   LIGHT MODE (Cream) — only theme
   ══════════════════════════════════════ */
[data-theme="saturn"], :root {
    --bg:              #f0ebe0;
    --surface:         #faf7f2;
    --surface2:        #e8e0d0;
    --sidebar-bg:      #ddd5c2;
    --sidebar-top:     #d0c8b4;
    --sidebar-bot:     #cfc7b3;
    --border:          #cec5b0;
    --text:            #2c2416;
    --subtext:         #7a6d58;
    --accent:          #7a5c2e;
    --btn:             #7a5c2e;
    --btn-hover:       #9b7540;
    --nav-text:        #5a4a35;
    --nav-hover-bg:    rgba(122,92,46,0.12);
    --nav-active-bg:   #8b6535;
    --nav-active-text: #faf7f2;
    --danger:          #9b3a2e;
    --success:         #3a6644;
    --input-bg:        #eee7d8;
    --input-border:    #c4b89e;
    --th-color:        #8a7a64;
    --td-border:       #e4ddd0;
    --table-hover:     #ede6d8;
}

/* ══════════════════════════════════════
   BASE
   ══════════════════════════════════════ */
body {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    font-family: 'Segoe UI', sans-serif;
    color: var(--text);
    min-height: 100vh;
    box-sizing: border-box;
}

/* ══════════════════════════════════════
   SIDEBAR — three-zone cream layout
   ══════════════════════════════════════ */
.sidebar {
    width: 220px;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    flex-shrink: 0;
    margin: 0;
    overflow: hidden;
    align-self: stretch;
}

/* Zone 1 — Logo */
.sidebar-logo {
    background: var(--sidebar-top);
    padding: 24px 16px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.sidebar-logo h2 {
    color: var(--accent);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Zone 2 — Nav */
.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--sidebar-bg);
}

/* Zone 3 — Footer */
.sidebar-footer {
    background: var(--sidebar-bot);
    padding: 14px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Nav Links ── */
.nav-link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.18s, color 0.18s;
}
.nav-link:hover {
    background: var(--nav-hover-bg);
    color: var(--accent);
    text-decoration: none;
}
.nav-link.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 600;
}
.nav-link.logout { color: var(--danger) !important; }
.nav-link.logout:hover { background: rgba(155,58,46,0.1); }

/* ══════════════════════════════════════
   TABLES
   ══════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    color: var(--th-color);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
td {
    padding: 12px;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--td-border);
    vertical-align: middle;
}
tr:hover td { background: var(--table-hover); }

/* ══════════════════════════════════════
   FORM INPUTS
   ══════════════════════════════════════ */
input, textarea, select {
    width: 100%;
    padding: 10px 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--subtext); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(122,92,46,0.15);
}

/* ══════════════════════════════════════
   SHARED BUTTONS
   ══════════════════════════════════════ */
.btn-primary {
    padding: 10px 24px;
    background: var(--btn);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-primary:hover { background: var(--btn-hover); }
/* ══════════════════════════════════════
   THEME: 🪐 Saturn (default = :root above)
   Data attr kept for JS switcher parity
   ══════════════════════════════════════ */
[data-theme="saturn"] {
    --bg:              #f0ebe0;
    --surface:         #faf7f2;
    --surface2:        #e8e0d0;
    --sidebar-bg:      #ddd5c2;
    --sidebar-top:     #d0c8b4;
    --sidebar-bot:     #cfc7b3;
    --border:          #cec5b0;
    --text:            #2c2416;
    --subtext:         #7a6d58;
    --accent:          #7a5c2e;
    --btn:             #7a5c2e;
    --btn-hover:       #9b7540;
    --nav-text:        #5a4a35;
    --nav-hover-bg:    rgba(122,92,46,0.12);
    --nav-active-bg:   #8b6535;
    --nav-active-text: #faf7f2;
    --danger:          #9b3a2e;
    --success:         #3a6644;
    --input-bg:        #eee7d8;
    --input-border:    #c4b89e;
    --th-color:        #8a7a64;
    --td-border:       #e4ddd0;
    --table-hover:     #ede6d8;
}

/* ══════════════════════════════════════
   THEME: ☿ Mercury
   ══════════════════════════════════════ */
[data-theme="mercury"] {
    --bg:              #0d0d12;
    --surface:         #16161f;
    --surface2:        #1e1e2a;
    --sidebar-bg:      #111118;
    --sidebar-top:     #0f0f16;
    --sidebar-bot:     #0d0d13;
    --border:          #2a2a3a;
    --text:            #e8e4f0;
    --subtext:         #7a7a9a;
    --accent:          #a78bfa;
    --btn:             #7c3aed;
    --btn-hover:       #6d28d9;
    --nav-text:        #b0a8c8;
    --nav-hover-bg:    rgba(167,139,250,0.1);
    --nav-active-bg:   #7c3aed;
    --nav-active-text: #ffffff;
    --danger:          #f87171;
    --success:         #34d399;
    --input-bg:        #1a1a26;
    --input-border:    #2e2e42;
    --th-color:        #7a7a9a;
    --td-border:       #1e1e2e;
    --table-hover:     #1a1a28;
}

/* ══════════════════════════════════════
   THEME: 🔵 Neptune
   ══════════════════════════════════════ */
[data-theme="neptune"] {
    --bg:              #0f1217;
    --surface:         #171c24;
    --surface2:        #1e2530;
    --sidebar-bg:      #131820;
    --sidebar-top:     #111620;
    --sidebar-bot:     #10151e;
    --border:          #262e3a;
    --text:            #dce4f0;
    --subtext:         #6a7a90;
    --accent:          #60a5fa;
    --btn:             #2563eb;
    --btn-hover:       #1d4ed8;
    --nav-text:        #94a3b8;
    --nav-hover-bg:    rgba(96,165,250,0.1);
    --nav-active-bg:   #2563eb;
    --nav-active-text: #ffffff;
    --danger:          #f87171;
    --success:         #34d399;
    --input-bg:        #161c26;
    --input-border:    #2a3344;
    --th-color:        #6a7a90;
    --td-border:       #1c2430;
    --table-hover:     #1a2230;
}

/* ══════════════════════════════════════
   THEME: 🌍 Terra
   ══════════════════════════════════════ */
[data-theme="terra"] {
    --bg:              #0a0f0c;
    --surface:         #111a14;
    --surface2:        #172018;
    --sidebar-bg:      #0e1610;
    --sidebar-top:     #0c140e;
    --sidebar-bot:     #0b120d;
    --border:          #1e3020;
    --text:            #d4edda;
    --subtext:         #5a7a60;
    --accent:          #34d399;
    --btn:             #059669;
    --btn-hover:       #047857;
    --nav-text:        #86a88c;
    --nav-hover-bg:    rgba(52,211,153,0.1);
    --nav-active-bg:   #059669;
    --nav-active-text: #ffffff;
    --danger:          #f87171;
    --success:         #34d399;
    --input-bg:        #0e1810;
    --input-border:    #1a2e1c;
    --th-color:        #5a7a60;
    --td-border:       #162018;
    --table-hover:     #142018;
}

/* ══════════════════════════════════════
   THEME: 🌋 Venus
   ══════════════════════════════════════ */
[data-theme="venus"] {
    --bg:              #111111;
    --surface:         #1a1a1a;
    --surface2:        #222222;
    --sidebar-bg:      #161616;
    --sidebar-top:     #141414;
    --sidebar-bot:     #131313;
    --border:          #2a2a2a;
    --text:            #e8e8e8;
    --subtext:         #777777;
    --accent:          #fb923c;
    --btn:             #ea580c;
    --btn-hover:       #c2410c;
    --nav-text:        #aaaaaa;
    --nav-hover-bg:    rgba(251,146,60,0.1);
    --nav-active-bg:   #ea580c;
    --nav-active-text: #ffffff;
    --danger:          #f87171;
    --success:         #34d399;
    --input-bg:        #1e1e1e;
    --input-border:    #333333;
    --th-color:        #777777;
    --td-border:       #222222;
    --table-hover:     #202020;
}

/* ══════════════════════════════════════
   THEME: Meteon (light blue + stars)
   ══════════════════════════════════════ */
[data-theme="uranus"] {
    --bg:              #e8f4fd;
    --surface:         #f0f8ff;
    --surface2:        #daeef8;
    --sidebar-bg:      #cce4f5;
    --sidebar-top:     #c0ddf0;
    --sidebar-bot:     #bcd9ee;
    --border:          #a8cfe0;
    --text:            #0d2233;
    --subtext:         #4a7a9b;
    --accent:          #0ea5e9;
    --btn:             #0284c7;
    --btn-hover:       #0369a1;
    --nav-text:        #1e5a7a;
    --nav-hover-bg:    rgba(14,165,233,0.12);
    --nav-active-bg:   #0284c7;
    --nav-active-text: #ffffff;
    --danger:          #e53e3e;
    --success:         #276749;
    --input-bg:        #dff0fa;
    --input-border:    #9cc4da;
    --th-color:        #4a7a9b;
    --td-border:       #c0daea;
    --table-hover:     #daeef8;
}

/* ── Meteon star field ── */
[data-theme="uranus"] body::before,
[data-theme="uranus"] body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
}
[data-theme="uranus"] body > * { position: relative; z-index: 1; }

@keyframes twinkle-a {
    0%,100% { opacity: 0.15; transform: scale(1);   }
    50%      { opacity: 1;    transform: scale(1.4); }
}
@keyframes twinkle-b {
    0%,100% { opacity: 0.6;  transform: scale(1);   }
    50%      { opacity: 0.1; transform: scale(0.8); }
}
@keyframes twinkle-c {
    0%,100% { opacity: 0.3;  transform: scale(1.2); }
    40%      { opacity: 0.9; transform: scale(0.9); }
    80%      { opacity: 0.2; transform: scale(1.3); }
}

[data-theme="uranus"] .star {
    position: fixed;
    border-radius: 50%;
    background: #0ea5e9;
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════
   THEME: Meteon Dark (navy + stars)
   ══════════════════════════════════════ */
[data-theme="meteon"] {
    --bg:              #050a18;
    --surface:         #0a1428;
    --surface2:        #0f1e38;
    --sidebar-bg:      #070d20;
    --sidebar-top:     #060b1c;
    --sidebar-bot:     #050a18;
    --border:          #1a2d50;
    --text:            #c8d8f0;
    --subtext:         #5a7aaa;
    --accent:          #4d9ef7;
    --btn:             #1a56b0;
    --btn-hover:       #1644a0;
    --nav-text:        #7a9acc;
    --nav-hover-bg:    rgba(77,158,247,0.1);
    --nav-active-bg:   #1a56b0;
    --nav-active-text: #ffffff;
    --danger:          #f87171;
    --success:         #34d399;
    --input-bg:        #080f22;
    --input-border:    #1a2d50;
    --th-color:        #5a7aaa;
    --td-border:       #0f1e38;
    --table-hover:     #0d1a30;
}

[data-theme="meteon"] .star {
    position: fixed;
    border-radius: 50%;
    background: #4d9ef7;
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════
   THEME: Marshmallow (pastel pink)
   ══════════════════════════════════════ */
[data-theme="marshmallow"] {
    --bg:              #fdf0f5;
    --surface:         #fff5f8;
    --surface2:        #f9e4ee;
    --sidebar-bg:      #f5d6e8;
    --sidebar-top:     #f0cce3;
    --sidebar-bot:     #eec8e0;
    --border:          #e8b8d4;
    --text:            #3a1a28;
    --subtext:         #9a6080;
    --accent:          #d4639a;
    --btn:             #c44d8a;
    --btn-hover:       #b03a78;
    --nav-text:        #7a3a5a;
    --nav-hover-bg:    rgba(212,99,154,0.12);
    --nav-active-bg:   #c44d8a;
    --nav-active-text: #ffffff;
    --danger:          #e53e6a;
    --success:         #3a8a5a;
    --input-bg:        #fce8f2;
    --input-border:    #e0a8c8;
    --th-color:        #9a6080;
    --td-border:       #f0d0e4;
    --table-hover:     #fce8f2;
}

/* ══════════════════════════════════════
   THEME: Lollipop (multi-pastel)
   ══════════════════════════════════════ */
[data-theme="lollipop"] {
    --bg:              #fdf6ff;
    --surface:         #fff8fe;
    --surface2:        #f5eeff;
    --sidebar-bg:      linear-gradient(180deg, #ffd6e8 0%, #d6f0ff 35%, #d6ffd6 65%, #fff0d6 100%);
    --sidebar-top:     #ffd6e8;
    --sidebar-bot:     #fff0d6;
    --border:          #e0c8f0;
    --text:            #2a1a3a;
    --subtext:         #8860a8;
    --accent:          #c060d0;
    --btn:             #b050c0;
    --btn-hover:       #9a40aa;
    --nav-text:        #6a3a8a;
    --nav-hover-bg:    rgba(192,96,208,0.12);
    --nav-active-bg:   linear-gradient(90deg, #ffb3d1, #b3d1ff, #b3ffda, #fffab3);
    --nav-active-text: #2a1a3a;
    --danger:          #e0406a;
    --success:         #3aaa6a;
    --input-bg:        #fef0ff;
    --input-border:    #ddb8f0;
    --th-color:        #8860a8;
    --td-border:       #eed8f8;
    --table-hover:     #f8eeff;
}

/* Lollipop animated gradient background */
@keyframes lollipop-bg {
    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }
}

[data-theme="lollipop"] body {
    background: linear-gradient(135deg,
        #ffe4f0, #f0e4ff, #e4f0ff,
        #e4fff0, #fffff0, #ffe4f0);
    background-size: 400% 400%;
    animation: lollipop-bg 12s ease infinite;
}

[data-theme="lollipop"] .sidebar {
    background: linear-gradient(180deg,
        #ffc8e0 0%,
        #e0c8ff 25%,
        #c8e0ff 50%,
        #c8ffd6 75%,
        #fff8c8 100%) !important;
    border-right: 1px solid #e0c8f0;
}

[data-theme="lollipop"] .card {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #ffb3d1, #c8b3ff, #b3d6ff, #b3ffda, #fffab3) 1;
}

[data-theme="lollipop"] .btn-submit {
    background: linear-gradient(90deg, #ffb3d1, #c8b3ff, #b3d6ff) !important;
    color: #2a1a3a !important;
}

[data-theme="lollipop"] .btn-submit:hover {
    background: linear-gradient(90deg, #ff99c2, #b599ff, #99c9ff) !important;
}

[data-theme="lollipop"] .nav-link.active,
[data-theme="lollipop"] .nav-link:hover {
    background: linear-gradient(90deg, rgba(255,179,209,0.4), rgba(200,179,255,0.4)) !important;
}

[data-theme="lollipop"] .main h1 {
    background: linear-gradient(90deg, #e060c0, #6090e0, #40c080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ══════════════════════════════════════
   THEME: Bling (multi-pastel + stars)
   ══════════════════════════════════════ */
[data-theme="bling"] {
    --bg:              #1a0a2e;
    --surface:         #220d38;
    --surface2:        #2a1040;
    --sidebar-bg:      #180828;
    --sidebar-top:     #150625;
    --sidebar-bot:     #120520;
    --border:          #4a2060;
    --text:            #f8e8ff;
    --subtext:         #c090e0;
    --accent:          #f0a0ff;
    --btn:             #c060e0;
    --btn-hover:       #a040c0;
    --nav-text:        #d0a0f0;
    --nav-hover-bg:    rgba(240,160,255,0.12);
    --nav-active-bg:   #8030b0;
    --nav-active-text: #fff8ff;
    --danger:          #ff6090;
    --success:         #60ffb0;
    --input-bg:        #200a38;
    --input-border:    #5a2878;
    --th-color:        #c090e0;
    --td-border:       #2a1040;
    --table-hover:     #251040;
}

@keyframes bling-bg {
    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }
}

[data-theme="bling"] body {
    background: linear-gradient(135deg,
        #1a0a2e, #0a1a2e, #0a2e1a,
        #2e1a0a, #2e0a1a, #1a0a2e);
    background-size: 400% 400%;
    animation: bling-bg 15s ease infinite;
}

[data-theme="bling"] .sidebar {
    background: linear-gradient(180deg,
        #2e0a1e 0%,
        #1a0a2e 30%,
        #0a1a2e 60%,
        #0a2e1a 100%) !important;
    border-right: 1px solid #4a2060;
}

[data-theme="bling"] .main h1 {
    background: linear-gradient(90deg, #ff80d0, #a080ff, #80d0ff, #80ffb0, #ffd080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="bling"] .card {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #ff80d0, #a080ff, #80d0ff, #80ffb0, #ffd080) 1;
}

[data-theme="bling"] .btn-submit {
    background: linear-gradient(90deg, #ff80d0, #a080ff, #80d0ff) !important;
    color: #1a0a2e !important;
}

[data-theme="bling"] .btn-submit:hover {
    background: linear-gradient(90deg, #ff60c0, #8060f0, #60c0f0) !important;
}

/* Star colors — multi-pastel for Bling */
[data-theme="bling"] .star {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════ THEME: Tide ══ */
[data-theme="tide"] {
    --bg:#020f1a;--surface:#041828;--surface2:#062030;--sidebar-bg:#021018;
    --sidebar-top:#021015;--sidebar-bot:#010c12;--border:#0a3050;--text:#c0e8f8;
    --subtext:#4a90b0;--accent:#00c8e0;--btn:#0080a0;--btn-hover:#006888;
    --nav-text:#60b0d0;--nav-hover-bg:rgba(0,200,224,0.1);--nav-active-bg:#006888;
    --nav-active-text:#ffffff;--danger:#ff6080;--success:#00e0a0;
    --input-bg:#031420;--input-border:#0a3050;--th-color:#4a90b0;
    --td-border:#062030;--table-hover:#051a28;
}
@keyframes tide-wave {
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}
[data-theme="tide"] body {
    background:linear-gradient(135deg,#020f1a,#041828,#062a40,#041828,#020f1a);
    background-size:400% 400%;
    animation:tide-wave 8s ease infinite;
}
[data-theme="tide"] .sidebar {
    background:linear-gradient(180deg,#021018,#031828,#041a30) !important;
    border-right:1px solid #0a3050;
}
[data-theme="tide"] .main h1 {
    background:linear-gradient(90deg,#00c8e0,#0080ff,#00e0c0);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Ember ══ */
[data-theme="ember"] {
    --bg:#0f0500;--surface:#1a0800;--surface2:#200a00;--sidebar-bg:#0d0400;
    --sidebar-top:#0a0300;--sidebar-bot:#080200;--border:#501800;--text:#ffe8d0;
    --subtext:#c06030;--accent:#ff8030;--btn:#d05010;--btn-hover:#b03a00;
    --nav-text:#e09060;--nav-hover-bg:rgba(255,128,48,0.1);--nav-active-bg:#b03a00;
    --nav-active-text:#fff0e0;--danger:#ff4040;--success:#80ff80;
    --input-bg:#150600;--input-border:#501800;--th-color:#c06030;
    --td-border:#200a00;--table-hover:#180800;
}
@keyframes ember-fire {
    0%   { background-position:50% 100%; }
    50%  { background-position:50% 0%;   }
    100% { background-position:50% 100%; }
}
[data-theme="ember"] body {
    background:linear-gradient(0deg,#3a0800,#200500,#0f0300,#0a0200);
    background-size:200% 400%;
    animation:ember-fire 6s ease infinite;
}
[data-theme="ember"] .sidebar {
    background:linear-gradient(180deg,#200500,#150300,#0f0200) !important;
    border-right:1px solid #501800;
}
[data-theme="ember"] .main h1 {
    background:linear-gradient(90deg,#ff4000,#ff8030,#ffb060);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Aurora ══ */
[data-theme="aurora"] {
    --bg:#020810;--surface:#030c18;--surface2:#041020;--sidebar-bg:#020a14;
    --sidebar-top:#020810;--sidebar-bot:#01060c;--border:#0a2840;--text:#d0f8f0;
    --subtext:#40a890;--accent:#00f0b0;--btn:#009870;--btn-hover:#007858;
    --nav-text:#60d0b0;--nav-hover-bg:rgba(0,240,176,0.1);--nav-active-bg:#007858;
    --nav-active-text:#ffffff;--danger:#ff5080;--success:#00f0b0;
    --input-bg:#030c18;--input-border:#0a2840;--th-color:#40a890;
    --td-border:#041020;--table-hover:#031018;
}
@keyframes aurora-shift {
    0%   { background-position:0% 50%;   }
    33%  { background-position:50% 100%; }
    66%  { background-position:100% 50%; }
    100% { background-position:0% 50%;   }
}
[data-theme="aurora"] body {
    background:linear-gradient(135deg,#020810,#002820,#001828,#002010,#020810);
    background-size:500% 500%;
    animation:aurora-shift 10s ease infinite;
}
[data-theme="aurora"] .sidebar {
    background:linear-gradient(180deg,#020c18,#031a20,#021810) !important;
    border-right:1px solid #0a2840;
}
[data-theme="aurora"] .main h1 {
    background:linear-gradient(90deg,#00f0b0,#00c8f0,#a000f0);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Solar ══ */
[data-theme="solar"] {
    --bg:#0f0800;--surface:#1a1000;--surface2:#221400;--sidebar-bg:#0d0700;
    --sidebar-top:#0a0500;--sidebar-bot:#080400;--border:#503000;--text:#fff0c0;
    --subtext:#c09040;--accent:#ffcc00;--btn:#d09000;--btn-hover:#b07000;
    --nav-text:#e0b060;--nav-hover-bg:rgba(255,204,0,0.1);--nav-active-bg:#b07000;
    --nav-active-text:#fff8e0;--danger:#ff5040;--success:#80e080;
    --input-bg:#150c00;--input-border:#503000;--th-color:#c09040;
    --td-border:#221400;--table-hover:#1a1000;
}
@keyframes solar-pulse {
    0%,100% { box-shadow:0 0 80px 20px rgba(255,180,0,0.08); }
    50%      { box-shadow:0 0 160px 60px rgba(255,180,0,0.18); }
}
@keyframes solar-bg {
    0%   { background-position:50% 50%; }
    50%  { background-position:60% 40%; }
    100% { background-position:50% 50%; }
}
[data-theme="solar"] body {
    background:radial-gradient(ellipse at center,#2a1800 0%,#1a0e00 40%,#0f0800 100%);
    background-size:200% 200%;
    animation:solar-bg 8s ease infinite;
}
[data-theme="solar"] .sidebar {
    background:linear-gradient(180deg,#1a0e00,#120900,#0d0700) !important;
    border-right:1px solid #503000;
}
[data-theme="solar"] .main h1 {
    background:linear-gradient(90deg,#ff8800,#ffcc00,#fff0a0);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Storm ══ */
[data-theme="storm"] {
    --bg:#080c10;--surface:#0c1218;--surface2:#101820;--sidebar-bg:#060a0e;
    --sidebar-top:#050810;--sidebar-bot:#04060c;--border:#1a2a40;--text:#c8d8e8;
    --subtext:#5080a0;--accent:#60a8e0;--btn:#3070a8;--btn-hover:#205888;
    --nav-text:#7090b0;--nav-hover-bg:rgba(96,168,224,0.1);--nav-active-bg:#205888;
    --nav-active-text:#ffffff;--danger:#ff5060;--success:#40d090;
    --input-bg:#0a1018;--input-border:#1a2a40;--th-color:#5080a0;
    --td-border:#101820;--table-hover:#0e1620;
}
@keyframes storm-rain {
    0%   { background-position:0% 0%;    }
    100% { background-position:20% 100%; }
}
[data-theme="storm"] body {
    background:linear-gradient(170deg,
        transparent 0%,transparent 49%,
        rgba(96,168,224,0.03) 50%,transparent 51%) ,
        linear-gradient(135deg,#080c10,#0c1420,#080c10);
    background-size:4px 20px, 200% 200%;
    animation:storm-rain 0.8s linear infinite;
}
[data-theme="storm"] .sidebar {
    background:linear-gradient(180deg,#0c1420,#080e18,#060a10) !important;
    border-right:1px solid #1a2a40;
}
[data-theme="storm"] .main h1 {
    background:linear-gradient(90deg,#60a8e0,#a0d0ff,#60e0ff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Cotton Candy ══ */
[data-theme="cotton-candy"] {
    --bg:#fef0f8;--surface:#fff5fb;--surface2:#fde8f5;--sidebar-bg:#fce0f0;
    --sidebar-top:#fad8ec;--sidebar-bot:#f8d0e8;--border:#f0b8e0;--text:#2a1030;
    --subtext:#9060a0;--accent:#e060c0;--btn:#c040a0;--btn-hover:#a02888;
    --nav-text:#7040a0;--nav-hover-bg:rgba(224,96,192,0.1);--nav-active-bg:#c040a0;
    --nav-active-text:#ffffff;--danger:#e03060;--success:#30a060;
    --input-bg:#fde8f5;--input-border:#e8b0d8;--th-color:#9060a0;
    --td-border:#f8d8f0;--table-hover:#fce8f8;
}
@keyframes cotton-drift {
    0%   { background-position:0% 50%;   }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%;   }
}
[data-theme="cotton-candy"] body {
    background:linear-gradient(135deg,#ffe8f5,#f8e8ff,#e8f0ff,#ffe8f5);
    background-size:300% 300%;
    animation:cotton-drift 10s ease infinite;
}
[data-theme="cotton-candy"] .sidebar {
    background:linear-gradient(180deg,#fcd8ee,#f0d0f8,#e8d8ff) !important;
    border-right:1px solid #f0b8e0;
}
[data-theme="cotton-candy"] .main h1 {
    background:linear-gradient(90deg,#e060c0,#c060e0,#8080ff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Matrix ══ */
[data-theme="matrix"] {
    --bg:#000800;--surface:#001000;--surface2:#001800;--sidebar-bg:#000600;
    --sidebar-top:#000500;--sidebar-bot:#000400;--border:#004000;--text:#00ff40;
    --subtext:#008020;--accent:#00ff40;--btn:#006020;--btn-hover:#004818;
    --nav-text:#00c030;--nav-hover-bg:rgba(0,255,64,0.08);--nav-active-bg:#004818;
    --nav-active-text:#00ff40;--danger:#ff4040;--success:#00ff40;
    --input-bg:#000c00;--input-border:#004000;--th-color:#008020;
    --td-border:#001800;--table-hover:#001200;
}
@keyframes matrix-fall {
    0%   { background-position:0% 0%;   }
    100% { background-position:0% 100%; }
}
[data-theme="matrix"] body {
    background-color:#000800;
    background-image:repeating-linear-gradient(
        0deg,transparent,transparent 2px,
        rgba(0,255,64,0.03) 2px,rgba(0,255,64,0.03) 4px);
    background-size:100% 4px;
    animation:matrix-fall 2s linear infinite;
}
[data-theme="matrix"] .sidebar {
    background:linear-gradient(180deg,#000c00,#000800,#000600) !important;
    border-right:1px solid #004000;
}
[data-theme="matrix"] .main h1 {
    background:linear-gradient(90deg,#00ff40,#00c030,#00ff80);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Prism ══ */
[data-theme="prism"] {
    --bg:#ffffff;--surface:#fafafa;--surface2:#f5f5ff;--sidebar-bg:#f8f0ff;
    --sidebar-top:#f5e8ff;--sidebar-bot:#f0e0ff;--border:#e0d0f0;--text:#1a0a2a;
    --subtext:#7050a0;--accent:#8030e0;--btn:#6020c0;--btn-hover:#4810a0;
    --nav-text:#5030a0;--nav-hover-bg:rgba(128,48,224,0.08);--nav-active-bg:#6020c0;
    --nav-active-text:#ffffff;--danger:#e03060;--success:#20a060;
    --input-bg:#f8f0ff;--input-border:#d0b8f0;--th-color:#7050a0;
    --td-border:#ede8f8;--table-hover:#f5f0ff;
}
@keyframes prism-cycle {
    0%   { background-position:0% 50%;   }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%;   }
}
[data-theme="prism"] body {
    background:linear-gradient(135deg,
        #fff0f0,#fff8f0,#fffff0,#f0fff0,#f0ffff,#f0f0ff,#fff0ff,#fff0f0);
    background-size:400% 400%;
    animation:prism-cycle 12s ease infinite;
}
[data-theme="prism"] .sidebar {
    background:linear-gradient(180deg,#f8e8ff,#e8f0ff,#e8fff8) !important;
    border-right:1px solid #e0d0f0;
}
[data-theme="prism"] .main h1 {
    background:linear-gradient(90deg,#ff0080,#ff8000,#ffff00,#00ff80,#0080ff,#8000ff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Bubble ══ */
[data-theme="bubble"] {
    --bg:#f0f8ff;--surface:#f8fcff;--surface2:#e8f4ff;--sidebar-bg:#e0f0ff;
    --sidebar-top:#d8ecff;--sidebar-bot:#d0e8ff;--border:#b8d8f0;--text:#0a2040;
    --subtext:#4880b0;--accent:#2090e0;--btn:#1070c0;--btn-hover:#0858a0;
    --nav-text:#3070a0;--nav-hover-bg:rgba(32,144,224,0.1);--nav-active-bg:#1070c0;
    --nav-active-text:#ffffff;--danger:#e04060;--success:#20a070;
    --input-bg:#e8f4ff;--input-border:#a8ccec;--th-color:#4880b0;
    --td-border:#d8ecff;--table-hover:#e8f4ff;
}
@keyframes bubble-float {
    0%,100% { transform:translateY(0px) scale(1);   opacity:0.6; }
    50%      { transform:translateY(-20px) scale(1.1); opacity:0.9; }
}
@keyframes bubble-bg {
    0%   { background-position:0% 50%;   }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%;   }
}
[data-theme="bubble"] body {
    background:linear-gradient(135deg,#e8f4ff,#f0f8ff,#e8f0ff,#f0f8ff);
    background-size:300% 300%;
    animation:bubble-bg 10s ease infinite;
}
[data-theme="bubble"] .sidebar {
    background:linear-gradient(180deg,#d8ecff,#e0f0ff,#d8f0ff) !important;
    border-right:1px solid #b8d8f0;
}
[data-theme="bubble"] .main h1 {
    background:linear-gradient(90deg,#2090e0,#00c0f0,#60d0ff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════ THEME: Disco ══ */
[data-theme="disco"] {
    --bg:#080808;--surface:#101010;--surface2:#181818;--sidebar-bg:#060606;
    --sidebar-top:#050505;--sidebar-bot:#040404;--border:#303030;--text:#f8f8f8;
    --subtext:#a0a0a0;--accent:#ff00ff;--btn:#cc00cc;--btn-hover:#aa00aa;
    --nav-text:#d0d0d0;--nav-hover-bg:rgba(255,0,255,0.1);--nav-active-bg:#880088;
    --nav-active-text:#ffffff;--danger:#ff3030;--success:#30ff80;
    --input-bg:#0c0c0c;--input-border:#303030;--th-color:#a0a0a0;
    --td-border:#181818;--table-hover:#141414;
}
@keyframes disco-flash {
    0%   { background:radial-gradient(ellipse at 30% 30%,#ff000022,transparent 60%),#080808; }
    10%  { background:radial-gradient(ellipse at 70% 20%,#ff800022,transparent 60%),#080808; }
    20%  { background:radial-gradient(ellipse at 50% 80%,#ffff0022,transparent 60%),#080808; }
    30%  { background:radial-gradient(ellipse at 20% 60%,#00ff0022,transparent 60%),#080808; }
    40%  { background:radial-gradient(ellipse at 80% 40%,#00ffff22,transparent 60%),#080808; }
    50%  { background:radial-gradient(ellipse at 40% 20%,#0000ff22,transparent 60%),#080808; }
    60%  { background:radial-gradient(ellipse at 60% 70%,#8000ff22,transparent 60%),#080808; }
    70%  { background:radial-gradient(ellipse at 30% 50%,#ff00ff22,transparent 60%),#080808; }
    80%  { background:radial-gradient(ellipse at 70% 60%,#ff008022,transparent 60%),#080808; }
    90%  { background:radial-gradient(ellipse at 50% 30%,#ff400022,transparent 60%),#080808; }
    100% { background:radial-gradient(ellipse at 30% 30%,#ff000022,transparent 60%),#080808; }
}
[data-theme="disco"] body {
    animation:disco-flash 2s linear infinite;
}
[data-theme="disco"] .sidebar {
    background:linear-gradient(180deg,#0c0c0c,#080808,#060606) !important;
    border-right:1px solid #303030;
}
[data-theme="disco"] .main h1 {
    background:linear-gradient(90deg,#ff0080,#ff8000,#ffff00,#00ff80,#00ffff,#ff00ff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    background-size:200% 100%;
    animation:prism-cycle 3s linear infinite;
}

/* ══════════════════════════════════════ THEME: Sirius (white + light gray) ══ */
[data-theme="sirius"] {
    --bg:              #ffffff;
    --surface:         #eef7ff;
    --surface2:        #e6f2ff;
    --sidebar-bg:      #edf6ff;
    --sidebar-top:     #f4faff;
    --sidebar-bot:     #e3f0ff;
    --border:          #cfe0f2;
    --text:            #111111;
    --subtext:         #555555;
    --accent:          #111111;
    --btn:             #111111;
    --btn-hover:       #222222;
    --nav-text:        #222222;
    --nav-hover-bg:    #e1f0ff;
    --nav-active-bg:   #111111;
    --nav-active-text: #ffffff;
    --danger:          #b42318;
    --success:         #157347;
    --input-bg:        #ffffff;
    --input-border:    #d6d6d6;
    --th-color:        #666666;
    --td-border:       #d9e8f7;
    --table-hover:     #eef6ff;
}
[data-theme="sirius"] body,
html[data-theme="sirius"] body,
body[data-theme="sirius"] {
    background: #ffffff !important;
    color: #111111 !important;
}
[data-theme="sirius"] .sidebar {
    background: #edf6ff !important;
    border-right: 1px solid #cfe0f2 !important;
    box-shadow: none !important;
}
[data-theme="sirius"] .main {
    background: #ffffff !important;
}
[data-theme="sirius"] .card,
[data-theme="sirius"] .panel,
[data-theme="sirius"] .form-box,
[data-theme="sirius"] .profile-box,
[data-theme="sirius"] .notes-panel,
[data-theme="sirius"] .modal,
[data-theme="sirius"] .queue-panel,
[data-theme="sirius"] .detail-panel,
[data-theme="sirius"] .meta-panel {
    background: #eef7ff !important;
    box-shadow: none !important;
}
[data-theme="sirius"] input,
[data-theme="sirius"] textarea,
[data-theme="sirius"] select {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #cfe0f2 !important;
}
[data-theme="sirius"] table,
[data-theme="sirius"] th,
[data-theme="sirius"] td {
    color: #111111;
}