/* ===== Global Orbitron Font ===== */
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

        /* ===== CSS Variables ===== */
        :root {
            --font-primary: 'Work Sans', sans-serif;
            --font-secondary: 'Orbitron', sans-serif;
            --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;

            /* Smart Code Lab Color Palette — derived from logo */
            --primary-color: #00FF00;
            --secondary-color: #0099FF;
            --tertiary-color: #00D4FF;

            /* Extended Color Palette */
            --color-accent: #00D4FF;
            --color-accent-alt: #0099FF;
            --color-text-dark: #ffffff;
            --color-text-light: rgba(255, 255, 255, 0.7);
            --color-muted-text: rgba(255, 255, 255, 0.5);
            --color-highlighted-text: #00FF00;

            /* Legacy colors (kept for compatibility) */
            --color-bg-deep: #1a0e3e;
            --color-bg-mid: #2d1b5e;
            --color-bg-light: #3d2866;
            --color-accent-glow: rgba(0, 212, 255, 0.6);
            --color-text-primary: #ffffff;
            --color-text-secondary: rgba(255, 255, 255, 0.7);
            --color-text-muted: rgba(255, 255, 255, 0.5);

            /* Layout */
            --sidebar-width: 0px;
            /* Hidden on desktop */
            --navbar-height: 70px;
            --footer-height: auto;
        }

        /* ===== Body Background ===== */
        body {
            background: linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-bg-mid) 50%, var(--color-bg-light) 100%) !important;
            color: var(--color-text-primary) !important;
            font-family: var(--font-body) !important;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ===== Layout Grid ===== */
        .app-wrapper {
            display: flex;
            min-height: 100vh;
        }

        /* Desktop: No sidebar, full-width main area */
        .main-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 0;
            width: 100%;
        }

        .main-content {
            flex: 1;
            padding-top: var(--navbar-height);
            min-height: calc(100vh - var(--navbar-height));
        }

        /* ===== Fixed Background Elements (Fixed Positioning Below Navbar) ===== */
        [class*="bg-gradient"],
        [class*="glow-accent"],
        [id*="particles"] {
            top: var(--navbar-height) !important;
        }

        /* ===== Utility: Orbitron headings ===== */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--font-primary);
        }

        /* ===== Scrollbar ===== */
        ::-webkit-scrollbar {
            width: 6px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: var(--color-accent);
            border-radius: 3px;
        }

        /* ===== Full-screen layout (no sidebar/navbar) ===== */
        .layout-fullscreen .main-area {
            margin-left: 0;
        }

        .layout-fullscreen .main-content {
            padding-top: 0;
            min-height: 100vh;
        }

        /* ===== Mobile: Show sidebar, hide navbar ===== */
        @media (max-width: 991px) {
            :root {
                --sidebar-width: 280px;
                /* Sidebar width on mobile */
            }

            .app-wrapper {
                flex-wrap: wrap;
            }

            .main-area {
                flex: 1 1 100%;
            }

            .main-content {
                padding-top: 0;
                /* No navbar on mobile, sidebar toggle is fixed */
            }
        }

        @media (max-width: 480px) {
            .main-content {
                padding-top: 0;
            }

            body {
                font-size: 14px;
            }
        }