.dd-inpaint {
    --dd-bg: #20242b; --dd-panel: #292f38; --dd-line: #414955; --dd-text: #edf0f4; --dd-muted: #a8b2c1; --dd-accent: #ffc079;
    color-scheme: dark; color: var(--dd-text); background: var(--dd-bg); border: 1px solid var(--dd-line); border-radius: 8px;
    font: 12px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif; width: 100%; min-width: 0; height: 100%;
    display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; outline: none; user-select: none; container-type: inline-size;
}
.dd-inpaint *, .dd-inpaint *::before, .dd-inpaint *::after { box-sizing: border-box; }
.dd-inpaint:focus-within { border-color: #9f7950; }
.dd-inpaint .dd-head { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; padding: 6px 12px 2px; align-items: center; }
.dd-inpaint .dd-brand { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--dd-accent); }
.dd-inpaint .dd-dimensions, .dd-inpaint .dd-zoom { font-size: 11px; color: var(--dd-muted); font-variant-numeric: tabular-nums; }
.dd-inpaint .dd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 10px; }
.dd-inpaint button { color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 4px; padding: 5px 9px; min-height: 28px; font: inherit; cursor: pointer; white-space: nowrap; }
.dd-inpaint button:hover { background: #39424e; border-color: #707c8d; }
.dd-inpaint button:focus-visible, .dd-inpaint input:focus-visible { outline: 2px solid var(--dd-accent); outline-offset: 2px; }
.dd-inpaint button.dd-primary { background: #57432e; color: #ffe0b8; border-color: #87613b; }
.dd-inpaint button.dd-active { color: #ffd8a4; background: #57432e; border-color: #b28552; }
.dd-inpaint button:disabled { opacity: .38; cursor: default; }
.dd-inpaint .dd-tools button { flex: 1; }
.dd-inpaint .dd-files { flex-wrap: nowrap; }
.dd-inpaint .dd-filename { font-size: 11px; color: var(--dd-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 5px; }
.dd-inpaint .dd-settings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 6px 12px 9px; }
.dd-inpaint .dd-slider { min-width: 0; }
.dd-inpaint .dd-slider-label { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--dd-muted); }
.dd-inpaint .dd-slider output { color: var(--dd-text); font-variant-numeric: tabular-nums; }
.dd-inpaint input[type="range"] { display: block; width: 100%; min-width: 0; height: 18px; margin: 3px 0 0; accent-color: #f3b06a; cursor: pointer; }
.dd-inpaint .dd-stage { position: relative; flex: 1 1 290px; min-height: 170px; overflow: hidden; border-top: 1px solid var(--dd-line); border-bottom: 1px solid var(--dd-line); background-color: #161a20; background-image: linear-gradient(45deg, #222831 25%, transparent 25%), linear-gradient(-45deg, #222831 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222831 75%), linear-gradient(-45deg, transparent 75%, #222831 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.dd-inpaint .dd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.dd-inpaint .dd-stage.dd-pan canvas { cursor: grab; }
.dd-inpaint .dd-stage.dd-erasing canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 19 18 7a3 3 0 0 1 4 0l5 5a3 3 0 0 1 0 4L16 27h-5l-5-5a2 2 0 0 1 0-3Z' fill='%23ffb3c0' stroke='%23151a22' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m7 19 7-7 10 10-5 5h-8l-4-4a3 3 0 0 1 0-4Z' fill='%23fff4f6'/%3E%3Cpath d='m13 13 10 10M11 28h17' fill='none' stroke='%23151a22' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair; }
.dd-inpaint .dd-stage.dd-drop { outline: 3px solid var(--dd-accent); outline-offset: -3px; }
.dd-inpaint .dd-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; gap: 6px; color: var(--dd-muted); padding: 15px; text-align: center; }
.dd-inpaint .dd-empty[hidden] { display: none; }
.dd-inpaint .dd-empty-symbol { font-size: 34px; color: var(--dd-accent); line-height: 1; font-weight: 200; }
.dd-inpaint .dd-empty strong { font-weight: 500; color: var(--dd-text); }
.dd-inpaint .dd-actions { padding-top: 8px; }
.dd-inpaint .dd-actions button { font-size: 11px; padding-inline: 8px; }
.dd-inpaint .dd-viewbar { padding-top: 2px; padding-bottom: 4px; }
.dd-inpaint .dd-viewbar button { min-height: 24px; padding: 3px 7px; font-size: 11px; }
.dd-inpaint .dd-spacer { flex: 1; }
.dd-inpaint .dd-embed { display: flex; align-items: center; gap: 5px; padding: 4px 10px 0; font-size: 11px; color: var(--dd-muted); cursor: pointer; }
.dd-inpaint .dd-embed input { accent-color: #e9ab68; margin: 0; }
.dd-inpaint .dd-status { padding: 5px 11px 8px; color: var(--dd-muted); font-size: 10px; min-height: 27px; overflow-wrap: anywhere; }
.dd-inpaint .dd-upload-progress { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; color: var(--dd-text); background: #20242bee; border-radius: 4px; font-size: 11px; pointer-events: none; }
.dd-inpaint .dd-upload-bar { width: 100%; height: 6px; accent-color: #f3b06a; }
.dd-inline-minimal > .dd-upload-progress { position: absolute; z-index: 3; top: 34px; left: 5px; width: min(240px, calc(100% - 10px)); }
.dd-inpaint .dd-error { color: #ff9c92; }
.dd-inpaint [hidden] { display: none !important; }
.dd-inpaint .dd-parameters { flex: 0 0 auto; padding: 10px 12px 8px; border-top: 1px solid var(--dd-line); }
.dd-inpaint .dd-param-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 7px; }
.dd-inpaint .dd-param-header strong { font-weight: 500; font-size: 12px; }
.dd-inpaint .dd-param-placeholder { color: var(--dd-muted); padding-block: 4px; font-size: 11px; }
.dd-inpaint .dd-param-body { display: flex; flex-direction: column; gap: 8px; }
.dd-inpaint .dd-param-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dd-inpaint .dd-param-label { color: var(--dd-muted); font-size: 11px; }
.dd-inpaint .dd-param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dd-inpaint .dd-param-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.dd-inpaint .dd-param-pills button { flex: 1; font-size: 11px; padding: 5px 7px; }
.dd-inpaint .dd-param-number-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--dd-muted); font-size: 11px; }
.dd-inpaint .dd-param-field input[type="number"] { width: 86px; min-width: 0; padding: 4px 5px; border: 1px solid var(--dd-line); border-radius: 4px; background: var(--dd-panel); color: var(--dd-text); font: inherit; font-variant-numeric: tabular-nums; }
.dd-inpaint .dd-param-field select, .dd-inpaint .dd-param-header select { min-width: 0; max-width: 100%; color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 4px; padding: 5px; font: inherit; }
.dd-inpaint .dd-param-field:has(input[aria-label="Seed"]) input { width: 130px; }
.dd-inpaint .dd-param-resolution { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dd-inpaint .dd-param-resolution button { font-size: 11px; }
.dd-inpaint .dd-param-advanced { border-top: 1px solid var(--dd-line); padding-top: 7px; }
.dd-inpaint .dd-param-advanced summary { color: var(--dd-muted); cursor: pointer; font-size: 11px; }
.dd-inpaint .dd-param-advanced-body { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.dd-inpaint .dd-param-toggle { display: flex; gap: 6px; align-items: center; color: var(--dd-muted); font-size: 11px; }
.dd-inpaint .dd-param-toggle input { margin: 0; accent-color: #e9ab68; }
.dd-inpaint .dd-resize-handle { flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: var(--dd-muted); background: var(--dd-panel); border-top: 1px solid var(--dd-line); cursor: ns-resize; touch-action: none; font-size: 14px; line-height: 1; }
.dd-inpaint .dd-resize-handle:hover, .dd-inpaint .dd-resize-handle:focus-visible { color: var(--dd-accent); background: #39424e; outline: none; }
.dd-comparer .dd-compare-toolbar, .dd-comparer .dd-adoption { flex-wrap: nowrap; }
.dd-comparer .dd-compare-label { color: var(--dd-muted); font-size: 11px; white-space: nowrap; }
.dd-comparer select { min-width: 0; color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 4px; padding: 5px; font: inherit; }
.dd-comparer select:focus-visible { outline: 2px solid var(--dd-accent); }
.dd-comparer .dd-adoption { padding-block: 10px 4px; }
.dd-comparer .dd-adoption select { flex: 1; }
.dd-comparer .dd-compare-stage { min-height: 220px; }
.dd-comparer .dd-compare-stage canvas { cursor: ew-resize; }
.dd-inline-minimal { position: relative; border: 0; border-radius: 0; background: transparent; }
.dd-inline-minimal .dd-stage { border: 0; min-height: 170px; flex-basis: 0; }
.dd-inline-minimal > .dd-files { position: absolute; z-index: 2; left: 5px; top: 5px; padding: 0; }
.dd-inline-minimal > .dd-files button { min-height: 23px; padding: 2px 6px; font-size: 11px; opacity: .85; }
.dd-inline-minimal > .dd-files button:hover { opacity: 1; }
.dd-inline-minimal > .dd-resize-handle { position: absolute; z-index: 2; bottom: 0; width: 100%; height: 5px; min-height: 5px; border: 0; color: transparent; background: transparent; }
.dd-inline-minimal > .dd-resize-handle:hover { background: #ffc07966; }
.dd-inline-minimal > .dd-status:not([hidden]) { position: absolute; bottom: 6px; left: 0; right: 0; background: #20242bee; }
.dd-inline-minimal.dd-crop-mode > .dd-status:not([hidden]) { bottom: 40px; }
.dd-editor-controls { height: auto; flex: 0 0 auto; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.dd-editor-controls .dd-source-info { justify-content: space-between; }
.dd-editor-controls .dd-filename { padding-left: 0; flex: 1; }
.dd-workbench { height: 100%; border: 0; border-radius: 0; }
.dd-workbench-tools { flex: 0 0 auto; }
.dd-tools-placeholder { padding: 8px 12px; }
.dd-comparer { border: 0; border-radius: 0; }
.dd-comparer .dd-compare-stage { border: 0; }
.dd-comparer .dd-compare-toolbar { padding-top: 5px; padding-bottom: 2px; }
.dd-comparer .dd-compare-toolbar .dd-dimensions { margin-left: 5px; }
.dd-comparer .dd-adoption { padding-top: 3px; padding-bottom: 5px; }
.dd-comparer .dd-compare-captions { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; pointer-events: none; }
.dd-comparer .dd-compare-captions span { background: #171d27cc; color: #f1e3cf; padding: 3px 7px; border-radius: 3px; font-size: 11px; }
@container (max-width: 380px) { .dd-inpaint .dd-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; } }
.dd-group-presets { border: 0; border-radius: 4px; container-type: inline-size; contain: size layout; }
.dd-gp-toolbar, .dd-gp-form { display: flex; align-items: center; gap: 7px; padding: 9px 10px; flex: 0 0 auto; }
.dd-gp-toolbar { justify-content: space-between; border-bottom: 1px solid var(--dd-line); }
.dd-gp-toolbar-actions { display: flex; align-items: center; gap: 5px; }
.dd-gp-toolbar strong { font-size: 12px; font-weight: 500; }
.dd-group-presets button { min-height: 26px; padding: 4px 7px; font-size: 11px; }
.dd-gp-form input { flex: 1; min-width: 0; color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); padding: 5px 6px; font: inherit; border-radius: 3px; }
.dd-gp-body { display: grid; grid-template-columns: minmax(130px, 40%) minmax(0, 1fr); flex: 1; min-height: 0; }
.dd-gp-body.dd-gp-collapsed { grid-template-columns: minmax(0, 1fr); }
.dd-gp-presets { border-right: 1px solid var(--dd-line); padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.dd-gp-presets button { text-align: left; flex: 0 0 auto; white-space: normal; overflow-wrap: anywhere; }
.dd-gp-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dd-gp-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
.dd-gp-detail-head strong { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-gp-groups { flex: 1; min-height: 0; padding: 0 8px; }
.dd-gp-scroll { overflow-y: auto; overscroll-behavior: contain; }
.dd-gp-group { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid #41495566; }
.dd-gp-color { flex: 0 0 4px; width: 4px; height: 20px; border-radius: 2px; }
.dd-gp-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-gp-group select { max-width: 118px; color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 3px; padding: 4px; font: inherit; font-size: 11px; }
.dd-gp-changed .dd-gp-group-name { color: var(--dd-accent); }
.dd-gp-footer { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 8px; }
.dd-gp-status { flex: 0 0 auto; padding: 5px 10px 7px; color: var(--dd-muted); font-size: 10px; border-top: 1px solid var(--dd-line); }
.dd-gp-empty { color: var(--dd-muted); padding: 10px 4px; font-size: 11px; }

/* Compact controls shared by the mask and crop/blend modes. */
.dd-inline-minimal .dd-mode-select { position:absolute; z-index:3; top:5px; right:5px; max-width:42%; color:var(--dd-text); background:#252b34e8; border:1px solid var(--dd-line); border-radius:4px; height:23px; font:11px "Segoe UI","Microsoft YaHei",sans-serif; padding:1px 3px; pointer-events:auto; }
.dd-inline-minimal .dd-crop-bar { position:absolute; z-index:3; bottom:7px; left:5px; right:5px; display:flex; gap:3px; flex-wrap:wrap; align-items:center; width:fit-content; max-width:calc(100% - 10px); background:#20242be8; border-radius:4px; padding:3px; pointer-events:auto; }
.dd-inline-minimal .dd-crop-bar button { min-height:23px; height:23px; padding:1px 6px; min-width:24px; }
.dd-inline-minimal .dd-crop-bar select,.dd-inline-minimal .dd-crop-custom input { color:var(--dd-text); background:var(--dd-panel); border:1px solid var(--dd-line); border-radius:3px; height:23px; font:11px "Segoe UI","Microsoft YaHei",sans-serif; max-width:112px; }
.dd-inline-minimal .dd-crop-custom { display:flex; gap:3px; }
.dd-inline-minimal .dd-crop-custom input { width:66px; }
.dd-inline-minimal > .dd-files { right:auto; }


.dd-workbench .dd-workbench-fold {flex:0 0 auto;border-bottom:1px solid var(--dd-line);}
.dd-workbench .dd-workbench-fold:not([open]) > :not(summary) {display:none !important;}
.dd-workbench .dd-workbench-fold>summary {padding:6px 10px;color:var(--dd-muted);font-size:11px;cursor:pointer;list-style:none;display:flex;gap:6px;align-items:center;}
.dd-workbench .dd-workbench-fold>summary::before {content:"▸";font-size:10px;color:var(--dd-accent);}
.dd-workbench .dd-workbench-fold[open]>summary::before {content:"▾";}
.dd-workbench .dd-workbench-fold>summary:hover {color:var(--dd-text);background:#ffffff05;}
.dd-workbench .dd-workbench-fold>summary:focus-visible {outline:1px solid var(--dd-accent);outline-offset:-2px;}
.dd-workbench .dd-param-mask-settings {display:flex;flex-direction:column;gap:8px;padding:7px 12px 9px;}
.dd-workbench .dd-workbench-actions {flex:0 0 auto;}
.dd-workbench .dd-workbench-actions:empty {display:none;}
.dd-workbench .dd-workbench-actions .dd-actions {padding:6px 10px;gap:4px;}
.dd-workbench .dd-workbench-actions .dd-actions button {min-height:24px;padding:3px 7px;}

/* Network progress belongs to the image surface, never to the graph canvas. */
.dd-comparer .dd-preview-progress {position:absolute;left:10px;right:10px;bottom:12px;z-index:4;max-width:380px;padding:9px 12px;border:1px solid var(--dd-line);border-radius:5px;background:var(--dd-bg);color:var(--dd-text);pointer-events:none;font-size:12px;}
.dd-comparer .dd-preview-progress progress {display:block;width:100%;height:7px;margin-top:6px;accent-color:var(--dd-accent);}