@layer views {
  body { display: grid; place-items: center; padding: calc(var(--s-6) + var(--safe-t)) var(--s-4) calc(var(--s-6) + var(--safe-b)); }
  .login { width: min(360px, 100%); display: flex; flex-direction: column; gap: var(--s-2); }
  .login-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-strong); margin-bottom: var(--s-3); }
  .login-mark .icon { width: 20px; height: 20px; }
  .login h1 { font-size: var(--fs-2xl); }
  .login-sub { color: var(--text-3); margin-bottom: var(--s-4); }
  .login form { gap: var(--s-4); }
  .pw-wrap { position: relative; }
  .pw-wrap .input { padding-right: 44px; }
  .pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
  .pw-toggle:active:not(:disabled) { transform: translateY(-50%) scale(0.97); }
  .login-err { min-height: 20px; color: var(--danger); font-size: var(--fs-sm); }
  .login .btn-block { height: 40px; }
  @media (pointer: coarse) { .login .btn-block { height: var(--tap); } }
}