.bg-workbench [hidden] { display: none !important; }
.bg-workbench .utility-dialog { width: min(1500px,calc(100vw - 24px)); max-height: 94dvh; border-radius: 8px; padding: 20px; background: #fff; }
.bg-workbench .utility-header p { margin: 4px 0 0; font-size: .84rem; color: #526277; }
.bg-workbench button { min-height: 40px; width: auto; border-radius: 8px; }
.bg-workbench .utility-header-actions { flex: 0 0 auto; }
.bg-workbench .utility-close,.bg-workbench .utility-reset,.bg-workbench .utility-guide-trigger { width: 40px; min-width: 40px; flex: 0 0 40px; padding: 0; }
.bg-workbench .utility-guide-trigger { width: 28px; min-width: 28px; min-height: 28px; flex-basis: 28px; }
.bg-workbench button:not(.utility-primary):not(.utility-success):not(.utility-close):not(.utility-reset):not(.utility-guide-trigger) { background: #f3f7fc; color: #1959ac; border: 1px solid #cbd9ea; box-shadow: none; padding: 7px 10px; font: inherit; font-size: .82rem; }
.bg-workbench button[aria-pressed=true] { background: #e2eeff !important; border-color: #256fd9 !important; }
.bg-workbench button:disabled { opacity: .48; cursor: not-allowed; }
.bg-workbench button:focus-visible,.bg-workbench input:focus-visible,.bg-workbench select:focus-visible,.bg-workbench canvas:focus-visible { outline: 3px solid #8eb8f2; outline-offset: 2px; }
.bg-workspace { display: grid; grid-template-columns: minmax(240px,285px) minmax(0,1fr); gap: 20px; }
.bg-controls { display: grid; align-content: start; gap: 12px; border-right: 1px solid #dce5f0; padding-right: 20px; min-width: 0; }
.bg-workbench label:not(.file-picker) { display: grid; gap: 6px; font-size: .83rem; font-weight: 650; color: #33465c; min-width: 0; }
.bg-workbench select { width: 100%; min-width: 0; border: 1px solid #cbd7e6; border-radius: 8px; padding: 9px; background: #fff; color: #172238; }
.bg-workbench input[type=range] { width: 100%; accent-color: #256fd9; }
.bg-workbench input[type=color] { width: 100%; height: 40px; border: 1px solid #cbd7e6; border-radius: 8px; padding: 3px; }
.bg-workbench .file-picker { border-radius: 8px; }
.bg-workbench .file-picker.is-dragging { border: 2px solid #256fd9; background: #edf5ff; }
.bg-note { margin: 0; font-size: .75rem; line-height: 1.5; color: #526277; overflow-wrap: anywhere; }
#bgUtilityStatus { margin: 0; font-size: .83rem; line-height: 1.5; overflow-wrap: anywhere; color: #1959ac; }
#bgUtilityStatus[data-error=true] { color: #b42318; }
#bgUtilityProgress { width: 100%; height: 8px; accent-color: #256fd9; }
#bgUtilityColorTools { display: grid; gap: 8px; }
.bg-advanced { border-top: 1px solid #dce5f0; padding-top: 10px; }
.bg-advanced summary { cursor: pointer; font-size: .83rem; font-weight: 650; color: #1959ac; padding: 5px 0; }
.bg-advanced>div { display: grid; gap: 12px; padding-top: 12px; }
.bg-editor { display: grid; gap: 14px; min-width: 0; align-content: start; }
.bg-previews { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1fr); gap: 14px; }
.bg-previews>section { min-width: 0; }
.bg-previews h4 { margin: 0 0 8px; font-size: .95rem; }
.bg-preview-heading { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; font-size: .76rem; color: #526277; }
.bg-image-box { position: relative; height: clamp(290px,46vh,520px); overflow: auto; display: grid; place-items: center; background: #f5f8fc; border: 1px solid #dce5f0; border-radius: 8px; }
.bg-image-box p { padding: 20px; margin: 0; font-size: .83rem; color: #66778b; text-align: center; }
#bgUtilitySourceCanvas { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; }
#bgUtilitySourceCanvas.is-picking { cursor: crosshair; }
.bg-result-stage { display: block; background: repeating-conic-gradient(#edf1f6 0% 25%,#fff 0% 50%) 50%/18px 18px; touch-action: none; }
.bg-result-stage[data-background=white] { background: #fff; }
.bg-result-stage[data-background=black] { background: #172238; }
.bg-result-stage[data-background=color] { background: var(--bg-matte,#fff); }
#bgUtilityResultCanvas,#bgUtilityCompareCanvas { display: block; max-width: none; max-height: none; height: auto; border-radius: 0; margin: auto; touch-action: none; }
#bgUtilityResultCanvas { cursor: crosshair; }
.bg-result-stage.is-panning canvas { cursor: grab !important; }
.bg-tool-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bg-tool-row label { flex: 1 1 120px; }
.bg-editor-tools { display: grid; gap: 12px; border-top: 1px solid #dce5f0; padding-top: 12px; }
.bg-export { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; border-top: 1px solid #dce5f0; padding-top: 12px; }
.bg-export label { flex: 1 1 130px; }
.bg-export .bg-note { flex-basis: 100%; }
.bg-tabs { display: none; }
@media(max-width:1000px) { .bg-previews { grid-template-columns: minmax(0,1fr); } .bg-previews[data-tab=source] #bgUtilityResultPanel,.bg-previews[data-tab=result] #bgUtilitySourcePanel { display: none; } .bg-tabs { display: flex; gap: 8px; } .bg-tabs button { flex: 1; } }
@media(max-width:700px) {
    .bg-workbench { padding: 6px; }
    .bg-workbench .utility-dialog { width: calc(100vw - 12px); max-height: 98dvh; padding: 12px; }
    .bg-workbench .utility-header { gap: 8px; }
    .bg-workbench .utility-header>div:first-child { min-width: 0; }
    .bg-workbench .utility-title-row { flex-wrap: wrap; }
    .bg-workbench .utility-title-row h3 { font-size: 1.2rem; }
    .bg-workspace { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .bg-controls { border-right: 0; border-bottom: 1px solid #dce5f0; padding: 0 0 14px; gap: 10px; }
    .bg-image-box { height: 360px; }
    .bg-export { position: sticky; bottom: -12px; background: #fff; padding: 12px 0; z-index: 2; }
    .bg-export button { flex: 1 1 140px; }
    .bg-tool-row button { flex: 1 1 85px; }
}