/* Login page. Tokens only; shared pieces (.input, .btn, .banner, .field) come from components.css. */
body.login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    padding: calc(var(--sp-6) + var(--safe-top)) var(--sp-6) calc(var(--sp-6) + var(--safe-bottom));
}
.login__main { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--sp-6); }
.login__brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.login__logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-xl); background: var(--accent); color: var(--on-accent); font-size: var(--fs-6); }
.login__title { margin: 0; font-size: var(--fs-7); font-weight: 700; letter-spacing: -.02em; }
.login__sub { margin: 0; font-size: var(--fs-4); color: var(--text-2); }
.login__note { margin: 0; text-align: center; font-size: var(--fs-3); color: var(--text-3); }
.login__powered { margin: 0; font-size: var(--fs-2); color: var(--text-3); }