/* ============================================================================
   MangaSphere — Pages d'authentification (structure « carte centrée » façon MCPRO)
   Logo en haut · carte centrée (Google + séparateur + formulaire) · lien retour.
   Dépend de manga-theme.css (tokens + boutons .ms-btn).
   ========================================================================== */

.auth-portal { min-height: 100vh; }
.auth-portal-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) 1rem; position: relative; overflow: hidden;
}
.auth-portal-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ms-grad-hero); }

.auth-portal-shell { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; }

.auth-portal-logo { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; font-family: "Russo One", sans-serif; font-size: 1.5rem; }
.auth-portal-logo .ms-logo-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--ms-grad-brand); display: grid; place-items: center; color: #fff; box-shadow: var(--ms-glow); }
.auth-portal-logo b { background: var(--ms-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.auth-portal-card {
  width: 100%; background: var(--ms-surface); border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-lg); padding: clamp(1.5rem, 4vw, 2.2rem); box-shadow: var(--ms-shadow);
}
.auth-portal-head { text-align: center; margin-bottom: 1.4rem; }
.auth-portal-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .4rem; }
.auth-portal-head p { color: var(--ms-text-soft); margin: 0; font-size: .95rem; }

/* Étapes (inscription) — masquées, conservées pour le JS */
.auth-steps { display: none; }

/* Bloc social (Google) */
.auth-social-block { margin-bottom: 1rem; }
.btn-google-slot { min-height: 48px; }
.btn-google {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .78rem 1rem; border-radius: 12px; background: var(--ms-surface-2); color: var(--ms-text);
  border: 1px solid var(--ms-border-strong); font-weight: 600; font-size: .96rem;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-google:hover { background: var(--ms-elevated); border-color: var(--ms-primary-soft); }
.btn-google:active { transform: translateY(1px); }
.btn-google svg { width: 20px; height: 20px; }
.btn-google.is-disabled { opacity: .6; cursor: not-allowed; }
.btn-google.is-loading { opacity: .8; cursor: progress; }
.auth-google-note { margin: .5rem 0 0; font-size: .78rem; color: var(--ms-text-dim); text-align: center; }

/* Séparateur */
.auth-oauth-divider, .auth-or-sep { display: flex; align-items: center; gap: .8rem; text-align: center; color: var(--ms-text-dim); font-size: .82rem; margin: 1.1rem 0; }
.auth-oauth-divider::before, .auth-oauth-divider::after, .auth-or-sep::before, .auth-or-sep::after { content: ""; flex: 1; height: 1px; background: var(--ms-border); }

/* Formulaire */
.auth-form { display: grid; gap: 1rem; }
.auth-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group, .ms-field { display: grid; gap: .4rem; }
.form-group label, .ms-field label { font-size: .85rem; font-weight: 600; color: var(--ms-text-soft); }
.auth-input-wrap { display: block; }
.auth-form input, .form-group input, .form-group select, .ms-field input, .ms-field select {
  width: 100%; padding: .8rem .9rem; background: var(--ms-bg-2); color: var(--ms-text);
  border: 1px solid var(--ms-border); border-radius: 12px; font-family: inherit; font-size: .98rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-form input::placeholder { color: var(--ms-text-dim); }
.auth-form input:focus, .form-group input:focus, .form-group select:focus, .ms-field input:focus {
  outline: none; border-color: var(--ms-primary-soft); box-shadow: 0 0 0 3px rgba(124,58,237,.22); background: var(--ms-surface);
}
.form-hint { margin: .1rem 0 0; font-size: .78rem; color: var(--ms-text-dim); }

.auth-form-row-inline { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.auth-checkbox { display: inline-flex; align-items: center; gap: .5rem; color: var(--ms-text-soft); font-size: .9rem; cursor: pointer; }
.auth-checkbox input { width: 18px; height: 18px; accent-color: var(--ms-primary); }
.auth-link-muted { color: var(--ms-primary-soft); font-size: .9rem; }
.auth-link-muted:hover { color: var(--ms-text); }
.auth-submit { width: 100%; margin-top: .3rem; }

/* Conditions */
.auth-terms, .ms-terms { display: flex; gap: .55rem; align-items: flex-start; color: var(--ms-text-soft); font-size: .85rem; line-height: 1.5; }
.auth-terms input, .ms-terms input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--ms-primary); flex: 0 0 18px; }
.auth-terms a, .ms-terms a { color: var(--ms-primary-soft); }

/* Alertes */
.auth-alert { padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; margin-bottom: 1rem; background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .4); color: var(--ms-action-soft); }
.auth-alert-info { background: rgba(124, 58, 237, .12); border-color: var(--ms-border-strong); color: var(--ms-primary-soft); }

/* Pied de carte + retour */
.auth-portal-foot { text-align: center; margin-top: 1.4rem; color: var(--ms-text-soft); font-size: .92rem; }
.auth-portal-foot a { color: var(--ms-primary-soft); font-weight: 600; }
.auth-portal-foot a:hover { color: var(--ms-text); }
.auth-portal-back { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.4rem; color: var(--ms-text-dim); font-size: .88rem; }
.auth-portal-back:hover { color: var(--ms-text); }

@media (max-width: 480px) { .auth-form .form-row { grid-template-columns: 1fr; } }