/* Shared action palette. Component layouts retain their own sizes and spacing.
   Paint rules intentionally outrank legacy page CSS, including lazy-loaded tools. */
:root {
  --button-primary: #2b2b2b;
  --button-primary-hover: #414141;
  --button-primary-active: #1d1d1d;
  --button-on-primary: #ffffff;
  --button-surface: #ffffff;
  --button-surface-hover: #f0f2f4;
  --button-surface-active: #e6e9ed;
  --button-ink: #2e2e2e;
  --button-border: #dce0e5;
  --button-border-hover: #bdbdbd;
  --button-danger: #a33d47;
  --button-danger-soft: #fbf0f1;
  --button-danger-border: #e7c6ca;
  --button-focus: #272b30;
  --button-radius: 8px;
}
body[data-ui-theme="dark"] {
  --button-primary: #e5e9ee;
  --button-primary-hover: #ffffff;
  --button-primary-active: #d1d1d1;
  --button-on-primary: #252525;
  --button-surface: #272727;
  --button-surface-hover: #353535;
  --button-surface-active: #424242;
  --button-ink: #e8e8e8;
  --button-border: #4b4b4b;
  --button-border-hover: #757575;
  --button-danger: #f2aeb6;
  --button-danger-soft: #3a252d;
  --button-danger-border: #72505a;
  --button-focus: #c1c1c1;
}

/* Standard actions, including controls with historical component-specific names. */
:root body :is(
  .btn, .ant-btn, .sel-button, .wf-button, .primary-action,
  .auth-modal-primary-btn, .auth-modal-secondary-btn,
  .pricing-plan-btn, .pricing-cta-btn, .pricing-ghost-btn,
  .ai-image-upload-btn, .ai-image-generate-btn, .btn-upload-ant,
  .btn-export, .btn-export-file, .studio-preview-save-btn,
  .studio-crop-action-btn, .canvas-crop-inline-btn, .canvas-deform-inline-btn,
  .compressor-primary, .subtle-button, .topbar-start, .home-closing .btn,
  .app-workbench-signin-btn, .sel-favorite-action
) {
  --action-bg: var(--button-surface);
  --action-hover: var(--button-surface-hover);
  --action-active: var(--button-surface-active);
  --action-fg: var(--button-ink);
  --action-border: var(--button-border);
  --action-border-hover: var(--button-border-hover);
  appearance: none;
  background: var(--action-bg) !important;
  color: var(--action-fg) !important;
  border: 1px solid var(--action-border) !important;
  border-radius: var(--button-radius) !important;
  box-shadow: none !important;
  font-family: inherit;
  font-weight: 500 !important;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transform: none !important;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out !important;
}
:root body :is(
  .btn-primary, .ant-btn:not(.ant-btn-outline), .sel-button.primary, .wf-button.primary,
  .primary-action, .auth-modal-primary-btn, .pricing-plan-btn, .pricing-cta-btn,
  .ai-image-generate-btn, .btn-export, .btn-export-file, .studio-preview-save-btn,
  .canvas-crop-inline-btn.complete, .canvas-deform-inline-btn.primary,
  .compressor-primary, .topbar-start, .home-closing .btn
) {
  --action-bg: var(--button-primary);
  --action-hover: var(--button-primary-hover);
  --action-active: var(--button-primary-active);
  --action-fg: var(--button-on-primary);
  --action-border: var(--button-primary);
  --action-border-hover: var(--button-primary-hover);
}
:root body :is(.btn-danger, .sel-button.danger, .wf-button.danger) {
  --action-fg: var(--button-danger);
  --action-border: var(--button-danger-border);
  --action-border-hover: var(--button-danger);
  --action-hover: var(--button-danger-soft);
  --action-active: var(--button-danger-soft);
}
:root body :is(
  .btn, .ant-btn, .sel-button, .wf-button, .primary-action,
  .auth-modal-primary-btn, .auth-modal-secondary-btn,
  .pricing-plan-btn, .pricing-cta-btn, .pricing-ghost-btn,
  .ai-image-upload-btn, .ai-image-generate-btn, .btn-upload-ant,
  .btn-export, .btn-export-file, .studio-preview-save-btn,
  .studio-crop-action-btn, .canvas-crop-inline-btn, .canvas-deform-inline-btn,
  .compressor-primary, .subtle-button, .topbar-start, .home-closing .btn,
  .app-workbench-signin-btn, .sel-favorite-action
):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--action-hover) !important;
  border-color: var(--action-border-hover) !important;
  color: var(--action-fg) !important;
}
:root body :is(
  .btn, .ant-btn, .sel-button, .wf-button, .primary-action,
  .auth-modal-primary-btn, .auth-modal-secondary-btn, .pricing-plan-btn,
  .pricing-cta-btn, .pricing-ghost-btn, .ai-image-generate-btn,
  .compressor-primary, .topbar-start, .canvas-crop-inline-btn, .canvas-deform-inline-btn
):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--action-active) !important;
  transform: none !important;
}

