/*
  Template Reshoot UI Skill Layer
  This file is the final visual authority for the workspace.
  Add future colors, component states, and feedback motion here first.
*/

:root {
  color-scheme: light;

  --ds-bg: #f5f6f8;
  --ds-shell: #f5f6f8;
  --ds-sidebar: #f5f6f8;
  --ds-panel: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f8f9fb;
  --ds-hover: #eef1f5;
  --ds-pressed: #e4e8ee;
  --ds-selected: #eaf2ff;
  --ds-selected-strong: #deebff;
  --ds-feedback-hover: #eceef2;
  --ds-feedback-pressed: #dde1e7;
  --ds-feedback-selected: #e6e9ee;
  --ds-feedback-selected-hover: #dce1e8;
  --ds-feedback-badge: #dfe3e9;

  --ds-line: #e1e5eb;
  --ds-line-strong: #c8d0da;
  --ds-line-accent: #aac4ff;
  --ds-feedback-line-hover: #c5cbd4;
  --ds-feedback-line-pressed: #b4bcc8;

  --ds-text: #101828;
  --ds-text-soft: #344054;
  --ds-text-muted: #667085;
  --ds-text-subtle: #98a2b3;
  --ds-text-inverse: #ffffff;

  --ds-accent: #2563eb;
  --ds-accent-lift: #2d6df3;
  --ds-accent-hover: #1d4ed8;
  --ds-accent-pressed: #1e40af;
  --ds-accent-soft: #eaf1ff;
  --ds-accent-softer: #f3f7ff;
  --ds-accent-shadow: rgba(37, 99, 235, 0.22);
  --ds-disabled: #eef1f5;
  --ds-disabled-line: #e3e7ee;

  --ds-success: #0f8f6e;
  --ds-success-soft: #e8f7f2;
  --ds-warning: #b7791f;
  --ds-warning-soft: #fff7e6;
  --ds-danger: #d92d20;
  --ds-danger-soft: #fff0ee;

  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;
  --ds-radius-pill: 999px;

  --ds-btn-h-xs: 28px;
  --ds-btn-h-sm: 32px;
  --ds-btn-h-md: 36px;
  --ds-btn-h-lg: 44px;
  --ds-compact-pill-h: 30px;
  --ds-compact-pill-min-w: 42px;
  --ds-compact-pill-count-size: 30px;
  --ds-compact-pill-font-size: 12px;
  --ds-compact-pill-font-weight: 680;
  --ds-action-pill-h: 28px;
  --ds-action-pill-font-size: 11px;
  --ds-media-hover-transform: translateY(-1px) scale(1.006);
  --ds-media-press-transform: translateY(0) scale(0.998);

  --ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --ds-shadow-sm: 0 8px 18px rgba(16, 24, 40, 0.08);
  --ds-shadow-md: 0 18px 48px rgba(16, 24, 40, 0.13);
  --ds-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.16);
  --ds-feedback-ripple: rgba(80, 86, 96, 0.18);

  --ds-font-body: "Microsoft YaHei UI", "Segoe UI Variable", "Segoe UI", "PingFang SC", Arial, sans-serif;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 520;
  --ds-font-weight-strong: 720;

  --ds-duration-fast: 110ms;
  --ds-duration: 160ms;
  --ds-duration-slow: 240ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --ui-bg: var(--ds-bg);
  --ui-sidebar: var(--ds-sidebar);
  --ui-panel: var(--ds-panel);
  --ui-surface: var(--ds-surface);
  --ui-surface-soft: var(--ds-surface-soft);
  --ui-surface-muted: var(--ds-surface-soft);
  --ui-hover: var(--ds-hover);
  --ui-line: var(--ds-line);
  --ui-line-strong: var(--ds-line-strong);
  --ui-text: var(--ds-text);
  --ui-text-soft: var(--ds-text-soft);
  --ui-text-muted: var(--ds-text-muted);
  --ui-selected: var(--ds-selected);
  --ui-shadow: var(--ds-shadow-xs);
  --ui-radius-lg: var(--ds-radius-xl);
  --ui-radius-md: var(--ds-radius-lg);
  --ui-radius-sm: var(--ds-radius-md);
  --ui-btn-h: var(--ds-btn-h-md);
  --ui-btn-h-sm: var(--ds-btn-h-sm);

  --ow-line: var(--ds-line);
  --ow-line-strong: var(--ds-line-strong);
  --ow-hover: var(--ds-hover);
  --ow-text: var(--ds-text);
  --ow-text-muted: var(--ds-text-muted);
  --ow-blue-soft: var(--ds-accent-soft);
  --ow-blue-strong: var(--ds-accent);
}

html,
body {
  background: var(--ds-bg) !important;
  color: var(--ds-text) !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ds-font-body) !important;
}

::selection {
  background: rgba(37, 99, 235, 0.18);
  color: var(--ds-text);
}

