/* Register before legacy control layers. Only customer chrome is themed here;
   canvas, color swatches, artwork, loader screens and owner tools are excluded. */
@layer customer-panel-refinement;
:is(.editor-page,.landing-page,.account-page,.gateway-page) {
  --customer-panel:rgba(0,0,0,.8);
  --customer-panel-text:#f5f5f5;
  --customer-secondary:#aaa;
  --customer-divider:linear-gradient(90deg,transparent,#ffffff30 12%,#ffffff30 88%,transparent);
  --customer-divider-vertical:linear-gradient(transparent,#ffffff30 12%,#ffffff30 88%,transparent);
  --customer-control:#181818;
  --customer-control-hover:#242424;
  --customer-control-outline:#666;
  --customer-control-height:30px;
  --customer-control-radius:5px;
  --customer-gap:8px;
  --customer-section-gap:12px;
}
@layer customer-panel-refinement {
  .editor-page #tool-properties {gap:var(--customer-gap) !important}
  .editor-page #tool-properties .editor-top-primary {gap:var(--customer-gap) !important;padding-inline-end:var(--customer-gap) !important}
  .editor-page .editor-tip-gallery .editor-tip-sample {background:#ddd !important}
  /* Real toolbar buttons share Placement's charcoal surface. */
  .editor-page :is(#editor-patterns-trigger,#editor-placement-trigger,#editor-billing,
    #open-local,#export-button,#editor-presentation-toggle,#toggle-session-gallery,
    #editor-tool-settings-toggle),
  .editor-page #editor-placement-panel :is(header,nav,aside,.placement-view-actions) button:not(.placement-gallery-card):where(:not(.live-editor-host *,[data-live-native-panel] *)) {
    --premium-surface:var(--customer-control) !important;
    --premium-text:var(--customer-panel-text) !important;
    --premium-border:var(--customer-control-outline) !important;
    --premium-action-weight:600 !important;
    background:var(--customer-control) !important;color:var(--customer-panel-text) !important;
    border:1px solid var(--customer-control-outline) !important;
    border-radius:var(--customer-control-radius) !important;
    box-sizing:border-box;height:var(--customer-control-height) !important;
    min-height:var(--customer-control-height) !important;
    padding:0 8px !important;gap:6px !important;
    font:600 11px/1.2 system-ui,sans-serif !important;
    letter-spacing:normal !important;text-transform:none !important;
    box-shadow:none !important;
    &::before {content:none !important}
    & :is(span,strong,small) {color:inherit !important;font:inherit !important;letter-spacing:inherit !important}
    &:hover:not(:disabled):not([aria-disabled=true]) {background:var(--customer-control-hover) !important;border-color:#aaa !important}
    &:is([aria-pressed=true],[aria-expanded=true],[aria-selected=true]) {border-color:#bbb !important;box-shadow:inset 0 -2px #bbb !important}
    &:focus-visible {outline:2px solid #eee !important;outline-offset:2px !important}
    &:is(:disabled,[aria-disabled=true]) {opacity:.4 !important;cursor:not-allowed}
  }
  .editor-page .topbar-actions :is(#editor-patterns-trigger,#editor-placement-trigger,#editor-billing,#open-local,#export-button) {width:auto !important}
  .editor-page :is(#editor-patterns-trigger,#editor-placement-trigger) .editor-action-logo {filter:none !important}
  .editor-page :is(#editor-patterns-trigger,#editor-placement-trigger,#editor-billing,#open-local,#export-button) svg {
    width:16px !important;height:16px !important;flex:none;stroke-width:1.6;
  }
  .editor-page #editor-presentation-toggle {
    display:flex !important;align-items:center;justify-content:center;
    flex-basis:30px !important;padding:0 4px !important;
    font-size:10px !important;text-align:center;white-space:nowrap;
  }
  .editor-page #toggle-session-gallery {
    position:absolute !important;left:50vw !important;right:auto !important;
    top:5px !important;bottom:auto !important;z-index:41;
    display:inline-flex !important;flex-direction:row !important;
    align-items:center;justify-content:center;width:max-content !important;
    max-width:calc(100vw - 24px);max-height:30px !important;
    writing-mode:horizontal-tb !important;transform:translateX(-50%) !important;
  }
  /* Hover paint never reaches a selected tool or changes its persistent state. */
  .editor-page #core-tool-buttons .editor-tool:not(:disabled):not([aria-disabled=true]):not([aria-pressed=true]):not(.rail-button-active):hover {
    --premium-surface:rgba(255,255,255,.08) !important;
    background-color:rgba(255,255,255,.08) !important;
  }
  .editor-page #toggle-session-gallery .gallery-tab-label {
    display:block !important;width:auto !important;white-space:nowrap !important;
    writing-mode:horizontal-tb !important;transform:none !important;-webkit-text-stroke:0 !important;
  }
  .editor-page #toggle-session-gallery .modern-widget-icon {
    display:block !important;position:static !important;flex:0 0 32px !important;
    width:32px !important;height:22px !important;object-fit:cover !important;transform:none !important;
  }

  /* Gallery's close target is the shared reference, including lazy panels.
     Explicit close controls keep launcher and asset-removal buttons separate. */
  :is(.editor-page,.landing-page,.account-page,.gateway-page) :is(
    #close-session-gallery,#close-generator,#editor-patterns-close,#ai-region-close,
    #gallery-preview-close,#gallery-preview-fullscreen-close,#editor-effect-close,
    #editor-tool-settings-close,#editor-color-close,#editor-start-close,#close-credit-dialog,
    #editor-smart-panel-close,#editor-canvas-handle > button,.export-close,
    #home-start-close,#recent-gallery-close,.feature-close,#bundle-cart-close,
    .customer-generation-gallery > header > button,
    button[aria-label="Dismiss service announcement"],
    #minimize-generator,#maximize-generator,#editor-smart-panel-minimize,
    #editor-smart-panel-lock,#smart-selection-help-button,#gallery-preview-fullscreen,
    #gallery-preview-zoom-out,#gallery-preview-zoom-in) {
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    box-sizing:border-box !important;flex:0 0 34px !important;
    width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;
    max-width:34px !important;max-height:34px !important;padding:0 !important;
    background:linear-gradient(90deg,transparent,#ffffff60 20%,#ffffff60 80%,transparent) center bottom / 100% 1px no-repeat transparent !important;
    border:1px solid transparent !important;border-radius:3.2px !important;
    color:#f5f5f5 !important;box-shadow:none !important;
    font:500 18px/18px Arial,sans-serif !important;letter-spacing:0 !important;text-align:center !important;
    text-transform:none !important;text-indent:0 !important;
    &:hover:not(:disabled) {background-color:#ffffff0d !important}
    &:active:not(:disabled) {background-color:#ffffff12 !important}
    &:focus-visible {outline:2px solid #d8d8d8 !important;outline-offset:-3px !important}
  }
  :is(.editor-page,.landing-page,.account-page,.gateway-page) :is(
    #close-session-gallery,#close-generator,#editor-patterns-close,#ai-region-close,
    #gallery-preview-close,#gallery-preview-fullscreen-close,#editor-effect-close,
    #editor-tool-settings-close,#editor-color-close,#editor-start-close,#close-credit-dialog,
    #editor-smart-panel-close,#editor-canvas-handle > button,.export-close,
    #home-start-close,#recent-gallery-close,.feature-close,#bundle-cart-close,
    .customer-generation-gallery > header > button,
    button[aria-label="Dismiss service announcement"]) {
    &::before,&::after {content:none !important}
  }
  .editor-page button:is(#minimize-generator,#maximize-generator) {font-size:0 !important}
  .editor-page button#editor-smart-panel-lock {font-size:10px !important}
  .editor-page button#editor-smart-panel-lock[aria-pressed=true] {
    background-color:#ffffff24 !important;box-shadow:inset 0 -2px #eee !important;
  }
  .editor-page #smart-selection-help-button::before {content:none !important}
  .editor-page .gallery-preview-heading-actions #gallery-preview-fullscreen svg {width:16px;height:16px}
  .editor-page :is(.gallery-window-actions,.window-actions,.gallery-preview-heading-actions) {
    display:flex;align-items:center;gap:6px !important;
  }
  .editor-page #gallery-upload {height:34px !important;min-height:34px !important;align-self:center}

  /* One translucent surface per popup. The full-screen 3D root stays clear. */
  :is(.editor-page,.landing-page,.account-page,.gateway-page) :is(
    dialog:not(#editor-placement-panel),[role=dialog]:not(#generator-overlay):not(#editor-placement-panel),[popover],
    .generator-window,#ai-region-controls,#session-gallery,#layer-settings-fields,
    #layer-blend-panel,#editor-toolbar-content,.editor-command-menu,#editor-guardrails-panel,
    .gallery-secondary-actions,.gallery-image-actions,.account-popover,
    .bundle-cart,.bundle-detail,.bundle-image-detail,.feature-panel,
    .gateway-start-panel):not(:where([data-developer-only],[data-developer-only] *,#developer-panel,#developer-panel *,.developer-preview-controls *,.developer-purchases *)) {
    background:var(--customer-divider) center top / 100% 1px no-repeat,
      var(--customer-divider) center bottom / 100% 1px no-repeat var(--customer-panel) !important;
    color:var(--customer-panel-text);border-color:transparent !important;
    border-radius:8px;-webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;
    box-shadow:0 8px 24px #0005;
  }
  .editor-page #editor-placement-panel :is(header,nav,aside,.placement-view-actions,
    .placement-thumbnails,.placement-gallery-host):where(:not(.live-editor-host *,[data-live-native-panel] *)) {
    background-color:var(--customer-panel) !important;
    -webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;
    border-color:transparent !important;
  }
  .editor-page #editor-placement-panel :is(header,nav,.placement-view-actions):where(:not(.live-editor-host *,[data-live-native-panel] *)) {
    background:var(--customer-divider) center bottom / 100% 1px no-repeat var(--customer-panel) !important;
  }
  .editor-page #editor-placement-panel aside:where(:not(.live-editor-host *,[data-live-native-panel] *)) {
    background:var(--customer-divider-vertical) right center / 1px 100% no-repeat var(--customer-panel) !important;
  }
  .editor-page #editor-placement-panel .placement-design {background-position:left center !important}
  .editor-page #editor-placement-panel.placement-fullscreen header nav:where(:not(.live-editor-host *,[data-live-native-panel] *)) {
    background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  }
  .editor-page #editor-toolbar-content {backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  :is(.editor-page,.landing-page,.account-page) :is(.plans-panel,.topup-section,
    .credit-dialog-amounts,.gallery-secondary-actions,.editor-text-layout,.editor-text-shadow,
    .editor-font-import,.smart-fields,.patterns-primary,.placement-gallery-heading) {
    border-inline:0 !important;border-radius:0 !important;background-color:transparent !important;
    background-image:var(--customer-divider) !important;background-position:center bottom !important;
    background-repeat:no-repeat !important;background-size:100% 1px !important;
    padding-block:var(--customer-section-gap);
  }

  /* Remove ornamental thumbnail wrappers; previews and click targets keep size. */
  .editor-page #editor-patterns-panel .patterns-card,
  .editor-page #editor-placement-panel :is(.placement-gallery-card,.placement-thumbnails button),
  .editor-page #session-gallery .artifact {
    --premium-surface:transparent !important;--premium-text:#eee !important;
    background-color:transparent !important;color:#eee !important;
    border-color:transparent !important;border-radius:0 !important;box-shadow:none !important;
    background-image:var(--customer-divider) !important;
    background-position:center bottom !important;background-size:100% 1px !important;background-repeat:no-repeat !important;
    &:hover:not(:disabled) {background-color:#ffffff0a !important}
    &:is([aria-pressed=true],[data-selected=true]) {background-color:#ffffff14 !important;box-shadow:inset 0 -2px #ddd !important}
    &:focus-visible {outline:2px solid #ddd !important;outline-offset:-2px}
  }
  .editor-page #editor-patterns-panel .patterns-card[aria-pressed=true] {outline:1px solid #ccc;outline-offset:-1px}

  /* Native and custom ranges retain their hit areas and interaction owners. */
  :is(.editor-page,.landing-page,.account-page) input[type=range]:not(:where([data-developer-only],[data-developer-only] *,#developer-panel,#developer-panel *,.developer-preview-controls *,.developer-purchases *)) {
    appearance:none !important;-webkit-appearance:none !important;
    height:24px !important;min-height:24px !important;padding:0 !important;
    border:0 !important;background:transparent !important;color:#ddd;
    &::-webkit-slider-runnable-track {height:1px;background:#ffffff40;border:0}
    &::-webkit-slider-thumb {
      appearance:none;-webkit-appearance:none;width:8px;height:10px;margin-top:-4.5px;
      border:1px solid #eee;border-radius:1px;background:#ddd;
    }
    &::-moz-range-track {height:1px;border:0;background:#ffffff40}
    &::-moz-range-thumb {width:6px;height:8px;border:1px solid #eee;border-radius:1px;background:#ddd}
    &:hover:not(:disabled)::-webkit-slider-thumb {background:#fff;box-shadow:0 0 0 3px #ffffff12}
    &:hover:not(:disabled)::-moz-range-thumb {background:#fff;box-shadow:0 0 0 3px #ffffff12}
    &:focus-visible {outline:1px solid #ddd;outline-offset:2px}
    &:disabled {opacity:.4}
  }
  .editor-page .editor-slider-track::before,.editor-page .editor-slider-fill {top:11px !important;height:1px !important;border-radius:0 !important}
  .editor-page .editor-slider-track::before {background:#ffffff40 !important}
  .editor-page .editor-slider-thumb {top:7px !important;width:8px !important;height:10px !important;margin-left:-4px !important;border-radius:1px !important}

  :is(.editor-page,.landing-page,.account-page,.gateway-page) :is(dialog,[role=dialog],
    [role=listbox],.generator-body,.results-grid,.layer-list,.history-list,.editor-tool-grid,
    #editor-tool-settings-fields,#editor-effect-fields,#editor-canvas-fields,#editor-smart-panel-fields,
    #layer-settings-fields,#layer-blend-panel,#editor-properties-scroll,.editor-command-menu,
    .patterns-fields,#editor-patterns-panel,.placement-gallery-grid,.placement-thumbnails,
    .placement-gallery-host,#editor-placement-panel aside:where(:not(.live-editor-host *,[data-live-native-panel] *)),.account-popover,.bundle-cart,
    .bundle-detail,.bundle-image-detail,.recent-gallery-list) {
    scrollbar-width:thin !important;scrollbar-color:#737373 transparent !important;
  }

  /* Transparent options belong to one blurred picker, rather than opaque rows. */
  :is(.editor-page,.landing-page,.account-page) option:not(:where([data-developer-only],[data-developer-only] *,#developer-panel,#developer-panel *,.developer-preview-controls *,.developer-purchases *)) {
    background:transparent !important;color:#f5f5f5 !important;
    &:checked {background:#ffffff18 !important;color:#fff !important}
  }
  .editor-page #editor-placement-panel .placement-select-value {color:#eee !important}
  .editor-page #editor-placement-panel .placement-select select {color:transparent !important}
  .editor-page #editor-placement-panel .placement-select::after {border-top-color:#ddd}
  @supports (appearance:base-select) {
    :is(.editor-page,.landing-page,.account-page) select:not([multiple]):not(:where([data-developer-only],[data-developer-only] *,#developer-panel,#developer-panel *,.developer-preview-controls *,.developer-purchases *)),
    :is(.editor-page,.landing-page,.account-page) select:not([multiple]):not(:where([data-developer-only],[data-developer-only] *,#developer-panel,#developer-panel *,.developer-preview-controls *,.developer-purchases *))::picker(select) {
      appearance:base-select !important;
    }
    :is(.editor-page,.landing-page,.account-page) select::picker(select) {
      background:var(--customer-panel) !important;color:#f5f5f5 !important;
      border:1px solid #ffffff30 !important;border-radius:5px;
      padding:4px;max-height:min(360px,70dvh);overflow-y:auto;
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      scrollbar-width:thin;scrollbar-color:#737373 transparent;
    }
    :is(.editor-page,.landing-page,.account-page) select option {
      min-height:30px;padding:7px 28px 7px 10px;gap:8px;
      border:0;border-bottom:1px solid #ffffff12;border-radius:0;
      &:is(:hover,:focus-visible) {background:#ffffff10 !important;outline:1px solid #888;outline-offset:-1px}
    }
  }
  @supports not (backdrop-filter:blur(1px)) {
    :is(.editor-page,.landing-page,.account-page) select::picker(select) {background:#151515 !important}
  }
}