.account-body { min-height: 100vh; background: var(--bg); }
.account-page { max-width: 42rem; margin: 3rem auto; padding: 0 1.25rem 3rem; }
.account-page h1 { margin: .4rem 0 1rem; font-family: var(--font-display); line-height: 1.2; }
.account-page section { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.account-page form { display: grid; gap: .75rem; margin: 1.25rem 0; }
.account-page input:not([type=checkbox]), .account-page select { width: 100%; min-height: 44px; box-sizing: border-box; }
.account-page button { min-height: 44px; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.account-checkbox { display: flex; gap: .75rem; align-items: center; min-height: 44px; }
.account-page [hidden] { display: none; }
.account-page :focus-visible { outline: 3px solid var(--accent, #547c3d); outline-offset: 3px; }
#account-status { min-height: 1.5em; color: var(--muted); }
.account-page a { color: var(--accent); text-underline-offset: .2em; }
.account-page a:hover { color: var(--text); }
.account-page p { overflow-wrap: anywhere; }

.account-body .app-nav { display: flex; flex-wrap: wrap; }
@media (max-width: 900px) {
  .account-body .app-shell { height: auto; flex-wrap: wrap; padding-block: 12px; gap: 8px; }
  .account-body .app-nav { flex-basis: 100%; }
}