:root { --main-font: 'Inter', sans-serif; }
        * { font-family: var(--main-font) !important; box-sizing: border-box; }
        :is(.bi,[class^="bi-"],[class*=" bi-"],.flag-icon,.fa,.fas,.far,.fab) {
            font-family: "bootstrap-icons", "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
        }
        body {
            background: var(--bg); color: var(--text); font-family: var(--main-font);
            display: flex; flex-direction: column; min-height: 100vh;
            transition: background-color 0.3s ease, color 0.3s ease; margin: 0; padding: 0; overflow-x: hidden;
        }
        :root {
            --primary-rgb: 16, 185, 129;
            --primary: rgb(var(--primary-rgb));
            --primary-dark: #444444;
            --primary-glow: rgba(var(--primary-rgb), 0.3);
            --btn-text: #ffffff;
            --bg-rgb: 245, 243, 255;
            --bg: rgb(var(--bg-rgb));
            --surface-rgb: 255, 255, 255;
            --surface: rgb(var(--surface-rgb));
            --surface-glass: rgba(var(--surface-rgb), 0.9);
            --surface-2: #f8fafc;
            --text-rgb: 15, 23, 42;
            --text: rgb(var(--text-rgb));
            --text-muted: #64748b;
            --border: #dfdde8;
            --footer-bg-calc: color-mix(in srgb, var(--surface, #ffffff) 90%, var(--primary, #111827) 10%);
            --footer-text-light: #111827;
            --footer-text-dark: #ffffff;
            --footer-text-muted-light: rgba(17, 24, 39, 0.7);
            --footer-text-muted-dark: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(var(--text-rgb), 0.08);
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
            --dark-bg-rgb: 18, 10, 32;
            --dark-surface-rgb: 36, 27, 54;
            --dark-surface-2: #3a324a;
            --dark-text-rgb: 248, 250, 252;
            --dark-border: #544d62;
            --header-bg: #1e1b4b;
            --header-text: #e2e8f0;
            --top-bar-bg: color-mix(in srgb, var(--bg, #0f172a) 88%, var(--primary, #111827) 12%);
            --top-bar-text: #ffffff;
            --marquee-bg: #0c0615;
            --marquee-text: #c4b5fd;
            --footer-bg: var(--footer-bg-calc);
            --footer-text: #ffffff;
            --footer-text-rgb: 255, 255, 255;
            --footer-accent: #c4b5fd;
            --footer-accent-rgb: 196, 181, 253;
            --accent-green: #10b981;
            --accent-amber: #f59e0b;
            --accent-red: #ef4444;
            --bs-primary: var(--primary);
            --bs-primary-rgb: var(--primary-rgb);
            --bs-body-bg: var(--bg);
            --bs-body-color: var(--text);
            --bs-link-color: var(--primary);
            --bs-link-hover-color: var(--primary-dark);
            --bs-border-color: var(--border);
            --bs-secondary-color: var(--text-muted);
            --bs-secondary-rgb: 108, 117, 125;
            --bs-primary-bg-subtle: rgba(var(--primary-rgb), .14);
            --bs-primary-border-subtle: rgba(var(--primary-rgb), .35);
            --bs-primary-text-emphasis: var(--primary);
        }
                :root { --top-bar-bg: #0c0615 !important; }
                        :root { --footer-bg-calc: #0c0615 !important; }
                [data-theme="dark"] {
            --bg: rgb(var(--dark-bg-rgb));
            --surface: rgba(var(--dark-surface-rgb), 0.7);
            --surface-glass: rgba(var(--dark-surface-rgb), 0.6);
            --surface-2: var(--dark-surface-2);
            --text: rgb(var(--dark-text-rgb));
            --text-muted: #9c98a5;
            --border: var(--dark-border);
            --glass-border: rgba(255, 255, 255, 0.08);
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
            --card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
            --primary-glow: rgba(var(--primary-rgb), 0.4);
            --theme-icon-filter: invert(1) grayscale(1) brightness(2);
            --footer-bg: var(--surface);
            --footer-text: #ffffff;
            --footer-text-rgb: 255, 255, 255;
        }
        [data-theme="light"] {
            --top-bar-bg: var(--bg) !important;
            --top-bar-text: var(--text) !important;
        }
