/* Final editor-only surface authority. Public Home retains its own palette. */
.editor-page {
  --ink: #000000;
  --editor-floating-background: rgba(0, 0, 0, 0.8);
  --surface: #050505;
  --surface-raised: #080808;
  --surface-soft: #0a0a0a;
  --line: #292929;
  --line-soft: #1c1c1c;
  --paper: #ededed;
  --muted: #929292;
  background: var(--ink);
}

.editor-page .editor-topbar,
.editor-page .tool-rail,
.editor-page .workspace,
.editor-page #workspace-stage,
.editor-page .inspector-panel,
.editor-page .inspector-panel .layers-panel { background: var(--ink); }

.editor-page #tool-contextual,
.editor-page .layer-panel-actions,
.editor-page .layers-panel .layer-order-actions,
.editor-page .editor-command-menu,
.editor-page .editor-color-panel,
.editor-page #layer-settings-fields,
.editor-page #editor-effect-panel,
.editor-page #editor-tool-settings-panel,
.editor-page #editor-canvas-panel,
.editor-page .editor-start-dialog,
.editor-page .editor-export-dialog,
.editor-page .credit-dialog { background: var(--surface-raised); border-color: var(--line); }

.editor-page .layers-panel .layer-row { background: var(--surface); }
.editor-page .layers-panel .layer-row:not([data-active="true"]),
.editor-page .layers-panel .layer-thumbnail,
.editor-page .layers-panel .panel-section-heading,
.editor-page .history-panel .panel-section-heading,
.editor-page .inspector-panel .layers-panel { border-color: var(--line); }
.editor-page .layers-panel .layer-thumbnail { background: var(--surface-soft); }
.editor-page .editor-tool:is(:hover,:focus-visible)::after,
.editor-page .floating-ai-tooltip { background: var(--surface-raised); border-color: var(--line); }
.editor-page .floating-ai-launcher,
.editor-page .floating-ai-launcher:hover { background: var(--surface-raised); }

