/* ================================================================
   JOLLY GRID - UNIFIED THEME SYSTEM
   Theme variables for both Light and Dark modes
   Works across all pages with theme toggle
   ================================================================ */

/* ========================================
   DARK THEME (Default)
   ======================================== */
:root,
[data-theme="dark"] {
    /* Base colors */
    --bg-primary: #080c18;
    --bg-secondary: #0c1424;
    --bg-tertiary: #121a2e;
    --bg-card: rgba(18, 22, 32, 0.75);
    --bg-elevated: rgba(24, 28, 40, 0.88);
    --bg-elevated-hover: rgba(32, 38, 54, 0.95);
    --bg-glass: rgba(12, 18, 36, 0.85);
    
    /* Text colors */
    --text-primary: #f8fafc;
    --text-secondary: rgba(248, 250, 252, 0.88);
    --text-muted: rgba(248, 250, 252, 0.65);
    --text-subtle: rgba(248, 250, 252, 0.45);
    
    /* Accent colors - vibrant for dark mode */
    --accent-purple: #a78bfa;
    --accent-pink: #f472b6;
    --accent-cyan: #22d3ee;
    --accent-green: #34d399;
    --accent-orange: #fb923c;
    --accent-yellow: #fcd34d;
    --accent-blue: #60a5fa;
    --accent-red: #f87171;
    
    /* Accent color opacity variants */
    --accent-purple-05: rgba(168, 85, 247, 0.05);
    --accent-purple-08: rgba(168, 85, 247, 0.08);
    --accent-purple-10: rgba(168, 85, 247, 0.1);
    --accent-purple-15: rgba(168, 85, 247, 0.15);
    --accent-purple-20: rgba(168, 85, 247, 0.2);
    --accent-purple-30: rgba(168, 85, 247, 0.3);
    --accent-purple-40: rgba(168, 85, 247, 0.4);
    --accent-purple-50: rgba(168, 85, 247, 0.5);
    
    --accent-pink-05: rgba(236, 72, 153, 0.05);
    --accent-pink-08: rgba(236, 72, 153, 0.08);
    --accent-pink-10: rgba(236, 72, 153, 0.1);
    --accent-pink-15: rgba(236, 72, 153, 0.15);
    --accent-pink-20: rgba(236, 72, 153, 0.2);
    --accent-pink-30: rgba(236, 72, 153, 0.3);
    --accent-pink-40: rgba(236, 72, 153, 0.4);
    
    --accent-cyan-05: rgba(6, 182, 212, 0.05);
    --accent-cyan-10: rgba(6, 182, 212, 0.1);
    --accent-cyan-15: rgba(6, 182, 212, 0.15);
    --accent-cyan-20: rgba(6, 182, 212, 0.2);
    --accent-cyan-30: rgba(6, 182, 212, 0.3);
    --accent-cyan-40: rgba(6, 182, 212, 0.4);
    
    --accent-green-05: rgba(16, 185, 129, 0.05);
    --accent-green-10: rgba(16, 185, 129, 0.1);
    --accent-green-15: rgba(16, 185, 129, 0.15);
    --accent-green-20: rgba(16, 185, 129, 0.2);
    --accent-green-25: rgba(16, 185, 129, 0.25);
    --accent-green-30: rgba(16, 185, 129, 0.3);
    --accent-green-40: rgba(16, 185, 129, 0.4);
    
    --accent-orange-05: rgba(249, 115, 22, 0.05);
    --accent-orange-10: rgba(249, 115, 22, 0.1);
    --accent-orange-15: rgba(249, 115, 22, 0.15);
    --accent-orange-20: rgba(249, 115, 22, 0.2);
    --accent-orange-30: rgba(249, 115, 22, 0.3);
    --accent-orange-40: rgba(249, 115, 22, 0.4);
    
    --accent-yellow-20: rgba(252, 211, 77, 0.2);
    --accent-yellow-30: rgba(252, 211, 77, 0.3);
    --accent-yellow-40: rgba(252, 211, 77, 0.4);
    
    --accent-red-20: rgba(239, 68, 68, 0.2);
    
    /* Primary accent aliases (for component compatibility) */
    --accent-primary: var(--accent-purple);
    --accent-primary-hover: #9061f9;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    --gradient-secondary: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
    --gradient-warm: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow));
    --gradient-cool: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    
    /* Background mesh gradients */
    --gradient-mesh-1: radial-gradient(at 40% 20%, rgba(168, 85, 247, 0.25) 0px, transparent 50%);
    --gradient-mesh-2: radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%);
    --gradient-mesh-3: radial-gradient(at 0% 50%, rgba(6, 182, 212, 0.15) 0px, transparent 50%);
    --gradient-mesh-4: radial-gradient(at 80% 50%, rgba(16, 185, 129, 0.1) 0px, transparent 50%);
    --gradient-mesh-5: radial-gradient(at 0% 100%, rgba(249, 115, 22, 0.15) 0px, transparent 50%);
    
    /* Borders */
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-accent: rgba(168, 85, 247, 0.3);
    
    /* Shadows - refined for elegance */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.20);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-glow-purple: 0 6px 32px rgba(167, 139, 250, 0.30), 0 0 16px rgba(167, 139, 250, 0.15);
    --shadow-glow-pink: 0 6px 32px rgba(244, 114, 182, 0.30), 0 0 16px rgba(244, 114, 182, 0.15);
    --shadow-glow-cyan: 0 6px 32px rgba(34, 211, 238, 0.30), 0 0 16px rgba(34, 211, 238, 0.15);
    
    /* Glass morphism */
    --glass-bg: rgba(12, 18, 36, 0.7);
    --glass-border: rgba(248, 250, 252, 0.08);
    --glass-blur: blur(24px);
    
    /* Component specific */
    --header-bg: #080c18;
    --footer-bg: linear-gradient(to bottom, #050810, #030508);
    --card-bg: rgba(18, 22, 32, 0.75);
    --input-bg: rgba(248, 250, 252, 0.04);
    --input-border: rgba(248, 250, 252, 0.08);
    --input-focus-border: var(--accent-purple);
    
    /* Button styles */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: rgba(255, 255, 255, 0.3);
    --btn-secondary-text: #ffffff;
    
    /* Status colors */
    --success-bg: rgba(16, 185, 129, 0.15);
    --success-border: rgba(16, 185, 129, 0.3);
    --success-text: #10b981;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --warning-border: rgba(251, 191, 36, 0.3);
    --warning-text: #fbbf24;
    --error-bg: rgba(239, 68, 68, 0.15);
    --error-border: rgba(239, 68, 68, 0.3);
    --error-text: #ef4444;
    --info-bg: rgba(59, 130, 246, 0.15);
    --info-border: rgba(59, 130, 246, 0.3);
    --info-text: #3b82f6;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* Scrollbar */
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(168, 85, 247, 0.5);
    
    /* Sidebar - Navy blue to match header */
    --sidebar-bg: rgba(8, 12, 24, 0.92);
    --sidebar-header-bg: #080c18;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-item-hover: rgba(99, 102, 241, 0.15);
    --sidebar-item-active-bg: rgba(99, 102, 241, 0.12);
    --sidebar-item-active-border: rgba(99, 102, 241, 0.25);
    --sidebar-icon-bg: rgba(255, 255, 255, 0.03);
    --sidebar-icon-border: rgba(255, 255, 255, 0.05);
    --sidebar-toggle-border: rgba(255, 255, 255, 0.08);
    --sidebar-toggle-hover-bg: rgba(255, 255, 255, 0.08);
    
    /* Theme toggle icon - In dark mode, show sun to switch to light */
    --theme-icon-display-sun: block;
    --theme-icon-display-moon: none;
}

