.auth-body { background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 50%, var(--magenta) 100%); }
.auth-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.auth-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.auth-brand { text-align: center; margin-bottom: 2rem; }
.auth-logo {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  color: white;
  font-size: 1.8rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.auth-title { font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin-bottom: .25rem; }
.auth-subtitle { color: var(--gray-400); font-size: .9rem; }
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.input-password-wrapper { position: relative; }
.input-password-wrapper .form-input { padding-right: 2.75rem; }
.toggle-password {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--gray-400); padding: .2rem;
}
.toggle-password svg { width: 18px; height: 18px; }
.btn-full { margin-top: .5rem; padding: .7rem 1rem; font-size: .95rem; }
.auth-footer { text-align: center; margin-top: 1.5rem; font-size: .8rem; color: var(--gray-300); }