.editor-page .editor-categories button:hover,
.editor-page .editor-categories button[aria-expanded=true],
.editor-page .editor-categories button[data-state="active"]:hover,
.editor-page .editor-menu button:hover:not(:disabled),
.editor-page .rail-button:hover:not(:disabled),
.editor-page .rail-home:hover,
.editor-page .layers-panel button:hover:not(:disabled),
.editor-page .layers-panel summary:hover,
.editor-page .history-list button:hover:not(:disabled),
.editor-page .editor-command-menu button:hover:not(:disabled),
.editor-page .editor-command-menu button:focus-visible { background: #171717; }
.editor-page .editor-categories button[data-state="dormant"] { background: var(--surface); }

.editor-page :is(#tool-properties, #layer-settings-fields, #editor-effect-panel, #editor-tool-settings-panel, #editor-canvas-panel) :is(input, select, textarea),
.editor-page .editor-color-panel input,
.editor-page .editor-start-dialog input,
.editor-page .editor-start-dialog select { background: var(--surface); border-color: #343434; }
.editor-page :is(#tool-properties, #layer-settings-fields, #editor-effect-panel, #editor-tool-settings-panel, #editor-canvas-panel) button:where(:not([data-action=apply]):not([aria-pressed=true])),
.editor-page .editor-history-actions button,
.editor-page .legacy-mask-control,
.editor-page .editor-color-panel button:not(#editor-color-apply),
.editor-page .editor-start-dialog button:not(.editor-start-primary),
.editor-page .navigator-controls button,
.editor-page .billing-control:not(.billing-control-primary) { background: var(--surface-soft); border-color: #343434; }
.editor-page .editor-color-panel .editor-recent-colors button { background: transparent; }
.editor-page #editor-effect-close { background: transparent; border-color: transparent; }
.editor-page #editor-tool-settings-panel .editor-tool-settings-header button { background: transparent; border-color: transparent; }
.editor-page .editor-start-dialog::backdrop,
.editor-page .editor-export-dialog::backdrop,
.editor-page .credit-dialog::backdrop { background: #000000bd; }
.editor-page .credit-dialog-amounts { background: #05050588; }

/* Scrolling UI is neutral; the document/Navigator transparency tiles stay intact. */
.editor-page .canvas-scrollbar { background: #0a0a0a; }
.editor-page .canvas-scrollbar-thumb { background: #555555; }
.editor-page .canvas-scrollbar:hover .canvas-scrollbar-thumb { background: #737373; }
.editor-page .canvas-scrollbar:active .canvas-scrollbar-thumb { background: #999999; }
.editor-page .inspector-panel,
.editor-page .layer-list,
.editor-page .history-list,
.editor-page .editor-tool-grid,
.editor-page #tool-properties,
.editor-page .generator-body,
.editor-page .results-grid { scrollbar-color: #444444 var(--surface); }

/* The AI drawer and its gallery inherit editor tokens, including disabled UI. */
.editor-page .generator-window,
.editor-page .results-section,
.editor-page .session-gallery { background: var(--surface); border-color: var(--line); }
.editor-page .generator-overlay[data-window-state="maximized"] { background: var(--ink); }
.editor-page .generator-window select,
.editor-page .generator-window textarea:disabled,
.editor-page .window-actions button,
.editor-page .results-heading button,
.editor-page .artifact-feedback-button:not([aria-pressed="true"]) { background: var(--surface-soft); border-color: var(--line); }
.editor-page .generator-window .generate-button:disabled { background: var(--surface-soft); border-color: var(--line); }
.editor-page .session-gallery .gallery-actions-menu summary:hover,
.editor-page .session-gallery .gallery-secondary-actions button:hover:not(:disabled) { background: #171717; }
.editor-page .generation-progress,
.editor-page .generation-tip { border-color: var(--line); }

/* Shared sliders have priority over host-panel focus styling. */
.editor-page :is(#tool-properties, #layer-settings-fields, #editor-effect-panel, #editor-tool-settings-panel, #editor-canvas-panel, #editor-export-dialog) :is(.editor-slider-track, .editor-slider-value):focus-visible {
  outline: 1px solid #d8d8d8;
  outline-offset: 2px;
}
.editor-page :is(#tool-properties, #layer-settings-fields, #editor-effect-panel, #editor-tool-settings-panel, #editor-canvas-panel) .editor-slider-value:focus { border-color: #d8d8d8; }

/* Native editor ranges (Navigator) use the same calm control treatment. */
.editor-page input[type=range],
.editor-page #tool-properties input[type=range],
.editor-page #zoom-control { accent-color: #ededed; cursor: pointer; }
.editor-page input[type=range]:focus-visible { outline: 1px solid #d8d8d8; outline-offset: 2px; }
.editor-page #zoom-control::-webkit-slider-runnable-track { background: #303030; cursor: pointer; }
.editor-page #zoom-control::-webkit-slider-thumb { background: #f5f5f5; border-color: #ffffff; cursor: pointer; }
.editor-page #zoom-control::-moz-range-track { background: #303030; cursor: pointer; }
.editor-page #zoom-control::-moz-range-progress { background: #ededed; }
.editor-page #zoom-control::-moz-range-thumb { background: #f5f5f5; border-color: #ffffff; cursor: pointer; }
.editor-page input[type=range]:disabled { cursor: default; }

/* Structural chrome merges into one editor. Active/focus/artwork boundaries remain. */
.editor-page .editor-topbar,
.editor-page .editor-brand,
.editor-page .editor-menu,
.editor-page .editor-menu > button,
.editor-page .editor-toolbar,
.editor-page .editor-categories > button,
.editor-page .editor-categories > button:first-child,
.editor-page .tool-rail,
.editor-page .rail-group,
.editor-page .rail-group-bottom,
.editor-page #tool-contextual,
.editor-page .inspector-panel,
.editor-page .inspector-panel .navigator-panel,
.editor-page .inspector-panel .layers-panel,
.editor-page .inspector-panel .history-panel,
.editor-page .inspector-panel .panel-heading,
.editor-page .inspector-panel .panel-section-heading,
.editor-page .layer-panel-actions,
.editor-page .generator-heading,
.editor-page .generator-header,
.editor-page .generator-body,
.editor-page .generator-footer,
.editor-page .results-heading,
.editor-page .results-section,
.editor-page .session-gallery,
.editor-page .gallery-heading { border: 0; box-shadow: none; }
.editor-page #tool-contextual,
.editor-page .inspector-panel .navigator-panel,
.editor-page .inspector-panel .history-panel,
.editor-page .layer-panel-actions,
.editor-page .results-section,
.editor-page .session-gallery,
.editor-page .generator-window { background: var(--ink); }
.editor-page .editor-tool-settings-header,
.editor-page #editor-effect-handle,
.editor-page .editor-canvas-panel-header { border-bottom: 0; }
.editor-page .layers-panel .layer-row:not([data-active=true]) { border-color: transparent; }
.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-property-value:not([aria-expanded=true]) { background: transparent; }
.editor-page #editor-tool-settings-toggle { background: var(--surface-raised); }

/* AI panel transparency: one background per surface; preserve control geometry. */
.editor-page #generator-overlay,
.editor-page #generator-overlay[data-window-state="maximized"] { background: transparent; }
.editor-page #generator-overlay .generator-window,
.editor-page #ai-region-controls {
  background: var(--editor-floating-background);
  border-color: transparent;
  box-shadow: none;
}
.editor-page #session-gallery { background: var(--editor-floating-background); }
.editor-page #session-gallery .results-empty { background: transparent; }
.editor-page #generator-overlay :is(.generator-header, .generator-body, .generate-form, .generator-mark, .generation-progress, .generation-tip),
.editor-page #generator-overlay :is(button, input, select, textarea, summary),
.editor-page #ai-region-controls :is(button, input, select, textarea) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.editor-page #generator-overlay :is(h1, h2, p, span, label, small, strong, b, button, input, select, textarea, summary),
.editor-page #ai-region-controls :is(h1, h2, p, span, label, small, strong, b, button, input, select, textarea, summary) { color: var(--premium-text,#f0f0f0); }
.editor-page #generator-overlay :is(input, textarea)::placeholder,
.editor-page #ai-region-controls :is(input, textarea)::placeholder { color: #d0d0d0; opacity: 1; }
.editor-page #generator-overlay :disabled,
.editor-page #generator-overlay :disabled :is(span, small, strong, b) { color: var(--premium-text,#bdbdbd); }
.editor-page #generator-overlay [data-state="success"],
.editor-page #ai-region-controls [data-state="success"] { color: #bdf7c8; }
.editor-page #generator-overlay [data-state="partial"],
.editor-page #ai-region-controls [data-state="partial"] { color: #ffe6ad; }
.editor-page #generator-overlay [data-state="error"],
.editor-page #ai-region-controls [data-state="error"] { color: #ffd1c9; }
/* State selectors override the base without reintroducing decorative borders. */
.editor-page #generator-overlay :is(button, summary):hover:not(:disabled),
.editor-page #ai-region-controls button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.editor-page #generator-overlay :is(button[aria-pressed="true"], button[aria-selected="true"]),
.editor-page #ai-region-controls button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: transparent;
  box-shadow: none;
}
.editor-page #generator-overlay :is(button, input, select, textarea):disabled {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.editor-page #generator-overlay :focus,
.editor-page #ai-region-controls :focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
/* Text inputs can match :focus-visible after clicks, so use navigation modality. */
.editor-page:not([data-ai-focus-modality="pointer"]) #generator-overlay :focus-visible,
.editor-page:not([data-ai-focus-modality="pointer"]) #ai-region-controls :focus-visible {
  outline: 1px solid #b8b8b8;
  outline-offset: -2px;
}
.editor-page #generator-overlay [aria-invalid="true"],
.editor-page #ai-region-controls [aria-invalid="true"] {
  color: #ffd1c9;
  text-decoration: underline wavy #ffd1c9;
  text-underline-offset: 3px;
}

/* Only floating containers use the shared AI-panel background. Their controls,
   labels, preview images, borders and interaction states retain their styling. */
.editor-page :is(#editor-tool-settings-panel,#editor-property-panel,#editor-effect-panel,#layer-settings-fields,#editor-canvas-panel,#editor-color-panel,.editor-command-menu,.editor-start-dialog,.editor-export-dialog,.gallery-secondary-actions) {
  background: var(--editor-floating-background);
}
.editor-page[data-editor-presentation=modern] #editor-toolbar-content { background: var(--editor-floating-background); }

.editor-page .editor-brand[aria-busy=true] { cursor: progress; }
.editor-page #editor-exit-status { position: fixed; top: 44px; left: 94px; z-index: 1300; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--editor-floating-background); color: var(--paper); font: 12px/1.4 system-ui,sans-serif; pointer-events: none; }
.editor-page #editor-exit-status[hidden] { display: none; }

/* Action-first top bar. Keep metadata nodes available to existing local saves,
   while removing their boxes and the former reserved title/status columns. */
.editor-page .editor-topbar { grid-template-columns: 9.4rem minmax(0,1fr) auto; }
.editor-page .editor-topbar .document-title,
.editor-page .editor-topbar .save-policy { display: none; }
.editor-page .topbar-actions { display: flex; gap: 12px; padding-right: 6px; }
.editor-page .toolbar-credit-actions { flex: 0 0 auto; overflow: visible; margin-left: 0; }
@media (max-width: 900px) {
  .editor-page .editor-topbar { grid-template-columns: 48px minmax(0,1fr) auto; }
}
@media (max-width: 600px) {
  .editor-page { --editor-topbar-height: 72px; }
  .editor-page .editor-topbar { grid-template-columns: 40px minmax(0,1fr); grid-template-rows: 36px 36px; }
  .editor-page .topbar-actions { grid-column: 1 / -1; justify-content: flex-end; height: 36px; gap: 8px; }
}

/* One CSS visibility transition: state/dismissal stays synchronous. Browsers
   without safe discrete display + inert styling keep the existing instant UI. */
@supports (transition-behavior: allow-discrete) and (interactivity: inert) {
  .editor-page :is(#generator-overlay,#ai-region-controls,#session-gallery),
  .editor-page[data-editor-presentation=modern] #editor-toolbar-content {
    translate: 0 0;
    transition: translate 180ms cubic-bezier(.2,.7,.2,1), display 180ms allow-discrete;
  }
  .editor-page[data-editor-presentation=modern] #editor-toolbar-content { --panel-slide-x: -12px; --panel-slide-y: 0px; }
  .editor-page :is(#generator-overlay,#ai-region-controls,#session-gallery)[hidden],
  .editor-page[data-editor-presentation=modern] #editor-toolbar-content[hidden] {
    translate: var(--panel-slide-x,12px) var(--panel-slide-y,0px);
    transition-timing-function: ease-in, linear;
    interactivity: inert;
    pointer-events: none;
  }
  @starting-style {
    .editor-page :is(#generator-overlay,#ai-region-controls,#session-gallery):not([hidden]),
    .editor-page[data-editor-presentation=modern] #editor-toolbar-content:not([hidden]) {
      translate: var(--panel-slide-x,12px) var(--panel-slide-y,0px);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .editor-page :is(#generator-overlay,#ai-region-controls,#session-gallery),
  .editor-page[data-editor-presentation=modern] #editor-toolbar-content {
    transition: none;
    translate: none;
  }
}

/* One close control treatment for every Editor panel X, including lazy dialogs.
   Existing buttons retain their names, listeners, hover and disabled states. */
.editor-page {
  --editor-panel-close-glyph: 24px;
  --editor-panel-close-target: 36px;
}
.editor-page button:is(#close-generator,#editor-patterns-close,#ai-region-close,#close-session-gallery,#remove-generator-reference,#gallery-preview-close,#editor-effect-close,#editor-tool-settings-close,#editor-color-close,#editor-start-close,#close-credit-dialog,#editor-canvas-handle > button,#editor-export-dialog .export-close) {
  display: grid;
  place-items: center;
  flex: 0 0 var(--editor-panel-close-target);
  box-sizing: border-box;
  width: var(--editor-panel-close-target);
  height: var(--editor-panel-close-target);
  min-width: var(--editor-panel-close-target);
  min-height: var(--editor-panel-close-target);
  padding: 0;
  font: 400 var(--editor-panel-close-glyph)/1 Arial, sans-serif;
  letter-spacing: 0;
}
.editor-page button:is(#close-generator,#editor-patterns-close,#ai-region-close,#close-session-gallery,#remove-generator-reference,#gallery-preview-close,#editor-effect-close,#editor-tool-settings-close,#editor-color-close,#editor-start-close,#close-credit-dialog,#editor-canvas-handle > button,#editor-export-dialog .export-close):focus-visible {
  outline: 2px solid #d8d8d8;
  outline-offset: -3px;
}