/*
 * ══════════════════════════════════════════════════════════════
 *  GENERALSOFT-AI ERP — Premium Theme System
 *  Extends Tailwind CSS with new color palettes + creative themes
 * ══════════════════════════════════════════════════════════════
 */

/* ┌─────────────────────────────────────────────────────────────┐
   │  PART 1 — SOLID COLOR THEMES (Tailwind Utility Classes)    │
   │  These add new color palettes missing from compiled CSS     │
   └─────────────────────────────────────────────────────────────┘ */

/* ── INDIGO ─────────────────────────────────────────── */
.tw-bg-indigo-700 { background-color: #4338ca !important; }
.tw-bg-indigo-800 { background-color: #3730a3 !important; }
.tw-bg-indigo-900 { background-color: #312e81 !important; }
.hover\:tw-bg-indigo-700:hover { background-color: #4338ca !important; }
.hover\:tw-bg-indigo-800:hover { background-color: #3730a3 !important; }
.tw-from-indigo-800 { --tw-gradient-from: #3730a3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(55 48 163 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-indigo-900 { --tw-gradient-to: #312e81 var(--tw-gradient-to-position); }

/* ── TEAL ───────────────────────────────────────────── */
.tw-bg-teal-700 { background-color: #0f766e !important; }
.tw-bg-teal-800 { background-color: #115e59 !important; }
.tw-bg-teal-900 { background-color: #134e4a !important; }
.hover\:tw-bg-teal-700:hover { background-color: #0f766e !important; }
.hover\:tw-bg-teal-800:hover { background-color: #115e59 !important; }
.tw-from-teal-800 { --tw-gradient-from: #115e59 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 94 89 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-teal-900 { --tw-gradient-to: #134e4a var(--tw-gradient-to-position); }

/* ── ROSE ───────────────────────────────────────────── */
.tw-bg-rose-700 { background-color: #be123c !important; }
.tw-bg-rose-800 { background-color: #9f1239 !important; }
.tw-bg-rose-900 { background-color: #881337 !important; }
.hover\:tw-bg-rose-700:hover { background-color: #be123c !important; }
.hover\:tw-bg-rose-800:hover { background-color: #9f1239 !important; }
.tw-from-rose-800 { --tw-gradient-from: #9f1239 var(--tw-gradient-from-position); --tw-gradient-to: rgb(159 18 57 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-rose-900 { --tw-gradient-to: #881337 var(--tw-gradient-to-position); }

/* ── SLATE ──────────────────────────────────────────── */
.tw-bg-slate-700 { background-color: #334155 !important; }
.tw-bg-slate-800 { background-color: #1e293b !important; }
.tw-bg-slate-900 { background-color: #0f172a !important; }
.hover\:tw-bg-slate-700:hover { background-color: #334155 !important; }
.hover\:tw-bg-slate-800:hover { background-color: #1e293b !important; }
.tw-from-slate-800 { --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-slate-900 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); }

/* ── EMERALD ────────────────────────────────────────── */
.tw-bg-emerald-700 { background-color: #047857 !important; }
.tw-bg-emerald-800 { background-color: #065f46 !important; }
.tw-bg-emerald-900 { background-color: #064e3b !important; }
.hover\:tw-bg-emerald-700:hover { background-color: #047857 !important; }
.hover\:tw-bg-emerald-800:hover { background-color: #065f46 !important; }
.tw-from-emerald-800 { --tw-gradient-from: #065f46 var(--tw-gradient-from-position); --tw-gradient-to: rgb(6 95 70 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-emerald-900 { --tw-gradient-to: #064e3b var(--tw-gradient-to-position); }

/* ── CYAN ───────────────────────────────────────────── */
.tw-bg-cyan-700 { background-color: #0e7490 !important; }
.tw-bg-cyan-800 { background-color: #155e75 !important; }
.tw-bg-cyan-900 { background-color: #164e63 !important; }
.hover\:tw-bg-cyan-700:hover { background-color: #0e7490 !important; }
.hover\:tw-bg-cyan-800:hover { background-color: #155e75 !important; }
.tw-from-cyan-800 { --tw-gradient-from: #155e75 var(--tw-gradient-from-position); --tw-gradient-to: rgb(21 94 117 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-cyan-900 { --tw-gradient-to: #164e63 var(--tw-gradient-to-position); }

/* ── VIOLET ─────────────────────────────────────────── */
.tw-bg-violet-700 { background-color: #6d28d9 !important; }
.tw-bg-violet-800 { background-color: #5b21b6 !important; }
.tw-bg-violet-900 { background-color: #4c1d95 !important; }
.hover\:tw-bg-violet-700:hover { background-color: #6d28d9 !important; }
.hover\:tw-bg-violet-800:hover { background-color: #5b21b6 !important; }
.tw-from-violet-800 { --tw-gradient-from: #5b21b6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(91 33 182 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-violet-900 { --tw-gradient-to: #4c1d95 var(--tw-gradient-to-position); }

/* ── FUCHSIA ────────────────────────────────────────── */
.tw-bg-fuchsia-700 { background-color: #a21caf !important; }
.tw-bg-fuchsia-800 { background-color: #86198f !important; }
.tw-bg-fuchsia-900 { background-color: #701a75 !important; }
.hover\:tw-bg-fuchsia-700:hover { background-color: #a21caf !important; }
.hover\:tw-bg-fuchsia-800:hover { background-color: #86198f !important; }
.tw-from-fuchsia-800 { --tw-gradient-from: #86198f var(--tw-gradient-from-position); --tw-gradient-to: rgb(134 25 143 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-fuchsia-900 { --tw-gradient-to: #701a75 var(--tw-gradient-to-position); }


/* ┌─────────────────────────────────────────────────────────────┐
   │  PART 2 — PREMIUM CREATIVE THEMES                          │
   │  Multi-color gradients, glows, and visual effects           │
   │  Uses skin-{theme} body class for creative overrides        │
   └─────────────────────────────────────────────────────────────┘ */

/* ══════════════════════════════════════════════════════
   🌊 OCEAN — Deep ocean to tropical surface
   Gradient: Deep Navy → Ocean Blue → Teal
   ══════════════════════════════════════════════════════ */
.tw-bg-ocean-700 { background-color: #0369a1 !important; }
.tw-bg-ocean-800 { background-color: #0c4a6e !important; }
.tw-bg-ocean-900 { background-color: #082f49 !important; }
.hover\:tw-bg-ocean-700:hover { background-color: #0369a1 !important; }
.hover\:tw-bg-ocean-800:hover { background-color: #0c4a6e !important; }
.tw-from-ocean-800 { --tw-gradient-from: #0c4a6e var(--tw-gradient-from-position); --tw-gradient-to: rgb(12 74 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-ocean-900 { --tw-gradient-to: #082f49 var(--tw-gradient-to-position); }

body.skin-ocean .thetop > main > .no-print {
    background: linear-gradient(135deg, #082f49 0%, #0c4a6e 30%, #0e7490 70%, #0d9488 100%) !important;
    border-bottom: 2px solid rgba(13, 148, 136, 0.4) !important;
    box-shadow: 0 2px 20px rgba(14, 116, 144, 0.2);
}
body.skin-ocean .side-bar > a:first-child {
    background: linear-gradient(180deg, #082f49, #0c4a6e) !important;
}

/* ══════════════════════════════════════════════════════
   🌅 SUNSET — Warm desert sunset
   Gradient: Deep Amber → Burnt Orange → Rose
   ══════════════════════════════════════════════════════ */
.tw-bg-sunset-700 { background-color: #c2410c !important; }
.tw-bg-sunset-800 { background-color: #9a3412 !important; }
.tw-bg-sunset-900 { background-color: #7c2d12 !important; }
.hover\:tw-bg-sunset-700:hover { background-color: #c2410c !important; }
.hover\:tw-bg-sunset-800:hover { background-color: #9a3412 !important; }
.tw-from-sunset-800 { --tw-gradient-from: #9a3412 var(--tw-gradient-from-position); --tw-gradient-to: rgb(154 52 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-sunset-900 { --tw-gradient-to: #7c2d12 var(--tw-gradient-to-position); }

body.skin-sunset .thetop > main > .no-print {
    background: linear-gradient(135deg, #7c2d12 0%, #b91c1c 35%, #be185d 70%, #9f1239 100%) !important;
    border-bottom: 2px solid rgba(251, 113, 133, 0.3) !important;
    box-shadow: 0 2px 20px rgba(185, 28, 28, 0.2);
}
body.skin-sunset .side-bar > a:first-child {
    background: linear-gradient(180deg, #7c2d12, #9a3412) !important;
}

/* ══════════════════════════════════════════════════════
   🌙 MIDNIGHT — Deep space with electric blue pulse
   Gradient: Near-Black → Deep Navy → Electric Blue edge
   ══════════════════════════════════════════════════════ */
.tw-bg-midnight-700 { background-color: #1e3a5f !important; }
.tw-bg-midnight-800 { background-color: #0f172a !important; }
.tw-bg-midnight-900 { background-color: #020617 !important; }
.hover\:tw-bg-midnight-700:hover { background-color: #1e3a5f !important; }
.hover\:tw-bg-midnight-800:hover { background-color: #0f172a !important; }
.tw-from-midnight-800 { --tw-gradient-from: #0f172a var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-midnight-900 { --tw-gradient-to: #020617 var(--tw-gradient-to-position); }

body.skin-midnight .thetop > main > .no-print {
    background: linear-gradient(135deg, #020617 0%, #0f172a 40%, #172554 80%, #1e3a8a 100%) !important;
    border-bottom: 2px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 2px 30px rgba(59, 130, 246, 0.15), inset 0 -1px 0 rgba(96, 165, 250, 0.1);
}
body.skin-midnight .side-bar > a:first-child {
    background: linear-gradient(180deg, #020617, #0f172a) !important;
}

/* ══════════════════════════════════════════════════════
   🌌 AURORA — Northern lights shimmer
   Gradient: Indigo → Teal → Emerald (animated)
   ══════════════════════════════════════════════════════ */
.tw-bg-aurora-700 { background-color: #4338ca !important; }
.tw-bg-aurora-800 { background-color: #312e81 !important; }
.tw-bg-aurora-900 { background-color: #1e1b4b !important; }
.hover\:tw-bg-aurora-700:hover { background-color: #4338ca !important; }
.hover\:tw-bg-aurora-800:hover { background-color: #312e81 !important; }
.tw-from-aurora-800 { --tw-gradient-from: #312e81 var(--tw-gradient-from-position); --tw-gradient-to: rgb(49 46 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-aurora-900 { --tw-gradient-to: #1e1b4b var(--tw-gradient-to-position); }

@keyframes auroraShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body.skin-aurora .thetop > main > .no-print {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 15%, #115e59 40%, #065f46 60%, #0f766e 80%, #312e81 100%) !important;
    background-size: 300% 300% !important;
    animation: auroraShift 8s ease infinite;
    border-bottom: 2px solid rgba(52, 211, 153, 0.4) !important;
    box-shadow: 0 2px 25px rgba(16, 185, 129, 0.15);
}
body.skin-aurora .side-bar > a:first-child {
    background: linear-gradient(180deg, #1e1b4b, #312e81) !important;
}

/* ══════════════════════════════════════════════════════
   🏆 GOLD — Luxury gold & dark chocolate
   Gradient: Dark Chocolate → Rich Amber → Gold
   ══════════════════════════════════════════════════════ */
.tw-bg-gold-700 { background-color: #92400e !important; }
.tw-bg-gold-800 { background-color: #78350f !important; }
.tw-bg-gold-900 { background-color: #451a03 !important; }
.hover\:tw-bg-gold-700:hover { background-color: #92400e !important; }
.hover\:tw-bg-gold-800:hover { background-color: #78350f !important; }
.tw-from-gold-800 { --tw-gradient-from: #78350f var(--tw-gradient-from-position); --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-gold-900 { --tw-gradient-to: #451a03 var(--tw-gradient-to-position); }

body.skin-gold .thetop > main > .no-print {
    background: linear-gradient(135deg, #451a03 0%, #78350f 30%, #92400e 60%, #b45309 100%) !important;
    border-bottom: 2px solid rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 2px 20px rgba(180, 83, 9, 0.2);
}
body.skin-gold .side-bar > a:first-child {
    background: linear-gradient(180deg, #451a03, #78350f) !important;
}

/* ══════════════════════════════════════════════════════
   ⚡ CARBON — Dark carbon fiber with red accent
   Gradient: Near-Black → Charcoal + Red accent line
   ══════════════════════════════════════════════════════ */
.tw-bg-carbon-700 { background-color: #27272a !important; }
.tw-bg-carbon-800 { background-color: #18181b !important; }
.tw-bg-carbon-900 { background-color: #09090b !important; }
.hover\:tw-bg-carbon-700:hover { background-color: #27272a !important; }
.hover\:tw-bg-carbon-800:hover { background-color: #18181b !important; }
.tw-from-carbon-800 { --tw-gradient-from: #18181b var(--tw-gradient-from-position); --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-carbon-900 { --tw-gradient-to: #09090b var(--tw-gradient-to-position); }

body.skin-carbon .thetop > main > .no-print {
    background: linear-gradient(135deg, #09090b 0%, #18181b 40%, #27272a 70%, #18181b 100%) !important;
    border-bottom: 2px solid rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 2px 20px rgba(239, 68, 68, 0.1), inset 0 -1px 0 rgba(239, 68, 68, 0.2);
}
body.skin-carbon .side-bar > a:first-child {
    background: linear-gradient(180deg, #09090b, #18181b) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
}

/* ══════════════════════════════════════════════════════
   🌿 FOREST — Natural deep forest tones
   Gradient: Dark Bark → Forest Green → Emerald
   ══════════════════════════════════════════════════════ */
.tw-bg-forest-700 { background-color: #166534 !important; }
.tw-bg-forest-800 { background-color: #14532d !important; }
.tw-bg-forest-900 { background-color: #052e16 !important; }
.hover\:tw-bg-forest-700:hover { background-color: #166534 !important; }
.hover\:tw-bg-forest-800:hover { background-color: #14532d !important; }
.tw-from-forest-800 { --tw-gradient-from: #14532d var(--tw-gradient-from-position); --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-forest-900 { --tw-gradient-to: #052e16 var(--tw-gradient-to-position); }

body.skin-forest .thetop > main > .no-print {
    background: linear-gradient(135deg, #052e16 0%, #14532d 30%, #065f46 65%, #115e59 100%) !important;
    border-bottom: 2px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 2px 20px rgba(5, 150, 105, 0.15);
}
body.skin-forest .side-bar > a:first-child {
    background: linear-gradient(180deg, #052e16, #14532d) !important;
}

/* ══════════════════════════════════════════════════════
   💜 LAVENDER — Soft elegant purple
   Gradient: Deep Plum → Purple → Lavender shimmer
   ══════════════════════════════════════════════════════ */
.tw-bg-lavender-700 { background-color: #7e22ce !important; }
.tw-bg-lavender-800 { background-color: #6b21a8 !important; }
.tw-bg-lavender-900 { background-color: #581c87 !important; }
.hover\:tw-bg-lavender-700:hover { background-color: #7e22ce !important; }
.hover\:tw-bg-lavender-800:hover { background-color: #6b21a8 !important; }
.tw-from-lavender-800 { --tw-gradient-from: #6b21a8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(107 33 168 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-lavender-900 { --tw-gradient-to: #581c87 var(--tw-gradient-to-position); }

body.skin-lavender .thetop > main > .no-print {
    background: linear-gradient(135deg, #581c87 0%, #6b21a8 30%, #7c3aed 60%, #8b5cf6 100%) !important;
    border-bottom: 2px solid rgba(167, 139, 250, 0.4) !important;
    box-shadow: 0 2px 25px rgba(139, 92, 246, 0.15);
}
body.skin-lavender .side-bar > a:first-child {
    background: linear-gradient(180deg, #581c87, #6b21a8) !important;
}


/* ┌─────────────────────────────────────────────────────────────┐
   │  PART 3 — SIDEBAR ACTIVE ITEM ACCENT COLORS               │
   └─────────────────────────────────────────────────────────────┘ */

.skin-indigo .sidebar-menu > li.active > a { color: #6366f1; border-left-color: #6366f1; }
.skin-teal .sidebar-menu > li.active > a { color: #14b8a6; border-left-color: #14b8a6; }
.skin-rose .sidebar-menu > li.active > a { color: #f43f5e; border-left-color: #f43f5e; }
.skin-slate .sidebar-menu > li.active > a { color: #64748b; border-left-color: #64748b; }
.skin-emerald .sidebar-menu > li.active > a { color: #10b981; border-left-color: #10b981; }
.skin-cyan .sidebar-menu > li.active > a { color: #06b6d4; border-left-color: #06b6d4; }
.skin-violet .sidebar-menu > li.active > a { color: #8b5cf6; border-left-color: #8b5cf6; }
.skin-fuchsia .sidebar-menu > li.active > a { color: #d946ef; border-left-color: #d946ef; }
.skin-ocean .sidebar-menu > li.active > a { color: #0ea5e9; border-left-color: #0ea5e9; }
.skin-sunset .sidebar-menu > li.active > a { color: #f97316; border-left-color: #f97316; }
.skin-midnight .sidebar-menu > li.active > a { color: #60a5fa; border-left-color: #60a5fa; }
.skin-aurora .sidebar-menu > li.active > a { color: #34d399; border-left-color: #34d399; }
.skin-gold .sidebar-menu > li.active > a { color: #f59e0b; border-left-color: #f59e0b; }
.skin-carbon .sidebar-menu > li.active > a { color: #ef4444; border-left-color: #ef4444; }
.skin-forest .sidebar-menu > li.active > a { color: #10b981; border-left-color: #10b981; }
.skin-lavender .sidebar-menu > li.active > a { color: #a78bfa; border-left-color: #a78bfa; }


/* ┌─────────────────────────────────────────────────────────────┐
   │  PART 4 — THEME PICKER UI (Settings Page)                  │
   └─────────────────────────────────────────────────────────────┘ */

.theme-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.theme-section-title i { color: #6b7280; font-size: 14px; }
.theme-section-subtitle { font-size: 12.5px; color: #6b7280; margin-bottom: 8px; }
.theme-divider { border: none; border-top: 1px solid #e5e7eb; margin: 20px 0; }

.theme-category-label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin: 18px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}
.theme-category-label i { font-size: 14px; }
.theme-category-label .cat-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.theme-category-label .cat-badge-classic { background: #e0e7ff; color: #4338ca; }
.theme-category-label .cat-badge-premium { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }

.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.theme-option {
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    border: 3px solid transparent;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.theme-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.theme-option.active {
    box-shadow: 0 0 0 3px var(--theme-accent, #3b82f6), 0 8px 25px rgba(0,0,0,0.12);
    border-color: var(--theme-accent, #3b82f6);
}

.theme-option .theme-preview {
    height: 65px;
    display: flex;
    align-items: stretch;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
    position: relative;
}
.theme-option .theme-preview .preview-sidebar {
    width: 28%;
}
.theme-option .theme-preview .preview-header {
    width: 72%;
    display: flex;
    flex-direction: column;
}
.theme-option .theme-preview .preview-topbar {
    height: 15px;
    position: relative;
}
.theme-option .theme-preview .preview-content {
    flex: 1;
    background: #f8fafc;
    padding: 6px;
    display: flex;
    gap: 4px;
}
.theme-option .theme-preview .preview-card {
    flex: 1;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.theme-option .theme-info {
    padding: 8px 10px;
    text-align: center;
    background: #fafafa;
    border-top: 1px solid #f1f5f9;
}
.theme-option .theme-info .theme-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.theme-option .theme-info .theme-name-ar {
    font-size: 11px;
    color: #6b7280;
    margin: 2px 0 0;
}

.theme-option .theme-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--theme-accent, #3b82f6);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 2;
}
.theme-option.active .theme-check { display: flex; }

.theme-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Badge styles */
.theme-new-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}
.theme-premium-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

/* ── Theme Preview Colors ─────────────────────────── */

/* Classic Themes */
.theme-option[data-theme="primary"] { --theme-accent: #1e40af; }
.theme-option[data-theme="primary"] .preview-sidebar { background: #1e40af; }
.theme-option[data-theme="primary"] .preview-topbar { background: linear-gradient(90deg, #1e40af, #1d4ed8); }

.theme-option[data-theme="purple"] { --theme-accent: #6b21a8; }
.theme-option[data-theme="purple"] .preview-sidebar { background: #6b21a8; }
.theme-option[data-theme="purple"] .preview-topbar { background: linear-gradient(90deg, #6b21a8, #7e22ce); }

.theme-option[data-theme="green"] { --theme-accent: #166534; }
.theme-option[data-theme="green"] .preview-sidebar { background: #166534; }
.theme-option[data-theme="green"] .preview-topbar { background: linear-gradient(90deg, #166534, #15803d); }

.theme-option[data-theme="red"] { --theme-accent: #991b1b; }
.theme-option[data-theme="red"] .preview-sidebar { background: #991b1b; }
.theme-option[data-theme="red"] .preview-topbar { background: linear-gradient(90deg, #991b1b, #b91c1c); }

.theme-option[data-theme="yellow"] { --theme-accent: #854d0e; }
.theme-option[data-theme="yellow"] .preview-sidebar { background: #854d0e; }
.theme-option[data-theme="yellow"] .preview-topbar { background: linear-gradient(90deg, #854d0e, #a16207); }

.theme-option[data-theme="orange"] { --theme-accent: #9a3412; }
.theme-option[data-theme="orange"] .preview-sidebar { background: #9a3412; }
.theme-option[data-theme="orange"] .preview-topbar { background: linear-gradient(90deg, #9a3412, #c2410c); }

.theme-option[data-theme="sky"] { --theme-accent: #075985; }
.theme-option[data-theme="sky"] .preview-sidebar { background: #075985; }
.theme-option[data-theme="sky"] .preview-topbar { background: linear-gradient(90deg, #075985, #0284c7); }

/* Extended Solid Themes */
.theme-option[data-theme="indigo"] { --theme-accent: #3730a3; }
.theme-option[data-theme="indigo"] .preview-sidebar { background: #3730a3; }
.theme-option[data-theme="indigo"] .preview-topbar { background: linear-gradient(90deg, #3730a3, #4338ca); }

.theme-option[data-theme="teal"] { --theme-accent: #115e59; }
.theme-option[data-theme="teal"] .preview-sidebar { background: #115e59; }
.theme-option[data-theme="teal"] .preview-topbar { background: linear-gradient(90deg, #115e59, #0f766e); }

.theme-option[data-theme="rose"] { --theme-accent: #9f1239; }
.theme-option[data-theme="rose"] .preview-sidebar { background: #9f1239; }
.theme-option[data-theme="rose"] .preview-topbar { background: linear-gradient(90deg, #9f1239, #be123c); }

.theme-option[data-theme="slate"] { --theme-accent: #334155; }
.theme-option[data-theme="slate"] .preview-sidebar { background: #1e293b; }
.theme-option[data-theme="slate"] .preview-topbar { background: linear-gradient(90deg, #1e293b, #334155); }

.theme-option[data-theme="emerald"] { --theme-accent: #065f46; }
.theme-option[data-theme="emerald"] .preview-sidebar { background: #065f46; }
.theme-option[data-theme="emerald"] .preview-topbar { background: linear-gradient(90deg, #065f46, #047857); }

.theme-option[data-theme="cyan"] { --theme-accent: #155e75; }
.theme-option[data-theme="cyan"] .preview-sidebar { background: #155e75; }
.theme-option[data-theme="cyan"] .preview-topbar { background: linear-gradient(90deg, #155e75, #0e7490); }

.theme-option[data-theme="violet"] { --theme-accent: #5b21b6; }
.theme-option[data-theme="violet"] .preview-sidebar { background: #5b21b6; }
.theme-option[data-theme="violet"] .preview-topbar { background: linear-gradient(90deg, #5b21b6, #6d28d9); }

.theme-option[data-theme="fuchsia"] { --theme-accent: #86198f; }
.theme-option[data-theme="fuchsia"] .preview-sidebar { background: #86198f; }
.theme-option[data-theme="fuchsia"] .preview-topbar { background: linear-gradient(90deg, #86198f, #a21caf); }

/* Premium Creative Themes (multi-color gradient previews) */
.theme-option[data-theme="ocean"] { --theme-accent: #0ea5e9; }
.theme-option[data-theme="ocean"] .preview-sidebar { background: linear-gradient(180deg, #082f49, #0c4a6e); }
.theme-option[data-theme="ocean"] .preview-topbar { background: linear-gradient(90deg, #082f49, #0c4a6e, #0e7490, #0d9488); }

.theme-option[data-theme="sunset"] { --theme-accent: #f97316; }
.theme-option[data-theme="sunset"] .preview-sidebar { background: linear-gradient(180deg, #7c2d12, #9a3412); }
.theme-option[data-theme="sunset"] .preview-topbar { background: linear-gradient(90deg, #7c2d12, #b91c1c, #be185d, #9f1239); }

.theme-option[data-theme="midnight"] { --theme-accent: #3b82f6; }
.theme-option[data-theme="midnight"] .preview-sidebar { background: linear-gradient(180deg, #020617, #0f172a); }
.theme-option[data-theme="midnight"] .preview-topbar { background: linear-gradient(90deg, #020617, #0f172a, #172554, #1e3a8a); border-bottom: 1px solid rgba(59,130,246,0.5); }

.theme-option[data-theme="aurora"] { --theme-accent: #34d399; }
.theme-option[data-theme="aurora"] .preview-sidebar { background: linear-gradient(180deg, #1e1b4b, #312e81); }
.theme-option[data-theme="aurora"] .preview-topbar { background: linear-gradient(90deg, #312e81, #1e1b4b, #115e59, #065f46, #0f766e); animation: auroraShift 4s ease infinite; background-size: 300% 100%; }

.theme-option[data-theme="gold"] { --theme-accent: #f59e0b; }
.theme-option[data-theme="gold"] .preview-sidebar { background: linear-gradient(180deg, #451a03, #78350f); }
.theme-option[data-theme="gold"] .preview-topbar { background: linear-gradient(90deg, #451a03, #78350f, #92400e, #b45309); }

.theme-option[data-theme="carbon"] { --theme-accent: #ef4444; }
.theme-option[data-theme="carbon"] .preview-sidebar { background: linear-gradient(180deg, #09090b, #18181b); }
.theme-option[data-theme="carbon"] .preview-topbar { background: linear-gradient(90deg, #09090b, #18181b, #27272a, #18181b); border-bottom: 1px solid rgba(239,68,68,0.5); }

.theme-option[data-theme="forest"] { --theme-accent: #10b981; }
.theme-option[data-theme="forest"] .preview-sidebar { background: linear-gradient(180deg, #052e16, #14532d); }
.theme-option[data-theme="forest"] .preview-topbar { background: linear-gradient(90deg, #052e16, #14532d, #065f46, #115e59); }

.theme-option[data-theme="lavender"] { --theme-accent: #a78bfa; }
.theme-option[data-theme="lavender"] .preview-sidebar { background: linear-gradient(180deg, #581c87, #6b21a8); }
.theme-option[data-theme="lavender"] .preview-topbar { background: linear-gradient(90deg, #581c87, #6b21a8, #7c3aed, #8b5cf6); }