/* Editor-only recovery surface. Generator/gallery selectors are intentionally absent. */
.editor-page { --editor-rail-width: 84px; --editor-inspector-width: 14rem; --editor-properties-height: 48px; }
.editor-page .editor-topbar { grid-template-columns: 9.4rem minmax(0,1fr) 9rem auto; }
.editor-page .editor-toolbar { padding-inline: .35rem; gap: .25rem; }
.editor-page .editor-categories { display: flex; flex: 1; }
.editor-page .editor-categories button { padding-inline: .55rem; color: #b8bec8; font-size: .7rem; font-weight: 500; border: 0; }
.editor-page .editor-categories button:hover,.editor-page .editor-categories button[aria-expanded=true] { color: #fff; background: #22272e; }
.editor-page .topbar-actions { display: flex; padding: 0 .35rem 0 0; gap: .5rem; }
.editor-page .editor-menu { border: 0; }
.editor-page .editor-menu button { height: 28px; padding-inline: .55rem; border: 1px solid #303741; border-radius: 3px; margin-left: .3rem; font-size: .61rem; color: #bac5d1; }
.editor-page .editor-menu button:disabled { color: #58616c; }
.editor-page .editor-shell { grid-template-columns: var(--editor-rail-width) minmax(0,1fr) var(--editor-inspector-width); }
.editor-page .tool-rail { padding: 6px 4px; gap: 6px; justify-content: flex-start; background: #111316; }
.editor-page .editor-tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 34px; align-content: start; justify-items: center; gap: 3px 4px; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3b424b transparent; }
.editor-page .rail-button,.editor-page .rail-home { width: 34px; height: 34px; min-height: 34px; padding: 7px; border: 1px solid transparent; border-radius: 4px; color: #a8afb9; background: transparent; box-shadow: none; }
.editor-page .editor-tool-grid .rail-button { width: 100%; max-width: 34px; }
.editor-page .rail-button svg,.editor-page .rail-home svg { display: block; width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.editor-page .rail-button:hover:not(:disabled),.editor-page .rail-home:hover { color: #f0f4f8; background: #272d35; }
.editor-page .rail-button[aria-pressed=true],.editor-page .rail-button.rail-button-active { color: #79bdff; background: #20364b; border-color: #355c7f; }
.editor-page .rail-button:disabled { opacity: .4; cursor: default; }
.editor-page .editor-tool:is(:hover,:focus-visible)::after { content: attr(data-tooltip); position: fixed; z-index: 1200; top: var(--tool-tooltip-y,calc(var(--editor-topbar-height) + 8px)); left: calc(var(--editor-rail-width) + 7px); padding: 7px 10px; border: 1px solid #3b4653; border-radius: 4px; background: #171b21; color: #eef4fb; box-shadow: 0 4px 12px #0008; font: 12px/1.4 system-ui,sans-serif; white-space: nowrap; pointer-events: none; }
.editor-page .rail-group-bottom { display: flex; flex-shrink: 0; justify-content: center; gap: 4px; margin-top: auto; padding-top: 5px; border-top: 1px solid #2a3038; }
.editor-page .rail-ai-button { color: #62b2ff; }
.editor-page .editor-colors { position: relative; width: 72px; height: 58px; flex-shrink: 0; margin: 2px auto; }
.editor-page .editor-color-swatch { position: absolute; width: 31px; height: 31px; padding: 0; border: 2px solid #a0a8b3; border-radius: 5px; background: linear-gradient(var(--swatch),var(--swatch)),repeating-conic-gradient(#444 0% 25%,#888 0% 50%) 0/8px 8px; box-shadow: 0 2px 4px #0008; cursor: pointer; }
.editor-page #editor-foreground { left: 6px; top: 2px; z-index: 1; }
.editor-page #editor-background { left: 24px; top: 18px; }
.editor-page #editor-color-swap,.editor-page #editor-color-reset { position: absolute; border: 0; color: #b7c3d1; background: transparent; width: 21px; height: 21px; padding: 0; font-size: 17px; cursor: pointer; }
.editor-page #editor-color-swap { top: 0; right: 0; }
.editor-page #editor-color-reset { bottom: 0; left: 1px; }
.editor-page .workspace { grid-template-rows: var(--editor-properties-height) minmax(0,1fr); }
.editor-page #tool-contextual { grid-row: 1; display: flex; height: var(--editor-properties-height); min-height: var(--editor-properties-height); max-height: var(--editor-properties-height); align-items: center; padding: 0 8px; overflow: hidden; background: #171a1f; border-bottom: 1px solid #2b323c; color: #aeb8c5; }
.editor-page .workspace-properties-label { display: none; }
.editor-page #tool-properties { display: flex; flex: 1; height: 100%; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; padding: 4px 2px 7px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #536171 #171a1f; text-transform: none; letter-spacing: normal; font: 11px/1.3 system-ui,sans-serif; }
.editor-page #tool-properties > * { flex-shrink: 0; white-space: nowrap; }
.editor-page #tool-properties strong { color: #e0e8f1; font-weight: 600; margin-right: 3px; }
.editor-page #tool-properties label,.editor-page #layer-settings-fields label { display: flex; align-items: center; gap: 5px; color: #aeb6c2; }
.editor-page #tool-properties input:not([type=color]):not([type=checkbox]):not([type=range]),.editor-page #tool-properties select { width: 66px; }
.editor-page #tool-properties select { width: auto; max-width: 152px; }
.editor-page #tool-properties input[type=range] { width: 80px; accent-color: #409fea; }
.editor-page #tool-properties input[type=checkbox] { accent-color: #409fea; }
.editor-page #tool-properties textarea { width: 170px; height: 28px; max-height: 28px; resize: none; }
.editor-page #tool-properties input[type=color] { width: 27px; height: 27px; padding: 2px; }
.editor-page #tool-properties input,.editor-page #tool-properties textarea,.editor-page #tool-properties select,.editor-page #layer-settings-fields input,.editor-page #layer-settings-fields select,.editor-page .editor-color-panel input { min-width: 0; min-height: 26px; border: 1px solid #373f4a; background: #0f1216; color: #e2e8f1; padding: 3px 5px; border-radius: 3px; font: inherit; }
.editor-page #tool-properties button,.editor-page .editor-history-actions button,.editor-page #layer-settings-fields button,.editor-page .legacy-mask-control,.editor-page .editor-color-panel button { min-height: 26px; border: 1px solid #3a4654; background: #242c35; color: #dfe9f4; padding: 4px 8px; border-radius: 3px; cursor: pointer; font: inherit; }
.editor-page #tool-properties button[data-action=apply],.editor-page #editor-color-apply { background: #194e79; border-color: #317db7; color: #fff; }
.editor-page #tool-properties :disabled,.editor-page .editor-history-actions :disabled,.editor-page #layer-settings-fields :disabled,.editor-page .legacy-mask-control:disabled { color: #717b88; cursor: default; opacity: .6; }
/* Document presentation is independent of pixels and the transformed artboard. */
.editor-page #workspace-stage { grid-row: 2; display: block; padding: 0; background: #06080b; }
.editor-page #artboard { position: absolute; min-width: 0; max-width: none; aspect-ratio: auto; margin: 0; border: 0; background: transparent; }
.editor-page #artboard::before { display: none; content: none; }
.editor-page .canvas-checkerboard { position: absolute; z-index: 0; background: repeating-conic-gradient(#353535 0% 25%,#454545 0% 50%) 0 0 / 16px 16px; clip-path: inset(var(--canvas-edge-inset,1px)); pointer-events: none; }
.editor-page .canvas-checkerboard[data-frame-shape=circle] { clip-path: circle(closest-side at 50% 50%); }
.editor-page .canvas-caption { display: none; }
/* Tool selection may style buttons only; every document/temporary surface stays clear. */
.editor-page #editor-canvas,.editor-page #mask-canvas,.editor-page #tool-overlay { background: transparent; box-shadow: none; }
.editor-page #tool-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; touch-action: none; }
.editor-page #tool-overlay[data-interactive=true] { pointer-events: auto; cursor: crosshair; }
.editor-page #tool-overlay[data-tool=move] { cursor: grab; }
.editor-page #tool-overlay[data-tool=hand] { cursor: grab; }
.editor-page #tool-overlay[data-tool=hand]:active { cursor: grabbing; }
.editor-page #tool-overlay[data-tool=zoom] { cursor: zoom-in; }
.editor-page #workspace-tool-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; background: transparent; }
.editor-page #editor-tool-status { position: absolute; z-index: 20; left: 12px; bottom: 14px; max-width: min(480px,calc(100% - 96px)); padding: 9px 12px; border: 0; border-radius: 6px; background: #101010; color: #ededed; box-shadow: 0 4px 16px #0008; font: 12px/1.45 system-ui,sans-serif; pointer-events: none; }
.editor-page #editor-tool-status[hidden] { display: none; }
.editor-page .canvas-scrollbar { position: absolute; z-index: 8; padding: 0; border: 0; background: #11151a; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.editor-page .canvas-scrollbar-horizontal { left: 0; right: 14px; bottom: 0; height: 14px; }
.editor-page .canvas-scrollbar-vertical { top: 0; right: 0; bottom: 14px; width: 14px; }
.editor-page .canvas-scrollbar-thumb { position: absolute; display: block; border-radius: 5px; background: #536171; cursor: grab; }
.editor-page .canvas-scrollbar-horizontal .canvas-scrollbar-thumb { left: 0; top: 3px; bottom: 3px; }
.editor-page .canvas-scrollbar-vertical .canvas-scrollbar-thumb { top: 0; left: 3px; right: 3px; }
.editor-page .canvas-scrollbar:hover .canvas-scrollbar-thumb { background: #71849a; }
.editor-page .canvas-scrollbar:active .canvas-scrollbar-thumb { cursor: grabbing; background: #6daee0; }
.editor-page .canvas-scrollbar:focus-visible { outline: 2px solid #5eb2ff; outline-offset: -2px; }
.editor-page .inspector-panel { grid-template-rows: minmax(0,240px) minmax(0,1.35fr) minmax(0,1fr); overflow: hidden; }
.editor-page .inspector-panel .navigator-panel { align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.editor-page .inspector-panel .layers-panel { grid-template-rows: 34px minmax(0,1fr) 38px; overflow: hidden; }
.editor-page .inspector-panel .history-panel { grid-template-rows: 34px minmax(0,1fr); padding: 0; overflow: hidden; }
.editor-page .layer-list,.editor-page .history-list { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.editor-page .layer-panel-actions { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-top: 1px solid #29323c; background: #11161c; }
.editor-page .layer-panel-actions > button,.editor-page .editor-layer-settings summary { display: grid; place-items: center; height: 28px; min-height: 28px; padding: 4px; border: 1px solid transparent; border-radius: 3px; color: #afbfce; background: transparent; cursor: pointer; font: 11px/1.2 system-ui,sans-serif; }
.editor-page .layer-panel-actions > button { width: 28px; flex: 0 0 28px; }
.editor-page .layer-panel-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.editor-page .layers-panel .panel-section-heading { min-height: 34px; height: 34px; padding: 2px 8px; gap: 4px; }
.editor-page .layers-panel .layer-heading-actions { gap: 4px; }
.editor-page .layer-heading-actions .legacy-mask-control { width: auto; height: 28px; min-height: 28px; margin: 0; padding: 4px; font: 10px/1.2 system-ui,sans-serif; white-space: nowrap; }
.editor-page .layer-panel-actions .layer-actions-menu { margin-left: auto; }
.editor-page .editor-layer-settings { padding: 0; color: #afb9c6; font-size: 11px; }
.editor-page .editor-layer-settings summary { list-style: none; }
.editor-page .editor-layer-settings summary::-webkit-details-marker { display: none; }
.editor-page .editor-layer-settings[open] summary { background: #20364b; border-color: #355c7f; color: #d1e8fc; }
.editor-page #layer-settings-fields { position: fixed; z-index: 1020; width: 260px; display: grid; gap: 8px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #465466; border-radius: 4px; background: #171e26; box-shadow: 0 5px 16px #0009; }
.editor-page .editor-layer-settings:not([open]) #layer-settings-fields { display: none; }
.editor-page .layers-panel .layer-actions-menu { position: static; }
.editor-page .layers-panel .layer-order-actions { top: 34px; right: 6px; grid-auto-rows: 28px; align-content: start; max-height: calc(100% - 74px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.editor-page #layer-settings-fields label { justify-content: space-between; }
.editor-page #layer-settings-fields input,.editor-page #layer-settings-fields select { width: 112px; }
.editor-page #layer-settings-fields input,.editor-page #layer-settings-fields select { max-width: 60%; }
.editor-page #layer-settings-fields .editor-slider { grid-template-columns: minmax(40px,.65fr) minmax(48px,1fr) auto; }
.editor-page #layer-settings-fields .editor-slider-value { max-width: none; }
/* Floating UI is outside the workspace grid and the transformed document. */
.editor-page #editor-effect-panel { position: fixed; z-index: 1010; display: flex; flex-direction: column; width: 300px; min-width: 0; overflow: hidden; border: 1px solid #465466; border-radius: 5px; background: #171e26; color: #dce5ef; box-shadow: 0 7px 24px #000a; font: 11px/1.3 system-ui,sans-serif; }
.editor-page #editor-effect-panel[hidden] { display: none; }
.editor-page #editor-effect-handle { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 8px 4px 12px; border-bottom: 1px solid #303c49; cursor: grab; touch-action: none; user-select: none; }
.editor-page #editor-effect-handle[data-dragging=true] { cursor: grabbing; }
.editor-page #editor-effect-handle strong { font-weight: 600; }
.editor-page #editor-effect-fields { display: grid; gap: 10px; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.editor-page .editor-effect-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 2px; }
.editor-page #editor-effect-fields label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor-page #editor-effect-panel input,.editor-page #editor-effect-panel select { min-width: 0; min-height: 24px; border: 1px solid #373f4a; background: #0f1216; color: #e2e8f1; padding: 3px 5px; border-radius: 3px; font: inherit; }
.editor-page #editor-effect-panel button { min-height: 26px; border: 1px solid #3a4654; background: #242c35; color: #dfe9f4; padding: 4px 8px; border-radius: 3px; cursor: pointer; font: inherit; }
.editor-page #editor-effect-close { border-color: transparent; background: transparent; font-size: 16px; line-height: 16px; }
.editor-page #editor-effect-panel button[data-action=apply] { background: #194e79; border-color: #317db7; color: #fff; }
.editor-page #editor-effect-panel :disabled { color: #717b88; cursor: default; opacity: .6; }
.editor-page #editor-effect-panel :focus-visible { outline: 2px solid #5eb2ff; outline-offset: 2px; }
.editor-page .legacy-mask-control { font-size: 10px; margin: 4px 8px; }
.editor-page .editor-history-actions { display: flex; gap: 4px; font-size: 10px; }
.editor-page .history-panel .panel-section-heading { min-height: 34px; margin: 0; padding: 3px 8px; border-bottom: 1px solid #29323c; }
.editor-page .history-list { display: block; padding: 4px; }
.editor-page .history-list li { display: block; margin: 0; padding: 0; border: 0; background: transparent; }
.editor-page .history-list button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 29px; padding: 5px 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #aebbc9; font: 11px/1.3 system-ui,sans-serif; text-align: left; cursor: pointer; }
.editor-page .history-list button:hover:not(:disabled) { background: #182b3b; color: #e3edf8; }
.editor-page .history-list button[aria-current=step],.editor-page .history-list li[data-current=true] button { border-color: #355c7f; background: #20364b; color: #e4f2ff; box-shadow: inset 2px 0 #77b9e8; }
.editor-page .history-list li[data-future=true] button { color: #748394; }
.editor-page .history-list button:disabled { opacity: .55; cursor: default; }
.editor-page .history-list button:focus-visible { outline: 2px solid #8ac6ef; outline-offset: -2px; }
.editor-page .editor-command-menu { position: fixed; z-index: 1100; display: grid; min-width: 210px; max-height: min(76vh,650px); overflow-y: auto; padding: 4px; border: 1px solid #3a424e; border-radius: 4px; background: #15191f; box-shadow: 0 9px 28px #000b; scrollbar-width: thin; }
.editor-page .editor-command-menu[hidden],.editor-page .editor-color-panel[hidden] { display: none; }
.editor-page .editor-command-menu button { border: 0; border-radius: 2px; background: transparent; color: #d3dce8; text-align: left; padding: 6px 10px; min-height: 28px; cursor: pointer; font-size: 12px; }
.editor-page .editor-command-menu button:hover:not(:disabled),.editor-page .editor-command-menu button:focus-visible { background: #264a6a; color: #fff; }
.editor-page .editor-command-menu button:disabled { color: #697482; cursor: default; }
.editor-page .editor-command-menu .editor-menu-group { padding: 9px 10px 4px; margin-top: 3px; border-top: 1px solid #303944; color: #8194a9; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.editor-page [data-editor-panel][hidden] { display: none; }
.editor-page .editor-color-panel { position: fixed; z-index: 1150; left: calc(var(--editor-rail-width) + 8px); bottom: 48px; display: grid; gap: 12px; width: 258px; padding: 14px; border: 1px solid #45505e; border-radius: 6px; background: #191e25; color: #d7e3ef; box-shadow: 0 8px 30px #000a; font: 12px/1.3 system-ui,sans-serif; }
.editor-page .editor-color-heading { display: flex; align-items: center; justify-content: space-between; }
.editor-page .editor-color-panel label { display: flex; align-items: center; gap: 8px; }
.editor-page #editor-color-hex { flex: 1; width: 100px; }
.editor-page .editor-color-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.editor-page .editor-color-channels input { width: 70px; }
.editor-page .editor-recent-colors { display: flex; gap: 5px; flex-wrap: wrap; }
.editor-page .editor-recent-colors button { width: 22px; height: 22px; min-height: 22px; padding: 0; }
.editor-page .rail-button:focus-visible,.editor-page .rail-home:focus-visible,.editor-page #tool-properties :focus-visible,.editor-page #layer-settings-fields :focus-visible,.editor-page .editor-history-actions :focus-visible,.editor-page .editor-colors :focus-visible,.editor-page .editor-color-panel :focus-visible { outline: 2px solid #5eb2ff; outline-offset: 2px; }
.editor-page .layer-row[data-locked=true] .layer-text strong::after { content: ' · locked'; color: #8d99a7; font-weight: 400; }
.editor-page[data-editor-panels=hidden] .inspector-panel { display: none; }
.editor-page[data-editor-panels=hidden] .editor-shell { grid-template-columns: var(--editor-rail-width) minmax(0,1fr); }
.editor-page[data-editor-preview=true] .tool-rail,.editor-page[data-editor-preview=true] .inspector-panel,.editor-page[data-editor-preview=true] #tool-contextual { display: none; }
.editor-page[data-editor-preview=true] .editor-shell { grid-template-columns: minmax(0,1fr); }
.editor-page[data-editor-preview=true] .workspace { grid-template-rows: minmax(0,1fr); }
.editor-page[data-editor-preview=true] #workspace-stage { grid-row: 1; }
@media (max-width: 1450px) { .editor-page .save-policy { display: none; } .editor-page .editor-topbar { grid-template-columns: 9.4rem minmax(0,1fr) 8rem auto; } }
@media (max-width: 1200px) { .editor-page .document-title { display: none; } .editor-page .editor-topbar { grid-template-columns: 9.4rem minmax(0,1fr) auto; } .editor-page .editor-shell { grid-template-columns: var(--editor-rail-width) minmax(0,1fr) var(--editor-inspector-width); } }
@media (max-width: 900px) { .editor-page .editor-topbar { grid-template-columns: 48px minmax(0,1fr); } .editor-page .editor-brand { justify-content: center; padding: 0; } .editor-page .editor-brand > span:last-child,.editor-page .topbar-actions { display: none; } .editor-page .editor-categories { display: flex; } .editor-page .editor-shell { grid-template-columns: var(--editor-rail-width) minmax(0,1fr); } .editor-page .inspector-panel { display: none; } .editor-page[data-editor-panels=visible] .inspector-panel { display: grid; position: absolute; z-index: 25; top: var(--editor-topbar-height); right: 0; bottom: 0; width: var(--editor-inspector-width); box-shadow: -8px 0 24px #0008; } .editor-page[data-editor-preview=true] .inspector-panel { display: none; } }
@media (prefers-reduced-motion: reduce) { .editor-page .editor-tool,.editor-page .editor-command-menu { transition: none; } }

/* Tool settings are a body-level overlay; the 48px strip never reflows. */
.editor-page #editor-tool-settings-panel { position: fixed; z-index: 1015; display: flex; flex-direction: column; width: 300px; min-width: 0; max-height: calc(100dvh - 80px); overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-raised); color: var(--paper); box-shadow: 0 7px 24px #000a; font: 11px/1.3 system-ui,sans-serif; }
.editor-page #editor-tool-settings-panel[hidden] { display: none; }
.editor-page .editor-tool-settings-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--line); }
.editor-page .editor-tool-settings-header strong { font-weight: 600; }
.editor-page #editor-tool-settings-fields { display: grid; gap: 10px; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.editor-page #editor-tool-settings-fields label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr) 38px; align-items: start; gap: 8px; min-width: 0; }
.editor-page #editor-tool-settings-fields:has(.editor-fx-composition-row) { scrollbar-gutter: stable; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row > label { display: grid; grid-row: 1; gap: 5px; min-width: 0; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row > label:has([aria-label="Mode"],[aria-label="Fire mode"]) { grid-column: 1; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row > label:has([aria-label="Progression"]) { grid-column: 2; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row > label:has([aria-label="Seed"]) { grid-column: 3; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row > label:has(.editor-color-field) { grid-column: 4; }
.editor-page #editor-tool-settings-panel #editor-tool-settings-fields .editor-fx-composition-row :is(select,input[aria-label="Seed"]) { width: 100%; max-width: none; }
.editor-page #editor-tool-settings-panel :is(input,select,textarea) { min-width: 0; min-height: 24px; border: 1px solid #343434; background: var(--surface); color: var(--paper); padding: 3px 5px; border-radius: 3px; font: inherit; }
.editor-page #editor-tool-settings-panel :is(input,select):not([type=checkbox]):not([type=color]):not(.editor-slider-value) { width: 120px; max-width: 60%; }
.editor-page #editor-tool-settings-panel textarea { width: 100%; min-height: 60px; resize: vertical; }
.editor-page #editor-tool-settings-panel .editor-slider .editor-slider-value { width: 46px; max-width: none; }
.editor-page #editor-tool-settings-panel input[type=color] { width: 27px; height: 27px; padding: 2px; }
.editor-page #editor-tool-settings-panel button { min-height: 26px; border: 1px solid #343434; background: var(--surface-soft); color: var(--paper); padding: 4px 8px; border-radius: 3px; cursor: pointer; font: inherit; }
.editor-page .editor-tool-settings-header button { font-size: 16px; line-height: 16px; }
.editor-page #editor-tool-settings-panel :disabled { opacity: .6; cursor: default; }
.editor-page #editor-tool-settings-panel :focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.editor-page #tool-properties #editor-tool-settings-toggle[aria-expanded=true] { background: #171717; border-color: #777777; color: #ffffff; }

/* Every tool keeps its symbol and live primary values inside the fixed strip. */
.editor-page #tool-properties #editor-tool-settings-toggle,.editor-page #tool-properties .editor-active-tool { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; width: 202px; min-width: 202px; height: 36px; padding: 4px 8px; background: var(--surface-raised,#171717); }
.editor-page #editor-tool-settings-toggle svg { flex: 0 0 27px; width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.editor-page #editor-tool-settings-toggle span { white-space: normal; text-align: left; line-height: 1.15; }
.editor-page .editor-active-tool .ai-region-icon { display: inline-block; width: 27px; font-size: 27px; line-height: 1; }
.editor-page #tool-properties .editor-property-value { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 8px; border-color: transparent; background: transparent; font-variant-numeric: tabular-nums; }
.editor-page .editor-property-value span { color: #a0a0a0; }
.editor-page .editor-property-value strong { color: #ededed; font-weight: 500; }
.editor-page #tool-properties .editor-property-value[aria-expanded=true] { background: #171717; border-color: #555555; }
.editor-page #editor-property-panel { position: fixed; z-index: 1025; width: 286px; padding: 12px; border: 1px solid #292929; border-radius: 5px; background: #080808; color: #ededed; box-shadow: 0 7px 24px #000a; font: 11px/1.3 system-ui,sans-serif; }
.editor-page #editor-property-panel[hidden] { display: none; }
.editor-page #editor-property-panel .editor-slider-value { background: #050505; color: #ededed; font: inherit; }
.editor-page #editor-property-panel .editor-slider-track:focus-visible { outline: 1px solid #d8d8d8; }
.editor-page .editor-tip-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.editor-page #editor-tool-settings-panel .editor-tip-gallery button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 66px; text-transform: capitalize; }
.editor-page #editor-tool-settings-panel .editor-tip-gallery button[aria-pressed=true] { border-color: #b0b0b0; background: #171717; }
.editor-page .editor-tip-sample { display: block; width: 21px; height: 21px; background: #ededed; }
.editor-page [data-tip=round] .editor-tip-sample { border-radius: 50%; }
.editor-page [data-tip=diamond] .editor-tip-sample { transform: rotate(45deg) scale(.72); }
.editor-page select[aria-label="Preset"] { min-width: 82px; padding-right: 16px; }

.editor-page .editor-color-panel { width: 288px; max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; gap: 10px; }
.editor-page #editor-color-sv { position: relative; height: 164px; min-height: 164px; border-radius: 4px; background: linear-gradient(to top,#000000,transparent),linear-gradient(to right,#ffffff,transparent),var(--color-hue,#ff0000); cursor: crosshair; touch-action: none; }
.editor-page #editor-color-sv-marker { position: absolute; width: 11px; height: 11px; margin: -5.5px; border: 1.5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.editor-page .editor-color-hue-label { font-size: 11px; }
.editor-page #editor-color-hue { flex: 1; width: 100%; height: 16px; padding: 0; appearance: none; -webkit-appearance: none; background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); border: 0; border-radius: 4px; cursor: pointer; }
.editor-page #editor-color-hue::-webkit-slider-runnable-track { background: transparent; height: 16px; }
.editor-page #editor-color-hue::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7px; height: 20px; margin-top: -2px; border: 2px solid #fff; border-radius: 3px; background: transparent; box-shadow: 0 0 0 1px #000; cursor: pointer; }
.editor-page #editor-color-hue::-moz-range-track { background: transparent; }
.editor-page #editor-color-hue::-moz-range-thumb { width: 5px; height: 18px; border: 2px solid #fff; border-radius: 3px; background: transparent; cursor: pointer; }
.editor-page .editor-color-preview-row { display: flex; align-items: center; gap: 0; color: #929292; font-size: 10px; }
.editor-page .editor-color-preview-row > span:last-child { margin-left: 8px; }
.editor-page #editor-color-preview,.editor-page #editor-color-original { display: block; width: 38px; height: 26px; background: linear-gradient(var(--swatch),var(--swatch)),repeating-conic-gradient(#444 0% 25%,#888 0% 50%) 0/8px 8px; }
.editor-page .editor-color-channels { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.editor-page .editor-color-channels label { gap: 4px; font-size: 10px; }
.editor-page .editor-color-channels input { width: 49px; padding: 3px; font-variant-numeric: tabular-nums; }
.editor-page .editor-color-actions { display: flex; justify-content: flex-end; gap: 6px; }
.editor-page .editor-color-panel .editor-recent-colors button { background: linear-gradient(var(--swatch),var(--swatch)),repeating-conic-gradient(#444 0% 25%,#888 0% 50%) 0/8px 8px; }
.editor-page #editor-color-error { color: #e5a6a0; font-size: 11px; }
.editor-page #editor-color-error[hidden] { display: none; }

/* Text uses the existing settings panel, with a visible multiline writing area. */
.editor-page #editor-tool-settings-fields label:has(textarea) { display: flex; flex-direction: column; align-items: stretch; }
.editor-page #editor-tool-settings-panel textarea { min-height: 96px; line-height: 1.5; }
#editor-free-transform-dialog { background: color-mix(in srgb, var(--surface-raised) 80%, transparent); }
#editor-free-transform-dialog::backdrop { background: rgb(0 0 0 / 40%); }

/* Compact Pen/Brush Guardrails; expansion floats below the unchanged strip. */
.editor-page #tool-properties .editor-guardrails-control { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; height: 36px; }
.editor-page #tool-properties .editor-guardrails-control input { width: 14px; height: 14px; margin: 0; }
.editor-page #tool-properties #editor-guardrails-label { padding: 5px 6px; background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 18%); color: #ffffff; }
.editor-page #tool-properties #editor-guardrails-label[aria-expanded=true] { background: #171717; border-color: #555555; }
.editor-page #editor-guardrails-panel { position: fixed; z-index: 1025; padding: 12px; border: 1px solid #292929; border-radius: 5px; background: #080808; color: #ededed; box-shadow: 0 7px 24px #000a; font: 11px/1.3 system-ui,sans-serif; }
.editor-page #editor-guardrails-panel[hidden] { display: none; }
.editor-page #editor-guardrails-panel .editor-slider-value { background: #050505; color: #ededed; font: inherit; }
.editor-page #editor-guardrails-panel :focus-visible { outline: 1px solid #d8d8d8; }

.editor-page #editor-guardrails-panel { display: grid; gap: 10px; }

.editor-page #tool-properties #editor-guardrails-label::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; vertical-align: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.editor-page #tool-properties #editor-guardrails-label[aria-expanded=true]::after { transform: rotate(225deg); vertical-align: -1px; }
.editor-page #tool-properties #editor-guardrails-label:hover { background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 32%); }

/* Native preset controls with actual cached marks and the established monochrome UI. */
.editor-page .editor-brush-selector{display:flex;flex:none;align-items:center;min-width:0}
.editor-page .editor-brush-choice{display:flex;align-items:center;gap:5px;width:190px;max-width:30vw;height:30px;padding:2px 7px;font:inherit;text-align:left}
.editor-page .editor-brush-choice::after{content:'▾';margin-left:auto;flex:none}
.editor-page :is(.editor-brush-choice,.editor-brush-menu button)>img{display:block;flex:none;object-fit:contain;width:48px;height:24px;background:#222}
.editor-page :is(.editor-brush-choice,.editor-brush-menu button)>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-page .editor-brush-menu{position:fixed;z-index:1100;width:min(296px,calc(100vw - 16px));box-sizing:border-box;overflow:auto;padding:4px;background:#080808;border:1px solid #383838;border-radius:5px;font:11px/1.3 system-ui,sans-serif;pointer-events:auto}
.editor-page .editor-brush-menu>button{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:3px 6px;margin:0;border:1px solid transparent;text-align:left;color:#eee;background:transparent}
.editor-page .editor-brush-menu>button[aria-selected=true]{background:#292929;border-color:#777}
.editor-page #editor-placement-panel .editor-brush-menu>button[aria-selected=true]{outline:1px solid currentColor;outline-offset:-3px;font-weight:700}
.editor-page .editor-brush-menu>button:is(:hover,:focus-visible){background:#353535;outline:1px solid #aaa;outline-offset:-1px}
.editor-page .editor-fx-settings-group{display:grid;gap:9px;min-width:0;margin:0;padding:8px 0;border:0;border-top:1px solid #333}
.editor-page .editor-fx-settings-group>legend,.editor-page .editor-fx-settings-group>summary{padding:0;font-size:11px;font-weight:600;color:#eee}
.editor-page details.editor-fx-settings-group:not([open])>:not(summary){display:none}
.editor-page .editor-fx-settings-group>summary{cursor:pointer}