.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-shell { width: min(100% - 28px, 430px); position: relative; z-index: 1; }
.login-card { position: relative; padding: 30px; overflow: hidden; }
.login-card::before { content: "SECURE SHELL // AUTH REQUIRED"; position: absolute; top: 12px; right: 15px; color: rgba(87,255,168,.28); font-size: 7px; letter-spacing: .13em; }
.login-card::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 220px; height: 220px; border: 1px solid rgba(87,255,168,.08); border-radius: 50%; box-shadow: 0 0 0 32px rgba(87,255,168,.015); pointer-events: none; }
.login-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.login-brand h1 { margin: 2px 0 0; font-size: 18px; }
.login-copy { padding: 26px 0 18px; }
.login-copy h2 { margin: 5px 0 8px; font-size: 25px; }
.login-copy p { margin-bottom: 0; }
.login-form { position: relative; z-index: 1; display: grid; gap: 9px; }
.login-form label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.login-form input { width: 100%; }
.login-form .button { justify-content: center; margin-top: 6px; min-height: 44px; }
.login-form .form-error { margin: 1px 0; }
@media (max-width: 500px) { .login-card { padding: 22px; } }