/* Pages auth hors base.html : login, inscription, 2FA — fond et cartes alignés charte PhotoCircle */

/* Carte verre : toujours lisible (le .bg-noise ne doit pas la « manger » visuellement) */
.auth-glass-panel {
  position: relative;
  z-index: 1;
}

html:not(.dark) .auth-glass-panel.surface-glass {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(226, 232, 240, 0.85);
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.dark .auth-glass-panel.surface-glass {
  background: rgba(18, 14, 34, 0.88);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

.pc-auth-page-bg,
.login-page-bg,
.register-page-bg,
.auth-page-bg {
  min-height: 100dvh;
  background: var(--bg-secondary);
  background-image:
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(79, 70, 229, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(51, 65, 85, 0.06) 0%, transparent 45%);
}

.dark .pc-auth-page-bg,
.dark .login-page-bg,
.dark .register-page-bg,
.dark .auth-page-bg {
  background: var(--surface-nocturne-700);
  background-image:
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(79, 70, 229, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 60% 42% at 0% 100%, rgba(6, 4, 13, 0.55) 0%, transparent 48%);
}

.pc-auth-card,
.login-card,
.register-card,
.auth-card {
  animation: pc-auth-fade 0.45s ease-out;
}

@keyframes pc-auth-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.input-wrapper {
  position: relative;
}

.btn-submit {
  cursor: pointer;
}

.password-strength {
  height: 4px;
  border-radius: 2px;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.password-strength.weak {
  background: #ef4444;
  width: 33%;
}

.password-strength.medium {
  background: #f59e0b;
  width: 66%;
}

.password-strength.strong {
  background: #10b981;
  width: 100%;
}

@media (max-width: 640px) {
  .pc-auth-page-bg input[type="text"],
  .pc-auth-page-bg input[type="email"],
  .pc-auth-page-bg input[type="password"],
  .login-page-bg input[type="email"],
  .login-page-bg input[type="password"],
  .register-page-bg input[type="text"],
  .register-page-bg input[type="email"],
  .register-page-bg input[type="password"] {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-auth-card,
  .login-card,
  .register-card,
  .auth-card {
    animation: none;
  }
}