/* Interface desktop do login; a experiência app está em app.css. */
.login-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(32px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 12% 12%, var(--c-glow), var(--c-clear) 55%), radial-gradient(ellipse at 88% 84%, var(--c-glow-soft), var(--c-clear) 50%), linear-gradient(145deg, var(--n-150), var(--n-50)); }
.login-card { width: 100%; max-width: 420px; padding: 32px 34px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 22px; box-shadow: var(--shadow-card); }
.brand { display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.brand img { display: block; width: 218px; max-width: 100%; height: auto; }
.card-heading { text-align: center; margin-bottom: 30px; }
.card-heading h1 { color: var(--n-800); font-size: 21px; font-weight: 600; letter-spacing: -.55px; line-height: 1.35; margin: 0 0 8px; overflow-wrap: anywhere; }
.card-heading p { font-size: 14px; color: var(--c-muted); line-height: 1.6; margin: 0; }
.field { margin-bottom: 20px; }
.login-form .btn-primary { margin-top: 26px; }
.login-footer { margin-top: 26px; font-size: 12px; color: var(--c-muted); text-align: center; }
.login-footer a { color: var(--n-800); font-weight: 600; text-decoration: none; }
.login-footer a:hover { color: var(--c-accent); text-decoration: underline; }
@media (max-width: 480px) { .login-page { padding-left: 16px; padding-right: 16px; } .login-card { padding: 26px 24px; border-radius: 20px; } .brand img { width: 208px; } }
@media (max-height: 650px) { .login-page { justify-content: flex-start; } }
.login-card-wide { max-width: 580px; }
.login-card-wide .card-heading { text-align: left; }