/* Prevent FOUC: Set initial dark background before Tailwind loads */
        html.dark, html.dark body {
            background-color: #050505 !important;
            color: #e2e8f0 !important;
        }
        html:not(.dark), html:not(.dark) body {
            background-color: #f8fafc !important;
            color: #334155 !important;
        }

body {
            background-color: #f8fafc;
            color: #334155;
            transition: background-color 0.3s, color 0.3s;
        }
        .panel {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .dark body {
            background-color: #050505;
            background-image:
                radial-gradient(at 0% 0%, rgba(176, 38, 255, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(0, 242, 254, 0.1) 0px, transparent 50%);
            background-attachment: fixed;
            color: #e2e8f0;
            font-family: 'Space Grotesk', sans-serif;
        }
        .dark .panel {
            background: rgba(15, 15, 19, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        }