/* styles/auth.css */

/* ── Auth page shell ────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%, rgba(0,71,171,0.18) 0%, transparent 60%),
    var(--bg-base);
}

.auth-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 420px;
  box-shadow: var(--card-shadow), var(--glow-cobalt);
}

/* ── Brand header ───────────────────────────────────────────── */
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  margin-bottom: 2rem;
}
.auth-brand-logo {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cobalt), var(--cobalt-light));
  border-radius: var(--radius);
  color: #fff;
  box-shadow: var(--glow-cobalt);
}
.auth-brand-text  { display: flex; flex-direction: column; line-height: 1; }
.auth-brand-mms {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 900;
  color: var(--text-primary);
}
.auth-brand-accounts {
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan-neon);
}

/* ── Tabs ───────────────────────────────────────────────────── */
.auth-tab-row {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.75rem;
}
.auth-tab {
  flex: 1; background: none; border: none;
  padding: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.25s, border-color 0.25s;
}
.auth-tab:hover { color: var(--text-secondary); }
.auth-tab--active { color: var(--text-primary); border-bottom-color: var(--cyan-neon); }

/* ── Auth form ──────────────────────────────────────────────── */
.auth-form-wrap { }
.auth-form { display: flex; flex-direction: column; }

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.auth-footer-link {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}
.auth-back-home {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.auth-back-home:hover { color: var(--cobalt-light); }

/* ── OAuth section ──────────────────────────────────────────── */
.oauth-section { margin-bottom: 0.25rem; }

.oauth-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.1rem 0 0.5rem;
}
.oauth-divider-line  { flex: 1; height: 1px; background: var(--border-subtle); }
.oauth-divider-text  {
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Email verification banner ──────────────────────────────── */
.verify-banner {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(65,105,225,0.07);
  border: 1px solid rgba(65,105,225,0.25);
  margin-bottom: 1rem;
}
.verify-banner-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.verify-banner-text strong { color: var(--text-primary); }
.verify-resend-btn  { align-self: flex-start; color: var(--cyan-neon); border-color: rgba(0,212,255,0.35); }
.verify-resend-btn:hover:not(:disabled) {
  background: rgba(0,212,255,0.07);
  border-color: var(--cyan-neon);
}

/* ── Forgot password ────────────────────────────────────────── */
.forgot-link-row { display: flex; justify-content: flex-end; margin-top: 0.3rem; }

.forgot-header  { text-align: center; margin-bottom: 1.5rem; }
.forgot-title   { font-size: 1.05rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.forgot-sub     { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; }

/* ── Reset password ─────────────────────────────────────────── */
.reset-header { text-align: center; margin-bottom: 1.5rem; }
.reset-title  { font-size: 1.05rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.reset-sub    { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; }

/* ── Signup confirmed ───────────────────────────────────────── */
.signup-confirmed {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.1rem; text-align: center;
  padding: 0.5rem 0 1rem;
  animation: fade-up 0.4s var(--ease-smooth) both;
}
.signup-confirmed-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 50%;
  color: var(--cyan-neon);
  box-shadow: var(--glow-cyan);
  flex-shrink: 0;
}
.signup-confirmed-title { font-size: 1.05rem; color: var(--text-primary); letter-spacing: -0.01em; }
.signup-confirmed-body {
  font-size: 0.9rem; color: var(--text-secondary);
  line-height: 1.75; max-width: 300px;
}
.signup-confirmed-body strong { color: var(--text-primary); font-weight: 600; }
.signup-confirmed-note {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--cobalt-faint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  width: 100%;
}
.signup-confirmed .btn { width: 100%; margin-top: 0.4rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-panel { padding: 2rem 1.25rem; }
  }