body.login {
    max-width: none;
    padding: 0;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--level-1) 55%, var(--background)), transparent 55%),
        radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--level-6) 55%, var(--background)), transparent 55%),
        var(--background);
    background-attachment: fixed;
}
body.login main { display: flex; }
.login-stage { flex: 1; display: grid; place-items: center; padding: 1rem; }
.login-toggle { position: fixed; top: 1rem; right: 1rem; }
.login-card {
    width: min(380px, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    background: color-mix(in srgb, var(--background) 78%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--text) 18%, transparent);
}
.login-card h1 { margin: 0; text-align: center; font-size: 1.6rem; }
.login-card .subtitle { margin: -0.5rem 0 0; text-align: center; color: var(--muted); }
.login-card label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.login-card .logo { align-self: center; border-radius: 16px; }
.login-card input { padding: 0.7rem 0.9rem; font-size: 1rem; border-radius: 0.5rem; }
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-card button {
    padding: 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--accent);
    color: var(--background);
    font-weight: 600;
}
.login-card button:hover { filter: brightness(1.1); }
.mark { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 44px; }
.mark i { width: 9px; border-radius: 3px; }
.mark i:nth-child(1) { height: 40%; }
.mark i:nth-child(2) { height: 70%; }
.mark i:nth-child(3) { height: 100%; }
.mark i:nth-child(4) { height: 60%; }
.mark i:nth-child(5) { height: 85%; }