@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');


/* =====================================================
   ENDIS - Theme System
   Educational Learning Platform
   ===================================================== */

/* Default Wine Theme */
:root,
[data-theme="wine"] {
    /* Background Colors */
    --bg-primary: #1a0a10;
    --bg-secondary: #2d1520;
    --bg-tertiary: #3d1f2d;
    --bg-card: #2d1520;
    --bg-input: #3d1f2d;
    --bg-hover: rgba(212, 100, 122, 0.1);
    --bg-header: rgba(26, 10, 16, 0.9);
    
    /* Text Colors */
    --text-primary: #f5e6ea;
    --text-secondary: #c9a8b3;
    --text-muted: #8a6070;
    
    /* Accent Colors */
    --accent-primary: #d4647a;
    --accent-secondary: #e87d92;
    --accent-tertiary: #c75b6b;
    --accent-hover: #b85568;
    --accent-bg: rgba(212, 100, 122, 0.15);
    
    /* Border Colors */
    --border-primary: rgba(212, 100, 122, 0.2);
    --border-secondary: rgba(212, 100, 122, 0.3);
    
    /* Status Colors */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.1);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    
    /* Shadow */
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #0a0a0f;
    --bg-secondary: #0f0f15;
    --bg-tertiary: #16161f;
    --bg-card: #12121a;
    --bg-input: #16161f;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(10, 10, 15, 0.8);
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #a855f7;
    --accent-hover: #4f46e5;
    --accent-bg: rgba(99, 102, 241, 0.1);
    
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.15);
    
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-input: #f8fafc;
    --bg-hover: rgba(0, 0, 0, 0.05);
    --bg-header: rgba(255, 255, 255, 0.9);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #a855f7;
    --accent-hover: #4f46e5;
    --accent-bg: rgba(99, 102, 241, 0.1);
    
    --border-primary: rgba(0, 0, 0, 0.1);
    --border-secondary: rgba(0, 0, 0, 0.15);
    
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Midnight Theme (AMOLED Black) */
[data-theme="midnight"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;
    --bg-card: #0a0a0a;
    --bg-input: #111111;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(0, 0, 0, 0.9);
    
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    --accent-primary: #a855f7;
    --accent-secondary: #c084fc;
    --accent-tertiary: #d8b4fe;
    --accent-hover: #9333ea;
    --accent-bg: rgba(168, 85, 247, 0.1);
    
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);
    
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Ocean Theme */
[data-theme="ocean"] {
    --bg-primary: #0d1b2a;
    --bg-secondary: #1b263b;
    --bg-tertiary: #233552;
    --bg-card: #162032;
    --bg-input: #1b263b;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(13, 27, 42, 0.9);
    
    --text-primary: #e0e6ed;
    --text-secondary: #8ba3c4;
    --text-muted: #5c7a9e;
    
    --accent-primary: #0ea5e9;
    --accent-secondary: #38bdf8;
    --accent-tertiary: #7dd3fc;
    --accent-hover: #0284c7;
    --accent-bg: rgba(14, 165, 233, 0.1);
    
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);
    
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Forest Theme */
[data-theme="forest"] {
    --bg-primary: #0f1a0f;
    --bg-secondary: #1a2e1a;
    --bg-tertiary: #254025;
    --bg-card: #162016;
    --bg-input: #1a2e1a;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(15, 26, 15, 0.9);
    
    --text-primary: #e8f0e8;
    --text-secondary: #9cb89c;
    --text-muted: #6b8a6b;
    
    --accent-primary: #22c55e;
    --accent-secondary: #4ade80;
    --accent-tertiary: #86efac;
    --accent-hover: #16a34a;
    --accent-bg: rgba(34, 197, 94, 0.1);
    
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);
    
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Sunset Theme */
[data-theme="sunset"] {
    --bg-primary: #1a0f1a;
    --bg-secondary: #2d1b2d;
    --bg-tertiary: #3d2840;
    --bg-card: #241524;
    --bg-input: #2d1b2d;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(26, 15, 26, 0.9);
    
    --text-primary: #f8e8f0;
    --text-secondary: #c9a3b8;
    --text-muted: #8a6b7a;
    
    --accent-primary: #f43f5e;
    --accent-secondary: #fb7185;
    --accent-tertiary: #fda4af;
    --accent-hover: #e11d48;
    --accent-bg: rgba(244, 63, 94, 0.1);
    
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);
    
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Rose Theme */
[data-theme="rose"] {
    --bg-primary: #1a0a14;
    --bg-secondary: #2d1520;
    --bg-tertiary: #3d1f2d;
    --bg-card: #240f1a;
    --bg-input: #2d1520;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(26, 10, 20, 0.9);
    
    --text-primary: #fce7f3;
    --text-secondary: #f9a8d4;
    --text-muted: #be185d;
    
    --accent-primary: #ec4899;
    --accent-secondary: #f472b6;
    --accent-tertiary: #f9a8d4;
    --accent-hover: #db2777;
    --accent-bg: rgba(236, 72, 153, 0.1);
    
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);
    
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Amber Theme */
[data-theme="amber"] {
    --bg-primary: #1a150a;
    --bg-secondary: #2d2515;
    --bg-tertiary: #40331f;
    --bg-card: #241e0f;
    --bg-input: #2d2515;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(26, 21, 10, 0.9);
    
    --text-primary: #fef3c7;
    --text-secondary: #fcd34d;
    --text-muted: #b45309;
    
    --accent-primary: #f59e0b;
    --accent-secondary: #fbbf24;
    --accent-tertiary: #fcd34d;
    --accent-hover: #d97706;
    --accent-bg: rgba(245, 158, 11, 0.1);
    
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);
    
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Cyan Theme */
[data-theme="cyan"] {
    --bg-primary: #0a1a1a;
    --bg-secondary: #152d2d;
    --bg-tertiary: #1f4040;
    --bg-card: #0f2424;
    --bg-input: #152d2d;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(10, 26, 26, 0.9);

    --text-primary: #e7f8f8;
    --text-secondary: #67e8f9;
    --text-muted: #0891b2;

    --accent-primary: #06b6d4;
    --accent-secondary: #22d3ee;
    --accent-tertiary: #67e8f9;
    --accent-hover: #0891b2;
    --accent-bg: rgba(6, 182, 212, 0.1);

    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Purple Theme */
[data-theme="purple"] {
    --bg-primary: #0f0a1a;
    --bg-secondary: #1a1525;
    --bg-tertiary: #261f35;
    --bg-card: #14101f;
    --bg-input: #1a1525;
    --bg-hover: rgba(147, 51, 234, 0.1);
    --bg-header: rgba(15, 10, 26, 0.9);

    --text-primary: #f3e8ff;
    --text-secondary: #c4b5fd;
    --text-muted: #8b5cf6;

    --accent-primary: #9333ea;
    --accent-secondary: #a855f7;
    --accent-tertiary: #c084fc;
    --accent-hover: #7c3aed;
    --accent-bg: rgba(147, 51, 234, 0.15);

    --border-primary: rgba(147, 51, 234, 0.2);
    --border-secondary: rgba(147, 51, 234, 0.3);

    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Orange Theme */
[data-theme="orange"] {
    --bg-primary: #1a0f0a;
    --bg-secondary: #2d1a10;
    --bg-tertiary: #402515;
    --bg-card: #241408;
    --bg-input: #2d1a10;
    --bg-hover: rgba(249, 115, 22, 0.1);
    --bg-header: rgba(26, 15, 10, 0.9);

    --text-primary: #fff7ed;
    --text-secondary: #fdba74;
    --text-muted: #ea580c;

    --accent-primary: #f97316;
    --accent-secondary: #fb923c;
    --accent-tertiary: #fdba74;
    --accent-hover: #ea580c;
    --accent-bg: rgba(249, 115, 22, 0.15);

    --border-primary: rgba(249, 115, 22, 0.2);
    --border-secondary: rgba(249, 115, 22, 0.3);

    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Lavender Theme */
[data-theme="lavender"] {
    --bg-primary: #100a14;
    --bg-secondary: #1a1420;
    --bg-tertiary: #251e2d;
    --bg-card: #150f1a;
    --bg-input: #1a1420;
    --bg-hover: rgba(196, 181, 253, 0.1);
    --bg-header: rgba(16, 10, 20, 0.9);

    --text-primary: #f5f3ff;
    --text-secondary: #ddd6fe;
    --text-muted: #a78bfa;

    --accent-primary: #a78bfa;
    --accent-secondary: #c4b5fd;
    --accent-tertiary: #ddd6fe;
    --accent-hover: #8b5cf6;
    --accent-bg: rgba(167, 139, 250, 0.1);

    --border-primary: rgba(167, 139, 250, 0.15);
    --border-secondary: rgba(167, 139, 250, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Rose Gold Theme */
[data-theme="rosegold"] {
    --bg-primary: #1a1210;
    --bg-secondary: #2d1f1a;
    --bg-tertiary: #402b24;
    --bg-card: #241815;
    --bg-input: #2d1f1a;
    --bg-hover: rgba(251, 207, 232, 0.1);
    --bg-header: rgba(26, 18, 16, 0.9);

    --text-primary: #fdf2f8;
    --text-secondary: #fbcfe8;
    --text-muted: #f472b6;

    --accent-primary: #f472b6;
    --accent-secondary: #f9a8d4;
    --accent-tertiary: #fbcfe8;
    --accent-hover: #ec4899;
    --accent-bg: rgba(244, 114, 182, 0.1);

    --border-primary: rgba(244, 114, 182, 0.15);
    --border-secondary: rgba(244, 114, 182, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Mint Theme */
[data-theme="mint"] {
    --bg-primary: #0a1410;
    --bg-secondary: #142420;
    --bg-tertiary: #1f352e;
    --bg-card: #0f1a15;
    --bg-input: #142420;
    --bg-hover: rgba(52, 211, 153, 0.1);
    --bg-header: rgba(10, 20, 16, 0.9);

    --text-primary: #ecfdf5;
    --text-secondary: #a7f3d0;
    --text-muted: #10b981;

    --accent-primary: #10b981;
    --accent-secondary: #34d399;
    --accent-tertiary: #6ee7b7;
    --accent-hover: #059669;
    --accent-bg: rgba(16, 185, 129, 0.1);

    --border-primary: rgba(16, 185, 129, 0.15);
    --border-secondary: rgba(16, 185, 129, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Cherry Theme */
[data-theme="cherry"] {
    --bg-primary: #1a0808;
    --bg-secondary: #2d1010;
    --bg-tertiary: #401818;
    --bg-card: #240c0c;
    --bg-input: #2d1010;
    --bg-hover: rgba(239, 68, 68, 0.1);
    --bg-header: rgba(26, 8, 8, 0.9);

    --text-primary: #fef2f2;
    --text-secondary: #fecaca;
    --text-muted: #f87171;

    --accent-primary: #ef4444;
    --accent-secondary: #f87171;
    --accent-tertiary: #fca5a5;
    --accent-hover: #dc2626;
    --accent-bg: rgba(239, 68, 68, 0.1);

    --border-primary: rgba(239, 68, 68, 0.15);
    --border-secondary: rgba(239, 68, 68, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Gold Theme */
[data-theme="gold"] {
    --bg-primary: #1a1608;
    --bg-secondary: #2d2610;
    --bg-tertiary: #403618;
    --bg-card: #241e0c;
    --bg-input: #2d2610;
    --bg-hover: rgba(234, 179, 8, 0.1);
    --bg-header: rgba(26, 22, 8, 0.9);

    --text-primary: #fefce8;
    --text-secondary: #fef08a;
    --text-muted: #eab308;

    --accent-primary: #eab308;
    --accent-secondary: #facc15;
    --accent-tertiary: #fde047;
    --accent-hover: #ca8a04;
    --accent-bg: rgba(234, 179, 8, 0.1);

    --border-primary: rgba(234, 179, 8, 0.15);
    --border-secondary: rgba(234, 179, 8, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Steel Theme */
[data-theme="steel"] {
    --bg-primary: #0f1012;
    --bg-secondary: #1a1c20;
    --bg-tertiary: #25282e;
    --bg-card: #141618;
    --bg-input: #1a1c20;
    --bg-hover: rgba(148, 163, 184, 0.1);
    --bg-header: rgba(15, 16, 18, 0.9);

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;

    --accent-primary: #64748b;
    --accent-secondary: #94a3b8;
    --accent-tertiary: #cbd5e1;
    --accent-hover: #475569;
    --accent-bg: rgba(100, 116, 139, 0.1);

    --border-primary: rgba(100, 116, 139, 0.15);
    --border-secondary: rgba(100, 116, 139, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Neon Theme */
[data-theme="neon"] {
    --bg-primary: #050510;
    --bg-secondary: #0a0a18;
    --bg-tertiary: #101025;
    --bg-card: #080815;
    --bg-input: #0a0a18;
    --bg-hover: rgba(0, 255, 136, 0.1);
    --bg-header: rgba(5, 5, 16, 0.95);

    --text-primary: #f0fff4;
    --text-secondary: #00ff88;
    --text-muted: #00cc6a;

    --accent-primary: #00ff88;
    --accent-secondary: #00ffcc;
    --accent-tertiary: #88ffcc;
    --accent-hover: #00dd77;
    --accent-bg: rgba(0, 255, 136, 0.1);

    --border-primary: rgba(0, 255, 136, 0.2);
    --border-secondary: rgba(0, 255, 136, 0.35);

    --shadow-color: rgba(0, 255, 136, 0.2);
}

/* Coral Theme */
[data-theme="coral"] {
    --bg-primary: #1a0f0d;
    --bg-secondary: #2d1a16;
    --bg-tertiary: #40251f;
    --bg-card: #241410;
    --bg-input: #2d1a16;
    --bg-hover: rgba(251, 146, 60, 0.1);
    --bg-header: rgba(26, 15, 13, 0.9);

    --text-primary: #fff7ed;
    --text-secondary: #fed7aa;
    --text-muted: #fb923c;

    --accent-primary: #fb923c;
    --accent-secondary: #fdba74;
    --accent-tertiary: #fed7aa;
    --accent-hover: #f97316;
    --accent-bg: rgba(251, 146, 60, 0.1);

    --border-primary: rgba(251, 146, 60, 0.15);
    --border-secondary: rgba(251, 146, 60, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Grape Theme */
[data-theme="grape"] {
    --bg-primary: #12081a;
    --bg-secondary: #1f1028;
    --bg-tertiary: #2d1838;
    --bg-card: #180c20;
    --bg-input: #1f1028;
    --bg-hover: rgba(192, 132, 252, 0.1);
    --bg-header: rgba(18, 8, 26, 0.9);

    --text-primary: #faf5ff;
    --text-secondary: #e9d5ff;
    --text-muted: #c084fc;

    --accent-primary: #c084fc;
    --accent-secondary: #d8b4fe;
    --accent-tertiary: #e9d5ff;
    --accent-hover: #a855f7;
    --accent-bg: rgba(192, 132, 252, 0.1);

    --border-primary: rgba(192, 132, 252, 0.15);
    --border-secondary: rgba(192, 132, 252, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Azure Theme */
[data-theme="azure"] {
    --bg-primary: #0a0f1a;
    --bg-secondary: #101825;
    --bg-tertiary: #182235;
    --bg-card: #0d1420;
    --bg-input: #101825;
    --bg-hover: rgba(59, 130, 246, 0.1);
    --bg-header: rgba(10, 15, 26, 0.9);

    --text-primary: #eff6ff;
    --text-secondary: #bfdbfe;
    --text-muted: #3b82f6;

    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-tertiary: #93c5fd;
    --accent-hover: #2563eb;
    --accent-bg: rgba(59, 130, 246, 0.1);

    --border-primary: rgba(59, 130, 246, 0.15);
    --border-secondary: rgba(59, 130, 246, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Slate Theme */
[data-theme="slate"] {
    --bg-primary: #0f1114;
    --bg-secondary: #181b20;
    --bg-tertiary: #22262e;
    --bg-card: #141618;
    --bg-input: #181b20;
    --bg-hover: rgba(148, 163, 184, 0.1);
    --bg-header: rgba(15, 17, 20, 0.9);

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --accent-primary: #94a3b8;
    --accent-secondary: #cbd5e1;
    --accent-tertiary: #e2e8f0;
    --accent-hover: #64748b;
    --accent-bg: rgba(148, 163, 184, 0.1);

    --border-primary: rgba(148, 163, 184, 0.12);
    --border-secondary: rgba(148, 163, 184, 0.2);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Emerald Theme */
[data-theme="emerald"] {
    --bg-primary: #041210;
    --bg-secondary: #0a1f1a;
    --bg-tertiary: #102d26;
    --bg-card: #071815;
    --bg-input: #0a1f1a;
    --bg-hover: rgba(16, 185, 129, 0.1);
    --bg-header: rgba(4, 18, 16, 0.9);

    --text-primary: #ecfdf5;
    --text-secondary: #a7f3d0;
    --text-muted: #34d399;

    --accent-primary: #10b981;
    --accent-secondary: #34d399;
    --accent-tertiary: #6ee7b7;
    --accent-hover: #059669;
    --accent-bg: rgba(16, 185, 129, 0.1);

    --border-primary: rgba(16, 185, 129, 0.15);
    --border-secondary: rgba(16, 185, 129, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Crimson Theme */
[data-theme="crimson"] {
    --bg-primary: #180808;
    --bg-secondary: #280f0f;
    --bg-tertiary: #381818;
    --bg-card: #200c0c;
    --bg-input: #280f0f;
    --bg-hover: rgba(220, 38, 38, 0.1);
    --bg-header: rgba(24, 8, 8, 0.9);

    --text-primary: #fef2f2;
    --text-secondary: #fecaca;
    --text-muted: #f87171;

    --accent-primary: #dc2626;
    --accent-secondary: #ef4444;
    --accent-tertiary: #f87171;
    --accent-hover: #b91c1c;
    --accent-bg: rgba(220, 38, 38, 0.1);

    --border-primary: rgba(220, 38, 38, 0.15);
    --border-secondary: rgba(220, 38, 38, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* Obsidian Theme */
[data-theme="obsidian"] {
    --bg-primary: #030303;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --bg-card: #080808;
    --bg-input: #0a0a0a;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(3, 3, 3, 0.95);

    --text-primary: #fafafa;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;

    --accent-primary: #525252;
    --accent-secondary: #737373;
    --accent-tertiary: #a3a3a3;
    --accent-hover: #404040;
    --accent-bg: rgba(82, 82, 82, 0.15);

    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);

    --shadow-color: rgba(0, 0, 0, 0.6);
}

/* Cyber Theme */
[data-theme="cyber"] {
    --bg-primary: #050814;
    --bg-secondary: #0a1020;
    --bg-tertiary: #10182d;
    --bg-card: #080c1a;
    --bg-input: #0a1020;
    --bg-hover: rgba(6, 182, 212, 0.1);
    --bg-header: rgba(5, 8, 20, 0.95);

    --text-primary: #f0fdfa;
    --text-secondary: #5eead4;
    --text-muted: #14b8a6;

    --accent-primary: #06b6d4;
    --accent-secondary: #22d3ee;
    --accent-tertiary: #67e8f9;
    --accent-hover: #0891b2;
    --accent-bg: rgba(6, 182, 212, 0.15);

    --border-primary: rgba(6, 182, 212, 0.2);
    --border-secondary: rgba(6, 182, 212, 0.35);

    --shadow-color: rgba(6, 182, 212, 0.15);
}

/* Theme Transition */
body,
.main-header,
.modal-content,
.sidebar,
.feature-card,
.quick-link,
.btn,
input,
select {
    transition: 
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.2s ease;
}

/* Gradient text for all themes */
.gradient-text {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Discord Button Themed Styles */
.quick-link[data-url*="discord"],
.app-card[data-url*="discord"] .app-icon,
.discord-btn {
    transition: all 0.3s ease;
}

.quick-link[data-url*="discord"]:hover,
.discord-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px var(--accent-bg);
}

/* Footer Discord link themed */
.footer-links a[href*="discord"] {
    color: var(--accent-primary);
    transition: color 0.2s ease;
}

.footer-links a[href*="discord"]:hover {
    color: var(--accent-secondary);
}

/* Roblox Icon Hue Shift per Theme */
.roblox-icon,
.themed-icon.roblox-icon,
.nav-link img[src*="rb.png"] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* Default Wine Theme - rose/pink hue (330deg) */
:root .roblox-icon,
:root .nav-link img[src*="rb.png"],
[data-theme="wine"] .roblox-icon,
[data-theme="wine"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.1) sepia(1) saturate(3) hue-rotate(310deg);
}

/* Dark Theme - indigo/purple hue (240deg) */
[data-theme="dark"] .roblox-icon,
[data-theme="dark"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.2) sepia(1) saturate(2.5) hue-rotate(220deg);
}

/* Light Theme - indigo/purple hue (240deg) */
[data-theme="light"] .roblox-icon,
[data-theme="light"] .nav-link img[src*="rb.png"] {
    filter: brightness(0.9) sepia(1) saturate(2.5) hue-rotate(220deg);
}

/* Midnight Theme - purple hue (270deg) */
[data-theme="midnight"] .roblox-icon,
[data-theme="midnight"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.3) sepia(1) saturate(3) hue-rotate(260deg);
}

/* Ocean Theme - cyan/blue hue (180deg) */
[data-theme="ocean"] .roblox-icon,
[data-theme="ocean"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.2) sepia(1) saturate(3) hue-rotate(160deg);
}

/* Forest Theme - green hue (90deg) */
[data-theme="forest"] .roblox-icon,
[data-theme="forest"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.2) sepia(1) saturate(3) hue-rotate(80deg);
}

/* Sunset Theme - red/pink hue (350deg) */
[data-theme="sunset"] .roblox-icon,
[data-theme="sunset"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.1) sepia(1) saturate(3) hue-rotate(330deg);
}

/* Rose Theme - pink hue (320deg) */
[data-theme="rose"] .roblox-icon,
[data-theme="rose"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.1) sepia(1) saturate(3) hue-rotate(300deg);
}

/* Amber Theme - orange/amber hue (30deg) */
[data-theme="amber"] .roblox-icon,
[data-theme="amber"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.1) sepia(1) saturate(3) hue-rotate(10deg);
}

/* Cyan Theme - cyan hue (170deg) */
[data-theme="cyan"] .roblox-icon,
[data-theme="cyan"] .nav-link img[src*="rb.png"] {
    filter: brightness(1.2) sepia(1) saturate(3) hue-rotate(150deg);
}

/* =====================================================
   Global Scrollbar Styling
   ===================================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 5px;
    border: 2px solid var(--bg-secondary);
}

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

::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-secondary);
}

/* Thin scrollbar variant for nested elements */
.thin-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    border: 1px solid var(--bg-secondary);
}

/* Hidden scrollbar but still scrollable */
.hidden-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.hidden-scrollbar {
    scrollbar-width: none;
}

/* =====================================================
   AD CONTAINER STYLES
   ===================================================== */

/* Ad banner containers */
.ad-banner-desktop,
.ad-banner-mobile {
    overflow: hidden;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide broken/empty ad iframes */
.ad-banner-desktop iframe:not([src]),
.ad-banner-mobile iframe:not([src]),
.ad-banner-desktop iframe[src="about:blank"],
.ad-banner-mobile iframe[src="about:blank"] {
    display: none !important;
}

/* Responsive ad visibility */
@media (max-width: 768px) {
    .ad-banner-desktop {
        display: none !important;
    }
    .ad-banner-mobile {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    .ad-banner-desktop {
        display: flex !important;
    }
    .ad-banner-mobile {
        display: none !important;
    }
}

/* Hide ad containers that fail to load content */
.ad-banner-desktop:empty,
.ad-banner-mobile:empty {
    display: none !important;
}