html:has(body.login-mode),
body.login-mode {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body.login-mode .login-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

body.login-mode .login-card {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}

@media (max-height: 650px) {
  body.login-mode .login-card { padding: 20px; }
  body.login-mode .login-card h1 { font-size: 26px; margin: 20px 0 2px; }
  body.login-mode .login-card p { margin-bottom: 14px; }
  body.login-mode label { margin: 10px 0; }
  body.login-mode input { padding: 11px 13px; }
}