/* =============================================
   ClothesPlus - Global Theme System
   24 Themes: 12 Dark + 12 Light
   Free Fonts (Google Fonts - Commercial Use OK)
   ============================================= */

/* Theme Toggle Button (Floating) */
.theme-toggle-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.theme-toggle-floating .theme-toggle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.theme-toggle-floating .theme-toggle-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.theme-toggle-floating .theme-dropdown {
    position: absolute;
    bottom: 55px;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    min-width: 280px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.theme-toggle-floating:hover .theme-dropdown,
.theme-toggle-floating .theme-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================
   DARK THEMES (12)
   ========================================== */

/* Dark Purple (Default) - Base theme in style.css */

/* Dark Blue - Ocean Deep */
body.theme-dark-blue {
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --primary-glow: rgba(59, 130, 246, 0.3);
    --bg0: #070a14;
    --bg1: #0b1022;
    --bg-dark: #070a14;
    --bg-card: rgba(16, 24, 40, 0.98);
    --bg-card-hover: rgba(26, 38, 58, 0.98);
    --bg-elevated: rgba(30, 42, 62, 0.98);
    --grid: rgba(59, 130, 246, 0.10);
    --grid2: rgba(37, 99, 235, 0.08);
}

/* Dark Green - Forest Night */
body.theme-dark-green {
    --primary: #22c55e;
    --primary-light: #4ade80;
    --primary-dark: #16a34a;
    --primary-glow: rgba(34, 197, 94, 0.3);
    --bg0: #071209;
    --bg1: #0b1c0f;
    --bg-dark: #071209;
    --bg-card: rgba(16, 32, 20, 0.98);
    --bg-card-hover: rgba(26, 48, 32, 0.98);
    --bg-elevated: rgba(30, 52, 36, 0.98);
    --grid: rgba(34, 197, 94, 0.10);
    --grid2: rgba(22, 163, 74, 0.08);
}

/* Dark Red - Crimson Dark */
body.theme-dark-red {
    --primary: #ef4444;
    --primary-light: #f87171;
    --primary-dark: #dc2626;
    --primary-glow: rgba(239, 68, 68, 0.3);
    --bg0: #140709;
    --bg1: #1c0b0f;
    --bg-dark: #140709;
    --bg-card: rgba(32, 16, 20, 0.98);
    --bg-card-hover: rgba(48, 26, 32, 0.98);
    --bg-elevated: rgba(52, 30, 36, 0.98);
    --grid: rgba(239, 68, 68, 0.10);
    --grid2: rgba(220, 38, 38, 0.08);
}

/* Dark Orange - Amber Dusk */
body.theme-dark-orange {
    --primary: #f97316;
    --primary-light: #fb923c;
    --primary-dark: #ea580c;
    --primary-glow: rgba(249, 115, 22, 0.3);
    --bg0: #140c07;
    --bg1: #1c120b;
    --bg-dark: #140c07;
    --bg-card: rgba(32, 24, 16, 0.98);
    --bg-card-hover: rgba(48, 36, 26, 0.98);
    --bg-elevated: rgba(52, 40, 30, 0.98);
    --grid: rgba(249, 115, 22, 0.10);
    --grid2: rgba(234, 88, 12, 0.08);
}

/* Dark Mono - Midnight */
body.theme-dark-mono {
    --primary: #a1a1aa;
    --primary-light: #d4d4d8;
    --primary-dark: #71717a;
    --primary-glow: rgba(161, 161, 170, 0.3);
    --bg0: #09090b;
    --bg1: #18181b;
    --bg-dark: #09090b;
    --bg-card: rgba(24, 24, 27, 0.98);
    --bg-card-hover: rgba(39, 39, 42, 0.98);
    --bg-elevated: rgba(45, 45, 50, 0.98);
    --grid: rgba(161, 161, 170, 0.08);
    --grid2: rgba(113, 113, 122, 0.06);
}

/* Dark Cyan - Cyber Teal */
body.theme-dark-cyan {
    --primary: #06b6d4;
    --primary-light: #22d3ee;
    --primary-dark: #0891b2;
    --primary-glow: rgba(6, 182, 212, 0.3);
    --bg0: #071214;
    --bg1: #0b1c1f;
    --bg-dark: #071214;
    --bg-card: rgba(16, 32, 36, 0.98);
    --bg-card-hover: rgba(26, 48, 54, 0.98);
    --bg-elevated: rgba(30, 52, 58, 0.98);
    --grid: rgba(6, 182, 212, 0.10);
    --grid2: rgba(8, 145, 178, 0.08);
}

/* Dark Pink - Neon Pink */
body.theme-dark-pink {
    --primary: #ec4899;
    --primary-light: #f472b6;
    --primary-dark: #db2777;
    --primary-glow: rgba(236, 72, 153, 0.3);
    --bg0: #14070d;
    --bg1: #1c0b14;
    --bg-dark: #14070d;
    --bg-card: rgba(32, 16, 26, 0.98);
    --bg-card-hover: rgba(48, 26, 40, 0.98);
    --bg-elevated: rgba(52, 30, 44, 0.98);
    --grid: rgba(236, 72, 153, 0.10);
    --grid2: rgba(219, 39, 119, 0.08);
}

/* Dark Gold - Royal Gold */
body.theme-dark-gold {
    --primary: #eab308;
    --primary-light: #facc15;
    --primary-dark: #ca8a04;
    --primary-glow: rgba(234, 179, 8, 0.3);
    --bg0: #14120a;
    --bg1: #1c180e;
    --bg-dark: #14120a;
    --bg-card: rgba(32, 28, 18, 0.98);
    --bg-card-hover: rgba(48, 42, 28, 0.98);
    --bg-elevated: rgba(52, 46, 32, 0.98);
    --grid: rgba(234, 179, 8, 0.10);
    --grid2: rgba(202, 138, 4, 0.08);
}

/* Dark Indigo - Deep Indigo */
body.theme-dark-indigo {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --primary-glow: rgba(99, 102, 241, 0.3);
    --bg0: #0a0a14;
    --bg1: #0e0e1c;
    --bg-dark: #0a0a14;
    --bg-card: rgba(20, 20, 36, 0.98);
    --bg-card-hover: rgba(32, 32, 54, 0.98);
    --bg-elevated: rgba(38, 38, 60, 0.98);
    --grid: rgba(99, 102, 241, 0.10);
    --grid2: rgba(79, 70, 229, 0.08);
}

/* Dark Teal - Dark Teal */
body.theme-dark-teal {
    --primary: #14b8a6;
    --primary-light: #2dd4bf;
    --primary-dark: #0d9488;
    --primary-glow: rgba(20, 184, 166, 0.3);
    --bg0: #071412;
    --bg1: #0b1c19;
    --bg-dark: #071412;
    --bg-card: rgba(16, 32, 28, 0.98);
    --bg-card-hover: rgba(26, 48, 42, 0.98);
    --bg-elevated: rgba(30, 52, 46, 0.98);
    --grid: rgba(20, 184, 166, 0.10);
    --grid2: rgba(13, 148, 136, 0.08);
}

/* Dark Slate - Slate Gray */
body.theme-dark-slate {
    --primary: #64748b;
    --primary-light: #94a3b8;
    --primary-dark: #475569;
    --primary-glow: rgba(100, 116, 139, 0.3);
    --bg0: #0a0c0f;
    --bg1: #0f1216;
    --bg-dark: #0a0c0f;
    --bg-card: rgba(18, 24, 30, 0.98);
    --bg-card-hover: rgba(28, 36, 44, 0.98);
    --bg-elevated: rgba(34, 42, 52, 0.98);
    --grid: rgba(100, 116, 139, 0.10);
    --grid2: rgba(71, 85, 105, 0.08);
}

/* ==========================================
   LIGHT THEMES (12)
   ========================================== */

/* Light Purple - Lavender Light */
body.theme-light-purple {
    --primary: #8b5cf6;
    --primary-light: #a78bfa;
    --primary-dark: #7c3aed;
    --primary-glow: rgba(139, 92, 246, 0.2);
    --bg0: #faf5ff;
    --bg1: #f3e8ff;
    --bg-dark: #ede9fe;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(243, 232, 255, 0.95);
    --bg-elevated: rgba(237, 233, 254, 0.95);
    --bg-input: rgba(250, 245, 255, 0.95);
    --text-primary: #1e1b4b;
    --text-secondary: rgba(30, 27, 75, 0.75);
    --text-muted: rgba(30, 27, 75, 0.55);
    --border: rgba(139, 92, 246, 0.2);
    --border-light: rgba(139, 92, 246, 0.3);
    --grid: rgba(139, 92, 246, 0.08);
    --grid2: rgba(124, 58, 237, 0.05);
    --code-bg: rgba(243, 232, 255, 0.95);
}

/* Light Blue - Sky Blue */
body.theme-light-blue {
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --primary-glow: rgba(59, 130, 246, 0.2);
    --bg0: #f0f9ff;
    --bg1: #e0f2fe;
    --bg-dark: #dbeafe;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(224, 242, 254, 0.95);
    --bg-elevated: rgba(219, 234, 254, 0.95);
    --bg-input: rgba(240, 249, 255, 0.95);
    --text-primary: #1e3a5f;
    --text-secondary: rgba(30, 58, 95, 0.75);
    --text-muted: rgba(30, 58, 95, 0.55);
    --border: rgba(59, 130, 246, 0.2);
    --border-light: rgba(59, 130, 246, 0.3);
    --grid: rgba(59, 130, 246, 0.08);
    --grid2: rgba(37, 99, 235, 0.05);
    --code-bg: rgba(224, 242, 254, 0.95);
}

/* Light Green - Mint Fresh */
body.theme-light-green {
    --primary: #22c55e;
    --primary-light: #4ade80;
    --primary-dark: #16a34a;
    --primary-glow: rgba(34, 197, 94, 0.2);
    --bg0: #f0fdf4;
    --bg1: #dcfce7;
    --bg-dark: #d1fae5;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(220, 252, 231, 0.95);
    --bg-elevated: rgba(209, 250, 229, 0.95);
    --bg-input: rgba(240, 253, 244, 0.95);
    --text-primary: #14532d;
    --text-secondary: rgba(20, 83, 45, 0.75);
    --text-muted: rgba(20, 83, 45, 0.55);
    --border: rgba(34, 197, 94, 0.2);
    --border-light: rgba(34, 197, 94, 0.3);
    --grid: rgba(34, 197, 94, 0.08);
    --grid2: rgba(22, 163, 74, 0.05);
    --code-bg: rgba(220, 252, 231, 0.95);
}

/* Light Rose - Rose Petal */
body.theme-light-rose {
    --primary: #f43f5e;
    --primary-light: #fb7185;
    --primary-dark: #e11d48;
    --primary-glow: rgba(244, 63, 94, 0.2);
    --bg0: #fff1f2;
    --bg1: #ffe4e6;
    --bg-dark: #fecdd3;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(255, 228, 230, 0.95);
    --bg-elevated: rgba(254, 205, 211, 0.95);
    --bg-input: rgba(255, 241, 242, 0.95);
    --text-primary: #4c0519;
    --text-secondary: rgba(76, 5, 25, 0.75);
    --text-muted: rgba(76, 5, 25, 0.55);
    --border: rgba(244, 63, 94, 0.2);
    --border-light: rgba(244, 63, 94, 0.3);
    --grid: rgba(244, 63, 94, 0.08);
    --grid2: rgba(225, 29, 72, 0.05);
    --code-bg: rgba(255, 228, 230, 0.95);
}

/* Light Peach - Peach Cream */
body.theme-light-peach {
    --primary: #f97316;
    --primary-light: #fb923c;
    --primary-dark: #ea580c;
    --primary-glow: rgba(249, 115, 22, 0.2);
    --bg0: #fff7ed;
    --bg1: #ffedd5;
    --bg-dark: #fed7aa;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(255, 237, 213, 0.95);
    --bg-elevated: rgba(254, 215, 170, 0.95);
    --bg-input: rgba(255, 247, 237, 0.95);
    --text-primary: #431407;
    --text-secondary: rgba(67, 20, 7, 0.75);
    --text-muted: rgba(67, 20, 7, 0.55);
    --border: rgba(249, 115, 22, 0.2);
    --border-light: rgba(249, 115, 22, 0.3);
    --grid: rgba(249, 115, 22, 0.08);
    --grid2: rgba(234, 88, 12, 0.05);
    --code-bg: rgba(255, 237, 213, 0.95);
}

/* Light Mono - Clean White */
body.theme-light-mono {
    --primary: #525252;
    --primary-light: #737373;
    --primary-dark: #404040;
    --primary-glow: rgba(82, 82, 82, 0.2);
    --bg0: #fafafa;
    --bg1: #f5f5f5;
    --bg-dark: #e5e5e5;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(245, 245, 245, 0.95);
    --bg-elevated: rgba(229, 229, 229, 0.95);
    --bg-input: rgba(250, 250, 250, 0.95);
    --text-primary: #171717;
    --text-secondary: rgba(23, 23, 23, 0.75);
    --text-muted: rgba(23, 23, 23, 0.55);
    --border: rgba(82, 82, 82, 0.2);
    --border-light: rgba(82, 82, 82, 0.3);
    --grid: rgba(82, 82, 82, 0.06);
    --grid2: rgba(64, 64, 64, 0.04);
    --code-bg: rgba(245, 245, 245, 0.95);
}

/* Light Cyan - Aqua Fresh */
body.theme-light-cyan {
    --primary: #06b6d4;
    --primary-light: #22d3ee;
    --primary-dark: #0891b2;
    --primary-glow: rgba(6, 182, 212, 0.2);
    --bg0: #ecfeff;
    --bg1: #cffafe;
    --bg-dark: #a5f3fc;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(207, 250, 254, 0.95);
    --bg-elevated: rgba(165, 243, 252, 0.95);
    --bg-input: rgba(236, 254, 255, 0.95);
    --text-primary: #083344;
    --text-secondary: rgba(8, 51, 68, 0.75);
    --text-muted: rgba(8, 51, 68, 0.55);
    --border: rgba(6, 182, 212, 0.2);
    --border-light: rgba(6, 182, 212, 0.3);
    --grid: rgba(6, 182, 212, 0.08);
    --grid2: rgba(8, 145, 178, 0.05);
    --code-bg: rgba(207, 250, 254, 0.95);
}

/* Light Pink - Cotton Candy */
body.theme-light-pink {
    --primary: #ec4899;
    --primary-light: #f472b6;
    --primary-dark: #db2777;
    --primary-glow: rgba(236, 72, 153, 0.2);
    --bg0: #fdf2f8;
    --bg1: #fce7f3;
    --bg-dark: #fbcfe8;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(252, 231, 243, 0.95);
    --bg-elevated: rgba(251, 207, 232, 0.95);
    --bg-input: rgba(253, 242, 248, 0.95);
    --text-primary: #500724;
    --text-secondary: rgba(80, 7, 36, 0.75);
    --text-muted: rgba(80, 7, 36, 0.55);
    --border: rgba(236, 72, 153, 0.2);
    --border-light: rgba(236, 72, 153, 0.3);
    --grid: rgba(236, 72, 153, 0.08);
    --grid2: rgba(219, 39, 119, 0.05);
    --code-bg: rgba(252, 231, 243, 0.95);
}

/* Light Gold - Warm Sand */
body.theme-light-gold {
    --primary: #eab308;
    --primary-light: #facc15;
    --primary-dark: #ca8a04;
    --primary-glow: rgba(234, 179, 8, 0.2);
    --bg0: #fefce8;
    --bg1: #fef9c3;
    --bg-dark: #fef08a;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(254, 249, 195, 0.95);
    --bg-elevated: rgba(254, 240, 138, 0.95);
    --bg-input: rgba(254, 252, 232, 0.95);
    --text-primary: #422006;
    --text-secondary: rgba(66, 32, 6, 0.75);
    --text-muted: rgba(66, 32, 6, 0.55);
    --border: rgba(234, 179, 8, 0.2);
    --border-light: rgba(234, 179, 8, 0.3);
    --grid: rgba(234, 179, 8, 0.08);
    --grid2: rgba(202, 138, 4, 0.05);
    --code-bg: rgba(254, 249, 195, 0.95);
}

/* Light Indigo - Soft Indigo */
body.theme-light-indigo {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --primary-glow: rgba(99, 102, 241, 0.2);
    --bg0: #eef2ff;
    --bg1: #e0e7ff;
    --bg-dark: #c7d2fe;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(224, 231, 255, 0.95);
    --bg-elevated: rgba(199, 210, 254, 0.95);
    --bg-input: rgba(238, 242, 255, 0.95);
    --text-primary: #1e1b4b;
    --text-secondary: rgba(30, 27, 75, 0.75);
    --text-muted: rgba(30, 27, 75, 0.55);
    --border: rgba(99, 102, 241, 0.2);
    --border-light: rgba(99, 102, 241, 0.3);
    --grid: rgba(99, 102, 241, 0.08);
    --grid2: rgba(79, 70, 229, 0.05);
    --code-bg: rgba(224, 231, 255, 0.95);
}

/* Light Teal - Ocean Mist */
body.theme-light-teal {
    --primary: #14b8a6;
    --primary-light: #2dd4bf;
    --primary-dark: #0d9488;
    --primary-glow: rgba(20, 184, 166, 0.2);
    --bg0: #f0fdfa;
    --bg1: #ccfbf1;
    --bg-dark: #99f6e4;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(204, 251, 241, 0.95);
    --bg-elevated: rgba(153, 246, 228, 0.95);
    --bg-input: rgba(240, 253, 250, 0.95);
    --text-primary: #042f2e;
    --text-secondary: rgba(4, 47, 46, 0.75);
    --text-muted: rgba(4, 47, 46, 0.55);
    --border: rgba(20, 184, 166, 0.2);
    --border-light: rgba(20, 184, 166, 0.3);
    --grid: rgba(20, 184, 166, 0.08);
    --grid2: rgba(13, 148, 136, 0.05);
    --code-bg: rgba(204, 251, 241, 0.95);
}

/* Light Slate - Silver Cloud */
body.theme-light-slate {
    --primary: #64748b;
    --primary-light: #94a3b8;
    --primary-dark: #475569;
    --primary-glow: rgba(100, 116, 139, 0.2);
    --bg0: #f8fafc;
    --bg1: #f1f5f9;
    --bg-dark: #e2e8f0;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(241, 245, 249, 0.95);
    --bg-elevated: rgba(226, 232, 240, 0.95);
    --bg-input: rgba(248, 250, 252, 0.95);
    --text-primary: #0f172a;
    --text-secondary: rgba(15, 23, 42, 0.75);
    --text-muted: rgba(15, 23, 42, 0.55);
    --border: rgba(100, 116, 139, 0.2);
    --border-light: rgba(100, 116, 139, 0.3);
    --grid: rgba(100, 116, 139, 0.06);
    --grid2: rgba(71, 85, 105, 0.04);
    --code-bg: rgba(241, 245, 249, 0.95);
}

/* ==========================================
   LIGHT THEME BODY ADJUSTMENTS
   ========================================== */

body[class*="theme-light-"] {
    background:
        radial-gradient(1200px 700px at 20% 10%, var(--primary-glow), transparent 60%),
        radial-gradient(1000px 600px at 80% 20%, var(--primary-glow), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
}

body[class*="theme-light-"] .grid-bg {
    opacity: 0.5;
}

body[class*="theme-light-"] .navbar {
    background: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   GLOBAL THEME TOGGLE UI
   ========================================== */

.global-theme-selector {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 10000 !important;
    display: block !important;
}

.global-theme-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-card, rgba(18, 18, 26, 0.98));
    border: 2px solid var(--primary, #8b5cf6);
    color: var(--primary, #8b5cf6);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.global-theme-btn:hover {
    transform: scale(1.1);
    background: var(--primary, #8b5cf6);
    color: white;
}

.global-theme-panel {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: var(--bg-card, rgba(18, 18, 26, 0.98));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 1rem;
    min-width: 300px;
    display: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.global-theme-panel.visible {
    display: block;
}

.global-theme-panel h4 {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}

.theme-preview-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
    min-height: 36px;
}

.theme-swatch {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    display: block !important;
}

.theme-swatch:hover {
    transform: scale(1.1);
}

.theme-swatch.active {
    border-color: var(--primary, #8b5cf6);
    box-shadow: 0 0 10px var(--primary-glow, rgba(139, 92, 246, 0.3));
}

/* ==========================================
   3D VIEWER BACKGROUNDS (per theme)
   ========================================== */

/* Default purple theme */
body:not([class*="theme-"]) .editor-3d-viewer,
body.theme-dark-purple .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #4a2a8a 0%, #2a1a5a 35%, #1a1040 60%, #0d0820 100%) !important;
}

body.theme-dark-blue .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #1e4a7a 0%, #0d2a4a 35%, #071a30 60%, #050f1a 100%) !important;
}

body.theme-dark-green .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #1a6b4a 0%, #0d3d2a 35%, #072a1d 60%, #051c12 100%) !important;
}

body.theme-dark-red .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #6b1a2a 0%, #3d0d15 35%, #2a070d 60%, #1c0508 100%) !important;
}

body.theme-dark-orange .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #6b4a1a 0%, #3d2a0d 35%, #2a1a07 60%, #1c1005 100%) !important;
}

