/* =============================================
           CSS VARIABLES
           ============================================= */
        :root {
            --bg-primary: #0D0D0F;
            --bg-secondary: #151518;
            --bg-tertiary: #1A1A1F;
            --bg-card: rgba(21, 21, 24, 0.85);
            --border-color: #2A2A30;
            --border-subtle: rgba(255, 255, 255, 0.06);
            --text-primary: #FFFFFF;
            --text-secondary: #A0A0A8;
            --text-tertiary: #6B7280;
            --accent-primary: #7C3AED;
            --accent-secondary: #6366F1;
            --accent-pink: #EC4899;
            --success: #22C55E;
            --warning: #F59E0B;
            --error: #EF4444;
            --gradient-primary: linear-gradient(135deg, #7C3AED, #6366F1, #EC4899);
            --shadow-glow: 0 0 60px rgba(124, 58, 237, 0.15);
            --transition: cubic-bezier(0.4, 0, 0.2, 1);
            --scrollbar-track: #1a1a1a;
            --scrollbar-thumb: #333;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #A855F7 50%, #D946EF 100%);
            --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
        }

        ::-webkit-scrollbar {
    width: 5px;
    height: 8px;}

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

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


        [data-theme="light"] {
            --bg-primary: #F8F9FA;
            --bg-secondary: #FFFFFF;
            --bg-tertiary: #F3F4F6;
            --bg-card: rgba(255, 255, 255, 0.9);
            --border-color: #E5E7EB;
            --border-subtle: rgba(0, 0, 0, 0.06);
            --text-primary: #1F2937;
            --text-secondary: #6B7280;
            --text-tertiary: #9CA3AF;
        }




        /* =============================================
           ANIMATED BACKGROUND
           ============================================= */



.hero-ring {
            position: fixed;
            width: 800px;
            height: 800px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
            top: -400px;
            right: -400px;
            z-index: 0;
            animation: pulse-ring 8s ease-in-out infinite;
            pointer-events: none;
        }

        .hero-ring2 {
            position: fixed;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
            bottom: -300px;
            left: -300px;
            z-index: 0;
            animation: pulse-ring 10s ease-in-out infinite reverse;
            pointer-events: none;
        }

        @keyframes pulse-ring {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        .hero-ring,
 .hero-ring2 {
    position: fixed;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hero-ring {
    bottom: -200px;
    left: 20px;
    width: 500px;
    height: 500px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.25;
}

.hero-ring2 {
    top: -200px;
    right: -120px;
    width: 500px;
    height: 500px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.25;
}

/* Light theme decorative elements */
body.light-theme .hero-ring,
body.light-theme .hero-ring2 {
    border-color: rgba(139, 92, 246, 0.15);
    opacity: 0.3;
}

       /* =============================================
           ANIMATED BACKGROUND END
           ========================================*/

       .page-header {
            position: sticky;
            top: 0;
            z-index: 100;
            height: 64px;
            backdrop-filter: blur(4px);
            border-bottom: 1px solid var(--border-subtle);
            padding: 5px 6%;
               max-width: 100%;
        }

        [data-theme="light"] .page-header {
            background: rgba(255, 255, 255, 0.0);
        }