/* Authentication layout: size controls by height, never by square aspect ratio. */
html { height: auto !important; overflow-y: auto !important; }
body {
  box-sizing: border-box !important;
  height: auto !important;
  overflow-y: visible !important;
  flex-direction: column !important;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
}
body::before { pointer-events: none; }
.desktop-pin-field { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .desktop-pin-field { display: grid; gap: 8px; margin: 16px 0; color: var(--auth-muted); font-size: 13px; text-align: left; }
  .desktop-pin-field input { width: 100%; box-sizing: border-box; min-height: 54px; border: 1px solid var(--auth-border); border-radius: 14px; padding: 12px 16px; background: var(--auth-surface-2); color: var(--auth-text); font: 24px system-ui; letter-spacing: .4em; }
  .desktop-pin-field input:focus { outline: 2px solid #80b9ff; outline-offset: 2px; }
  .desktop-pin-field button { background: transparent; color: var(--auth-muted); border: 0; padding: 8px; cursor: pointer; }
  .pin-keypad, .pin-dots { display: none !important; }
}
.login-wrap, .lock-wrap { flex: 0 0 auto; width: 100% !important; max-width: 400px !important; }
.login-card, .lock-wrap {
  box-sizing: border-box;
  padding: clamp(16px, 3vh, 24px) !important;
  border-radius: 24px !important;
  background: linear-gradient(150deg, #182339, #111a2a 65%) !important;
}
.logo-box { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 13px; align-items: center; text-align: left; margin-bottom: 20px !important; }
.logo-box img { grid-row: 1 / 3; width: 48px !important; height: 48px !important; border-radius: 14px !important; animation: auth-arrive .45s ease-out; }
.logo-box h2 { font-size: 21px !important; margin: 0 !important; }
.logo-box p { font-size: 10px; letter-spacing: .1em; margin: 3px 0 0 !important; }
.login-tabs { margin-bottom: 16px !important; }
.login-tab { min-height: 44px !important; padding: 8px !important; flex-direction: row !important; gap: 6px !important; font-size: 12px !important; }
.pin-username-display { margin: 0 0 12px !important; overflow-wrap: anywhere; }
.pin-dots { margin: 12px 0 !important; gap: 12px !important; }
.pin-dot { width: 12px !important; height: 12px !important; }
.pin-keypad { width: 100%; max-width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; margin-top: 8px !important; }
.pin-key { aspect-ratio: auto !important; height: clamp(44px, 7dvh, 60px) !important; min-height: 44px; width: 100%; border-radius: 15px !important; font-size: 23px !important; transition: background .15s, transform .15s !important; }
.pin-key.action { font-size: 12px !important; }
.pin-key:active { transform: scale(.96); }
.pin-key:focus-visible, .login-tab:focus-visible { outline: 2px solid #9cc5ff; outline-offset: 2px; }
#pinLoginButton, #unlockPinButton { margin-top: 12px !important; }
.form-control { box-sizing: border-box; min-width: 0; width: 100%; font-size: 16px !important; }
.faceid-icon { width: 64px !important; height: 64px !important; font-size: 32px !important; margin: 12px auto !important; }
.reg-link { margin-top: 16px !important; padding-top: 14px !important; }
.footer { margin-top: 12px !important; font-size: 10px !important; }
.lock-logo { margin-bottom: 8px !important; }
.lock-logo img { width: 44px !important; height: 44px !important; }
.lock-time { font-size: 34px !important; margin: 8px 0 0 !important; }
.lock-date { margin-bottom: 10px !important; }
.lock-icon { font-size: 20px !important; margin: 8px 0 !important; }
.lock-user { overflow-wrap: anywhere; }
.logout-link { position: static !important; margin: 12px 0 0 !important; flex: 0 0 auto; }
@keyframes auth-arrive { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }
@media (max-height: 650px) {
  .login-card, .lock-wrap { padding: 16px !important; }
  .logo-box { margin-bottom: 12px !important; }
  .login-tabs { margin-bottom: 10px !important; }
  .pin-dots { margin: 8px 0 !important; }
  .pin-keypad { gap: 6px !important; }
  .reg-link { margin-top: 12px !important; padding-top: 10px !important; }
}
@media (prefers-reduced-motion: reduce) { .logo-box img, .pin-key { animation: none !important; transition: none !important; } }