body.theme-dark-mono .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #3a3a3a 0%, #252525 35%, #1a1a1a 60%, #0f0f0f 100%) !important;
}

body.theme-dark-cyan .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #0a6b7a 0%, #064a5a 35%, #032a35 60%, #011a20 100%) !important;
}

body.theme-dark-pink .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #7a2a5a 0%, #4a1a3a 35%, #2a0d20 60%, #1a0510 100%) !important;
}

body.theme-dark-gold .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #7a5a1a 0%, #4a3a0d 35%, #2a2007 60%, #1a1005 100%) !important;
}

body.theme-dark-indigo .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #3a3a7a 0%, #2a2a5a 35%, #1a1a40 60%, #0d0d20 100%) !important;
}

body.theme-dark-teal .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #1a5a5a 0%, #0d3a3a 35%, #072525 60%, #051515 100%) !important;
}

body.theme-dark-slate .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #4a5a6a 0%, #3a4550 35%, #252a30 60%, #151a1f 100%) !important;
}

/* Light theme viewer backgrounds */
body.theme-light-purple .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #a78bfa 0%, #8b5cf6 35%, #7c3aed 60%, #6d28d9 100%) !important;
}

body.theme-light-blue .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #60a5fa 0%, #3b82f6 35%, #2563eb 60%, #1d4ed8 100%) !important;
}

body.theme-light-green .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #4ade80 0%, #22c55e 35%, #16a34a 60%, #15803d 100%) !important;
}

body.theme-light-rose .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #fb7185 0%, #f43f5e 35%, #e11d48 60%, #be123c 100%) !important;
}

body.theme-light-peach .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #fb923c 0%, #f97316 35%, #ea580c 60%, #c2410c 100%) !important;
}

body.theme-light-mono .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #a1a1aa 0%, #71717a 35%, #52525b 60%, #3f3f46 100%) !important;
}

body.theme-light-cyan .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #22d3ee 0%, #06b6d4 35%, #0891b2 60%, #0e7490 100%) !important;
}

body.theme-light-pink .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #f472b6 0%, #ec4899 35%, #db2777 60%, #be185d 100%) !important;
}

body.theme-light-gold .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #facc15 0%, #eab308 35%, #ca8a04 60%, #a16207 100%) !important;
}

body.theme-light-indigo .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #818cf8 0%, #6366f1 35%, #4f46e5 60%, #4338ca 100%) !important;
}

body.theme-light-teal .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #2dd4bf 0%, #14b8a6 35%, #0d9488 60%, #0f766e 100%) !important;
}

body.theme-light-slate .editor-3d-viewer {
    background: radial-gradient(ellipse at center top, #94a3b8 0%, #64748b 35%, #475569 60%, #334155 100%) !important;
}