/* =========================================================
   ACCOUNT — page-specific styles (loaded after styles.css)
   ========================================================= */

/* ---------- Nav account link ---------- */
.nav-account{ display:inline-flex; align-items:center; gap:6px; }
.nav-account svg{ width:16px; height:16px; }

/* ---------- Account section ---------- */
.account-section{ background:var(--cream); }
.account-wrap{ max-width:460px; margin:0 auto; }

/* ---------- Tabs ---------- */
.account-tabs{
  display:flex; background:#fff; border-radius:999px; padding:6px;
  box-shadow:0 12px 28px -20px rgba(23,4,48,0.4); margin-bottom:28px;
}
.account-tab{
  flex:1; text-align:center; padding:12px 0; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:0.92rem;
  color:var(--purple-700); background:none; border:none; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.account-tab.active{ background:var(--purple-950); color:var(--gold-300); }

/* ---------- Panels ---------- */
.account-panel{ display:none; }
.account-panel.active{ display:flex; flex-direction:column; gap:16px; }

.forgot-link{ align-self:flex-end; margin-top:-6px; font-size:0.82rem; color:var(--purple-700); }
.forgot-link:hover{ color:var(--gold-700); }

.account-switch-note{ text-align:center; font-size:0.85rem; color:var(--ink-soft); margin-top:20px; }
.account-switch-note button{
  background:none; border:none; padding:0; font:inherit; color:var(--purple-700);
  font-weight:600; cursor:pointer;
}
.account-switch-note button:hover{ color:var(--gold-700); }

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .account-tab{ font-size:0.84rem; padding:10px 0; }
}