button,
[role="button"],
.upload-dropzone,
.result-card,
.template-library-row {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
[role="button"]:focus-visible,
.upload-dropzone:focus-within,
.choice-pill:focus-visible,
.tab-pill:focus-visible,
.prompt-button:focus-visible,
.batch-button:focus-visible,
.template-favorite-button:focus-visible,
.result-page-list button:focus-visible,
.api-field input:focus,
.api-field select:focus,
.prompt-modal textarea:focus,
.edit-modal textarea:focus {
  outline: none !important;
  border-color: var(--ds-line-accent) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.studio-layout {
  background: var(--ds-bg) !important;
}

.nav-rail {
  background: var(--ds-sidebar) !important;
  border-right: 1px solid var(--ds-line) !important;
}

.nav-brand {
  border-bottom-color: var(--ds-line) !important;
}

.nav-brand h1,
.topbar__brand h1,
.card-head h2,
.results-head h2,
.footer-modal__head strong,
.prompt-modal__head strong,
.preview-modal__head strong,
.edit-modal__head strong,
.template-library-modal__head strong {
  color: var(--ds-text) !important;
  font-weight: var(--ds-font-weight-strong) !important;
  letter-spacing: 0 !important;
}

.eyebrow,
.nav-brand .eyebrow,
.helper-text,
.results-head p,
.footer-modal__head span,
.prompt-modal__head span,
.preview-modal__head span,
.edit-modal__head span,
.api-settings__hint {
  color: var(--ds-text-muted) !important;
}

.nav-rail__group {
  border-bottom-color: var(--ds-line) !important;
}

.nav-rail__section-toggle,
.nav-rail .nav-rail__item,
.nav-rail__login {
  min-height: var(--ds-btn-h-md) !important;
  border-radius: var(--ds-radius-sm) !important;
  color: var(--ds-text-soft) !important;
  transition:
    background-color var(--ds-duration) var(--ds-ease-standard),
    color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.nav-rail__section-toggle:hover,
.nav-rail .nav-rail__item:hover,
.nav-rail__login:hover {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.nav-rail__section-toggle:active,
.nav-rail .nav-rail__item:active,
.nav-rail__login:active,
.nav-rail .nav-rail__item.is-pressing {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) scale(0.996) !important;
}

.nav-rail .nav-rail__item.is-active {
  background: var(--ds-selected) !important;
  color: var(--ds-accent-pressed) !important;
  box-shadow: inset 2px 0 0 var(--ds-accent) !important;
}

.nav-rail .nav-rail__item.is-active:hover {
  background: var(--ds-selected-strong) !important;
}

.nav-rail__chevron::before {
  border-right-color: var(--ds-text-subtle) !important;
  border-bottom-color: var(--ds-text-subtle) !important;
}

.nav-rail__section-toggle:hover .nav-rail__chevron::before {
  border-right-color: var(--ds-accent) !important;
  border-bottom-color: var(--ds-accent) !important;
}

.nav-rail__item-count {
  background: var(--ds-accent-soft) !important;
  color: var(--ds-accent-pressed) !important;
}

.topbar,
.control-panel,
.results-board,
.upload-card,
.control-card,
.result-canvas {
  border-color: var(--ds-line) !important;
  background: var(--ds-panel) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

.stat-card,
.generation-options,
.option-row,
.api-settings,
.footer-modal__section,
.template-library-row {
  border-color: var(--ds-line) !important;
  background: var(--ds-surface-soft) !important;
}

.upload-dropzone {
  border-color: var(--ds-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
  transition:
    border-color var(--ds-duration) var(--ds-ease-standard),
    background-color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.upload-dropzone:hover,
.upload-dropzone:focus-within {
  border-color: var(--ds-line-accent) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--ds-accent-softer)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(37, 99, 235, 0.08) !important;
}

.upload-dropzone:active,
.upload-dropzone.is-pressing {
  transform: translateY(1px) scale(0.998) !important;
  background: var(--ds-selected) !important;
}

.upload-dropzone__meta strong,
.option-row strong,
.stat-card strong,
.result-summary strong {
  color: var(--ds-text) !important;
  font-weight: var(--ds-font-weight-strong) !important;
}

.upload-dropzone__meta span,
.option-row span,
.stat-card span,
.result-summary span {
  color: var(--ds-text-muted) !important;
}

.asset-preview__empty {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent 44%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

.choice-pill,
.tab-pill,
.prompt-button,
.batch-button,
.template-library-modal button,
.template-library-row button,
.result-page-list button,
.result-page-button,
.preview-modal__actions button,
.prompt-modal__actions button,
#editModalClose,
.footer-modal__close,
.nav-rail__save,
.template-favorite-button {
  min-height: var(--ds-btn-h-sm) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-soft) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  font-weight: var(--ds-font-weight-strong) !important;
  transition:
    background-color var(--ds-duration) var(--ds-ease-standard),
    border-color var(--ds-duration) var(--ds-ease-standard),
    color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.choice-pill:hover:not(:disabled),
.tab-pill:hover:not(:disabled),
.prompt-button:hover:not(:disabled),
.batch-button:hover:not(:disabled),
.template-library-modal button:hover:not(:disabled),
.template-library-row button:hover:not(:disabled),
.result-page-list button:hover:not(:disabled),
.result-page-button:hover:not(:disabled),
.preview-modal__actions button:hover:not(:disabled),
.prompt-modal__actions button:hover:not(:disabled),
#editModalClose:hover:not(:disabled),
.footer-modal__close:hover:not(:disabled),
.nav-rail__save:hover:not(:disabled),
.template-favorite-button:hover:not(:disabled) {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  transform: translateY(-1px) !important;
}

.choice-pill:active:not(:disabled),
.tab-pill:active:not(:disabled),
.prompt-button:active:not(:disabled),
.batch-button:active:not(:disabled),
.template-library-modal button:active:not(:disabled),
.template-library-row button:active:not(:disabled),
.result-page-list button:active:not(:disabled),
.result-page-button:active:not(:disabled),
.preview-modal__actions button:active:not(:disabled),
.prompt-modal__actions button:active:not(:disabled),
#editModalClose:active:not(:disabled),
.footer-modal__close:active:not(:disabled),
.nav-rail__save:active:not(:disabled),
.template-favorite-button:active:not(:disabled),
.choice-pill.is-pressing,
.tab-pill.is-pressing,
.prompt-button.is-pressing,
.batch-button.is-pressing,
.template-favorite-button.is-pressing {
  background: var(--ds-pressed) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transform: translateY(1px) scale(0.985) !important;
}

.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.template-library-modal__tabs button.is-active {
  border-color: var(--ds-line-accent) !important;
  background: var(--ds-selected) !important;
  color: var(--ds-accent-pressed) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08) !important;
}

.choice-group.is-disabled {
  opacity: 0.56 !important;
  filter: saturate(0.86) !important;
}

.primary-button,
.batch-button--primary,
.nav-rail__save {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 10px 22px var(--ds-accent-shadow) !important;
}

/* Final color authority: preserve this app's own background palette. */
:root {
  --ds-bg: #f5f6f8;
  --ds-shell: #f5f6f8;
  --ds-sidebar: #f5f6f8;
  --ds-panel: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f8f9fb;
  --ui-bg: var(--ds-bg);
  --ui-sidebar: var(--ds-sidebar);
  --ui-panel: var(--ds-panel);
  --ui-surface: var(--ds-surface);
  --ui-surface-soft: var(--ds-surface-soft);
  --ui-surface-muted: var(--ds-surface-soft);
}

html,
body,
.studio-layout,
.app-shell,
.workspace {
  background: var(--ds-shell) !important;
}

.nav-rail {
  background: var(--ds-sidebar) !important;
}

.topbar,
.control-panel,
.results-board,
.control-panel > .upload-card,
.control-panel > .control-card,
.results-head,
.result-canvas,
.results-pane,
.result-grid,
.result-pagination,
.result-summary,
.generation-options,
.option-row,
.stat-card,
.nav-rail__points,
.nav-rail__footer-card {
  background: var(--ds-panel) !important;
}

/* Fix result header crowding in batch mode: no absolute overlap. */
.results-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.results-head > div:first-child {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.results-mode-switch {
  position: static !important;
  grid-column: 2 !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  justify-self: end !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
}

.results-controls {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.batch-download-controls {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.results-controls .batch-button,
.results-controls .prompt-button,
.results-controls .save-template-button {
  min-width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

.results-mode-switch .tab-pill {
  min-width: 72px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

.results-controls .template-favorite-button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
}

/* Final header behavior: keep Main/SKU centered while batch actions expand/collapse on the right. */
.results-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.results-head > div:first-child {
  grid-column: 1 !important;
  min-width: 0 !important;
  padding-right: 180px !important;
}

.results-mode-switch {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  transform: translate(-50%, -50%) !important;
  justify-self: auto !important;
}

.results-controls {
  grid-column: 2 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: calc(50vw - 130px) !important;
  overflow: hidden !important;
}

.batch-download-controls {
  display: flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.results-controls .batch-button,
.results-controls .prompt-button,
.results-controls .save-template-button {
  flex: 0 0 auto !important;
  min-width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}



/* Button text alignment and active weight, matching the lightweight ChatGPT control feel. */
.choice-pill,
.tab-pill,
.prompt-button,
.batch-button,
.template-favorite-button,
.generation-mode-menu button,
.generation-mode-menu--inline button,
.result-page-button,
.result-page-list button,
.upload-asset-actions button,
.result-card__actions button,
.result-card__preview-open,
.result-card__edit,
.result-card__download,
.preview-modal__actions button,
.prompt-modal__actions button,
.template-library-modal button,
.template-library-row button,
.footer-modal__close,
#editModalClose {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  color: #343434 !important;
  font-weight: 560 !important;
}

.choice-pill:hover:not(:disabled),
.tab-pill:hover:not(:disabled),
.prompt-button:hover:not(:disabled),
.batch-button:hover:not(:disabled),
.template-favorite-button:hover:not(:disabled),
.generation-mode-menu button:hover:not(:disabled),
.generation-mode-menu--inline button:hover:not(:disabled),
.result-page-button:hover:not(:disabled),
.result-page-list button:hover:not(:disabled),
.upload-asset-actions button:hover:not(:disabled),
.result-card__actions button:hover:not(:disabled),
.result-card__preview-open:hover:not(:disabled),
.result-card__edit:hover:not(:disabled),
.result-card__download:hover:not(:disabled),
.preview-modal__actions button:hover:not(:disabled),
.prompt-modal__actions button:hover:not(:disabled),
.template-library-modal button:hover:not(:disabled),
.template-library-row button:hover:not(:disabled),
.footer-modal__close:hover:not(:disabled),
#editModalClose:hover:not(:disabled) {
  color: #1f1f1f !important;
  font-weight: 620 !important;
}

.choice-pill:active:not(:disabled),
.tab-pill:active:not(:disabled),
.prompt-button:active:not(:disabled),
.batch-button:active:not(:disabled),
.template-favorite-button:active:not(:disabled),
.generation-mode-menu button:active:not(:disabled),
.generation-mode-menu--inline button:active:not(:disabled),
.result-page-button:active:not(:disabled),
.result-page-list button:active:not(:disabled),
.upload-asset-actions button:active:not(:disabled),
.result-card__actions button:active:not(:disabled),
.result-card__preview-open:active:not(:disabled),
.result-card__edit:active:not(:disabled),
.result-card__download:active:not(:disabled),
.preview-modal__actions button:active:not(:disabled),
.prompt-modal__actions button:active:not(:disabled),
.template-library-modal button:active:not(:disabled),
.template-library-row button:active:not(:disabled),
.footer-modal__close:active:not(:disabled),
#editModalClose:active:not(:disabled),
.choice-pill.is-pressing,
.tab-pill.is-pressing,
.prompt-button.is-pressing,
.batch-button.is-pressing,
.template-favorite-button.is-pressing {
  color: #111111 !important;
  font-weight: 680 !important;
}

.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu button.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.template-library-modal__tabs button.is-active,
.template-favorite-button.is-favorite {
  color: #111111 !important;
  font-weight: 700 !important;
}

.results-mode-switch .tab-pill,
.results-controls .prompt-button,
.results-controls .batch-button,
.results-controls .template-favorite-button {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
}

.template-favorite-button {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}

.template-favorite-button span[aria-hidden="true"] {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.nav-rail__section-toggle,
.nav-rail .nav-rail__item,
.nav-rail__login {
  display: grid !important;
  align-items: center !important;
  line-height: 1 !important;
}

.nav-rail .nav-rail__item.is-active,
.nav-rail .nav-rail__item:active,
.nav-rail .nav-rail__item.is-pressing {
  color: #111111 !important;
  font-weight: 650 !important;
}

/* Final color authority: preserve this app's own background palette. */
:root {
  --ds-bg: #f5f6f8;
  --ds-shell: #f5f6f8;
  --ds-sidebar: #f5f6f8;
  --ds-panel: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f8f9fb;
  --ui-bg: var(--ds-bg);
  --ui-sidebar: var(--ds-sidebar);
  --ui-panel: var(--ds-panel);
  --ui-surface: var(--ds-surface);
  --ui-surface-soft: var(--ds-surface-soft);
  --ui-surface-muted: var(--ds-surface-soft);
}

html,
body,
.studio-layout,
.app-shell,
.workspace {
  background: var(--ds-shell) !important;
}

.nav-rail {
  background: var(--ds-sidebar) !important;
}

.topbar,
.control-panel,
.results-board,
.control-panel > .upload-card,
.control-panel > .control-card,
.results-head,
.result-canvas,
.results-pane,
.result-grid,
.result-pagination,
.result-summary,
.generation-options,
.option-row,
.stat-card,
.nav-rail__points,
.nav-rail__footer-card {
  background: var(--ds-panel) !important;
}

/* Keep the app's original workspace color system; ChatGPT is only a control-style reference. */
:root {
  --ds-bg: #f5f6f8;
  --ds-shell: #f5f6f8;
  --ds-sidebar: #f5f6f8;
  --ds-panel: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f8f9fb;
  --ui-bg: var(--ds-bg);
  --ui-sidebar: var(--ds-sidebar);
  --ui-panel: var(--ds-panel);
  --ui-surface: var(--ds-surface);
  --ui-surface-soft: var(--ds-surface-soft);
  --ui-surface-muted: var(--ds-surface-soft);
}

html,
body,
.studio-layout,
.app-shell,
.workspace {
  background: var(--ds-shell) !important;
}

.nav-rail {
  background: var(--ds-sidebar) !important;
}

.topbar,
.control-panel,
.results-board,
.control-panel > .upload-card,
.control-panel > .control-card,
.results-head,
.result-canvas,
.results-pane,
.result-grid,
.result-pagination,
.result-summary,
.generation-options,
.option-row,
.stat-card {
  background: var(--ds-panel) !important;
}

.nav-rail__points,
.nav-rail__footer-card {
  background: var(--ds-panel) !important;
}

.primary-button:hover:not(:disabled),
.batch-button--primary:hover:not(:disabled),
.nav-rail__save:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(135deg, var(--ds-accent-lift), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28) !important;
}

.primary-button:active:not(:disabled),
.batch-button--primary:active:not(:disabled),
.nav-rail__save:active:not(:disabled),
.primary-button.is-pressing {
  background: var(--ds-accent-pressed) !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.2) !important;
  transform: translateY(1px) scale(0.992) !important;
}

.primary-button:disabled,
.primary-button.is-disabled,
.batch-button:disabled,
.prompt-button:disabled,
.choice-pill:disabled,
.tab-pill:disabled,
.template-favorite-button:disabled,
.save-template-button:disabled {
  background: var(--ds-disabled) !important;
  border-color: var(--ds-disabled-line) !important;
  color: var(--ds-text-subtle) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  transform: none !important;
}

.primary-button__count {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

.primary-button:disabled .primary-button__count,
.primary-button.is-disabled .primary-button__count {
  background: rgba(152, 162, 179, 0.12) !important;
  color: var(--ds-text-subtle) !important;
}

.status-badge {
  border-color: var(--ds-line) !important;
  background: var(--ds-surface-soft) !important;
  color: var(--ds-text-muted) !important;
}

.status-badge.is-ready {
  border-color: rgba(15, 143, 110, 0.2) !important;
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
}

.status-badge--success {
  border-color: rgba(15, 143, 110, 0.2) !important;
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
}

.status-badge--warning {
  border-color: rgba(183, 121, 31, 0.22) !important;
  background: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
}

.status-badge--danger {
  border-color: rgba(217, 45, 32, 0.2) !important;
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

.status-badge--accent,
#generationBadge {
  border-color: rgba(37, 99, 235, 0.18) !important;
  background: var(--ds-accent-soft) !important;
  color: var(--ds-accent-pressed) !important;
}

.result-card {
  border-color: var(--ds-line) !important;
  background: var(--ds-surface) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition:
    border-color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.result-card:hover {
  border-color: var(--ds-line-strong) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  transform: translateY(-1px) !important;
}

.result-card:active,
.result-card.is-pressing {
  transform: translateY(1px) scale(0.997) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

.result-card.is-selected,
.result-card.is-batch-selected {
  border-color: var(--ds-line-accent) !important;
  box-shadow:
    inset 0 0 0 1px rgba(37, 99, 235, 0.18),
    0 10px 24px rgba(37, 99, 235, 0.1) !important;
}

.result-card__actions button,
.upload-asset-actions button {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--ds-text-soft) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.1) !important;
}

.result-card__actions button:hover,
.upload-asset-actions button:hover {
  background: #ffffff !important;
  color: var(--ds-accent-pressed) !important;
}

.api-field input,
.api-field select,
.prompt-modal textarea,
.edit-modal textarea {
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  transition:
    border-color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    background-color var(--ds-duration) var(--ds-ease-standard) !important;
}

.api-field input:hover,
.api-field select:hover,
.prompt-modal textarea:hover,
.edit-modal textarea:hover {
  border-color: var(--ds-line-strong) !important;
}

.api-field input::placeholder,
.prompt-modal textarea::placeholder,
.edit-modal textarea::placeholder {
  color: var(--ds-text-subtle) !important;
}

.prompt-modal__backdrop,
.preview-modal__backdrop,
.edit-modal__backdrop,
.footer-modal__backdrop,
.template-library-modal__backdrop,
.template-create-modal__backdrop {
  background: rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(8px) saturate(0.96) !important;
}

.prompt-modal__panel,
.preview-modal__panel,
.edit-modal__panel,
.footer-modal__panel,
.template-library-modal__panel,
.template-create-modal__panel {
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-radius-xl) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.ui-press-feedback-host {
  position: relative !important;
  overflow: hidden !important;
}

.ui-press-ripple {
  position: absolute !important;
  z-index: 3 !important;
  left: var(--ui-ripple-x, 50%) !important;
  top: var(--ui-ripple-y, 50%) !important;
  width: var(--ui-ripple-size, 44px) !important;
  height: var(--ui-ripple-size, 44px) !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.16) !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0) !important;
  animation: uiRipple 560ms var(--ds-ease-out) forwards !important;
}

.primary-button .ui-press-ripple,
.batch-button--primary .ui-press-ripple,
.nav-rail__save .ui-press-ripple {
  background: rgba(255, 255, 255, 0.34) !important;
}

.primary-button.generation-submit.is-busy {
  cursor: progress !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.32) !important;
}

.primary-button.generation-submit.is-busy::after {
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.16) 34%,
    rgba(255, 255, 255, 0.44) 50%,
    rgba(255, 255, 255, 0) 68%
  ) !important;
}

.has-generation-task-queue .generation-task-queue,
.generation-task-queue {
  border-color: var(--ds-line-accent) !important;
  background: var(--ds-accent-softer) !important;
}

.ui-toast-stack {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 1400 !important;
  display: grid !important;
  gap: 8px !important;
  width: min(360px, calc(100vw - 32px)) !important;
  pointer-events: none !important;
}

.ui-toast {
  display: grid !important;
  gap: 2px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--ds-text) !important;
  box-shadow: var(--ds-shadow-md) !important;
  pointer-events: auto !important;
  animation: uiToastIn var(--ds-duration-slow) var(--ds-ease-out) both !important;
}

.ui-toast--with-action {
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 10px !important;
}

.ui-toast strong,
.ui-toast span {
  display: block !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  letter-spacing: 0 !important;
}

.ui-toast strong {
  grid-column: 1 !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: var(--ds-font-weight-strong) !important;
  line-height: 18px !important;
}

.ui-toast span {
  grid-column: 1 !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: var(--ds-font-weight-medium) !important;
  line-height: 17px !important;
}

.ui-toast__action {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  min-width: 52px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-soft) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  font-size: 12px !important;
  font-weight: var(--ds-font-weight-strong) !important;
  line-height: 28px !important;
}

.ui-toast__action:hover,
.ui-toast__action:focus-visible {
  outline: none !important;
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.ui-toast__action:active {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) scale(0.985) !important;
}

.ui-toast--success {
  border-color: rgba(15, 143, 110, 0.2) !important;
  background: linear-gradient(180deg, #ffffff, var(--ds-success-soft)) !important;
}

.ui-toast--warning {
  border-color: rgba(183, 121, 31, 0.22) !important;
  background: linear-gradient(180deg, #ffffff, var(--ds-warning-soft)) !important;
}

.ui-toast--danger {
  border-color: rgba(217, 45, 32, 0.2) !important;
  background: linear-gradient(180deg, #ffffff, var(--ds-danger-soft)) !important;
}

.ui-toast--info {
  border-color: rgba(37, 99, 235, 0.18) !important;
  background: linear-gradient(180deg, #ffffff, var(--ds-accent-softer)) !important;
}

.ui-toast.is-leaving {
  animation: uiToastOut var(--ds-duration) var(--ds-ease-standard) forwards !important;
}

@keyframes uiRipple {
  0% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes uiSurfaceIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes uiToastIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes uiToastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .prompt-modal:not([hidden]) .prompt-modal__panel,
  .preview-modal:not([hidden]) .preview-modal__panel,
  .edit-modal:not([hidden]) .edit-modal__panel,
  .footer-modal:not([hidden]) .footer-modal__panel,
  .template-library-modal:not([hidden]) .template-library-modal__panel,
  .template-create-modal:not([hidden]) .template-create-modal__panel {
    animation: uiSurfaceIn var(--ds-duration-slow) var(--ds-ease-out) both !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ui-press-ripple {
    display: none !important;
  }
}

/* Unified application color plane: keep every major area in one light workspace system. */
html,
body,
.studio-layout,
.app-shell,
.workspace {
  background: var(--ds-shell) !important;
}

.nav-rail {
  background: var(--ds-sidebar) !important;
  border-right: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}

.topbar,
.control-panel,
.results-board {
  border: 1px solid var(--ds-line) !important;
  background: var(--ds-panel) !important;
  box-shadow: none !important;
}

.control-panel > .upload-card,
.control-panel > .control-card,
.results-head,
.result-canvas,
.results-pane,
.result-grid,
.result-pagination,
.generation-options,
.option-row,
.stat-card,
.nav-rail__points,
.nav-rail__footer-card {
  border-color: var(--ds-line) !important;
  background: var(--ds-panel) !important;
  box-shadow: none !important;
}

.control-panel {
  background: var(--ds-panel) !important;
}

.control-panel::before,
.control-panel::after,
.results-board::before,
.results-board::after,
.result-canvas::before,
.result-canvas::after {
  background: transparent !important;
}

.upload-dropzone,
.api-field input,
.api-field select,
.prompt-modal textarea,
.edit-modal textarea,
.choice-pill,
.tab-pill,
.prompt-button,
.batch-button,
.template-favorite-button,
.result-page-list button,
.result-page-button,
.preview-modal__actions button,
.prompt-modal__actions button,
#editModalClose,
.footer-modal__close {
  background: var(--ds-panel) !important;
}

.upload-dropzone:hover,
.upload-dropzone:focus-within,
.choice-pill:hover:not(:disabled),
.tab-pill:hover:not(:disabled),
.prompt-button:hover:not(:disabled),
.batch-button:hover:not(:disabled),
.template-favorite-button:hover:not(:disabled),
.result-page-list button:hover:not(:disabled),
.result-page-button:hover:not(:disabled),
.preview-modal__actions button:hover:not(:disabled),
.prompt-modal__actions button:hover:not(:disabled),
#editModalClose:hover:not(:disabled),
.footer-modal__close:hover:not(:disabled),
.nav-rail__section-toggle:hover,
.nav-rail .nav-rail__item:hover,
.nav-rail__login:hover,
.nav-rail__footer-card:hover,
.nav-rail__points:hover {
  background: var(--ds-hover) !important;
}

.nav-rail .nav-rail__item.is-active,
.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.template-library-modal__tabs button.is-active {
  border-color: var(--ds-line-accent) !important;
  background: var(--ds-selected) !important;
  color: var(--ds-accent-pressed) !important;
}

.nav-rail .nav-rail__item.is-active {
  box-shadow: inset 2px 0 0 var(--ds-accent) !important;
}

.nav-rail .nav-rail__item.is-active:hover,
.choice-pill.is-selected:hover,
.tab-pill.is-active:hover,
.generation-mode-menu--inline button.is-active:hover,
.result-page-list button.is-active:hover {
  background: var(--ds-selected-strong) !important;
}

.upload-dropzone.has-image,
.upload-dropzone.has-image:hover,
.result-card,
.result-card:hover {
  background: var(--ds-panel) !important;
}

.result-card.is-selected,
.result-card.is-batch-selected {
  border-color: var(--ds-line-accent) !important;
  background: var(--ds-panel) !important;
}

.status-badge {
  background: var(--ds-surface-soft) !important;
}

.primary-button,
.batch-button--primary,
.nav-rail__save {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 10px 22px var(--ds-accent-shadow) !important;
}

.primary-button:hover:not(:disabled),
.batch-button--primary:hover:not(:disabled),
.nav-rail__save:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(135deg, var(--ds-accent-lift), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
}

/* Results canvas should not add a second frame around image cards. */
.results-board .result-canvas,
.results-board .results-pane,
.results-board .result-grid {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.results-board .result-canvas {
  overflow: hidden !important;
}

.results-board .result-pagination {
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 18px 10px !important;
}

.results-board .result-page-button,
.results-board .result-page-list button {
  background: var(--ds-panel) !important;
}

/* Compact result footer: pagination and variation controls should stay low and proportional. */
.results-board .result-pagination {
  min-height: 30px !important;
  padding: 2px 18px 4px !important;
  gap: 6px !important;
  align-items: center !important;
}

.results-board .result-page-total {
  font-size: 11px !important;
  line-height: 14px !important;
}

.results-board .result-page-button,
.results-board .result-page-list button {
  min-width: 30px !important;
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 26px !important;
}

.results-board .result-summary {
  grid-row: 3 !important;
  min-height: 48px !important;
  border: 0 !important;
  border-top: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.results-board .summary-body {
  align-items: center !important;
  padding: 0 12px 2px !important;
}

.results-board .slider-panel--split {
  gap: 26px !important;
  align-items: center !important;
}

.results-board .slider-panel--split > .slider-box + .slider-box {
  padding-left: 14px !important;
}

.results-board .slider-box {
  gap: 2px !important;
  align-content: center !important;
}

.results-board .slider-control {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 22px !important;
}

.results-board .slider-value-wrap {
  width: 54px !important;
  min-height: 22px !important;
  height: 22px !important;
}

.results-board .slider-number {
  width: 25px !important;
  height: 18px !important;
  font-size: 10px !important;
  line-height: 18px !important;
}

.results-board .slider-value-wrap span {
  font-size: 10px !important;
  line-height: 18px !important;
}

.results-board .slider-control input[type="range"] {
  margin: 0 !important;
}

.results-board .slider-copy {
  display: grid !important;
  gap: 0 !important;
  min-width: 0 !important;
}

.results-board .slider-copy strong {
  font-size: 11px !important;
  line-height: 13px !important;
}

.results-board .slider-copy span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

/* Neutral premium tuning: blue is reserved for primary action buttons and tiny accents. */
:root {
  --ds-selected: #eef1f5;
  --ds-selected-strong: #e5e9ef;
  --ds-line-accent: #c9d2df;
  --ds-accent-soft: #f1f4f8;
  --ds-accent-softer: #f7f9fc;
}

.nav-rail .nav-rail__item.is-active,
.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.template-library-modal__tabs button.is-active {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-selected) !important;
  color: var(--ds-text) !important;
  box-shadow: none !important;
}

.nav-rail .nav-rail__item.is-active::before,
.nav-rail__item.is-active::before {
  content: none !important;
  display: none !important;
}

.nav-rail .nav-rail__item.is-active:hover,
.choice-pill.is-selected:hover,
.tab-pill.is-active:hover,
.generation-mode-menu--inline button.is-active:hover,
.result-page-list button.is-active:hover {
  background: var(--ds-selected-strong) !important;
  color: var(--ds-text) !important;
}

.nav-rail__item-count {
  background: #e6eaf0 !important;
  color: var(--ds-text-soft) !important;
}

.upload-dropzone,
.upload-dropzone.has-image,
.upload-dropzone.has-image:hover,
.result-card.is-selected,
.result-card.is-batch-selected {
  border-color: var(--ds-line-strong) !important;
}

.upload-dropzone:hover,
.upload-dropzone:focus-within {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-panel) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(16, 24, 40, 0.06) !important;
}

.result-card.is-selected,
.result-card.is-batch-selected {
  box-shadow:
    inset 0 0 0 1px rgba(148, 163, 184, 0.28),
    0 8px 18px rgba(16, 24, 40, 0.06) !important;
}

.status-badge--accent,
#generationBadge {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-selected) !important;
  color: var(--ds-text-soft) !important;
}

/* Merge pagination and variation controls into one quiet footer plane. */
.results-board .result-pagination {
  min-height: 28px !important;
  padding: 4px 18px 0 !important;
  border-top: 1px solid rgba(225, 229, 235, 0.72) !important;
}

.results-board .result-summary {
  min-height: 48px !important;
  margin-top: -1px !important;
  border-top: 0 !important;
}

.results-board .summary-body {
  padding: 0 12px 6px !important;
}

.results-board .slider-panel--split > .slider-box + .slider-box {
  border-left-color: rgba(225, 229, 235, 0.58) !important;
}

/* Full neutral interaction pass: every non-primary clickable surface follows the grey system. */
:root {
  --ds-control-bg: #ffffff;
  --ds-control-hover: #eef1f5;
  --ds-control-pressed: #e3e7ed;
  --ds-control-selected: #edf0f4;
  --ds-control-selected-hover: #e4e8ee;
  --ds-control-border: #d8dee7;
  --ds-control-border-strong: #c2cad6;
  --ds-control-text: #27313f;
  --ds-control-muted: #667085;
  --ds-shadow-focus: 0 0 0 3px rgba(100, 116, 139, 0.16);
}

.choice-pill,
.tab-pill,
.prompt-button,
.batch-button,
.template-favorite-button,
.generation-mode-menu button,
.generation-mode-menu--inline button,
.result-page-button,
.result-page-list button,
.upload-asset-actions button,
.result-card__actions button,
.result-card__preview-open,
.result-card__edit,
.result-card__download,
.preview-modal__actions button,
.prompt-modal__actions button,
.template-library-modal button,
.template-library-row button,
.footer-modal__close,
#editModalClose,
.nav-rail__section-toggle,
.nav-rail .nav-rail__item,
.nav-rail__login,
.nav-rail__footer-card,
.nav-rail__points {
  border-color: var(--ds-control-border) !important;
  background: var(--ds-control-bg) !important;
  color: var(--ds-control-text) !important;
  box-shadow: none !important;
}

.choice-pill:hover:not(:disabled),
.tab-pill:hover:not(:disabled),
.prompt-button:hover:not(:disabled),
.batch-button:hover:not(:disabled),
.template-favorite-button:hover:not(:disabled),
.generation-mode-menu button:hover:not(:disabled),
.generation-mode-menu--inline button:hover:not(:disabled),
.result-page-button:hover:not(:disabled),
.result-page-list button:hover:not(:disabled),
.upload-asset-actions button:hover:not(:disabled),
.result-card__actions button:hover:not(:disabled),
.result-card__preview-open:hover:not(:disabled),
.result-card__edit:hover:not(:disabled),
.result-card__download:hover:not(:disabled),
.preview-modal__actions button:hover:not(:disabled),
.prompt-modal__actions button:hover:not(:disabled),
.template-library-modal button:hover:not(:disabled),
.template-library-row button:hover:not(:disabled),
.footer-modal__close:hover:not(:disabled),
#editModalClose:hover:not(:disabled),
.nav-rail__section-toggle:hover,
.nav-rail .nav-rail__item:hover,
.nav-rail__login:hover,
.nav-rail__footer-card:hover,
.nav-rail__points:hover {
  border-color: var(--ds-control-border-strong) !important;
  background: var(--ds-control-hover) !important;
  color: var(--ds-text) !important;
  box-shadow: none !important;
}

.choice-pill:active:not(:disabled),
.tab-pill:active:not(:disabled),
.prompt-button:active:not(:disabled),
.batch-button:active:not(:disabled),
.template-favorite-button:active:not(:disabled),
.generation-mode-menu button:active:not(:disabled),
.generation-mode-menu--inline button:active:not(:disabled),
.result-page-button:active:not(:disabled),
.result-page-list button:active:not(:disabled),
.upload-asset-actions button:active:not(:disabled),
.result-card__actions button:active:not(:disabled),
.result-card__preview-open:active:not(:disabled),
.result-card__edit:active:not(:disabled),
.result-card__download:active:not(:disabled),
.preview-modal__actions button:active:not(:disabled),
.prompt-modal__actions button:active:not(:disabled),
.template-library-modal button:active:not(:disabled),
.template-library-row button:active:not(:disabled),
.footer-modal__close:active:not(:disabled),
#editModalClose:active:not(:disabled),
.nav-rail__section-toggle:active,
.nav-rail .nav-rail__item:active,
.nav-rail__login:active,
.nav-rail__footer-card:active {
  background: var(--ds-control-pressed) !important;
  box-shadow: none !important;
}

.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu button.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.template-library-modal__tabs button.is-active,
.nav-rail .nav-rail__item.is-active,
.template-favorite-button.is-favorite {
  border-color: var(--ds-control-border-strong) !important;
  background: var(--ds-control-selected) !important;
  color: var(--ds-text) !important;
  box-shadow: none !important;
}

.choice-pill.is-selected:hover,
.tab-pill.is-active:hover,
.generation-mode-menu button.is-active:hover,
.generation-mode-menu--inline button.is-active:hover,
.result-page-list button.is-active:hover,
.template-library-modal__tabs button.is-active:hover,
.nav-rail .nav-rail__item.is-active:hover,
.template-favorite-button.is-favorite:hover {
  background: var(--ds-control-selected-hover) !important;
}

.ui-press-ripple {
  background: rgba(100, 116, 139, 0.16) !important;
}

.primary-button .ui-press-ripple,
.batch-button--primary .ui-press-ripple,
.nav-rail__save .ui-press-ripple {
  background: rgba(255, 255, 255, 0.34) !important;
}

.primary-button,
.batch-button--primary,
.nav-rail__save {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 10px 22px var(--ds-accent-shadow) !important;
}

.primary-button:hover:not(:disabled),
.batch-button--primary:hover:not(:disabled),
.nav-rail__save:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(135deg, var(--ds-accent-lift), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28) !important;
}

.primary-button:active:not(:disabled),
.batch-button--primary:active:not(:disabled),
.nav-rail__save:active:not(:disabled),
.primary-button.is-pressing {
  background: var(--ds-accent-pressed) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.2) !important;
}

.primary-button:disabled,
.primary-button.is-disabled,
.batch-button--primary:disabled,
.nav-rail__save:disabled {
  border-color: var(--ds-disabled-line) !important;
  background: var(--ds-disabled) !important;
  color: var(--ds-text-subtle) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Redesigned bottom controls: one aligned, readable row under the image grid. */
.results-board .result-pagination {
  min-height: 34px !important;
  padding: 7px 18px 0 !important;
  border-top: 1px solid rgba(225, 229, 235, 0.68) !important;
}

.results-board .result-summary {
  min-height: 58px !important;
  border-top: 0 !important;
  background: transparent !important;
}

.results-board .summary-body {
  padding: 5px 18px 9px !important;
}

.results-board .slider-panel--split {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: center !important;
}

.results-board .slider-panel--split > .slider-box + .slider-box {
  border-left: 1px solid rgba(225, 229, 235, 0.64) !important;
  padding-left: 18px !important;
}

.results-board .slider-box {
  display: grid !important;
  grid-template-columns: 54px minmax(168px, 1fr) minmax(220px, 0.9fr) !important;
  gap: 10px !important;
  align-items: center !important;
  align-content: center !important;
}

.results-board .slider-control {
  display: contents !important;
}

.results-board .slider-value-wrap {
  width: 54px !important;
  height: 24px !important;
  min-height: 24px !important;
}

.results-board .slider-control input[type="range"] {
  width: 100% !important;
  margin: 0 !important;
  accent-color: #9aa3af !important;
}

.results-board .slider-copy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

.results-board .slider-copy strong {
  font-size: 11px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
}

.results-board .slider-copy span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--ds-control-muted) !important;
  font-size: 10px !important;
  line-height: 18px !important;
}

.results-board .result-page-total {
  align-self: center !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

/* ChatGPT-like flat controls: no boxed left menu, simple grey feedback everywhere else. */
:root {
  --ds-flat-hover: #ececec;
  --ds-flat-active: #e4e4e4;
  --ds-flat-selected: #e9e9e9;
  --ds-flat-border: #dedede;
  --ds-flat-border-strong: #cfcfcf;
  --ds-flat-text: #1f1f1f;
  --ds-flat-muted: #6f6f6f;
}

.nav-rail {
  background: #f7f7f7 !important;
}

.nav-rail__menus,
.nav-rail__items {
  gap: 2px !important;
}

.nav-rail__group {
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom-color: #e8e8e8 !important;
}

.nav-rail__section-toggle,
.nav-rail .nav-rail__item,
.nav-rail__login {
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ds-flat-text) !important;
  box-shadow: none !important;
  line-height: 32px !important;
}

.nav-rail__section-toggle:hover,
.nav-rail .nav-rail__item:hover,
.nav-rail__login:hover {
  border: 0 !important;
  background: var(--ds-flat-hover) !important;
  color: var(--ds-flat-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav-rail__section-toggle:active,
.nav-rail .nav-rail__item:active,
.nav-rail__login:active,
.nav-rail .nav-rail__item.is-pressing {
  background: var(--ds-flat-active) !important;
  transform: none !important;
}

.nav-rail .nav-rail__item.is-active,
.nav-rail .nav-rail__item.is-active:hover {
  border: 0 !important;
  background: var(--ds-flat-selected) !important;
  color: var(--ds-flat-text) !important;
  box-shadow: none !important;
}

.nav-rail .nav-rail__item.is-active::before,
.nav-rail__item.is-active::before {
  content: none !important;
  display: none !important;
}

.nav-rail__item-count {
  min-width: 16px !important;
  background: #dddddd !important;
  color: var(--ds-flat-muted) !important;
}

.nav-rail__footer {
  border-top-color: #e8e8e8 !important;
}

.nav-rail__points,
.nav-rail__footer-card {
  border: 1px solid #e6e6e6 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: none !important;
}

.choice-pill,
.tab-pill,
.prompt-button,
.batch-button,
.template-favorite-button,
.generation-mode-menu button,
.generation-mode-menu--inline button,
.result-page-button,
.result-page-list button,
.upload-asset-actions button,
.result-card__actions button,
.result-card__preview-open,
.result-card__edit,
.result-card__download,
.preview-modal__actions button,
.prompt-modal__actions button,
.template-library-modal button,
.template-library-row button,
.footer-modal__close,
#editModalClose {
  min-height: 30px !important;
  border: 1px solid var(--ds-flat-border) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--ds-flat-text) !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

.choice-pill:hover:not(:disabled),
.tab-pill:hover:not(:disabled),
.prompt-button:hover:not(:disabled),
.batch-button:hover:not(:disabled),
.template-favorite-button:hover:not(:disabled),
.generation-mode-menu button:hover:not(:disabled),
.generation-mode-menu--inline button:hover:not(:disabled),
.result-page-button:hover:not(:disabled),
.result-page-list button:hover:not(:disabled),
.upload-asset-actions button:hover:not(:disabled),
.result-card__actions button:hover:not(:disabled),
.result-card__preview-open:hover:not(:disabled),
.result-card__edit:hover:not(:disabled),
.result-card__download:hover:not(:disabled),
.preview-modal__actions button:hover:not(:disabled),
.prompt-modal__actions button:hover:not(:disabled),
.template-library-modal button:hover:not(:disabled),
.template-library-row button:hover:not(:disabled),
.footer-modal__close:hover:not(:disabled),
#editModalClose:hover:not(:disabled) {
  border-color: var(--ds-flat-border-strong) !important;
  background: var(--ds-flat-hover) !important;
  color: var(--ds-flat-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.choice-pill:active:not(:disabled),
.tab-pill:active:not(:disabled),
.prompt-button:active:not(:disabled),
.batch-button:active:not(:disabled),
.template-favorite-button:active:not(:disabled),
.generation-mode-menu button:active:not(:disabled),
.generation-mode-menu--inline button:active:not(:disabled),
.result-page-button:active:not(:disabled),
.result-page-list button:active:not(:disabled),
.upload-asset-actions button:active:not(:disabled),
.result-card__actions button:active:not(:disabled),
.result-card__preview-open:active:not(:disabled),
.result-card__edit:active:not(:disabled),
.result-card__download:active:not(:disabled),
.preview-modal__actions button:active:not(:disabled),
.prompt-modal__actions button:active:not(:disabled),
.template-library-modal button:active:not(:disabled),
.template-library-row button:active:not(:disabled),
.footer-modal__close:active:not(:disabled),
#editModalClose:active:not(:disabled) {
  background: var(--ds-flat-active) !important;
  transform: none !important;
}

.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu button.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.template-library-modal__tabs button.is-active,
.template-favorite-button.is-favorite {
  border-color: var(--ds-flat-border-strong) !important;
  background: var(--ds-flat-selected) !important;
  color: var(--ds-flat-text) !important;
  box-shadow: none !important;
}

.upload-dropzone,
.upload-dropzone.has-image {
  border-color: #d8d8d8 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.upload-dropzone:hover,
.upload-dropzone:focus-within {
  border-color: #cfcfcf !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.result-card.is-selected,
.result-card.is-batch-selected {
  border-color: #cfcfcf !important;
  box-shadow: inset 0 0 0 1px rgba(120, 120, 120, 0.26) !important;
}

.ui-press-ripple {
  background: rgba(80, 80, 80, 0.12) !important;
}

.primary-button,
.batch-button--primary,
.nav-rail__save {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 10px 22px var(--ds-accent-shadow) !important;
}

/* Final color authority: preserve this app's own background palette. */
:root {
  --ds-bg: #f5f6f8;
  --ds-shell: #f5f6f8;
  --ds-sidebar: #f5f6f8;
  --ds-panel: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f8f9fb;
  --ui-bg: var(--ds-bg);
  --ui-sidebar: var(--ds-sidebar);
  --ui-panel: var(--ds-panel);
  --ui-surface: var(--ds-surface);
  --ui-surface-soft: var(--ds-surface-soft);
  --ui-surface-muted: var(--ds-surface-soft);
}

html,
body,
.studio-layout,
.app-shell,
.workspace {
  background: var(--ds-shell) !important;
}

.nav-rail {
  background: var(--ds-sidebar) !important;
}

.topbar,
.control-panel,
.results-board,
.control-panel > .upload-card,
.control-panel > .control-card,
.results-head,
.result-canvas,
.results-pane,
.result-grid,
.result-pagination,
.result-summary,
.generation-options,
.option-row,
.stat-card,
.nav-rail__points,
.nav-rail__footer-card {
  background: var(--ds-panel) !important;
}

/* Final result header layout authority: batch buttons must never overlap tabs. */
.results-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.results-head > div:first-child {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.results-mode-switch {
  position: static !important;
  grid-column: 2 !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  justify-self: end !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
}

.results-controls {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.batch-download-controls {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.results-controls .batch-button,
.results-controls .prompt-button,
.results-controls .save-template-button {
  min-width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

.results-mode-switch .tab-pill {
  min-width: 72px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

.results-controls .template-favorite-button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
}

/* Absolute final header behavior: Main/SKU stays centered; batch actions stay right. */
.results-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.results-head > div:first-child {
  grid-column: 1 !important;
  min-width: 0 !important;
  padding-right: 180px !important;
}

.results-mode-switch {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  transform: translate(-50%, -50%) !important;
  grid-column: auto !important;
  justify-self: auto !important;
  flex: 0 0 auto !important;
}

.results-controls {
  grid-column: 2 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: calc(50vw - 130px) !important;
  overflow: hidden !important;
}

.batch-download-controls {
  display: flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.results-controls .batch-button,
.results-controls .prompt-button,
.results-controls .save-template-button {
  flex: 0 0 auto !important;
  min-width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

/* Blue text tier: important text only; surfaces keep the neutral spec. */
:root {
  --ds-tier-blue-text: #1d4ed8;
  --ds-tier-blue-strong: #1e40af;
}

.nav-rail__points span,
.nav-rail__points small {
  color: var(--ds-tier-blue-text) !important;
}

.nav-rail__points strong {
  color: var(--ds-tier-blue-strong) !important;
}

.nav-rail .nav-rail__item.is-active,
.results-mode-switch .tab-pill.is-active,
.generation-mode-menu--inline button.is-active {
  color: var(--ds-tier-blue-text) !important;
}

.nav-rail .nav-rail__item.is-active:hover,
.results-mode-switch .tab-pill.is-active:hover,
.generation-mode-menu--inline button.is-active:hover {
  color: var(--ds-tier-blue-strong) !important;
}

/* Final feedback mapping: all rounded controls use the design-system tokens above. */
.nav-rail__section-toggle:hover,
.nav-rail .nav-rail__item:hover,
.nav-rail__login:hover,
.choice-pill:hover:not(:disabled),
.tab-pill:hover:not(:disabled),
.prompt-button:hover:not(:disabled),
.batch-button:hover:not(:disabled),
.template-favorite-button:hover:not(:disabled),
.generation-mode-menu button:hover:not(:disabled),
.generation-mode-menu--inline button:hover:not(:disabled),
.result-page-button:hover:not(:disabled),
.result-page-list button:hover:not(:disabled),
.upload-asset-actions button:hover:not(:disabled),
.result-card__actions button:hover:not(:disabled),
.result-card__preview-open:hover:not(:disabled),
.result-card__edit:hover:not(:disabled),
.result-card__download:hover:not(:disabled) {
  border-color: var(--ds-feedback-line-hover) !important;
  background: var(--ds-feedback-hover) !important;
}

.nav-rail__section-toggle:active,
.nav-rail .nav-rail__item:active,
.nav-rail__login:active,
.choice-pill:active:not(:disabled),
.tab-pill:active:not(:disabled),
.prompt-button:active:not(:disabled),
.batch-button:active:not(:disabled),
.template-favorite-button:active:not(:disabled),
.generation-mode-menu button:active:not(:disabled),
.generation-mode-menu--inline button:active:not(:disabled),
.result-page-button:active:not(:disabled),
.result-page-list button:active:not(:disabled),
.upload-asset-actions button:active:not(:disabled),
.result-card__actions button:active:not(:disabled),
.result-card__preview-open:active:not(:disabled),
.result-card__edit:active:not(:disabled),
.result-card__download:active:not(:disabled) {
  border-color: var(--ds-feedback-line-pressed) !important;
  background: var(--ds-feedback-pressed) !important;
}

.nav-rail .nav-rail__item.is-active,
.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu button.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.template-library-modal__tabs button.is-active {
  background: var(--ds-feedback-selected) !important;
}

.nav-rail .nav-rail__item.is-active:hover,
.choice-pill.is-selected:hover,
.tab-pill.is-active:hover,
.generation-mode-menu button.is-active:hover,
.generation-mode-menu--inline button.is-active:hover,
.result-page-list button.is-active:hover,
.template-library-modal__tabs button.is-active:hover {
  background: var(--ds-feedback-selected-hover) !important;
}

/* Left rail follows the neutral selection spec; blue is reserved for primary actions. */
.nav-rail .nav-rail__item,
.nav-rail .nav-rail__item:hover,
.nav-rail .nav-rail__item.is-active,
.nav-rail .nav-rail__item.is-active:hover,
.nav-rail .nav-rail__item.is-pressing {
  color: var(--ds-flat-text) !important;
}

.nav-rail__section-toggle .nav-rail__chevron::before,
.nav-rail__section-toggle:hover .nav-rail__chevron::before {
  border-right-color: var(--ds-text-subtle) !important;
  border-bottom-color: var(--ds-text-subtle) !important;
}

.nav-rail__group--rich {
  gap: 4px !important;
}

.nav-rail__submenu--static {
  gap: 2px !important;
  margin: -1px 0 6px 6px !important;
  padding: 2px 0 2px 8px !important;
}

.nav-rail__submenu--static .nav-rail__submenu-item {
  min-height: 34px !important;
  padding: 5px 7px !important;
}

.nav-rail__submenu--static .nav-rail__submenu-title {
  font-size: 12px !important;
  line-height: 15px !important;
}

.nav-rail__submenu--static .nav-rail__submenu-meta {
  font-size: 10.5px !important;
  line-height: 13px !important;
}

.nav-rail__item-count {
  background: var(--ds-feedback-badge) !important;
}

.upload-dropzone:hover,
.upload-dropzone:focus-within {
  border-color: var(--ds-feedback-line-hover) !important;
  background: #f8f9fb !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78) !important;
}

.upload-dropzone:active,
.upload-dropzone.is-pressing {
  border-color: var(--ds-feedback-line-pressed) !important;
  background: var(--ds-feedback-pressed) !important;
  transform: translateY(1px) scale(0.998) !important;
}

.result-card:hover {
  border-color: var(--ds-feedback-line-hover) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(16, 24, 40, 0.08) !important;
  transform: translateY(-1px) !important;
}

.result-card:active,
.result-card.is-pressing {
  border-color: var(--ds-feedback-line-pressed) !important;
  box-shadow:
    inset 0 0 0 1px rgba(99, 108, 122, 0.2),
    0 3px 8px rgba(16, 24, 40, 0.05) !important;
  transform: translateY(1px) scale(0.997) !important;
}

.result-card.is-selected,
.result-card.is-batch-selected {
  border-color: var(--ds-feedback-line-pressed) !important;
  box-shadow:
    inset 0 0 0 1px rgba(99, 108, 122, 0.22),
    0 8px 18px rgba(16, 24, 40, 0.06) !important;
}

.ui-press-ripple {
  background: var(--ds-feedback-ripple) !important;
}

/* Compact pill proportions: tighter circles with text that visually fills the control. */
.control-panel .choice-pill,
.control-panel .generation-mode-menu--inline button {
  min-width: var(--ds-compact-pill-min-w) !important;
  height: var(--ds-compact-pill-h) !important;
  min-height: var(--ds-compact-pill-h) !important;
  padding: 0 11px !important;
  font-size: var(--ds-compact-pill-font-size) !important;
  font-weight: var(--ds-compact-pill-font-weight) !important;
  line-height: 1 !important;
}

#mainCountGroup .choice-pill {
  width: var(--ds-compact-pill-count-size) !important;
  min-width: var(--ds-compact-pill-count-size) !important;
  height: var(--ds-compact-pill-count-size) !important;
  min-height: var(--ds-compact-pill-count-size) !important;
  padding: 0 !important;
  font-size: var(--ds-compact-pill-font-size) !important;
  font-weight: var(--ds-compact-pill-font-weight) !important;
}

#aspectRatioGroup .choice-pill,
#resolutionChoiceGroup .choice-pill {
  min-width: 46px !important;
}

.upload-asset-actions button,
.result-card__actions button,
.result-card__preview-open,
.result-card__edit,
.result-card__download {
  height: var(--ds-action-pill-h) !important;
  min-height: var(--ds-action-pill-h) !important;
  padding: 0 12px !important;
  font-size: var(--ds-action-pill-font-size) !important;
  font-weight: var(--ds-compact-pill-font-weight) !important;
  line-height: 1 !important;
}

.primary-button__count {
  min-height: 22px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 22px !important;
}

/* Upload image actions stay quiet until the image tile is hovered or keyboard-focused. */
.upload-dropzone .upload-asset-actions:not([hidden]) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-2px) !important;
  transition:
    opacity var(--ds-duration) var(--ds-ease-standard),
    visibility var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration) var(--ds-ease-standard) !important;
}

.upload-dropzone:hover .upload-asset-actions:not([hidden]),
.upload-dropzone:focus-within .upload-asset-actions:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Image tiles share one hover motion across uploads and result previews. */
.upload-dropzone.has-image img,
.upload-dropzone img.is-visible,
.result-card img {
  transition:
    transform var(--ds-duration) var(--ds-ease-standard),
    filter var(--ds-duration) var(--ds-ease-standard) !important;
  will-change: transform !important;
}

.upload-dropzone:hover img.is-visible,
.upload-dropzone:focus-within img.is-visible,
.upload-dropzone.has-image:hover img,
.upload-dropzone.has-image:focus-within img,
.result-card:hover img,
.result-card:focus-within img {
  transform: var(--ds-media-hover-transform) !important;
}

.upload-dropzone:active img.is-visible,
.upload-dropzone.has-image:active img,
.result-card:active img,
.result-card.is-pressing img {
  transform: var(--ds-media-press-transform) !important;
}

.upload-dropzone.has-flipbook {
  perspective: 880px !important;
}

.upload-dropzone.has-flipbook > img {
  display: none !important;
}

.upload-flipbook {
  position: absolute !important;
  inset: 12px !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
}

.upload-dropzone--compact .upload-flipbook {
  inset: 10px !important;
}

.upload-flipbook__stage {
  position: relative !important;
  width: min(82%, 220px) !important;
  aspect-ratio: 1 / 1 !important;
  border: 0 !important;
  border-radius: var(--ds-radius-md) !important;
  background: transparent !important;
  cursor: pointer !important;
  outline: none !important;
  transform-style: preserve-3d !important;
  transition: transform var(--ds-duration) var(--ds-ease-standard) !important;
}

.upload-dropzone--compact .upload-flipbook__stage {
  width: min(80%, 206px) !important;
}

.upload-flipbook__stage:hover {
  transform: translateY(-1px) !important;
}

.upload-flipbook__stage:active {
  transform: translateY(1px) scale(0.996) !important;
}

.upload-flipbook__stage:focus-visible {
  box-shadow: var(--ds-shadow-focus) !important;
}

.upload-flipbook__page {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-panel) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  user-select: none !important;
  transition:
    transform var(--ds-duration-slow) var(--ds-ease-out),
    opacity var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard) !important;
}

.upload-dropzone.has-flipbook .upload-flipbook__page--active {
  z-index: 3 !important;
  transform: translateZ(34px) rotateY(-5deg) !important;
}

.upload-dropzone.has-flipbook .upload-flipbook__page--next {
  z-index: 2 !important;
  opacity: 0.78 !important;
  transform: translate3d(18px, 9px, 10px) rotateY(-16deg) !important;
}

.upload-dropzone.has-flipbook .upload-flipbook__page--back {
  z-index: 1 !important;
  opacity: 0.5 !important;
  transform: translate3d(34px, 18px, -12px) rotateY(-26deg) !important;
}

.upload-flipbook__stage:active .upload-flipbook__page--active {
  transform: translateZ(28px) rotateY(-12deg) !important;
}

.upload-flipbook__nav {
  position: absolute !important;
  top: 50% !important;
  z-index: 7 !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--ds-text-soft) !important;
  font-size: 20px !important;
  font-weight: var(--ds-font-weight-strong) !important;
  line-height: 1 !important;
  box-shadow: var(--ds-shadow-xs) !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
  transition:
    background-color var(--ds-duration) var(--ds-ease-standard),
    border-color var(--ds-duration) var(--ds-ease-standard),
    color var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.upload-flipbook__nav--prev {
  left: 4px !important;
}

.upload-flipbook__nav--next {
  right: 4px !important;
}

.upload-flipbook__nav:hover {
  border-color: var(--ds-feedback-line-hover) !important;
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.upload-flipbook__nav:active {
  background: var(--ds-pressed) !important;
  transform: translateY(calc(-50% + 1px)) scale(0.98) !important;
}

.upload-flipbook__nav:focus-visible {
  outline: none !important;
  border-color: var(--ds-line-accent) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.upload-flipbook__count {
  position: absolute !important;
  right: 10px !important;
  bottom: 8px !important;
  z-index: 8 !important;
  min-width: 38px !important;
  height: 24px !important;
  padding: 0 9px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  font-weight: var(--ds-font-weight-strong) !important;
  line-height: 22px !important;
  text-align: center !important;
  box-shadow: var(--ds-shadow-xs) !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .upload-flipbook__stage,
  .upload-flipbook__page,
  .upload-flipbook__nav {
    transition: none !important;
  }
}

.results-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.results-title-row h2 {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.results-template-name,
.results-template-name-input {
  flex: 0 1 auto !important;
  max-width: min(260px, 36vw) !important;
  height: 24px !important;
  min-height: 24px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 24px !important;
}

.results-template-name {
  padding: 0 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: default !important;
}

.results-template-name.is-editable {
  cursor: text !important;
}

.results-template-name.is-editable:hover,
.results-template-name.is-editable:focus-visible {
  background: var(--ds-feedback-hover) !important;
  color: var(--ds-text) !important;
}

.results-template-name-input {
  width: 180px !important;
  padding: 0 7px !important;
  outline: 0 !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text) !important;
  box-shadow: inset 0 0 0 1px var(--ds-line-strong) !important;
}

.results-head.is-tasking > div:first-child.has-generation-task-queue {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.results-head.is-tasking .results-title-row {
  flex: 0 0 auto !important;
}

.results-head.is-tasking .generation-task-queue {
  flex: 1 1 auto !important;
  min-width: 180px !important;
  max-width: min(520px, 100%) !important;
}

.results-head > div:first-child > p {
  display: none !important;
}

.results-controls .batch-button--primary,
.results-controls .batch-button--primary:hover:not(:disabled),
.results-controls .batch-button--primary:focus-visible,
.results-controls .batch-button--primary:active:not(:disabled),
.batch-download-controls .batch-button--primary,
.batch-download-controls .batch-button--primary:hover:not(:disabled),
.batch-download-controls .batch-button--primary:focus-visible,
.batch-download-controls .batch-button--primary:active:not(:disabled) {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(135deg, var(--ds-accent-lift), var(--ds-accent)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
}

.results-controls .batch-button--primary:active:not(:disabled),
.batch-download-controls .batch-button--primary:active:not(:disabled) {
  background: var(--ds-accent-pressed) !important;
  transform: translateY(1px) scale(0.985) !important;
}

.result-card__batch-select {
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: transparent !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.result-card__batch-select[aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.34) !important;
  background: rgba(239, 246, 255, 0.96) !important;
  color: var(--ds-accent) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 0 0 1px rgba(37, 99, 235, 0.12),
    0 6px 14px rgba(37, 99, 235, 0.14) !important;
}

.result-card.is-batch-selected::after {
  border-color: rgba(37, 99, 235, 0.42) !important;
  pointer-events: none !important;
}

/* Failed generation records stay visible in the preview instead of disappearing silently. */
.result-card--failed {
  border-color: var(--ds-danger) !important;
  background: var(--ds-danger-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ds-danger-soft) !important;
}

.result-card--failed .skeleton-block {
  background: var(--ds-danger-soft) !important;
  animation: none !important;
}

.result-card--failed .skeleton-block::before,
.result-card--failed .skeleton-block::after {
  display: none !important;
}

.result-card--failed .result-card__loading-meta {
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(217, 45, 32, 0.2) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--ds-text-soft) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

.result-card--failed .result-card__loading-meta strong,
.result-card--failed .result-card__loading-meta em {
  color: var(--ds-danger) !important;
}

.result-card--failed .result-card__loading-meta strong::before {
  background: var(--ds-danger) !important;
  animation: none !important;
  box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.1) !important;
}

.result-card--failed .result-card__loading-meta span {
  grid-column: 1 / -1 !important;
  display: block !important;
  max-height: 48px !important;
  overflow: hidden !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 16px !important;
  text-overflow: ellipsis !important;
}

body.is-data-diagnostic-open {
  overflow: hidden !important;
}

.preview-modal {
  padding: clamp(8px, 1.6vw, 18px) !important;
}

.preview-modal__panel {
  width: fit-content !important;
  min-width: min(360px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  max-height: calc(100svh - 16px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, auto) !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: var(--ds-radius-lg) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.preview-modal__head {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 / -1 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 2px 8px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  background: transparent !important;
}

.preview-modal__head > div:first-child {
  min-width: 0 !important;
}

.preview-modal__head strong {
  display: block !important;
  max-width: 52vw !important;
  overflow: hidden !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 19px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.preview-modal__head span {
  display: block !important;
  max-width: 52vw !important;
  overflow: hidden !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 17px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.preview-modal__actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}

.preview-modal__image-wrap {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: fit-content !important;
  height: fit-content !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100svh - 104px) !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  border-radius: var(--ds-radius-md) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-modal__image-wrap img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100svh - 104px) !important;
  object-fit: contain !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .preview-modal__panel {
    width: fit-content !important;
    min-width: min(320px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    height: auto !important;
    max-height: calc(100svh - 18px) !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  .preview-modal__head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .preview-modal__head strong,
  .preview-modal__head span {
    max-width: calc(100vw - 48px) !important;
  }

  .preview-modal__actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .preview-modal__image-wrap,
  .preview-modal__image-wrap img {
    max-width: calc(100vw - 38px) !important;
    max-height: calc(100svh - 150px) !important;
  }
}

.preview-modal {
  padding: 0 !important;
  overflow: hidden !important;
}

.preview-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: blur(10px) saturate(0.92) !important;
}

.preview-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  width: 100vw !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-modal__head {
  position: absolute !important;
  top: 14px !important;
  left: auto !important;
  right: 14px !important;
  z-index: 3 !important;
  min-height: 0 !important;
  width: auto !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

.preview-modal__head > div:first-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.preview-modal__head strong {
  max-width: 100% !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

.preview-modal__head span {
  max-width: 100% !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.preview-modal__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  width: max-content !important;
  min-height: 42px !important;
  padding: 4px !important;
  border: 1px solid rgba(226, 232, 240, 0.68) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: blur(16px) saturate(0.94) !important;
  pointer-events: auto !important;
}

.preview-modal__actions button {
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  backdrop-filter: none !important;
}

.preview-modal__actions button:hover:not(:disabled),
.preview-modal__actions button:focus-visible {
  border-color: transparent !important;
  background: rgba(241, 245, 249, 0.9) !important;
}

.preview-modal__actions button:disabled {
  cursor: not-allowed !important;
  opacity: 0.42 !important;
}

.preview-modal__zoom-button:disabled {
  visibility: hidden !important;
}

.preview-modal__zoom-button,
.preview-modal__zoom-reset {
  font-variant-numeric: tabular-nums !important;
}

.preview-modal__zoom-button {
  width: 34px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.preview-modal__zoom-reset {
  width: 58px !important;
  min-width: 58px !important;
  padding: 0 9px !important;
  background: rgba(241, 245, 249, 0.88) !important;
}

#previewModalEdit {
  max-width: 86px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.preview-modal__image-wrap {
  grid-column: 1 / -1 !important;
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: zoom-in !important;
  touch-action: none !important;
}

.preview-modal__image-wrap.is-zoomed {
  cursor: grab !important;
}

.preview-modal__image-wrap.is-dragging {
  cursor: grabbing !important;
}

.preview-modal__image-wrap img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100svh - 28px) !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translate3d(var(--preview-pan-x, 0px), var(--preview-pan-y, 0px), 0) scale(var(--preview-zoom, 1)) !important;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
  transition: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  will-change: transform !important;
}

.preview-modal__image-wrap.is-dragging img {
  transition: none !important;
}

@media (max-width: 720px) {
  .preview-modal__head {
    top: 10px !important;
    left: auto !important;
    right: 10px !important;
    width: auto !important;
  }

  .preview-modal__head > div:first-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
  }

  .preview-modal__actions {
    flex-wrap: wrap !important;
    max-width: calc(100vw - 20px) !important;
    justify-content: flex-end !important;
  }

  .preview-modal__actions button {
    min-height: 34px !important;
    padding: 0 11px !important;
  }

  .preview-modal__zoom-button {
    width: 36px !important;
    padding: 0 !important;
  }

  .preview-modal__image-wrap {
    padding: 10px !important;
  }

  .preview-modal__image-wrap img {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100svh - 20px) !important;
  }
}

.footer-modal__diagnostic-button {
  min-height: var(--ds-btn-h-md) !important;
  padding: 0 14px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-soft) !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  cursor: pointer !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease !important;
}

.footer-modal__diagnostic-button:hover:not(:disabled),
.footer-modal__diagnostic-button:focus-visible {
  border-color: var(--ds-feedback-line-hover) !important;
  background: var(--ds-feedback-hover) !important;
  color: var(--ds-text) !important;
  outline: none !important;
}

.footer-modal__diagnostic-button:active:not(:disabled),
.footer-modal__diagnostic-button.is-pressing {
  transform: translateY(1px) !important;
  background: var(--ds-feedback-pressed) !important;
}

.footer-modal__diagnostic-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.56 !important;
}

.footer-modal__action-row {
  grid-template-columns: auto auto minmax(0, 1fr) !important;
}

.data-diagnostic-modal[hidden] {
  display: none !important;
}

.data-diagnostic-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1004 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 2.5vw, 30px) !important;
}

.data-diagnostic-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(37, 39, 43, 0.22) !important;
  backdrop-filter: blur(4px) saturate(0.92) !important;
  cursor: pointer !important;
}

.data-diagnostic-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  width: min(780px, calc(100vw - 32px)) !important;
  max-height: min(82svh, 720px) !important;
  padding: 18px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-lg) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.data-diagnostic-modal__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.data-diagnostic-modal__head strong {
  display: block !important;
  color: var(--ds-text) !important;
  font-size: 15px !important;
  font-weight: 740 !important;
  line-height: 20px !important;
}

.data-diagnostic-modal__head span,
.data-diagnostic-modal__status,
.data-diagnostic-empty span {
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  line-height: 18px !important;
}

.data-diagnostic-modal__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.data-diagnostic-modal button {
  min-height: var(--ds-btn-h-sm) !important;
  padding: 0 13px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease !important;
}

.data-diagnostic-modal button:hover:not(:disabled),
.data-diagnostic-modal button:focus-visible {
  border-color: var(--ds-feedback-line-hover) !important;
  background: var(--ds-feedback-hover) !important;
  color: var(--ds-text) !important;
  outline: none !important;
}

.data-diagnostic-modal button:active:not(:disabled) {
  transform: translateY(1px) !important;
  background: var(--ds-feedback-pressed) !important;
}

.data-diagnostic-modal button:disabled {
  cursor: not-allowed !important;
  opacity: 0.54 !important;
}

.data-diagnostic-modal__body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: auto !important;
}

.data-diagnostic-section,
.data-diagnostic-empty {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 13px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface) !important;
}

