dialog:has(.settings-panel) {width:min(420px,calc(100% - 28px));border-radius:20px;background:var(--surface);color:var(--text)}
.settings-panel {display:grid;gap:12px}
.settings-panel strong {display:block;font-size:14px}
.settings-panel small {display:block;margin-top:3px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.settings-account,.settings-appearance,.settings-export {display:flex;align-items:center;gap:13px;padding:15px;border-radius:13px;min-width:0}
.settings-account {background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface-soft))}
.settings-account .avatar {flex-shrink:0}
.settings-appearance {justify-content:space-between;border:1px solid var(--border);flex-wrap:wrap}
.settings-appearance .button,.settings-foot button {min-height:44px}
.settings-export {width:100%;text-align:left;border:1px solid color-mix(in srgb,#ba4958 34%,var(--border));background:color-mix(in srgb,#ba4958 9%,var(--surface));color:var(--text)}
.settings-export:hover {background:color-mix(in srgb,#ba4958 15%,var(--surface))}
.settings-symbol {display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#983946;color:#fff}
.settings-export>.icon {margin-left:auto;width:17px}
.settings-export[aria-busy=true] {opacity:1;cursor:progress}
.settings-export[aria-busy=true] .settings-symbol .icon {display:none}
.settings-export[aria-busy=true] .settings-symbol::before {content:'';width:15px;height:15px;border:2px solid #ffffff70;border-top-color:white;border-radius:50%;animation:settings-spin .8s linear infinite}
@keyframes settings-spin {to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.settings-export[aria-busy=true] .settings-symbol::before{animation:none}}
.settings-foot {display:flex;justify-content:flex-end;border-top:1px solid var(--border);padding-top:4px}
.settings-foot .text-button {color:var(--muted);gap:7px}
.settings-foot .icon {width:16px}