/* ===== Apple-inspired, colorful & emotional auth ===== */

/* Base & tokens */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
:root{
  --bg: #0a0c10;
  --text: #f8fbff;
  --muted: #c9d3e3;

  /* Verre dépoli */
  --glass: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.18);
  --radius-lg: 22px;
  --radius-sm: 14px;
  --shadow-lg: 0 30px 80px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.25);

  /* Dégradés “Apple” (inspirations iOS/macOS) */
  --g1: radial-gradient(800px 600px at 15% -10%, #6EE7F9 0%, transparent 60%);
  --g2: radial-gradient(900px 700px at 110% 20%, #A78BFA 0%, transparent 55%);
  --g3: radial-gradient(1000px 800px at 80% 120%, #FF7AB6 0%, transparent 60%);
  --g4: radial-gradient(700px 600px at -10% 110%, #F9CB80 0%, transparent 60%);

  /* Bouton multi-couleur animé */
  --btn-from: #5B9CFF;
  --btn-mid:  #9B72FF;
  --btn-to:   #FF6B9E;

  /* États */
  --success: #34d399;
  --danger:  #ff6b6b;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f5f7fb;
    --text: #0a0c10;
    --muted: #4b5563;
    --glass: rgba(255,255,255,0.7);
    --glass-border: rgba(0,0,0,0.06);
    --shadow-lg: 0 24px 64px rgba(20,30,60,.15), 0 6px 18px rgba(20,30,60,.08);
  }
}

/* Scène : grands dégradés doux + légère trame */
body{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  display: grid; place-items: center;
  padding: 28px;
  position: relative; overflow: hidden;
  isolation: isolate; /* pour les flous */
}

/* Blobs colorés en fond */
body::before,
body::after{
  content:"";
  position: absolute; inset: -20%;
  z-index: -2;
  background:
    var(--g1),
    var(--g2),
    var(--g3),
    var(--g4);
  filter: blur(16px) saturate(1.05);
  transform: translateZ(0);
}
body::after{
  mask-image: radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,.9), transparent 75%);
  opacity: .9;
}

/* Grain subtil façon Apple wallpapers */
.auth-noise{
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: url("/assets/noise.svg");
  mix-blend-mode: overlay; opacity: .35;
}

/* Conteneur */
.auth-wrap{ width: 100%; max-width: 440px; }

/* Carte en verre dépoli */
.auth-card{
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

/* Lueur douce interne */
.auth-card::after{
  content:"";
  position:absolute; inset: -1px;
  border-radius: inherit;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}

/* Titre + tagline */
.auth-title{
  margin: 4px 0 10px;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
}
.auth-sub{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .98rem;
}

/* Champs */
.auth-field{ margin-bottom: 14px; }
.auth-label{
  display: block; margin: 0 0 6px;
  font-size: .9rem; color: var(--muted);
}
.auth-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: var(--text);
  outline: none;
  transition: border .15s ease, box-shadow .15s ease, transform .02s ease;
}
.auth-input::placeholder{ color: color-mix(in oklab, var(--muted) 78%, transparent); }
.auth-input:focus{
  border-color: color-mix(in oklab, var(--btn-from) 60%, white 5%);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--btn-from) 25%, transparent);
}

/* Bouton “liquid gradient” */
.auth-btn{
  width: 100%;
  padding: 12px 16px;
  border: 0; border-radius: 14px;
  font-weight: 700; color: white;
  cursor: pointer;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-mid), var(--btn-to));
  background-size: 180% 180%;
  box-shadow: 0 8px 24px rgba(90, 120, 255, .28);
  transition: transform .05s ease, filter .18s ease, box-shadow .18s ease, background-position 1.4s ease;
  will-change: transform, background-position;
}
.auth-btn:hover{ background-position: 100% 0%; filter: saturate(1.05); }
.auth-btn:active{ transform: translateY(1px) scale(.997); }
.auth-btn:disabled{ opacity: .7; cursor:not-allowed; }

/* Messages */
.auth-msg{ margin-top: 12px; font-size: .96rem; }
.auth-error{ color: var(--danger); }
.auth-info { color: var(--muted); }

/* Footer liens */
.auth-footer{
  margin-top: 16px;
  text-align: center;
  font-size: .96rem;
  color: var(--muted);
}
.auth-footer a{
  color: color-mix(in oklab, var(--btn-mid) 60%, var(--btn-from) 40%);
  text-decoration: none;
}
.auth-footer a:hover{ text-decoration: underline; }

/* Badges secondaires (sign-in options, etc.) */
.auth-actions{
  display:flex; gap:10px; margin-top:12px;
}
.auth-ghost{
  flex:1; padding:11px 14px;
  border-radius: 12px; border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--text);
  font-weight:600; cursor:pointer;
  transition: border .15s, transform .05s, box-shadow .15s;
}
.auth-ghost:hover{ border-color: rgba(255,255,255,.35); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.auth-ghost:active{ transform: translateY(1px); }

/* Neutraliser les styles du body hérités de login.css quand on est en vue album */
body.body-full {
  display: block !important;
  place-items: unset !important;
  padding: 0 !important;
}

/* Petits écrans */
@media (max-width: 440px){
  .auth-card{ padding: 22px; border-radius: 18px; }
}

/* Accessibilité mouvement */
@media (prefers-reduced-motion: reduce){
  .auth-btn{ transition: none; background-size: auto; }
  .auth-input, .auth-ghost{ transition: none; }
}