/* Account surfaces use the same quiet glass and geometry as the listening home. */
.account-settings, .account-profile { max-width: 1120px; margin-inline: auto; }
.settings-group, .account-profile .profile-head, .account-profile .stats,
.account-profile > section, .account-profile > div:has(> section), .auth-card, .modal {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--glass-highlight), transparent 45%), var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.settings-group { padding: 24px; margin-bottom: 20px; }
.settings-group > .section-head { margin: 0 0 8px; }
.settings-group h2.section { font-size: 19px; font-weight: 600; }
.settings-group .set-row { gap: 20px; padding: 20px 0; align-items: center; }
.settings-group .set-label { min-width: min(100%, 240px); flex: 1 1 280px; }
.settings-group .set-label .t, .settings-group .set-label .s,
.settings-group .sys-row .s, .settings-group .sys-row .t {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.settings-group .set-label .s { max-width: 62ch; line-height: 1.65; margin-top: 6px; }
.settings-group .set-choices { gap: 8px; flex: 0 1 480px; justify-content: flex-end; }
.settings-group .set-choice { min-height: 48px; min-width: 96px; flex: 1 1 96px; padding: 11px 14px; }
.settings-group .set-choice[aria-checked='true'] { background: var(--glass-hover); border-color: var(--acc2); }
.settings-group .set-inline { min-width: 0; max-width: 100%; }
.settings-group input { min-width: 0; max-width: 100%; min-height: 44px; }
.settings-group .btn-ghost, .settings-group .btn-primary { min-height: 44px; }
.settings-group > section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.settings-group .sys-row { align-items: center; }
.settings-group .sys-row .grow { min-width: 0; }
.settings-group .sys-row .s { font-size: 12px; margin-top: 5px; }
.account-profile .profile-head { padding: 24px; gap: 24px; margin-bottom: 16px; }
.account-profile .profile-head > div:last-child { min-width: 0; }
.account-profile .profile-head h1 { font-size: clamp(26px, 3vw, 36px); overflow-wrap: anywhere; margin: 5px 0 10px; }
.profile-label { font-size: 13px; color: var(--text2); }
.account-profile .profile-avatar { width: 88px; height: 88px; font-size: 32px; background: var(--glass-hover); color: var(--acc2); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.account-profile .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 12px; margin-bottom: 20px; }
.account-profile .stat { background: transparent; border: 0; padding: 14px 16px; max-width: none; min-width: 0; }
.account-profile .stat .v { font-size: 24px; color: var(--text); overflow-wrap: anywhere; }
.account-profile .stat .k { font-size: 12px; line-height: 1.5; color: var(--text2); }
.account-profile > .button-row { gap: 10px; margin-bottom: 28px; }
.account-profile > .button-row .btn-ghost { min-height: 44px; border: 1px solid var(--glass-edge); background: var(--glass-quiet); }
.account-profile > section, .account-profile > div:has(> section) { padding: 20px; margin-bottom: 20px; }
.account-profile .section-head { margin-bottom: 12px; }
.account-profile h2.section { font-size: 19px; font-weight: 600; }
.modal h2, .auth-card h1 { letter-spacing: -.5px; }
.modal .btn-ghost, .modal .btn-primary, .auth-switch button { min-height: 44px; }
.form-error[hidden] { display: none; }
.auth-card { background-color: var(--glass-quiet); }
.auth-card .brand { justify-content: flex-start; }
.auth-card .brand-mark { width: 44px; height: 44px; }
@media (max-width: 760px) {
  .settings-group { padding: 18px; margin-bottom: 14px; }
  .settings-group .set-row { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .settings-group .set-label { flex: none; min-width: 0; }
  .settings-group .set-choices { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-group .set-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .settings-group .set-choice { min-width: 88px; }
  .settings-group .set-inline input { flex: 1 1 140px; width: 140px; }
  .account-profile .profile-head { padding: 20px; gap: 16px; }
  .account-profile .profile-avatar { width: 64px; height: 64px; font-size: 26px; flex-shrink: 0; }
  .account-profile .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .account-profile .stat:last-child { grid-column: 1 / -1; }
  .account-profile > section, .account-profile > div:has(> section) { padding: 16px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .settings-group, .account-profile .profile-head, .account-profile .stats,
  .account-profile > section, .account-profile > div:has(> section), .auth-card, .modal { background: var(--bg2); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .settings-group, .account-profile .profile-head, .account-profile .stats,
  .account-profile > section, .account-profile > div:has(> section), .auth-card, .modal {
    background: var(--bg2); border-color: var(--text2); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}