.auth-page--recovery {
  min-height: 100vh;
  margin: 0;
  font-family: 'Cairo', sans-serif;
  background:
    radial-gradient(circle at top, rgba(96,165,250,.18), transparent 32%),
    linear-gradient(180deg, #0b1020 0%, #0f172a 52%, #111827 100%);
  color: #e5eefc;
}
.auth-page--recovery .auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
}
.auth-page--recovery .auth-card {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, rgba(248,251,255,.98) 0%, rgba(238,244,255,.98) 100%);
  color: #0f172a; border: 1px solid rgba(148,163,184,.2); border-radius: 28px;
  box-shadow: 0 24px 60px rgba(2,6,23,.38); overflow: hidden;
}
.auth-page--recovery .auth-card .card-body { padding: 2rem; }
.auth-page--recovery .auth-icon {
  width: 82px; height: 82px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37,99,235,.12); color: #2563eb; font-size: 2rem; margin-bottom: 1rem;
}
.auth-page--recovery .auth-title { font-size: 1.9rem; font-weight: 800; margin-bottom: .5rem; color: #0f172a; }
.auth-page--recovery .auth-subtitle { color: #475569; line-height: 1.8; margin-bottom: 1.5rem; }
.auth-page--recovery .form-label { color: #334155; font-weight: 700; margin-bottom: .55rem; }
.auth-page--recovery .auth-field-label { display: block; width: 100%; text-align: right; direction: rtl; }
.auth-page--recovery .form-control {
  border-radius: 16px; border-color: #cbd5e1; padding: .9rem 1rem; box-shadow: none !important; text-align: right; direction: rtl;
}
.auth-page--recovery .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 .2rem rgba(37,99,235,.12) !important; }
.auth-page--recovery .btn-main {
  background: linear-gradient(135deg, #2563eb, #4f46e5); border: none; color: #fff; border-radius: 16px;
  padding: .95rem 1rem; font-weight: 800; box-shadow: 0 12px 24px rgba(37,99,235,.22);
}
.auth-page--recovery .btn-main:hover { color: #fff; transform: translateY(-1px); }
.auth-page--recovery .btn-soft {
  background: transparent; border: 1px solid rgba(100,116,139,.35); color: #334155; border-radius: 14px; padding: .85rem 1rem; font-weight: 700;
}
.auth-page--recovery .auth-footer { color: #64748b; font-size: .92rem; margin-top: 1rem; }
.auth-page--recovery .alert { border-radius: 14px; text-align: right; }

.auth-page--superadmin-otp {
  min-height: 100vh; margin: 0; font-family: 'Cairo', sans-serif;
  background: radial-gradient(circle at top, rgba(14,165,233,.2), transparent 34%), linear-gradient(180deg, #07111f 0%, #0f172a 58%, #111827 100%);
  color: #e5eefc;
}
.auth-page--superadmin-otp .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-page--superadmin-otp .auth-card {
  width: 100%; max-width: 520px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,246,255,.98));
  color: #0f172a; border: 1px solid rgba(148,163,184,.22); border-radius: 28px; box-shadow: 0 24px 60px rgba(2,6,23,.42); overflow: hidden;
}
.auth-page--superadmin-otp .auth-card .card-body { padding: 2rem; }
.auth-page--superadmin-otp .auth-icon {
  width: 82px; height: 82px; border-radius: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f766e, #0284c7); color: #fff; font-size: 2rem; margin-bottom: 1rem; box-shadow: 0 16px 30px rgba(2,132,199,.24);
}
.auth-page--superadmin-otp .auth-title { font-size: 1.75rem; font-weight: 800; margin-bottom: .5rem; color: #0f172a; }
.auth-page--superadmin-otp .auth-subtitle { color: #475569; line-height: 1.9; margin-bottom: 1.5rem; }
.auth-page--superadmin-otp .form-label { color: #334155; font-weight: 800; margin-bottom: .55rem; display: block; text-align: right; }
.auth-page--superadmin-otp .form-control {
  border-radius: 16px; border-color: #cbd5e1; padding: 1rem; box-shadow: none !important; text-align: center; direction: ltr;
  font-size: 1.3rem; letter-spacing: .3rem; font-weight: 800;
}
.auth-page--superadmin-otp .form-control:focus { border-color: #0284c7; box-shadow: 0 0 0 .2rem rgba(2,132,199,.12) !important; }
.auth-page--superadmin-otp .btn-main {
  background: linear-gradient(135deg, #0f766e, #0284c7); border: none; color: #fff; border-radius: 16px; padding: .95rem 1rem;
  font-weight: 800; box-shadow: 0 12px 24px rgba(15,118,110,.2);
}
.auth-page--superadmin-otp .btn-main:hover { color: #fff; transform: translateY(-1px); }
.auth-page--superadmin-otp .btn-soft {
  background: transparent; border: 1px solid rgba(100,116,139,.35); color: #334155; border-radius: 14px; padding: .85rem 1rem;
  font-weight: 700; text-decoration: none;
}
.auth-page--superadmin-otp .alert { border-radius: 14px; text-align: right; }

.auth-page--staff-invite {
  min-height: 100vh; margin: 0; font-family: 'Cairo', sans-serif; background: linear-gradient(180deg,#0b1020,#111827); color: #e5eefc;
}
.auth-page--staff-invite .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-page--staff-invite .auth-card {
  width: 100%; max-width: 560px; background: #f8fbff; color: #0f172a; border-radius: 24px; box-shadow: 0 24px 60px rgba(2,6,23,.38); overflow: hidden;
}
.auth-page--staff-invite .auth-card .card-body { padding: 2rem; }
.auth-page--staff-invite .auth-icon {
  width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37,99,235,.12); color: #2563eb; font-size: 1.9rem; margin-bottom: 1rem;
}
.auth-page--staff-invite .form-control { border-radius: 14px; padding: .85rem 1rem; }
.auth-page--staff-invite .rule { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: .88rem; margin: .25rem 0; }
.auth-page--staff-invite .rule.ok { color: #15803d; font-weight: 700; }
.auth-page--staff-invite .rule i { width: 18px; text-align: center; }
.auth-page--staff-invite .btn-main { background: #2563eb; color: #fff; border: 0; border-radius: 14px; padding: .95rem 1rem; font-weight: 800; }

@media (max-width: 576px) {
  .auth-page--recovery .auth-card .card-body { padding: 1.35rem; }
  .auth-page--recovery .auth-title { font-size: 1.55rem; }
  .auth-page--recovery .auth-icon { width: 68px; height: 68px; font-size: 1.7rem; }
}