:root { --bg: #04060d; --text: #e7edff; --muted: #95a1c3; --dim: #5d688a; --cyan: #3be8ff; --violet: #a274ff; --green: #2ff5a6; --red: #ff5a78; --border: rgba(122, 162, 255, 0.16); color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: grid; place-items: center; padding: 16px; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(40% 45% at 25% 20%, rgba(59, 232, 255, 0.18), transparent 70%), radial-gradient(40% 45% at 80% 75%, rgba(162, 116, 255, 0.2), transparent 70%); pointer-events: none; z-index: -1; }
body::after { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(122, 162, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 162, 255, 0.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 70%); pointer-events: none; z-index: -1; }
main { width: 100%; max-width: 400px; }
.panel { position: relative; padding: 34px 28px 26px; border-radius: 22px; background: rgba(13, 19, 38, 0.7); border: 1px solid var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); text-align: center; }
.panel::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); }
.logo { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; background: conic-gradient(from 210deg, var(--cyan), var(--violet), var(--green), var(--cyan)); box-shadow: 0 0 34px rgba(59, 232, 255, 0.45); position: relative; animation: float 4s ease-in-out infinite; }
.logo::after { content: ""; position: absolute; inset: 11px; border-radius: 8px; background: var(--bg); }
@keyframes float { 50% { transform: translateY(-4px); box-shadow: 0 8px 40px rgba(162, 116, 255, 0.5); } }
h1 { margin: 0; font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; }
.sub { margin: 6px 0 24px; color: var(--muted); font-size: 14px; }
label { display: block; text-align: left; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
input[type=password] { width: 100%; padding: 13px 14px; font: 500 16px "JetBrains Mono", ui-monospace, monospace; color: var(--text); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
input[type=password]:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(59, 232, 255, 0.18); }
.hidden-user { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
button { margin-top: 14px; width: 100%; padding: 13px; font: 700 15px inherit; font-family: inherit; letter-spacing: 0.08em; color: #04060d; background: linear-gradient(90deg, var(--cyan), var(--violet)); border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(59, 232, 255, 0.6); }
button:hover { filter: brightness(1.08); }
button:disabled, input:disabled { opacity: 0.5; cursor: not-allowed; }
.msg { min-height: 20px; margin: 14px 0 0; color: var(--red); font-size: 14px; }
.fine { margin: 10px 0 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } }