#settings-dialog{width:min(780px,92vw);max-height:90dvh;padding:20px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff5df;font-family:'Barlow Condensed',sans-serif;text-align:left}
#settings-dialog::backdrop{background:#191c2344;backdrop-filter:blur(12px)}
#settings-title{font-size:clamp(32px,4vw,48px);text-transform:uppercase;margin:0 0 20px}
.settings-tabs{display:flex;gap:16px;margin-bottom:36px}
#settings-dialog button,.settings-button{font:600 22px 'Barlow Condensed',sans-serif;border:0;border-radius:2px;background:#fff5df;color:#151922;padding:12px 26px;cursor:pointer;text-transform:uppercase;box-shadow:none}
#settings-dialog button:hover,.settings-button:hover{background:#e52b3f;color:white}
#settings-dialog [role=tab]{min-width:160px;background:transparent;color:#fff5df}
#settings-dialog [aria-selected=true]{background:#fff5df;color:#151922}
#settings-dialog [hidden]{display:none!important}
.settings-line{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:30px 0;font-size:28px;font-weight:600}
#settings-dialog input[type=range]{appearance:none;width:60%;height:10px;border:0;border-radius:10px;padding:0;background:linear-gradient(to right,#ee293e var(--volume),#fff5df44 var(--volume));cursor:pointer}
#settings-dialog input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:#fff5df}
#settings-dialog input[type=checkbox]{appearance:none;width:58px;height:30px;border:0;border-radius:20px;background:#fff5df44;cursor:pointer;position:relative}
#settings-dialog input[type=checkbox]:checked{background:#ee293e}
#settings-dialog input[type=checkbox]::after{content:'';position:absolute;left:3px;top:3px;width:24px;height:24px;background:#fff5df;border-radius:50%}
#settings-dialog input[type=checkbox]:checked::after{left:31px}
.settings-note{font-size:18px;color:#e1d9ca;margin:10px 0 20px}
#settings-dialog .settings-back{margin-top:28px}
.settings-photo{display:flex;align-items:center;gap:24px;margin-bottom:22px}.settings-photo img{width:80px;height:80px;object-fit:cover;border-radius:4px}
#settings-dialog label{font-size:24px}.settings-name-row{display:flex;gap:16px;margin-top:8px}
#settings-name{flex:1;min-width:0;background:#191c2355;color:#fff5df;border:1px solid #fff5df40;padding:10px 14px;font:24px 'Barlow Condensed',sans-serif}
#settings-dialog .account-settings{border-top:1px solid #fff5df30;margin-top:24px}#settings-dialog #reveal-code{width:auto;font-size:20px;margin-top:12px}#settings-feedback{min-height:24px;font-size:18px}
.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:550px){#settings-dialog{padding:12px}.settings-tabs{gap:8px}#settings-dialog [role=tab]{min-width:0;flex:1}.settings-line{font-size:23px}.settings-name-row{gap:8px}.settings-photo{gap:12px}#settings-dialog button,.settings-button{font-size:19px;padding:11px 18px}}

/* Keep header, tabs and return action stationary across both panels. */
#settings-dialog { height:min(720px,90dvh); box-sizing:border-box; overflow:hidden; }
#settings-dialog[open] { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
#settings-dialog [role=tabpanel] { grid-row:3; min-height:0; overflow-y:auto; scrollbar-gutter:stable; padding-right:8px; }
#settings-dialog .settings-back { grid-row:4; justify-self:start; margin-top:20px; }
.settings-photo-actions { min-width:0; }
#settings-dialog .photo-limit { margin:8px 0 0; font-size:16px; }
#photo-feedback { min-height:40px; margin:8px 0 0; font-size:18px; color:#fff5df; }
#photo-feedback.is-error { color:#ffd4cb; }
@media(max-height:600px) { .settings-tabs { margin-bottom:16px; } #settings-title { margin-bottom:12px; } }

/* Compact profile layout fits both tabs without a desktop scrollbar. */
#settings-dialog [role=tabpanel] { scrollbar-gutter:auto; padding-right:0; }
#settings-dialog .settings-tabs { margin-bottom:20px; }
#settings-dialog .settings-photo { margin-bottom:12px; gap:20px; }
#settings-dialog .settings-photo img { width:72px; height:72px; }
#photo-feedback { min-height:22px; margin-top:4px; font-size:16px; }
#settings-dialog .settings-note { margin:6px 0 10px; font-size:16px; }
#settings-dialog .account-settings { margin-top:12px; padding-top:12px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 16px; }
#settings-dialog #reveal-code { margin:0; padding:10px 16px; }
#settings-dialog #recovery-output { grid-column:1/-1; margin:0; min-height:44px; font-size:clamp(12px,2vw,18px); line-height:22px; overflow-wrap:anywhere; }
#settings-dialog #recovery-output[hidden] { display:block!important; visibility:hidden; }
#settings-dialog .account-settings .settings-note { grid-column:1/-1; margin:0; }
#settings-feedback { margin:8px 0 0; min-height:24px; }

/* Only the button and format hint align with the portrait; feedback has its own row. */
#settings-dialog .settings-photo { display:grid; grid-template-columns:72px minmax(0,1fr); gap:4px 20px; align-items:center; }
#settings-dialog .settings-photo-actions { justify-self:start; }
#settings-dialog .settings-photo-actions .photo-limit { margin:6px 0 0; line-height:18px; }
#settings-dialog #settings-photo-button { padding:10px 20px; line-height:24px; }
#settings-dialog #photo-feedback { grid-column:1/-1; margin:0; min-height:22px; }
#settings-dialog.is-leaving { animation:settings-leave .22s ease-in forwards; pointer-events:none; }
#settings-dialog.is-leaving::backdrop { animation:settings-backdrop-leave .22s ease-in forwards; }
@keyframes settings-leave { from { opacity:1; transform:scale(1); } to { opacity:0; transform:translateY(6px) scale(.975); } }
@keyframes settings-backdrop-leave { from { background:#191c2344; backdrop-filter:blur(12px); } to { background:transparent; backdrop-filter:blur(0); } }
@media(prefers-reduced-motion:reduce) { #settings-dialog.is-leaving,#settings-dialog.is-leaving::backdrop { animation:none; } }

/* Built-in portraits and upload share the same compact photo row. */
#settings-dialog .settings-photo-actions { display:grid; grid-template-columns:auto auto; align-items:center; gap:4px 12px; }
.settings-photo-choices { display:flex; gap:8px; grid-row:1/3; }
#settings-dialog .settings-photo-choices button { width:48px; height:48px; padding:0; border:2px solid transparent; border-radius:5px; overflow:hidden; }
#settings-dialog .settings-photo-choices button[aria-pressed="true"] { border-color:#fff5df; }
#settings-dialog .settings-photo-choices img { width:100%; height:100%; display:block; }
#settings-dialog .settings-photo-actions .photo-limit { grid-column:2; margin:0; }
@media(max-width:480px) { #settings-dialog .settings-photo-actions { gap:4px 8px; } #settings-dialog .settings-photo-choices button { width:36px; height:36px; } #settings-dialog #settings-photo-button { padding:8px; font-size:16px; } #settings-dialog .settings-photo-actions .photo-limit { font-size:12px; line-height:14px; } }