/* Reuse the administrator dialog's visual header, tabs, scrolling body and footer only. */
#user-settings { --modal-width:660px; --modal-gap-x:16px; --modal-gap-y:16px; padding:0; overflow:hidden; }
#user-settings[open] { display:flex; flex-direction:column; }
#user-settings .dialog-close { top:12px; right:12px; width:44px; height:44px; padding:0; }
#user-settings h2 { margin:5px 0 8px; padding-right:44px; font-size:23px; }
#user-settings [role="tabpanel"] { display:flex; flex-direction:column; min-height:0; }
#user-settings p { line-height:1.6; }
#user-settings .muted { color:var(--muted); }
#user-sound-status { min-height:22px; margin:4px 0; font-size:12px; color:var(--mint); }
.sound-volume-row { margin:20px 0; }
.sound-volume-row > label { display:flex; align-items:center; justify-content:space-between; font-weight:600; }
.sound-volume-row output { min-width:4ch; color:var(--mint); text-align:right; font-variant-numeric:tabular-nums; }
.sound-volume-controls { display:flex; align-items:center; gap:20px; }
.sound-volume-controls input[type="range"] { flex:1; min-width:0; height:44px; margin:0; accent-color:var(--mint); }
.sound-volume-controls label { display:inline-flex; align-items:center; gap:6px; min-height:44px; white-space:nowrap; }
.sound-volume-controls input[type="checkbox"] { accent-color:var(--mint); }