body { display: grid; place-items: center; height: 100vh; }
.login {
  position: relative; z-index: 1;
  background: var(--surface-1); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); padding: 32px 34px; width: min(360px, 92vw);
  box-shadow: var(--shadow-3);
}
.login .mark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
  color: #fff; font-size: 20px; margin-bottom: 16px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.login h1 { font-size: 20px; margin-bottom: 4px; }
.login p { color: var(--ink-3); font-size: 13px; margin-bottom: 20px; }
.login label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
.login .err { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 18px; }
.login button { width: 100%; margin-top: 18px; }
.login .hint { color: var(--ink-3); font-size: 12px; margin: 6px 0 0; }
.login .alt { color: var(--ink-3); font-size: 13px; margin: 16px 0 0; text-align: center; }
.login .alt a, .login .check a { color: var(--accent); text-decoration: none; }
.login .alt a:hover, .login .check a:hover { text-decoration: underline; }
.login .check {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; font-weight: 400; color: var(--ink-2); margin: 18px 0 0; line-height: 1.45;
}
.login .check input { margin-top: 2px; accent-color: var(--accent); }