.data-diagnostic-empty {
  grid-column: 1 / -1 !important;
  min-height: 132px !important;
  place-content: center !important;
  text-align: center !important;
}

.data-diagnostic-section > strong,
.data-diagnostic-empty strong {
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 740 !important;
  line-height: 18px !important;
}

.data-diagnostic-section dl {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}

.data-diagnostic-section dl > div {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 24px !important;
}

.data-diagnostic-section dt,
.data-diagnostic-section dd {
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.data-diagnostic-section dt {
  color: var(--ds-text-muted) !important;
  font-weight: 640 !important;
}

.data-diagnostic-section dd {
  color: var(--ds-text-soft) !important;
  font-weight: 680 !important;
}

.data-diagnostic-modal__status {
  margin: 0 !important;
  padding-top: 2px !important;
}

@media (max-width: 760px) {
  .footer-modal__action-row,
  .data-diagnostic-modal__body,
  .data-diagnostic-section dl > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .data-diagnostic-modal__head {
    display: grid !important;
  }

  .data-diagnostic-modal__actions {
    justify-content: flex-start !important;
  }
}

/* Account login modal: centered child surface without changing the workbench layout. */
body.is-account-modal-open {
  overflow: hidden !important;
}

.account-modal[hidden] {
  display: none !important;
}

.account-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1010 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 3vw, 32px) !important;
}

