.account-page { max-width: 680px; }
.account-page h1 { margin-top: 0; }
.account-page h2 { margin-bottom: 20px; }
.profile-photo-editor { display: flex; align-items: center; gap: 24px; margin-block: 24px 32px; }
.profile-photo-preview { display: grid; place-items: center; flex-shrink: 0; width: 112px; aspect-ratio: 1; border-radius: 24px; background: var(--qf-surface-soft); border: 1px solid var(--qf-line); overflow: hidden; font-size: 48px; font-weight: 750; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-editor p { font-size: 12px; color: var(--qf-muted); }
.profile-photo-editor input { max-width: 100%; font-size: 13px; }
.profile-photo-editor > div { min-width: 0; }
@media (max-width: 600px) { .profile-photo-editor { flex-direction: column; align-items: flex-start; } }
.account-page label { display: grid; gap: 6px; margin-block: 16px; font-weight: 650; }
.account-page input, .account-page textarea {
  width: 100%; padding: 12px; border: 1px solid var(--qf-line); border-radius: 6px;
  background: var(--qf-surface-soft); color: var(--qf-ink); font: inherit;
}
.account-page textarea:focus-visible { outline: 2px solid var(--qf-accent); }
#account-navigation { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-block: 20px; border-block: 1px solid var(--qf-line); }
#account-navigation button { padding: 4px 0; font-weight: 700; text-align: left; }
#account-navigation [aria-current] { color: var(--qf-accent); text-decoration: underline; text-underline-offset: 5px; }
#account-notice { min-height: 1.65em; overflow-wrap: anywhere; }
#account-notice[data-error="true"] { font-weight: 700; }
.account-page .account-check { display: flex; align-items: center; }
.account-check input { width: auto; }
#account-signout { margin-top: 24px; }
.account-studio { margin-top: 32px; font-size: 13px; }
@media (max-width: 600px) { .account-page { padding-inline: 24px; } }