/* HOME PPK — shared layout for login / register / forgot-password / forgot-email / setup-admin */
html { font-size: 16px; }
body { box-sizing: border-box; padding: 1.25rem !important; font-size: 16px; line-height: 1.55; }
.auth-card, .login-container {
  max-width: 440px !important; width: 100%; margin: auto; box-sizing: border-box;
  padding: 2.25rem 2rem 1.75rem !important; gap: 1rem;
  color: #1F2937;
}
/* centred brand header (register / forgot pages put it in the first child) */
.login-container > div:first-child { justify-content: center !important; text-align: center; }
.login-container > div:first-child > div { text-align: center; }
.login-container h2, .auth-card h3 { text-align: center; font-size: 1.3rem !important; }
.step-desc, .auth-logo p { font-size: 0.95rem; color: #4B5563; text-align: center; }

/* form controls: 48px high, 16px text (prevents iOS zoom) */
.form-group { gap: 0.4rem; margin-bottom: 0.25rem; }
.form-group label { font-size: 0.95rem !important; }
.form-group input, .form-group select, .fl-group input {
  min-height: 48px; font-size: 16px !important; box-sizing: border-box;
}
.pw-toggle, .toggle-password {
  right: 0 !important; width: 44px; height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* buttons and links: comfortable tap targets */
.auth-btn, .login-btn, #flSubmitBtn { width: 100%; min-height: 48px; font-size: 1.05rem; margin-top: 0.5rem; }
.resend-btn { width: 100%; min-height: 44px; }
.menu-links { gap: 0.15rem !important; }
.menu-links a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: 1rem !important; border-radius: 10px;
}
.menu-links a:hover, .menu-links a:focus-visible { background: #EEF2FF; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.45); outline-offset: 2px;
}
.auth-footer { font-size: 0.85rem; color: #6B7280; }
.error-message, .error-msg { font-size: 0.95rem; }

@media (min-width: 768px) {
  .auth-card, .login-container { box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35); }
}
@media (max-width: 480px) {
  body { padding: 0.75rem !important; align-items: flex-start !important; }
  .auth-card, .login-container { max-width: 100% !important; padding: 1.5rem 1.1rem !important; margin-top: 0.5rem; }
}