:root { --appearance-overlay:var(--appearance-overlay-dark,.30); --appearance-tint:17 17 17; }
:root[data-theme="light"] { --appearance-overlay:var(--appearance-overlay-light,.72); --appearance-tint:253 253 252; }
html[data-background-enabled="true"] body { position:relative; isolation:isolate; background:transparent; }
html[data-background-enabled="true"] body::before,
html[data-background-enabled="true"] body::after { content:""; position:fixed; pointer-events:none; }
html[data-background-enabled="true"] body::before {
    inset:-35px; z-index:-2; background-image:var(--appearance-image); background-repeat:no-repeat;
    background-size:var(--appearance-fit,cover); background-position:var(--appearance-position,center);
    filter:brightness(var(--appearance-brightness,.72)) blur(var(--appearance-blur,3px)) contrast(var(--appearance-contrast,1.05)) saturate(var(--appearance-saturation,1));
}
html[data-background-enabled="true"] body::after { inset:0; z-index:-1; background:rgb(var(--appearance-tint)); opacity:var(--appearance-overlay); }
.appearance-settings { max-width:1000px; width:100%; box-sizing:border-box; }
.appearance-settings .appearance-switch { display:flex; align-items:center; gap:10px; padding:14px 0; }
.appearance-image-tools { display:flex; flex-wrap:wrap; align-items:end; gap:20px; margin:16px 0; }
.appearance-file { display:grid; gap:8px; max-width:100%; }
.appearance-file input { max-width:100%; }
.appearance-controls { margin:24px 0; }
.appearance-range { display:grid; grid-template-columns:minmax(160px,1fr) minmax(150px,2fr) 64px; gap:24px; align-items:center; padding:18px 0; border-bottom:1px solid var(--border-color); }
.appearance-range input { width:100%; padding:0; border:0; accent-color:var(--primary); cursor:pointer; }
.appearance-range output { text-align:right; font-variant-numeric:tabular-nums; }
.appearance-select { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; border-bottom:1px solid var(--border-color); }
.appearance-select select { min-width:180px; }
@media(max-width:640px) {
    .appearance-range { grid-template-columns:minmax(0,1fr) 54px; gap:10px; }
    .appearance-range > span { grid-column:1; }
    .appearance-range input { grid-column:1; grid-row:2; }
    .appearance-range output { grid-column:2; grid-row:2; }
    .appearance-select { align-items:flex-start; flex-direction:column; gap:10px; }
    .appearance-select select { width:100%; }
}