.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #e1ebe4 0, transparent 35%), var(--paper); }
.login-card { width: min(430px, 100%); padding: 42px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 42px; font: 700 19px Manrope; }
.login-card h1 { margin: 7px 0 10px; font: 700 34px Manrope; letter-spacing: -.035em; }
.login-copy { margin: 0 0 28px; color: var(--muted); line-height: 1.55; }
.login-form { display: grid; gap: 20px; }
.login-form .button { width: 100%; }
.login-error { margin-bottom: 20px; padding: 11px 13px; color: #8d3029; background: #fae9e6; border-radius: 8px; font-size: 14px; }
.logout-form { display: inline-flex; }
.logout-button { border: 0; background: transparent; cursor: pointer; }
@media (max-width: 500px) { .login-card { padding: 30px 24px; } }