/* ============ PORTAL THEME ENGINE — Exact fp Adaptation ============ */

/* Base Theme Tokens */
:root {
    --theme-primary: #2563eb;
    --theme-accent: #3b82f6;
    --theme-bg: #ffffff;
    --theme-text: #1f2937;
    --theme-card: #f9fafb;
    --theme-border: #e5e7eb;
}

/* 1. Light Mode */
.theme-light {
    --theme-bg: #ffffff;
    --theme-bg-gradient: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%);
    --theme-text: #1f2937;
    --theme-card: #f9fafb;
    --theme-card-gradient: linear-gradient(145deg, #f9fafb 0%, #ffffff 100%);
    --theme-border: #e5e7eb;
    --theme-primary: #2563eb;
    --theme-primary-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    --theme-accent: #3b82f6;
    --theme-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --theme-primary-rgb: 37, 99, 235;
}

/* 2. Dark Slate */
.theme-dark {
    --theme-bg: #0f172a;
    --theme-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
    --theme-text: #f8fafc;
    --theme-card: #1e293b;
    --theme-card-gradient: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --theme-border: #334155;
    --theme-primary: #38bdf8;
    --theme-primary-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%);
    --theme-accent: #0284c7;
    --theme-accent-gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    --theme-primary-rgb: 56, 189, 248;
}

