/* Application chrome stays selectable only where editing requires it. */
.editor-page { user-select: none; -webkit-user-select: none; }
.editor-page :is(input, textarea, select, [contenteditable]:not([contenteditable="false"])) { user-select: text; -webkit-user-select: text; }
.editor-page #editor-billing { gap: 5px; padding-block: 4px; color: #ddd; }
.editor-page #editor-billing:hover { background: #191919; border-color: #777; color: #fff; }
.editor-page #editor-billing:focus-visible { outline-color: #ddd; }
.editor-page .credit-stack-icon { display: block; width: 16px; height: 16px; flex: none; pointer-events: none; }
.editor-page .editor-menu :is(#open-local,#export-button) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; flex: none; width: var(--editor-file-action-width); height: var(--editor-file-action-height); min-height: 0; white-space: nowrap; }
.editor-page .file-action-icon { display: block; width: 16px; height: 16px; flex: none; pointer-events: none; }
.editor-page .navigator-controls { grid-template-columns: 30px 22px minmax(0,1fr) 22px; gap: 4px; align-items: center; }
.editor-page .navigator-controls button { min-height: 24px; height: 24px; }
.editor-page #zoom-control { height: 24px; }
.editor-page #layer-settings-fields .editor-slider { grid-template-columns: 1fr auto; }
.editor-page #layer-settings-fields .editor-slider-label { grid-column: 1 / -1; }
.editor-page #layer-settings-fields .editor-slider-track { grid-column: 1; min-width: 0; }
/* Scroll dense panels instead of shrinking rows below their label/control
   content. A compressed implicit row lets its slider overlap the next label. */
.editor-page :is(#editor-tool-settings-fields,#editor-effect-fields,#editor-canvas-fields,#layer-settings-fields) {
  grid-auto-rows: max-content;
  align-content: start;
}
.editor-page #layer-settings-fields select[hidden] { display: none; }
.editor-page #layer-blend-trigger { min-width: 140px; }
.editor-page #layer-blend-panel { position: fixed; z-index: 1021; display: grid; overflow: auto; padding: 6px; border: 1px solid #555; border-radius: 4px; background: rgba(0,0,0,.8); box-sizing: border-box; }
.editor-page #layer-blend-panel[hidden] { visibility: hidden; transition: none; }
.editor-page #layer-blend-panel[hidden] { display: none; }
.editor-page #layer-blend-panel button { min-height: 30px; padding: 6px 12px; text-align: left; border: 1px solid transparent; background: transparent; color: #ccc; font: 12px/1.3 system-ui,sans-serif; cursor: pointer; }
.editor-page #layer-blend-panel button[aria-checked=true] { --premium-border:transparent; }
.editor-page #layer-blend-panel button:hover { --premium-border:transparent; }
.editor-page #layer-blend-panel button:focus-visible { outline: 2px solid #ddd; outline-offset: -2px; }
.editor-page .layers-panel .layer-row { grid-template-columns: 8px 18px minmax(0,1fr) 30px; }
.editor-page .layer-lock { display: grid; place-items: center; width: 30px; min-height: 32px; padding: 0; color: #aaa; border: 0; background: transparent; cursor: pointer; }
.editor-page .layer-lock[aria-pressed=true] { color: #fff; }
.editor-page .layer-lock:focus-visible { outline: 2px solid #ddd; outline-offset: -2px; }
.editor-page #session-gallery { container-type: inline-size; }
.editor-page #session-gallery .results-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; }
.editor-page #session-gallery .results-empty { display: none; }
.editor-page #session-gallery .artifact-select { display: grid; place-items: center; width: 100%; height: 144px; background: #0003; }
@container (max-width: 340px) {
  .editor-page #session-gallery .results-grid { grid-template-columns: minmax(0,1fr); }
}
.editor-page #session-gallery .artifact[data-selected=true] .artifact-select { border-color: #ddd; box-shadow: 0 0 0 1px #aaa; }
.editor-page #session-gallery .artifact[data-selected=true]::after { background: #444; color: #fff; }
.editor-page #session-gallery .artifact-select:focus-visible { outline: 2px solid #ddd; outline-offset: -2px; }
.editor-page #session-gallery :is(.gallery-helper,.artifact-identity small) { color: #aaa; }
.editor-page #session-gallery > .gallery-helper { font-size: 13px; line-height: 1.5; }
.editor-page #session-gallery #results-count { font-size: 13px; color: #fff; }
.editor-page #session-gallery #edit-reference-note { font-size: 13px; color: #fff; }
.editor-page #session-gallery .artifact-state { color: #ccc; }
.editor-page #session-gallery .artifact-feedback-button { filter: grayscale(1); }
/* Keep the full image inside the 144px slot's two 1px borders. */
.editor-page #session-gallery .artifact :is(img,canvas) { width: auto; max-width: 100%; height: auto; max-height: 142px; aspect-ratio: auto; object-fit: contain; }
.editor-page #gallery-import-tile { display: grid; place-items: center; width: 100%; min-height: 0; aspect-ratio: 1; align-self: start; border: 1px solid #666; border-radius: 4px; background: #ffffff05; color: #ddd; font: 36px/1 system-ui,sans-serif; cursor: pointer; }
.editor-page #session-gallery #gallery-upload { color: #eee; background: transparent; border-color: transparent; box-shadow: none; font-weight: 700; }
.editor-page #session-gallery #close-session-gallery { --editor-panel-close-target: 34px; font-size: 18px; background: transparent; color: #ddd; border-color: transparent; box-shadow: none; }
.editor-page #session-gallery :is(#gallery-upload,#close-session-gallery):not(:focus-visible) { outline: none; }
.editor-page #session-gallery :is(#gallery-upload,#close-session-gallery):hover { background: #ffffff0a; color: #fff; border-color: transparent; }
.editor-page #session-gallery :is(#gallery-upload,#close-session-gallery):active { background: #ffffff12; }
.editor-page #session-gallery :is(#gallery-upload,#close-session-gallery):focus-visible { outline: 1px solid #777; outline-offset: -3px; }
.editor-page #use-edit-reference:disabled { color: #888; background: #171717; border-color: #444; box-shadow: none; opacity: 1; cursor: default; }
.editor-page #use-edit-reference:not(:disabled) { color: #eee; background: #303030; border-color: #999; }
.editor-page #session-gallery .artifact figcaption { position: relative; padding-right: 38px; min-height: 40px; }
.editor-page .gallery-image-menu { position: static; }
.editor-page .gallery-image-menu summary { position: absolute; bottom: 0; right: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #555; border-radius: 4px; background: #151515; color: #eee; font: 23px/1 system-ui,sans-serif; cursor: pointer; list-style: none; }
.editor-page .gallery-image-menu summary::-webkit-details-marker { display: none; }
.editor-page .gallery-image-actions { position: absolute; right: 0; bottom: 38px; z-index: 3; box-sizing: border-box; width: min(236px,100%); padding: 6px; background: rgba(0,0,0,.8); border: 1px solid #555; border-radius: 4px; }
.editor-page .gallery-image-actions button { width: 100%; min-height: 36px; text-align: left; padding: 6px 10px; border: 0; background: transparent; color: #ddd; font: 11px/1.4 system-ui,sans-serif; cursor: pointer; }
.editor-page .gallery-image-actions button:hover { background: #ffffff20; color: #fff; }
.editor-page :is(.gallery-image-menu summary,.gallery-image-actions button,#gallery-import-tile,#gallery-upload,#use-edit-reference,#add-image-reference):focus-visible { outline: 2px solid #ddd; outline-offset: -2px; }
.editor-page #add-image-reference { min-height: 32px; padding: 6px 12px; font: 700 10px/1.4 system-ui,sans-serif; color: #ddd; background: #161616; border: 1px solid #444; border-radius: 4px; cursor: pointer; }
.editor-page #add-image-reference:disabled { color: #777; cursor: default; }
.editor-page #generator-overlay .prompt-field { display: grid; min-width: 0; border: 1px solid #444; border-radius: 4px; }
.editor-page #generator-overlay .prompt-field #user-text { min-height: 112px; padding-bottom: 12px; border: 0; border-radius: 4px 4px 0 0; outline: none; }
.editor-page:not([data-ai-focus-modality=pointer]) #generator-overlay .prompt-field:has(#user-text:focus-visible) { outline: 1px solid #b8b8b8; outline-offset: -2px; }

.editor-page .generator-submit-row { display: flex; justify-content: flex-end; padding: 0 8px 8px; }
.editor-page #generator-overlay #generate-button { position: static; }
/* Owner-supplied artwork: presentation only; existing buttons keep their handlers. */
.editor-page #ai-region-status { font-weight: 700; }
.editor-page .modern-widget-icon { display: none; pointer-events: none; user-select: none; }
.editor-page :is(#prometheus-trigger,#ai-region-panel) { width: 56px; height: 56px; min-width: 56px; min-height: 56px; background: #111; border-color: #555; box-shadow: none; }
.editor-page :is(#prometheus-trigger,#ai-region-panel):hover { background: #191919; border-color: #888; box-shadow: none; }
.editor-page :is(.prometheus-launcher-mark,.ai-region-icon) { display: none; }
.editor-page #ai-region-expand { position: relative; padding: 0; }
/* Transparent source padding differs slightly; these sizes balance the visible marks. */
.editor-page :is(#prometheus-trigger,#ai-region-expand) .modern-widget-icon { display: block; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; max-width: none; transform: translate(-50%,-50%); }
.editor-page #prometheus-trigger .modern-widget-icon { margin-left: 0; margin-top: -3px; }
.editor-page #ai-region-expand .modern-widget-icon { margin-left: -.4px; }
.editor-page[data-editor-presentation=modern] #editor-modern-tools { display: grid; place-items: center; padding: 0; }
.editor-page[data-editor-presentation=modern] #editor-modern-tools svg { display: block; width: 34px; height: 34px; }
.editor-page #prometheus-trigger::after { content: "AI GENERATOR"; position: absolute; top: 61px; left: -12px; width: 80px; color: #ddd; font: 8px/1.2 system-ui,sans-serif; text-align: center; pointer-events: none; }
.editor-page #ai-region-title { position: absolute; top: 61px; left: -12px; width: 80px; color: #ddd; font: 8px/1.2 system-ui,sans-serif; letter-spacing: normal; white-space: nowrap; pointer-events: none; }
.editor-page #ai-region-title br { display: none; }
/* Optical centering includes the artwork's transparent upper padding. */
.editor-page[data-editor-presentation=modern] #toggle-session-gallery { top: min(calc(var(--editor-topbar-height) + 402px), calc(100dvh - 190px)); left: calc((var(--editor-rail-width) - 48px) / 2); width: 46px; height: 180px; max-height: 180px; padding: 6px 4px 14px; flex-direction: column; justify-content: center; gap: 8px; writing-mode: horizontal-tb; background: rgba(255,255,255,.88); color: #000; border-color: #ffffff88; border-radius: 4px 0 0 4px; font-size: 11px; font-weight: 800; }
.editor-page[data-editor-presentation=modern] #toggle-session-gallery[aria-expanded=true] { background: rgba(255,255,255,.88); color: #000; border-color: #ffffff88; }
.editor-page[data-editor-presentation=modern] #toggle-session-gallery .modern-widget-icon { display: block; flex: 0 0 29px; width: 40px; height: 29px; max-width: none; object-fit: cover; object-position: center; transform: scale(1.12); }
.editor-page[data-editor-presentation=modern] #toggle-session-gallery .gallery-tab-label { display: block; writing-mode: vertical-rl; white-space: nowrap; font-size: 13.5px; font-weight: 900; -webkit-text-stroke: .15px currentColor; line-height: 1; letter-spacing: .015em; }
.editor-page #editor-tool-settings-toggle span::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-right: 1.5px solid #eee; border-bottom: 1.5px solid #eee; transform: translateY(-2px) rotate(45deg); }
/* Shared toolbar sizing; editable fields retain their native input behavior. */
.editor-page #tool-properties { --tool-control-height: 32px; font-size: 12px; gap: 6px; }
.editor-page #tool-properties :is(button,select,textarea,input:not([type=checkbox]):not([type=range])) { height: var(--tool-control-height); min-height: var(--tool-control-height); font-size: inherit; padding: 4px 6px; }
.editor-page #tool-properties label { gap: 4px; }
.editor-page #tool-properties .editor-property-value { gap: 4px; }
.editor-page #tool-properties .editor-property-value strong { margin-right: 0; }
.editor-page #tool-properties :is(#editor-tool-settings-toggle,.editor-active-tool) { width: auto; min-width: 0; height: var(--tool-control-height); padding: 2px 6px; }
.editor-page #tool-properties #editor-tool-settings-toggle span { white-space: nowrap; }
.editor-page #tool-properties select { width: auto; max-width: none; }
.editor-page :is(#tool-properties,#editor-tool-settings-panel,#editor-property-panel,#editor-effect-panel,#layer-settings-fields,dialog,#ai-region-panel) select,
.editor-page select {
  padding-inline: 8px 28px !important;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position: right 13px center, right 9px center !important;
  background-size: 4px 4px !important;
  background-repeat: no-repeat !important;
}
.editor-page select option { padding-inline: 8px 24px; }
/* Native popup menus ignore option padding. Customizable selects retain native
   keyboard/selection behavior while giving the open choices the same spacing. */
@supports (appearance: base-select) {
  .editor-page select:not([multiple]), .editor-page select:not([multiple])::picker(select) { appearance: base-select !important; }
  .editor-page select:not([multiple]):not([hidden]) { display: inline-flex; align-items: center; }
  .editor-page select:not([multiple])::picker-icon { display: none; }
  .editor-page select:not([multiple])::picker(select) {
    padding: 4px;
    max-height: min(360px, 70vh);
    overflow-y: auto;
    border: 1px solid #555;
    border-radius: 4px;
    background: rgba(0, 0, 0, .8);
    color: #eee;
    font: 12px/1.4 system-ui, sans-serif;
    box-shadow: 0 8px 24px #0006;
  }
  .editor-page select:not([multiple]) option { min-height: 30px; padding: 6px 28px 6px 10px; gap: 12px; border-radius: 2px; }
  .editor-page select:not([multiple]) option::checkmark { order: 1; margin-left: auto; }
  .editor-page select:not([multiple]) option:checked { background: #ffffff0c; }
  .editor-page select:not([multiple]) option:is(:hover,:focus-visible) { background: #ffffff20; outline: 1px solid #777; outline-offset: -1px; }
}
.editor-page #tool-properties textarea { max-height: var(--tool-control-height); }
.editor-page #tool-properties :is(.editor-slider,.editor-slider-label,.editor-slider-unit) { font-size: inherit; }
@supports (field-sizing: content) {
  .editor-page #tool-properties select { field-sizing: content; }
  .editor-page #tool-properties input:not([type=color]):not([type=checkbox]):not([type=range]) { field-sizing: content; width: auto; min-width: 6ch; }
}
@supports (transition-behavior: allow-discrete) and (interactivity: inert) {
  .editor-page #layer-blend-panel { translate: 0; transition: translate 180ms ease-out, display 180ms allow-discrete; }
  .editor-page #layer-blend-panel[hidden] { translate: 12px; pointer-events: none; interactivity: inert; transition: none; }
  @starting-style { .editor-page #layer-blend-panel:not([hidden]) { translate: 12px; } }
}
@media (prefers-reduced-motion: reduce) { .editor-page #layer-blend-panel { transition: none; translate: none; } }
/* Help has one delay and stays inside the viewport, including the left widgets. */
.editor-page .floating-ai-tooltip { display: none !important; }
.editor-page .editor-tool:is(:hover,:focus-visible)::after { content: none !important; }
.editor-page #editor-hover-help {
  position: fixed; inset: auto; margin: 0; z-index: 2147483647;
  box-sizing: border-box; width: max-content; max-width: min(232px,calc(100vw - 16px));
  padding: 5px 7px; border: 1px solid #484848; border-radius: 4px;
  background: rgba(0,0,0,.8); color: #e4e4e4; box-shadow: 0 3px 10px #0004;
  font: 11px/1.4 system-ui,sans-serif; overflow-wrap: anywhere;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.editor-page #editor-hover-help[hidden] { display: none; }
.editor-page #editor-hover-help::backdrop { background: none; pointer-events: none; }
.editor-page #editor-tool-settings-panel:has(.editor-text-fields) { background: rgba(0,0,0,.8); }
.editor-page .editor-text-section { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #ffffff24; font: 600 10px/1.4 system-ui,sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #a9a9a9; }
.editor-page .editor-text-section:first-child { margin-top: 0; padding-top: 0; border: 0; }
.editor-page #editor-tool-settings-fields .editor-text-wording { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.editor-page #editor-tool-settings-fields .editor-text-wording textarea { width: 100%; min-width: 0; min-height: 84px; resize: vertical; line-height: 1.5; padding: 8px 10px; }
.editor-page #editor-tool-settings-fields .editor-font-field { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.editor-page #editor-tool-settings-fields .editor-font-field select { width: 100%; max-width: none; }
.editor-page .editor-font-field option { font-size: 18px; }
.editor-page #tool-properties .editor-text-wording { display: flex; align-items: center; }
.editor-page #tool-properties .editor-text-wording textarea { width: 144px; min-width: 144px; resize: none; line-height: 22px; padding-block: 4px; }
.editor-page .editor-inline-text-input { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.editor-page .editor-inline-text-input textarea { width: 1px; height: 1px; padding: 0; border: 0; white-space: pre; }
.editor-page #editor-tool-settings-fields.editor-text-fields { --text-control-height: 36px; --color-control-size: 36px; gap: 12px; }
.editor-page .editor-text-header { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
.editor-page .editor-text-basics { --text-control-height: 36px; display: flex; flex-wrap: wrap; align-items: start; gap: 10px; }
.editor-page #editor-tool-settings-fields .editor-text-basics > label:has(select) { flex: 0 1 110px; min-width: 0; }
.editor-page #editor-tool-settings-fields .editor-text-basics > label.editor-font-field { flex: 0 1 138px; margin-left: auto; }
.editor-page #editor-tool-settings-fields .editor-text-basics .editor-font-choice { width: 100%; height: var(--text-control-height); box-sizing: border-box; }
.editor-page #editor-tool-settings-panel #editor-tool-settings-fields :is(.editor-text-basics,.editor-text-outline) > label > select { width: 100%; max-width: none; height: var(--text-control-height); min-height: var(--text-control-height); box-sizing: border-box; }
.editor-page .editor-text-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; padding-top: 12px; border-top: 1px solid #ffffff24; }
.editor-page #editor-tool-settings-fields :is(.editor-text-basics,.editor-text-layout,.editor-text-outline) > label { display: grid; grid-template-columns: minmax(0,1fr); gap: 5px; align-content: start; }
.editor-page #editor-tool-settings-fields :is(.editor-text-basics,.editor-text-layout) > label > :is(input:not([type=color]):not(.editor-color-field),select) { width: 100%; max-width: none; box-sizing: border-box; }
.editor-page .editor-text-outline { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 10px; min-width: 0; align-items: start; }
.editor-page .editor-text-shadow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid #ffffff24; min-width: 0; }
.editor-page #editor-tool-settings-fields .editor-text-shadow > label { grid-column: 1 / -1; justify-self: start; display: flex; align-items: center; gap: 7px; }
.editor-page .editor-text-shadow .editor-slider { min-width: 0; }
.editor-page .editor-text-outline-width { grid-column: 1; min-width: 0; }
.editor-page .editor-text-italic:has(input:disabled) { color: #888; opacity: .45; }
.editor-page .editor-text-italic:has(input:disabled) :is(.editor-slider-track,.editor-slider-thumb) { cursor: default; }
.editor-page input.editor-color-field { width: var(--color-control-size,32px) !important; min-width: var(--color-control-size,32px) !important; max-width: var(--color-control-size,32px) !important; height: var(--color-control-size,32px) !important; min-height: var(--color-control-size,32px) !important; box-sizing: border-box; padding: 3px !important; border: 1px solid #555; border-radius: 3px; background: linear-gradient(var(--swatch),var(--swatch)),repeating-conic-gradient(#444 0% 25%,#888 0% 50%) 0/8px 8px !important; background-clip: content-box !important; color: transparent !important; font-size: 0 !important; cursor: pointer; }
.editor-page #editor-color-transparent { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; }
.editor-page #editor-color-transparent::before { content: none; }
.editor-page :is(#editor-tool-settings-fields,#tool-properties) .editor-text-wording textarea { background: rgba(0,0,0,.8); }
/* The panel supplies the 80% black surface. A second 80% fill would total 96%. */
.editor-page #editor-tool-settings-fields.editor-text-fields .editor-text-wording textarea { min-height: 94px; height: 94px; font-size: 15px; background: transparent; }
.editor-page #editor-tool-settings-fields.editor-text-fields .editor-text-wording textarea:focus { outline: 1px solid var(--blue-bright); outline-offset: 0; box-shadow: none; }
.editor-page #editor-tool-settings-fields.editor-text-fields :is(label,select,button,input:not(.editor-color-field),.editor-slider-label,.editor-slider-value) { font-size: 13px; }
.editor-page #editor-tool-settings-fields.editor-text-fields { padding-top: 6px; }
.editor-page .editor-font-choice { position: relative; min-height: 32px; padding: 5px 24px 5px 10px; text-align: left; border: 1px solid #424242; border-radius: 3px; background: #000c; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-page .editor-font-choice::after { content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999; }
.editor-page #editor-font-picker { position: fixed; z-index: 700; box-sizing: border-box; padding: 5px; overflow: auto; border: 1px solid #444; border-radius: 5px; background: rgba(0,0,0,.8); box-shadow: 0 12px 32px #0008; }
.editor-page #editor-font-picker button { display: grid; width: 100%; gap: 4px; padding: 8px 10px; text-align: left; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #eee; }
.editor-page #editor-font-picker button:is(:hover,:focus-visible) { background: #ffffff14; border-color: #777; outline: none; }
.editor-page #editor-font-picker button[aria-selected=true] { border-color: #999; }
.editor-page #editor-font-picker .editor-font-import { position: sticky; top: -5px; z-index: 1; margin: -5px -5px 5px; padding: 10px; background: rgba(0,0,0,.8); border-bottom: 1px solid #444; }
.editor-page #editor-font-picker #editor-import-font { display: block; border: 1px solid #aaa; padding: 10px 12px; text-align: center; font-size: 12px; font-weight: 750; letter-spacing: .07em; }
.editor-page #editor-font-picker .editor-font-import small { display: block; padding-top: 7px; color: #bbb; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.editor-page .editor-font-name { font: 10px/1.3 system-ui,sans-serif; color: #aaa; }
.editor-page .editor-font-sample { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-block: 3px; font-size: 25px; font-weight: 400; line-height: 1.6; }
.editor-page .ai-region-prompt-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor-page #ai-region-controls .ai-region-prompt-heading label { min-width: 0; font-size: 11px; }
.editor-page #ai-region-controls #mask-tool { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 32px; margin-left: auto; padding: 5px 8px; font-size: 12px; font-weight: 700; }
.editor-page #mask-tool svg { width: 16px; height: 16px; flex: none; pointer-events: none; }

/* One product mode and a view of the server-owned reference collection. */
.editor-page .generator-mode-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.editor-page .generator-mode { display: inline-flex; max-width: 100%; gap: 3px; padding: 3px; border: 1px solid #444; border-radius: 5px; background: #080808; }
.editor-page .generator-mode button { min-width: 44px; min-height: 30px; padding: 5px 12px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #aaa; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.editor-page .generator-mode button[aria-pressed="true"] { background: #303030; border-color: #777; color: #fff; }
.editor-page .generator-mode button:disabled { cursor: default; opacity: .5; }
.editor-page .generator-reference-area { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; margin-top: 10px; min-width: 0; }
.editor-page .generator-reference-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 10px; color: #bbb; }
.editor-page .generator-reference-toolbar button { padding: 5px 8px; border: 1px solid #555; border-radius: 4px; background: #161616; color: #eee; font: inherit; cursor: pointer; min-height: 30px; }
.editor-page #clear-generator-references { margin-left: auto; }
.editor-page #generator-reference-list { display: grid; gap: 5px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.editor-page .generator-reference-item { display: grid; grid-template-columns: 16px 56px minmax(80px,1fr) repeat(3,30px); gap: 5px; align-items: center; padding: 4px; border: 1px solid #444; border-radius: 4px; background: #080808; min-width: 0; }
.editor-page .generator-reference-item img { width: 56px; height: 44px; object-fit: contain; border-radius: 2px; background: #151515; }
.editor-page .reference-order { text-align: center; font-size: 11px; color: #ddd; }
.editor-page .generator-reference-item select, .editor-page .generator-reference-item button { min-width: 0; min-height: 30px; border: 1px solid #555; border-radius: 3px; background: #161616; color: #eee; font: inherit; font-size: 12px; cursor: pointer; }
.editor-page .generator-reference-item select { width: 100%; padding: 4px; }
.editor-page .generator-reference-item button { padding: 0; font-size: 17px; }
.editor-page .generator-reference-area :disabled { opacity: .45; cursor: default; }
.editor-page .generator-reference-guidance { margin: 0; font-size: 10px; line-height: 1.5; color: #999; overflow-wrap: anywhere; }
.editor-page .generator-reference-area .gallery-helper { margin: 0; font-size: 11px; line-height: 1.4; }
.editor-page .generator-mode button:focus-visible, .editor-page .generator-reference-area :is(button,select):focus-visible { outline: 2px solid #ccc; outline-offset: 2px; }
@media (max-width: 450px) {
  .editor-page .generator-mode-row { gap: 6px; }
  .editor-page .generator-mode button { padding-inline: 8px; }
  .editor-page .generator-reference-item { grid-template-columns: 14px 42px minmax(0,1fr) 30px; gap: 3px; }
  .editor-page .generator-reference-item [data-reference-action="remove"] { grid-column: 4; grid-row: 1; }
  .editor-page .generator-reference-item [data-reference-action="up"] { grid-column: 2; grid-row: 2; }
  .editor-page .generator-reference-item [data-reference-action="down"] { grid-column: 3; grid-row: 2; width: 30px; }
  .editor-page .generator-reference-item img { width: 42px; height: 40px; }
  .editor-page .generator-reference-item button { min-height: 30px; }
}
.editor-page #generator-overlay .credit-note { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* Compact generation guidance, isolated from the reference controls. */
.editor-page .generator-help-button { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 1px solid #555; border-radius: 50%; background: #161616; color: #bbb; font: 700 13px/1 system-ui,sans-serif; cursor: pointer; }
.editor-page .generator-help-button:hover, .editor-page .generator-help-button[aria-expanded="true"] { color: #fff; border-color: #999; background: #292929; }
.editor-page .generator-help-button:focus-visible { outline: 2px solid #ccc; outline-offset: 3px; }
.editor-page .generator-help { position: fixed; inset: auto; z-index: 10000; box-sizing: border-box; width: 320px; max-width: calc(100vw - 16px); margin: 0; padding: 14px 16px; overflow: auto; overscroll-behavior: contain; border: 1px solid #454545; border-radius: 8px; background: #191919; color: #bdbdbd; box-shadow: 0 12px 32px #0008; font: 12px/1.45 system-ui,sans-serif; text-align: left; }
.editor-page .generator-help::backdrop { background: transparent; pointer-events: none; }
.editor-page .generator-help h3 { margin: 0 0 10px; color: #eee; font-size: 10px; line-height: 1.4; letter-spacing: .1em; }
.editor-page .generator-help dl { margin: 0; }
.editor-page .generator-help dl > div + div { margin-top: 8px; }
.editor-page .generator-help dt { display: inline; color: #eee; font-weight: 650; }
.editor-page .generator-help dt::after { content: " · "; font-weight: 400; color: #777; }
.editor-page .generator-help dd { display: inline; margin: 0; }

/* Editor campaign: shared controls retain the established compact chrome. */
.editor-page #editor-tool-settings-fields .editor-fx-composition-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row > label:has(.editor-color-field) { grid-column:3; }
.editor-page #editor-tool-settings-fields .editor-fx-composition-row > .editor-slider { grid-column:1 / -1;grid-row:2; }
.editor-page #editor-tool-settings-panel .editor-slider[data-slider-label=Seed] .editor-slider-value { width:94px; }
.editor-angle-indicator { display:inline-block;position:relative;width:17px;height:17px;border:1px solid #777;border-radius:50%;margin-left:5px;vertical-align:middle;flex:none; }
.editor-angle-indicator::after { content:"";position:absolute;left:7px;top:7px;width:7px;height:2px;background:#eaeaea;transform-origin:0 50%;transform:rotate(var(--direction-angle,0deg)); }
.editor-preview-actions { display:flex;gap:4px;flex-shrink:0; }
.editor-page #tool-properties .editor-top-primary { position:sticky;left:0;z-index:3;display:flex;align-items:center;gap:8px;background:#101010;padding-right:5px; }
.editor-page #tool-properties .editor-top-primary :is(#editor-tool-settings-toggle,.editor-active-tool) { position:static; }
.editor-page #tool-properties .editor-preview-actions button.editor-primary-apply { background:#185e9b;border-color:#398bd2;color:#fff;font-weight:650; }
.editor-page #tool-properties .editor-preview-actions button.editor-primary-apply:hover:not(:disabled) { background:#2177bb;border-color:#62b4f5; }
.editor-page #tool-properties .editor-preview-actions button:not(.editor-primary-apply) { background:#202328;border-color:#464c54;color:#cbd1d7; }
.editor-page[data-editor-presentation=standard] #toggle-session-gallery { position:static;inset:auto;transform:none;width:100%;min-height:62px;max-height:90px;height:64px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;writing-mode:horizontal-tb;background:rgba(255,255,255,.88);color:#000;border:1px solid #ffffff88;border-radius:4px;font:800 10px/1.1 system-ui;white-space:normal; }
.editor-page[data-editor-presentation=standard] #toggle-session-gallery .modern-widget-icon { display:block;flex:none;width:52px;height:26px;max-width:100%;object-fit:cover;object-position:center; }
.editor-page[data-editor-presentation=standard] #toggle-session-gallery .gallery-tab-label { display:block;width:100%;white-space:normal;text-align:center;font-size:10px;font-weight:900;line-height:1.1;letter-spacing:.025em; }
.editor-page .inspector-panel { position:relative; }
#editor-inspector-lock { position:absolute;top:4px;right:5px;z-index:5;width:24px;height:24px;padding:0;display:grid;place-items:center;box-sizing:border-box;line-height:1;background:#202020;border:1px solid #555;color:#ddd;border-radius:3px;cursor:pointer; }
#editor-inspector-lock svg { display:block;width:14px;height:14px; }
#editor-inspector-lock[aria-pressed=false] svg { transform:rotate(180deg); }
#canvas-navigator .panel-section-heading { padding-right:30px; }
#editor-boundaries { font:9px system-ui;color:#ddd;background:transparent;border:1px solid #666;padding:3px 4px;border-radius:3px;cursor:pointer; }
#editor-boundaries[aria-pressed=false] { opacity:.55; }
.editor-page[data-inspector-collapsed=true] .editor-shell { grid-template-columns:var(--editor-rail-width) minmax(0,1fr); }
/* Keep viewport-positioned Layer Settings out of a transformed containing block. */
.editor-page[data-inspector-collapsed=true] .inspector-panel { display:grid;position:fixed;z-index:900;top:var(--editor-topbar-height);right:calc(-1 * var(--editor-inspector-width));bottom:0;width:var(--editor-inspector-width);transition:right 150ms ease;box-shadow:-6px 0 20px #0008; }
.editor-page[data-inspector-collapsed=true][data-inspector-revealed=true] .inspector-panel { right:0; }
#editor-inspector-edge { position:fixed;right:0;top:var(--editor-topbar-height);bottom:0;width:9px;padding:0;border:0;background:#2229;color:#ddd;z-index:899;cursor:pointer; }
#editor-inspector-edge[hidden],.editor-page[data-editor-preview=true] #editor-inspector-edge { display:none; }
.editor-page[data-editor-preview=true] .inspector-panel { display:none; }

/* One derived interaction owner, independent of the Tools flyout visibility. */
.editor-page[data-editor-interaction-owner=tools] #editor-modern-tools,
.editor-page[data-editor-interaction-owner=generator] #prometheus-trigger,
.editor-page[data-editor-interaction-owner=region] #ai-region-panel {
  box-shadow: 0 0 9px 1px #ffffff70, 0 0 17px 2px #ffffff48, 0 0 25px #ffffff25;
}
.editor-page #ai-region-controls #ai-region-prompt,
.editor-page #generator-overlay .prompt-field { border-color: #ffffffce; }
.editor-page #ai-region-controls #ai-region-prompt:hover { border-color: #ffffffeb; }
.editor-page #ai-region-controls #ai-region-prompt:focus { border-color: #fff; outline: 1px solid #ffffff75; outline-offset: 1px; }

/* Layered backgrounds retain the selected RGBA color and its checkerboard.
   The spectrum occupies only the existing border; control sizes do not change. */
.editor-page { --editor-prism: conic-gradient(#f17b85, #edaa73, #ece18a, #84d9a3, #83dce2, #839fe9, #bd91e4, #f17b85); }
.editor-page :is(input.editor-color-field,.editor-color-swatch,#editor-recent-colors button,#editor-color-preview,#editor-color-original) {
  border-color: transparent !important;
  padding: 0 !important;
  border-width: 2px !important;
  box-shadow: none !important;
  background: linear-gradient(var(--swatch),var(--swatch)) content-box,
    repeating-conic-gradient(#eee 0% 25%,#888 0% 50%) 0 / 8px 8px content-box,
    var(--editor-prism) border-box !important;
  background-clip: content-box, content-box, border-box !important;
}
.editor-page :is(#editor-color-preview,#editor-color-original) { box-sizing: border-box; border: 1px solid transparent; }
.editor-page input[type=color] { border: 2px solid transparent !important; padding: 0 !important; box-shadow: none !important; background: var(--editor-prism) border-box !important; }
.editor-page input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.editor-page input[type=color]::-webkit-color-swatch { border: 0; }
.editor-page input[type=color]::-moz-color-swatch { border: 0; }
.editor-page :is(.editor-color-field,.editor-color-swatch,#editor-recent-colors button,input[type=color]):focus-visible { outline: 2px solid #83dce2; outline-offset: 2px; }
/* Transparent choices share the same visible PNG-style checkerboard. */
.editor-page #editor-color-panel #editor-color-transparent { background: #fff !important; color: #000 !important; }
.editor-page #editor-color-transparent .editor-transparent-sample { display: inline-block; flex: 0 0 24px; width: 24px; height: 18px; vertical-align: middle; border: 1px solid #aaa; background: repeating-conic-gradient(#eee 0% 25%,#888 0% 50%) 0 / 8px 8px; }
.editor-page :is(input.editor-color-field,.editor-color-swatch,#editor-recent-colors button,#editor-color-preview,#editor-color-original) { background-image: linear-gradient(var(--swatch,transparent),var(--swatch,transparent)),repeating-conic-gradient(#eee 0% 25%,#888 0% 50%),var(--editor-prism) !important; }
.editor-page .editor-gradient-presets { display: grid; gap: 5px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.editor-page .editor-gradient-presets button { display: flex; align-items: center; gap: 7px; text-align: left; }
.editor-page .editor-gradient-sample { flex: 0 0 44px; width: 44px; height: 20px; border: 1px solid #777; background: linear-gradient(to right,var(--gradient-colors)),repeating-conic-gradient(#eee 0% 25%,#888 0% 50%) 0 / 8px 8px; }
/* Scrolling overlays the editor below the strip, so controls never shift up. */
.editor-page #tool-contextual { position: relative; overflow: visible; z-index: 30; }
.editor-page #tool-properties { scrollbar-width: none; padding-block: 4px; }
.editor-page #tool-properties::-webkit-scrollbar { display: none; }
.editor-page #editor-properties-scroll { position: absolute; top: 100%; left: 8px; right: 8px; height: 12px; overflow-x: scroll; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #777 #171717; background: #171717; }
.editor-page #editor-properties-scroll[hidden] { display: none; }
.editor-page #editor-properties-scroll > div { height: 1px; }
.editor-page #navigator-pan-lock { justify-self: start; display: grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; min-height: 20px; padding: 0; line-height: 1; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #aaa; cursor: pointer; }
.editor-page #navigator-pan-lock svg { display: block; width: 14px; height: 14px; }
.editor-page #navigator-pan-lock[aria-pressed=true] { color: #fff; border-color: #777; background: #ffffff12; }
.editor-page #navigator-pan-lock:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.editor-page[data-canvas-pan-locked=true] :is(#navigator-preview,[role=scrollbar]) { cursor: default; }

.editor-page .ai-mode-unavailable { color:#aaa; font-size:10px; line-height:1.35; max-width:110px; white-space:normal; }
.editor-page .ai-mode-unavailable[hidden] { display:none; }
.editor-page [data-mode-unavailable="true"] { color:var(--premium-text,#999) !important; background:var(--premium-surface,#242424) !important; border-color:var(--premium-border,#444) !important; opacity:.55 !important; cursor:not-allowed !important; }
.editor-page .generator-mode { flex-wrap:wrap; }
.editor-page #ai-region-panel > .ai-mode-unavailable { display:block; position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); box-sizing:border-box; width:110px; max-width:110px; padding:5px 8px; border-radius:4px; background:#171717; text-align:center; pointer-events:none; }
.editor-page[data-editor-presentation=modern] #ai-region-panel > .ai-mode-unavailable { left:calc(100% + 8px); right:auto; }
.editor-page #ai-region-panel > .ai-mode-unavailable[hidden] { display:none; }

.editor-page .generator-mode-choice { display:flex; flex-direction:column; align-items:center; min-width:0; }
.editor-page .generator-mode-choice > .ai-mode-unavailable { text-align:center; padding:3px; }

/* Every Editor/Studio colour field uses this one compact picker and its
 * existing draft/apply/cancel controller. Numeric backing fields stay internal. */
@layer customer-panel-refinement {
 .editor-page #editor-color-panel,.editor-page #editor-placement-panel#editor-placement-panel#editor-placement-panel#editor-placement-panel.live-studio #editor-color-panel {box-sizing:border-box!important;width:min(224px,calc(100vw - 16px))!important;min-width:0!important;max-width:min(224px,calc(100vw - 16px))!important;display:grid;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;padding:8px!important;}
 .editor-page #editor-color-panel>:is(.editor-color-heading,#editor-color-sv,.editor-color-hue-label,.editor-color-actions,#editor-recent-colors,#editor-color-error) {grid-column:1/-1;}
 .editor-page #editor-color-panel>:is(label:has(#editor-color-hex),.editor-color-channels) {display:none!important;}
 .editor-page #editor-color-panel #editor-color-sv {height:132px!important;min-height:132px!important;}
 .editor-page #editor-color-panel .editor-color-actions {justify-content:flex-end;gap:4px!important;margin:0!important;}
 .editor-page #editor-color-panel .editor-color-actions button {min-height:32px!important;padding:3px 8px!important;}
 .editor-page #editor-color-panel .editor-color-preview-row>span:last-child {display:none;}
 .editor-page #editor-color-panel :is(#editor-color-preview,#editor-color-original) {width:28px;height:22px;}
 .editor-page #editor-color-panel #editor-color-transparent {min-height:32px!important;padding:3px 5px!important;}
}