/* =========================================================
   LOGIN
========================================================= */

.login {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
    padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px);
    background:
        radial-gradient(700px 420px at 85% -5%, rgba(var(--rose-rgb), 0.32), transparent 62%),
        radial-gradient(640px 420px at -5% 105%, rgba(var(--gold-rgb), 0.28), transparent 60%),
        linear-gradient(165deg, var(--hero1) 0%, var(--hero2) 55%, var(--hero3) 100%);
}
.login[hidden] { display: none; }
.login-card {
    width: 100%; max-width: 410px; padding: 34px 28px 30px; border-radius: 30px;
    background: rgba(var(--card-rgb), 0.98); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: pageEnter 0.7s var(--ease) both;
}
.login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.login-brand .brand-main { font-size: 34px; }
.login-brand .brand-sub { width: 100%; max-width: 230px; }
.login-brand .brand-sub em { font-size: 14px; }
.login-welcome { margin-top: 20px; text-align: center; }
.login-welcome h1 { font-family: var(--font-display); font-weight: 400; font-size: 25px; }
.login-welcome p { margin-top: 5px; font-size: 14px; color: var(--muted); }
.login-form { margin-top: 24px; }
.login-error {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px;
    border-radius: 14px; background: var(--danger-soft); color: var(--danger-ink); font-size: 14px; font-weight: 550;
}
.login-error[hidden] { display: none; }
.login-error .icon { margin-top: 1px; }
.login-foot { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--muted); }
.login-foot b { color: var(--rose-deep); font-weight: 600; }
.shake { animation: shake 0.42s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

.login-brand .brand { flex-direction: column; gap: 12px; }
.login-brand .brand-text { align-items: center; }

.login-forgot { display: block; margin: 14px auto 0; background: none; border: 0; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--rose-deep); cursor: pointer; border-radius: 10px; }
.login-forgot:hover, .login-forgot:focus-visible { background: rgba(0, 0, 0, 0.05); outline: none; }