: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;
        }
        :root {
            --primary-rgb: 16, 185, 129;
            --primary: rgb(var(--primary-rgb));
            --primary-dark: var(--primary);
            --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;
            --glass-border: rgba(var(--text-rgb), 0.08);
            --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;
            --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-calc: color-mix(in srgb, var(--surface, #ffffff) 90%, var(--primary, #111827) 10%);
            --footer-text-light: #111827;
            --footer-text-dark: #ffffff;
            --footer-bg: var(--footer-bg-calc);
            --footer-text: #ffffff;
            --footer-text-rgb: 255, 255, 255;
            --footer-accent: #c4b5fd;
            --footer-accent-rgb: 196, 181, 253;
            --bs-primary: var(--primary);
            --bs-primary-rgb: var(--primary-rgb);
            --bs-link-color: var(--primary);
            --bs-link-hover-color: var(--primary-dark);
            --bs-body-bg: var(--bg);
            --bs-body-color: var(--text);
            --bs-border-color: var(--border);
            --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);
            --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;
        }