.account-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.26) !important;
  backdrop-filter: blur(9px) saturate(0.94) !important;
  cursor: pointer !important;
}

.account-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 14px !important;
  width: min(408px, calc(100vw - 32px)) !important;
  max-height: min(86svh, 680px) !important;
  overflow: auto !important;
  padding: 20px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-xl) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--ds-shadow-md) !important;
  animation: accountModalIn var(--ds-duration-slow) var(--ds-ease-out) both !important;
}

.account-modal__head,
.account-modal__profile-main,
.account-modal__actions,
.account-modal__options {
  display: flex !important;
  align-items: center !important;
}

.account-modal__head {
  justify-content: space-between !important;
  gap: 14px !important;
}

.account-modal__head strong,
.account-modal__profile-main strong,
.account-modal__profile-grid strong {
  display: block !important;
  color: var(--ds-text) !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
}

.account-modal__head strong {
  font-size: 16px !important;
  line-height: 22px !important;
}

.account-modal__head span,
.account-modal__profile-main span,
.account-modal__profile-grid span,
.account-modal__remember,
.account-modal__status {
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  line-height: 18px !important;
}

.account-modal__close,
.account-modal__tabs button,
.account-modal__method button,
.account-modal__actions button,
.account-modal__text-button {
  min-height: var(--ds-btn-h-sm) !important;
  padding: 0 13px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition:
    background-color var(--ds-duration) var(--ds-ease-standard),
    border-color var(--ds-duration) var(--ds-ease-standard),
    color var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.account-modal__close {
  min-height: 30px !important;
  padding: 0 11px !important;
  border-color: var(--ds-line) !important;
  background: var(--ds-surface) !important;
}

.account-modal__close:hover:not(:disabled),
.account-modal__tabs button:hover:not(:disabled),
.account-modal__method button:hover:not(:disabled),
.account-modal__actions button:hover:not(:disabled),
.account-modal__text-button:hover:not(:disabled) {
  border-color: var(--ds-feedback-line-hover) !important;
  background: var(--ds-feedback-hover) !important;
  color: var(--ds-text) !important;
}

.account-modal__close:active:not(:disabled),
.account-modal__tabs button:active:not(:disabled),
.account-modal__method button:active:not(:disabled),
.account-modal__actions button:active:not(:disabled),
.account-modal__text-button:active:not(:disabled) {
  border-color: var(--ds-feedback-line-pressed) !important;
  background: var(--ds-feedback-pressed) !important;
  transform: translateY(1px) scale(0.985) !important;
}

.account-modal__close:focus-visible,
.account-modal__tabs button:focus-visible,
.account-modal__method button:focus-visible,
.account-modal__actions button:focus-visible,
.account-modal__text-button:focus-visible,
.account-field input:focus-visible,
.account-modal__remember input:focus-visible {
  outline: none !important;
  border-color: var(--ds-line-accent) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.account-modal__auth,
.account-modal__form,
.account-modal__profile {
  display: grid !important;
  gap: 13px !important;
}

.account-modal__tabs,
.account-modal__method {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.account-modal__tabs button.is-active,
.account-modal__method button.is-active {
  border-color: var(--ds-feedback-line-pressed) !important;
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text) !important;
  font-weight: 760 !important;
}

.account-field {
  display: grid !important;
  gap: 6px !important;
}

.account-field[hidden],
.account-modal__profile[hidden],
.account-modal__auth[hidden],
.account-modal__text-button[hidden],
.account-modal__status[hidden] {
  display: none !important;
}

.account-field span {
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 18px !important;
}

.account-field input {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  outline: none !important;
  transition:
    border-color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    background-color var(--ds-duration) var(--ds-ease-standard) !important;
}

.account-field input:hover {
  border-color: var(--ds-line-strong) !important;
}

.account-field input::placeholder {
  color: var(--ds-text-subtle) !important;
}

.account-modal__options {
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 24px !important;
}

.account-modal__remember {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
}

.account-modal__remember input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  accent-color: var(--ds-text-soft) !important;
}

.account-modal__text-button {
  min-height: 28px !important;
  padding: 0 4px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.account-modal__switch {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  padding-top: 2px !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  line-height: 18px !important;
}

.account-modal__switch .account-modal__text-button {
  min-height: 24px !important;
  padding: 0 2px !important;
  color: var(--ds-text-soft) !important;
  font-weight: 740 !important;
}

.account-modal__status {
  min-height: 20px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface-soft) !important;
}

.account-modal__status[data-tone="success"] {
  border-color: rgba(15, 143, 110, 0.22) !important;
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
}

.account-modal__status[data-tone="warning"] {
  border-color: rgba(183, 121, 31, 0.24) !important;
  background: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
}

.account-modal__status[data-tone="danger"] {
  border-color: rgba(217, 45, 32, 0.2) !important;
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

.account-modal__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: var(--ds-btn-h-lg) !important;
  border-radius: var(--ds-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

.account-modal__submit:disabled {
  cursor: progress !important;
  opacity: 0.78 !important;
}

.account-modal__profile-main {
  gap: 12px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface-soft) !important;
}

.account-modal__avatar {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  place-items: center !important;
  border: 1px solid var(--ds-line-strong) !important;
  border-radius: 50% !important;
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text) !important;
  font-size: 16px !important;
  font-weight: 780 !important;
}

.account-modal__profile-main > div {
  min-width: 0 !important;
}

.account-modal__profile-main strong,
.account-modal__profile-main span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.account-modal__profile-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.account-modal__profile-grid > div {
  display: grid !important;
  gap: 4px !important;
  padding: 11px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface) !important;
}

.account-modal__profile-grid strong {
  font-size: 16px !important;
  line-height: 22px !important;
}

.account-modal__actions {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.nav-rail__login.is-signed-in {
  font-weight: 760 !important;
}

.nav-rail__login span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@keyframes accountModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-modal__panel {
    animation: none !important;
  }
}

@media (max-width: 520px) {
  .account-modal__panel {
    width: calc(100vw - 24px) !important;
    padding: 16px !important;
  }

  .account-modal__head,
  .account-modal__options {
    align-items: stretch !important;
  }

  .account-modal__profile-grid,
  .account-modal__tabs,
  .account-modal__method {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.detail-page-pane {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.detail-page-workbench {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  gap: 14px !important;
}

.detail-page-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.detail-page-toolbar__title {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.detail-page-toolbar__title strong {
  color: var(--ui-text) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.detail-page-toolbar__title span,
.detail-page-status {
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.detail-page-toolbar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

#detailGenerateBtn.batch-button--primary,
#detailGenerateBtn.batch-button--primary:hover:not(:disabled),
#detailGenerateBtn.batch-button--primary:focus-visible {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
}

#detailGenerateBtn.batch-button--primary:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 48%),
    linear-gradient(135deg, var(--ds-accent-lift), var(--ds-accent-hover)) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28) !important;
}

#detailGenerateBtn.batch-button--primary:active:not(:disabled),
#detailGenerateBtn.batch-button--primary.is-pressing {
  border-color: transparent !important;
  background: var(--ds-accent-pressed) !important;
  color: var(--ds-text-inverse) !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.2) !important;
  transform: translateY(1px) scale(0.985) !important;
}

#detailGenerateBtn.batch-button--primary:disabled {
  border-color: var(--ds-disabled-line) !important;
  background: var(--ds-disabled) !important;
  color: var(--ds-text-subtle) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.detail-page-body {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr) !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.detail-asset-panel,
.detail-preview-panel {
  min-width: 0 !important;
  min-height: 0 !important;
}

.detail-asset-panel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.detail-asset-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-content: start !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 6px !important;
  padding-bottom: 16px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.7) transparent !important;
}

.detail-asset-grid::-webkit-scrollbar {
  width: 8px !important;
}

.detail-asset-grid::-webkit-scrollbar-track {
  background: transparent !important;
}

.detail-asset-grid::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-color: rgba(148, 163, 184, 0.62) !important;
  background-clip: padding-box !important;
}

.detail-asset-grid::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.72) !important;
}

.detail-asset-filter {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 10px !important;
  padding: 4px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.detail-page-toolbar .detail-asset-filter {
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.detail-page-toolbar .detail-asset-filter::-webkit-scrollbar {
  display: none !important;
}

.detail-page-toolbar .detail-asset-filter__button {
  flex: 0 0 auto !important;
  height: 26px !important;
  padding: 0 9px !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
}

.detail-asset-pagination {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 6px 0 0 !important;
  border-top: 1px solid rgba(225, 229, 235, 0.72) !important;
}

.detail-asset-pagination[hidden] {
  display: none !important;
}

.detail-asset-pagination__total {
  flex: 0 0 auto !important;
  min-width: 42px !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 24px !important;
  text-align: right !important;
}

.detail-asset-pagination__pages {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.detail-asset-pagination button,
.detail-asset-pagination__gap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ds-control-border) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-control-bg) !important;
  color: var(--ds-control-text) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
}

.detail-asset-pagination__gap {
  min-width: 18px !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--ds-text-muted) !important;
}

.detail-asset-pagination button {
  cursor: pointer !important;
}

.detail-asset-pagination button:hover:not(:disabled) {
  border-color: var(--ds-control-border-strong) !important;
  background: var(--ds-control-hover) !important;
  color: var(--ds-text) !important;
}

.detail-asset-pagination button:active:not(:disabled) {
  background: var(--ds-control-pressed) !important;
  transform: translateY(1px) !important;
}

.detail-asset-pagination button.is-active {
  border-color: var(--ds-control-border-strong) !important;
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text) !important;
}

.detail-asset-pagination button:disabled {
  cursor: not-allowed !important;
  opacity: 0.42 !important;
}

.detail-asset-pagination button:focus-visible {
  outline: none !important;
  border-color: var(--ds-line-accent) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.detail-asset-filter__button {
  height: 28px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.detail-asset-filter__button:hover {
  background: var(--ui-soft) !important;
  color: var(--ui-text) !important;
}

.detail-asset-filter__button.is-active {
  background: var(--ui-control-active-bg) !important;
  color: var(--ds-tier-blue-text) !important;
}

.detail-asset-filter__button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.28) !important;
  outline-offset: 2px !important;
}

.detail-editor-modal[hidden] {
  display: none !important;
}

.detail-editor-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 70 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}

.detail-editor-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.26) !important;
  backdrop-filter: blur(8px) saturate(0.96) !important;
}

.detail-editor-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  width: min(94vw, 1280px) !important;
  height: min(92svh, 920px) !important;
  padding: 16px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
}

.detail-editor-modal__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.detail-editor-modal__head strong,
.detail-editor-modal__head span {
  display: block !important;
}

.detail-editor-modal__head strong {
  color: var(--ui-text) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.detail-editor-modal__head span {
  margin-top: 4px !important;
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.detail-editor-modal__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.detail-editor-modal__actions button {
  min-height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.detail-editor-modal__actions button:hover {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-soft) !important;
}

#detailEditorSaveBtn {
  border-color: var(--ds-accent) !important;
  background: var(--ds-accent) !important;
  color: #fff !important;
}

.detail-editor-modal__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 14px !important;
  min-height: 0 !important;
}

.detail-editor-stage {
  display: grid !important;
  place-items: start center !important;
  min-height: 0 !important;
  overflow: auto !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #f8fafc, #fff) !important;
  padding: 18px !important;
}

.detail-editor-stage canvas {
  display: block !important;
  width: min(100%, 520px) !important;
  height: auto !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12) !important;
  cursor: pointer !important;
}

