.login-main {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.login-card { width: 100%; max-width: 440px; min-width: 0; margin-block: auto; padding: 24px; background: #fffefb; border: 1px solid #dfdfd4; border-radius: 20px; }
.login-card h1 { font-size: clamp(30px, 8vw, 42px); line-height: 1.12; margin: 16px 0 12px; }
.login-card p { color: #656a5f; font-size: 15px; line-height: 1.5; }
.login-card form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
.login-card label { font-size: 14px; font-weight: 600; margin-top: 6px; }
.login-card label span { font-weight: 400; }
.login-card input { font-size: 16px; min-height: 48px; padding: 12px; border: 1px solid #c5cabc; border-radius: 9px; width: 100%; background: white; }
.login-card input:focus { outline: 2px solid #365840; outline-offset: 2px; }
.login-card .primary { min-height: 48px; width: 100%; justify-content: center; }
.login-card .primary:disabled { opacity: .65; }
.login-card .login-note { font-size: 13px; margin: 20px 0 0; }
.login-card #login-message { font-size: 14px; margin: 4px 0; min-height: 20px; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .login-main { padding: 32px; }
  .login-card { padding: 36px; border-radius: 24px; }
}