/* ═══════════════════════════════════════════
   Auth Page
   ═══════════════════════════════════════════ */
#auth-page {
  min-height: 100vh; display: flex;
  background: linear-gradient(135deg, var(--warm) 0%, var(--rose-p) 45%, var(--sage-p) 100%);
  position: relative; overflow: hidden;
}
#auth-page::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 700px 500px at 80% 20%, rgba(212, 118, 138, .15) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 10% 80%, rgba(122, 155, 126, .12) 0%, transparent 70%);
}
.auth-left {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 4rem; position: relative; z-index: 1;
}
.auth-brand { font-family: var(--serif); font-size: 2rem; font-weight: 500; color: var(--rose); margin-bottom: 0.5rem }
.auth-brand span { color: var(--sage) }
.auth-tagline { color: var(--mid); font-size: 1rem; margin-bottom: 3rem; max-width: 340px; line-height: 1.8 }
.auth-features { display: flex; flex-direction: column; gap: .75rem }
.auth-feat { display: flex; align-items: center; gap: .75rem; font-size: .88rem; color: var(--mid) }
.auth-feat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.auth-right {
  width: 460px; display: flex; align-items: center; justify-content: center;
  padding: 2rem; position: relative; z-index: 1;
}
.auth-card {
  background: white; border-radius: 28px; padding: 2.5rem;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 400px;
}
.auth-tabs {
  display: flex; gap: .25rem; background: var(--cream);
  border-radius: 100px; padding: .3rem; margin-bottom: 2rem;
}
.auth-tab {
  flex: 1; padding: .55rem; border-radius: 100px; border: none;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  background: transparent; color: var(--mid); transition: all .2s;
}
.auth-tab.active { background: white; color: var(--dark); box-shadow: 0 2px 8px rgba(0, 0, 0, .08) }
.btn-auth {
  width: 100%; padding: .85rem; background: var(--rose); color: white; border: none;
  border-radius: 12px; font-size: .9rem; font-weight: 600; letter-spacing: .03em;
  transition: all .2s; margin-top: .5rem;
}
.btn-auth:hover { background: #c0667a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(212, 118, 138, .3) }
.auth-divider { text-align: center; font-size: .78rem; color: var(--light); margin: .75rem 0 }
.auth-err {
  background: var(--rose-p); color: var(--rose); border: 1px solid var(--rose-l);
  border-radius: 10px; padding: .6rem .9rem; font-size: .82rem; margin-bottom: 1rem;
}