@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

            :root {
                --accent: #22d3ee;
                --dark: #0f172a;
                --glass: rgba(15, 23, 42, 0.92);
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                min-height: 100vh;
                background: linear-gradient(135deg, #0a0f1c 0%, #1e2937 100%);
                font-family: 'Inter', system-ui, -apple-system, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 40px 20px;
                position: relative;
                overflow: hidden;
            }

            /* Subtle server grid background */
            body::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: 
                    linear-gradient(rgba(34, 211, 238, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34, 211, 238, 0.04) 1px, transparent 1px);
                background-size: 60px 60px;
                pointer-events: none;
                z-index: 0;
                animation: gridMove 25s linear infinite;
            }

            @keyframes gridMove {
                0% { background-position: 0 0; }
                100% { background-position: 60px 60px; }
            }

            .panel {
                width: 100%;
                max-width: 460px;
                background: var(--glass);
                border-radius: 24px;
                overflow: hidden;
                box-shadow: 
                    0 0 80px -15px rgba(34, 211, 238, 0.4),
                    0 35px 60px -15px rgba(0, 0, 0, 0.6);
                border: 1px solid rgba(34, 211, 238, 0.25);
                backdrop-filter: blur(16px);
                position: relative;
                z-index: 1;
            }

            header {
                background: linear-gradient(to right, #0f172a, #1e2937);
                padding: 32px 40px 28px;
                text-align: center;
                position: relative;
            }

            header::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 3px;
                background: linear-gradient(to right, transparent, var(--accent), transparent);
                border-radius: 9999px;
            }

            h1 {
                font-family: 'Space Grotesk', sans-serif;
                font-size: 2rem;
                font-weight: 600;
                letter-spacing: -0.5px;
                color: #e0f2f1;
                text-shadow: 
                    0 0 15px var(--accent),
                    0 0 30px rgba(34, 211, 238, 0.3);
                margin-bottom: 4px;
            }

            .subtitle {
                font-size: 0.95rem;
                color: #94a3b8;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                font-weight: 500;
            }

            /* Server status indicator */
            .status {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-top: 16px;
                font-size: 0.85rem;
                color: #67e8f9;
            }

            .status-dot {
                width: 10px;
                height: 10px;
                background: #67e8f9;
                border-radius: 50%;
                box-shadow: 0 0 12px #67e8f9;
                animation: pulse 2s infinite;
            }

            ul {
                list-style: none;
                padding: 12px 0;
            }

            li {
                padding: 0 8px;
            }

            li a {
                display: block;
                padding: 22px 36px;
                color: #e2e8f0;
                text-decoration: none;
                font-size: 1.15rem;
                font-weight: 500;
                border-radius: 14px;
                margin: 4px 12px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
            }

            li a::before {
                content: '';
                position: absolute;
                left: 36px;
                top: 50%;
                transform: translateY(-50%);
                width: 6px;
                height: 6px;
                background: var(--accent);
                border-radius: 50%;
                opacity: 0;
                transition: all 0.3s ease;
            }

            li a:hover {
                background: rgba(34, 211, 238, 0.12);
                color: #67e8f9;
                transform: translateX(8px);
                box-shadow: 
                    0 10px 20px -5px rgba(34, 211, 238, 0.3),
                    inset 0 0 0 1px rgba(34, 211, 238, 0.2);
            }

            li a:hover::before {
                opacity: 1;
            }

            /* Divider */
            li hr {
                margin: 12px 40px;
                border: none;
                height: 1px;
                background: linear-gradient(to right, transparent, rgba(34, 211, 238, 0.25), transparent);
            }

            /* Last item has no bottom border */
            li:last-child a {
                margin-bottom: 12px;
            }

            /* Footer bar */
            .panel-footer {
                background: rgba(15, 23, 42, 0.6);
                padding: 18px 32px;
                font-size: 0.8rem;
                color: #64748b;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid rgba(34, 211, 238, 0.15);
            }

            .panel-footer span {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .version {
                font-family: monospace;
                font-size: 0.75rem;
            }

            /* Responsive */
            @media (max-width: 480px) {
                .panel { border-radius: 18px; }
                h1 { font-size: 1.75rem; }
            }