body.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
body.login main { width: min(400px, 100%); display: grid; gap: 22px; justify-items: center; animation: rise 460ms var(--ease-out) both; }
body.login .brand img { width: 34px; height: 34px; border-radius: 10px; }
body.login .brand span { font-size: 16px; }
body.login form { width: 100%; background: var(--white); border-radius: var(--r-xl); padding: 30px 28px 28px; box-shadow: var(--shadow-float); }
body.login form .eyebrow { margin-bottom: 12px; }
body.login h1 { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 22px; }
body.login label { display: block; font: 400 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
body.login input { width: 100%; height: 48px; border: 0; border-radius: 12px; padding: 0 14px; font-size: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow var(--t-quick) var(--ease); }
body.login input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
body.login #err { min-height: 22px; margin: 10px 0 14px; color: var(--accent); font-size: 13.5px; }
body.login form.shake { animation: shake 360ms cubic-bezier(.36,.07,.19,.97); }
body.login .foot { font: 400 12px var(--font-mono); color: var(--muted); }
body.login .foot a { color: var(--ink-2); text-underline-offset: 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { body.login main, body.login form.shake { animation: none; } }