.account-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 4px;
  padding: 0 8px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.account-nav:hover, .account-nav[aria-current="page"] { color: var(--gold-dark); }
.account-shell { max-width: 740px; padding-block: clamp(18px, 4vw, 42px); }
.account-panel { padding: clamp(16px, 4vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.account-panel h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 4vw, 2rem); }
.account-panel a { overflow-wrap: anywhere; }
.account-form { display: grid; gap: 10px; margin: 12px 0; }
.account-form label { display: grid; gap: 4px; color: var(--ink); font-weight: 650; min-width: 0; }
.account-form :is(input, select, textarea):not([type="checkbox"]) {
  width: 100%; min-width: 0; min-height: 44px; color: var(--ink); background: var(--paper);
  font: 1rem/1.4 system-ui; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
}
.account-form textarea { resize: vertical; }
.account-form fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.account-form fieldset label + label { margin-top: 8px; }
.account-form legend { font-weight: 650; padding-inline: 4px; }
.account-form button, .account-panel button { min-height: 44px; justify-self: start; }
.account-form button[disabled] { opacity: .62; cursor: default; }
.account-form small, .account-help { color: var(--muted); font-weight: 400; font-size: .85rem; margin: 0; }
.account-form .account-check, .account-checks label { display: flex; align-items: center; gap: 9px; min-height: 44px; }
.account-check input, .account-checks input { width: 18px; height: 18px; flex: none; accent-color: var(--teal); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-status { color: var(--ink); margin: 0; }
.account-notice { background: var(--cream); color: var(--ink); border-inline-start: 3px solid var(--gold); padding: 10px 12px; margin: 0 0 14px; }
.account-menu { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 15px; }
.account-menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); }
.account-panel details { border-top: 1px solid var(--line); }
.account-panel summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 650; }
.account-identity { display: flex; gap: 12px; align-items: center; }
.account-identity h2 { margin: 0; }
.account-avatar { display: grid; place-items: center; width: 45px; height: 45px; flex: none; border-radius: 50%; color: var(--gold-dark); background: var(--cream); }
.account-preview { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; }
[data-theme="dark"] .account-form .primary { background: var(--teal); color: var(--paper); }
[data-theme="dark"] .account-panel .outline { background: var(--cream); color: var(--ink); }
@media (max-width: 480px) { .account-grid { grid-template-columns: 1fr; } }
.account-avatar .account-portrait { width: 100%; height: 100%; display: block; border-radius: 50%; }
.account-nav .account-avatar { width: 25px; height: 25px; }
.account-nav .account-avatar > svg:not(.account-portrait) { width: 15px; height: 15px; }
.account-avatars { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 8px; margin: 5px 0 9px; }
.account-avatars label {
  justify-items: center; align-content: start; gap: 5px; min-height: 92px; padding: 7px 4px;
  border: 1px solid var(--line); border-radius: 8px; text-align: center; font-size: .78rem;
}
.account-avatars label:has(input:checked) { border-color: var(--gold-dark); background: var(--cream); }
.account-avatars label + label { margin-top: 0; }
.account-avatars input { margin: 0; accent-color: var(--teal); }