/* ========================================
   LIGHT THEME
   ======================================== */
[data-theme="light"] {
    /* Base colors - warm cream tones for premium feel */
    --bg-primary: #fefdfb;
    --bg-secondary: #faf9f7;
    --bg-tertiary: #f5f3f0;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-elevated-hover: #f8fafc;
    --bg-glass: rgba(255, 255, 255, 0.88);
    
    /* Text colors */
    --text-primary: #1a1a2e;
    --text-secondary: #3d3d5c;
    --text-muted: #6b6b8a;
    --text-subtle: #9999b3;
    
    /* Accent colors - slightly deeper for light mode */
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --accent-cyan: #06b6d4;
    --accent-green: #10b981;
    --accent-orange: #f97316;
    --accent-yellow: #eab308;
    --accent-blue: #3b82f6;
    --accent-red: #ef4444;
    
    /* Accent color opacity variants */
    --accent-purple-05: rgba(124, 58, 237, 0.05);
    --accent-purple-08: rgba(124, 58, 237, 0.08);
    --accent-purple-10: rgba(124, 58, 237, 0.1);
    --accent-purple-15: rgba(124, 58, 237, 0.15);
    --accent-purple-20: rgba(124, 58, 237, 0.2);
    --accent-purple-30: rgba(124, 58, 237, 0.3);
    --accent-purple-40: rgba(124, 58, 237, 0.4);
    --accent-purple-50: rgba(124, 58, 237, 0.5);
    
    --accent-pink-05: rgba(219, 39, 119, 0.05);
    --accent-pink-08: rgba(219, 39, 119, 0.08);
    --accent-pink-10: rgba(219, 39, 119, 0.1);
    --accent-pink-15: rgba(219, 39, 119, 0.15);
    --accent-pink-20: rgba(219, 39, 119, 0.2);
    --accent-pink-30: rgba(219, 39, 119, 0.3);
    --accent-pink-40: rgba(219, 39, 119, 0.4);
    
    --accent-cyan-05: rgba(8, 145, 178, 0.05);
    --accent-cyan-10: rgba(8, 145, 178, 0.1);
    --accent-cyan-15: rgba(8, 145, 178, 0.15);
    --accent-cyan-20: rgba(8, 145, 178, 0.2);
    --accent-cyan-30: rgba(8, 145, 178, 0.3);
    --accent-cyan-40: rgba(8, 145, 178, 0.4);
    
    --accent-green-05: rgba(5, 150, 105, 0.05);
    --accent-green-10: rgba(5, 150, 105, 0.1);
    --accent-green-15: rgba(5, 150, 105, 0.15);
    --accent-green-20: rgba(5, 150, 105, 0.2);
    --accent-green-25: rgba(5, 150, 105, 0.25);
    --accent-green-30: rgba(5, 150, 105, 0.3);
    --accent-green-40: rgba(5, 150, 105, 0.4);
    
    --accent-orange-05: rgba(234, 88, 12, 0.05);
    --accent-orange-10: rgba(234, 88, 12, 0.1);
    --accent-orange-15: rgba(234, 88, 12, 0.15);
    --accent-orange-20: rgba(234, 88, 12, 0.2);
    --accent-orange-30: rgba(234, 88, 12, 0.3);
    --accent-orange-40: rgba(234, 88, 12, 0.4);
    
    --accent-yellow-20: rgba(202, 138, 4, 0.2);
    --accent-yellow-30: rgba(202, 138, 4, 0.3);
    --accent-yellow-40: rgba(202, 138, 4, 0.4);
    
    --accent-red-20: rgba(220, 38, 38, 0.2);
    
    /* Primary accent aliases (for component compatibility) */
    --accent-primary: var(--accent-purple);
    --accent-primary-hover: #7c3aed;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    --gradient-secondary: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
    --gradient-warm: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow));
    --gradient-cool: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    
    /* Background mesh gradients - MORE VISIBLE for premium feel */
    --gradient-mesh-1: radial-gradient(at 40% 20%, rgba(139, 92, 246, 0.18) 0px, transparent 50%);
    --gradient-mesh-2: radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.12) 0px, transparent 50%);
    --gradient-mesh-3: radial-gradient(at 0% 50%, rgba(6, 182, 212, 0.12) 0px, transparent 50%);
    --gradient-mesh-4: radial-gradient(at 80% 50%, rgba(16, 185, 129, 0.10) 0px, transparent 50%);
    --gradient-mesh-5: radial-gradient(at 0% 100%, rgba(251, 146, 60, 0.12) 0px, transparent 50%);
    
    /* Borders - subtle with accent tint */
    --border-light: rgba(139, 92, 246, 0.08);
    --border-medium: rgba(139, 92, 246, 0.12);
    --border-strong: rgba(139, 92, 246, 0.18);
    --border-accent: rgba(139, 92, 246, 0.35);
    
    /* Shadows - STRONGER for premium depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(139, 92, 246, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(139, 92, 246, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10), 0 12px 40px rgba(139, 92, 246, 0.08);
    --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.12), 0 24px 60px rgba(139, 92, 246, 0.10);
    --shadow-glow-purple: 0 6px 24px rgba(139, 92, 246, 0.20), 0 12px 40px rgba(139, 92, 246, 0.12);
    --shadow-glow-pink: 0 6px 24px rgba(236, 72, 153, 0.20), 0 12px 40px rgba(236, 72, 153, 0.12);
    --shadow-glow-cyan: 0 6px 24px rgba(6, 182, 212, 0.20), 0 12px 40px rgba(6, 182, 212, 0.12);
    
    /* Glass morphism */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-blur: blur(24px);
    
    /* Component specific */
    --header-bg: #ffffff;
    --footer-bg: linear-gradient(to bottom, #fafbfc, #f3f4f6);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: rgba(0, 0, 0, 0.08);
    --input-focus-border: var(--accent-purple);
    
    /* Button styles */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: rgba(0, 0, 0, 0.2);
    --btn-secondary-text: var(--text-primary);
    
    /* Status colors */
    --success-bg: rgba(5, 150, 105, 0.1);
    --success-border: rgba(5, 150, 105, 0.2);
    --success-text: #059669;
    --warning-bg: rgba(217, 119, 6, 0.1);
    --warning-border: rgba(217, 119, 6, 0.2);
    --warning-text: #d97706;
    --error-bg: rgba(220, 38, 38, 0.1);
    --error-border: rgba(220, 38, 38, 0.2);
    --error-text: #dc2626;
    --info-bg: rgba(37, 99, 235, 0.1);
    --info-border: rgba(37, 99, 235, 0.2);
    --info-text: #2563eb;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Scrollbar */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(124, 58, 237, 0.5);
    
    /* Sidebar - Light theme */
    --sidebar-bg: rgba(255, 255, 255, 0.95);
    --sidebar-header-bg: #ffffff;
    --sidebar-border: rgba(139, 92, 246, 0.12);
    --sidebar-text: #1a1a2e;
    --sidebar-text-muted: #6b6b8a;
    --sidebar-item-hover: rgba(139, 92, 246, 0.1);
    --sidebar-item-active-bg: rgba(139, 92, 246, 0.12);
    --sidebar-item-active-border: rgba(139, 92, 246, 0.25);
    --sidebar-icon-bg: rgba(139, 92, 246, 0.05);
    --sidebar-icon-border: rgba(139, 92, 246, 0.08);
    --sidebar-toggle-border: rgba(0, 0, 0, 0.1);
    --sidebar-toggle-hover-bg: rgba(139, 92, 246, 0.1);
    
    /* Theme toggle icon - In light mode, show moon to switch to dark */
    --theme-icon-display-sun: none;
    --theme-icon-display-moon: block;
}

