.account-settings { width: min(900px, calc(100vw - 40px)); max-height: min(820px, calc(100dvh - 48px)); margin: auto; padding: 0; border: var(--border-subtle); border-radius: 20px; background: var(--color-surface); color: var(--color-navy); box-shadow: var(--shadow-preview); overflow: hidden; }
.account-settings[open] { display: flex; flex-direction: column; animation: settings-in 240ms var(--ease-standard) both; }
.account-settings::backdrop { background: rgb(248 249 251 / 78%); backdrop-filter: blur(6px); animation: settings-backdrop 240ms ease both; }
.account-settings.is-closing { animation: settings-out 200ms ease both; }
.account-settings.is-closing::backdrop { animation: settings-backdrop 200ms ease reverse both; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; padding: 28px 32px; border-bottom: var(--border-subtle); }
.settings-heading p { margin: 0 0 8px; color: var(--color-primary); font-size: 10px; letter-spacing: .12em; }
.settings-heading h2 { margin: 0; font-family: var(--font-heading); font-size: 24px; letter-spacing: -.035em; }
.settings-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 10px; border: 0; border-radius: 50%; background: var(--color-surface-soft); color: var(--color-muted); cursor: pointer; }
.settings-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.settings-close:hover { color: var(--color-navy); background: var(--color-border); }
.settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 0; }
.settings-nav { display: flex; flex-direction: column; gap: 6px; padding: 24px 16px; border-right: var(--border-subtle); background: var(--color-surface-soft); }
.settings-nav button { min-height: 42px; padding: 0 16px; text-align: left; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--color-muted); cursor: pointer; font: inherit; font-size: 13px; }
.settings-nav button:hover { color: var(--color-navy); }
.settings-nav button[aria-selected=true] { background: var(--color-surface); color: var(--color-navy); border-color: var(--color-border); font-weight: 600; box-shadow: var(--shadow-subtle); }
.settings-content { padding: 28px 32px 24px; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.settings-content section:not([hidden]) { animation: settings-panel 180ms ease both; }
.settings-intro h3 { margin: 0 0 8px; font: 600 24px/1.25 var(--font-heading); letter-spacing: -.035em; }
.settings-content p { font-size: 12px; color: var(--color-muted); line-height: 1.65; margin: 5px 0 0; }
.settings-intro { margin-bottom: 24px; }
.settings-content h4 { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.settings-identity { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: var(--border-subtle); }
.settings-profile-avatar { display: grid; grid-row: 1 / 3; place-items: center; width: 48px; height: 48px; overflow: hidden; background: var(--color-navy); color: var(--color-surface); border-radius: 50%; font-size: 16px; }
.settings-profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.settings-profile-copy { grid-column: 2; grid-row: 1 / 3; }
.settings-photo-controls { grid-column: 3; grid-row: 1 / 3; }
.settings-photo-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding-inline: 12px; }
.settings-photo-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.settings-photo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.settings-photo-input:focus-visible + .settings-photo-button { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.settings-identity .settings-photo-note, .settings-identity .settings-photo-feedback { grid-column: 2 / -1; margin-top: 4px; font-size: 11px; }
.settings-identity .settings-photo-feedback { grid-column: 1 / -1; color: var(--color-success); }
.settings-identity .settings-photo-feedback[data-state="loading"] { color: var(--color-muted); }
.settings-identity .settings-photo-feedback[data-state="error"] { color: var(--color-error); }
.settings-identity strong { font-size: 13px; font-weight: 600; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.settings-fields label { display: grid; gap: 8px; font-size: 12px; }
.settings-wide { grid-column: 1 / -1; }
.settings-fields input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: var(--border-subtle); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-navy); font: inherit; }
.settings-fields input::placeholder { color: var(--color-muted); }
.settings-fields input:disabled { background: var(--color-surface-soft); opacity: .65; cursor: not-allowed; }
.settings-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: var(--border-subtle); margin-top: 28px; padding-top: 20px; }
.settings-form-footer p { max-width: 260px; font-size: 11px; margin: 0; }
.account-settings .flow-button { min-height: 40px; font-size: 12px; white-space: nowrap; }
.settings-content .settings-feedback { color: var(--color-success); min-height: 20px; font-size: 11px; margin-top: 10px; }
.settings-security-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.settings-security-row h4 { margin: 0; }
.settings-separated { border-top: var(--border-subtle); padding-top: 20px; margin-top: 20px; }
.settings-soon { color: var(--color-muted); background: var(--color-surface-soft); border-radius: var(--radius-sm); padding: 5px 8px; font-size: 10px; white-space: nowrap; }
.settings-password { border: 0; padding: 0; margin: 20px 0 24px; min-width: 0; }
.settings-content .settings-note { margin-top: 24px; font-size: 11px; }
.settings-balance { padding: 18px 20px; background: var(--color-surface-soft); border: var(--border-subtle); border-radius: var(--radius-card); display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 12px; }
.settings-balance > div { display: grid; gap: 8px; font-size: 12px; }
.settings-balance strong { font-size: 28px; font-weight: 600; }
.settings-balance small { color: var(--color-muted); font-size: 12px; font-weight: 400; }
.account-settings :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@keyframes settings-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes settings-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes settings-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes settings-panel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media(max-width: 680px) {
  .account-settings { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .settings-heading { padding: 20px; }
  .settings-heading h2 { font-size: 21px; }
  .settings-layout { display: flex; flex-direction: column; }
  .settings-nav { flex-direction: row; padding: 10px 16px; border-right: 0; border-bottom: var(--border-subtle); }
  .settings-nav button { flex: 1; text-align: center; padding: 0 8px; }
  .settings-content { padding: 24px 20px 16px; }
  .settings-fields { grid-template-columns: 1fr; }
  .settings-photo-note { grid-column: 1 / -1; }
  .settings-form-footer { align-items: stretch; flex-direction: column; gap: 12px; }
  .settings-form-footer p { max-width: none; }
  .settings-balance { flex-wrap: wrap; }
}
@media(prefers-reduced-motion: reduce) { .account-settings[open], .account-settings.is-closing, .account-settings::backdrop, .settings-content section:not([hidden]) { animation: none; } }

.settings-service-status { min-height: 1.5em; overflow-wrap: anywhere; }
.settings-topups { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 20px 0; }
.settings-topups legend { margin-bottom: 12px; font-size: 12px; font-weight: 600; }
.settings-topups label { display: flex; align-items: center; gap: 8px; padding: 12px; border: var(--border-subtle); border-radius: var(--radius-control); font-size: 13px; cursor: pointer; }
.settings-topups input { accent-color: var(--color-primary); }
.settings-ledger { list-style: none; padding: 0; font-size: 12px; }
.settings-ledger li { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: var(--border-subtle); }
.settings-ledger strong { white-space: nowrap; }
.settings-feedback[data-error="true"] { color: var(--color-error); }
.settings-content button:disabled { opacity: .55; cursor: not-allowed; }

.settings-avatar-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.settings-avatar-actions .flow-button { cursor: pointer; padding: 9px 12px; font-size: 12px; }
.settings-avatar-remove { padding: 8px 0; background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 12px; }
#profile-menu > summary { position: relative; overflow: hidden; }
#profile-menu > summary img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.settings-profile-avatar { position: relative; }
.settings-profile-avatar img { position: absolute; inset: 0; }