/* Keep the original login palette; enhance only mobile spacing and controls. */
.bg-animation { pointer-events: none; }
.login-card { border-radius: 28px; }
.form-control { min-height: 54px; border-radius: 15px; font-size: 16px; }
.form-control[name="password"] { padding-right: 56px; }
.toggle-password { min-width: 44px; min-height: 44px; }
.btn-submit { min-height: 54px; border-radius: 15px; }
.btn-back { border-radius: 14px; }
@media (max-width: 576px) {
  body { align-items: flex-start; }
  .login-container { max-width: 440px; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .login-card { padding: 28px 22px; }
  .logo-section { margin-bottom: 26px; }
  .form-group { margin-bottom: 20px; }
  .clock-section { display: none; }
  .login-card .pmx-footer { margin-top: 16px !important; padding: 12px 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Uploaded banner fills the backdrop, without taking space above the form. */
.login-banner-background { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #0f172a; }
.login-banner-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login-banner-background::after { content: ""; position: absolute; inset: 0; background: rgba(15,23,42,.35); }
.login-has-banner .login-card { background: rgba(30,41,59,.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }