/* ── Auth Module Styles ── */

/* Extends the base .auth-card/.auth-layout from core.css */

/* ── Registration form specifics ── */
.auth-divider {
  display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255, 0.08);
}
.auth-divider span { font-size: 0.8125rem; opacity: 0.45; white-space: nowrap; }

/* ── Social login buttons ── */
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: 100%; padding: 0.625rem 1rem;
  background: rgba(255,255,255, 0.05); border: 1px solid rgba(255,255,255, 0.1);
  border-radius: var(--radius-md); color: var(--color-text);
  font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: all var(--transition);
  margin-bottom: 0.75rem; text-decoration: none;
}
.btn-social:hover { background: rgba(255,255,255, 0.09); border-color: rgba(255,255,255, 0.2); }
.btn-social-icon { font-size: 1.1rem; }

/* ── Password strength ── */
.password-strength { margin-top: 0.5rem; }
.password-strength-bar {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255, 0.1); overflow: hidden;
}
.password-strength-fill {
  height: 100%; border-radius: 2px; transition: all var(--transition-slow);
}
.strength-weak   .password-strength-fill { width: 33%;  background: #ef4444; }
.strength-medium .password-strength-fill { width: 66%;  background: #facc15; }
.strength-strong .password-strength-fill { width: 100%; background: #4ade80; }
.password-strength-label { font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.6; }

/* ── Account page ── */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
.account-sidebar {
  background: var(--color-surface); border-radius: var(--radius-xl); padding: 1.5rem;
  border: 1px solid rgba(255,255,255, 0.06);
}
.account-nav-link {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem; border-radius: var(--radius-md);
  font-size: 0.9375rem; opacity: 0.65; transition: all var(--transition); text-decoration: none; color: var(--color-text);
}
.account-nav-link:hover  { opacity: 1; background: rgba(255,255,255, 0.07); }
.account-nav-link.active { opacity: 1; background: rgba(99,102,241, 0.15); color: #818cf8; }

/* ── Profile avatar ── */
.profile-avatar-upload {
  position: relative; width: 6rem; height: 6rem; cursor: pointer;
}
.profile-avatar-upload img {
  width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover;
  border: 3px solid var(--color-primary);
}
.profile-avatar-overlay {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  background: rgba(0,0,0, 0.6); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition); font-size: 1.5rem;
}
.profile-avatar-upload:hover .profile-avatar-overlay { opacity: 1; }

@media(max-width:768px){
  .account-layout { grid-template-columns: 1fr; }
}