.detail-editor-panel {
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: var(--ui-soft) !important;
}

.detail-editor-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.detail-editor-field {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.detail-editor-field--wide {
  grid-column: 1 / -1 !important;
}

.detail-editor-field span {
  color: var(--ui-text-soft) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.detail-editor-field input,
.detail-editor-field select,
.detail-editor-field textarea {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  font: inherit !important;
  font-size: 12px !important;
  outline: none !important;
}

.detail-editor-field input,
.detail-editor-field select {
  height: 32px !important;
  padding: 0 9px !important;
}

.detail-editor-field input[type="color"] {
  padding: 3px !important;
}

.detail-editor-field textarea {
  resize: vertical !important;
  min-height: 86px !important;
  padding: 8px 9px !important;
  line-height: 1.45 !important;
}

.detail-editor-delete-image {
  grid-column: 1 / -1 !important;
  height: 32px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.detail-editor-delete-image:hover {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-soft) !important;
}

.detail-editor-field input:focus-visible,
.detail-editor-field select:focus-visible,
.detail-editor-field textarea:focus-visible {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
}

.detail-editor-status {
  margin: 0 !important;
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.is-detail-editor-open {
  overflow: hidden !important;
}

@media (max-width: 980px) {
  .detail-editor-modal__body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .detail-editor-panel {
    max-height: 42svh !important;
  }
}

.detail-asset-card {
  position: relative !important;
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  text-align: left !important;
}

.detail-asset-card:hover {
  border-color: rgba(37, 99, 235, 0.34) !important;
}

.detail-asset-card.is-selected {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
}

.detail-asset-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: var(--ui-soft) !important;
}

.detail-asset-card__check {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: var(--ds-accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.24) !important;
}

.detail-asset-card:not(.is-selected) .detail-asset-card__check {
  background: rgba(255, 255, 255, 0.86) !important;
  color: transparent !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: none !important;
}

.detail-asset-card__meta {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.detail-asset-card__meta strong,
.detail-asset-card__meta em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.detail-asset-card__meta strong {
  color: var(--ui-text) !important;
  font-size: 12px !important;
}

.detail-asset-card__meta em {
  color: var(--ui-text-soft) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

.detail-preview-panel {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}

.detail-preview-frame {
  position: relative !important;
  min-width: 0 !important;
}

.detail-preview-clear-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

.detail-preview-clear-btn:hover {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-soft) !important;
}

.detail-preview-clear-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

.detail-preview-shell {
  display: grid !important;
  place-items: center !important;
  min-height: 520px !important;
  max-height: calc(100vh - 250px) !important;
  overflow: auto !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
}

.detail-preview-shell img {
  width: min(100%, 420px) !important;
  height: auto !important;
  display: block !important;
  cursor: zoom-in !important;
}

.detail-preview-empty {
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 24px !important;
}

.detail-empty {
  min-height: 220px !important;
}

@media (max-width: 980px) {
  .detail-page-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .detail-page-toolbar {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .detail-page-toolbar__actions {
    justify-content: flex-start !important;
  }

}

/* Result mode tabs stay in one row after adding Detail. */
.results-mode-switch {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  min-width: max-content !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.results-mode-switch .tab-pill {
  flex: 0 0 auto !important;
  min-width: 80px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  border-color: var(--ds-control-border-strong) !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.results-mode-switch .tab-pill:hover:not(:disabled) {
  border-color: var(--ds-feedback-line-hover) !important;
  background: var(--ds-feedback-hover) !important;
  color: var(--ds-tier-blue-strong) !important;
}

.results-mode-switch .tab-pill.is-active,
.results-mode-switch .tab-pill.is-active:hover {
  border-color: var(--ds-feedback-line-pressed) !important;
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-tier-blue-text) !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

@media (max-width: 1500px) {
  .results-head {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .results-head > div:first-child {
    padding-right: 0 !important;
  }

  .results-mode-switch {
    position: static !important;
    grid-column: 2 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self: end !important;
  }

  .results-controls {
    grid-column: 3 !important;
    max-width: 100% !important;
  }
}

/* White-background generation: a separate top-left action on result cards. */
.result-card__white-bg-action {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition:
    opacity var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.result-card:hover .result-card__white-bg-action,
.result-card:focus-within .result-card__white-bg-action {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.result-card__white-bg {
  min-width: 78px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
}

/* Sidebar template submenus: saved/favorite/custom templates are directly selectable. */
.nav-rail__submenu {
  display: grid !important;
  gap: 3px !important;
  margin: -2px 0 6px 8px !important;
  padding: 2px 0 2px 10px !important;
  border-left: 1px solid var(--ds-line) !important;
}

.nav-rail__submenu[hidden] {
  display: none !important;
}

.nav-rail__submenu-item,
.nav-rail__submenu-more {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: var(--ds-radius-sm) !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  box-shadow: none !important;
  text-align: left !important;
  transition:
    background-color var(--ds-duration) var(--ds-ease-standard),
    color var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.nav-rail__submenu-item {
  display: grid !important;
  gap: 2px !important;
  min-height: 42px !important;
  padding: 7px 8px !important;
}

.nav-rail__submenu-title,
.nav-rail__submenu-meta {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-rail__submenu-title {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 16px !important;
}

.nav-rail__submenu-meta {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 14px !important;
}

.nav-rail__submenu-item:hover,
.nav-rail__submenu-more:hover {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.nav-rail__submenu-item:active,
.nav-rail__submenu-more:active {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) !important;
}

.nav-rail__submenu-item:focus-visible,
.nav-rail__submenu-more:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.nav-rail__submenu-item.is-active {
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text) !important;
}

.nav-rail__submenu-more {
  min-height: 28px !important;
  padding: 0 8px !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.nav-rail__submenu-empty {
  padding: 7px 8px !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

/* Result deletion and compact hover controls. Keep image area dominant. */
.batch-button--danger {
  border-color: rgba(217, 45, 32, 0.24) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-danger) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

.batch-button--danger:hover:not(:disabled),
.batch-button--danger:focus-visible {
  border-color: rgba(217, 45, 32, 0.36) !important;
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

.batch-button--danger:active:not(:disabled),
.batch-button--danger.is-pressing {
  background: var(--ds-danger-soft) !important;
  transform: translateY(1px) scale(0.985) !important;
}

.batch-button--danger:disabled {
  border-color: var(--ds-disabled-line) !important;
  background: var(--ds-disabled) !important;
  color: var(--ds-text-subtle) !important;
  box-shadow: none !important;
}

.batch-download-controls .batch-button[hidden] {
  display: none !important;
}

.result-card__top-actions {
  top: 8px !important;
  right: 8px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

.result-card__top-actions .result-card__preview-open,
.result-card__top-actions .result-card__edit,
.result-card__top-actions .result-card__delete {
  min-width: 34px !important;
  width: auto !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-right: 1px solid rgba(16, 24, 40, 0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 24px !important;
}

.result-card__top-actions .result-card__delete {
  border-right: 0 !important;
  color: var(--ds-danger) !important;
}

.result-card__top-actions .result-card__preview-open:hover,
.result-card__top-actions .result-card__edit:hover {
  background: rgba(17, 24, 39, 0.055) !important;
  color: var(--ds-text) !important;
  transform: none !important;
}

.result-card__top-actions .result-card__delete:hover,
.result-card__top-actions .result-card__delete:focus-visible {
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
  transform: none !important;
}

.result-card__download-action {
  right: 8px !important;
  bottom: 8px !important;
}

.result-card__download {
  min-width: 38px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--ds-text) !important;
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 24px !important;
}

.result-card__download:hover {
  border-color: rgba(37, 99, 235, 0.18) !important;
  background: rgba(239, 246, 255, 0.9) !important;
  color: var(--ds-accent-hover) !important;
  transform: none !important;
}

.result-card__white-bg-action {
  top: 8px !important;
  left: 8px !important;
}

.result-card__white-bg {
  min-width: 66px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  line-height: 24px !important;
}

.result-card__hover {
  left: 8px !important;
  right: auto !important;
  bottom: 8px !important;
  width: max-content !important;
  max-width: calc(100% - 66px) !important;
  min-height: 26px !important;
  height: 26px !important;
  grid-template-columns: max-content max-content !important;
  gap: 6px !important;
  padding: 3px 6px 3px 8px !important;
  border-color: rgba(16, 24, 40, 0.08) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.1) !important;
}

.hover-title {
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
}

.hover-counts {
  grid-template-columns: repeat(6, 18px) !important;
  justify-content: start !important;
  gap: 2px !important;
  width: 118px !important;
  min-width: 118px !important;
}

.hover-counts button {
  width: 18px !important;
  min-width: 18px !important;
  height: 19px !important;
  min-height: 19px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  font-size: 10.5px !important;
  line-height: 18px !important;
}

.result-summary.is-hidden-in-workbench,
.result-summary.is-hidden-in-detail {
  display: none !important;
}

@font-face {
  font-family: "Source Han Sans SC";
  src: url("./fonts/SourceHanSansSC-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans SC";
  src: url("./fonts/SourceHanSansSC-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans SC";
  src: url("./fonts/SourceHanSansSC-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Workbench: isolated tool surface for watermark, removal, and retouching. */
.workbench-pane {
  min-height: 0 !important;
}

.workbench-shell,
.workbench-main-view,
.workbench-editor-view {
  height: 100% !important;
  min-height: 0 !important;
}

.workbench-main-view,
.workbench-editor-view {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
  background: var(--ds-panel) !important;
}

.workbench-main-view[hidden],
.workbench-editor-view[hidden],
.workbench-tool-panel[hidden],
.workbench-field[hidden] {
  display: none !important;
}

.workbench-toolbar,
.workbench-editor-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 0 2px 8px !important;
  border-bottom: 1px solid var(--ds-line) !important;
}

.workbench-toolbar__title,
.workbench-editor-head > div:first-child,
.workbench-tool-panel,
.workbench-panel-head,
.workbench-field {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.workbench-panel-head--compact {
  gap: 0 !important;
}

.workbench-toolbar__title {
  gap: 3px !important;
}

.workbench-toolbar__title strong,
.workbench-editor-head strong,
.workbench-panel-head strong,
.workbench-result-head strong {
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
}

.workbench-toolbar__title span,
.workbench-editor-head span,
.workbench-panel-head span,
.workbench-note {
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.workbench-tool-tabs,
.workbench-toolbar__actions,
.workbench-editor-actions,
.workbench-position-grid,
.workbench-preset-grid,
.watermark-mode-tabs,
.workbench-result-filter,
.workbench-source-filter {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.workbench-toolbar__actions,
.workbench-editor-actions {
  justify-content: flex-end !important;
}

.watermark-mode-tabs {
  flex-wrap: nowrap !important;
}

.watermark-mode-tabs .choice-pill {
  justify-content: center !important;
  min-width: 0 !important;
}

.workbench-body {
  display: grid !important;
  grid-template-columns: 340px minmax(430px, 1fr) 300px !important;
  gap: 12px !important;
  min-height: 0 !important;
}

.workbench-source-panel,
.workbench-preview-panel,
.workbench-inspector,
.workbench-editor-panel,
.workbench-tool-rail {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-panel) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

.workbench-source-panel,
.workbench-inspector,
.workbench-editor-panel,
.workbench-tool-rail {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  overflow: hidden !important;
  padding: 10px !important;
}

.workbench-source-panel {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

.workbench-inspector,
.workbench-editor-panel,
.workbench-tool-rail {
  overflow: auto !important;
}

.workbench-preview-panel {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
  padding: 10px !important;
}

.workbench-source-grid,
.workbench-result-grid {
  display: grid !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.workbench-source-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

.workbench-source-card {
  position: relative !important;
  display: grid !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text) !important;
  text-align: left !important;
  align-self: start !important;
  cursor: pointer !important;
  transition:
    border-color var(--ds-duration) var(--ds-ease-standard),
    background-color var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.workbench-source-card:hover {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
}

.workbench-source-card:active,
.workbench-source-card.is-pressing {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) scale(0.996) !important;
}

.workbench-source-card:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.workbench-source-card.is-current,
.workbench-source-card.is-selected,
.workbench-source-pagination button.is-active,
.workbench-pane .choice-pill.is-selected,
.workbench-pane .batch-button.is-selected,
.workbench-pane .detail-asset-filter__button.is-active {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text) !important;
  box-shadow: none !important;
}

.workbench-source-card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface-soft) !important;
}

.workbench-source-card__check {
  position: absolute !important;
  top: 13px !important;
  right: 13px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: transparent !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.workbench-source-card.is-selected .workbench-source-card__check {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text-inverse) !important;
}

.workbench-source-card__meta,
.workbench-result-card__meta {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.workbench-source-card__meta strong,
.workbench-source-card__meta em,
.workbench-result-card__meta strong,
.workbench-result-card__meta em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.workbench-source-card__meta strong,
.workbench-result-card__meta strong {
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.workbench-source-card__meta em,
.workbench-result-card__meta em {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

.workbench-preview-stage,
.workbench-canvas-wrap {
  position: relative !important;
  display: grid !important;
  place-items: start stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background:
    linear-gradient(45deg, rgba(16, 24, 40, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16, 24, 40, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(16, 24, 40, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(16, 24, 40, 0.035) 75%),
    var(--ds-surface) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
}

.workbench-preview-stage canvas,
.workbench-preview-stage img,
.workbench-canvas-wrap canvas {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  background: var(--ds-panel) !important;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.11) !important;
}

.workbench-preview-batch {
  display: grid !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
}

.workbench-preview-batch[hidden] {
  display: none !important;
}

.workbench-preview-batch.is-count-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

.workbench-preview-batch.is-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.workbench-preview-batch.is-count-3,
.workbench-preview-batch.is-count-many {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.workbench-preview-card {
  display: grid !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-panel) !important;
}

.workbench-preview-card__canvas {
  display: grid !important;
  place-items: center !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--ds-surface-soft) !important;
}

.workbench-preview-card__canvas canvas {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  box-shadow: none !important;
  cursor: move !important;
  touch-action: none !important;
  user-select: none !important;
}

.workbench-preview-card__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 7px 8px !important;
  border-top: 1px solid var(--ds-line) !important;
}

.workbench-preview-card__foot span:first-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.workbench-preview-card__foot strong,
.workbench-preview-card__foot em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.workbench-preview-card__foot strong {
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.workbench-preview-card__foot em {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

.workbench-preview-card__actions {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 4px !important;
}

.workbench-preview-card__actions button {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
}

.workbench-preview-card__actions button:hover {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.workbench-preview-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--ds-line) !important;
}

.workbench-preview-actions .batch-button {
  min-width: 92px !important;
  white-space: nowrap !important;
}

.workbench-preview-actions .batch-button--primary {
  min-width: 132px !important;
}

#watermarkPreviewCanvas {
  cursor: move !important;
  touch-action: none !important;
  user-select: none !important;
}

#watermarkPreviewCanvas:focus-visible,
.workbench-preview-card__canvas canvas:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

#removeWatermarkCanvas {
  cursor: crosshair !important;
}

.workbench-preview-empty,
.workbench-result-empty,
.workbench-empty {
  color: var(--ds-text-muted) !important;
  font-size: 13px !important;
  text-align: center !important;
}

.workbench-result-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 206px !important;
  max-height: 206px !important;
  overflow: hidden !important;
  border-top: 1px solid var(--ds-line) !important;
  padding-top: 8px !important;
}

.workbench-result-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.workbench-result-filter {
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}

.workbench-result-action-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

.workbench-result-grid {
  display: flex !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 2px 6px 0 !important;
  scroll-snap-type: x proximity !important;
}

.workbench-result-card {
  position: relative !important;
  display: grid !important;
  flex: 0 0 132px !important;
  width: 132px !important;
  scroll-snap-align: start !important;
  gap: 6px !important;
  padding: 7px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-panel) !important;
}

.workbench-result-card__preview {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--ds-radius-sm) !important;
  overflow: hidden !important;
  background: var(--ds-surface-soft) !important;
  box-shadow: none !important;
}

.workbench-result-card__preview img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.workbench-result-card__meta strong {
  font-size: 11px !important;
}

.workbench-result-card__meta em {
  font-size: 10.5px !important;
}

.workbench-result-card__actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}

.workbench-result-card__actions button {
  flex: 1 1 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  min-width: 0 !important;
  padding: 0 5px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
}

.workbench-result-card__actions button:hover {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.workbench-result-card__actions button[data-workbench-result-delete]:hover {
  border-color: rgba(217, 45, 32, 0.28) !important;
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

.workbench-field > span,
.workbench-field label > span,
.workbench-slider-field label,
.workbench-upload-field strong,
.workbench-checkbox {
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.workbench-field input[type="text"],
.workbench-field input[type="number"],
.workbench-field select,
.workbench-slider-field input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text) !important;
  font: inherit !important;
  font-size: 12px !important;
  outline: none !important;
}

.workbench-field input[type="text"],
.workbench-field select {
  padding: 0 9px !important;
}

.workbench-field input[type="color"] {
  width: 100% !important;
  height: 32px !important;
  padding: 3px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-panel) !important;
}

.workbench-field input:focus-visible,
.workbench-field select:focus-visible,
.workbench-slider-field input:focus-visible {
  outline: none !important;
  border-color: var(--ds-line-accent) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.workbench-field--inline {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.workbench-slider-field {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 54px !important;
  align-items: center !important;
  gap: 8px !important;
}

.workbench-slider-field input[type="range"] {
  width: 100% !important;
  accent-color: var(--ds-text-muted) !important;
}

.workbench-slider-field input[type="number"] {
  padding: 0 6px !important;
  text-align: center !important;
}

.workbench-upload-field {
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px dashed var(--ds-line-strong) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface-soft) !important;
  cursor: pointer !important;
}

.watermark-mode-panel {
  display: grid !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface-soft) !important;
}

.watermark-mode-panel[hidden] {
  display: none !important;
}

.watermark-upload-field {
  min-height: 76px !important;
  place-items: center start !important;
  border-style: dashed !important;
  background: var(--ds-panel) !important;
}

.watermark-upload-field strong {
  color: var(--ds-text) !important;
  font-size: 13px !important;
}

.workbench-upload-field:hover {
  background: var(--ds-hover) !important;
}

.workbench-upload-field span,
.workbench-upload-field em {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.workbench-upload-field em {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.workbench-note {
  margin: 0 !important;
}

.retouch-panel-fields,
#retouchSliderList {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.workbench-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.workbench-source-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding-top: 4px !important;
}

.workbench-source-pagination button {
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.workbench-source-pagination button:hover:not(:disabled) {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.workbench-editor-body {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) 300px !important;
  gap: 12px !important;
  min-height: 0 !important;
}

.workbench-editor-body--retouch {
  grid-template-columns: minmax(0, 1fr) 320px !important;
}

.workbench-tool-rail .batch-button {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px !important;
}

.retouch-panel-fields {
  max-height: 100% !important;
}

.retouch-histogram {
  display: grid !important;
  place-items: center !important;
  height: 94px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background:
    linear-gradient(90deg, rgba(217, 45, 32, 0.16), rgba(15, 143, 110, 0.14), rgba(37, 99, 235, 0.16)),
    var(--ds-surface-soft) !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* TU retouch module: scoped current-page retouching. */
.workbench-pane[data-active-tool="retouch"] .workbench-body {
  grid-template-columns: 320px minmax(420px, 1fr) 320px !important;
}

.workbench-pane[data-active-tool="retouch"] .workbench-preview-stage {
  place-items: center !important;
  overflow: hidden !important;
  background: var(--ds-surface-soft) !important;
}

.workbench-pane[data-active-tool="retouch"] #workbenchPreviewImage,
.workbench-pane[data-active-tool="retouch"] #retouchInlineCanvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: var(--ds-radius-sm) !important;
}

#retouchPanel {
  gap: 12px !important;
}

.retouch-source-summary,
.retouch-inline-summary,
.retouch-editor-summary,
.retouch-control-group {
  display: grid !important;
  min-width: 0 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface-soft) !important;
}

.retouch-source-summary {
  gap: 3px !important;
  padding: 10px !important;
}

.retouch-source-summary span,
.retouch-inline-summary span,
.retouch-preset-field > span,
.retouch-editor-summary span,
.retouch-histogram__label {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 14px !important;
}

.retouch-source-summary strong,
.retouch-inline-summary strong,
.retouch-editor-summary strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.retouch-source-summary em,
.retouch-editor-summary em {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 15px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.retouch-inline-summary {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 10px !important;
}

.retouch-flow {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.retouch-flow span {
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 7px 5px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-soft) !important;
}

.retouch-flow strong {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-feedback-badge) !important;
  color: var(--ds-text) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.retouch-flow em {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 14px !important;
  white-space: nowrap !important;
}

.retouch-preset-field {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.retouch-preset-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  min-width: 0 !important;
}

#retouchPanel .retouch-preset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.retouch-preset-button {
  display: grid !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition:
    border-color var(--ds-duration) var(--ds-ease-standard),
    background-color var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.retouch-preset-button:hover {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
}

.retouch-preset-button:active,
.retouch-preset-button.is-pressing {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) scale(0.996) !important;
}

.retouch-preset-button:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.retouch-preset-button.is-selected {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-feedback-selected) !important;
}

.retouch-preset-button strong,
.retouch-preset-button span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.retouch-preset-button strong {
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 16px !important;
}

.retouch-preset-button span {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

#retouchPanel .retouch-preset-button {
  min-height: 58px !important;
  padding: 8px !important;
}

#retouchPanel .retouch-preset-button span {
  display: -webkit-box !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.retouch-inline-controls {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.retouch-inline-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.retouch-inline-actions .batch-button,
#retouchPanel > .batch-button--primary {
  width: 100% !important;
}

.retouch-histogram--inline {
  height: 72px !important;
  padding: 8px !important;
}

.retouch-editor .workbench-canvas-wrap {
  place-items: center !important;
  overflow: hidden !important;
  background: var(--ds-surface-soft) !important;
}

.retouch-canvas-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 2 !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  line-height: 24px !important;
}

.retouch-editor-summary {
  gap: 2px !important;
  padding: 10px !important;
}

.retouch-histogram {
  place-items: stretch !important;
  align-content: stretch !important;
  gap: 8px !important;
  height: 96px !important;
  padding: 9px !important;
  background: var(--ds-surface-soft) !important;
}

.retouch-histogram__bars {
  display: grid !important;
  grid-template-columns: repeat(32, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 2px !important;
  min-height: 0 !important;
}

.retouch-histogram__bars i {
  display: block !important;
  min-height: 4px !important;
  border-radius: var(--ds-radius-pill) var(--ds-radius-pill) 0 0 !important;
  background: var(--ds-text-subtle) !important;
  opacity: 0.78 !important;
}

#retouchSliderList {
  gap: 8px !important;
}

.retouch-control-group {
  gap: 8px !important;
  padding: 9px !important;
}

.retouch-control-group--inline {
  gap: 6px !important;
  padding: 8px !important;
  background: var(--ds-panel) !important;
}

.retouch-control-group__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.retouch-control-group__head strong,
.retouch-control-group__head span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.retouch-control-group__head strong {
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

.retouch-control-group__head span {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
}

.retouch-slider-field {
  grid-template-columns: 60px minmax(0, 1fr) 50px !important;
}

.retouch-control-group--inline .retouch-slider-field {
  grid-template-columns: 54px minmax(0, 1fr) 44px !important;
  min-height: 26px !important;
  gap: 6px !important;
}

.retouch-control-group--inline .retouch-slider-field label,
.retouch-control-group--inline .retouch-slider-field input[type="number"] {
  font-size: 11px !important;
}

.retouch-control-group--inline .retouch-slider-field input[type="number"] {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 4px !important;
}

@media (max-width: 1180px) {
  .workbench-body {
    grid-template-columns: minmax(260px, 0.45fr) minmax(320px, 1fr) !important;
  }

  .workbench-inspector {
    grid-column: 1 / -1 !important;
    max-height: 260px !important;
  }

  .workbench-pane[data-active-tool="retouch"] .workbench-inspector {
    max-height: none !important;
  }

  .workbench-editor-body,
  .workbench-editor-body--retouch {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workbench-tool-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .workbench-editor-panel {
    max-height: 260px !important;
  }
}

@media (max-width: 920px) {
  #retouchPanel .retouch-preset-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workbench-toolbar,
  .workbench-editor-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .workbench-toolbar__actions,
  .workbench-editor-actions {
    justify-content: flex-start !important;
  }

  .workbench-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workbench-preview-panel {
    min-height: 420px !important;
  }

  .workbench-preview-batch.is-count-2,
  .workbench-preview-batch.is-count-3,
  .workbench-preview-batch.is-count-many {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workbench-preview-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Portrait and workbench are standalone main menu blocks with compact linked content. */
.nav-rail .nav-rail__item,
.nav-rail .nav-rail__item:hover,
.nav-rail .nav-rail__item.is-active,
.nav-rail .nav-rail__item.is-active:hover,
.nav-rail .nav-rail__item.is-pressing {
  color: var(--ds-flat-text) !important;
}

.nav-rail__group--rich {
  display: grid !important;
  gap: 4px !important;
}

.nav-rail__group--rich .nav-rail__section-toggle[aria-expanded="true"] {
  background: var(--ds-flat-selected) !important;
  color: var(--ds-flat-text) !important;
}

.nav-rail__group--rich .nav-rail__section-toggle[aria-expanded="true"]:hover {
  background: var(--ds-feedback-selected-hover) !important;
  color: var(--ds-flat-text) !important;
}

.nav-rail__group--rich .nav-rail__submenu--static {
  display: grid !important;
  gap: 2px !important;
  margin: 0 0 7px 6px !important;
  padding: 2px 0 2px 8px !important;
  border-left: 1px solid var(--ds-line) !important;
}

.nav-rail__group--rich .nav-rail__submenu--static[hidden] {
  display: none !important;
}

.nav-rail__group--rich .nav-rail__submenu-item {
  min-height: 34px !important;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-flat-text) !important;
}

.nav-rail__group--rich .nav-rail__submenu-item:hover {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.nav-rail__group--rich .nav-rail__submenu-item.is-active,
.nav-rail__group--rich .nav-rail__submenu-item.is-active:hover {
  background: var(--ds-flat-selected) !important;
  color: var(--ds-flat-text) !important;
}

.nav-rail__group--rich .nav-rail__submenu-title {
  font-size: 12px !important;
  line-height: 15px !important;
}

.nav-rail__group--rich .nav-rail__submenu-meta {
  color: var(--ds-text-muted) !important;
  font-size: 10.5px !important;
  line-height: 13px !important;
}

.template-context-panel[hidden],
.workbench-template-bridge[hidden] {
  display: none !important;
}

.template-context-panel {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 10px !important;
  background: var(--ds-surface-soft) !important;
}

.template-context-panel__head,
.workbench-template-bridge__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.template-context-panel__head > span,
.workbench-template-bridge__head > span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.template-context-panel__head strong,
.workbench-template-bridge__head strong,
.template-context-item strong,
.workbench-bridge-pill strong {
  overflow: hidden !important;
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 16px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.template-context-panel__head em,
.workbench-template-bridge__head em,
.template-context-item span,
.workbench-bridge-pill span,
.workbench-bridge-pill small {
  overflow: hidden !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 14px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.template-context-tags,
.template-context-status,
.template-context-actions,
.workbench-template-bridge__links,
.workbench-template-bridge__tools,
.workbench-template-bridge__workflow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.template-context-status span {
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 20px !important;
}

.template-context-status span.is-ready {
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text) !important;
}

.template-context-tags span {
  height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 20px !important;
}

.template-context-actions {
  padding-top: 1px !important;
}

.template-context-actions .choice-pill,
.template-context-actions .batch-button {
  min-height: 28px !important;
  padding: 0 10px !important;
}

.template-context-list {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.template-context-item,
.workbench-bridge-pill {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ds-text) !important;
  cursor: pointer !important;
  text-align: left !important;
}

.template-context-item {
  min-height: 38px !important;
  padding: 5px 8px !important;
}

.workbench-bridge-pill {
  flex: 1 1 108px !important;
  max-width: 150px !important;
  min-height: 52px !important;
  padding: 5px 8px !important;
}

.template-context-item:hover,
.workbench-bridge-pill:hover {
  border-color: var(--ds-line) !important;
  background: var(--ds-hover) !important;
}

.template-context-item:active,
.workbench-bridge-pill:active {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) !important;
}

.template-context-item:focus-visible,
.workbench-bridge-pill:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.template-context-item.is-active,
.workbench-bridge-pill.is-active {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-feedback-selected) !important;
}

.workbench-bridge-pill.is-ready:not(.is-active) {
  border-color: var(--ds-line) !important;
  background: var(--ds-panel) !important;
}

.workbench-main-view {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.workbench-template-bridge {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 10px !important;
  background: var(--ds-surface-soft) !important;
}

.workbench-template-bridge__tools {
  justify-content: flex-end !important;
}

.workbench-template-bridge__tools .choice-pill {
  min-height: 30px !important;
  padding: 0 10px !important;
}

.workbench-template-bridge__workflow {
  grid-column: 2 / -1 !important;
  justify-content: flex-start !important;
  padding-top: 1px !important;
}

.workbench-flow-button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}

.workbench-flow-button:hover {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
}

.workbench-flow-button:active {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) !important;
}

.workbench-flow-button:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.workbench-flow-button.is-active {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-feedback-selected) !important;
}

@media (max-width: 1180px) {
  .workbench-template-bridge {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workbench-template-bridge__workflow {
    grid-column: auto !important;
  }

  .workbench-template-bridge__tools {
    justify-content: flex-start !important;
  }
}

/* Keep the result preview plane plain white while preserving loading animations. */
.results-board,
.results-board .results-head,
.results-board .result-canvas,
.results-board .results-pane,
.results-board .result-grid,
.results-board .result-pagination,
.results-board .result-summary {
  background: #ffffff !important;
}

.results-head.is-tasking,
.results-head.is-tasking > div:first-child,
.results-head.is-tasking .generation-task-queue,
.results-head.is-tasking .generation-task-queue__bar,
.results-head.is-tasking .generation-task-queue__summary,
.results-head.is-tasking .generation-task-queue__list,
.results-head.is-tasking .generation-task-row,
.results-head.is-tasking .generation-task-chip {
  background: #ffffff !important;
}

.results-board .result-card--loading:not(.result-card--failed) .result-card__loading-meta {
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.results-board .result-card--loading:not(.result-card--failed) .result-card__loading-meta strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #172033 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.results-board .result-card--loading:not(.result-card--failed) .result-card__loading-meta strong::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #218cff, #30b8aa) !important;
  box-shadow:
    0 0 0 3px rgba(33, 140, 255, 0.14),
    0 0 14px rgba(33, 140, 255, 0.36) !important;
  animation: resultStatusDotBreath 2.2s ease-in-out infinite !important;
}

.results-board .result-card--loading:not(.result-card--failed) .result-card__loading-meta em,
.results-board .result-card--loading:not(.result-card--failed) .result-card__loading-meta span {
  display: none !important;
}

@keyframes resultStatusDotBreath {
  0%,
  100% {
    opacity: 0.82;
    transform: none;
    box-shadow:
      0 0 0 2px rgba(33, 140, 255, 0.12),
      0 0 10px rgba(33, 140, 255, 0.24);
  }

  48% {
    opacity: 1;
    transform: none;
    box-shadow:
      0 0 0 5px rgba(33, 140, 255, 0.18),
      0 0 18px rgba(33, 140, 255, 0.46);
  }
}

/* Template hub: a scoped middle layer for portrait/workbench/scene/my-template menus. */
.workspace.is-template-hub-active {
  grid-template-columns: minmax(0, 1fr) !important;
}

.workspace.is-template-hub-active > .control-panel,
.workspace.is-template-hub-active > .results-board {
  display: none !important;
}

.template-hub[hidden] {
  display: none !important;
}

.template-hub {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 12px !important;
  background: var(--ds-panel) !important;
  box-shadow: var(--ds-shadow-soft) !important;
}

.template-hub__head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  background: var(--ds-panel) !important;
}

.template-hub__head h2 {
  margin: 0 !important;
  color: var(--ds-text) !important;
  font-size: 17px !important;
  font-weight: 760 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
}

.template-hub__head p {
  margin: 4px 0 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.template-hub__head .eyebrow {
  margin: 0 0 3px !important;
  color: var(--ds-text-subtle) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
}

.template-hub__tools {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: min(640px, 54vw) !important;
}

.template-hub__search {
  flex: 1 1 240px !important;
  min-width: 220px !important;
}

.template-hub__search input {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface-soft) !important;
  color: var(--ds-text) !important;
  font-size: 12px !important;
  outline: none !important;
}

.template-hub__search input::placeholder {
  color: var(--ds-text-subtle) !important;
}

.template-hub__search input:focus-visible {
  border-color: var(--ds-line-strong) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.template-hub__tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 18px 0 !important;
  background: var(--ds-panel) !important;
}

.template-hub__body {
  position: relative !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 14px 18px 18px !important;
  background: var(--ds-panel) !important;
}

.template-hub__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

.template-hub-card {
  display: grid !important;
  grid-template-rows: auto minmax(92px, auto) !important;
  gap: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-align: left !important;
  box-shadow: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease !important;
}

.template-hub-card:hover {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
  box-shadow: var(--ds-shadow-soft) !important;
  transform: translateY(-1px) !important;
}

.template-hub-card:active {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) !important;
}

.template-hub-card:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.template-hub-card.is-active {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-feedback-selected) !important;
}

.template-hub-card__visual {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--ds-surface-soft) !important;
}

.template-hub-card__visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.template-hub-card__stage {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.28)),
    var(--ds-surface-soft) !important;
}

.template-hub-card__shape {
  position: absolute !important;
  display: block !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 8px 22px rgba(22, 32, 52, 0.08) !important;
}

.template-hub-card__shape--main {
  left: 9% !important;
  top: 13% !important;
  width: 38% !important;
  height: 68% !important;
  border-radius: 8px !important;
}

.template-hub-card__shape--side {
  right: 9% !important;
  top: 11% !important;
  width: 39% !important;
  height: 49% !important;
  border-radius: 8px !important;
}

.template-hub-card__shape--sheet {
  right: 20% !important;
  bottom: 14% !important;
  width: 34% !important;
  height: 24% !important;
  border-radius: 999px !important;
}

.template-hub-card__shape--small {
  left: 47% !important;
  bottom: 19% !important;
  width: 12% !important;
  height: 18% !important;
  border-radius: 999px !important;
}

.template-hub-card__body {
  display: grid !important;
  gap: 6px !important;
  padding: 12px 13px 13px !important;
  background: var(--ds-panel) !important;
}

.template-hub-card__body strong {
  display: block !important;
  min-width: 0 !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 19px !important;
  letter-spacing: 0 !important;
}

.template-hub-card__body span {
  display: -webkit-box !important;
  min-height: 34px !important;
  overflow: hidden !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 17px !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.template-hub-card__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-height: 22px !important;
}

.template-hub-card__tags em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 20px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface-soft) !important;
  color: var(--ds-text-muted) !important;
  font-size: 10.5px !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 18px !important;
}

.template-hub__empty {
  display: grid !important;
  place-items: center !important;
  min-height: 220px !important;
  gap: 6px !important;
  color: var(--ds-text-muted) !important;
  text-align: center !important;
}

.template-hub__empty[hidden] {
  display: none !important;
}

.template-hub__empty strong {
  color: var(--ds-text) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

.template-hub__empty span {
  font-size: 12px !important;
  line-height: 18px !important;
}

.nav-rail__section-toggle.is-template-hub-active {
  background: var(--ds-flat-selected) !important;
  color: var(--ds-flat-text) !important;
}

@media (max-width: 1180px) {
  .template-hub__head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .template-hub__tools {
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .template-hub__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}

/* Mature account, settings, and membership surfaces. */
.nav-rail__footer {
  position: relative !important;
  overflow: visible !important;
}

.nav-rail__footer-stack {
  display: grid !important;
  gap: 8px !important;
}

.nav-rail__footer-menu {
  position: relative !important;
  min-width: 0 !important;
}

.nav-rail__login,
.nav-rail__points {
  width: 100% !important;
  min-width: 0 !important;
  cursor: pointer !important;
}

.nav-rail__login {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 48px !important;
  padding: 7px 9px !important;
  text-align: left !important;
}

.nav-rail__account-avatar,
.nav-flyout__avatar,
.footer-modal__profile-avatar {
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 50% !important;
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.nav-rail__account-avatar {
  width: 28px !important;
  height: 28px !important;
}

.nav-rail__account-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 1px !important;
}

.nav-rail__account-copy strong,
.nav-rail__points strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-rail__account-copy small,
.nav-rail__points span,
.nav-rail__points small {
  overflow: hidden !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  line-height: 15px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-rail__chevron {
  color: var(--ds-text-muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-align: right !important;
}

.nav-rail__points {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 2px 8px !important;
  min-height: 58px !important;
  padding: 10px 11px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-panel) !important;
  text-align: left !important;
  transition:
    background-color var(--ds-duration) var(--ds-ease-standard),
    border-color var(--ds-duration) var(--ds-ease-standard),
    color var(--ds-duration) var(--ds-ease-standard) !important;
}

.nav-rail__points strong {
  justify-self: end !important;
  color: var(--ds-tier-blue-strong) !important;
  font-size: 17px !important;
  line-height: 20px !important;
}

.nav-rail__points small {
  grid-column: 1 / -1 !important;
}

.nav-rail__points:hover,
.nav-rail__footer-menu:focus-within > .nav-rail__points {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
}

.nav-flyout {
  position: absolute !important;
  left: calc(100% + 12px) !important;
  bottom: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  gap: 10px !important;
  width: 260px !important;
  padding: 12px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-4px) translateY(3px) !important;
  transition:
    opacity var(--ds-duration) var(--ds-ease-out),
    transform var(--ds-duration) var(--ds-ease-out) !important;
}

.nav-rail__footer-menu:hover > .nav-flyout,
.nav-rail__footer-menu:focus-within > .nav-flyout {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) translateY(0) !important;
}

.nav-flyout__profile {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--ds-line) !important;
}

.nav-flyout__avatar,
.footer-modal__profile-avatar {
  width: 36px !important;
  height: 36px !important;
}

.nav-flyout__profile strong,
.nav-flyout__deal strong,
.nav-flyout__stats strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-flyout__profile span,
.nav-flyout__deal span,
.nav-flyout__deal p,
.nav-flyout__stats span {
  margin: 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

.nav-flyout__list {
  display: grid !important;
  gap: 3px !important;
}

.nav-flyout__list button,
.nav-flyout__plain {
  min-height: 32px !important;
  padding: 0 9px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-align: left !important;
}

.nav-flyout__list button:hover,
.nav-flyout__plain:hover {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.nav-flyout__list button:active,
.nav-flyout__plain:active {
  background: var(--ds-pressed) !important;
  transform: translateY(1px) scale(0.996) !important;
}

.nav-flyout__list button[hidden] {
  display: none !important;
}

.nav-flyout__deal {
  display: grid !important;
  gap: 5px !important;
  padding: 12px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-surface-soft) !important;
}

.nav-flyout__deal strong {
  white-space: normal !important;
}

.nav-flyout__stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.nav-flyout__stats > div {
  display: grid !important;
  gap: 2px !important;
  padding: 9px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-panel) !important;
}

.nav-flyout__primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ds-accent) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-accent) !important;
  color: var(--ds-text-inverse) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

.nav-flyout__primary:hover {
  background: var(--ds-accent-hover) !important;
}

.nav-flyout__plain {
  justify-content: center !important;
  text-align: center !important;
}

body.is-footer-modal-open,
body.is-member-recharge-open {
  overflow: hidden !important;
}

.footer-modal__panel {
  width: min(980px, calc(100vw - 48px)) !important;
  min-height: min(650px, calc(100svh - 56px)) !important;
  max-height: calc(100svh - 56px) !important;
  border-radius: 14px !important;
}

.footer-modal__shell {
  display: grid !important;
  grid-template-columns: 216px minmax(0, 1fr) !important;
  min-height: inherit !important;
  max-height: inherit !important;
}

.footer-modal__nav {
  display: grid !important;
  align-content: start !important;
  gap: 16px !important;
  padding: 18px 14px !important;
  border-right: 1px solid var(--ds-line) !important;
  background: var(--ds-surface-soft) !important;
}

.footer-modal__nav-top {
  display: grid !important;
  gap: 4px !important;
  padding: 0 4px !important;
}

.footer-modal__nav-top p {
  margin: 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.footer-modal__nav-list {
  display: grid !important;
  gap: 4px !important;
}

.footer-modal__nav-item {
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: left !important;
}

.footer-modal__nav-item:hover {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.footer-modal__nav-item.is-active {
  border-color: var(--ds-line) !important;
  background: var(--ds-feedback-selected) !important;
  color: var(--ds-text) !important;
}

.footer-modal__main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  background: var(--ds-panel) !important;
}

.footer-modal__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 20px 22px 14px !important;
  border-bottom: 1px solid var(--ds-line) !important;
}

.footer-modal__close,
.footer-modal__action-row button,
.footer-modal__profile-row button,
.member-plan-card button,
.member-recharge-modal__head button {
  min-height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.footer-modal__close:hover,
.footer-modal__action-row button:hover,
.footer-modal__profile-row button:hover,
.member-plan-card button:hover,
.member-recharge-modal__head button:hover {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.footer-modal__section {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 18px 22px 22px !important;
  overflow: auto !important;
  background: var(--ds-panel) !important;
}

.footer-modal__section[hidden] {
  display: none !important;
}

.footer-modal__hero,
.member-settings-hero,
.footer-modal__profile-row,
.member-recharge-modal__promo {
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-surface-soft) !important;
}

.footer-modal__hero,
.member-settings-hero {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px !important;
}

.footer-modal__hero strong,
.member-settings-hero strong,
.member-recharge-modal__promo strong {
  display: block !important;
  color: var(--ds-text) !important;
  font-size: 22px !important;
  font-weight: 780 !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
}

.footer-modal__hero p,
.member-settings-hero p,
.member-recharge-modal__promo p {
  margin: 7px 0 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.footer-modal__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.footer-modal__card,
.footer-modal__list-row,
.footer-modal__action-row,
.member-plan-card,
.member-recharge-modal__notes > div {
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-panel) !important;
  box-shadow: none !important;
}

.footer-modal__card {
  display: grid !important;
  gap: 6px !important;
  padding: 13px !important;
}

.footer-modal__card span,
.footer-modal__list-row > span,
.member-settings-hero span,
.member-plan-card span,
.member-recharge-modal__head span,
.member-recharge-modal__promo span {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
}

.footer-modal__card strong,
.footer-modal__list-row strong,
.footer-modal__profile-row strong,
.member-plan-card strong,
.member-recharge-modal__notes strong {
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 19px !important;
}

.footer-modal__card p,
.footer-modal__list-row p,
.footer-modal__profile-row p,
.member-plan-card p,
.member-recharge-modal__notes p {
  margin: 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.footer-modal__list,
.footer-modal__stack {
  display: grid !important;
  gap: 10px !important;
}

.footer-modal__list-row,
.footer-modal__action-row,
.footer-modal__profile-row {
  display: grid !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px !important;
}

.footer-modal__list-row,
.footer-modal__action-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.footer-modal__profile-row {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

.footer-modal__api-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.api-field--modal {
  border-radius: 8px !important;
}

.member-settings-hero .primary-button,
.member-plan-card.is-featured button {
  border-color: var(--ds-accent) !important;
  background: var(--ds-accent) !important;
  color: var(--ds-text-inverse) !important;
}

.member-recharge-modal[hidden] {
  display: none !important;
}

.member-recharge-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1030 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(14px, 3vw, 28px) !important;
}

.member-recharge-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.26) !important;
  backdrop-filter: blur(10px) saturate(0.95) !important;
}

.member-recharge-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 14px !important;
  width: min(860px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 40px) !important;
  overflow: auto !important;
  padding: 18px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.member-recharge-modal__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.member-recharge-modal__head strong {
  display: block !important;
  color: var(--ds-text) !important;
  font-size: 22px !important;
  font-weight: 780 !important;
  line-height: 28px !important;
}

.member-recharge-modal__head p {
  margin: 4px 0 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.member-recharge-modal__promo {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px !important;
}

.member-recharge-modal__badge,
.footer-modal__hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-panel) !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.member-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.member-plan-card {
  display: grid !important;
  gap: 9px !important;
  padding: 15px !important;
}

.member-plan-card.is-featured {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-accent-softer) !important;
}

.member-plan-card strong {
  font-size: 24px !important;
  line-height: 30px !important;
}

.member-plan-card button {
  justify-content: center !important;
}

.member-recharge-modal__notes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.member-recharge-modal__notes > div {
  display: grid !important;
  gap: 5px !important;
  padding: 13px !important;
}

@media (max-width: 900px) {
  .footer-modal__panel {
    width: calc(100vw - 24px) !important;
    min-height: calc(100svh - 24px) !important;
    max-height: calc(100svh - 24px) !important;
  }

  .footer-modal__shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .footer-modal__nav {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ds-line) !important;
  }

  .footer-modal__nav-list,
  .footer-modal__grid,
  .footer-modal__api-grid,
  .member-plan-grid,
  .member-recharge-modal__notes {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .footer-modal__list-row,
  .footer-modal__action-row,
  .footer-modal__profile-row,
  .footer-modal__hero,
  .member-settings-hero,
  .member-recharge-modal__promo {
    grid-template-columns: minmax(0, 1fr) !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media (max-width: 1220px) {
  .nav-flyout {
    display: none !important;
  }
}

/* Footer correction: compact two entries, with the card living in the flyout. */
.nav-rail__footer-stack {
  gap: 6px !important;
}

.nav-rail__footer-menu.is-open > .nav-flyout {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) translateY(0) !important;
}

.nav-rail__login {
  grid-template-columns: 24px minmax(0, 1fr) 14px !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 6px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.nav-rail__login:hover,
.nav-rail__footer-menu.is-open > .nav-rail__login {
  border-color: transparent !important;
  background: var(--ds-hover) !important;
}

.nav-rail__account-avatar {
  width: 24px !important;
  height: 24px !important;
  border-color: var(--ds-line) !important;
  background: var(--ds-feedback-selected) !important;
  font-size: 10px !important;
}

.nav-rail__account-copy strong {
  font-size: 13px !important;
  line-height: 18px !important;
}

.nav-rail__account-copy small {
  display: none !important;
}

.nav-rail__points {
  min-height: 42px !important;
  padding: 8px 9px !important;
  border-radius: 8px !important;
  background: var(--ds-panel) !important;
}

.nav-rail__points span {
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.nav-rail__points strong {
  color: var(--ds-tier-blue-strong) !important;
  font-size: 15px !important;
  line-height: 18px !important;
}

.nav-rail__points small {
  display: none !important;
}

.nav-rail__footer-menu.is-open > .nav-rail__points {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-hover) !important;
}

.nav-flyout {
  width: 248px !important;
  bottom: 0 !important;
}

/* Footer account/member surface: visible flyouts and clearer affordance. */
.nav-rail,
.nav-rail__footer,
.nav-rail__footer-stack,
.nav-rail__footer-menu {
  overflow: visible !important;
}

.nav-rail__footer {
  z-index: 120 !important;
}

.nav-rail__footer-stack {
  gap: 8px !important;
}

.nav-rail__points,
.nav-rail__login {
  position: relative !important;
  border: 1px solid var(--ds-line) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) inset !important;
  transition:
    background var(--ds-duration) var(--ds-ease-standard),
    border-color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.nav-rail__points {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 52px !important;
  padding: 9px 11px 9px 13px !important;
  border-radius: 10px !important;
}

.nav-rail__points::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: var(--ds-accent) !important;
  opacity: 0.72 !important;
}

.nav-rail__points span {
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 16px !important;
}

.nav-rail__points strong {
  color: var(--ds-tier-blue-strong) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
}

.nav-rail__points small {
  display: block !important;
  grid-column: 1 / -1 !important;
  margin-top: 2px !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

.nav-rail__login {
  grid-template-columns: 26px minmax(0, 1fr) 16px !important;
  min-height: 44px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
}

.nav-rail__account-avatar {
  width: 26px !important;
  height: 26px !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--ds-tier-blue-strong) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.nav-rail__account-copy strong {
  color: var(--ds-text) !important;
  font-size: 13px !important;
  line-height: 17px !important;
}

.nav-rail__account-copy small {
  display: block !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

.nav-rail__login .nav-rail__chevron,
.nav-rail__points::after {
  transition: transform var(--ds-duration-fast) var(--ds-ease-standard), opacity var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.nav-rail__points::after {
  content: "›" !important;
  position: absolute !important;
  right: 10px !important;
  bottom: 7px !important;
  color: var(--ds-text-muted) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 0.55 !important;
}

.nav-rail__footer-menu:hover > .nav-rail__points,
.nav-rail__footer-menu.is-open > .nav-rail__points,
.nav-rail__footer-menu:focus-within > .nav-rail__points,
.nav-rail__footer-menu:hover > .nav-rail__login,
.nav-rail__footer-menu.is-open > .nav-rail__login,
.nav-rail__footer-menu:focus-within > .nav-rail__login {
  border-color: var(--ds-line-strong) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

.nav-rail__footer-menu:hover > .nav-rail__points,
.nav-rail__footer-menu:hover > .nav-rail__login {
  transform: translateY(-1px) !important;
}

.nav-rail__footer-menu.is-open > .nav-rail__login .nav-rail__chevron,
.nav-rail__footer-menu:hover > .nav-rail__login .nav-rail__chevron {
  transform: rotate(90deg) !important;
}

.nav-rail__footer-menu.is-open > .nav-rail__points::after,
.nav-rail__footer-menu:hover > .nav-rail__points::after {
  opacity: 1 !important;
  transform: rotate(90deg) !important;
}

.nav-flyout {
  display: grid !important;
  width: 282px !important;
  left: calc(100% + 10px) !important;
  bottom: 0 !important;
  z-index: 300 !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-6px) translateY(4px) scale(0.985) !important;
  transform-origin: left bottom !important;
}

.nav-rail__footer-menu:hover > .nav-flyout,
.nav-rail__footer-menu:focus-within > .nav-flyout,
.nav-rail__footer-menu.is-open > .nav-flyout,
.nav-flyout[aria-hidden="false"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) translateY(0) scale(1) !important;
}

.nav-flyout__profile {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 11px !important;
  padding: 2px 2px 12px !important;
}

.nav-flyout__avatar {
  width: 38px !important;
  height: 38px !important;
  border-color: rgba(37, 99, 235, 0.20) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--ds-tier-blue-strong) !important;
  font-weight: 800 !important;
}

.nav-flyout__list {
  gap: 4px !important;
}

.nav-flyout__list button,
.nav-flyout__plain {
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  color: var(--ds-text-soft) !important;
  text-align: left !important;
}

.nav-flyout__list button:hover,
.nav-flyout__plain:hover {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

.nav-flyout__deal {
  gap: 6px !important;
  padding: 13px !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(37, 99, 235, 0.055) !important;
}

.nav-flyout__deal span {
  color: var(--ds-tier-blue-strong) !important;
  font-weight: 760 !important;
}

.nav-flyout__deal strong {
  font-size: 14px !important;
  line-height: 20px !important;
}

.nav-flyout__stats {
  gap: 8px !important;
}

.nav-flyout__stats > div {
  border-radius: 10px !important;
  background: #ffffff !important;
}

.nav-flyout__primary {
  min-height: 38px !important;
  border-radius: 999px !important;
  font-weight: 760 !important;
}

@media (max-width: 1220px) {
  .nav-flyout {
    display: grid !important;
    width: min(282px, calc(100vw - 256px)) !important;
    min-width: 236px !important;
    left: calc(100% + 8px) !important;
  }
}

/* Final footer chain: click opens a compact card above the trigger; card actions open centered modules. */
.nav-rail__footer-menu {
  isolation: isolate !important;
}

.nav-rail__footer-menu > .nav-flyout {
  left: 0 !important;
  right: auto !important;
  bottom: calc(100% + 8px) !important;
  width: 224px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  padding: 8px !important;
  gap: 8px !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14) !important;
  transform: translateY(8px) scale(0.985) !important;
  transform-origin: left bottom !important;
}

.nav-rail__footer-menu:hover > .nav-flyout:not([aria-hidden="false"]),
.nav-rail__footer-menu:focus-within > .nav-flyout:not([aria-hidden="false"]) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(0.985) !important;
}

.nav-rail__footer-menu.is-open > .nav-flyout,
.nav-rail__footer-menu > .nav-flyout[aria-hidden="false"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.nav-flyout--account {
  padding-top: 10px !important;
}

.nav-flyout__profile {
  position: relative !important;
  grid-template-columns: 30px minmax(0, 1fr) 14px !important;
  gap: 9px !important;
  padding: 2px 4px 9px !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

.nav-flyout__profile::after {
  content: "›" !important;
  align-self: center !important;
  color: var(--ds-text-muted) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.nav-flyout__profile .nav-flyout__avatar {
  width: 30px !important;
  height: 30px !important;
  font-size: 10px !important;
}

.nav-flyout__profile:hover {
  background: var(--ds-hover) !important;
  border-radius: 9px !important;
}

.nav-flyout__profile strong {
  font-size: 13px !important;
  line-height: 17px !important;
}

.nav-flyout__profile span:not(.nav-flyout__avatar) {
  font-size: 11px !important;
  line-height: 14px !important;
}

.nav-flyout__list {
  gap: 2px !important;
}

.nav-flyout__list button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 0 10px 0 8px !important;
  border-radius: 8px !important;
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 640 !important;
}

.nav-flyout__list button:hover {
  background: var(--ds-hover) !important;
}

.nav-flyout__item-icon {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--ds-text-muted) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.nav-flyout__list button:hover .nav-flyout__item-icon {
  color: var(--ds-text) !important;
}

.nav-flyout__list button > span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-flyout__list button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.28) !important;
  outline-offset: 1px !important;
}

.nav-flyout__list button:is(#accountFlyoutSettingsBtn, #accountFlyoutHelpBtn, #accountFlyoutLogoutBtn) {
  margin-top: 4px !important;
}

.nav-flyout__list button:is(#accountFlyoutSettingsBtn, #accountFlyoutHelpBtn, #accountFlyoutLogoutBtn)::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -3px !important;
  border-top: 1px solid var(--ds-line) !important;
  pointer-events: none !important;
}

.nav-flyout--points {
  padding: 10px !important;
}

.nav-flyout--points .nav-flyout__deal {
  padding: 11px !important;
}

.nav-flyout--points .nav-flyout__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.nav-flyout--points .nav-flyout__primary,
.nav-flyout--points .nav-flyout__plain {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 1220px) {
  .nav-rail__footer-menu > .nav-flyout {
    display: grid !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    width: 224px !important;
    min-width: 0 !important;
  }
}

body.is-logout-confirm-open {
  overflow: hidden !important;
}

.logout-confirm-modal[hidden] {
  display: none !important;
}

.logout-confirm-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 620 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}

.logout-confirm-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: blur(7px) !important;
  cursor: pointer !important;
}

.logout-confirm-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 18px !important;
  width: min(390px, calc(100vw - 32px)) !important;
  padding: 22px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.20) !important;
}

