body.login { overflow: auto; display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.login-box { width: min(380px, 100%); text-align: center; margin-top: -6vh; }
.login-mark { width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 15px; background: var(--accent); display: grid; place-items: center; }
.login-mark svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.login h1 { font: 500 36px/1.1 var(--font-serif); letter-spacing: -.015em; margin: 0 0 8px; }
.login .lede { color: var(--muted); margin: 0 0 28px; }
.login form { display: grid; gap: 10px; }
.login input[type="email"] {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 16px;
  border: 1px solid var(--border-strong); background: var(--surface); outline: none;
}
.login input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login .btn { width: 100%; padding: 12px 14px; font-size: 15px; border-radius: 12px; }
.login .note { color: var(--text-2); margin: 0 0 16px; }
.login .err { color: var(--danger); margin: 16px 0 0; font-size: 14px; }