.account-root { max-inline-size: 52rem; }
.account-root .section-heading { margin-block-end: var(--space-xl); }
.account-panel { padding-block: var(--space-lg); border-block-start: 1px solid var(--color-rule); }
.account-panel h2 { margin: 0 0 var(--space-sm); font-family: var(--font-body); font-size: 1.25rem; line-height: 1.5; }
.account-panel p { max-inline-size: 42rem; line-height: 1.75; text-wrap: pretty; }
.account-identity { overflow-wrap: anywhere; font-weight: 600; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.account-actions .button { min-inline-size: 10rem; }
.account-local-note { color: var(--color-muted); border-block-start: 1px solid var(--color-rule); padding-block-start: var(--space-lg); margin-block-start: var(--space-xl); font-size: .9375rem; line-height: 1.75; }
.account-feedback { color: var(--color-error); }
.account-verification { color: var(--color-muted); }
.account-verification[data-verified=true] { color: var(--color-success); }
/* Clerk uses its own focus-trapped modal, with the same fonts and control vocabulary. */
.cl-modalBackdrop { z-index: 600; }
.cl-rootBox { font-family: var(--font-body); }
.cl-modalContent > .cl-rootBox { max-inline-size: 100%; min-inline-size: 0; }
.cl-cardBox,.cl-card { max-inline-size: 100%; }
.cl-formButtonPrimary,.cl-socialButtonsBlockButton,.cl-formFieldInput { min-block-size: var(--size-control); }
.cl-formButtonPrimary { text-wrap: balance; white-space: normal; }
html[lang=ar] .cl-rootBox { direction: rtl; font-family: 'IBM Plex Sans Arabic',var(--font-body); }
html[lang=ar] .account-panel h2 { font-weight: 500; }
@media(max-width:480px) {
  .account-actions { display: grid; grid-template-columns: 1fr; }
  .account-actions .button { inline-size: 100%; min-inline-size: 0; }
  .cl-modalContent { max-inline-size: calc(100vw - 1.5rem); }
  .cl-card,.cl-footer { padding-inline: min(1.5rem, 5vw); }
  .cl-socialButtonsBlockButtonText { white-space: normal; text-wrap: balance; }
}
@media(prefers-reduced-motion:reduce) { .cl-rootBox * { animation:none!important;transition:none!important; } }