/* ================================================================
   MyKortex 4 — Écran de connexion.
   Une seule feuille pour les trois portes : l'application, le panneau
   de l'extension et l'écran Réception. Elles doivent être identiques.
   ================================================================ */

body.auth-page {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #14335e 0%, var(--bg-sidebar) 55%, #0a1327 100%);
  font-family: var(--font-sans);
}
.auth { width: 380px; max-width: 92vw; text-align: center; animation: authFadeUp .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes authFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.auth__logo { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.auth__logo .my { color: #fff; }
.auth__logo .kx { color: var(--primary-400); }
.auth__sub { color: #94A3B8; font-size: var(--text-sm); margin-bottom: 28px; }

.auth__card {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px; padding: 28px 26px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
}
.auth__field { text-align: left; margin-bottom: 16px; }
.auth__field label {
  display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #94A3B8; margin-bottom: 6px;
}
.auth__field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #fff;
  font-size: var(--text-base); transition: border-color .15s, box-shadow .15s;
}
.auth__field input::placeholder { color: #64748B; }
.auth__field input:focus { outline: none; border-color: var(--primary-400); box-shadow: 0 0 0 3px rgba(59, 158, 255, .18); }

.auth__btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer; margin-top: 6px;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600)); color: #fff;
  font-size: var(--text-base); font-weight: 700; transition: transform .12s, box-shadow .2s;
  box-shadow: 0 12px 24px -10px var(--primary); font-family: inherit;
}
.auth__btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -10px var(--primary); }
.auth__btn[disabled] { opacity: .6; cursor: wait; transform: none; }

.auth__err {
  background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .35); color: #FCA5A5;
  border-radius: 10px; padding: 10px 12px; font-size: var(--text-sm); margin-bottom: 16px; text-align: left;
}
.auth__err a { color: inherit; font-weight: 700; }
.auth__foot { color: #64748B; font-size: var(--text-xs); margin-top: 20px; }