.login-page { display: grid; place-items: center; padding: 24px; min-height: 100dvh; }
.login-card { width: min(100%, 420px); padding: 36px; background: var(--bg-main); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 16px 60px #1736670d; }
.login-brand { color: var(--brand); font-size: 20px; font-weight: 700; margin-bottom: 28px; }
.login-card h1 { font-size: 24px; }
.login-description, .login-help { color: var(--text-2); }
.login-description { margin-bottom: 28px; }
.login-card label { display: block; margin: 16px 0 6px; }
.login-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.login-card button { width: 100%; padding: 12px; margin-top: 24px; background: var(--brand); color: white; border: 0; border-radius: 8px; }
.login-card button:disabled { opacity: .65; cursor: wait; }
#login-error { color: var(--danger); margin-top: 12px; }
.login-help { font-size: 12px; margin: 24px 0 0; }
@media (max-width: 480px) { .login-card { padding: 28px 22px; } }