.account-profile-dialog {
  box-sizing: border-box;
  font: var(--vot-type-body-medium);
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--vot-surface-container-high);
  color: var(--vot-text);
  border-radius: var(--vot-radius-xl);
}
.account-profile-header, .account-profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.account-profile-header h2 { margin: 0; font: var(--vot-type-headline-small); }
.account-profile-hint, .account-profile-form small { color: var(--vot-muted); line-height: 1.5; }
.account-profile-form { display: grid; gap: .5rem; }
.account-profile-form label { margin-top: .5rem; font-weight: 600; }
.account-profile-form input, .account-profile-form textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: .85rem 1rem; border: 0; border-radius: var(--vot-radius-md); background: var(--vot-surface); color: var(--vot-text); font: inherit; }
.account-profile-form textarea { resize: vertical; min-height: 7rem; }
.account-profile-form input:focus-visible, .account-profile-form textarea:focus-visible, .account-profile-dialog button:focus-visible { outline: 3px solid var(--vot-primary); outline-offset: 3px; }
.account-profile-dialog button { min-height: 48px; padding: .65rem 1.1rem; border: 0; border-radius: var(--vot-radius-full); cursor: pointer; font: inherit; font-weight: 600; white-space: normal; flex-shrink: 0; }
.account-profile-primary { background: var(--vot-primary); color: var(--vot-on-primary); }
.account-profile-secondary { background: var(--vot-surface-container); color: var(--vot-text); }
.account-profile-dialog button:disabled { opacity: .5; cursor: default; }
.account-profile-error { color: var(--vot-error); margin: .25rem 0; }
.account-profile-status { min-height: 1.5rem; color: var(--vot-primary); }
.account-profile-discard, .account-profile-notice { background: var(--vot-primary-container); color: var(--vot-on-primary-container); padding: 1rem; border-radius: var(--vot-radius-lg); margin-top: 1rem; }

.account-profile-header { position: sticky; top: -1rem; background: var(--vot-surface-container-high); z-index: 1; padding-block: .25rem; }
.account-profile-actions { justify-content: flex-end; }
@media (max-width: 480px) {
  .account-profile-dialog { padding: 1rem; }
  .account-profile-header { gap: .5rem; flex-wrap: nowrap; }
  .account-profile-header h2 { font: var(--vot-type-title-large); }
  .account-profile-form textarea { min-height: 6rem; }
}

.account-profile-hint { margin: .75rem 0 1rem; }
.account-profile-overview { display: grid; gap: 1.5rem; }
.account-profile-hero { padding: clamp(1.25rem, 4vw, 2rem); background: var(--vot-primary-container); color: var(--vot-on-primary-container); border-radius: var(--vot-shape-expressive-hero); }
.account-profile-eyebrow { font: var(--vot-type-label-large); }
.account-profile-name { margin: .75rem 0 1.25rem; font: var(--vot-type-headline-large); overflow-wrap: anywhere; }
.account-profile-private { display: inline-block; font: var(--vot-type-label-medium); }
.account-profile-details { display: grid; align-items: start; grid-template-columns: minmax(5rem, 1fr) minmax(0, 3fr); gap: 1.25rem; margin: 0; }
.account-profile-details > div { min-width: 0; padding: 1.25rem; background: var(--vot-surface-container); border-radius: var(--vot-radius-lg); }
.account-profile-details dt { color: var(--vot-muted); font: var(--vot-type-label-large); margin-bottom: .65rem; }
.account-profile-details dd { margin: 0; overflow-wrap: anywhere; }
.account-profile-biography { white-space: pre-wrap; line-height: 1.6; }
.account-profile-edit { justify-self: end; }
.account-profile-dialog button { transition: transform 120ms ease; }
.account-profile-dialog button:active:not(:disabled) { transform: scale(.97); }
@media (max-width: 480px) {
  .account-profile-details { grid-template-columns: 1fr; gap: .75rem; }
  .account-profile-name { font: var(--vot-type-headline-medium); }
  .account-profile-edit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .account-profile-dialog button { transition: none; }
  .account-profile-dialog button:active:not(:disabled) { transform: none; }
}