.logout-confirm-modal__head {
  display: grid !important;
  gap: 7px !important;
  padding-right: 32px !important;
}

.logout-confirm-modal__head span {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: 0.08em !important;
}

.logout-confirm-modal__head strong {
  color: var(--ds-text) !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.logout-confirm-modal__head p {
  margin: 0 !important;
  color: var(--ds-text-soft) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.logout-confirm-modal__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.logout-confirm-modal__actions button,
.logout-confirm-modal__close {
  font: inherit !important;
  cursor: pointer !important;
}

.logout-confirm-modal__actions button {
  min-height: 36px !important;
  border-radius: 999px !important;
  padding: 0 15px !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

#logoutConfirmCancel {
  border: 1px solid var(--ds-line) !important;
  background: #ffffff !important;
  color: var(--ds-text) !important;
}

#logoutConfirmCancel:hover {
  background: var(--ds-hover) !important;
}

#logoutConfirmSubmit {
  border: 1px solid #111827 !important;
  background: #111827 !important;
  color: #ffffff !important;
}

#logoutConfirmSubmit:hover {
  background: #0f172a !important;
}

.logout-confirm-modal__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ds-text-muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.logout-confirm-modal__close:hover {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
}

/* Final membership polish: stronger offer signal without changing other tool surfaces. */
.nav-rail__footer-menu--points > .nav-rail__points {
  overflow: hidden !important;
  min-height: 58px !important;
  padding: 10px 12px 10px 14px !important;
  border-color: rgba(183, 121, 31, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 230, 0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 20px rgba(16, 24, 40, 0.05) !important;
}

.nav-rail__footer-menu--points > .nav-rail__points::after {
  z-index: 2 !important;
}

.nav-rail__footer-menu--points > .nav-rail__points::before {
  background: var(--ds-warning) !important;
  opacity: 0.86 !important;
}

.nav-rail__footer-menu--points > .nav-rail__points span {
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.nav-rail__footer-menu--points > .nav-rail__points strong {
  color: #1f3a8a !important;
  font-size: 19px !important;
  font-weight: 820 !important;
}

.nav-rail__footer-menu--points > .nav-rail__points small {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
  width: fit-content !important;
  max-width: calc(100% - 16px) !important;
  min-height: 18px !important;
  margin-top: 3px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(183, 121, 31, 0.20) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255, 247, 230, 0.92) !important;
  color: var(--ds-warning) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
}

.nav-rail__footer-menu--points:hover > .nav-rail__points,
.nav-rail__footer-menu--points.is-open > .nav-rail__points,
.nav-rail__footer-menu--points:focus-within > .nav-rail__points {
  border-color: rgba(183, 121, 31, 0.38) !important;
  background: #ffffff !important;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.10) !important;
}

.nav-flyout--points {
  width: 232px !important;
  padding: 10px !important;
  gap: 9px !important;
}

.nav-flyout--points .points-flyout__hero {
  gap: 7px !important;
  padding: 12px !important;
  border-color: rgba(183, 121, 31, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 230, 0.76)) !important;
}