/* 3. Sepia Gold */
.theme-sepia {
    --theme-bg: #f5efe6;
    --theme-bg-gradient: linear-gradient(135deg, #f5efe6 0%, #e8dfc8 40%, #dcc8a0 100%);
    --theme-text: #433422;
    --theme-card: #eae2b7;
    --theme-card-gradient: linear-gradient(145deg, #eae2b7 0%, #f5efe6 100%);
    --theme-border: #d6ccb1;
    --theme-primary: #b45309;
    --theme-primary-gradient: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
    --theme-accent: #d97706;
    --theme-accent-gradient: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    --theme-primary-rgb: 180, 83, 9;
}

/* 4. Academic Blue */
.theme-academic_blue {
    --theme-bg: #f5f7ff;
    --theme-bg-gradient: linear-gradient(135deg, #f5f7ff 0%, #e0e7ff 40%, #c7d2fe 100%);
    --theme-text: #0f2d59;
    --theme-card: #ffffff;
    --theme-card-gradient: linear-gradient(145deg, #ffffff 0%, #e0e7ff 100%);
    --theme-border: #c7d2fe;
    --theme-primary: #3b82f6;
    --theme-primary-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    --theme-accent: #2563eb;
    --theme-accent-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --theme-primary-rgb: 59, 130, 246;
}

/* 5. Forest Emerald */
.theme-forest_emerald {
    --theme-bg: #f4fbf7;
    --theme-bg-gradient: linear-gradient(135deg, #f4fbf7 0%, #dcfce7 40%, #bbf7d0 100%);
    --theme-text: #0f172a;
    --theme-card: #ffffff;
    --theme-card-gradient: linear-gradient(145deg, #ffffff 0%, #dcfce7 100%);
    --theme-border: #d1fae5;
    --theme-primary: #059669;
    --theme-primary-gradient: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    --theme-accent: #047857;
    --theme-accent-gradient: linear-gradient(135deg, #047857 0%, #059669 100%);
    --theme-primary-rgb: 5, 150, 105;
}

/* 6. Vintage Plum */
.theme-vintage_plum {
    --theme-bg: #faf5ff;
    --theme-bg-gradient: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 40%, #e9d5ff 100%);
    --theme-text: #1e1b4b;
    --theme-card: #ffffff;
    --theme-card-gradient: linear-gradient(145deg, #ffffff 0%, #f3e8ff 100%);
    --theme-border: #e9d5ff;
    --theme-primary: #8b5cf6;
    --theme-primary-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #d946ef 100%);
    --theme-accent: #7c3aed;
    --theme-accent-gradient: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
    --theme-primary-rgb: 139, 92, 246;
}

/* 7. Sunset Amber */
.theme-sunset_amber {
    --theme-bg: #fffaf5;
    --theme-bg-gradient: linear-gradient(135deg, #fffaf5 0%, #fff7ed 30%, #fed7aa 100%);
    --theme-text: #0f172a;
    --theme-card: #ffffff;
    --theme-card-gradient: linear-gradient(145deg, #ffffff 0%, #fff7ed 100%);
    --theme-border: #fed7aa;
    --theme-primary: #f97316;
    --theme-primary-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
    --theme-accent: #ea580c;
    --theme-accent-gradient: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    --theme-primary-rgb: 249, 115, 22;
}

/* 8. Ocean Breeze */
.theme-ocean_breeze {
    --theme-bg: #f0f9ff;
    --theme-bg-gradient: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 40%, #7dd3fc 100%);
    --theme-text: #0f172a;
    --theme-card: #ffffff;
    --theme-card-gradient: linear-gradient(145deg, #ffffff 0%, #bae6fd 100%);
    --theme-border: #bae6fd;
    --theme-primary: #0284c7;
    --theme-primary-gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);
    --theme-accent: #0369a1;
    --theme-accent-gradient: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    --theme-primary-rgb: 2, 132, 199;
}

/* 9. Crimson Ruby */
.theme-crimson_ruby {
    --theme-bg: #fef2f2;
    --theme-bg-gradient: linear-gradient(135deg, #fef2f2 0%, #fecaca 40%, #fca5a5 100%);
    --theme-text: #7f1d1d;
    --theme-card: #ffffff;
    --theme-card-gradient: linear-gradient(145deg, #ffffff 0%, #fecaca 100%);
    --theme-border: #fecaca;
    --theme-primary: #b91c1c;
    --theme-primary-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 50%, #f87171 100%);
    --theme-accent: #ef4444;
    --theme-accent-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    --theme-primary-rgb: 185, 28, 28;
}

/* 10. Nord Minimal */
.theme-nord_minimal {
    --theme-bg: #e5e9f0;
    --theme-bg-gradient: linear-gradient(135deg, #e5e9f0 0%, #d8dee9 40%, #c7d1e8 100%);
    --theme-text: #2e3440;
    --theme-card: #eceff4;
    --theme-card-gradient: linear-gradient(145deg, #eceff4 0%, #d8dee9 100%);
    --theme-border: #d8dee9;
    --theme-primary: #5e81ac;
    --theme-primary-gradient: linear-gradient(135deg, #5e81ac 0%, #81a1c1 50%, #88c0d0 100%);
    --theme-accent: #81a1c1;
    --theme-accent-gradient: linear-gradient(135deg, #81a1c1 0%, #5e81ac 100%);
    --theme-primary-rgb: 94, 129, 172;
}

/* 11. Unacademy Mint */
.theme-unacademy_mint {
    --theme-bg: #f5fdf9;
    --theme-bg-gradient: linear-gradient(135deg, #f5fdf9 0%, #a7f3d0 40%, #6ee7b7 100%);
    --theme-text: #191d23;
    --theme-card: #ffffff;
    --theme-card-gradient: linear-gradient(145deg, #ffffff 0%, #a7f3d0 100%);
    --theme-border: #a7f3d0;
    --theme-primary: #00c37b;
    --theme-primary-gradient: linear-gradient(135deg, #00c37b 0%, #10b981 50%, #34d399 100%);
    --theme-accent: #00ab6c;
    --theme-accent-gradient: linear-gradient(135deg, #00ab6c 0%, #00c37b 100%);
    --theme-primary-rgb: 0, 195, 123;
}

/* 12. Cyberpunk Neon */
.theme-cyberpunk_neon {
    --theme-bg: #0d0c1d;
    --theme-bg-gradient: linear-gradient(135deg, #0d0c1d 0%, #1a1936 40%, #2d2a5e 100%);
    --theme-text: #00ffcc;
    --theme-card: #1a1936;
    --theme-card-gradient: linear-gradient(145deg, #1a1936 0%, #0d0c1d 100%);
    --theme-border: #ff0055;
    --theme-primary: #ff0055;
    --theme-primary-gradient: linear-gradient(135deg, #ff0055 0%, #ff3366 50%, #ff6699 100%);
    --theme-accent: #00ffcc;
    --theme-accent-gradient: linear-gradient(135deg, #00ffcc 0%, #00ccaa 100%);
    --theme-primary-rgb: 255, 0, 85;
}

/* 13. Dracula Vampire */
.theme-dracula_vampire {
    --theme-bg: #282a36;
    --theme-bg-gradient: linear-gradient(135deg, #282a36 0%, #343746 40%, #44475a 100%);
    --theme-text: #f8f8f2;
    --theme-card: #343746;
    --theme-card-gradient: linear-gradient(145deg, #343746 0%, #282a36 100%);
    --theme-border: #44475a;
    --theme-primary: #ff79c6;
    --theme-primary-gradient: linear-gradient(135deg, #ff79c6 0%, #bd93f9 50%, #ffb86c 100%);
    --theme-accent: #bd93f9;
    --theme-accent-gradient: linear-gradient(135deg, #bd93f9 0%, #ff79c6 100%);
    --theme-primary-rgb: 255, 121, 198;
}

/* 14. Rose Gold Romance */
.theme-rosegold_romance {
    --theme-bg: #fff5f5;
    --theme-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 40%, #ffd1d1 100%);
    --theme-text: #5c3d47;
    --theme-card: #ffe8e8;
    --theme-card-gradient: linear-gradient(145deg, #ffe8e8 0%, #fff5f5 100%);
    --theme-border: #ffd1d1;
    --theme-primary: #d4af37;
    --theme-primary-gradient: linear-gradient(135deg, #d4af37 0%, #e57c9f 50%, #f8b5d0 100%);
    --theme-accent: #e57c9f;
    --theme-accent-gradient: linear-gradient(135deg, #e57c9f 0%, #d4af37 100%);
    --theme-primary-rgb: 212, 175, 55;
}

/* 15. Coffee Latte */
.theme-coffee_latte {
    --theme-bg: #fbf8f3;
    --theme-bg-gradient: linear-gradient(135deg, #fbf8f3 0%, #efebe9 40%, #d7ccc8 100%);
    --theme-text: #3e2723;
    --theme-card: #efebe9;
    --theme-card-gradient: linear-gradient(145deg, #efebe9 0%, #fbf8f3 100%);
    --theme-border: #d7ccc8;
    --theme-primary: #8d6e63;
    --theme-primary-gradient: linear-gradient(135deg, #8d6e63 0%, #a1887f 50%, #bcaaa4 100%);
    --theme-accent: #a1887f;
    --theme-accent-gradient: linear-gradient(135deg, #a1887f 0%, #8d6e63 100%);
    --theme-primary-rgb: 141, 110, 99;
}

/* 16. Slate Graphite */
.theme-slate_graphite {
    --theme-bg: #1e2530;
    --theme-bg-gradient: linear-gradient(135deg, #1e2530 0%, #27303f 40%, #3d4b5f 100%);
    --theme-text: #e2e8f0;
    --theme-card: #27303f;
    --theme-card-gradient: linear-gradient(145deg, #27303f 0%, #1e2530 100%);
    --theme-border: #3d4b5f;
    --theme-primary: #6366f1;
    --theme-primary-gradient: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a5b4fc 100%);
    --theme-accent: #818cf8;
    --theme-accent-gradient: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    --theme-primary-rgb: 99, 102, 241;
}

/* 17. Royal Amethyst */
.theme-royal_amethyst {
    --theme-bg: #1a0b2e;
    --theme-bg-gradient: linear-gradient(135deg, #1a0b2e 0%, #2d124d 40%, #4c1d95 100%);
    --theme-text: #e9d5ff;
    --theme-card: #2d124d;
    --theme-card-gradient: linear-gradient(145deg, #2d124d 0%, #1a0b2e 100%);
    --theme-border: #4c1d95;
    --theme-primary: #a855f7;
    --theme-primary-gradient: linear-gradient(135deg, #a855f7 0%, #c084fc 50%, #d946ef 100%);
    --theme-accent: #c084fc;
    --theme-accent-gradient: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
    --theme-primary-rgb: 168, 85, 247;
}

/* 18. Mint Green Sage */
.theme-mint_green {
    --theme-bg: #f2f7f4;
    --theme-bg-gradient: linear-gradient(135deg, #f2f7f4 0%, #e1ede6 40%, #b4cfc0 100%);
    --theme-text: #2f4f4f;
    --theme-card: #e1ede6;
    --theme-card-gradient: linear-gradient(145deg, #e1ede6 0%, #f2f7f4 100%);
    --theme-border: #b4cfc0;
    --theme-primary: #4e8a6c;
    --theme-primary-gradient: linear-gradient(135deg, #4e8a6c 0%, #6aa884 50%, #8ac9a0 100%);
    --theme-accent: #6aa884;
    --theme-accent-gradient: linear-gradient(135deg, #6aa884 0%, #4e8a6c 100%);
    --theme-primary-rgb: 78, 138, 108;
}

/* 19. macOS Glass Light */
.theme-mac_glass_light {
    --theme-bg: #f3f4f6;
    --theme-bg-gradient: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    --theme-text: #1f2937;
    --theme-card: rgba(255, 255, 255, 0.45);
    --theme-card-gradient: linear-gradient(145deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.3) 100%);
    --theme-border: rgba(255, 255, 255, 0.4);
    --theme-primary: #2563eb;
    --theme-primary-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    --theme-accent: #3b82f6;
    --theme-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --mac-glass-bg: radial-gradient(at 0% 0%, rgba(219, 234, 254, 0.8) 0, transparent 50%),
                    radial-gradient(at 50% 0%, rgba(255, 237, 213, 0.8) 0, transparent 50%),
                    radial-gradient(at 100% 0%, rgba(243, 232, 255, 0.8) 0, transparent 50%),
                    radial-gradient(at 50% 100%, rgba(254, 226, 226, 0.8) 0, transparent 50%),
                    #f3f4f6;
}

/* 20. macOS Glass Dark */
.theme-mac_glass_dark {
    --theme-bg: #0f172a;
    --theme-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --theme-text: #f8fafc;
    --theme-card: rgba(15, 23, 42, 0.55);
    --theme-card-gradient: linear-gradient(145deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.4) 100%);
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-primary: #38bdf8;
    --theme-primary-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%);
    --theme-accent: #0284c7;
    --theme-accent-gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    --mac-glass-bg: radial-gradient(at 0% 0%, rgba(30, 41, 59, 0.9) 0, transparent 50%),
                    radial-gradient(at 50% 0%, rgba(29, 78, 216, 0.15) 0, transparent 50%),
                    radial-gradient(at 100% 0%, rgba(88, 28, 135, 0.15) 0, transparent 50%),
                    radial-gradient(at 50% 100%, rgba(127, 29, 29, 0.1) 0, transparent 50%),
                    #0b0f19;
}

/* 21. macOS Glass Aurora */
.theme-mac_glass_aurora {
    --theme-bg: #080710;
    --theme-bg-gradient: linear-gradient(135deg, #080710 0%, #1a1a2e 100%);
    --theme-text: #ffffff;
    --theme-card: rgba(255, 255, 255, 0.07);
    --theme-card-gradient: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-primary: #a855f7;
    --theme-primary-gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f43f5e 100%);
    --theme-accent: #f43f5e;
    --theme-accent-gradient: linear-gradient(135deg, #f43f5e 0%, #a855f7 100%);
    --mac-glass-bg: radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.25) 0, transparent 40%),
                    radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.25) 0, transparent 40%),
                    radial-gradient(circle at 50% 80%, rgba(16, 185, 129, 0.15) 0, transparent 40%),
                    #080710;
}

/* ============ THEME BODY STYLES ============ */
body {
    background: var(--mac-glass-bg, var(--theme-bg-gradient, var(--theme-bg)));
    background-attachment: fixed;
    color: var(--theme-text);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Glassmorphism for macOS glass themes */
.theme-mac_glass_light .card,
.theme-mac_glass_dark .card,
.theme-mac_glass_aurora .card,
.theme-mac_glass_light .admin-card,
.theme-mac_glass_dark .admin-card,
.theme-mac_glass_aurora .admin-card {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* ============ THEME PANEL (Right Slide-out) ============ */
.theme-gear-wrapper {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.theme-gear-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: #0f172a;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    transition: transform 0.3s;
}
.theme-gear-btn:hover {
    transform: scale(1.1);
}
.theme-gear-btn:active {
    transform: scale(0.95);
}
.theme-gear-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #10b981;
    animation: spin 8s linear infinite;
}
.theme-gear-close {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    border: none;
    line-height: 1;
}
.theme-gear-close:hover {
    background: #b91c1c;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Theme Panel Overlay */
.theme-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
}
.theme-panel-overlay.active {
    display: block;
}
.theme-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
}

/* Theme Panel Container */
.theme-panel {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 20rem;
    max-width: 85vw;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    z-index: 50;
    display: none;
    flex-direction: column;
    padding: 1.25rem;
    overflow-y: auto;
    color: #1e293b;
    border: 1px solid #f1f5f9;
    transform: translateX(110%);
    transition: transform 0.3s ease;
}
.theme-panel.active {
    display: flex;
    transform: translateX(0);
}

/* Panel Header */
.theme-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.theme-panel-header h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.theme-panel-header small {
    display: block;
    font-size: 9px;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.theme-panel-close {
    color: #9ca3af;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem;
    line-height: 1;
}
.theme-panel-close:hover {
    color: #4b5563;
}

/* Reset Button */
.theme-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 900;
    color: #fff;
    background: #0f172a;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.theme-reset-btn:hover {
    background: #1e293b;
    color: #fff;
}

/* Preset Section */
.theme-section-title {
    font-size: 10px;
    font-weight: 900;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.theme-presets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    background: rgba(249,250,251,0.5);
    margin-bottom: 1rem;
}

.theme-preset-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1e293b;
    transition: all 0.15s;
}
.theme-preset-link:hover {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb, 37,99,235), 0.05);
}
.theme-preset-link.active {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb, 37,99,235), 0.05);
    box-shadow: 0 0 0 1px var(--theme-primary);
}
.theme-preset-link .color-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    border: 1px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* Custom Color Pickers */
.theme-color-section {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.theme-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem;
    background: #f9fafb;
    border-radius: 0.75rem;
    border: 1px solid #f1f5f9;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4b5563;
}
.theme-color-row span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.theme-color-row input[type="color"] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}

/* Panel Footer */
.theme-panel-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
    margin-top: 1rem;
    text-align: center;
}
.theme-panel-footer p {
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0;
}

/* ============ THEME DROPDOWN IN NAVBAR ============ */
.theme-dropdown {
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
}
.theme-dropdown .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.theme-dropdown .dropdown-item.active {
    background: var(--theme-primary);
    color: #fff;
}
.theme-dropdown .dropdown-item.active::after {
    content: '✓';
    margin-left: 0.5rem;
    font-weight: bold;
}
.theme-dropdown .dropdown-header {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--theme-text-light, #6b7280);
    padding: 0.5rem 1rem;
}

/* ============ VARIABLE BRIDGE: theme-* → style.css uses these ============ */
/* Maps fp-style --theme-* tokens to --primary-color / --bg-color etc.
   that style.css expects. Put on body (where theme classes live) so
   var() resolves correctly via inheritance. */
body {
    --primary-color: var(--theme-primary, #2563eb);
    --primary-gradient: var(--theme-primary-gradient, linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%));
    --primary-dark: var(--theme-accent, #1d4ed8);
    --secondary-color: var(--theme-accent, #3b82f6);
    --secondary-gradient: var(--theme-accent-gradient, linear-gradient(135deg, #3b82f6 0%, #2563eb 100%));
    --secondary-dark: var(--theme-primary, #2563eb);
    --text-color: var(--theme-text, #1f2937);
    --bg-color: var(--theme-bg, #ffffff);
    --bg-gradient: var(--theme-bg-gradient, linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%));
    --bg-light: var(--theme-card, #f9fafb);
    --bg-light-gradient: var(--theme-card-gradient, linear-gradient(145deg, #f9fafb 0%, #ffffff 100%));
    --border-color: var(--theme-border, #e5e7eb);
}

/* Ensure body background/text update when theme class is present */
body[class^="theme-"],
body[class*=" theme-"] {
    background: var(--theme-bg-gradient, var(--theme-bg));
    color: var(--theme-text);
}