/* Quiet icon actions. Excludes artwork, color swatches, thumbnails and crop handles. */
:root body :is(
  .canvas-panel-collapse-btn, .layer-panel-clear-btn, .layer-panel-clear-btn-bottom,
  .file-template-add-btn, .file-template-more-btn, .file-template-delete-btn,
  .file-title-icon-btn, .toolbar-zoom-btn, .canvas-zoom-btn, .canvas-center-btn,
  .canvas-focus-zoom-btn, .canvas-history-btn, .canvas-crop-zoom-btn,
  .canvas-deform-zoom-btn, .crop-preview-reset-btn, .inspector-image-icon-action,
  .cp-icon-btn, .cp-close-btn, .corner-toggle-btn, .studio-back-btn,
  .studio-view-source-btn, .studio-preview-source-btn,
  .app-workbench-sidebar-toggle, .app-workbench-theme-toggle,
  .sel-create-workflow, .sel-user-favorite, .ml-favorite,
  .rt-region > button, .wf-uploaded button, .wf-selected-template button
) {
  background: transparent !important;
  color: var(--button-ink) !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: background-color 150ms ease-out, color 150ms ease-out !important;
}
:root body :is(
  .canvas-panel-collapse-btn, .layer-panel-clear-btn, .layer-panel-clear-btn-bottom,
  .file-template-add-btn, .file-template-more-btn, .file-title-icon-btn,
  .toolbar-zoom-btn, .canvas-zoom-btn, .canvas-center-btn, .canvas-focus-zoom-btn,
  .canvas-history-btn, .canvas-crop-zoom-btn, .canvas-deform-zoom-btn,
  .crop-preview-reset-btn, .inspector-image-icon-action, .cp-icon-btn, .cp-close-btn,
  .corner-toggle-btn, .studio-back-btn, .studio-view-source-btn, .studio-preview-source-btn,
  .app-workbench-sidebar-toggle, .app-workbench-theme-toggle,
  .sel-create-workflow, .sel-user-favorite, .ml-favorite,
  .rt-region > button, .wf-uploaded button, .wf-selected-template button
):hover:not(:disabled) { background: var(--button-surface-hover) !important; }
:root body .file-template-delete-btn:hover:not(:disabled) {
  color: var(--button-danger) !important;
  background: var(--button-danger-soft) !important;
}

/* Filters and segmented choices use the same low-contrast selected surface. */
:root body :is(
  .pricing-billing-pill button, .studio-mini-tab, .studio-crop-action-btn,
  .sel-tabs button, .wf-mode button, .wf-reference-tabs button,
  .rt-layer-tabs button, .rt-visual-tabs button, .rt-property-tabs button,
  .rt-picker-categories button, .rt-picker-footer button,
  .crop-aspect-btn, .cp-view-btn, .mode-switch button, .target-presets button,
  .mockups-filter-trigger, .ai-image-chip
) {
  background: transparent !important;
  color: var(--button-ink) !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 500;
  transition: background-color 150ms ease-out, color 150ms ease-out !important;
}
:root body :is(
  .pricing-billing-pill button, .studio-mini-tab, .studio-crop-action-btn,
  .sel-tabs button, .wf-mode button, .wf-reference-tabs button,
  .rt-layer-tabs button, .rt-visual-tabs button, .rt-property-tabs button,
  .rt-picker-categories button, .rt-picker-footer button,
  .crop-aspect-btn, .cp-view-btn, .mode-switch button, .target-presets button,
  .mockups-filter-trigger, .ai-image-chip
):is(.active, .checked, [aria-pressed="true"], [aria-selected="true"]),
:root body :is(.corner-toggle-btn.checked, .inspector-image-icon-action.active) {
  background: var(--button-surface-active) !important;
  color: var(--button-ink) !important;
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
:root body :is(.sel-tabs button, .wf-mode button, .studio-mini-tab):hover:not(:disabled) {
  background: var(--button-surface-hover) !important;
}

/* Lightweight text actions and upload links. */
:root body :is(.btn-link, .sel-link, .wf-link, .auth-modal-link-btn, .sample-button, .studio-upload-text-btn) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--button-ink) !important;
  box-shadow: none !important;
  font-weight: 500;
}
:root body :is(.btn-link, .sel-link, .wf-link, .auth-modal-link-btn, .sample-button, .studio-upload-text-btn):hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root body :is(.sel-favorite-action[aria-pressed="true"]) {
  color: var(--button-danger) !important;
  background: var(--button-surface) !important;
}
:root body .mockups-card-favorite .lucide-icon { color: inherit !important; }