.nav-flyout--points .points-flyout__hero span:first-child {
  color: var(--ds-warning) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

.nav-flyout--points .points-flyout__hero strong {
  color: var(--ds-text) !important;
  font-size: 15px !important;
  line-height: 20px !important;
}

.points-flyout__strip,
.member-settings-hero__tags,
.member-recharge-modal__assurance {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.points-flyout__strip span,
.member-settings-hero__tags span,
.member-recharge-modal__assurance span,
.member-plan-card__bonus {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: #ffffff !important;
  color: var(--ds-text-soft) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.points-flyout__strip span:first-child,
.member-plan-card__bonus {
  border-color: rgba(183, 121, 31, 0.22) !important;
  background: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
}

.points-flyout__meter {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 10px !important;
  background: var(--ds-surface-soft) !important;
}

.points-flyout__meter span,
.points-flyout__meter strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.points-flyout__meter span {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
}

.points-flyout__meter strong {
  color: var(--ds-text) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
}

.nav-flyout--points .nav-flyout__stats > div {
  min-height: 48px !important;
  padding: 9px 10px !important;
}

.nav-flyout--points .nav-flyout__stats strong {
  color: #1f3a8a !important;
  font-size: 16px !important;
}

.nav-flyout--points .nav-flyout__primary {
  min-height: 38px !important;
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%),
    linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  box-shadow: 0 10px 22px var(--ds-accent-shadow) !important;
}

.nav-flyout--points .nav-flyout__primary:active,
.nav-flyout--points .nav-flyout__plain:active,
.member-plan-card button:active,
.member-recharge-modal__head button:active {
  transform: translateY(1px) scale(0.986) !important;
}

.nav-flyout--points .nav-flyout__primary:focus-visible,
.nav-flyout--points .nav-flyout__plain:focus-visible,
.member-plan-card button:focus-visible,
.member-recharge-modal__head button:focus-visible {
  outline: none !important;
  border-color: var(--ds-line-accent) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

.member-settings-hero {
  align-items: center !important;
  border-color: rgba(183, 121, 31, 0.20) !important;
  background:
    linear-gradient(180deg, #ffffff, rgba(255, 247, 230, 0.50)) !important;
}

.member-settings-hero strong {
  color: #1f3a8a !important;
}

.member-settings-hero__tags {
  margin-top: 10px !important;
}

.member-settings-hero .primary-button {
  min-width: 122px !important;
  white-space: nowrap !important;
}

.member-recharge-modal__panel {
  width: min(900px, calc(100vw - 32px)) !important;
  gap: 12px !important;
  padding: 18px !important;
}

.member-recharge-modal__head {
  align-items: center !important;
}

.member-recharge-modal__head button {
  min-width: 52px !important;
  white-space: nowrap !important;
}

/* Self repair: keep "My templates" sidebar sublists compact and scannable. */
.nav-rail__menus {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 4px !important;
  scrollbar-width: thin !important;
}

.nav-rail__spacer {
  flex: 0 0 0 !important;
  min-height: 0 !important;
}

.nav-rail__footer {
  margin-top: 0 !important;
}

.nav-rail__group[data-nav-section="mine"] {
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

.nav-rail__group[data-nav-section="mine"] .nav-rail__items {
  gap: 2px !important;
}

.nav-rail__group[data-nav-section="mine"] .nav-rail__item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.nav-rail__group[data-nav-section="mine"] .nav-rail__item > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-rail__group[data-nav-section="mine"] .nav-rail__item-count {
  min-width: 20px !important;
  max-width: 34px !important;
  justify-self: end !important;
  overflow: hidden !important;
  padding: 0 6px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-rail__common-saved {
  display: grid !important;
  gap: 2px !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
}

.nav-rail__common-saved[hidden] {
  display: none !important;
}

.nav-rail__saved-template-item {
  min-width: 0 !important;
  text-align: left !important;
}

.nav-rail__saved-template-item > span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-rail__submenu[data-library-submenu] {
  gap: 1px !important;
  max-height: 150px !important;
  margin: -1px 0 6px 8px !important;
  padding: 2px 0 2px 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

.nav-rail__submenu[data-library-submenu] .nav-rail__submenu-item {
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
}

.nav-rail__submenu[data-library-submenu] .nav-rail__submenu-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 28px !important;
}

.nav-rail__submenu[data-library-submenu] .nav-rail__submenu-meta {
  display: none !important;
}

.nav-rail__submenu[data-library-submenu] .nav-rail__submenu-item.is-active {
  background: var(--ds-hover) !important;
  color: var(--ds-text) !important;
  box-shadow: inset 2px 0 0 var(--ds-line-strong) !important;
}

.nav-rail__submenu[data-library-submenu] .nav-rail__submenu-more {
  min-height: 26px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  text-align: left !important;
}

.nav-rail__template-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.nav-rail__template-row .nav-rail__submenu-item,
.nav-rail__template-row .nav-rail__saved-template-item {
  min-width: 0 !important;
}

.nav-rail__template-row--quick .nav-rail__saved-template-item {
  min-height: 32px !important;
  padding-right: 4px !important;
}

.nav-rail__template-delete {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--ds-text-subtle) !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  transition:
    background-color var(--ds-duration) var(--ds-ease-standard),
    color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.nav-rail__template-delete:hover,
.nav-rail__template-delete:focus-visible,
.nav-rail__template-delete.is-confirming {
  outline: none !important;
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

.nav-rail__template-delete:focus-visible {
  box-shadow: var(--ds-shadow-focus) !important;
}

.nav-rail__template-delete:active {
  transform: translateY(1px) scale(0.94) !important;
}

.nav-rail__template-delete.is-confirming {
  box-shadow: inset 0 0 0 1px rgba(217, 45, 32, 0.18) !important;
}

.template-library-row__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content !important;
}

.template-library-row__delete {
  border-color: rgba(217, 45, 32, 0.24) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-danger) !important;
}

.template-library-row__delete:hover,
.template-library-row__delete:focus-visible {
  border-color: rgba(217, 45, 32, 0.36) !important;
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

/* Self review: compact the left rail rhythm without changing navigation behavior. */
.nav-rail__menus {
  align-content: start !important;
  gap: 0 !important;
  grid-auto-rows: max-content !important;
  margin-top: 6px !important;
  padding: 0 6px 4px !important;
}

.nav-rail__group {
  gap: 3px !important;
  padding-bottom: 8px !important;
  margin-bottom: 7px !important;
  border-bottom-color: rgba(226, 229, 235, 0.82) !important;
}

.nav-rail__group.is-collapsed,
.nav-rail__group--home {
  padding-bottom: 7px !important;
  margin-bottom: 7px !important;
}

.nav-rail__section-toggle,
.nav-rail .nav-rail__item {
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  line-height: 30px !important;
}

.nav-rail__section-toggle {
  grid-template-columns: minmax(0, 1fr) 12px !important;
}

.nav-rail__items {
  gap: 2px !important;
  padding: 0 !important;
}

.nav-rail__group--rich {
  gap: 2px !important;
}

.nav-rail__group--rich .nav-rail__submenu--static {
  gap: 1px !important;
  margin: -1px 0 4px 8px !important;
  padding: 1px 0 1px 8px !important;
}

.nav-rail__group--rich .nav-rail__submenu-item {
  min-height: 30px !important;
  padding: 3px 7px !important;
}

.nav-rail__section-toggle[aria-expanded="true"],
.nav-rail__section-toggle.is-template-hub-active {
  min-height: 30px !important;
}

.member-recharge-modal__head strong {
  font-size: 24px !important;
  line-height: 30px !important;
}

.member-recharge-modal__promo {
  position: relative !important;
  overflow: hidden !important;
  align-items: center !important;
  min-height: 154px !important;
  padding: 20px !important;
  border-color: rgba(183, 121, 31, 0.24) !important;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 36%, rgba(255, 255, 255, 0.48) 64%, rgba(255, 255, 255, 0.12) 100%),
    url("assets/membership/member-recharge-banner.png") !important;
  background-position: center right !important;
  background-size: cover !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.member-recharge-modal__promo > div,
.member-recharge-modal__badge {
  position: relative !important;
  z-index: 1 !important;
}

.member-recharge-modal__promo > div {
  width: min(560px, 72%) !important;
}

.member-recharge-modal__promo strong {
  font-size: clamp(21px, 2.1vw, 27px) !important;
  line-height: 1.24 !important;
}

.member-recharge-modal__badge {
  border-color: rgba(183, 121, 31, 0.22) !important;
  background: #ffffff !important;
  color: var(--ds-warning) !important;
  font-weight: 800 !important;
}

.member-recharge-modal__quick {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.member-recharge-modal__quick > div {
  display: grid !important;
  gap: 4px !important;
  min-height: 58px !important;
  padding: 11px 13px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-panel) !important;
}

.member-recharge-modal__quick span {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

.member-recharge-modal__quick strong {
  color: var(--ds-text) !important;
  font-size: 18px !important;
  font-weight: 820 !important;
  line-height: 23px !important;
}

.member-recharge-modal__recommend {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  border-radius: 8px !important;
  background: var(--ds-accent-softer) !important;
}

.member-recharge-modal__recommend div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.member-recharge-modal__recommend span {
  color: var(--ds-accent-pressed) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.member-recharge-modal__recommend strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.member-recharge-modal__recommend p {
  max-width: 360px !important;
  margin: 0 !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.member-plan-grid {
  gap: 12px !important;
}

.member-plan-card {
  position: relative !important;
  align-content: start !important;
  min-height: 178px !important;
  gap: 7px !important;
  padding: 13px !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  transition:
    border-color var(--ds-duration) var(--ds-ease-standard),
    box-shadow var(--ds-duration) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

.member-plan-card:hover {
  border-color: var(--ds-line-strong) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-1px) !important;
}

.member-plan-card.is-featured {
  border-color: rgba(37, 99, 235, 0.34) !important;
  background:
    linear-gradient(180deg, #ffffff, var(--ds-accent-softer)) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08) !important;
}

.member-plan-card.is-featured::after {
  content: "推荐" !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-accent-soft) !important;
  color: var(--ds-accent-pressed) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
}

.member-plan-card > span {
  padding-right: 54px !important;
  color: var(--ds-text-muted) !important;
}

.member-plan-card > strong {
  color: var(--ds-text) !important;
  font-size: 26px !important;
  line-height: 31px !important;
}

.member-plan-card__value {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 29px !important;
  padding: 5px 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-surface-soft) !important;
}

.member-plan-card__rate {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 24px !important;
  padding: 0 2px !important;
}

.member-plan-card__rate span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.member-plan-card__rate strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(183, 121, 31, 0.20) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.member-plan-card:first-child .member-plan-card__rate strong {
  border-color: var(--ds-line) !important;
  background: #ffffff !important;
  color: var(--ds-text-muted) !important;
}

.member-plan-card__value span {
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

.member-plan-card__value strong {
  color: #1f3a8a !important;
  font-size: 18px !important;
  font-weight: 840 !important;
  line-height: 22px !important;
}

.member-plan-card.is-featured .member-plan-card__value {
  border-color: rgba(37, 99, 235, 0.18) !important;
  background: #ffffff !important;
}

.member-plan-card p {
  min-height: 0 !important;
  line-height: 17px !important;
}

.member-plan-card__bonus {
  width: fit-content !important;
  min-height: 20px !important;
  margin-top: 0 !important;
}

.member-plan-card button {
  width: 100% !important;
  margin-top: auto !important;
}

.member-plan-card.is-featured button {
  box-shadow: 0 10px 22px var(--ds-accent-shadow) !important;
}

.member-recharge-modal__assurance {
  gap: 5px !important;
  padding: 0 !important;
}

.member-recharge-modal__assurance span {
  position: relative !important;
  min-height: 20px !important;
  padding-left: 18px !important;
  border-color: rgba(15, 143, 110, 0.18) !important;
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
}

.member-recharge-modal__assurance span::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: var(--ds-success) !important;
  transform: translateY(-50%) !important;
}

.member-recharge-modal__notes > div {
  background: var(--ds-surface-soft) !important;
  gap: 3px !important;
  padding: 10px !important;
}

.member-recharge-modal__notes p {
  line-height: 16px !important;
}

.member-recharge-modal__notes {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px !important;
  background: var(--ds-surface-soft) !important;
}

.member-recharge-modal__notes span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.member-recharge-modal__notes strong {
  color: var(--ds-text) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .member-settings-hero {
    align-items: stretch !important;
  }

  .member-settings-hero .primary-button {
    width: 100% !important;
  }

  .member-plan-grid,
  .member-recharge-modal__notes {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .member-recharge-modal__quick {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .member-recharge-modal__recommend {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .member-recharge-modal__notes {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .member-recharge-modal__notes span {
    align-items: flex-start !important;
  }

  .member-recharge-modal__promo {
    align-items: stretch !important;
    min-height: 180px !important;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.90) 56%, rgba(255, 255, 255, 0.68) 100%),
      url("assets/membership/member-recharge-banner.png") !important;
    background-position: center right !important;
  }

  .member-recharge-modal__promo > div {
    width: 100% !important;
  }

  .member-recharge-modal__badge {
    width: fit-content !important;
  }
}

@media (max-width: 520px) {
  .member-recharge-modal {
    padding: 10px !important;
  }

  .member-recharge-modal__panel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100svh - 20px) !important;
    padding: 14px !important;
  }

  .member-recharge-modal__head {
    gap: 10px !important;
  }

  .member-recharge-modal__head strong {
    font-size: 21px !important;
    line-height: 27px !important;
  }

  .member-recharge-modal__promo,
  .member-plan-card,
  .member-recharge-modal__quick > div {
    padding: 13px !important;
  }

  .member-recharge-modal__quick > div {
    min-height: 54px !important;
    padding: 9px 8px !important;
  }

  .member-recharge-modal__quick strong {
    font-size: 16px !important;
    line-height: 20px !important;
  }

  .member-recharge-modal__recommend {
    padding: 10px !important;
  }
}

/* Membership v2 compaction: clearer purchase math and less panel height. */
.nav-flyout--points {
  width: 224px !important;
  gap: 8px !important;
  padding: 9px !important;
}

.nav-flyout--points .points-flyout__hero {
  padding: 11px !important;
}

.nav-flyout--points .points-flyout__hero p {
  line-height: 16px !important;
}

.points-flyout__strip span {
  min-height: 20px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
}

.points-flyout__meter {
  min-height: 30px !important;
  padding: 6px 9px !important;
}

.nav-flyout--points .nav-flyout__stats > div {
  min-height: 44px !important;
  padding: 8px 9px !important;
}

.member-recharge-modal__panel {
  width: min(880px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 24px) !important;
  gap: 10px !important;
}

.member-recharge-modal__promo {
  min-height: 124px !important;
  padding: 16px !important;
}

.member-recharge-modal__quick {
  gap: 8px !important;
}

.member-recharge-modal__quick > div {
  min-height: 52px !important;
  padding: 9px 12px !important;
}

.member-plan-grid {
  gap: 10px !important;
}

.member-plan-card {
  min-height: 230px !important;
  padding: 13px !important;
}

.member-plan-card p {
  min-height: 0 !important;
}

@media (max-width: 520px) {
  .member-recharge-modal__promo {
    min-height: 166px !important;
  }

  .member-plan-card {
    min-height: 216px !important;
  }

  .member-recharge-modal__recommend strong {
    white-space: normal !important;
  }
}

/* Image edit modal: compact tool surface for prompt-based image-to-image edits. */
.edit-modal {
  padding: 18px !important;
}

.edit-modal__backdrop {
  background: rgba(15, 23, 42, 0.30) !important;
  backdrop-filter: blur(10px) saturate(0.9) !important;
}

.edit-modal__panel {
  width: min(960px, calc(100vw - 36px)) !important;
  height: auto !important;
  max-height: calc(100svh - 36px) !important;
  gap: 12px !important;
  padding: 16px 18px 14px !important;
  border-radius: 14px !important;
  background: var(--ds-surface) !important;
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.18) !important;
}

.edit-modal__head {
  align-items: center !important;
  min-height: 36px !important;
  padding: 0 0 10px !important;
  border-bottom-color: var(--ds-line) !important;
}

.edit-modal__head > div:first-child {
  gap: 1px !important;
}

#editModalTitle,
.edit-modal__head strong {
  font-size: 15px !important;
  line-height: 20px !important;
}

.edit-modal__head span {
  color: var(--ds-text-soft) !important;
}

.edit-modal__actions {
  gap: 6px !important;
}

.edit-modal__actions button,
#editClearMask,
#editModalClose {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-color: var(--ds-line) !important;
  background: var(--ds-surface-soft) !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
  line-height: 28px !important;
}

.edit-modal__actions button:hover:not(:disabled),
#editClearMask:hover:not(:disabled),
#editModalClose:hover:not(:disabled) {
  border-color: var(--ds-line-strong) !important;
  background: var(--ds-feedback-hover) !important;
  color: var(--ds-text) !important;
}

.edit-modal__body {
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
}

.edit-modal__stage {
  width: min(100%, calc(100svh - 214px), 720px) !important;
  border-color: var(--ds-line) !important;
  border-radius: 12px !important;
  background: var(--ds-surface-soft) !important;
  box-shadow: none !important;
}

.edit-modal__stage img,
#editMaskCanvas {
  border-radius: 11px !important;
}

.edit-modal__footer {
  grid-template-columns: 132px minmax(0, 1fr) 118px !important;
  gap: 8px !important;
  padding: 8px !important;
  border-color: var(--ds-line) !important;
  border-radius: 12px !important;
  background: var(--ds-surface-soft) !important;
}

.edit-brush {
  gap: 8px !important;
  min-height: 62px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 10px !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-soft) !important;
  font-size: 12px !important;
}

.edit-brush span {
  line-height: 14px !important;
}

.edit-brush input[type="range"] {
  width: 100% !important;
  height: 4px !important;
  appearance: none !important;
  border-radius: 999px !important;
  background: var(--ds-line-strong) !important;
  accent-color: var(--ds-accent) !important;
}

.edit-brush input[type="range"]::-webkit-slider-thumb {
  width: 14px !important;
  height: 14px !important;
  appearance: none !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: var(--ds-accent) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.24) !important;
}

.edit-brush input[type="range"]::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: var(--ds-accent) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.24) !important;
}

