/* ────────────────────────────────────────────
   WolfaX – Auth Pages (login / signup)
   ──────────────────────────────────────────── */

.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary);
  background-image:
    radial-gradient(circle at 15% 50%, rgba(230,57,70,.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(72,149,239,.10) 0%, transparent 50%);
  padding: 30px 16px;
}

.auth-box {
  width: 100%; max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

.auth-logo {
  text-align: center; margin-bottom: 28px;
}
.auth-logo .logo-text {
  font-family: 'Rajdhani', sans-serif; font-size: 2.2rem; font-weight: 700;
}
.auth-logo .logo-text span { color: var(--accent-red); }
.auth-logo p { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }

.auth-title { font-size: 1.5rem; margin-bottom: 6px; }
.auth-subtitle { color: var(--text-muted); font-size: .88rem; margin-bottom: 28px; }

.form-divider {
  text-align: center; color: var(--text-muted); font-size: .82rem;
  margin: 16px 0; position: relative;
}
.form-divider::before, .form-divider::after {
  content: ''; position: absolute; top: 50%; width: calc(50% - 24px);
  border-top: 1px solid var(--border);
}
.form-divider::before { left: 0; }
.form-divider::after  { right: 0; }

.auth-footer { text-align: center; margin-top: 22px; font-size: .88rem; color: var(--text-muted); }
.auth-footer a { color: var(--accent-blue); font-weight: 600; }

.password-toggle {
  position: relative;
}
.password-toggle input { padding-right: 42px; }
.password-toggle .toggle-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .95rem;
}
.password-toggle .toggle-btn:hover { color: var(--text-primary); }

.strength-bar {
  height: 4px; border-radius: 2px; background: var(--border);
  margin-top: 8px; overflow: hidden;
}
.strength-bar-fill {
  height: 100%; border-radius: 2px; transition: width .3s, background .3s;
}

.checkbox-group { display: flex; align-items: center; gap: 8px; }
.checkbox-group input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent-red); }
.checkbox-group label { font-size: .88rem; color: var(--text-muted); cursor: pointer; }