/* Appearance controls; the page behind the dialog remains intact while switching. */
.d11-launch{min-height:40px;white-space:nowrap;font-weight:600}
.d11-appearance{display:grid;gap:24px}
.d11-appearance p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.d11-appearance fieldset{border:0;padding:0;margin:0;min-width:0}
.d11-appearance legend{font-size:14px;font-weight:650;color:var(--ink);padding:0;margin-bottom:12px}
.d11-design-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
button.d11-design-option{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;padding:12px;border-radius:14px;gap:12px;background:var(--surface);border:1px solid var(--line);position:relative}
button.d11-design-option[aria-pressed=true]{border:2px solid var(--accent);padding:11px;background:var(--soft)}
.d11-choice-heading{display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-family:Manrope,Inter,system-ui,sans-serif;font-size:16px;font-weight:700}
.d11-choice-check{width:20px;height:20px;color:var(--accent);visibility:hidden}
[aria-pressed=true]>.d11-choice-heading>.d11-choice-check{visibility:visible}
.d11-design-option>small{display:block;color:var(--muted);font-size:12px;line-height:1.5;font-weight:400;min-height:36px}
.d11-preview{height:96px;border:1px solid #dedde4;border-radius:9px;display:grid;grid-template-columns:28px 1fr;gap:8px;padding:8px;background:#f6f7f9;color:#ae255f;overflow:hidden}
.d11-preview-sidebar{background:#fff;border-radius:4px;padding:7px 4px;display:flex;flex-direction:column;gap:6px}
.d11-preview-sidebar i{height:4px;background:#e7e5ec;border-radius:2px}
.d11-preview-sidebar i:first-child{background:currentColor}
.d11-preview-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:12px 20px 1fr;gap:6px;align-items:stretch}
.d11-preview-content i{display:block;background:#fff;border-radius:4px}
.d11-preview-content i:first-child{grid-column:1/-1;width:64%;height:6px;margin-top:3px;background:#76727e}
.d11-preview-content i:last-child{grid-column:1/-1;background:repeating-linear-gradient(#fff 0 9px,#edeaf0 9px 10px)}
.d11-preview-glass{background:linear-gradient(125deg,#f8dce9,#ebe4fd);border-radius:14px}
.d11-preview-glass .d11-preview-sidebar{background:#ffffffb8;border-radius:8px}
.d11-preview-glass .d11-preview-content i{border-radius:6px;box-shadow:0 2px 6px #56334c0c}
:root[data-theme=dark] .d11-preview{background:#191a1f;border-color:#47444f;color:#f5a0c5}
:root[data-theme=dark] .d11-preview-sidebar,:root[data-theme=dark] .d11-preview-content i{background:#303039}
:root[data-theme=dark] .d11-preview-sidebar i{background:#55525e}
:root[data-theme=dark] .d11-preview-sidebar i:first-child{background:currentColor}
:root[data-theme=dark] .d11-preview-content i:first-child{background:#b3abba}
:root[data-theme=dark] .d11-preview-content i:last-child{background:repeating-linear-gradient(#303039 0 9px,#48414e 9px 10px)}
:root[data-theme=dark] .d11-preview-glass{background:linear-gradient(125deg,#4a2b42,#29233e)}
:root[data-theme=dark] .d11-preview-glass .d11-preview-sidebar{background:#37323dcf}
.d11-color-options{display:flex;flex-wrap:wrap;gap:8px}
.d11-color-options button{flex:1;min-height:44px;min-width:112px}
.d11-color-options button[aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.d11-save-status{display:flex;align-items:flex-start;gap:8px;font-size:12px!important}
.d11-save-status .svg{width:16px;height:16px;margin-top:2px}
.d11-settings-footer{display:flex;justify-content:flex-end;padding-top:4px}
.d11-login-appearance{display:flex;justify-content:center;margin-top:16px}
@media(max-width:900px){.d11-launch .d11-launch-label{display:none}.d11-launch{width:44px;min-width:44px;padding:10px}.top-actions{gap:6px}.d11-design-options{gap:10px}.d11-appearance{gap:20px}}
@media(max-width:370px){.d11-design-options{grid-template-columns:1fr}.d11-preview{height:72px}.d11-design-option>small{min-height:0}}
@media(forced-colors:active){.d11-preview{display:none}button.d11-design-option[aria-pressed=true],.d11-color-options button[aria-pressed=true]{border:2px solid Highlight}.d11-choice-check{color:ButtonText}}

/* Keep wheel/touch scrolling inside an open dialog, including short dialogs. */
body.d11-modal-open{overflow:hidden}
:root[data-design] .dialog{overscroll-behavior:contain}