#editPromptInput,
.edit-modal textarea {
  min-height: 62px !important;
  padding: 10px 12px !important;
  border-color: var(--ds-line) !important;
  border-radius: 10px !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  line-height: 19px !important;
}

#editPromptInput:hover,
.edit-modal textarea:hover {
  border-color: var(--ds-line-strong) !important;
}

#editPromptInput:focus,
.edit-modal textarea:focus {
  border-color: var(--ds-line-accent) !important;
  background: var(--ds-surface) !important;
  box-shadow: var(--ds-shadow-focus) !important;
}

#editSubmitBtn {
  min-height: 62px !important;
  padding: 0 13px !important;
  border-color: var(--ds-accent) !important;
  border-radius: 10px !important;
  background: var(--ds-accent) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

#editSubmitBtn:hover:not(:disabled) {
  border-color: var(--ds-accent-strong) !important;
  background: var(--ds-accent-strong) !important;
  color: #ffffff !important;
}

#editSubmitBtn:active:not(:disabled) {
  border-color: var(--ds-accent-pressed) !important;
  background: var(--ds-accent-pressed) !important;
}

#editSubmitBtn:disabled {
  border-color: var(--ds-line) !important;
  background: var(--ds-surface-soft) !important;
  color: var(--ds-text-subtle) !important;
}

.edit-modal__status {
  justify-self: start !important;
  max-width: 100% !important;
  padding: 0 1px !important;
  color: var(--ds-text-muted) !important;
  text-align: left !important;
  line-height: 16px !important;
}

@media (max-width: 760px) {
  .edit-modal {
    padding: 10px !important;
  }

  .edit-modal__panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100svh - 20px) !important;
    padding: 13px !important;
  }

  .edit-modal__head {
    align-items: stretch !important;
  }

  .edit-modal__footer {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .edit-brush {
    min-height: 48px !important;
  }

  #editSubmitBtn {
    min-height: 42px !important;
  }
}

/* Image edit modal v2: GPT-like full-screen editing canvas. */
.edit-modal {
  place-items: stretch !important;
  padding: 0 !important;
  background: var(--ds-surface) !important;
}

.edit-modal__backdrop {
  display: none !important;
}

.edit-modal__panel {
  width: 100vw !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: none !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-surface) !important;
  box-shadow: none !important;
}

.edit-modal__head {
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.edit-modal__head > div:first-child {
  display: none !important;
}

#editModalTitle,
.edit-modal__head strong {
  font-size: 14px !important;
  line-height: 18px !important;
}

.edit-modal__head span {
  max-width: 560px !important;
  overflow: hidden !important;
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.edit-modal__actions {
  gap: 7px !important;
}

.edit-modal__actions button,
#editClearMask,
#editModalClose {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: var(--ds-surface) !important;
  font-size: 12px !important;
  line-height: 30px !important;
}

.edit-modal__body {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding: 32px 24px 112px !important;
  background: var(--ds-surface) !important;
}

.edit-modal__stage {
  align-self: center !important;
  justify-self: center !important;
  width: min(calc(100vw - 96px), calc(100svh - 198px), 820px) !important;
  max-width: 100% !important;
  max-height: calc(100svh - 198px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.edit-modal__stage img {
  border-radius: 0 !important;
  object-fit: contain !important;
}

#editMaskCanvas {
  border-radius: 0 !important;
}

.edit-modal__footer {
  position: absolute !important;
  left: 50% !important;
  bottom: 24px !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  width: min(760px, calc(100vw - 40px)) !important;
  min-height: 54px !important;
  gap: 8px !important;
  padding: 7px 8px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
  transform: translateX(-50%) !important;
}

.edit-brush {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 8px 0 12px !important;
  border: 0 !important;
  border-right: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
}

.edit-brush span {
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
  white-space: nowrap !important;
}

.edit-brush input[type="range"] {
  min-width: 0 !important;
}

#editPromptInput,
.edit-modal textarea {
  min-height: 40px !important;
  height: 40px !important;
  padding: 10px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 20px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}

#editPromptInput::-webkit-scrollbar {
  display: none !important;
}

#editPromptInput:hover,
.edit-modal textarea:hover,
#editPromptInput:focus,
.edit-modal textarea:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#editSubmitBtn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#editSubmitBtn::before {
  content: "↑" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 19px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

#editSubmitBtn:hover:not(:disabled) {
  background: #111827 !important;
}

#editSubmitBtn:active:not(:disabled) {
  background: #020617 !important;
  transform: scale(0.96) !important;
}

#editSubmitBtn:disabled {
  background: var(--ds-line-strong) !important;
  color: var(--ds-text-subtle) !important;
}

.edit-modal__status {
  position: absolute !important;
  left: 50% !important;
  bottom: 5px !important;
  z-index: 4 !important;
  width: min(720px, calc(100vw - 56px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 760px) {
  .edit-modal__panel {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .edit-modal__head {
    display: flex !important;
    min-height: 40px !important;
    padding: 5px 8px !important;
  }

  .edit-modal__actions {
    justify-content: flex-start !important;
  }

  .edit-modal__body {
    padding: 16px 12px 162px !important;
  }

  .edit-modal__stage {
    width: min(calc(100vw - 24px), calc(100svh - 230px), 680px) !important;
    max-height: calc(100svh - 230px) !important;
  }

  .edit-modal__footer {
    bottom: 28px !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    width: min(520px, calc(100vw - 20px)) !important;
    border-radius: 22px !important;
  }

  .edit-brush {
    grid-column: 1 / -1 !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ds-line) !important;
  }

  #editPromptInput,
  .edit-modal textarea {
    min-height: 40px !important;
  }

  .edit-modal__status {
    bottom: 9px !important;
  }
}

/* Modal transparency: keep the main menu visible and close when clicking beside the image/tooling. */
.edit-modal {
  background: transparent !important;
}

.edit-modal__backdrop {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  border: 0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 220px,
      rgba(255, 255, 255, 0.95) 220px,
      rgba(255, 255, 255, 0.95) 100%
    ) !important;
  backdrop-filter: none !important;
}

.edit-modal__panel {
  pointer-events: none !important;
  background: transparent !important;
}

.edit-modal__head {
  pointer-events: none !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.edit-modal__actions,
.edit-modal__stage,
.edit-modal__footer {
  pointer-events: auto !important;
}

.edit-modal__actions button {
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(12px) saturate(0.94) !important;
}

.edit-modal__body {
  pointer-events: none !important;
  background: transparent !important;
}

.edit-modal__status {
  pointer-events: none !important;
}

.preview-modal__panel {
  pointer-events: none !important;
}

.preview-modal__head {
  pointer-events: none !important;
}

.preview-modal__actions,
.preview-modal__image-wrap img {
  pointer-events: auto !important;
}

/* Left rail section headers should not look selected just because they are expanded. */
.nav-rail__section-toggle,
.nav-rail__section-toggle[aria-expanded="true"],
.nav-rail__section-toggle.is-template-hub-active,
.nav-rail__group--rich .nav-rail__section-toggle[aria-expanded="true"],
.nav-rail__group--rich .nav-rail__section-toggle[aria-expanded="true"]:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.nav-rail__section-toggle:hover {
  background: rgba(229, 233, 240, 0.78) !important;
}

.nav-rail__section-toggle:active {
  background: rgba(213, 219, 229, 0.92) !important;
}

.nav-rail__section-toggle--link {
  grid-template-columns: minmax(0, 1fr) !important;
}

.nav-rail__section-toggle--link .nav-rail__chevron,
.nav-rail__section-toggle .nav-rail__chevron[hidden] {
  display: none !important;
}

.preview-modal__image-wrap {
  pointer-events: none !important;
}

.preview-modal__backdrop {
  background:
    linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.08) 0,
      rgba(15, 23, 42, 0.08) 220px,
      rgba(15, 23, 42, 0.28) 220px,
      rgba(15, 23, 42, 0.28) 100%
    ) !important;
  backdrop-filter: blur(6px) saturate(0.92) !important;
}

/* Left rail home icon: a small neutral house before the first navigation label. */
#navHomeBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: var(--ds-font-weight-medium) !important;
  letter-spacing: 0 !important;
  line-height: 18px !important;
}

.nav-rail__item-label--home {
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: var(--ds-font-weight-medium) !important;
  letter-spacing: 0 !important;
  line-height: 18px !important;
}

.nav-rail__item-icon {
  width: 15px !important;
  height: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 15px !important;
  color: currentColor !important;
}

.nav-rail__item-icon svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}