/* Login, OTP and public-form presentation, kept out of the templates. */
.sfm-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(145deg, #fff8f2, #f4f6f9 55%, #eceff1); }
.sfm-auth-card { width: 100%; max-width: 390px; padding: 2rem; border: 0; border-radius: .5rem; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.sfm-auth-logo { width: 74px; height: 74px; margin: 0 auto 1rem; object-fit: contain; }
.sfm-auth-card .bi-shield-lock-fill { font-size: 4rem; }
.sfm-auth-title { color: #343a40; font-size: 1.35rem; font-weight: 700; }
.sfm-auth-subtitle { color: #6c757d; font-size: .9rem; }
.sfm-auth-card .form-control { min-height: 48px; border-radius: .25rem; }
.sfm-auth-card .btn { min-height: 48px; font-weight: 600; }
.sfm-public-form { min-height: 100vh; padding: 2rem 1rem; background: #f4f6f9; }
.sfm-public-form .form-card { max-width: 760px; margin: 0 auto; }
.sfm-public-form .card-header { color: #fff; background: #343a40; }
.required::after { color: #dc3545; content: ' *'; }

@media (max-width: 575.98px) {
  .sfm-auth-page { align-items: flex-start; padding: 1rem; }
  .sfm-auth-card { margin-top: 1.5rem; padding: 1.5rem; }
  .sfm-auth-logo { width: 62px; height: 62px; }
  .sfm-auth-title { font-size: 1.15rem; }
}