/* ========================================
   SMOOTH THEME TRANSITION
   ======================================== */
html {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body,
.main-content,
.card,
.navbar,
footer,
.btn,
input,
textarea,
select,
.sidebar,
.sidebar__header,
.sidebar__footer,
.sidebar__link,
.sidebar__icon {
    transition: 
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on page load to prevent flash */
.no-transition * {
    transition: none !important;
}

/* ========================================
   THEME TOGGLE BUTTON
   ======================================== */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.theme-toggle:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    transform: scale(1.05);
    box-shadow: var(--shadow-glow-purple);
}

.theme-toggle:hover .theme-icon {
    color: #ffffff;
}

.theme-icon {
    font-size: 1.2rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.theme-icon.sun {
    display: var(--theme-icon-display-sun);
}

.theme-icon.moon {
    display: var(--theme-icon-display-moon);
}

/* Icon animation on theme change */
.theme-toggle.switching .theme-icon {
    animation: iconSpin 0.5s ease;
}

@keyframes iconSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(0.8); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ========================================
   APPLY THEME VARIABLES TO COMMON ELEMENTS
   ======================================== */

/* Body */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Background mesh effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        var(--gradient-mesh-1),
        var(--gradient-mesh-2),
        var(--gradient-mesh-3),
        var(--gradient-mesh-4),
        var(--gradient-mesh-5);
    pointer-events: none;
    z-index: -1;
}

/* Cards */
.card,
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

/* Links */
a {
    color: var(--accent-purple);
}

a:hover {
    color: var(--accent-pink);
}

/* Muted text */
.text-muted {
    color: var(--text-muted) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Selection */
::selection {
    background: rgba(168, 85, 247, 0.3);
    color: var(--text-primary);
}

/* ========================================
   THEME-AWARE COMPONENT OVERRIDES
   ======================================== */

/* Bootstrap overrides for theme compatibility */
[data-theme="light"] .navbar {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .navbar-nav .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .navbar-nav .nav-link:hover {
    color: var(--accent-purple) !important;
}

[data-theme="light"] footer {
    background: var(--footer-bg) !important;
    color: var(--text-primary);
}

[data-theme="light"] footer a {
    color: var(--text-muted);
}

[data-theme="light"] footer a:hover {
    color: var(--accent-purple);
}

[data-theme="light"] .btn-outline-secondary {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-item:hover {
    background: var(--bg-tertiary);
}

[data-theme="light"] .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
}

[data-theme="light"] .table {
    color: var(--text-primary);
}

[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bg-secondary);
}

[data-theme="light"] hr {
    border-color: var(--border-light);
}

/* ========================================
   DECORATIVE ELEMENTS (Theme-aware)
   ======================================== */
.bg-decorations {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.section-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: blobFloat 20s ease-in-out infinite;
}

[data-theme="dark"] .section-blob-1 {
    width: 400px;
    height: 400px;
    background: rgba(168, 85, 247, 0.15);
    top: 10%;
    left: -5%;
    animation-delay: 0s;
}

[data-theme="dark"] .section-blob-2 {
    width: 350px;
    height: 350px;
    background: rgba(236, 72, 153, 0.12);
    top: 50%;
    right: -5%;
    animation-delay: -7s;
}

[data-theme="dark"] .section-blob-3 {
    width: 300px;
    height: 300px;
    background: rgba(6, 182, 212, 0.1);
    bottom: 10%;
    left: 30%;
    animation-delay: -14s;
}

[data-theme="light"] .section-blob-1 {
    width: 500px;
    height: 500px;
    background: rgba(139, 92, 246, 0.15);
    top: 10%;
    left: -5%;
    animation-delay: 0s;
}

[data-theme="light"] .section-blob-2 {
    width: 450px;
    height: 450px;
    background: rgba(236, 72, 153, 0.12);
    top: 50%;
    right: -5%;
    animation-delay: -7s;
}

[data-theme="light"] .section-blob-3 {
    width: 400px;
    height: 400px;
    background: rgba(6, 182, 212, 0.10);
    bottom: 10%;
    left: 30%;
    animation-delay: -14s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(15px, 15px) scale(1.02); }
}

/* ========================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Disable heavy animations on touch devices
   ======================================== */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
    /* Disable blob animations on mobile */
    .section-blob {
        animation: none !important;
        opacity: 0.3;
    }
    
    /* Reduce mesh gradient complexity */
    body::before {
        background: none !important;
    }
    
    /* Simplify background for performance */
    [data-theme="dark"] body::before {
        background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.1) 0%, transparent 60%) !important;
    }
    
    [data-theme="light"] body::before {
        background: 
            radial-gradient(ellipse at 30% 10%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 80%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 90% 30%, rgba(6, 182, 212, 0.08) 0%, transparent 50%) !important;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .section-blob {
        animation: none !important;
    }
}