.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-stage); touch-action: none; }
#editor-canvas, #before-canvas { display: block; width: 100%; height: 100%; }
.stage.is-direct-pan #editor-canvas, .stage.is-direct-pan #before-canvas, .stage.is-pan-ready canvas { cursor: grab; }
.stage.is-panning canvas { cursor: grabbing; }

.zoom-controls { position: absolute; z-index: 14; left: 14px; bottom: 14px; display: flex; overflow: hidden; background: rgba(21, 24, 30, .94); border: 1px solid var(--color-border); border-radius: 9px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(10px); }
.zoom-controls .icon-button, .zoom-level { width: 34px; height: 32px; min-height: 32px; padding: 7px; border: 0; border-radius: 0; background: transparent; }
.zoom-level { width: 60px; color: var(--color-text-muted); cursor: pointer; font-size: var(--text-xs); }
.zoom-controls button + button { border-left: 1px solid var(--color-border); }
.zoom-controls button:hover { color: var(--color-text); background: rgba(255, 255, 255, .06); }
.zoom-controls button[aria-pressed="true"] { color: #ddd6ff; background: var(--color-accent-soft); }
.stage.hide-edit-overlays .crop-overlay,
.stage.hide-edit-overlays .retouch-overlay,
.stage.hide-edit-overlays .mask-overlay,
.stage.hide-edit-overlays .mask-brush-cursor { visibility: hidden; pointer-events: none; }
.stage.is-side-by-side #before-canvas, .stage.is-side-by-side #editor-canvas { position: absolute; top: 0; width: 50%; height: 100%; }
.stage.is-side-by-side #before-canvas { left: 0; border-right: 1px solid var(--color-border-strong); }
.stage.is-side-by-side #editor-canvas { right: 0; }

.overview-grid { position: absolute; inset: 0; z-index: 15; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-content: start; gap: 12px; overflow: auto; padding: 18px; background: var(--color-stage); }
.overview-item { position: relative; display: grid; grid-template-rows: minmax(110px, 1fr) auto; min-width: 0; padding: 5px; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; }
.overview-item img { width: 100%; height: 100%; min-height: 110px; object-fit: contain; background: #08090c; border-radius: 7px; }
.overview-item span { overflow: hidden; padding: 8px 4px 3px; text-overflow: ellipsis; white-space: nowrap; }
.overview-item.is-selected { background: var(--color-accent-soft); border-color: var(--color-accent-border); }
.overview-item.is-active { box-shadow: inset 0 0 0 1px var(--color-accent); }

.stage-empty, .stage-loading, .drop-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; }
.stage-empty svg { width: 60px; height: 60px; margin-bottom: 24px; fill: none; stroke: var(--color-text-faint); stroke-width: 1.15; }
.stage-empty h1 { margin: 0; font-size: var(--text-xl); font-weight: 500; letter-spacing: -.025em; }
.stage-empty p { max-width: 440px; margin: 12px 0 28px; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
.stage-empty .button { min-height: 38px; padding-inline: 18px; }
.stage-loading { z-index: 8; background: rgba(6, 7, 10, .72); color: var(--color-text-muted); }
.spinner { width: 24px; height: 24px; margin-bottom: 10px; border: 2px solid var(--color-border-strong); border-top-color: var(--color-accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.drop-overlay { z-index: 20; margin: 16px; color: #c9bfff; background: rgba(21, 24, 30, .94); border: 1px dashed var(--color-accent-border); border-radius: var(--radius-lg); font-size: var(--text-lg); }
.compatibility-banner { position: absolute; inset: 0 0 auto; z-index: 12; padding: 8px 12px; color: #f2d7a2; background: #342a19; border-bottom: 1px solid rgba(213, 165, 75, .38); font-size: var(--text-sm); }

.filmstrip-shell { position: relative; min-width: 0; padding: 9px 10px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.filmstrip { display: flex; gap: 8px; width: 100%; height: 100%; padding-right: 44px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--color-border-strong) transparent; scrollbar-width: thin; }
.filmstrip-remove { position: absolute; z-index: 2; top: 13px; right: 13px; color: #ed979b; background: rgba(16, 18, 23, .92); border-color: rgba(228, 108, 112, .28); }
.filmstrip-empty { display: grid; place-items: center; width: 100%; color: var(--color-text-faint); font-size: var(--text-sm); }
.mobile-photo-bar { display: none; }
.mobile-tool-tabs, .mobile-adjustment-tabs { display: none; }
.filmstrip-item { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 25px; flex: 0 0 142px; height: 126px; padding: 4px; overflow: hidden; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 10px; text-align: left; cursor: pointer; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.filmstrip-item:hover { background: rgba(255, 255, 255, .025); border-color: var(--color-border-strong); }
.filmstrip-item.is-selected { background: var(--color-accent-soft); border-color: rgba(108, 77, 255, .34); }
.filmstrip-item.is-active { border-color: var(--color-accent-border); box-shadow: inset 0 0 0 1px rgba(108, 77, 255, .32); }
.filmstrip-item:focus-within { box-shadow: var(--focus-ring); }
.filmstrip-select { position: absolute; inset: 0; z-index: 1; padding: 0; background: transparent; border: 0; border-radius: inherit; cursor: pointer; }
.filmstrip-thumb { position: relative; overflow: hidden; background: #08090c; border-radius: 8px; }
.filmstrip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.filmstrip-caption { display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; min-width: 0; }
.filmstrip-name { overflow: hidden; padding: 6px 3px 1px; color: var(--color-text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.filmstrip-item.is-active .filmstrip-name { color: var(--color-text); }
.photo-rating { position: absolute; z-index: 3; right: 4px; bottom: 29px; display: flex; padding: 2px 3px; background: rgba(8, 9, 12, .78); border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; }
.photo-star, .photo-pick { display: inline-grid; place-items: center; padding: 0; color: rgba(255, 255, 255, .42); background: transparent; border: 0; cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.photo-star { width: 19px; height: 19px; }
.photo-star svg { width: 13px; height: 13px; fill: transparent; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.photo-star:hover, .photo-star.is-filled { color: #c8bcff; }
.photo-star.is-filled svg { fill: currentColor; }
.photo-pick { position: relative; z-index: 3; width: 22px; height: 22px; border-radius: 5px; }
.photo-pick:hover { color: var(--color-text); background: rgba(255, 255, 255, .06); }
.photo-pick.is-picked { color: #d8d0ff; background: var(--color-accent-soft); }
.photo-pick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.edited-marker, .reference-marker { position: absolute; z-index: 2; top: 8px; background: var(--color-accent); }
.edited-marker { right: 8px; width: 7px; height: 7px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; }
.reference-marker { left: 8px; width: auto; height: auto; padding: 3px 5px; border-radius: 5px; color: var(--color-accent-text); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.missing-marker { position: absolute; inset: 4px 4px 29px; display: grid; place-items: center; background: #171217; color: #ed979b; border-radius: 8px; font-size: var(--text-xs); }

.tool-section { border-bottom: 1px solid var(--color-border); }
.tool-section.is-unavailable { opacity: .4; pointer-events: none; }
.tool-section > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.tool-section > summary:hover { background: rgba(255, 255, 255, .025); }
.tool-section > summary::-webkit-details-marker { display: none; }
.tool-section > summary::before { content: ''; width: 0; height: 0; margin-right: 10px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--color-text-faint); transform-origin: 40% 50%; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.tool-section[open] > summary::before { border-left-color: var(--color-text-muted); transform: rotate(90deg); }
.tool-section > summary > span { margin-right: auto; }
.section-reset { font-weight: 400; }
.controls, .tool-body { padding: 4px 16px 18px; }
.control-row { display: grid; grid-template-columns: 82px minmax(84px, 1fr) 44px; align-items: center; gap: 12px; min-height: 38px; }
.control-label { color: var(--color-text-muted); font-size: var(--text-sm); }
.control-value { width: 44px; height: 28px; padding: 2px 5px; color: var(--color-text-muted); background: rgba(255, 255, 255, .025); border-color: var(--color-border); border-radius: 7px; text-align: right; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.control-value:focus { color: var(--color-text); border-color: var(--color-accent-border); }
.control-value::-webkit-inner-spin-button, .control-value::-webkit-outer-spin-button { margin: 0; appearance: none; }
.control-row.is-edited .control-label, .control-row.is-edited .control-value { color: #c6bbff; }

input[type="range"] { --range-track: rgba(255, 255, 255, .18); width: 100%; height: 20px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--range-track); border-radius: 999px; }
input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; appearance: none; background: #d9dce4; border: 1px solid rgba(0, 0, 0, .45); border-radius: 50%; transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
input[type="range"]:hover::-webkit-slider-thumb { background: #fff; transform: scale(1.08); }
input[type="range"]::-moz-range-track { height: 3px; background: var(--range-track); border: 0; border-radius: 999px; }
input[type="range"]::-moz-range-progress { height: 3px; background: var(--range-track); border-radius: 999px; }
input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; background: #d9dce4; border: 1px solid rgba(0, 0, 0, .45); border-radius: 50%; }
input[type="range"]:disabled { opacity: .36; cursor: default; }
[data-adjustment="color.temperature"] input[type="range"], [data-local-adjustment="color.temperature"] input[type="range"] { --range-track: linear-gradient(90deg, #4f82ff, #777b86 50%, #f2a84b); }
[data-adjustment="color.tint"] input[type="range"], [data-local-adjustment="color.tint"] input[type="range"] { --range-track: linear-gradient(90deg, #52a86d, #777b86 50%, #c856b8); }

.field-label { display: block; margin-bottom: 8px; color: var(--color-text-muted); font-size: var(--text-sm); }
.tool-body select { width: 100%; min-height: 34px; padding: 5px 9px; }
.custom-aspect { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 8px; }
.custom-aspect input { min-width: 0; width: 100%; min-height: 32px; padding: 5px 7px; }
.button-row { display: flex; gap: 8px; margin-top: 12px; }
.button-row .button { flex: 1; }
.crop-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.crop-action { display: grid; place-items: center; min-width: 0; height: 40px; padding: 8px; }
.crop-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preset-tool-group + .preset-tool-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.preset-tool-group h3 { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; }
.preset-actions { margin-top: 8px; }
.tool-hint { margin: 10px 0; color: var(--color-text-faint); font-size: var(--text-xs); line-height: 1.5; }

.history-list { display: grid; gap: 4px; margin: 0; padding: 4px 16px 18px; color: var(--color-text-muted); font-size: var(--text-xs); list-style: none; }
.history-entry { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 2px; }
.history-toggle, .history-toggle-placeholder { width: 28px; height: 34px; }
.history-toggle { display: grid; place-items: center; padding: 5px; color: var(--color-text-faint); background: transparent; border: 0; border-radius: 7px; cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.history-toggle:hover { color: var(--color-text); background: rgba(255, 255, 255, .045); }
.history-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.history-toggle[aria-pressed="true"] { color: #bdb0ff; }
.history-toggle[aria-pressed="true"] .history-toggle-slash { display: none; }
.history-entry.is-disabled .history-step { opacity: .45; }
.history-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 5px 8px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.history-index { display: grid; place-items: center; width: 22px; height: 22px; color: var(--color-text-faint); background: rgba(255, 255, 255, .025); border: 1px solid var(--color-border); border-radius: 50%; font-variant-numeric: tabular-nums; }
.history-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-step:hover { color: var(--color-text); background: rgba(255, 255, 255, .035); border-color: var(--color-border); }
.history-step[aria-current="step"] { color: var(--color-text); background: var(--color-accent-soft); border-color: rgba(108, 77, 255, .28); }
.history-step[aria-current="step"] .history-index { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.history-step.is-future { opacity: .5; }
.history-step small { color: #bdb0ff; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }

.inspector-footer { display: grid; margin-top: auto; padding: 14px 16px; background: rgba(255, 255, 255, .012); border-top: 1px solid var(--color-border); }
.inspector-footer .reset-all { margin-top: 5px; color: #e98a8e; }

.crop-overlay, .retouch-overlay, .mask-overlay { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.crop-frame { position: absolute; border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62); pointer-events: auto; cursor: move; touch-action: none; }
.crop-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.42) 33.3%, rgba(255,255,255,.42) 33.6%, transparent 33.8%, transparent 66.2%, rgba(255,255,255,.42) 66.4%, rgba(255,255,255,.42) 66.7%, transparent 66.9%), linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.42) 33.3%, rgba(255,255,255,.42) 33.6%, transparent 33.8%, transparent 66.2%, rgba(255,255,255,.42) 66.4%, rgba(255,255,255,.42) 66.7%, transparent 66.9%); pointer-events: none; }
button[data-crop-handle] { position: absolute; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; }
button[data-crop-handle]::after { content: ''; position: absolute; inset: 5px; background: #fff; border: 1px solid #111; border-radius: 2px; }
[data-crop-handle="nw"] { left: -9px; top: -9px; cursor: nwse-resize; }
[data-crop-handle="n"] { left: calc(50% - 9px); top: -9px; cursor: ns-resize; }
[data-crop-handle="ne"] { right: -9px; top: -9px; cursor: nesw-resize; }
[data-crop-handle="e"] { right: -9px; top: calc(50% - 9px); cursor: ew-resize; }
[data-crop-handle="se"] { right: -9px; bottom: -9px; cursor: nwse-resize; }
[data-crop-handle="s"] { left: calc(50% - 9px); bottom: -9px; cursor: ns-resize; }
[data-crop-handle="sw"] { left: -9px; bottom: -9px; cursor: nesw-resize; }
[data-crop-handle="w"] { left: -9px; top: calc(50% - 9px); cursor: ew-resize; }
.crop-confirmation { padding-top: 12px; border-top: 1px solid var(--color-border); }

.retouch-overlay { pointer-events: none; }
.retouch-marker { position: absolute; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; background: rgba(0, 0, 0, .16); transform: translate(-50%, -50%); pointer-events: auto; }
.retouch-marker::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.retouch-marker.is-selected { border-color: #a391ff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .75), 0 0 0 3px var(--color-accent); }
.retouch-source-marker { position: absolute; width: 16px; height: 16px; border: 1px solid #a391ff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8); transform: translate(-50%, -50%); }
.retouch-source-marker::before, .retouch-source-marker::after { content: ''; position: absolute; background: #a391ff; }
.retouch-source-marker::before { left: 7px; top: -4px; width: 1px; height: 22px; }
.retouch-source-marker::after { left: -4px; top: 7px; width: 22px; height: 1px; }
.retouch-remove-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.retouch-remove-path path { fill: none; stroke: rgba(108, 77, 255, .18); stroke-linecap: round; stroke-linejoin: round; }
.retouch-remove-path.is-selected path { stroke: rgba(163, 145, 255, .32); }
.retouch-remove-path.is-temporary path { stroke: rgba(163, 145, 255, .42); }
.retouch-marker.is-remove { border-color: #a391ff; background: rgba(108, 77, 255, .28); }
.retouch-selection-mask { position: absolute; inset: 0; pointer-events: none; }
.retouch-selection-tools { display: grid; gap: 10px; margin-top: 10px; }
.retouch-selection-tools[hidden] { display: none; }
.retouch-selection-size { display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; margin-top: 0; }
.retouch-selection-size output { color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; font-variant-numeric: tabular-nums; }
.retouch-selection-tools .button.is-active { color: var(--color-text-primary); background: var(--color-accent-soft); border-color: rgba(108, 77, 255, .34); }
.mask-overlay { width: 100%; height: 100%; z-index: 8; touch-action: none; }
.mask-overlay.is-brushing { z-index: 10; cursor: none; }
.mask-brush-cursor { position: absolute; z-index: 11; border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8); transform: translate(-50%, -50%); pointer-events: none; }

.auto-buttons .button { padding-inline: 8px; font-size: var(--text-xs); }
.auto-buttons + .field-label, #retouch-size-fields { margin-top: var(--space-4); }
.auto-meta { display: flex; justify-content: space-between; min-height: 23px; margin-top: 5px; color: var(--color-text-faint); font-size: var(--text-xs); }
.auto-scene { display: flex; align-items: center; gap: 7px; min-height: 20px; margin: -2px 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
.auto-scene[hidden] { display: none; }
.auto-scene::before { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--color-text-faint); content: ''; }
.auto-scene[data-analysis="studio"]::before { background: var(--color-accent); }
.mask-tools { display: grid; gap: 10px; }
.mask-create-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.mask-create-row select { min-width: 0; }
.mask-progress { display: flex; align-items: center; gap: 8px; min-height: 24px; color: var(--color-text-muted); font-size: var(--text-xs); }
.mask-progress[hidden] { display: none; }
.mask-progress-spinner { width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .16); border-top-color: var(--color-accent); border-radius: 50%; animation: mask-progress-spin .7s linear infinite; }
@keyframes mask-progress-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mask-progress-spinner { animation: none; } }
.mask-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.mask-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 64px; padding: 4px; border: 1px solid var(--color-border); border-radius: 9px; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.mask-row.is-selected { background: var(--color-accent-soft); border-color: rgba(108, 77, 255, .3); }
.mask-select, .mask-row-action { border: 0; background: transparent; color: inherit; cursor: pointer; }
.mask-select { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; padding: 7px 6px; text-align: left; }
.mask-selection-dot { width: 10px; height: 10px; border: 1px solid var(--color-text-faint); border-radius: 50%; }
.mask-row.is-selected .mask-selection-dot { background: var(--color-accent); border-color: #bfb4ff; box-shadow: inset 0 0 0 2px var(--color-surface); }
.mask-select-copy { display: grid; gap: 2px; min-width: 0; }
.mask-select-copy > span, .mask-select-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mask-select small { color: var(--color-text-muted); }
.mask-row-actions { display: flex; align-items: center; gap: 2px; }
.mask-row-action { display: grid; place-items: center; width: 29px; height: 29px; padding: 6px; border-radius: 7px; color: var(--color-text-faint); transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.mask-row-action:hover { color: var(--color-text); background: rgba(255, 255, 255, .055); }
.mask-row-action[aria-pressed="true"] { color: #c9c0ff; background: rgba(108, 77, 255, .16); }
.mask-row-action:disabled { opacity: .28; cursor: default; }
.mask-row-action:disabled:hover { color: var(--color-text-faint); background: transparent; }
.mask-row-action.is-danger:hover { color: #f3a4a7; background: rgba(228, 108, 112, .1); }
.mask-row-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.mask-subsection { margin-top: 2px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.mask-subsection > summary { display: flex; align-items: center; min-height: 40px; color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer; list-style: none; }
.mask-subsection > summary::-webkit-details-marker { display: none; }
.mask-subsection > summary::before { content: ''; width: 0; height: 0; margin-right: 9px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--color-text-faint); transform-origin: 40% 50%; transition: transform var(--motion-fast) ease; }
.mask-subsection[open] > summary::before { transform: rotate(90deg); }
.mask-refinement-body { display: grid; gap: 10px; padding: 3px 0 12px; }
.mask-refinement-body .field-label { margin-bottom: -2px; }
.compact-slider { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; color: var(--color-text-muted); font-size: var(--text-xs); }
.overlay-settings { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.overlay-settings label { display: grid; gap: 5px; color: var(--color-text-muted); font-size: var(--text-xs); }
.overlay-settings input[type="color"] { width: 36px; height: 28px; padding: 2px; border: 1px solid var(--color-border); border-radius: 7px; background: rgba(255, 255, 255, .025); }
.tool-subheading { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 600; }
.mask-local-controls { padding: 0; }