/* The image stays on the outer canvas. Data panels remain opaque. */
:root{--workspace-image:none;--workspace-shade:.55}
html[data-theme="dark"][data-background="image"] body{background-color:#101318;background-image:linear-gradient(rgb(12 16 22 / var(--workspace-shade)),rgb(12 16 22 / var(--workspace-shade))),var(--workspace-image);background-size:cover;background-position:center;background-attachment:fixed}
html[data-background="image"] .rp-layout,html[data-background="image"] .rp-main{background:transparent}
html[data-background="image"] .toolbar>div:first-child,html[data-background="image"] .rp-head{background:rgb(16 19 24 / .88);border-radius:12px;padding:14px 18px}
.background-dialog{width:min(580px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);box-sizing:border-box}
.background-dialog::backdrop{background:rgb(0 0 0 / .65)}
.background-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.background-heading h2{margin:0;font-size:21px}.background-heading button{font-size:24px;padding:3px 12px}
.background-options{display:grid;gap:8px;margin:18px 0;padding:0;border:0}.background-options legend{margin-bottom:10px;font-weight:600}.background-options label{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:10px;cursor:pointer}.background-options label:has(input:checked){border-color:var(--accent)}
.background-swatch{width:66px;height:42px;border-radius:6px;background:#101318;flex-shrink:0}.background-swatch.branded{background:url('/assets/background-lesorub-v1.jpg') center/cover}.background-swatch.custom{background:linear-gradient(135deg,#343d4a,#7d8796)}
.background-upload,.background-range{display:grid;gap:9px;margin-top:18px}.background-upload small{color:var(--muted)}.background-range input{width:100%;accent-color:var(--accent)}#background-status{font-size:13px;min-height:20px;color:var(--muted)}.background-dialog .actions{flex-wrap:wrap}
@media(max-width:600px){.background-dialog{padding:18px}.background-heading h2{font-size:18px}.background-options label{font-size:14px}}

.background-upload input[hidden]{display:none}
.background-upload button{justify-self:start}