/* One focus and disabled treatment across all native controls and action links. */
:root body :is(button, .btn, .ant-btn, .sel-button, .wf-button, .primary-action, .topbar-start, .compressor-primary):focus-visible {
  outline: 2px solid var(--button-focus) !important;
  outline-offset: 3px !important;
}
:root body :is(button, .btn, .ant-btn, .sel-button, .wf-button, .primary-action, .topbar-start, .compressor-primary):is(:disabled, [aria-disabled="true"]) {
  opacity: .45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :root body :is(button, .btn, .ant-btn, .sel-button, .wf-button, .primary-action, .topbar-start, .compressor-primary) {
    transition: none !important;
    animation: none !important;
  }
}

/* Selection controls and menus keep their established geometry. */
:root body :is(.toolbar-select-trigger, .wf-model-trigger, .inspector-border-style-trigger, .rt-picker-trigger) {
  background: var(--button-surface) !important;
  border-color: var(--button-border) !important;
  color: var(--button-ink) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
:root body :is(.toolbar-select-trigger, .wf-model-trigger, .rt-picker-trigger):hover:not(:disabled) {
  border-color: var(--button-border-hover) !important;
}
:root body :is(.canvas-context-menu button, .canvas-context-menu .menu-item, .menu-item.has-sub .submenu button, .topbar-lang-option, .user-dropdown-link, .mockups-filter-option, .mockups-filter-level1-item) {
  color: var(--button-ink) !important;
}
:root body :is(.canvas-context-menu button, .canvas-context-menu .menu-item, .menu-item.has-sub .submenu button, .topbar-lang-option, .user-dropdown-link, .mockups-filter-option, .mockups-filter-level1-item):hover:not(:disabled) {
  color: var(--button-ink) !important;
  background: var(--button-surface-hover) !important;
}
:root body :is(.wf-task.active, .sel-overview button.selected, .mockups-filter-option.active, .mockups-filter-level1-item.selected) {
  background: var(--button-surface-active) !important;
  border-color: var(--button-border) !important;
  color: var(--button-ink) !important;
}
:root body :is(.home-search button, .ml-search button, .home-quick-links button) {
  background: var(--button-surface-hover) !important;
  color: var(--button-ink) !important;
  border-color: transparent !important;
  border-radius: 6px !important;
}
:root body :is(.home-search button, .ml-search button, .home-quick-links button):hover:not(:disabled) {
  background: var(--button-surface-active) !important;
}
:root body .ml-favorite.is-favorite { color: var(--button-danger) !important; }
:root body .tile-download { color: var(--button-ink) !important; }
:root body .tile-remove { background: var(--button-surface) !important; color: var(--button-ink) !important; border-color: var(--button-border) !important; box-shadow: none !important; }
:root body .tile-remove:hover:not(:disabled) { background: var(--button-danger-soft) !important; color: var(--button-danger) !important; }

/* Compact editor controls and legacy segmented tabs. */
:root body :is(.ant-tab-pill, .tab-pill, .auth-modal-tab, .studio-template-tab, .studio-segmented-item, .studio-export-format-item, .studio-checkbox-item, .studio-crop-mini-btn, .icon-toggle, .icon-toggle-button, .text-style-icon-toggle) {
  color: var(--button-ink) !important;
  background: transparent !important;
  border-color: var(--button-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
:root body :is(.ant-tab-pill, .tab-pill, .auth-modal-tab, .studio-template-tab, .studio-segmented-item, .studio-export-format-item, .studio-checkbox-item, .studio-crop-mini-btn, .icon-toggle, .icon-toggle-button, .text-style-icon-toggle):is(.active, .checked, .selected, [aria-pressed="true"], [aria-selected="true"]) {
  color: var(--button-ink) !important;
  background: var(--button-surface-active) !important;
  border-color: var(--button-border-hover) !important;
}
:root body :is(.auth-modal-close, .auth-modal-close-floating, .modal-close, .canvas-dialog-close, .studio-batch-close, .studio-crop-dialog-close, .rt-picker-close, .sel-dialog-close, .sel-dialog-arrow, .studio-thumb-remove, .studio-batch-source-remove, .cms-upload-remove, .cms-studio-thumb-remove, .inspector-image-crop-entry, .inspector-image-toggle-action, .inspector-rotation-reset, .wf-settings-toggle, .wf-combination-toggle, .wf-asset-redo, .wf-asset-select, .layer-panel-select-toggle, .cp-mode-select-trigger, .cp-swatch-add) {
  color: var(--button-ink) !important;
  background: var(--button-surface) !important;
  border-color: var(--button-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
:root body :is(.auth-modal-close, .auth-modal-close-floating, .modal-close, .canvas-dialog-close, .studio-batch-close, .studio-crop-dialog-close, .rt-picker-close, .sel-dialog-close, .sel-dialog-arrow, .studio-thumb-remove, .studio-batch-source-remove, .cms-upload-remove, .cms-studio-thumb-remove, .inspector-image-crop-entry, .inspector-image-toggle-action, .inspector-rotation-reset, .wf-settings-toggle, .wf-combination-toggle, .wf-asset-redo, .wf-asset-select, .layer-panel-select-toggle, .cp-mode-select-trigger, .cp-swatch-add):hover:not(:disabled) {
  background: var(--button-surface-hover) !important;
}
:root body :is(.batch-task-delete, .user-dropdown-link-danger, .wf-remove-combination) {
  color: var(--button-danger) !important;
  background: transparent !important;
  border-color: transparent !important;
}
:root body :is(.batch-task-delete, .user-dropdown-link-danger, .wf-remove-combination):hover:not(:disabled) {
  background: var(--button-danger-soft) !important;
}
:root body :is(.ai-image-clear-link, .auth-modal-back-link, .studio-breadcrumb-link, .wf-add-combination, .ml-clear) {
  color: var(--button-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root body :is(.btn, .ant-btn, .sel-button, .wf-button, .primary-action, .btn-upload-ant, .ai-image-generate-btn, .canvas-crop-inline-btn, .canvas-deform-inline-btn) :is(.iconpark-wrap, .lucide-icon, .toolbar-btn-icon) {
  color: inherit !important;
}

/* Navigation tabs are underlined labels, not segmented action buttons. */
:root body :is(.ml-tabs, .selection-favorite-tabs, .batch-task-tabs, .home-filter-tabs) button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}
:root body :is(.ml-tabs, .selection-favorite-tabs, .batch-task-tabs, .home-filter-tabs) button:hover {
  color: var(--button-ink) !important;
}
:root body :is(.ml-tabs, .selection-favorite-tabs, .batch-task-tabs, .home-filter-tabs) button:is(.active, [aria-pressed="true"]) {
  background: transparent !important;
  border-bottom-color: var(--button-ink) !important;
  color: var(--button-ink) !important;
}
/* Favorites overlay artwork without an opaque button surface in any state. */
:root body :is(.ml-favorite, .mockups-card-favorite, .sel-user-favorite),
:root body :is(.ml-favorite, .mockups-card-favorite, .sel-user-favorite):is(:hover, :active, :focus-visible, .active, .is-favorite, [aria-pressed="true"]) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
:root body :is(.ml-favorite.is-favorite, .mockups-card-favorite.active, .sel-user-favorite[aria-pressed="true"]) {
  color: var(--button-danger) !important;
}
:root body .mockups-card-favorite.active .iconpark-wrap svg,
:root body .mockups-card-favorite.active .iconpark-wrap svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Template management: quiet, underline category navigation. */
:root body .cms-tabs.cms-template-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--button-border, #e5e7eb);
  overflow-x: auto;
}
:root body .cms-template-tabs .cms-template-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 10px 2px 14px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #737373 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease;
}
:root body .cms-template-tabs .cms-template-tab:hover,
:root body .cms-template-tabs .cms-template-tab.active {
  color: #202020 !important;
}
:root body .cms-template-tabs .cms-template-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
:root body .cms-template-tabs .cms-template-tab.active::after {
  background: currentColor;
}
:root body .cms-template-tabs .cms-template-tab:focus-visible {
  outline: 2px solid #737373;
  outline-offset: -3px;
}
@media (max-width: 640px) {
  :root body .cms-tabs.cms-template-tabs { gap: 22px; }
}