:root {
  --brand: #7a6af8;
  --brand-2: #fb5ac8;
  --brand-3: #5f7df4;
  --ink: #101321;
  --muted: #7b8192;
  --line: #edf0f6;
  --soft: #f3f6ff;
  --soft-2: #eef3fb;
  --panel: #ffffff;
  --danger: #f45b69;
  --success: #16b978;
  --shadow: 0 18px 50px rgba(44, 55, 89, 0.12);
  --radius: 18px;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}

.ordinary-blueprint-sharpen .enhance-compare-stage:not(.is-design-locked) .enhance-image {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Production ordinary-workbench empty-state and non-cropping image layer, 2026-07-19 */
.ordinary-workbench-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  min-height: min(52vh, 520px);
  height: 100%;
  padding: 16px;
  border: 1px solid rgba(220, 227, 239, 0.92);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(112, 86, 242, 0.10), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(233, 77, 175, 0.10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ordinary-workbench-empty-card {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  border: 1px dashed #cbd7e9;
  border-radius: 12px;
  background:
    linear-gradient(45deg, rgba(229, 235, 245, 0.62) 25%, transparent 25% 50%, rgba(229, 235, 245, 0.62) 50% 75%, transparent 75%) 0 0 / 22px 22px,
    rgba(255, 255, 255, 0.72);
}

.ordinary-workbench-empty-card.is-result {
  background:
    linear-gradient(45deg, rgba(226, 232, 242, 0.56) 25%, transparent 25% 50%, rgba(226, 232, 242, 0.56) 50% 75%, transparent 75%) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(248, 250, 255, 0.94), rgba(240, 245, 252, 0.94));
}

.ordinary-pane-empty {
  position: relative !important;
  z-index: 5;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(360px, 88%);
  margin: auto;
  padding: 28px 22px;
  color: #687287;
  text-align: center;
  pointer-events: auto;
}

.ordinary-pane-empty i {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border: 1px solid #dce4f1;
  border-radius: 18px;
  color: #7257ec;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.96), transparent 46%),
    linear-gradient(135deg, #f8f6ff, #eef5ff);
  box-shadow: 0 14px 30px rgba(68, 82, 120, 0.12);
}

.ordinary-pane-empty i::before {
  color: currentColor;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  content: "＋";
}

.ordinary-pane-empty-result i {
  color: #e24eaa;
}

.ordinary-pane-empty-result i::before {
  content: "✓";
}

.ordinary-pane-empty strong {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1f2937 !important;
  background: transparent !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}

.ordinary-pane-empty span {
  position: static !important;
  display: block !important;
  height: auto !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  color: #788499 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ordinary-empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.ordinary-empty-actions button,
.ordinary-empty-upload-btn,
.ordinary-empty-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.ordinary-empty-upload-btn {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #7056f2, #e94daf);
  box-shadow: 0 10px 22px rgba(113, 86, 242, 0.22);
}

.ordinary-empty-guide-btn {
  border: 1px solid #dbe3f0;
  color: #59667c;
  background: rgba(255, 255, 255, 0.82);
}

.enhance-preview-workspace.is-empty,
.matting-preview-workspace.is-empty,
.inpaint-blueprint-preview.is-empty,
.watermark-preview-shell.is-empty {
  display: grid !important;
  min-height: min(52vh, 540px);
}

.enhance-image.is-empty-pane,
.matting-canvas.is-empty-pane,
.inpaint-canvas.is-empty-pane,
.image-task-pane.is-empty,
.image-task-pane.is-missing-source {
  display: grid !important;
  place-items: center !important;
  background-image:
    linear-gradient(45deg, rgba(226, 233, 243, 0.72) 25%, transparent 25% 50%, rgba(226, 233, 243, 0.72) 50% 75%, transparent 75%) !important;
  background-color: #f8fbff !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: 22px 22px !important;
}

.enhance-image,
.inpaint-canvas,
.matting-canvas.before,
.image-task-pane,
.ordinary-upload-card.has-upload .ordinary-upload-thumb,
.matting-upload-card.has-upload .matting-upload-thumb,
.product-matting-source span,
.enhance-upload-thumb,
.inpaint-upload-card > span,
.id-photo-upload-preview,
.tool-generation-thumb,
.enhance-record-thumb,
.inpaint-record-item > span,
.watermark-task-thumb,
.sharpen-task-name span,
.anime-split-image,
.anime-line-art-image,
.anime-result-grid span {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.enhance-preview-amplify .enhance-image,
.color-enhance-stage .enhance-image,
.enhance-preview-colorize .colorize-compare-stage:not(.is-design-locked) .enhance-image {
  background-size: contain !important;
}

.enhance-compare-stage.is-source-waiting {
  display: block !important;
}

.enhance-compare-stage.is-source-waiting .enhance-image.before,
.color-enhance-stage.is-source-waiting .enhance-image.before,
.colorize-compare-stage.is-source-waiting .enhance-image.before {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  clip-path: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.enhance-compare-stage.is-source-waiting .enhance-image.after,
.color-enhance-stage.is-source-waiting .enhance-image.after,
.colorize-compare-stage.is-source-waiting .enhance-image.after,
.enhance-compare-stage.is-source-waiting .enhance-compare-handle,
.color-enhance-stage.is-source-waiting .enhance-compare-handle,
.colorize-compare-stage.is-source-waiting .enhance-compare-handle {
  display: none !important;
}

.enhance-source-ready-note {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 6;
  display: grid;
  gap: 4px;
  width: min(390px, calc(100% - 48px));
  padding: 14px 16px;
  border: 1px solid rgba(124, 92, 246, 0.18);
  border-radius: 16px;
  color: #4c5870;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  text-align: center;
  transform: translateX(-50%);
}

.enhance-source-ready-note strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.enhance-source-ready-note small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.ordinary-tool-pdf-add-water .preview-photo,
.ordinary-tool-pdf-add-water .watermark-live-result,
.watermark-checker .preview-photo {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.tool-generation-thumb.is-empty-thumb,
.enhance-record-thumb.is-empty-thumb,
.inpaint-record-item > span.is-empty-thumb,
.watermark-task-thumb.is-empty-thumb,
.sharpen-task-name span:empty {
  background-image:
    linear-gradient(45deg, rgba(226, 233, 243, 0.70) 25%, transparent 25% 50%, rgba(226, 233, 243, 0.70) 50% 75%, transparent 75%) !important;
  background-color: #f7faff !important;
  background-size: 16px 16px !important;
}

.tool-generation-thumb,
.generation-recent-thumb,
.history-item i,
.commerce-record-item > span,
.watermark-task-thumb,
.sharpen-task-name span,
.matting-blueprint-record-card,
.id-photo-history-thumb,
.matting-history-modal-list button > span,
.id-photo-history-modal-list button > span,
.enhance-history-modal-list button > span,
.inpaint-history-modal-list button > span,
.montage-history-card > span {
  position: relative;
  overflow: hidden;
}

.record-progress-overlay {
  --record-progress-title: #1f2a44;
  --record-progress-muted: #6b7893;
  --record-progress-track: rgba(124, 92, 246, 0.16);
  --record-progress-fill: linear-gradient(90deg, #7c5cff, #f153bd);
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  grid-row: auto !important;
  grid-column: auto !important;
  place-items: center;
  gap: 4px;
  width: auto !important;
  height: auto !important;
  padding: 8px;
  color: var(--record-progress-title);
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 92, 246, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(242, 246, 255, 0.95)),
    rgba(244, 247, 253, 0.92) !important;
  background-size: auto !important;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 246, 0.16);
  text-align: center;
  backdrop-filter: blur(10px);
}

.record-progress-overlay b {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--record-progress-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-progress-overlay i {
  display: block;
  width: min(74px, 88%);
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--record-progress-track);
}

.record-progress-overlay i em {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--record-progress-fill);
}

.record-progress-overlay:not(.is-failed):not(.is-missing-result) i em::after,
.ordinary-inline-progress:not(.is-failed):not(.is-missing-result) > i em::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  animation: mifan-task-progress-sheen 1.25s ease-in-out infinite;
}

.record-progress-overlay small {
  color: var(--record-progress-muted);
  font-size: 10px;
  font-weight: 900;
}

.record-progress-overlay.is-processing {
  --record-progress-title: #24314f;
  --record-progress-muted: #7b86a0;
  --record-progress-track: rgba(124, 92, 246, 0.18);
  --record-progress-fill: linear-gradient(90deg, #7d5cff, #e954c8);
}

.record-progress-overlay.is-waiting {
  --record-progress-title: #34415f;
  --record-progress-muted: #7b86a0;
  --record-progress-track: rgba(99, 102, 241, 0.14);
  --record-progress-fill: linear-gradient(90deg, #8b95ff, #b46cff);
}

.record-progress-overlay.is-failed,
.record-progress-overlay.is-missing-result {
  --record-progress-title: #ffffff;
  --record-progress-muted: rgba(255, 255, 255, 0.86);
  --record-progress-track: rgba(255, 255, 255, 0.24);
  --record-progress-fill: linear-gradient(90deg, #ff6b6b, #ffb86b);
  background:
    linear-gradient(180deg, rgba(127, 29, 29, 0.76), rgba(69, 10, 10, 0.86)),
    rgba(239, 68, 68, 0.28) !important;
}

.record-progress-overlay.is-failed i em,
.record-progress-overlay.is-missing-result i em {
  background: var(--record-progress-fill);
}

.ordinary-inline-progress {
  display: grid;
  gap: 7px;
  width: min(320px, 100%);
  margin: 10px auto 0;
  padding: 10px 12px;
  border: 1px solid rgba(124, 92, 246, 0.20);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
}

.ordinary-inline-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.ordinary-inline-progress > div span {
  color: #7654f2;
  white-space: nowrap;
}

.ordinary-inline-progress > i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf6;
}

.ordinary-inline-progress > i em {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, #7366f4, #f65dc7);
}

.ordinary-inline-progress > small {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.ordinary-inline-progress.is-failed,
.ordinary-inline-progress.is-missing-result {
  border-color: rgba(239, 68, 68, 0.26);
  background: rgba(255, 247, 247, 0.94);
}

.ordinary-inline-progress.is-failed > div span,
.ordinary-inline-progress.is-missing-result > div span {
  color: #dc2626;
}

.ordinary-inline-progress.is-failed > i em,
.ordinary-inline-progress.is-missing-result > i em {
  background: linear-gradient(90deg, #ff6b6b, #ffb86b);
}

.tool-generation-thumb .record-progress-overlay > b,
.generation-recent-thumb .record-progress-overlay > b,
.history-item i .record-progress-overlay > b,
.enhance-record-thumb .record-progress-overlay > b,
.inpaint-record-item > span .record-progress-overlay > b,
.commerce-record-item > span .record-progress-overlay > b,
.watermark-task-thumb .record-progress-overlay > b,
.sharpen-task-name span .record-progress-overlay > b,
.matting-blueprint-record-card .record-progress-overlay > b,
.id-photo-history-thumb .record-progress-overlay > b,
.matting-history-modal-list button > span .record-progress-overlay > b,
.id-photo-history-modal-list button > span .record-progress-overlay > b,
.enhance-history-modal-list button > span .record-progress-overlay > b,
.inpaint-history-modal-list button > span .record-progress-overlay > b,
.montage-history-card > span .record-progress-overlay > b {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--record-progress-title, #1f2a44) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tool-generation-thumb .record-progress-overlay > i,
.generation-recent-thumb .record-progress-overlay > i,
.history-item i .record-progress-overlay > i,
.enhance-record-thumb .record-progress-overlay > i,
.inpaint-record-item > span .record-progress-overlay > i,
.commerce-record-item > span .record-progress-overlay > i,
.watermark-task-thumb .record-progress-overlay > i,
.sharpen-task-name span .record-progress-overlay > i,
.matting-blueprint-record-card .record-progress-overlay > i,
.id-photo-history-thumb .record-progress-overlay > i,
.matting-history-modal-list button > span .record-progress-overlay > i,
.id-photo-history-modal-list button > span .record-progress-overlay > i,
.enhance-history-modal-list button > span .record-progress-overlay > i,
.inpaint-history-modal-list button > span .record-progress-overlay > i,
.montage-history-card > span .record-progress-overlay > i {
  position: static !important;
  display: block !important;
  width: min(74px, 88%) !important;
  height: 5px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--record-progress-track, rgba(124, 92, 246, 0.16)) !important;
  overflow: hidden !important;
}

.tool-generation-thumb .record-progress-overlay > i > em,
.generation-recent-thumb .record-progress-overlay > i > em,
.history-item i .record-progress-overlay > i > em,
.enhance-record-thumb .record-progress-overlay > i > em,
.inpaint-record-item > span .record-progress-overlay > i > em,
.commerce-record-item > span .record-progress-overlay > i > em,
.watermark-task-thumb .record-progress-overlay > i > em,
.sharpen-task-name span .record-progress-overlay > i > em,
.matting-blueprint-record-card .record-progress-overlay > i > em,
.id-photo-history-thumb .record-progress-overlay > i > em,
.matting-history-modal-list button > span .record-progress-overlay > i > em,
.id-photo-history-modal-list button > span .record-progress-overlay > i > em,
.enhance-history-modal-list button > span .record-progress-overlay > i > em,
.inpaint-history-modal-list button > span .record-progress-overlay > i > em,
.montage-history-card > span .record-progress-overlay > i > em {
  position: relative !important;
  display: block !important;
  width: auto;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.tool-generation-thumb .record-progress-overlay > small,
.generation-recent-thumb .record-progress-overlay > small,
.history-item i .record-progress-overlay > small,
.enhance-record-thumb .record-progress-overlay > small,
.inpaint-record-item > span .record-progress-overlay > small,
.commerce-record-item > span .record-progress-overlay > small,
.watermark-task-thumb .record-progress-overlay > small,
.sharpen-task-name span .record-progress-overlay > small,
.matting-blueprint-record-card .record-progress-overlay > small,
.id-photo-history-thumb .record-progress-overlay > small,
.matting-history-modal-list button > span .record-progress-overlay > small,
.id-photo-history-modal-list button > span .record-progress-overlay > small,
.enhance-history-modal-list button > span .record-progress-overlay > small,
.inpaint-history-modal-list button > span .record-progress-overlay > small,
.montage-history-card > span .record-progress-overlay > small {
  display: block !important;
  margin: 0 !important;
  color: var(--record-progress-muted, #6b7893) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

@keyframes mifan-task-progress-sheen {
  0% {
    transform: translateX(-110%);
  }
  55%,
  100% {
    transform: translateX(110%);
  }
}

.enhance-compare-stage.is-waiting-result .enhance-compare-handle,
.color-enhance-stage.is-waiting-result .enhance-compare-handle,
.colorize-compare-stage.is-waiting-result .enhance-compare-handle,
.anime-split-stage.is-waiting-result button[data-anime-compare-handle] {
  display: none !important;
}

.anime-split-stage.is-waiting-result .anime-split-image.after,
.anime-line-art .anime-line-art-image:not([style]) {
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(45deg, rgba(226, 233, 243, 0.70) 25%, transparent 25% 50%, rgba(226, 233, 243, 0.70) 50% 75%, transparent 75%) !important;
  background-color: #f8fbff !important;
  background-size: 22px 22px !important;
}

.anime-split-stage.is-waiting-result .anime-split-image.after::after,
.anime-line-art .anime-line-art-image:not([style])::after {
  max-width: 220px;
  padding: 12px 14px;
  border: 1px solid #dfe7f2;
  border-radius: 10px;
  color: #667085;
  background: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  content: "开始修复后，结果会显示在这里";
}

.id-photo-output-preview:not(.has-result) {
  display: grid;
  place-items: center;
  background:
    linear-gradient(45deg, rgba(226, 233, 243, 0.72) 25%, transparent 25% 50%, rgba(226, 233, 243, 0.72) 50% 75%, transparent 75%) 0 0 / 22px 22px,
    #f8fbff !important;
}

.id-photo-output-preview:not(.has-result) img {
  object-fit: contain !important;
  object-position: center !important;
}

.id-photo-empty-label {
  position: static !important;
  display: grid !important;
  place-items: center;
  width: min(220px, 84%);
  padding: 18px;
  border: 1px dashed #cbd7e9;
  border-radius: 12px;
  color: #667085 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .ordinary-workbench-empty {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ordinary-workbench-empty-card {
    min-height: 210px;
  }
}

/* Tool 10 old-photo functional controls and batch workflow, 2026-07-13 */
.ordinary-blueprint-old-photo .ordinary-title {
  flex-wrap: wrap;
}

.old-photo-title-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  flex: 1 0 calc(100% - 50px);
  margin-left: 50px;
}

.old-photo-title-actions button,
.old-photo-reset-button,
.enhance-records-old-photo .enhance-record-head-actions button {
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #e0e5ef;
  border-radius: 6px;
  color: #4b556a;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.old-photo-title-actions button:last-child {
  border-color: #d7ccff;
  color: #6c50e8;
  background: #f7f4ff;
}

.old-photo-reset-button {
  border: 0;
  color: #7657f2;
  background: transparent;
}

.old-photo-output-grid button small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.old-photo-output-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.enhance-preview-old-photo {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.old-photo-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.old-photo-preview-head > div,
.old-photo-preview-head > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.old-photo-preview-head > div:first-child {
  display: grid;
  gap: 2px;
}

.old-photo-preview-head strong {
  color: #293248;
  font-size: 15px;
  font-weight: 900;
}

.old-photo-preview-head span {
  color: #8993a6;
  font-size: 11px;
  font-weight: 700;
}

.old-photo-preview-head button,
.old-photo-preview-head .old-photo-download-btn {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 86px !important;
  max-width: none !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  color: #4a556b;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1 !important;
  text-decoration: none;
  cursor: pointer;
}

.old-photo-preview-head .old-photo-download-btn {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(105deg, #7257ec, #e64ca8);
}

.old-photo-compare-stage {
  position: relative;
  display: block;
  min-height: 360px;
  overflow: hidden;
  --enhance-compare-position: var(--old-photo-compare-position, 50%);
}

.old-photo-compare-stage .enhance-image {
  position: absolute;
  inset: 0;
  min-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(var(--old-photo-preview-zoom, 1));
  transform-origin: center;
  transition: transform 150ms ease;
}

.old-photo-compare-stage .enhance-image.after {
  clip-path: inset(0 calc(100% - var(--old-photo-compare-position, 50%)) 0 0);
}

.enhance-preview-old-photo.is-source-waiting .old-photo-compare-stage .enhance-image.before {
  clip-path: none;
}

.enhance-preview-old-photo.is-source-waiting .old-photo-compare-stage .enhance-image.before span {
  background: rgba(45, 52, 66, 0.72);
}

.old-photo-source-ready-note {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 4;
  display: grid;
  gap: 4px;
  width: min(390px, calc(100% - 48px));
  padding: 14px 16px;
  border: 1px solid rgba(124, 92, 246, 0.18);
  border-radius: 16px;
  color: #4c5870;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  text-align: center;
  transform: translateX(-50%);
}

.old-photo-source-ready-note strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.old-photo-source-ready-note small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.enhance-preview-old-photo.is-result .enhance-image.before,
.enhance-preview-old-photo.is-result .enhance-compare-handle {
  display: none;
}

.enhance-preview-old-photo.is-result .enhance-image.after {
  clip-path: none;
}

.old-photo-compare-stage .enhance-compare-handle {
  left: var(--old-photo-compare-position, 50%);
}

.old-photo-compare-stage .enhance-compare-handle::before {
  position: absolute;
  top: calc(-50vh);
  left: 50%;
  width: 2px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 1px rgba(61, 70, 91, 0.18);
  content: "";
  transform: translateX(-50%);
}

.old-photo-preview-tools {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(222, 228, 238, 0.96);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(34, 44, 68, 0.14);
}

.old-photo-preview-tools button {
  min-width: 34px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  color: #4a556b;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.old-photo-preview-tools button:nth-child(2) {
  min-width: 48px;
  background: #f3f5f9;
}

.old-photo-batch-modal {
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: min(760px, calc(100vh - 48px));
  padding: 26px;
}

.old-photo-batch-head span {
  color: #7657ed;
  font-size: 12px;
  font-weight: 900;
}

.old-photo-batch-head h2 {
  margin: 6px 0 4px;
  color: #273047;
  font-size: 22px;
  letter-spacing: 0;
}

.old-photo-batch-head p {
  margin: 0 0 16px;
  color: #808a9d;
  font-size: 12px;
}

.old-photo-batch-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.old-photo-batch-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto 28px;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 6px 8px;
  border: 1px solid #e3e8f1;
  border-radius: 7px;
  background: #fff;
}

.old-photo-batch-item > span {
  width: 54px;
  height: 54px;
  border-radius: 5px;
  background-color: #eef2f7;
  background-position: center;
  background-size: cover;
}

.old-photo-batch-item strong,
.old-photo-batch-item small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.old-photo-batch-item strong {
  color: #333c51;
  font-size: 12px;
}

.old-photo-batch-item small {
  margin-top: 4px;
  color: #929bad;
  font-size: 10px;
}

.old-photo-batch-item em {
  color: #7c8799;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.old-photo-batch-item.is-processing em {
  color: #7657ed;
}

.old-photo-batch-item.is-succeeded em {
  color: #1a9f68;
}

.old-photo-batch-item.is-failed em {
  color: #d4485e;
}

.old-photo-batch-item a {
  color: #7657ed;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.old-photo-batch-item > button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  color: #8a93a4;
  background: #f2f4f8;
  cursor: pointer;
}

.old-photo-batch-empty {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 180px;
  border: 1px dashed #d7deea;
  border-radius: 7px;
  color: #8993a5;
  text-align: center;
}

.old-photo-batch-empty strong {
  color: #465067;
  font-size: 14px;
}

.old-photo-batch-empty span {
  font-size: 11px;
}

.old-photo-batch-actions {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  padding-top: 16px;
}

.old-photo-batch-actions button {
  min-height: 42px;
}

.old-photo-batch-actions .is-cancel {
  background: #d94c62;
}

@media (max-width: 720px) {
  .old-photo-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .old-photo-compare-stage {
    min-height: 280px;
  }

  .old-photo-batch-modal {
    padding: 20px 14px 14px;
  }

  .old-photo-batch-item {
    grid-template-columns: 48px minmax(0, 1fr) auto 28px;
  }

  .old-photo-batch-item > span {
    width: 48px;
    height: 48px;
  }

  .old-photo-batch-item a {
    grid-column: 2 / 4;
  }

  .old-photo-batch-actions {
    grid-template-columns: 1fr;
  }
}

/* Tool 07 color boost functional interaction layer. */
.ordinary-color-help {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  color: #667189;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.ordinary-color-title-actions,
.ordinary-colorize-title-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.ordinary-color-title-actions .ordinary-color-checkin,
.ordinary-color-title-actions .ordinary-color-points {
  height: 24px;
  min-width: 74px;
  border-radius: 999px;
  font-size: 11px;
}

.ordinary-color-title-actions .ordinary-color-checkin {
  min-width: 92px;
}

.ordinary-color-title-actions .ordinary-color-checkin span,
.ordinary-color-title-actions .ordinary-color-points span {
  width: 12px;
  height: 12px;
}

.ordinary-colorize-title-actions .ordinary-colorize-icon {
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  cursor: pointer;
}

.ordinary-blueprint-color .ordinary-title,
.ordinary-blueprint-colorize .ordinary-title,
.ordinary-blueprint-old-photo .ordinary-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

.ordinary-blueprint-color .ordinary-title > div:not(.ordinary-color-title-actions),
.ordinary-blueprint-colorize .ordinary-title > div:not(.ordinary-colorize-title-actions),
.ordinary-blueprint-old-photo .ordinary-title > div:not(.old-photo-title-actions) {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ordinary-blueprint-color .ordinary-title .panel-title,
.ordinary-blueprint-colorize .ordinary-title .panel-title,
.ordinary-blueprint-old-photo .ordinary-title .panel-title {
  max-width: 100% !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.ordinary-blueprint-color .ordinary-title p,
.ordinary-blueprint-colorize .ordinary-title p,
.ordinary-blueprint-old-photo .ordinary-title p {
  max-width: 100% !important;
}

.ordinary-color-title-actions,
.ordinary-colorize-title-actions,
.old-photo-title-actions {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-left: 0 !important;
}

@media (max-width: 640px) {
  .ordinary-blueprint-color .ordinary-title,
  .ordinary-blueprint-colorize .ordinary-title {
    flex-wrap: wrap;
  }

  .ordinary-color-title-actions,
  .ordinary-colorize-title-actions {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
  }
}

.ordinary-color-checkin.is-claimed,
.ordinary-color-checkin:disabled {
  color: #637087;
  background: #f3f5f8;
  border-color: #dfe4eb;
  cursor: default;
}

.ordinary-blueprint-color button.enhance-more-row {
  width: 100%;
  cursor: pointer;
}

.ordinary-blueprint-color button.enhance-more-row.is-open {
  color: #6f55f2;
  border-color: #cfc5ff;
  background: #f8f6ff;
}

.enhance-color-advanced {
  display: grid;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 12px;
  border: 1px solid #e1e7f1;
  border-radius: 8px;
  background: #fff;
}

.ordinary-blueprint-colorize button.enhance-more-row {
  width: 100%;
  cursor: pointer;
}

.ordinary-blueprint-colorize button.enhance-more-row.is-open {
  color: #7056f2;
  border-color: #cfc5ff;
  background: #f8f6ff;
}

.colorize-advanced-settings {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid #e1e7f1;
  border-radius: 8px;
  background: #f8faff;
}

.enhance-preview-colorize .colorize-compare-stage:not(.is-design-locked) {
  position: relative;
  display: block;
  min-height: 390px;
  touch-action: none;
}

.enhance-preview-colorize .colorize-compare-stage.is-design-locked {
  min-height: 390px;
}

.enhance-preview-colorize .colorize-compare-stage:not(.is-design-locked) .enhance-image {
  position: absolute;
  inset: 0;
  min-height: 0;
  background-position: center;
  background-size: cover;
  transform: scale(var(--colorize-preview-zoom, 1));
  transform-origin: center;
  transition: transform 150ms ease;
}

.enhance-preview-colorize .colorize-compare-stage:not(.is-design-locked) .enhance-image.after {
  z-index: 1;
}

.enhance-preview-colorize .colorize-compare-stage:not(.is-design-locked) .enhance-image.before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--colorize-compare-position, 50%)) 0 0);
}

.enhance-preview-colorize .enhance-compare-handle {
  left: var(--colorize-compare-position, 50%);
}

.enhance-preview-colorize.is-result .enhance-image.before,
.enhance-preview-colorize.is-result .enhance-compare-handle {
  display: none;
}

.enhance-preview-colorize .colorize-compare-stage.is-design-locked {
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(100% * var(--colorize-preview-zoom, 1)) auto;
}

.color-enhance-stage {
  display: block;
  min-height: 390px;
  cursor: default;
  touch-action: none;
}

.color-enhance-stage.is-panning {
  cursor: grab;
}

.color-enhance-stage.is-panning:active {
  cursor: grabbing;
}

.color-enhance-stage .enhance-image {
  position: absolute;
  inset: 0;
  min-height: 0;
  background-position: var(--color-pan-x, 50%) var(--color-pan-y, 50%);
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(var(--color-preview-zoom, 1));
  transform-origin: var(--color-pan-x, 50%) var(--color-pan-y, 50%);
  transition: transform 150ms ease;
}

.color-enhance-stage .enhance-image.before {
  z-index: 1;
}

.color-enhance-stage .enhance-image.after {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--color-compare-position, 50%)) 0 0);
}

.color-enhance-stage .enhance-compare-handle {
  left: var(--color-compare-position, 50%);
  z-index: 6;
  touch-action: none;
}

.color-enhance-stage .enhance-compare-handle::after {
  position: absolute;
  top: -220px;
  bottom: -220px;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(49, 59, 79, 0.16);
  content: "";
  transform: translateX(-50%);
}

.color-enhance-stage.is-result .enhance-image.before,
.color-enhance-stage.is-result .enhance-compare-handle {
  display: none;
}

.color-enhance-stage.is-result .enhance-image.after {
  clip-path: none;
}

.enhance-color-view-tools button.active,
.enhance-color-edit-tools button.active {
  color: #6f55f2;
  background: #f2efff;
}

.enhance-color-edit-tools button:disabled {
  color: #aab2c0;
  background: #f5f7fa;
  cursor: not-allowed;
}

.enhance-preview-color.is-preview-fullscreen {
  position: fixed;
  inset: 12px;
  z-index: 1200;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100vh - 24px);
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(20, 28, 48, 0.28);
}

.enhance-preview-color.is-preview-fullscreen .color-enhance-stage {
  min-height: 0;
}

.enhance-curve-panel > select {
  float: right;
  height: 24px;
  padding: 0 22px 0 7px;
  border: 1px solid #dde4ee;
  border-radius: 5px;
  color: #59657a;
  background: #fff;
  font-size: 11px;
  font-weight: 750;
}

.enhance-curve-panel > i {
  position: relative;
  clear: both;
}

.enhance-curve-panel > i::after {
  position: absolute;
  left: calc(var(--curve-input, 0.5) * 100%);
  bottom: calc(var(--curve-output, 0.52) * 100%);
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #7658f3;
  box-shadow: 0 2px 8px rgba(70, 51, 170, 0.34);
  content: "";
  transform: translate(-50%, 50%);
}

.enhance-curve-panel div.enhance-curve-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.enhance-curve-values label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: center;
  padding: 5px 6px;
  border: 1px solid #e2e8f2;
  border-radius: 6px;
  color: #6b7488;
  font-size: 10px;
  font-weight: 750;
}

.enhance-curve-values input {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  margin: 0;
}

.enhance-curve-panel .enhance-curve-values b {
  padding: 0;
  border: 0;
  color: #424c60;
}

@media (max-width: 900px) {
  .enhance-color-advanced {
    margin-bottom: 10px;
  }

  .enhance-color-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .enhance-color-view-tools,
  .enhance-color-edit-tools {
    width: 100%;
    overflow-x: auto;
  }

  .enhance-color-view-tools button,
  .enhance-color-edit-tools button {
    flex: 0 0 auto;
  }

  .enhance-preview-color.is-preview-fullscreen {
    inset: 0;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .enhance-curve-panel {
    right: 10px;
    bottom: 10px;
    width: min(184px, calc(100% - 20px));
  }
}

/* Product matting functional controls and material library */
.ordinary-matting-matting-2 .product-matting-batch-add,
.ordinary-matting-matting-2 .product-matting-batch-run {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid #d9e1ed;
  border-radius: 7px;
  color: #5b6475;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.ordinary-matting-matting-2 .product-matting-batch-run {
  border-color: #7259f4;
  color: #fff;
  background: #7259f4;
}

.ordinary-matting-matting-2 .product-matting-batch-run.is-cancel {
  border-color: #d14343;
  background: #d14343;
}

.ordinary-matting-matting-2 .product-matting-batch-queue {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  background: #f8fafc;
}

.ordinary-matting-matting-2 .product-matting-batch-queue > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ordinary-matting-matting-2 .product-matting-batch-queue > div:first-child strong {
  color: #364152;
  font-size: 11px;
}

.ordinary-matting-matting-2 .product-matting-batch-queue > div:first-child button {
  border: 0;
  color: #6e56f4;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

.ordinary-matting-matting-2 .product-matting-batch-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.ordinary-matting-matting-2 .product-matting-batch-list > span {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 5px;
  background: #fff center / cover no-repeat;
}

.ordinary-matting-matting-2 .product-matting-batch-list > span.is-processing {
  border-color: #755cf5;
}

.ordinary-matting-matting-2 .product-matting-batch-list > span.is-complete::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(20, 135, 84, 0.58);
  font-size: 14px;
  font-weight: 900;
  content: "✓";
}

.ordinary-matting-matting-2 .product-matting-batch-list em {
  position: absolute;
  left: 3px;
  bottom: 3px;
  z-index: 2;
  min-width: 16px;
  height: 16px;
  border-radius: 3px;
  color: #fff;
  background: rgba(24, 31, 48, 0.72);
  font-size: 9px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
}

.ordinary-matting-matting-2 .product-matting-batch-list button {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 3;
  width: 17px;
  height: 17px;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #394150;
}

.ordinary-matting-matting-2 .product-matting-batch-list button::before,
.ordinary-matting-matting-2 .product-matting-batch-list button::after {
  position: absolute;
  left: 4px;
  top: 7px;
  width: 7px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: rotate(45deg);
}

.ordinary-matting-matting-2 .product-matting-batch-list button::after {
  transform: rotate(-45deg);
}

.ordinary-matting-matting-2 .matting-canvas.product-preview {
  background-color: #fff;
  background-image:
    var(--matting-image, none),
    linear-gradient(45deg, #e9edf3 25%, transparent 25%),
    linear-gradient(-45deg, #e9edf3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9edf3 75%),
    linear-gradient(-45deg, transparent 75%, #e9edf3 75%);
  background-position: center, 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: contain, 24px 24px, 24px 24px, 24px 24px, 24px 24px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}

.ordinary-matting-matting-2 .matting-canvas.product-preview.is-source {
  background-color: #f5f7fa;
  background-image: var(--matting-image, none);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ordinary-matting-matting-2 .product-matting-export-formats {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  background: #f6f8fb;
}

.ordinary-matting-matting-2 .product-matting-export-formats button {
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  color: #687386;
  background: transparent;
  font-size: 11px;
  font-weight: 850;
}

.ordinary-matting-matting-2 .product-matting-export-formats button.active {
  color: #6f56f4;
  background: #fff;
  box-shadow: 0 2px 8px rgba(41, 50, 79, 0.09);
}

.ordinary-matting-matting-2 .matting-export-row.compact {
  grid-template-columns: auto 170px 170px;
  justify-content: end;
  justify-items: stretch;
  gap: 12px;
}

.ordinary-matting-matting-2 .matting-export-row.compact .product-matting-export-formats {
  justify-self: start;
}

.ordinary-matting-matting-2 .matting-export-row.compact .matting-more-edit,
.ordinary-matting-matting-2 .matting-export-row.compact .matting-download {
  width: 100%;
  min-width: 0;
}

.product-matting-materials-modal {
  width: min(940px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 34px;
}

.product-matting-materials-head {
  display: grid;
  gap: 5px;
  margin-bottom: 20px;
}

.product-matting-materials-head > span {
  color: #7259f4;
  font-size: 12px;
  font-weight: 850;
}

.product-matting-materials-head h2 {
  margin: 0;
  color: #20293a;
  font-size: 24px;
  letter-spacing: 0;
}

.product-matting-materials-head small {
  color: #8490a3;
}

.product-matting-materials-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-matting-materials-grid article {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  background: #fff;
}

.product-matting-material-preview {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 5px;
  background-color: #f4f6f9;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.product-matting-materials-grid article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-matting-materials-grid strong,
.product-matting-materials-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-matting-materials-grid strong {
  color: #354052;
  font-size: 12px;
}

.product-matting-materials-grid span {
  color: #8792a5;
  font-size: 10px;
}

.product-matting-material-remove {
  height: 28px;
  border: 1px solid #e2e7ef;
  border-radius: 5px;
  color: #687386;
  background: #fff;
  font-size: 11px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .product-matting-materials-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 28px 16px 18px;
  }

  .product-matting-materials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ordinary-matting-matting-2 .product-matting-batch-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ordinary-matting-matting-2 .matting-export-row.compact {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }

  .ordinary-matting-matting-2 .matting-export-row.compact .product-matting-export-formats {
    grid-column: 1 / -1;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: #f6f8fc;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 68px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(229, 233, 244, 0.95);
  backdrop-filter: blur(18px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1200px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
}

.brand-mark {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(111, 91, 235, 0.22);
}

.brand-mark::before {
  position: absolute;
  display: none;
  inset: 0;
  content: "";
}

.brand-mark::after {
  position: absolute;
  display: none;
  inset: 0;
  content: "";
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-sub {
  color: #9096a6;
  font-size: 12px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(232, 236, 247, 0.92);
  border-radius: 16px;
  background: #f7f8fc;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item::after {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  content: "";
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #242838;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.nav-link.active,
.nav-link:hover {
  border-color: rgba(119, 102, 244, 0.16);
  background: #fff;
  color: #6857ed;
  box-shadow: 0 10px 24px rgba(82, 92, 132, 0.1);
}

.chevron {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 90;
  display: grid;
  gap: 5px;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 10px;
  border: 1px solid rgba(230, 233, 243, 0.96);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(38, 47, 78, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
}

.dropdown-imageEdit {
  width: 500px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dropdown-matting {
  width: 318px;
}

.dropdown-draw {
  width: 286px;
}

.nav-item.open .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}

.nav-item.open .chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.nav-item.open .nav-trigger {
  border-color: rgba(119, 102, 244, 0.16);
  background: #fff;
  color: #6857ed;
  box-shadow: 0 10px 24px rgba(82, 92, 132, 0.1);
}

.nav-item.open .dropdown {
  display: grid;
}

.drop-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.drop-link:hover {
  border-color: #ecefff;
  background: #f7f8ff;
  transform: translateY(-1px);
}

.drop-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.drop-text {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.38;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 306px;
}

.header-member-chip,
.header-points-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 8px;
  border: 1px solid rgba(122, 106, 248, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f7ff 100%);
  color: #282b3e;
  cursor: pointer;
  box-shadow:
    0 8px 18px rgba(72, 79, 120, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.header-member-chip:hover,
.header-points-chip:hover {
  border-color: rgba(122, 106, 248, 0.3);
  background: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px rgba(72, 79, 120, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.header-member-chip span:last-child,
.header-points-chip span:last-child {
  display: grid;
  gap: 2px;
  text-align: left;
}

.header-member-chip small {
  order: -1;
}

.header-member-chip strong,
.header-points-chip strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.header-member-chip small,
.header-points-chip small {
  color: #8b8fa2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.header-member-chip.is-guide {
  border-color: rgba(162, 81, 255, 0.32);
  background: linear-gradient(270deg, #ff83da 0%, #a251ff 100%);
  color: #fff;
  box-shadow:
    0 10px 22px rgba(162, 81, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.header-member-chip.is-vip {
  border-color: rgba(221, 174, 82, 0.36);
  background: linear-gradient(180deg, #fffdf8 0%, #fff7e8 100%);
}

.header-chip-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.header-chip-icon.member {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.94) 0 8%, transparent 9%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 6px 14px rgba(60, 26, 145, 0.22);
}

.header-chip-icon.member::before {
  width: 13px;
  height: 9px;
  border: 2px solid #fff;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  content: "";
}

.header-chip-icon.member::after {
  position: absolute;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    -5px 2px 0 #fff,
    5px 2px 0 #fff;
  content: "";
}

.header-chip-icon.member.has-model-badge {
  width: 27px;
  height: 27px;
  overflow: visible;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.85), transparent 56%),
    #f2efff;
  box-shadow:
    inset 0 0 0 1px rgba(122, 106, 248, 0.1),
    0 5px 10px rgba(72, 79, 120, 0.1);
}

.header-chip-icon.member.has-model-badge::before,
.header-chip-icon.member.has-model-badge::after {
  content: none;
}

.header-chip-icon.member.has-model-badge img {
  display: block;
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(96, 76, 160, 0.14));
}

.header-chip-icon.points {
  background: linear-gradient(135deg, #20b981, #6a7df5);
}

.header-chip-icon.points::before {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  content: "分";
}

.wechat-login-button {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.avatar-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, #fff 0 8%, transparent 9%),
    linear-gradient(135deg, #181b37 0%, #f24f8b 48%, #f8d152 100%);
  box-shadow: 0 8px 22px rgba(28, 38, 78, 0.12);
  cursor: pointer;
}

.login-btn {
  height: 40px;
  padding: 0 22px;
  border: 1px solid rgba(122, 106, 248, 0.22);
  border-radius: 999px;
  color: #5e52e8;
  background: #fff;
  box-shadow: 0 8px 20px rgba(67, 77, 118, 0.1);
  cursor: pointer;
  font-weight: 850;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.login-btn:hover,
.login-btn:focus-visible {
  border-color: rgba(122, 106, 248, 0.36);
  background: #f8f7ff;
  box-shadow: 0 12px 26px rgba(67, 77, 118, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.user-menu {
  position: absolute;
  top: 58px;
  right: 0;
  display: none;
  width: 292px;
  padding: 12px;
  border: 1px solid rgba(232, 236, 247, 0.96);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(30, 40, 72, 0.16);
}

.user-menu.open {
  display: block;
}

.user-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 6px 12px;
  border-bottom: 1px solid #f0f2f8;
}

.user-avatar-small {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1b2140, #ff5fa5 52%, #ffd45c);
}

.user-name {
  font-size: 13px;
  font-weight: 800;
}

.user-id {
  margin-top: 2px;
  color: #9aa0af;
  font-size: 11px;
}

.user-points {
  margin-top: 2px;
  color: #6f63f5;
  font-size: 11px;
  font-weight: 800;
}

.user-menu-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f7f8fc;
  color: #697083;
  font-size: 12px;
  font-weight: 800;
}

.user-menu-status strong {
  color: #262a3a;
  font-size: 12px;
  white-space: nowrap;
}

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  color: #50586b;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
}

.menu-row:hover {
  background: #f6f7fc;
  color: #665af4;
}

.menu-row em {
  color: #9aa1b2;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.menu-row-accent {
  margin: 2px 0;
  color: #5b50e6;
  background: #f4f1ff;
  font-weight: 950;
}

.menu-row-accent:hover {
  color: #4a3fd4;
  background: #ede8ff;
}

.home {
  background: linear-gradient(180deg, #eef8ff 0%, #ffffff 58%, #ffffff 100%);
}

.hero {
  position: relative;
  display: block;
  min-height: auto;
  overflow: hidden;
  padding: 54px 0 66px;
  background: linear-gradient(180deg, #dff2ff 0%, #f7fbff 68%, #ffffff 100%);
  text-align: center;
}

.hero-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  transform: scale(1.03);
}

.hero::before,
.hero::after {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
}

.hero::before {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(233, 248, 255, 0.64) 0%, rgba(255, 255, 255, 0.76) 72%, #ffffff 100%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.68) 0 25%, rgba(255, 255, 255, 0) 26% 100%);
}

.hero::after {
  z-index: 1;
  top: 0;
  right: 0;
  width: min(820px, 62vw);
  height: 100%;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0) 0 32%, rgba(255, 255, 255, 0.56) 33% 49%, rgba(255, 255, 255, 0) 50% 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 40px));
  padding-top: 0;
  margin: 0 auto;
}

.hero-copy {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(214, 227, 248, 0.92);
  border-radius: 999px;
  color: #6857ed;
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.hero-brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-logo {
  display: inline-flex;
  width: clamp(48px, 6vw, 70px);
  height: clamp(48px, 6vw, 70px);
  filter: drop-shadow(0 16px 28px rgba(111, 91, 235, 0.22));
}

.hero-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-title {
  margin: 0;
  font-size: clamp(42px, 6vw, 70px);
  font-weight: 900;
  letter-spacing: 0;
  color: #171629;
}

.hero-subtitle {
  width: min(880px, 100%);
  margin: 0 auto;
  color: #48556d;
  font-size: 21px;
  line-height: 1.6;
}

.hero-tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: min(1180px, 100%);
  margin: 42px auto 0;
}

.quick-tool {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(234, 238, 248, 0.86);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(80, 92, 126, 0.11);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.quick-tool:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(80, 92, 126, 0.14);
}

.quick-visual {
  position: absolute;
  inset: 0;
  display: block;
}

.quick-visual img,
.gallery-visual img,
.home-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding: 42px 14px 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.76) 36%, rgba(255, 255, 255, 0.96));
}

.quick-title {
  display: block;
  color: #0f1324;
  font-size: 16px;
  font-weight: 900;
}

.quick-text {
  display: block;
  margin-top: 5px;
  color: #7b8495;
  font-size: 12px;
  line-height: 1.4;
}

.home-placeholder {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.8), transparent 27%),
    linear-gradient(135deg, #eaf5ff 0%, #f7eefe 56%, #eaf7ff 100%);
}

.home-placeholder::before,
.home-placeholder::after,
.home-placeholder i,
.home-placeholder b {
  position: absolute;
  content: "";
}

.home-placeholder::before {
  inset: 14%;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.home-placeholder::after {
  right: 18%;
  bottom: 22%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(135deg, #7d66f5, #ff65c5);
  box-shadow: 0 12px 24px rgba(118, 101, 245, 0.22);
}

.home-placeholder i {
  left: 18%;
  bottom: 20%;
  width: 44%;
  height: 48%;
  border-radius: 28px 28px 12px 12px;
  background: linear-gradient(135deg, #fff, #d8e5ff);
}

.home-placeholder b {
  left: 26%;
  top: 24%;
  width: 38%;
  height: 16%;
  border-radius: 999px;
  background: rgba(111, 99, 245, 0.22);
}

.home-placeholder-id-photo i {
  left: 30%;
  bottom: 17%;
  width: 38%;
  height: 55%;
  border-radius: 999px 999px 16px 16px;
  background: linear-gradient(180deg, #ffe4c7, #6a7eb7 60%, #fff 61%);
}

.home-placeholder-amplify::before {
  inset: 18%;
  border-radius: 50%;
}

.home-placeholder-amplify i {
  left: 23%;
  top: 26%;
  width: 34%;
  height: 34%;
  border: 10px solid rgba(111, 99, 245, 0.72);
  border-radius: 50%;
  background: transparent;
}

.home-placeholder-amplify b {
  right: 22%;
  bottom: 22%;
  left: auto;
  top: auto;
  width: 28%;
  height: 10%;
  transform: rotate(44deg);
}

.home-placeholder-photo-universal-1 {
  background: linear-gradient(90deg, #a9a090 0 48%, #bfe7ff 49% 100%);
}

.home-placeholder-text-to-img,
.home-placeholder-img-to-img {
  background:
    radial-gradient(circle at 66% 34%, rgba(255, 212, 108, 0.8), transparent 18%),
    linear-gradient(135deg, #cbe7ff, #f2d8ff 56%, #d8f7ff);
}

.home-placeholder-photo-universal,
.home-placeholder-photo-universal-2,
.home-placeholder-photo-universal-4 {
  background: linear-gradient(90deg, #d6d0c4 0 50%, #bde4ff 51% 100%);
}

.home-placeholder-eliminate-pens,
.home-placeholder-eliminate-pens-1 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.56) 0 22%, transparent 22% 100%),
    linear-gradient(135deg, #e9f7ff, #f7e3f4);
}

.home-placeholder-matting-1,
.home-placeholder-matting-2 {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.72) 25%, transparent 25% 50%, rgba(255, 255, 255, 0.72) 50% 75%, transparent 75%) 0 0/24px 24px,
    #eef3fb;
}

.home-placeholder-montage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 24px;
}

.home-placeholder-montage::before,
.home-placeholder-montage::after,
.home-placeholder-montage i,
.home-placeholder-montage b {
  position: static;
  display: block;
  width: auto;
  height: auto;
  border-radius: 12px;
  background: linear-gradient(135deg, #dbe7ff, #ffe0f2);
  box-shadow: none;
}

.more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(460px, calc(100vw - 48px));
  height: 58px;
  padding: 0 28px;
  border: 1px solid #dfdfe6;
  border-radius: 999px;
  color: #30333d;
  background: #fff;
  font-size: 17px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: none;
}

.home-gallery {
  width: min(1180px, calc(100% - 40px));
  margin: 34px auto 86px;
  text-align: left;
}

.home-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.home-gallery h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0;
}

.home-gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.home-gallery-more .more-btn:hover {
  border-color: #cfd2dc;
  color: #171a24;
  box-shadow: 0 16px 34px rgba(47, 55, 82, 0.08);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 118px;
  gap: 16px;
  margin-top: 20px;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(80, 92, 126, 0.1);
  cursor: pointer;
}

.gallery-card:nth-child(1),
.gallery-card:nth-child(3),
.gallery-card:nth-child(4),
.gallery-card:nth-child(5),
.gallery-card:nth-child(7) {
  grid-row: span 2;
}

.gallery-card:nth-child(2),
.gallery-card:nth-child(8) {
  grid-row: span 3;
}

.gallery-card:nth-child(6),
.gallery-card:nth-child(9),
.gallery-card:nth-child(10) {
  grid-row: span 2;
}

.gallery-visual {
  position: absolute;
  inset: 0;
  display: block;
}

.gallery-caption {
  display: none;
}

.footer {
  padding: 34px 24px 26px;
  border-top: 1px solid #eef1f7;
  background: #ffffff;
}

.footer-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(360px, 1.8fr);
  align-items: start;
  gap: 36px;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.footer-brand-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: #242632;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}

.footer-logo img {
  width: 100%;
  height: 100%;
}

.footer-brand-name {
  display: block;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
}

.footer-copy {
  display: block;
  margin-top: 3px;
  color: #8b92a3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.footer-brand p {
  max-width: 360px;
  margin: 0;
  color: #747b8d;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.75;
}

.footer-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.footer-group {
  display: grid;
  gap: 9px;
}

.footer-group strong {
  color: #252a38;
  font-size: 13px;
  font-weight: 950;
}

.footer-group a,
.footer-group button {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7f8798;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #f0f2f7;
  color: #969dad;
  font-size: 12px;
  font-weight: 750;
}

.footer-links span,
.footer-links a,
.footer-links button {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.footer-links button {
  cursor: pointer;
}

.footer-divider {
  display: none;
}

.footer-links .footer-icp {
  color: #a9a4ac;
}

.footer-links a:hover,
.footer-links button:hover,
.footer-group a:hover,
.footer-group button:hover {
  color: #815eed;
}

.legal-page {
  min-height: calc(100vh - 76px);
  padding: 48px 24px 80px;
  background: linear-gradient(180deg, #fbf7ff 0%, #f7f8fb 34%, #ffffff 100%);
}

.legal-hero,
.legal-content {
  width: min(980px, 100%);
  margin: 0 auto;
}

.legal-hero {
  padding: 34px 0 28px;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 22px;
  color: #7257d7;
  font-size: 14px;
  font-weight: 850;
}

.legal-hero h1 {
  margin: 0;
  color: #22242d;
  font-size: 44px;
  font-weight: 950;
  line-height: 1.15;
}

.legal-hero p {
  max-width: 720px;
  margin: 14px 0 0;
  color: #6a6675;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 22px;
  color: #8a8593;
  font-size: 13px;
  font-weight: 750;
}

.legal-content {
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid #eee9f8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(50, 42, 86, 0.08);
}

.legal-section {
  padding: 0 0 14px;
  border-bottom: 1px solid #f0edf5;
}

.legal-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-section h2 {
  margin: 0 0 10px;
  color: #2e303a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}

.legal-section p {
  margin: 0;
  color: #56535f;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.9;
}

.tools-page {
  min-height: calc(100vh - 76px);
  background: #f5f7fb;
}

.tools-banner {
  display: grid;
  grid-template-columns: 1fr 430px;
  align-items: center;
  gap: 30px;
  width: min(1200px, calc(100% - 48px));
  min-height: 270px;
  margin: 34px auto 28px;
  padding: 36px 48px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 40%, rgba(255, 106, 191, 0.2), transparent 28%),
    linear-gradient(135deg, #f4eeff 0%, #eef5ff 100%);
  overflow: hidden;
}

.tools-banner h1 {
  margin: 0;
  font-size: 42px;
  letter-spacing: 0;
}

.tools-banner p {
  margin: 16px 0 0;
  color: #6f7689;
  font-size: 18px;
}

.prompt-visual {
  position: relative;
  height: 182px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 40px rgba(91, 103, 143, 0.14);
}

.prompt-visual.generated-banner {
  overflow: hidden;
  background: #fff;
}

.prompt-visual.generated-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prompt-visual.generated-banner::before,
.prompt-visual.generated-banner::after {
  content: none;
}

.prompt-visual::before {
  position: absolute;
  top: 26px;
  left: 28px;
  width: 72%;
  height: 46px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #edf0f8;
  content: "花；女孩";
  color: #8c92a3;
  line-height: 46px;
  padding-left: 22px;
}

.prompt-visual::after {
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 150px;
  height: 110px;
  border-radius: 28px 28px 18px 18px;
  background:
    radial-gradient(circle at 50% 20%, #ffd3e6 0 12%, transparent 13%),
    linear-gradient(135deg, #825ff8, #ff73c9 60%, #ffd46c);
  content: "";
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto 70px;
}

.tool-card {
  overflow: hidden;
  border: 1px solid rgba(229, 234, 246, 0.92);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(70, 78, 112, 0.08);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(175, 187, 224, 0.86);
  box-shadow: 0 22px 48px rgba(70, 78, 112, 0.14);
}

.tool-cover {
  height: 184px;
  padding: 0;
  background: #eef4ff;
}

.cover-art {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(135deg, #f8fbff, #e8f0ff);
}

.cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #edf4ff;
}

.cover-art.compare::before,
.cover-art.compare::after {
  position: absolute;
  inset: 0;
  content: "";
}

.cover-art.compare::before {
  right: 50%;
  background: var(--cover-a, linear-gradient(135deg, #e5dac7, #8998ad));
}

.cover-art.compare::after {
  left: 50%;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.68) 25%, transparent 25% 50%, rgba(255, 255, 255, 0.68) 50% 75%, transparent 75%) 0 0/18px 18px,
    var(--cover-b, #dfe5f2);
}

.cover-art.draw {
  background:
    radial-gradient(circle at 55% 22%, #ffe0ef 0 9%, transparent 10%),
    radial-gradient(circle at 47% 42%, #ffd2b8 0 16%, transparent 17%),
    linear-gradient(135deg, #6e63f6 0%, #ff70c5 64%, #ffd36a 100%);
}

.cover-art.fix {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 48%, transparent 49%),
    radial-gradient(circle at 58% 38%, #f1c08e 0 17%, transparent 18%),
    linear-gradient(135deg, #4b556a, #eef3ff);
}

.cover-art.montage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: #fff;
}

.cover-art.montage span {
  border-radius: 10px;
  background: linear-gradient(135deg, #e1e8ff, #f9dff0);
}

.split-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(16, 19, 33, 0.58);
  transform: translate(-50%, -50%);
}

.split-handle::before {
  position: absolute;
  inset: 10px;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
}

.tool-info {
  min-height: 104px;
  padding: 18px 18px 20px;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
}

.tool-info h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0;
}

.tool-info p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #7b8495;
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.api-page {
  padding-bottom: 70px;
}

.api-banner {
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.72fr);
  min-height: 292px;
  padding: 32px 40px;
  border: 1px solid rgba(229, 234, 246, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 248, 255, 0.92)),
    linear-gradient(135deg, #f3fbff 0%, #f6f0ff 100%);
  box-shadow: 0 18px 46px rgba(72, 86, 126, 0.1);
}

.api-banner-copy {
  max-width: 620px;
}

.api-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(92, 118, 166, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4f617b;
  font-size: 13px;
  font-weight: 850;
}

.api-access-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(220, 227, 241, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 38px rgba(66, 78, 110, 0.1);
}

.api-key-card {
  display: grid;
  gap: 7px;
  padding: 18px;
  border-radius: 16px;
  background: #111827;
  color: #fff;
}

.api-key-card span,
.api-key-card small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 750;
}

.api-key-card strong {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0;
}

.api-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.api-flow span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(225, 231, 243, 0.95);
  border-radius: 12px;
  background: #fff;
  color: #424a5d;
  font-size: 13px;
  font-weight: 800;
}

.api-flow b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef6f2;
  color: #15885d;
  font-size: 12px;
}

.api-console,
.api-category-strip,
.api-product-grid {
  width: min(1200px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.api-console {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  align-items: stretch;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(229, 234, 246, 0.96);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(70, 78, 112, 0.07);
}

.api-console-main {
  padding: 4px 8px;
}

.api-console-main span {
  color: #15885d;
  font-size: 13px;
  font-weight: 900;
}

.api-console-main h2 {
  margin: 8px 0 8px;
  color: #202535;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.api-console-main p {
  max-width: 680px;
  margin: 0;
  color: #687386;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.api-console-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.api-console-stats div {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(225, 231, 243, 0.96);
  border-radius: 14px;
  background: #f9fbff;
}

.api-console-stats span {
  color: #7a8498;
  font-size: 12px;
  font-weight: 800;
}

.api-console-stats strong {
  color: #222838;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
}

.api-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.api-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(222, 228, 241, 0.95);
  border-radius: 999px;
  background: #fff;
  color: #4d5668;
  font-size: 13px;
  font-weight: 850;
}

.api-category.active {
  border-color: rgba(21, 136, 93, 0.22);
  background: #eef8f4;
  color: #157957;
}

.api-category b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: inherit;
  font-size: 12px;
}

.api-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 70px;
}

.api-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  min-height: 330px;
  padding: 18px;
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 16px 34px rgba(70, 78, 112, 0.07);
}

.api-card-head,
.api-card-actions {
  display: flex;
  align-items: center;
}

.api-card-head {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.api-card-badge,
.api-status {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.api-card-badge {
  background: #f2f5fa;
  color: #5f6d83;
}

.api-status-ready {
  background: #eaf8f2;
  color: #12825b;
}

.api-status-beta {
  background: #fff5dd;
  color: #9a6414;
}

.api-status-planned {
  background: #edf3ff;
  color: #315fba;
}

.api-card h3 {
  margin: 0 0 9px;
  color: #202535;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}

.api-card p {
  margin: 0 0 18px;
  color: #697487;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.api-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.api-card-meta div {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(225, 231, 243, 0.96);
  border-radius: 12px;
  background: #fff;
}

.api-card-meta span,
.api-endpoint span {
  color: #8a94a6;
  font-size: 12px;
  font-weight: 800;
}

.api-card-meta strong {
  color: #273044;
  font-size: 13px;
  line-height: 1.35;
}

.api-endpoint {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 13px;
  background: #111827;
}

.api-endpoint code {
  overflow: hidden;
  color: #e7ecf8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-card-actions {
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;
}

.api-card-link,
.api-card-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.api-card-link {
  border: 1px solid rgba(222, 228, 241, 0.96);
  background: #fff;
  color: #3f485b;
}

.api-card-primary {
  border: 1px solid #1f9a6a;
  background: #1f9a6a;
  color: #fff;
  box-shadow: 0 10px 22px rgba(31, 154, 106, 0.16);
}

.api-card-link:hover {
  border-color: rgba(31, 154, 106, 0.28);
  color: #157957;
}

.api-card-primary:hover {
  background: #16855c;
}

.api-toolbox-banner {
  background:
    radial-gradient(circle at 84% 36%, rgba(31, 154, 106, 0.13), transparent 26%),
    linear-gradient(135deg, #f7fbff 0%, #f6f3ff 100%);
}

.api-toolbox-banner h1 {
  max-width: 620px;
}

.api-toolbox-banner p {
  max-width: 560px;
}

.api-banner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.api-banner-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(226, 232, 244, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #566176;
  font-size: 13px;
  font-weight: 850;
}

.api-banner-tags b {
  color: #1d2738;
  font-size: 15px;
}

.api-banner-visual {
  height: 210px;
}

.api-tools-grid {
  margin-top: 0;
}

.api-tool-card {
  cursor: default;
}

.api-tool-cover {
  position: relative;
  background: #f1f5fb;
}

.api-tool-cover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(10, 18, 32, 0.12));
  content: "";
  pointer-events: none;
}

.api-tool-status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(31, 42, 68, 0.12);
}

.api-tool-info {
  min-height: 138px;
}

.api-tool-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.api-tool-title-row h3 {
  margin: 0;
}

.api-tool-title-row span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f2f5fa;
  color: #697487;
  font-size: 11px;
  font-weight: 900;
}

.api-tool-footer {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(226, 232, 244, 0.95);
}

.api-tool-footer span {
  color: #5f6b7e;
  font-size: 13px;
  font-weight: 850;
}

.api-tool-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #1f9a6a;
  border-radius: 10px;
  background: #1f9a6a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(31, 154, 106, 0.16);
}

.api-tool-footer button:hover {
  background: #16855c;
}

.api-tool-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.api-tool-actions button {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.api-tool-actions button:last-child {
  grid-column: 1 / -1;
}

.api-tool-actions button.secondary,
.api-doc-inline-actions button.secondary,
.api-debug-actions button.secondary {
  border-color: rgba(222, 228, 241, 0.96);
  background: #fff;
  color: #3f485b;
  box-shadow: none;
}

.api-tool-actions button.secondary:hover,
.api-doc-inline-actions button.secondary:hover,
.api-debug-actions button.secondary:hover {
  border-color: rgba(31, 154, 106, 0.28);
  background: #fff;
  color: #157957;
}

.api-doc-page,
.api-debug-page {
  padding-bottom: 70px;
}

.api-doc-hero,
.api-debug-hero {
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 250px;
  padding: 30px 36px;
}

.api-doc-back {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #536176;
  font-size: 13px;
  font-weight: 850;
}

.api-doc-cover {
  position: relative;
  height: 236px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 22px;
  background: #f1f5fb;
  box-shadow: 0 18px 38px rgba(66, 78, 110, 0.1);
}

.api-doc-cover .cover-img,
.api-doc-cover .cover-art {
  width: 100%;
  height: 100%;
}

.api-doc-layout,
.api-debug-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 18px;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto 70px;
}

.api-debug-layout {
  grid-template-columns: minmax(0, 1fr) 294px;
}

.api-doc-sidebar,
.api-debug-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.api-doc-side-card,
.api-debug-note,
.api-doc-card,
.api-debug-panel {
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(70, 78, 112, 0.07);
}

.api-doc-side-card {
  display: grid;
  gap: 9px;
  padding: 18px;
}

.api-doc-side-card span,
.api-debug-note b {
  color: #15885d;
  font-size: 13px;
  font-weight: 900;
}

.api-doc-side-card strong {
  color: #202535;
  font-size: 20px;
  line-height: 1.2;
}

.api-doc-side-card code {
  overflow: hidden;
  padding: 10px;
  border-radius: 12px;
  background: #111827;
  color: #e7ecf8;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-doc-nav-list {
  display: grid;
  gap: 8px;
}

.api-doc-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 13px;
  background: #fff;
  color: #334055;
  font-size: 13px;
  font-weight: 850;
}

.api-doc-nav-list a.active {
  border-color: rgba(31, 154, 106, 0.26);
  background: #eef8f4;
  color: #157957;
}

.api-doc-nav-list b {
  flex: 0 0 auto;
  color: #8190a5;
  font-size: 12px;
}

.api-doc-main {
  display: grid;
  gap: 16px;
}

.api-doc-card,
.api-debug-panel {
  padding: 20px;
}

.api-doc-card-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.api-doc-card-head span {
  color: #15885d;
  font-size: 13px;
  font-weight: 900;
}

.api-doc-card-head h2 {
  margin: 0;
  color: #202535;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.api-doc-endpoint-line {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #111827;
}

.api-doc-endpoint-line b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1f9a6a;
  color: #fff;
  font-size: 13px;
}

.api-doc-endpoint-line code {
  overflow: hidden;
  color: #e7ecf8;
  font-size: 13px;
  font-weight: 850;
  line-height: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-doc-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.api-doc-auth-grid div,
.api-doc-table div {
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 12px;
  background: #fbfcff;
}

.api-doc-auth-grid div {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.api-doc-auth-grid span {
  color: #8490a3;
  font-size: 12px;
  font-weight: 800;
}

.api-doc-auth-grid strong {
  color: #283247;
  font-size: 13px;
  line-height: 1.35;
}

.api-doc-inline-actions,
.api-debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.api-doc-inline-actions button,
.api-debug-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #1f9a6a;
  border-radius: 11px;
  background: #1f9a6a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(31, 154, 106, 0.16);
}

.api-doc-table {
  display: grid;
  gap: 8px;
}

.api-doc-table div {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) 72px minmax(0, 2fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.api-doc-table code {
  color: #222b3d;
  font-size: 13px;
  font-weight: 900;
}

.api-doc-table b {
  display: inline-flex;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef8f4;
  color: #157957;
  font-size: 12px;
}

.api-doc-table span {
  color: #607085;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.api-doc-card-copy {
  margin: 0 0 14px;
  color: #607085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.api-doc-card-copy code {
  padding: 2px 6px;
  border-radius: 7px;
  background: #eef8f4;
  color: #157957;
  font-size: 13px;
  font-weight: 900;
}

.api-doc-error-table div {
  grid-template-columns: 70px minmax(150px, 0.9fr) minmax(0, 2fr);
}

.api-doc-error-table b {
  justify-content: flex-start;
  background: #f2f5fa;
  color: #405069;
}

.api-doc-code {
  margin: 0;
  overflow: auto;
  padding: 16px;
  border-radius: 14px;
  background: #111827;
  color: #e7ecf8;
  font-size: 13px;
  line-height: 1.7;
}

.api-doc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.api-doc-steps div {
  display: grid;
  gap: 10px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 14px;
  background: #fbfcff;
}

.api-doc-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef8f4;
  color: #157957;
}

.api-doc-steps span {
  color: #314056;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.api-doc-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.api-doc-support h2 {
  margin: 6px 0;
}

.api-doc-support p,
.api-debug-note p {
  margin: 0;
  color: #66768c;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.api-doc-support button {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 18px;
  border: 1px solid #1f9a6a;
  border-radius: 12px;
  background: #1f9a6a;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.api-debug-terminal {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 178px;
  padding: 20px;
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 22px;
  background: #111827;
  box-shadow: 0 18px 38px rgba(66, 78, 110, 0.1);
}

.api-debug-terminal span,
.api-debug-terminal small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 850;
}

.api-debug-terminal code {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
  word-break: break-all;
}

.api-debug-panel {
  display: grid;
  gap: 14px;
}

.api-debug-field {
  display: grid;
  gap: 8px;
}

.api-debug-field span {
  color: #5c697d;
  font-size: 13px;
  font-weight: 900;
}

.api-debug-field input,
.api-debug-field textarea {
  width: 100%;
  border: 1px solid rgba(222, 228, 241, 0.96);
  border-radius: 13px;
  background: #fbfcff;
  color: #202535;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  outline: none;
}

.api-debug-field input {
  height: 44px;
  padding: 0 13px;
}

.api-debug-field textarea {
  min-height: 210px;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.6;
  resize: vertical;
}

.api-debug-result {
  min-height: 84px;
  margin: 0;
  overflow: auto;
  padding: 14px;
  border-radius: 13px;
  background: #111827;
  color: #e7ecf8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.api-debug-note {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.tool-page {
  min-height: calc(100vh - 76px);
  background: #edf2fb;
}

.tool-login-backdrop {
  min-height: calc(100vh - 76px);
  background: #f6f8fc;
}

.tool-landing {
  padding: 56px 0 70px;
}

.tool-title-block {
  text-align: center;
}

.tool-title-block h1 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0;
}

.spark {
  width: 46px;
  height: 38px;
  border-radius: 20px 8px 20px 8px;
  background: linear-gradient(135deg, #7865f8, #27d7d0 45%, #ff68c9 70%, #ffcf58);
  transform: rotate(-16deg);
}

.tool-title-block p {
  margin: 14px auto 0;
  color: #7b8192;
  font-size: 16px;
}

.tool-hero-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(340px, 1fr);
  gap: 22px;
  width: min(980px, calc(100% - 40px));
  margin: 28px auto 0;
}

.before-after {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.before-after::before,
.before-after::after {
  position: absolute;
  inset: 0;
  content: "";
}

.before-after::before {
  right: 50%;
  background: var(--before-bg, linear-gradient(135deg, #d9c4a5, #657184));
}

.before-after::after {
  left: 50%;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.72) 25%, transparent 25% 50%, rgba(255, 255, 255, 0.72) 50% 75%, transparent 75%) 0 0/22px 22px,
    var(--after-bg, #dfe5f2);
}

.before-after.generated-before-after {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.before-after.generated-before-after::before,
.before-after.generated-before-after::after {
  display: none;
}

.scene-object {
  position: absolute;
  z-index: 1;
  left: 18%;
  bottom: 16%;
  width: 62%;
  height: 35%;
  border-radius: 60px 60px 20px 20px;
  background: var(--object-bg, linear-gradient(135deg, #b4bdc9, #777f91));
  box-shadow: 0 22px 30px rgba(45, 54, 82, 0.16);
}

.before-label,
.after-label {
  position: absolute;
  z-index: 3;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.before-label {
  left: 14px;
  background: rgba(45, 49, 59, 0.66);
}

.after-label {
  right: 14px;
  background: #6878ff;
}

.divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.86);
}

.upload-card {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 32px 30px 28px;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.upload-card:hover {
  transform: translateY(-1px);
  background: #fbfcff;
  box-shadow: 0 18px 44px rgba(44, 55, 89, 0.1);
}

.upload-card.drag-over,
.mini-upload.drag-over {
  border: 1px dashed #7566f5;
  background: #f6f5ff;
}

.upload-inner {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.upload-icon {
  position: relative;
  width: 90px;
  height: 70px;
  margin: 0 auto 24px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 31% 28%, rgba(255, 255, 255, 0.92) 0 5px, transparent 5.5px),
    linear-gradient(180deg, #ff75d5 0%, #8f63ff 100%);
  box-shadow: 0 16px 28px rgba(151, 91, 229, 0.24);
}

.upload-icon::before {
  position: absolute;
  left: 19px;
  bottom: 15px;
  width: 52px;
  height: 32px;
  clip-path: polygon(0 100%, 30% 42%, 48% 68%, 67% 38%, 100% 100%);
  background: rgba(255, 255, 255, 0.94);
  content: "";
}

.upload-icon::after {
  position: absolute;
  right: -20px;
  top: -14px;
  width: 48px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.36)
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='19'%20height='19'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2019V5'/%3E%3Cpath%20d='M5%2012l7-7%207%207'/%3E%3C/svg%3E")
      center / 19px 19px no-repeat;
  box-shadow:
    0 12px 24px rgba(120, 92, 210, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(8px);
  content: "";
}

.upload-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  color: #2d3242;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
}

.upload-title button {
  color: #252b3a;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 720;
}

.upload-title button:hover {
  color: #7466f6;
}

.upload-title span {
  color: #353b4c;
  font-weight: 620;
}

.upload-hint {
  margin-top: 12px;
  color: #8c92a3;
  font-size: 13px;
}

.upload-inner .upload-hint {
  max-width: min(460px, 100%);
  margin-right: auto;
  margin-left: auto;
  color: #8d94a6;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}

.upload-nowrap {
  white-space: nowrap;
}

.try-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 54px;
  color: #8c92a3;
  font-size: 13px;
}

.try-row::before,
.try-row::after {
  width: 90px;
  height: 1px;
  background: #d4d9e5;
  content: "";
}

.samples {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.sample {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 3px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: linear-gradient(135deg, #f6d9bd, #7b8da4);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 8px 18px rgba(39, 48, 78, 0.12);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.sample img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: contain;
  pointer-events: none;
}

.sample:hover,
.sample:focus-visible {
  transform: translateY(-1px);
  border-color: #7666f6;
  box-shadow: 0 12px 24px rgba(39, 48, 78, 0.18);
  outline: none;
}

.steps-section,
.feature-section,
.faq-section {
  width: min(1050px, calc(100% - 40px));
  margin: 54px auto 0;
}

.steps-section h2,
.faq-section h2 {
  margin: 0 0 22px;
  text-align: center;
  font-size: 26px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.step-card {
  min-height: 128px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
}

.step-num {
  color: #6f61f5;
  font-weight: 900;
}

.step-title {
  margin-top: 8px;
  font-weight: 800;
}

.step-text {
  margin-top: 6px;
  color: #7d8494;
  font-size: 13px;
}

.feature-section {
  display: grid;
  gap: 0;
}

.feature-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 46px;
  align-items: center;
  min-height: 430px;
  padding: 36px 0;
}

.feature-panel.is-even {
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
}

.feature-panel.is-even .feature-media {
  order: 2;
}

.feature-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(30, 36, 55, 0.3) 0 49%, transparent 50%),
    linear-gradient(135deg, #ece3d3, #cdd7eb);
  box-shadow: 0 18px 44px rgba(44, 55, 89, 0.13);
}

.feature-preview-image {
  background-position: center;
  background-size: cover;
}

.feature-media .before-label,
.feature-media .after-label {
  top: 16px;
  font-size: 12px;
}

.feature-media .divider {
  opacity: 0.88;
}

.feature-copy h3 {
  margin: 0 0 18px;
  color: #111827;
  font-size: 28px;
  line-height: 1.32;
}

.feature-copy p {
  margin: 0;
  color: #687184;
  font-size: 16px;
  line-height: 1.9;
}

.faq-section {
  padding-bottom: 64px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border-radius: 8px;
  color: #273044;
  background: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(44, 55, 89, 0.06);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-question:hover,
.faq-question:focus-visible {
  color: #6b5df5;
  outline: none;
}

.faq-answer {
  padding: 0 22px 20px;
  color: #687184;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
}

.faq-item.open {
  box-shadow: 0 16px 34px rgba(44, 55, 89, 0.1);
}

.faq-chevron {
  width: 11px;
  height: 11px;
  border-right: 2px solid #8992a5;
  border-bottom: 2px solid #8992a5;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease, border-color 0.18s ease;
  flex: 0 0 auto;
}

.faq-item.open .faq-chevron {
  border-color: #6b5df5;
  transform: rotate(225deg) translateY(-2px);
}

.workspace {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: calc(100vh - 76px);
  background: #eef3fb;
}

.workspace.with-style-drawer {
  grid-template-columns: 360px 360px 1fr;
}

.side-panel {
  height: calc(100vh - 76px);
  min-height: calc(100vh - 76px);
  padding: 24px;
  border-right: 1px solid #e7ebf3;
  background: #fff;
  overflow-y: auto;
}

.panel-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 900;
}

.form-block {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  margin-bottom: 9px;
  color: #353b4e;
  font-size: 14px;
  font-weight: 800;
}

textarea,
input,
select {
  width: 100%;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
  color: #222638;
  background: #fbfcff;
  outline: none;
}

textarea {
  min-height: 126px;
  padding: 14px;
  resize: vertical;
}

input,
select {
  height: 42px;
  padding: 0 12px;
}

.mini-upload {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 118px;
  padding: 18px 14px;
  border: 1px dashed #cbd3e6;
  border-radius: 14px;
  color: #8b93a5;
  background: #fbfcff;
  cursor: pointer;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.mini-upload::before {
  display: block;
  width: 38px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 31% 30%, rgba(255, 255, 255, 0.92) 0 3px, transparent 3.5px),
    linear-gradient(180deg, #ff75d5 0%, #8f63ff 100%);
  box-shadow: 0 8px 18px rgba(151, 91, 229, 0.18);
  content: "";
}

.mini-upload:hover {
  border-color: #9b91fb;
  color: #6761d9;
  background: #fbfaff;
}

.mini-upload.has-upload {
  border-color: #7566f5;
  color: #4f46d8;
  background: #f7f6ff;
  font-weight: 800;
}

.mini-upload.has-upload::before {
  display: none;
}

.mini-upload small {
  display: block;
  margin-top: 6px;
  color: #8b93a5;
  font-weight: 600;
}

.style-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.style-label-row .form-label {
  margin-bottom: 0;
}

.more-style-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid #e2e6f0;
  border-radius: 999px;
  color: #6d63e9;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.more-style-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7468f4, #ee66c7);
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.draw-style-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  color: #25283b;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(54, 63, 93, 0.06);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.draw-style-card:hover {
  transform: translateY(-1px);
  border-color: #c8c4ff;
}

.draw-style-card.active {
  border-color: #7566f5;
  box-shadow:
    0 0 0 2px rgba(117, 102, 245, 0.12),
    0 16px 30px rgba(83, 75, 194, 0.18);
}

.draw-style-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #eef3fb, #f7e9ff);
}

.draw-style-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.draw-style-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e7edff, #ffe8f8);
}

.draw-style-name {
  display: block;
  padding: 8px 6px 9px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-drawer {
  min-height: calc(100vh - 76px);
  max-height: calc(100vh - 76px);
  padding: 20px 16px 24px;
  border-right: 1px solid #e7ebf3;
  background: #fff;
  overflow-y: auto;
}

.style-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.style-drawer-head strong {
  display: block;
  color: #202538;
  font-size: 18px;
  font-weight: 900;
}

.style-drawer-head span {
  color: #8a92a5;
  font-size: 12px;
  font-weight: 700;
}

.style-drawer-close {
  width: 32px;
  height: 32px;
  border: 1px solid #e2e6f0;
  border-radius: 50%;
  color: #747d91;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.style-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.style-category-tab {
  height: 30px;
  padding: 0 11px;
  border: 1px solid #e7ebf3;
  border-radius: 999px;
  color: #5c6477;
  background: #fbfcff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.style-category-tab.active {
  color: #fff;
  border-color: transparent;
  background: #7166f2;
}

.style-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.primary-btn,
.ghost-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: 13px;
  cursor: pointer;
  font-weight: 800;
}

.primary-btn {
  color: #fff;
  background: linear-gradient(90deg, #6f63f5, #836ff8);
}

.primary-btn:disabled,
.ghost-btn:disabled,
.secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ghost-btn {
  border: 1px solid #e2e6f0;
  color: #42495d;
  background: #fff;
}

.ai-advice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin: 4px 0 14px;
  border: 1px solid #d9e2ff;
  border-radius: 12px;
  color: #3155c9;
  background: #f5f8ff;
  cursor: pointer;
  font-weight: 900;
}

.ai-advice-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.danger-btn {
  color: #fff;
  background: var(--danger);
}

.result-area {
  position: relative;
  display: grid;
  align-self: start;
  place-items: center;
  height: calc(100vh - 76px);
  min-height: calc(100vh - 76px);
  padding: 34px;
  overflow-y: auto;
}

.result-empty {
  text-align: center;
}

.draw-result-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(260px, 100%);
}

.draw-result-empty .empty-visual {
  margin: 0;
}

.result-empty.with-generated-result {
  width: min(680px, 92%);
}

.draw-empty-art {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0 auto 18px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.empty-visual {
  position: relative;
  width: 112px;
  height: 86px;
  margin: 0 auto 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #7268f5, #ff70c5 70%, #ffd46c);
  box-shadow: 0 16px 34px rgba(109, 104, 245, 0.2);
}

.empty-visual::before {
  position: absolute;
  left: 25px;
  bottom: 20px;
  width: 60px;
  height: 36px;
  clip-path: polygon(0 100%, 34% 40%, 52% 70%, 70% 36%, 100% 100%);
  background: #fff;
  content: "";
}

.empty-text {
  color: #8277fb;
  font-size: 16px;
  font-weight: 800;
}

.history-float {
  position: absolute;
  top: 28px;
  right: 28px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #7868f7;
  background: #fff;
  box-shadow: 0 10px 24px rgba(73, 83, 124, 0.11);
  cursor: pointer;
}

.point-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid #edf0f7;
  border-radius: 8px;
  color: #596174;
  background: #fbfcff;
  font-size: 12px;
  font-weight: 800;
}

.result-card {
  width: min(760px, 92%);
}

.result-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.result-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-placeholder {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid #edf1fb;
  background:
    linear-gradient(45deg, rgba(232, 236, 246, 0.72) 25%, transparent 25% 50%, rgba(232, 236, 246, 0.72) 50% 75%, transparent 75%) 0 0/24px 24px,
    #f8faff;
}

.result-preview.is-pending::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(17, 22, 38, 0.34);
  content: "生成中";
  font-weight: 900;
}

.task-status-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e7ebf4;
  border-radius: 8px;
  background: #fbfcff;
}

.task-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.task-status-head span {
  color: #7468f4;
  font-weight: 900;
}

.task-progress {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f8;
}

.task-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7366f4, #f65dc7);
}

.task-status-card p {
  margin: 10px 0 0;
  color: #7b8495;
  font-size: 13px;
  line-height: 1.5;
}

.task-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin-top: 14px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  background: #111626;
  font-size: 13px;
  font-weight: 800;
}

.task-complete-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
}

.task-complete-actions .task-download {
  margin-top: 0;
}

.history-panel {
  position: absolute;
  top: 84px;
  right: 28px;
  z-index: 5;
  width: 280px;
  padding: 14px;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.history-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 900;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 38px;
  padding: 0;
  border-top: 1px solid #f1f3f8;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  color: #596174;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}

.history-item.active,
.history-item:hover {
  color: #34394c;
  background: #fbfcff;
}

.history-item strong {
  color: #7468f4;
  white-space: nowrap;
}

.history-empty {
  padding: 18px 0;
  color: #9aa0af;
  font-size: 13px;
  text-align: center;
}

.tool-generation-records {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e7ebf4;
  border-radius: 8px;
  background: #fff;
}

.side-panel .tool-generation-records {
  margin-top: 16px;
  padding: 12px;
  background: #fbfcff;
}

.tool-generation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #22283a;
  font-size: 14px;
  font-weight: 900;
}

.tool-generation-head span,
.tool-generation-head > button {
  color: #8a93a5;
  font-size: 12px;
  font-weight: 800;
}

.tool-generation-head > button {
  padding: 0;
  border: 0;
  background: transparent;
}

.tool-generation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tool-generation-records.compact .tool-generation-list {
  grid-template-columns: 1fr;
}

.tool-generation-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  padding: 8px;
  border: 1px solid #e6ebf4;
  border-radius: 8px;
  color: #596174;
  background: #fbfcff;
  cursor: pointer;
  text-align: left;
}

.tool-generation-records.compact .tool-generation-item {
  grid-template-columns: 42px 1fr auto;
  min-height: 58px;
  padding: 8px;
  background: #fff;
}

.tool-generation-item.active {
  border-color: #7566f5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(111, 96, 245, 0.1);
}

.tool-generation-thumb {
  display: block;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(45deg, rgba(232, 236, 246, 0.72) 25%, transparent 25% 50%, rgba(232, 236, 246, 0.72) 50% 75%, transparent 75%) 0 0/16px 16px,
    #f8faff;
  background-size: cover;
  background-position: center;
}

.tool-generation-records.compact .tool-generation-thumb {
  width: 42px;
  height: 42px;
}

.tool-generation-copy {
  min-width: 0;
}

.tool-generation-copy strong,
.tool-generation-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-generation-copy strong {
  color: #252b3e;
  font-size: 13px;
  font-weight: 900;
}

.tool-generation-records.compact .tool-generation-copy strong {
  font-size: 12px;
}

.tool-generation-copy small {
  margin-top: 4px;
  color: #7d8799;
  font-size: 12px;
  font-weight: 760;
}

.tool-generation-item em {
  padding: 5px 7px;
  border-radius: 999px;
  color: #6f60f5;
  background: #f2f0ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.tool-generation-empty {
  padding: 14px;
  border: 1px dashed #dce3ee;
  border-radius: 8px;
  color: #8a93a5;
  background: #f8faff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.ordinary-preview-empty {
  display: grid;
  place-content: center;
  min-height: 240px;
  padding: 28px;
  border: 1px dashed #dce3ee;
  border-radius: 8px;
  color: #7c879a;
  background: #f8faff;
  text-align: center;
}

.ordinary-preview-empty strong {
  color: #3f495a;
  font-size: 15px;
  font-weight: 800;
}

.ordinary-preview-empty span {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 650;
}

.image-task-board {
  width: min(860px, 94%);
}

.image-task-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.image-task-pane {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: var(--shadow);
}

.image-task-pane.after {
  background-color: #f8faff;
}

.image-task-pane.is-empty {
  display: grid;
  place-items: center;
  border: 1px solid #edf1fb;
  background:
    linear-gradient(45deg, rgba(232, 236, 246, 0.72) 25%, transparent 25% 50%, rgba(232, 236, 246, 0.72) 50% 75%, transparent 75%) 0 0/24px 24px,
    #f8faff;
}

.image-task-pane.is-missing-source,
.inpaint-mask-stage.is-missing-source {
  display: grid;
  place-items: center;
  border: 1px solid #edf1fb;
  background:
    linear-gradient(45deg, rgba(232, 236, 246, 0.72) 25%, transparent 25% 50%, rgba(232, 236, 246, 0.72) 50% 75%, transparent 75%) 0 0/24px 24px,
    #f8faff;
}

.image-task-pane span {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 22, 38, 0.58);
  font-size: 13px;
  font-weight: 900;
}

.image-task-pane.after span {
  background: #6878ff;
}

.after-placeholder {
  display: grid;
  gap: 8px;
  max-width: 260px;
  padding: 18px 20px;
  color: #6f7689;
  text-align: center;
}

.after-placeholder strong {
  color: #34394c;
  font-size: 18px;
}

.after-placeholder small {
  color: #7b8495;
  font-size: 13px;
  line-height: 1.55;
}

.image-task-hint {
  margin: 14px 0 0;
  color: #7b8495;
  font-size: 13px;
  text-align: center;
}

.inpaint-task-board {
  width: min(960px, 96%);
}

.inpaint-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.inpaint-mask-stage {
  position: relative;
  aspect-ratio: var(--inpaint-ratio, 900 / 620);
  min-height: 430px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: var(--shadow);
}

.mask-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.mask-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 22, 38, 0.58);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
}

.editor-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - 76px);
  background: #eef3fb;
}

.watermark-editor-layout {
  grid-template-areas: "controls preview";
}

.watermark-editor-layout > .side-panel {
  grid-area: controls;
}

.watermark-preview-section {
  grid-area: preview;
  scroll-margin-top: 82px;
}

.editor-canvas {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(18px, 2vw, 30px);
}

.watermark-preview-shell {
  display: grid;
  gap: 14px;
  width: min(760px, 94%);
}

.watermark-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(226, 232, 244, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(36, 48, 84, 0.08);
}

.watermark-preview-head div {
  min-width: 0;
}

.watermark-preview-head span {
  display: block;
  color: #747d91;
  font-size: 12px;
  font-weight: 850;
}

.watermark-preview-head strong {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: #202638;
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-preview-head em {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #675ff0;
  background: #f0edff;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.checker-canvas {
  position: relative;
  width: min(720px, 90%);
  aspect-ratio: 1.35;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(45deg, #e0e5f0 25%, transparent 25% 50%, #e0e5f0 50% 75%, transparent 75%) 0 0/28px 28px,
    #f8faff;
  box-shadow: var(--shadow);
}

.watermark-checker {
  width: 100%;
}

.preview-photo {
  position: absolute;
  inset: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #dfc8ab, #8390a4);
}

.id-photo-stage {
  display: grid;
  place-items: center;
  width: min(380px, 100%);
  min-width: 0;
  padding: 16px;
  background: #f8faff;
  box-shadow: var(--shadow);
}

.id-photo-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(268px, 300px);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  width: min(760px, 100%);
  min-width: 0;
}

.id-photo-output-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: min(328px, 100%);
  overflow: hidden;
  border: 1px solid rgba(30, 42, 72, 0.12);
  background: #eef3fb;
  color: rgba(19, 25, 42, 0.52);
  font-size: 14px;
  font-weight: 850;
}

.id-photo-output-preview canvas,
.id-photo-output-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-photo-output-preview img.is-loading {
  opacity: 0;
}

.id-photo-empty-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.id-photo-output-preview.has-result {
  border-color: rgba(30, 42, 72, 0.18);
}

.id-photo-progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 21, 36, 0.36);
  backdrop-filter: blur(2px);
}

.id-photo-progress-panel {
  display: grid;
  gap: 12px;
  width: min(250px, 90%);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  color: #fff;
  background: rgba(29, 34, 52, 0.84);
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.28);
}

.id-photo-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 900;
}

.id-photo-progress-head span {
  color: #d9d5ff;
  font-weight: 950;
}

.id-photo-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.id-photo-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7366f4, #f65dc7);
}

.id-photo-progress-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 750;
}

.id-photo-progress-overlay.is-error .id-photo-progress-track i {
  background: linear-gradient(90deg, #ff6b6b, #ffb86b);
}

.id-photo-result-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.id-photo-result-card {
  padding: 18px;
  border: 1px solid #e6ebf4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(35, 45, 78, 0.08);
}

.id-photo-result-card h2 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f7;
  color: #202638;
  font-size: 18px;
  font-weight: 900;
}

.id-photo-result-meta {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.id-photo-result-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #7c8597;
  font-size: 13px;
  font-weight: 850;
}

.id-photo-result-meta strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #30374a;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.id-photo-result-meta strong.is-done {
  color: #18a989;
}

.id-photo-result-meta i {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(30, 42, 72, 0.12);
}

.id-photo-result-download,
.id-photo-copy-link {
  height: 46px;
  border-radius: 10px;
}

.id-photo-copy-link {
  margin-top: 10px;
}

.id-photo-result-tip {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  padding: 13px;
  border-radius: 10px;
  color: #697386;
  background: #f5f8ff;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 760;
}

.id-photo-result-tip strong {
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.id-photo-editor {
  grid-template-columns: minmax(286px, 310px) minmax(0, 1fr);
}

.id-photo-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  background:
    linear-gradient(180deg, rgba(248, 250, 255, 0.98), #fff 34%),
    #fff;
}

.id-photo-panel .panel-title {
  margin: 2px 0 0;
  font-size: 23px;
  line-height: 1.16;
}

.id-photo-panel-head span {
  color: #7a8294;
  font-size: 12px;
  font-weight: 850;
}

.id-photo-panel .point-strip {
  margin: 0;
  padding: 12px 14px;
  border-color: #e4e9f4;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 28px rgba(35, 45, 78, 0.06);
}

.id-photo-section {
  padding: 14px;
  border: 1px solid #e8edf6;
  border-radius: 8px;
  background: #fff;
}

.id-photo-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  color: #2f3547;
  font-size: 14px;
  font-weight: 850;
}

.id-photo-section-title strong {
  color: #7a8294;
  font-size: 12px;
  font-weight: 850;
}

.id-photo-panel .color-dots {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  gap: 9px;
  align-items: center;
}

.id-photo-panel .color-dot {
  width: 30px;
  height: 30px;
  border-color: #fff;
  box-shadow: 0 0 0 1px #d9e0ed;
}

.id-photo-panel .color-dot.active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px #7467f5;
}

.id-photo-panel select {
  height: 44px;
  padding: 0 38px 0 13px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 760;
}

.id-photo-outfit-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.id-photo-outfit-option {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #e2e7f1;
  border-radius: 8px;
  color: #4b5368;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.id-photo-outfit-option.active {
  border-color: #7566f5;
  color: #6f60f5;
  background: #f5f3ff;
  box-shadow: 0 8px 20px rgba(111, 96, 245, 0.1);
}

.id-photo-panel .upload-hint {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #eef2f8;
  border-radius: 8px;
  color: #7b8495;
  background: #f8faff;
  font-size: 13px;
  line-height: 1.55;
}

.id-photo-panel .task-status-card {
  margin-top: 0;
}

.id-photo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 2px;
}

.id-photo-actions .ghost-btn,
.id-photo-actions .primary-btn {
  height: 48px;
  border-radius: 8px;
}

.id-photo-actions .ghost-btn {
  color: #333a4e;
  background: #fff;
}

.id-photo-download-btn {
  height: 48px;
  border-radius: 8px;
}

.id-photo-history {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

.id-photo-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #22283a;
  font-size: 13px;
  font-weight: 900;
}

.id-photo-history-head span {
  color: #8a93a5;
  font-size: 12px;
  font-weight: 800;
}

.id-photo-history-item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid #e6ebf4;
  border-radius: 10px;
  background: #fff;
  text-align: left;
}

.id-photo-history-item.active {
  border-color: #7566f5;
  box-shadow: 0 10px 24px rgba(111, 96, 245, 0.1);
}

.id-photo-history-thumb {
  position: relative;
  width: 34px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(30, 42, 72, 0.16);
  border-radius: 4px;
}

.id-photo-history-thumb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f0c5ae;
  transform: translateX(-50%);
}

.id-photo-history-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 30px;
  height: 18px;
  border-radius: 16px 16px 0 0;
  background: #f8f9fb;
  transform: translateX(-50%);
}

.id-photo-history-copy {
  min-width: 0;
}

.id-photo-history-copy strong,
.id-photo-history-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-history-copy strong {
  color: #252b3e;
  font-size: 12px;
  font-weight: 900;
}

.id-photo-history-copy small {
  margin-top: 3px;
  color: #7d8799;
  font-size: 11px;
  font-weight: 760;
}

.id-photo-history-item em {
  padding: 5px 7px;
  border-radius: 999px;
  color: #6f60f5;
  background: #f2f0ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.id-photo-history-empty {
  padding: 12px;
  border: 1px dashed #dce3ee;
  border-radius: 10px;
  color: #8a93a5;
  background: #f8faff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.watermark-text {
  position: absolute;
  color: rgba(255, 255, 255, 0.78);
  font-size: 34px;
  font-weight: 900;
  transform: rotate(-24deg);
}

.control-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.draw-strength-row {
  grid-template-columns: 88px minmax(0, 1fr) 42px;
  color: #3c4356;
  font-size: 13px;
  font-weight: 800;
}

.draw-strength-row input {
  height: auto;
  padding: 0;
}

.draw-strength-row strong {
  color: #7566f5;
  font-size: 13px;
  text-align: right;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  color: #353b4e;
  font-size: 14px;
  font-weight: 800;
}

.switch-row input {
  width: 42px;
  height: 24px;
  accent-color: #7566f5;
}

.color-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.color-dot {
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d9dfec;
  cursor: pointer;
}

.color-dot.active {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 3px #6f63f5;
}

.tool-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tool-tab {
  height: 38px;
  border: 1px solid #e2e6f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.tool-tab.active {
  color: #fff;
  background: #6f63f5;
}

.montage-page {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 304px;
  height: calc(100vh - 68px);
  min-height: 640px;
  overflow: hidden;
  background: #f3f6f8;
}

.montage-left,
.montage-right {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 18px;
  background: #fbfcfd;
}

.montage-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid #dde5eb;
}

.montage-right {
  border-left: 1px solid #dde5eb;
}

.montage-panel-head,
.right-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
}

.montage-panel-head strong,
.right-title {
  color: #172033;
  font-size: 16px;
}

.montage-panel-head span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: #27645a;
  background: #dff4ee;
  font-size: 12px;
  font-weight: 800;
}

.montage-upload-main {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #1f7a70;
  cursor: pointer;
  font-weight: 900;
}

.montage-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px dashed #c7d4dc;
  border-radius: 8px;
  background: #f6f9fb;
}

.montage-source-grid.drag-over {
  border-color: #1f7a70;
  background: #eefaf7;
}

.montage-source-slot {
  position: relative;
  display: grid;
  grid-template-rows: 72px auto auto;
  gap: 4px;
  min-width: 0;
  min-height: 126px;
  padding: 7px;
  border: 1px solid #d9e2e8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.source-preview,
.source-empty {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #eef2f5;
  background-position: center;
  background-size: cover;
  color: #74808a;
  font-size: 12px;
  font-weight: 900;
}

.montage-source-slot strong {
  overflow: hidden;
  color: #202838;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.montage-source-slot em {
  overflow: hidden;
  color: #74808a;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-actions {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -5px;
  display: inline-flex;
}

.source-actions i {
  display: grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #e0e6ef;
  border-radius: 50%;
  color: #8994a5;
  background: #fff;
  box-shadow: 0 1px 3px rgba(29, 42, 65, 0.13);
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.source-actions i:hover {
  color: #556176;
  background: #f8fafc;
}

/* Contract thumbnail controls expose only the close affordance. Replacing stays on the card click. */
.montage-source-slot:not(.has-image) .source-actions {
  display: none;
}

/* Keep the contract-state close icon visible without introducing hover-only tool buttons. */
.ordinary-blueprint-app-shell .montage-source-slot .source-actions {
  opacity: 1;
}

.montage-recommend {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe7e5;
  border-radius: 8px;
  background: #f2faf7;
}

.montage-recommend span {
  color: #61726f;
  font-size: 12px;
  font-weight: 850;
}

.montage-recommend strong {
  display: block;
  margin-top: 4px;
  color: #142923;
  font-size: 15px;
  font-weight: 950;
}

.montage-recommend p {
  margin: 6px 0 0;
  color: #65716f;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.montage-recommend button,
.ai-advice-btn {
  height: 38px;
  border: 1px solid #cbd8d6;
  border-radius: 8px;
  color: #155b53;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
}

.template-thumb {
  position: relative;
  display: grid;
  grid-template-rows: 58px auto;
  gap: 7px;
  flex: 0 0 118px;
  min-width: 118px;
  min-height: 104px;
  padding: 8px;
  border: 1px solid #dfe6ec;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.template-thumb.active {
  border-color: #1f7a70;
  background: #effaf7;
  box-shadow: inset 0 0 0 1px rgba(31, 122, 112, 0.28);
}

.template-thumb.recommended:not(.active) {
  border-color: #efb35d;
  background: #fffaf1;
}

.template-shape {
  position: relative;
  display: block;
  min-height: 58px;
  overflow: hidden;
  border-radius: 6px;
  background: #f1f4f6;
}

.template-shape span {
  position: absolute;
  border-radius: 3px;
  background: #cfd8dd;
}

.template-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #252b3c;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-thumb small {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #56636d;
  background: rgba(255, 255, 255, 0.88);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.template-thumb.active .template-name,
.template-thumb.active small {
  color: #1f7a70;
}

.montage-center {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 18px 24px 16px;
  cursor: grab;
  overscroll-behavior: contain;
  user-select: none;
}

.montage-center.is-panning {
  cursor: grabbing;
}

.montage-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(720px, 100%);
  min-height: 34px;
}

.montage-stage-head span {
  display: block;
  color: #7b858e;
  font-size: 12px;
  font-weight: 850;
}

.montage-stage-head strong {
  display: block;
  color: #172033;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
}

.montage-stage-head em {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #8b5c15;
  background: #fff3d9;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.montage-canvas-viewport {
  display: grid;
  place-items: start center;
  min-height: 0;
  overflow: auto;
  width: 100%;
  padding: 4px 12px 0;
}

.montage-canvas-shell {
  display: grid;
  place-items: start center;
  width: 100%;
  min-height: 0;
  padding-top: 0;
}

.collage {
  position: relative;
  width: 560px;
  height: 560px;
  padding: 25px;
  gap: 25px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(30, 42, 56, 0.13);
  transform: scale(var(--montage-zoom, 0.55));
  transform-origin: top center;
}

.collage-cell {
  position: absolute;
  display: grid;
  place-items: center;
  border: 2px solid #d9dfeb;
  color: #7d8495;
  background: #f8faff;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  font-size: 34px;
  overflow: hidden;
}

.collage-cell.has-image {
  border-color: transparent;
  color: transparent;
}

.cell-plus {
  color: #6f7c86;
  font-size: 32px;
  font-weight: 900;
}

.collage-cell b {
  color: #6f7c86;
  font-size: 12px;
  font-weight: 900;
}

.collage-cell.dragging {
  opacity: 0.56;
}

.collage-cell.drag-over {
  outline: 3px solid rgba(111, 99, 245, 0.64);
  outline-offset: -3px;
}

.cell-tools {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.collage-cell:hover .cell-tools,
.collage-cell:focus-visible .cell-tools,
.cell-tools.show {
  opacity: 1;
}

.cell-tools i,
.cell-color-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  color: #fff;
  background: rgba(31, 37, 56, 0.78);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.cell-color-control {
  min-width: 26px;
  width: 26px;
  padding: 3px;
}

.cell-color-control input {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.scale-control {
  position: relative;
  z-index: 5;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 12px;
  border: 1px solid #dce4ea;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(30, 42, 56, 0.1);
  font-weight: 800;
}

.montage-bottom-cue {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #dce4ea;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.montage-bottom-cue span {
  width: 9px;
  height: 9px;
  border-right: 2px solid #1f7a70;
  border-bottom: 2px solid #1f7a70;
  transform: translateY(-1px) rotate(45deg);
}

.scale-control span {
  color: #66727b;
  font-size: 12px;
  font-weight: 900;
}

.scale-control button {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border: 1px solid #dce4ea;
  border-radius: 50%;
  color: #1f2b3a;
  background: #f8fafb;
  cursor: pointer;
  font-weight: 900;
}

.scale-control input {
  width: 130px;
  height: auto;
  padding: 0;
}

.montage-filmstrip {
  min-width: 0;
  width: 100%;
  padding: 12px;
  border: 1px solid #dce4ea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 34px rgba(30, 42, 56, 0.07);
}

.montage-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.montage-filter-tabs button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #dce4ea;
  border-radius: 999px;
  color: #54616b;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.montage-filter-tabs button.active {
  border-color: #7658f4;
  color: #7658f4;
  background: #f5f1ff;
}

.montage-filmstrip .template-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 14px 0 18px;
}

.inspector-tabs button {
  height: 32px;
  border: 1px solid #dce4ea;
  border-radius: 8px;
  color: #64717a;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.inspector-tabs button.active {
  border-color: #1f7a70;
  color: #155b53;
  background: #effaf7;
}

.ratio-lock,
.custom-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin: -2px 0 12px;
  color: #3e4659;
  font-size: 13px;
  font-weight: 850;
}

.ratio-lock input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: #1f7a70;
}

.custom-color-row {
  justify-content: space-between;
  margin: 10px 0 0;
}

.custom-color-row input {
  width: 52px;
  height: 30px;
  padding: 2px;
  border-radius: 8px;
}

.scale-control strong {
  min-width: 44px;
  text-align: right;
  font-size: 13px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch {
  width: 22px;
  height: 22px;
  border: 1px solid #dce2ee;
  border-radius: 4px;
  cursor: pointer;
}

.swatch.active {
  box-shadow: 0 0 0 2px #1f7a70;
}

.download-wide {
  margin-top: 14px;
  height: 46px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #172033;
  cursor: pointer;
  width: 100%;
  font-weight: 900;
}

.montage-mobile-download {
  display: none;
}

.commerce-workbench {
  display: block;
  min-height: calc(100vh - 68px);
  padding: 0 18px 42px;
  background: #fff;
}

.viral-video-workbench {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: calc(100vh - 68px);
  min-height: calc(100vh - 68px);
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(52, 71, 130, 0.05), rgba(21, 151, 128, 0.045) 44%, rgba(255, 255, 255, 0) 76%),
    #f7f9fc;
}

.viral-video-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 12px;
  border-right: 1px solid #e3e8f0;
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.97), rgba(249, 251, 253, 0.97)),
    #f9fbfe;
  box-shadow: 8px 0 24px rgba(35, 45, 70, 0.026);
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}

.viral-agent-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0 1px;
}

.viral-agent-top span {
  color: #8a93a3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.viral-agent-top strong {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #647087;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 850;
}

.viral-video-panel .panel-title {
  margin: 2px 0 0;
  color: #151b2b;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: 0;
}

.viral-agent-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  padding: 0 1px 2px;
  color: #7c8494;
  font-size: 12px;
  font-weight: 760;
}

.viral-agent-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.viral-agent-metrics span + span::before {
  width: 1px;
  height: 10px;
  margin-right: 3px;
  background: #d8dee8;
  content: "";
}

.viral-agent-metrics strong {
  color: #283246;
  font-weight: 900;
}

.viral-agent-metrics em {
  color: #8a93a4;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.viral-flow-rail {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0 2px;
}

.viral-flow-rail span {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #9aa3b2;
  font-size: 11px;
  font-weight: 820;
}

.viral-flow-rail span + span::before {
  width: 14px;
  height: 1px;
  margin: 0 7px;
  background: #dce3ed;
  content: "";
}

.viral-flow-rail span.is-active,
.viral-flow-rail span.is-done {
  color: #137657;
  background: transparent;
}

.viral-control-group {
  display: grid;
  gap: 6px;
  padding: 10px 0 0;
  border-top: 1px solid #e2e8f1;
  background: transparent;
}

.viral-control-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.viral-control-heading span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 18px;
  border-radius: 6px;
  color: #718097;
  background: #eef3f8;
  font-size: 11px;
  font-weight: 850;
}

.viral-control-heading strong {
  overflow: hidden;
  color: #253047;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-control-heading em {
  color: #7f8899;
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
}

.viral-upload-strip {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 5px;
  border: 1px dashed #d9e2ee;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.viral-upload-strip.has-upload {
  border-style: solid;
  background: rgba(255, 255, 255, 0.82);
}

.viral-upload-thumb {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 9px;
  background:
    linear-gradient(135deg, #eef2f7, #fbfcfe),
    #f6f8fb;
}

.viral-upload-thumb span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #b9c4d4;
  border-radius: 7px;
  color: #526071;
  font-size: 12px;
  font-weight: 920;
}

.viral-upload-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.viral-upload-meta strong,
.viral-upload-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-upload-meta strong {
  color: #232c3f;
  font-size: 13px;
  font-weight: 880;
}

.viral-upload-meta span {
  color: #8b94a5;
  font-size: 11px;
  font-weight: 720;
}

.viral-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.viral-upload-actions button {
  min-width: 48px;
  height: 25px;
  padding: 0 9px;
  border: 1px solid #e0e7f0;
  border-radius: 7px;
  color: #2e3749;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 820;
}

.viral-upload-actions button:first-child {
  color: #fff;
  border-color: #263149;
  background: #263149;
}

.viral-control-field {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.viral-control-field span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #677286;
  font-size: 11px;
  font-weight: 800;
}

.viral-control-field span em {
  color: #9098a8;
  font-size: 11px;
  font-style: normal;
}

.viral-control-field input,
.viral-control-field select,
.viral-control-field textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #232b3d;
  background: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 720;
  outline: none;
}

.viral-control-field input,
.viral-control-field select {
  height: 28px;
  padding: 0 10px;
}

.viral-control-url input {
  height: 29px;
}

.viral-control-field textarea {
  height: 38px;
  min-height: 0;
  padding: 7px 10px;
  resize: none;
  line-height: 1.45;
}

.viral-control-textarea.is-compact textarea {
  height: 34px;
  min-height: 0;
}

.viral-control-field input::placeholder,
.viral-control-field textarea::placeholder {
  color: #9da6b5;
  font-weight: 680;
}

.viral-control-field input:focus,
.viral-control-field select:focus,
.viral-control-field textarea:focus {
  border-color: #8b94e8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(102, 113, 217, 0.1);
}

.viral-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.viral-compact-grid .viral-control-field {
  grid-template-columns: 52px minmax(0, 1fr);
}

.viral-setting-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.viral-setting-row > span {
  color: #677286;
  font-size: 11px;
  font-weight: 800;
}

.viral-segment-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  min-height: 30px;
  padding: 3px;
  border: 1px solid #e1e7f0;
  border-radius: 9px;
  background: rgba(238, 243, 248, 0.72);
}

.viral-segment-control button {
  height: 22px;
  border: 0;
  border-radius: 7px;
  color: #6f7889;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 820;
}

.viral-segment-control button.active {
  color: #253047;
  background: #fff;
  box-shadow: 0 4px 12px rgba(39, 50, 78, 0.08);
}

.viral-segment-control.is-wide button {
  font-size: 11px;
}

.viral-voice-control {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid #dfe6ef;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.66);
}

.viral-voice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.viral-voice-options button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #647084;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.viral-voice-options button.active {
  border-color: #9bd9cc;
  color: #0f766e;
  background: #eaf8f4;
}

.viral-voice-options strong,
.viral-voice-options span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-voice-options strong {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

.viral-voice-options span {
  color: #7f8899;
  font-size: 10px;
  font-weight: 760;
}

.viral-voice-preset {
  grid-template-columns: 62px minmax(0, 1fr);
}

.viral-voice-note {
  margin: 0;
}

.viral-brief-group {
  gap: 7px;
}

.viral-control-textarea {
  align-items: start;
  grid-template-columns: 80px minmax(0, 1fr);
}

.viral-control-textarea span {
  display: block;
  line-height: 1.25;
  white-space: nowrap;
}

.viral-control-textarea span em {
  display: block;
  margin-top: 2px;
}

.viral-video-stage {
  display: grid;
  align-content: stretch;
  min-width: 0;
  height: calc(100vh - 68px);
  min-height: 0;
  padding: 22px 36px 22px 28px;
  overflow: hidden;
}

.viral-video-studio-shell {
  display: grid;
  grid-template-columns: minmax(640px, 1fr) 344px;
  gap: 24px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
}

.viral-video-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.viral-video-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 2px 2px 0;
}

.viral-video-stage-head span {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border: 1px solid #dfe5f1;
  border-radius: 999px;
  color: #5360c9;
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
}

.viral-video-stage-head h2 {
  margin: 7px 0 0;
  color: #1e2536;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 950;
}

.viral-video-board {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) 36px minmax(280px, 1fr) 36px minmax(150px, 0.55fr);
  gap: 0;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  max-width: none;
}

.viral-remix-board {
  min-height: 0;
}

.viral-remix-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e8f1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(34, 45, 74, 0.052);
}

.viral-remix-reference {
  background:
    radial-gradient(circle at 50% 24%, rgba(99, 102, 241, 0.055), transparent 36%),
    #fff;
}

.viral-remix-output {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92)),
    #fff;
}

.viral-remix-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid #edf1f6;
  background: rgba(255, 255, 255, 0.7);
}

.viral-remix-card-head span {
  color: #687286;
  font-size: 12px;
  font-weight: 900;
}

.viral-remix-card-head b {
  color: #15986f;
  font-size: 12px;
  font-weight: 950;
}

.viral-remix-reference-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcff, #f6f8fb);
}

.viral-remix-reference-media img {
  position: absolute;
  inset: clamp(14px, 2vh, 22px);
  width: calc(100% - clamp(28px, 4vh, 44px));
  height: calc(100% - clamp(28px, 4vh, 44px));
  object-fit: contain;
}

.viral-remix-reference-media strong {
  color: #8a93a6;
  font-size: 13px;
  font-weight: 900;
}

.viral-remix-phone {
  position: relative;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(146px, calc(100% - 24px));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(25, 32, 49, 0.08);
  border-radius: 18px;
  color: #dbe4f3;
  background:
    radial-gradient(circle at 50% 36%, rgba(116, 131, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #1d2637, #111827),
    #111827;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.viral-remix-phone strong {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.viral-remix-phone span {
  display: block;
  max-width: 118px;
  margin-top: 6px;
  overflow: hidden;
  color: #9ba6bb;
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-remix-phone em {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #6ee7b7;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.viral-remix-phone video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viral-remix-arrow {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: #cfd7e5;
}

.viral-remix-arrow::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #cfd7e5;
  border-right: 2px solid #cfd7e5;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.viral-video-source,
.viral-video-motion-map {
  overflow: hidden;
  border: 1px solid #e2e8f1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(34, 45, 74, 0.052);
}

.viral-video-source {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.viral-video-card-label,
.viral-video-motion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f6;
  background: rgba(255, 255, 255, 0.62);
}

.viral-video-card-label span,
.viral-video-motion-head span {
  color: #687286;
  font-size: 12px;
  font-weight: 900;
}

.viral-video-card-label b,
.viral-video-motion-head b {
  color: #22a06b;
  font-size: 12px;
  font-weight: 950;
}

.viral-video-source-media {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(99, 102, 241, 0.055), transparent 38%),
    linear-gradient(180deg, #fbfcff, #f4f7fb);
}

.viral-video-source img {
  position: absolute;
  inset: clamp(14px, 2vh, 22px);
  display: block;
  width: calc(100% - clamp(28px, 4vh, 44px));
  height: calc(100% - clamp(28px, 4vh, 44px));
  max-width: calc(100% - clamp(28px, 4vh, 44px));
  max-height: calc(100% - clamp(28px, 4vh, 44px));
  object-fit: contain;
}

.viral-video-source strong {
  display: grid;
  place-items: center;
  color: #8a93a6;
  font-size: 14px;
}

.viral-video-motion-map {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  margin-top: 12px;
  align-self: stretch;
}

.viral-video-motion-visual {
  position: relative;
  grid-row: 1 / 3;
  height: auto;
  min-height: 132px;
  margin: 12px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(32, 38, 58, 0.94), rgba(56, 67, 102, 0.88)),
    #20263a;
}

.viral-video-motion-visual::before {
  position: absolute;
  inset: 20px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.viral-video-motion-visual::after {
  position: absolute;
  right: 24px;
  bottom: 20px;
  left: 24px;
  height: 4px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, #7c6cff, #28d19f 64%, #ffcf6d);
}

.viral-video-motion-visual span {
  position: absolute;
  width: 44px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

.viral-video-motion-visual span:nth-child(1) {
  top: 44px;
  left: 42px;
  transform: rotate(-8deg);
}

.viral-video-motion-visual span:nth-child(2) {
  top: 34px;
  left: calc(50% - 22px);
  transform: scale(1.08);
}

.viral-video-motion-visual span:nth-child(3) {
  top: 46px;
  right: 44px;
  transform: rotate(7deg);
}

.viral-video-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: stretch;
  padding: 0 12px 12px 0;
}

.viral-video-timeline div {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 4px;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid #edf1f6;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(42, 54, 92, 0.035);
}

.viral-video-timeline b {
  color: #6d5cf0;
  font-size: 11px;
  font-weight: 900;
}

.viral-video-timeline strong {
  color: #30374a;
  font-size: 12px;
  font-weight: 900;
}

.viral-video-timeline em {
  color: #8a94a8;
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
}

.viral-video-side-stack {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  height: 100%;
  align-content: stretch;
}

.viral-delivery-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(34, 45, 74, 0.052);
}

.viral-delivery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf1f6;
}

.viral-delivery-head span {
  display: block;
  color: #7b8496;
  font-size: 12px;
  font-weight: 850;
}

.viral-delivery-head strong {
  display: block;
  margin-top: 4px;
  color: #172033;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 950;
}

.viral-delivery-head em {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  color: #5460d4;
  background: #f2f4ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.viral-delivery-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.viral-delivery-metrics div {
  display: grid;
  gap: 5px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 10px;
  background: #fbfcff;
}

.viral-delivery-metrics span {
  color: #8a93a6;
  font-size: 11px;
  font-weight: 850;
}

.viral-delivery-metrics strong {
  overflow: hidden;
  color: #243047;
  font-size: 12px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-delivery-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.viral-delivery-actions .commerce-result-download,
.viral-delivery-actions .commerce-copy-link {
  height: 36px;
  border-radius: 9px;
  font-size: 12px;
}

.viral-video-result-card {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  border-color: #e4eaf2;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(35, 45, 74, 0.058);
}

.viral-video-result-card .commerce-result-title {
  grid-column: 1 / -1;
  margin-bottom: 0;
  padding-bottom: 10px;
}

.viral-video-result-card .commerce-result-title h2 {
  font-size: 16px;
}

.viral-video-result-card .commerce-result-title span {
  height: 24px;
  padding: 0 9px;
  background: #f4f6fb;
  font-size: 11px;
}

.viral-video-result-preview {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  place-items: center;
  aspect-ratio: 9 / 16;
  width: 100%;
  height: 100%;
  max-height: 204px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(25, 32, 49, 0.08);
  border-radius: 16px;
  color: #8a93a5;
  background:
    radial-gradient(circle at 50% 36%, rgba(116, 131, 255, 0.2), transparent 28%),
    linear-gradient(180deg, #1c2435, #121826),
    #161b28;
  font-size: 13px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.viral-video-result-preview.has-result {
  border-style: solid;
  background: #111827;
}

.viral-video-result-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viral-video-empty-phone {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #cbd3e3;
  text-align: center;
}

.viral-video-empty-phone span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, #7c6cff, #28d19f);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06);
}

.viral-video-empty-phone strong {
  color: #fff;
  font-size: 12px;
  font-weight: 880;
}

.viral-video-empty-phone em {
  color: #9ba6bb;
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.viral-video-result-card .commerce-result-meta {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  overflow: hidden;
  border: 1px solid #e8edf4;
  border-radius: 9px;
  background: rgba(250, 252, 255, 0.72);
  margin-bottom: 0;
}

.viral-video-result-card .commerce-result-meta div {
  min-height: 24px;
  padding: 0 8px;
  border-bottom-color: #edf1f6;
  font-size: 11px;
}

.viral-video-result-card .commerce-result-meta strong {
  color: #263046;
  font-size: 10px;
  font-weight: 880;
}

.viral-video-result-card .commerce-result-actions {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
  padding-right: 0;
}

.viral-video-result-card .commerce-result-download,
.viral-video-result-card .commerce-copy-link {
  height: 33px;
  border-radius: 8px;
  font-size: 12px;
}

.viral-video-result-card .commerce-result-download:disabled {
  color: rgba(255, 255, 255, 0.78);
  background: #dcd7fb;
  box-shadow: none;
}

.viral-video-side-stack .commerce-record-strip {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding-top: 0;
}

.viral-video-side-stack .commerce-record-head {
  align-items: baseline;
  margin-bottom: 8px;
  color: #151b2b;
  font-size: 14px;
}

.viral-video-side-stack .commerce-record-head strong {
  font-weight: 920;
}

.viral-video-side-stack .commerce-record-head span {
  color: #8c94a4;
  font-size: 11px;
  font-weight: 760;
}

.viral-video-side-stack .commerce-creation-empty {
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
  border-radius: 9px;
  color: #8c94a4;
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.commerce-form-card {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding-top: 0;
}

.commerce-panel-head {
  min-height: 38px;
}

.commerce-panel-head span {
  color: #7a8294;
  font-size: 12px;
  font-weight: 850;
}

.commerce-form-card .panel-title {
  margin: 0 0 14px;
  color: #202336;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 900;
}

.commerce-panel-head p {
  display: none;
}

.commerce-form-card .point-strip {
  min-height: 39px;
  margin: 0 0 19px;
  padding: 0 12px;
  align-items: center;
  border-color: #edf0f6;
  color: #515a6d;
  background: #fff;
  box-shadow: none;
}

.commerce-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 10px;
}

.commerce-form-spacer {
  min-height: 151px;
}

.commerce-upload-section {
  min-width: 0;
}

.commerce-panel-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.commerce-panel-section + .commerce-panel-section {
  margin-top: 0;
}

.commerce-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 9px;
  color: #222b3e;
  font-size: 13px;
  font-weight: 850;
}

.commerce-section-title strong {
  overflow: hidden;
  color: #687386;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
}

.commerce-field-head strong,
.commerce-suite-field span {
  color: #2f3547;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.commerce-field-head i,
.commerce-suite-field i {
  display: none;
}

.commerce-field-head em,
.commerce-suite-field em {
  display: none;
}

.commerce-field-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid #dedcf5;
  border-radius: 8px;
  color: #6d5cf0;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.commerce-suite-upload {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  width: 214px;
  height: 124px;
  min-height: 124px;
  padding: 16px 18px;
  border: 1px dashed #d7dce8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.commerce-suite-upload.has-upload {
  border-style: solid;
  border-color: #d7d1ff;
  background: #fbfaff;
}

.commerce-upload-icon {
  display: block;
  width: 39px;
  height: 29px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 33% 36%, #ffffff 0 2px, transparent 3px),
    linear-gradient(135deg, #7a6cff, #e75fb8);
  box-shadow: 0 8px 18px rgba(108, 92, 240, 0.2);
}

.commerce-upload-actions {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  opacity: 0;
  pointer-events: none;
}

.commerce-suite-upload:hover .commerce-upload-actions,
.commerce-suite-upload:focus-within .commerce-upload-actions {
  opacity: 1;
  pointer-events: auto;
}

.commerce-upload-actions button {
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.commerce-upload-copy {
  display: grid;
  gap: 4px;
  color: #30374a;
  text-align: center;
}

.commerce-upload-copy strong {
  color: #6b7280;
  font-size: 14px;
  font-weight: 850;
}

.commerce-upload-copy span {
  color: #8b8f9d;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.commerce-upload-thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.commerce-upload-thumbs span {
  width: 38px;
  height: 38px;
  border: 1px solid #e3e0ef;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.commerce-suite-field {
  display: grid;
  gap: 10px;
}

.commerce-platform-select {
  gap: 0;
}

.commerce-suite-field input,
.commerce-suite-field select,
.commerce-copy-field textarea {
  width: 100%;
  border: 1px solid #e5e7ef;
  border-radius: 10px;
  color: #252b3b;
  background: #fff;
  font-size: 15px;
  font-weight: 760;
  outline: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.commerce-suite-field input:focus,
.commerce-suite-field select:focus,
.commerce-copy-field textarea:focus {
  border-color: #b8aff8;
  box-shadow: 0 0 0 3px rgba(109, 92, 240, 0.1);
}

.commerce-suite-field input,
.commerce-suite-field select {
  height: 43px;
  padding: 0 15px;
}

.commerce-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commerce-platform-site-row,
.commerce-language-category-row,
.commerce-style-product-row {
  grid-column: 1 / -1;
}

.commerce-form-row .commerce-form-section,
.commerce-form-row .commerce-suite-field {
  min-width: 0;
}

.commerce-meta-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commerce-meta-fields .commerce-suite-field {
  min-width: 0;
  gap: 0;
}

.commerce-meta-fields .commerce-suite-field > span,
.commerce-meta-fields label.commerce-suite-field > span {
  display: none !important;
}

.commerce-meta-fields .commerce-suite-field select,
.commerce-meta-fields .commerce-suite-field select:focus {
  height: 43px;
  min-height: 43px;
  padding: 0 36px 0 14px;
}

.viral-video-duration-note {
  min-height: 14px;
  color: #697386;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.viral-video-panel .viral-action-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 8px;
  margin: 0 -4px -2px;
  padding: 8px 4px 4px;
  background: linear-gradient(180deg, rgba(249, 251, 255, 0), #f9fbff 30%);
  z-index: 3;
}

.viral-video-panel .commerce-reset-btn,
.viral-video-panel .commerce-suite-submit {
  height: 38px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 950;
}

.viral-video-panel .commerce-reset-btn {
  color: #4f5a6f;
  border: 1px solid #dfe6f0;
  background: #fff;
}

.viral-video-panel .commerce-suite-submit {
  color: #fff;
  background:
    linear-gradient(135deg, #20283b, #4c55d5 58%, #15986f);
  box-shadow: 0 12px 26px rgba(76, 85, 213, 0.23);
}

.commerce-suite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.commerce-output-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.commerce-output-section,
.commerce-copy-field,
.commerce-submit-bar {
  grid-column: 1 / -1;
}

.commerce-output-option {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
  min-height: 41px;
  padding: 0 12px;
  border: 1px solid #e8e8ef;
  border-radius: 9px;
  color: #282d3c;
  background: #fff;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 14px rgba(28, 34, 52, 0.025);
}

.commerce-output-option strong,
.commerce-output-option span,
.commerce-output-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-output-option strong {
  font-size: 14px;
  font-weight: 850;
}

.commerce-output-option span {
  display: none;
}

.commerce-output-option small {
  position: absolute;
  top: 6px;
  right: 8px;
  color: #7d6af2;
  font-size: 10px;
  font-weight: 900;
}

.commerce-output-option.active {
  border-color: #7d6af2;
  color: #1f2433;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(125, 106, 242, 0.35);
}

.commerce-output-option.is-suite {
  border-color: #d9d6f3;
  background: #fff;
}

.commerce-output-option.is-suite.active {
  border-color: #7d6af2;
  color: #202336;
  background: #fff;
}

.commerce-output-option.is-suite span {
  color: #7c8697;
}

.commerce-copy-field textarea {
  display: block;
  min-height: 86px;
  padding: 12px 14px 33px;
  resize: none;
  line-height: 1.5;
}

.commerce-copy-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: -32px;
  padding: 0 12px 9px;
  color: #737b8d;
  font-size: 12px;
  font-weight: 800;
}

.commerce-copy-footer button {
  color: #737b8d;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.commerce-detail-module-section {
  margin-top: 10px;
  padding: 11px 12px 12px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fbfcff;
}

.commerce-module-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #343b4f;
  font-size: 13px;
  font-weight: 850;
}

.commerce-module-summary strong {
  color: #737b8d;
  font-size: 12px;
  font-weight: 850;
}

.commerce-preview-stage {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  align-content: start;
  gap: 14px;
  min-width: 0;
  width: calc(100% + 36px);
  margin: 24px -18px 0;
  padding: 26px 18px 34px;
  background:
    linear-gradient(180deg, rgba(249, 251, 254, 0.96), rgba(241, 246, 251, 0.96)),
    #f5f8fb;
}

.commerce-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: min(1080px, 100%);
  margin: 0 auto;
}

.commerce-stage-head span {
  color: #7b8495;
  font-size: 12px;
  font-weight: 850;
}

.commerce-stage-head h2 {
  margin: 4px 0 0;
  color: #172033;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: 0;
}

.commerce-stage-head strong {
  color: #7068d8;
  font-size: 13px;
  font-weight: 900;
}

.commerce-stage-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 360px;
}

.commerce-stage-pills span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(112, 104, 216, 0.14);
  border-radius: 8px;
  color: #485468;
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 880;
  box-shadow: 0 6px 16px rgba(57, 66, 105, 0.04);
}

.commerce-visual-preview {
  position: relative;
  display: grid;
  gap: 10px;
  align-self: start;
  width: min(1080px, 100%);
  min-height: 0;
  margin: 0 auto;
}

.commerce-artboard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: min(620px, calc(100vh - 168px));
  padding: 16px;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(36, 48, 76, 0.075);
}

.commerce-artboard-head,
.commerce-artboard-foot,
.commerce-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.commerce-artboard-head {
  margin-bottom: 12px;
}

.commerce-artboard-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.commerce-artboard-head span,
.commerce-artboard-foot span,
.commerce-preview-label span {
  color: #7a8294;
  font-size: 12px;
  font-weight: 850;
}

.commerce-artboard-head strong,
.commerce-preview-label strong {
  color: #4054b2;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.commerce-artboard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.commerce-artboard-actions .commerce-copy-link,
.commerce-artboard-actions .commerce-result-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 72px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.commerce-artboard-actions .commerce-copy-link {
  border: 1px solid #dfe6ef;
  color: #3b4658;
  background: #fff;
}

.commerce-artboard-surface {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(14px, 2.4vw, 28px);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(228, 234, 244, 0.58) 25%, transparent 25% 50%, rgba(228, 234, 244, 0.58) 50% 75%, transparent 75%) 0 0/26px 26px,
    #f4f7fb;
}

.commerce-artboard-foot {
  margin-top: 12px;
}

.commerce-artboard-foot strong {
  min-width: 0;
  overflow: hidden;
  color: #30374a;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-main-art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(520px, 100%, calc(100vh - 260px));
  min-width: 300px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(30, 42, 72, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #858ea1;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 16px 40px rgba(35, 45, 78, 0.1);
}

.commerce-main-art em {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(25, 31, 48, 0.68);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.commerce-main-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.commerce-preview-browser {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: auto 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  max-width: min(410px, calc(100% - 24px));
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background: rgba(20, 27, 42, 0.78);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(12px);
}

.commerce-browser-meta {
  display: grid;
  gap: 2px;
  min-width: 88px;
  max-width: 142px;
  padding: 0 7px;
}

.commerce-browser-meta strong,
.commerce-browser-meta span {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-browser-meta strong {
  font-size: 12px;
  font-weight: 930;
}

.commerce-browser-meta span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 820;
}

.commerce-browser-list {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.commerce-browser-list::-webkit-scrollbar {
  display: none;
}

.commerce-browser-arrow,
.commerce-browser-item {
  border: 0;
  color: #e7ebf4;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.commerce-browser-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 42px;
  border-radius: 7px;
  font-size: 21px;
  line-height: 1;
  font-weight: 650;
}

.commerce-browser-item {
  display: grid;
  grid-template-columns: auto minmax(46px, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 88px;
  height: 42px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  text-align: left;
}

.commerce-browser-item span {
  color: rgba(231, 235, 244, 0.68);
  font-size: 10px;
  font-weight: 900;
}

.commerce-browser-item strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-browser-item.active {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.2);
}

.commerce-preview-label {
  min-height: 36px;
  padding: 0 2px;
}

.commerce-preview-label strong {
  min-width: 0;
  overflow: hidden;
  color: #485468;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-preview-modules {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e6ebf4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 38px rgba(35, 45, 78, 0.065);
}

.commerce-plan-list {
  display: grid;
  gap: 8px;
}

.commerce-plan-list span {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  color: #4e576c;
  background: #f8faff;
  font-size: 12px;
  font-weight: 900;
}

.commerce-plan-list i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 999px;
  color: #7068d8;
  background: #f0edff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.commerce-plan-list b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-plan-note {
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding: 12px;
  border-radius: 10px;
  color: #7b8495;
  background: #f6f8fd;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 780;
}

.commerce-plan-note strong {
  color: #30374a;
  font-size: 13px;
  font-weight: 900;
}

.commerce-module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.commerce-module-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 31px;
  padding: 5px 9px 5px 6px;
  border: 1px solid #e4eaf3;
  border-radius: 999px;
  color: #4f5a6e;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.commerce-module-chip b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  color: #7c8798;
  background: #f1f4f8;
  font-size: 10px;
  font-weight: 930;
}

.commerce-module-chip strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-module-chip.active {
  border-color: #a7cfc1;
  color: #0e5f4a;
  background: #f0fbf7;
}

.commerce-module-chip.active b {
  color: #fff;
  background: #15986f;
}

.commerce-modules-toggle {
  display: block;
  margin: 10px auto 0;
  color: #177b61;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.commerce-submit-bar {
  display: grid;
  grid-template-columns: minmax(240px, 0.38fr);
  justify-content: end;
  gap: 10px;
  margin: -2px 0 0;
  padding: 0;
}

.commerce-suite-submit,
.commerce-reset-btn {
  height: 43px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 900;
}

.commerce-form-card .commerce-suite-submit {
  border: 0;
  color: #fff;
  background: #7666ed;
  box-shadow: 0 10px 22px rgba(118, 102, 237, 0.18);
}

.commerce-form-card .commerce-reset-btn {
  border: 1px solid #e5e7ef;
  color: #596174;
  background: #fff;
}

.commerce-creation-center {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  min-height: calc(100vh - 76px);
  padding: 22px 22px 18px;
  border-left: 1px solid #e6ebf3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.98)),
    #fff;
  overflow-y: auto;
}

.commerce-result-card {
  padding: 20px;
  border: 1px solid #e6ebf4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 38px rgba(35, 45, 78, 0.065);
}

.commerce-result-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf1f7;
}

.commerce-result-title h2 {
  margin: 0;
  color: #202638;
  font-size: 18px;
  font-weight: 900;
}

.commerce-result-title span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #7b8495;
  background: #f1f4fa;
  font-size: 12px;
  font-weight: 900;
}

.commerce-result-title span.is-done {
  color: #128c75;
  background: #e9fbf6;
}

.commerce-result-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1.28;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px dashed #dbe3ef;
  border-radius: 10px;
  color: #8a93a5;
  background: #f8faff;
  font-size: 13px;
  font-weight: 850;
}

.commerce-result-preview.has-result {
  border-style: solid;
  border-color: #e2e7f1;
  background: #fff;
}

.commerce-result-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.commerce-result-meta {
  display: grid;
  gap: 0;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: rgba(248, 250, 255, 0.68);
}

.commerce-result-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid #edf1f7;
  color: #7c8597;
  font-size: 13px;
  font-weight: 850;
}

.commerce-result-meta div:last-child {
  border-bottom: 0;
}

.commerce-result-meta strong {
  overflow: hidden;
  color: #30374a;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-result-meta strong.is-done {
  color: #18a989;
}

.commerce-result-actions {
  display: grid;
  gap: 9px;
}

.commerce-result-download,
.commerce-copy-link {
  height: 44px;
  border-radius: 9px;
}

.commerce-result-download:disabled {
  background: #b7aef6;
}

.commerce-result-tip {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  color: #697386;
  background: #f5f8ff;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 760;
}

.commerce-result-tip strong {
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.commerce-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.commerce-result-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0;
  border: 1px solid #e1deec;
  border-radius: 12px;
  background: #f8f7fc;
}

.commerce-result-tile img,
.commerce-result-tile i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commerce-result-tile figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, 0.72));
}

.commerce-result-tile strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-record-strip {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 14px 16px 16px;
  border: 1px solid #e5ebf3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.commerce-record-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 11px;
  color: #172033;
  font-size: 15px;
  font-weight: 950;
}

.commerce-record-head span {
  color: #848b99;
  font-size: 12px;
}

.commerce-record-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.commerce-record-item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 8px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.commerce-record-item.active {
  border-color: #15986f;
  box-shadow: 0 8px 18px rgba(21, 152, 111, 0.08);
}

.commerce-record-item span {
  grid-row: span 2;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #f4f2fb center/cover;
}

.commerce-record-item strong,
.commerce-record-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-record-item strong {
  color: #172033;
  font-size: 13px;
  font-weight: 950;
}

.commerce-record-item small {
  color: #747b8b;
  font-size: 12px;
  font-weight: 800;
}

.commerce-record-item em {
  grid-row: 1 / 3;
  grid-column: 3;
  padding: 5px 7px;
  border-radius: 7px;
  color: #177b61;
  background: #edf9f5;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.commerce-creation-empty {
  margin: 0;
  padding: 28px 18px;
  border: 1px dashed #d9d5e9;
  border-radius: 12px;
  color: #747b8b;
  background: #fbfaff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
  text-align: center;
}

.commerce-library-modal {
  width: min(1040px, calc(100% - 34px));
  padding: 28px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%),
    #fff;
}

.commerce-library-head {
  display: grid;
  gap: 6px;
  padding-right: 54px;
  margin-bottom: 18px;
}

.commerce-library-head span {
  color: #7068d8;
  font-size: 13px;
  font-weight: 900;
}

.commerce-library-head h2 {
  margin: 0;
  color: #202638;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 950;
}

.commerce-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px;
}

.commerce-library-tabs button {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border: 1px solid #e3e8f2;
  border-radius: 999px;
  color: #596174;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.commerce-library-tabs button.active {
  border-color: #d7d1ff;
  color: #655fc8;
  background: #f2f0ff;
}

.commerce-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.commerce-library-card {
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #e4eaf3;
  border-radius: 12px;
  color: #30374a;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 10px 24px rgba(35, 45, 78, 0.055);
}

.commerce-library-card.active {
  border-color: #cfc7ff;
  background: #fbfaff;
  box-shadow: 0 14px 32px rgba(104, 77, 246, 0.11);
}

.commerce-library-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 9px;
  background: #edf1f7 center/cover no-repeat;
}

.commerce-library-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.commerce-library-card b {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: #7068d8;
  background: #f0edff;
  font-size: 11px;
  font-weight: 950;
}

.commerce-library-card strong,
.commerce-library-card small,
.commerce-library-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-library-card strong {
  color: #1f2638;
  font-size: 15px;
  font-weight: 950;
}

.commerce-library-card small {
  color: #727b8d;
  font-size: 12px;
  font-weight: 780;
}

.commerce-library-card em {
  color: #8a93a5;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(18, 21, 33, 0.55);
}

.modal {
  position: relative;
  width: min(880px, calc(100% - 34px));
  max-height: calc(100vh - 34px);
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #e8ebf3;
  border-radius: 50%;
  color: #677084;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(45, 52, 76, 0.12);
  cursor: pointer;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.modal-close:hover,
.modal-close:focus-visible {
  color: #2d3242;
  background: #fff;
  box-shadow: 0 16px 34px rgba(45, 52, 76, 0.18);
  outline: none;
  transform: translateY(-1px);
}

.generation-record-modal {
  width: min(1120px, calc(100% - 34px));
  border-radius: 12px;
  overflow: hidden;
}

.generation-record-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 0;
  min-height: min(720px, calc(100vh - 70px));
  background: #fff;
}

.generation-record-preview {
  min-height: 480px;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #f6f7fb;
}

.generation-record-preview img,
.generation-record-preview video {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 118px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(29, 35, 54, 0.14);
}

.generation-record-preview video {
  background: #11131b;
}

.generation-record-missing {
  display: grid;
  place-items: center;
  width: min(420px, 100%);
  min-height: 240px;
  border: 1px dashed #d9dde8;
  border-radius: 8px;
  color: #8b91a1;
  font-weight: 800;
}

.generation-record-detail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: 24px 22px;
  border-left: 1px solid #eceef5;
  background: #fff;
}

.generation-record-title {
  display: grid;
  gap: 4px;
  padding-right: 44px;
}

.generation-record-title span,
.generation-record-prompt span {
  color: #8a90a0;
  font-size: 12px;
  font-weight: 800;
}

.generation-record-title h3 {
  margin: 0;
  color: #151722;
  font-size: 22px;
  line-height: 1.25;
}

.generation-record-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.generation-record-meta div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #eef0f6;
  border-radius: 8px;
  background: #fafbfe;
}

.generation-record-meta span {
  color: #8b91a1;
  font-size: 11px;
  font-weight: 800;
}

.generation-record-meta strong {
  min-width: 0;
  color: #252936;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-record-prompt {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.generation-record-prompt p {
  margin: 0;
  min-height: 164px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #eef0f6;
  border-radius: 8px;
  background: #fafbfe;
  color: #343846;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.65;
  white-space: pre-wrap;
}

.generation-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.generation-record-actions .task-download {
  margin-top: 0;
}

@media (max-width: 760px) {
  .generation-record-modal {
    width: calc(100% - 20px);
  }

  .generation-record-browser {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .generation-record-preview {
    min-height: 280px;
    padding: 14px;
  }

  .generation-record-preview img,
  .generation-record-preview video {
    max-height: 48vh;
  }

  .generation-record-detail {
    border-left: 0;
    border-top: 1px solid #eceef5;
    padding: 18px 16px;
  }
}

/* Shared functional behavior for smart, portrait, and product matting workbenches. */
.ordinary-kind-matting .matting-background-image-picker,
.matting-result-editor-modal .matting-background-image-picker {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0 8px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px dashed #d7dfea;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  text-align: left;
}

.ordinary-kind-matting .matting-background-image-picker > span,
.matting-result-editor-modal .matting-background-image-picker > span {
  grid-row: 1 / 3;
  width: 40px;
  height: 34px;
  border-radius: 5px;
  background: #f0f3f8 center / cover no-repeat;
}

.ordinary-kind-matting .matting-background-image-picker b,
.ordinary-kind-matting .matting-background-image-picker small,
.matting-result-editor-modal .matting-background-image-picker b,
.matting-result-editor-modal .matting-background-image-picker small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordinary-kind-matting .matting-background-image-picker small,
.matting-result-editor-modal .matting-background-image-picker small {
  color: #8a94a6;
  font-size: 10px;
}

.ordinary-kind-matting .matting-custom-color,
.matting-result-editor-modal .matting-custom-color {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.ordinary-kind-matting .matting-custom-color.active,
.matting-result-editor-modal .matting-custom-color.active {
  border-color: #725cf4;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #725cf4;
}

.ordinary-kind-matting .matting-custom-color input,
.matting-result-editor-modal .matting-custom-color input {
  position: absolute;
  inset: -8px;
  width: 46px;
  height: 46px;
  opacity: 0;
  cursor: pointer;
}

.ordinary-kind-matting .matting-custom-color span,
.matting-result-editor-modal .matting-custom-color span {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  pointer-events: none;
}

.ordinary-kind-matting[data-matting-background-mode="solid"] .matting-canvas.after,
.ordinary-kind-matting[data-matting-background-mode="custom"] .matting-canvas.after,
.ordinary-kind-matting[data-matting-background-mode="solid"] .matting-canvas.single,
.ordinary-kind-matting[data-matting-background-mode="custom"] .matting-canvas.single {
  background-color: var(--matting-background-color, #fff);
  background-image: var(--matting-image, none);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ordinary-kind-matting[data-matting-background-mode="image"] .matting-canvas.after,
.ordinary-kind-matting[data-matting-background-mode="image"] .matting-canvas.single {
  background-color: #fff;
  background-image: var(--matting-image, none), var(--matting-background-image, none);
  background-position: center, center;
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;
}

.ordinary-kind-matting.is-preview-panning .matting-stage {
  cursor: grab;
}

.ordinary-kind-matting.is-preview-panning .matting-stage:active {
  cursor: grabbing;
}

.ordinary-kind-matting.is-preview-fullscreen .matting-preview-section {
  position: fixed;
  inset: 16px;
  z-index: 2000;
  height: auto;
  border: 1px solid #dbe2ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(20, 28, 48, 0.24);
}

.ordinary-kind-matting.is-preview-fullscreen .matting-preview-workspace {
  height: 100%;
}

.ordinary-kind-matting .matting-zoom-controls button.active {
  color: #6d56f4;
  background: #f3f0ff;
}

.member-modal .modal-close {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 12px 28px rgba(93, 56, 170, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.member-modal .modal-close:hover,
.member-modal .modal-close:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.34);
}

.member-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 78px 18px 26px;
  color: #fff;
  background: linear-gradient(90deg, #7d65f7, #ff5cc8);
}

.member-heading {
  display: grid;
  gap: 4px;
}

.member-heading span {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.86;
}

.member-heading strong {
  font-size: 25px;
  line-height: 1.1;
}

.member-heading p {
  margin: 0;
  font-size: 13px;
  opacity: 0.88;
}

.member-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 220px;
  text-align: right;
}

.member-user span {
  font-size: 12px;
  opacity: 0.86;
}

.member-body {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 24px 24px;
}

.member-body h2 {
  margin: 0 0 12px;
  color: #252b3c;
  font-size: 19px;
  line-height: 1.2;
}

.benefit-list {
  display: grid;
  gap: 8px;
}

.benefit {
  padding: 11px 12px;
  border-radius: 12px;
  background: #f7f8ff;
}

.benefit h4 {
  margin: 0 0 4px;
  color: #262c3c;
  font-size: 14px;
}

.benefit p {
  margin: 0;
  color: #7b8192;
  font-size: 12px;
  line-height: 1.45;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.plan {
  min-height: 112px;
  padding: 12px 10px;
  border: 2px solid #edf0f7;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  cursor: pointer;
}

.plan.active {
  border-color: #7464f6;
  background: #f7f5ff;
}

.plan-name {
  font-weight: 900;
}

.plan .upload-hint {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.25;
}

.price {
  margin: 8px 0 3px;
  color: #6f61f5;
  font-size: 24px;
  font-weight: 900;
}

.line-price {
  color: #b1b7c6;
  font-size: 13px;
  text-decoration: line-through;
}

.pay-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #edf0f8;
  border-radius: 14px;
  background: #fafbff;
}

.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  color: #596174;
}

.payment-method-row {
  align-items: flex-start;
}

.payment-channel-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e5e8f3;
  border-radius: 12px;
  background: #fff;
}

.payment-channel {
  min-width: 82px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  color: #596174;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.payment-channel.active {
  color: #fff;
  background: linear-gradient(90deg, #6f63f5, #836ff8);
  box-shadow: 0 8px 18px rgba(111, 99, 245, 0.22);
}

.payment-status-card {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #e6e9f4;
  border-radius: 14px;
  background: #fff;
}

.payment-status-card .payment-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #697084;
  font-size: 13px;
}

.payment-status-card .payment-order-row strong {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  overflow-wrap: normal;
  color: #262c3c;
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-status-card .payment-qr-card {
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  color: #596174;
  text-align: center;
}

.payment-qr-object,
.payment-qr-placeholder {
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  margin: 0 auto;
  border: 1px solid #e9edf6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(32, 39, 57, 0.08);
}

.payment-qr-object {
  overflow: hidden;
  object-fit: contain;
}

.payment-qr-placeholder {
  display: grid;
  justify-content: center;
  gap: 8px;
  color: #697084;
  font-weight: 900;
}

.payment-qr-card span {
  color: #394154;
  font-size: 12px;
  font-weight: 900;
}

.payment-order-panel {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.payment-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.payment-status-line strong {
  color: #242b3d;
  font-size: 21px;
  font-weight: 950;
}

.payment-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #5d50d6;
  background: #f0edff;
  font-size: 13px;
  font-weight: 900;
}

.payment-order-meta {
  display: grid;
  gap: 6px;
}

.payment-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 7px;
}

.payment-link,
.secondary-btn.payment-refresh,
.secondary-btn.payment-recreate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
}

.payment-link {
  color: #fff;
  background: linear-gradient(90deg, #19b86a, #23c6a5);
}

.secondary-btn.payment-refresh,
.secondary-btn.payment-recreate {
  border: 1px solid #dfe4f1;
  color: #3e465c;
  background: #f8faff;
  cursor: pointer;
}

.payment-error {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #ffd4d4;
  border-radius: 10px;
  color: #c0393a;
  background: #fff4f4;
  font-size: 13px;
  line-height: 1.5;
}

.contact-modal {
  width: 268px;
  padding: 56px 26px 32px;
  text-align: center;
}

.user-center-modal {
  width: min(860px, calc(100% - 34px));
  padding: 24px;
}

.user-center-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-right: 48px;
}

.user-avatar-large {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1b2140, #ff5fa5 52%, #ffd45c);
}

.user-center-head span,
.user-center-summary span,
.user-center-account span,
.user-center-section-head span {
  color: #8c94a8;
  font-size: 12px;
  font-weight: 800;
}

.user-center-head h2 {
  margin: 4px 0 2px;
  color: #20263a;
  font-size: 24px;
  line-height: 1.15;
}

.user-center-head p {
  margin: 0;
  color: #6d7588;
  font-size: 13px;
}

.user-center-actions {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.user-center-actions .primary-btn,
.user-center-actions .ghost-btn,
.user-center-actions .secondary-btn {
  width: auto;
  min-width: 76px;
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
}

.user-center-actions .ghost-btn,
.user-center-actions .secondary-btn {
  border: 1px solid #dfe4f1;
  color: #3e465c;
  background: #f8faff;
}

.user-center-refresh {
  min-width: 72px;
  height: 36px;
  border: 1px solid #dfe4f1;
  border-radius: 8px;
  color: #3e465c;
  background: #f8faff;
  cursor: pointer;
  font-weight: 900;
}

.user-center-summary,
.user-center-account {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.user-center-summary div,
.user-center-account div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e8ecf5;
  border-radius: 8px;
  background: #fbfcff;
}

.user-center-summary strong,
.user-center-account strong {
  display: block;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  color: #242b3d;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.point-recharge-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e4e9f3;
  border-radius: 8px;
  background: #fbfcff;
}

.point-recharge-form {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(118px, auto) auto auto;
  align-items: end;
  gap: 10px;
}

.point-recharge-form label,
.point-recharge-form > div:not(.payment-channel-tabs) {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.point-recharge-form span {
  color: #8c94a8;
  font-size: 12px;
  font-weight: 900;
}

.point-recharge-form input {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #dfe4f1;
  border-radius: 8px;
  color: #242b3d;
  background: #fff;
  font-size: 14px;
  font-weight: 900;
}

.point-recharge-form strong {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: #242b3d;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}

.point-recharge-panel .primary-btn {
  min-height: 38px;
  border-radius: 8px;
  white-space: nowrap;
}

.recharge-center-modal {
  width: min(940px, calc(100% - 34px));
  padding: 0;
  overflow: hidden auto;
  background: #f7f8fc;
}

.recharge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 18px;
  align-items: center;
  padding: 26px 78px 24px 28px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 36%),
    linear-gradient(120deg, #246bfe 0%, #765cf4 48%, #ff5f9e 100%);
}

.recharge-hero span,
.recharge-balance-card span,
.recharge-balance-card small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.recharge-hero h2 {
  margin: 7px 0 6px;
  font-size: 30px;
  line-height: 1.12;
}

.recharge-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
}

.recharge-balance-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
}

.recharge-balance-card strong {
  color: #fff;
  font-size: 28px;
  line-height: 1.05;
}

.recharge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 14px;
  padding: 18px 20px 0;
}

.recharge-purchase-card,
.recharge-status-card,
.recharge-records,
.recharge-ledger-strip {
  border: 1px solid #e6eaf4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(37, 45, 70, 0.08);
}

.recharge-purchase-card,
.recharge-status-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 342px;
  padding: 18px;
}

.recharge-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.recharge-section-title h3 {
  margin: 0;
  color: #20263a;
  font-size: 17px;
}

.recharge-section-title span {
  color: #8c94a8;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.recharge-input-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
}

.recharge-amount-field,
.recharge-rate,
.recharge-pay-row > div {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.recharge-amount-field span,
.recharge-rate span,
.recharge-pay-row span {
  color: #8c94a8;
  font-size: 12px;
  font-weight: 900;
}

.recharge-amount-field input {
  width: 100%;
  height: 52px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid #dbe2f0;
  border-radius: 8px;
  color: #20263a;
  background: #fbfcff;
  font-size: 22px;
  font-weight: 950;
}

.recharge-rate {
  padding: 10px 12px;
  border: 1px solid #edf0f7;
  border-radius: 8px;
  background: #fbfcff;
}

.recharge-rate strong {
  color: #20263a;
  font-size: 15px;
}

.recharge-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.recharge-preset {
  display: grid;
  gap: 2px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid #e4e9f3;
  border-radius: 8px;
  color: #333b50;
  background: #fbfcff;
  cursor: pointer;
  text-align: left;
}

.recharge-preset strong {
  font-size: 20px;
}

.recharge-preset span {
  color: #8c94a8;
  font-size: 12px;
  font-weight: 900;
}

.recharge-preset.active {
  border-color: #7468f4;
  color: #5b50e6;
  background: #f4f1ff;
  box-shadow: 0 10px 22px rgba(116, 104, 244, 0.14);
}

.recharge-pay-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 12px;
  align-items: end;
}

.recharge-auto-status {
  display: grid;
  min-height: 44px;
  align-content: center;
  gap: 3px;
  padding: 8px 12px;
  border: 1px solid #e4e8f3;
  border-radius: 8px;
  background: #fbfcff;
}

.recharge-auto-status span {
  color: #8c94a8;
  font-size: 11px;
  font-weight: 900;
}

.recharge-auto-status strong {
  color: #5d50d6;
  font-size: 14px;
  line-height: 1.15;
}

.recharge-status-card .payment-status-card {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.recharge-status-card .payment-qr-object,
.recharge-status-card .payment-qr-placeholder {
  width: 170px;
  height: 170px;
}

.recharge-status-card .payment-order-panel {
  padding: 12px;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fbfcff;
}

.recharge-qr-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 246px;
  border: 1px dashed #dce2ef;
  border-radius: 8px;
  color: #8c94a8;
  background: #fbfcff;
  text-align: center;
}

.recharge-qr-empty strong {
  color: #242b3d;
  font-size: 34px;
  line-height: 1;
}

.recharge-records {
  display: grid;
  gap: 12px;
  margin: 14px 20px 0;
  padding: 16px;
}

.recharge-records[data-user-center-section] {
  scroll-margin-top: 18px;
}

.recharge-record-row em {
  color: #19a768;
}

.recharge-empty {
  min-height: 72px;
}

.recharge-ledger-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 14px 20px 20px;
  overflow: hidden;
}

.recharge-ledger-strip div {
  min-width: 0;
  padding: 13px 15px;
  border-right: 1px solid #edf0f7;
}

.recharge-ledger-strip div:last-child {
  border-right: 0;
}

.recharge-ledger-strip span {
  color: #8c94a8;
  font-size: 12px;
  font-weight: 900;
}

.recharge-ledger-strip strong {
  display: block;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  color: #242b3d;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.success-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 23, 38, 0.42);
  backdrop-filter: blur(8px);
  animation: pointSuccessLayer 0.22s ease-out both;
  overflow: hidden;
}

.point-success-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.point-success-confetti i {
  position: absolute;
  left: 50%;
  top: 48%;
  width: var(--size);
  height: calc(var(--size) * 1.6);
  border-radius: 3px;
  background: var(--color);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: pointSuccessConfetti 1.15s cubic-bezier(0.18, 0.74, 0.24, 1) var(--delay) both;
}

.point-success-dialog {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  color: #20263a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 1)),
    radial-gradient(circle at 12% 0%, rgba(37, 196, 129, 0.18), transparent 34%);
  box-shadow: 0 26px 70px rgba(31, 38, 55, 0.28);
  animation: pointSuccessPop 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.point-success-dialog::before,
.point-success-dialog::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.point-success-dialog::before {
  inset: -22px;
  border: 1px solid rgba(37, 196, 129, 0.22);
  border-radius: 14px;
  opacity: 0;
  animation: pointSuccessRing 1.2s ease-out 0.12s both;
}

.point-success-dialog::after {
  top: 0;
  right: 34px;
  width: 86px;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: skewX(-18deg) translateX(-220px);
  animation: pointSuccessShine 1.05s ease-out 0.18s both;
}

.point-success-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #15bd79, #36d69b);
  box-shadow: 0 16px 32px rgba(20, 174, 112, 0.26);
  font-size: 32px;
  font-weight: 950;
  animation: pointSuccessCheck 0.55s cubic-bezier(0.19, 1, 0.22, 1) 0.08s both;
}

.point-success-mark::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(37, 196, 129, 0.3);
  border-radius: 50%;
  animation: pointSuccessPulse 1.25s ease-out 0.2s both;
}

.point-success-kicker {
  color: #15a66d;
  font-size: 13px;
  font-weight: 950;
}

.point-success-dialog h2 {
  margin: -6px 0 0;
  font-size: 26px;
  line-height: 1.18;
}

.point-success-dialog p {
  margin: 0;
  color: #778197;
  font-size: 14px;
  line-height: 1.7;
}

.point-success-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.point-success-grid div,
.point-success-order {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e8edf6;
  border-radius: 8px;
  background: #fbfcff;
}

.point-success-grid span,
.point-success-order span {
  display: block;
  color: #8b94a8;
  font-size: 12px;
  font-weight: 900;
}

.point-success-grid strong,
.point-success-order strong {
  display: block;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  color: #20263a;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.point-success-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 2px;
}

.point-success-actions .primary-btn,
.point-success-actions .secondary-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
}

@keyframes pointSuccessLayer {
  from {
    opacity: 0;
  }
}

@keyframes pointSuccessPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
}

@keyframes pointSuccessCheck {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-12deg);
  }
}

@keyframes pointSuccessPulse {
  0% {
    opacity: 0.9;
    transform: scale(0.78);
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@keyframes pointSuccessRing {
  0% {
    opacity: 0.65;
    transform: scale(0.92);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes pointSuccessShine {
  100% {
    transform: skewX(-18deg) translateX(260px);
  }
}

@keyframes pointSuccessConfetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(0.6);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) rotate(190deg) scale(1);
  }
}

.user-center-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.user-center-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.user-center-section-head h3 {
  margin: 0;
  color: #20263a;
  font-size: 16px;
}

.user-center-list {
  display: grid;
  gap: 8px;
}

.user-center-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #edf0f7;
  border-radius: 8px;
  color: #3d465a;
  background: #fff;
  cursor: default;
  text-align: left;
}

button.user-center-row {
  cursor: pointer;
}

button.user-center-row:hover {
  border-color: #dcd8ff;
  background: #fbfaff;
}

.user-center-row span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.user-center-row strong,
.user-center-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-center-row small {
  color: #8c94a8;
  font-size: 12px;
}

.user-center-row em {
  flex: 0 0 auto;
  color: #7468f4;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.user-center-empty {
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed #dfe4f1;
  border-radius: 8px;
  color: #98a0b3;
  background: #fbfcff;
  font-size: 13px;
}

.user-center-empty.loading {
  margin-top: 18px;
}

.qr {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  width: 150px;
  height: 150px;
  margin: 18px auto 14px;
  padding: 9px;
  background: #fff;
  border: 1px solid #e8ebf3;
}

.qr span {
  background: #151923;
}

.login-modal {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  width: min(1060px, calc(100% - 48px));
  min-height: 560px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(25, 30, 54, 0.18);
}

.login-modal .modal-close {
  top: 22px;
  right: 22px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  color: #8b909b;
  background: transparent;
  box-shadow: none;
  font-size: 44px;
  font-weight: 300;
}

.login-modal .modal-close:hover,
.login-modal .modal-close:focus-visible {
  color: #3d4351;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.login-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  padding: 44px 40px;
  color: #fff;
  background:
    linear-gradient(152deg, rgba(255, 103, 207, 0.92) 0%, rgba(191, 79, 246, 0.92) 56%, rgba(121, 91, 255, 0.9) 100%),
    #d86af3;
}

.login-visual::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(231, 76, 224, 0.08), rgba(159, 68, 238, 0.46));
  content: "";
}

.login-brand,
.login-slogan {
  position: relative;
  z-index: 3;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 900;
}

.login-brand img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(78, 31, 148, 0.2);
}

.login-slogan {
  display: grid;
  gap: 14px;
  margin-top: 66px;
}

.login-slogan strong {
  font-size: 38px;
  font-weight: 950;
  line-height: 1.18;
}

.login-slogan span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.login-showcase {
  position: absolute;
  left: 42px;
  right: -54px;
  bottom: -70px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  transform: rotate(-10deg);
  transform-origin: center;
}

.login-showcase-tile {
  display: block;
  min-height: 184px;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 46px rgba(84, 24, 150, 0.28);
}

.login-showcase-tile.tile-1 {
  min-height: 236px;
}

.login-showcase-tile.tile-4 {
  transform: translateY(-38px);
}

.login-panel {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  padding: 76px 66px 34px;
  text-align: center;
}

.login-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 4px 0 70px;
}

.login-panel-head h2 {
  margin: 0;
  color: #3b3f4a;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

.wechat-icon {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 30px;
  flex: 0 0 auto;
}

.wechat-icon::before,
.wechat-icon i {
  position: absolute;
  border-radius: 50%;
  background: #18b875;
  content: "";
}

.wechat-icon::before {
  left: 0;
  top: 0;
  width: 28px;
  height: 24px;
}

.wechat-icon i {
  right: 0;
  bottom: 0;
  width: 24px;
  height: 20px;
}

.wechat-icon::after {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    10px 0 0 #fff,
    18px 11px 0 #fff,
    26px 11px 0 #fff;
  content: "";
}

.login-panel .modal-flow-hint {
  margin: -52px 0 28px;
}

.wechat-qr-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 410px;
  min-height: 428px;
  margin: 0 auto 18px;
  padding: 10px;
  border: 8px solid #dedede;
  border-radius: 14px;
  background: #fff;
  overflow: visible;
}

.wechat-login-tag {
  position: absolute;
  top: -48px;
  right: -44px;
  z-index: 2;
  min-width: 258px;
  height: 52px;
  padding: 0 24px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(95deg, #f46dcc, #9851f3);
  box-shadow: 0 14px 30px rgba(172, 80, 229, 0.22);
  font-size: 20px;
  font-weight: 900;
  line-height: 52px;
  white-space: nowrap;
}

.wechat-login-tag::after {
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 0;
  height: 0;
  border-top: 12px solid #b454ef;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.wechat-qr-object,
.wechat-qr-frame,
.wechat-official-login-box,
.wechat-qr-placeholder {
  display: grid;
  place-items: center;
  width: 286px;
  height: 286px;
  margin: 0 auto;
  background: #fff;
  object-fit: contain;
}

.wechat-qr-frame {
  display: block;
  border: 0;
  overflow: hidden;
}

.wechat-official-login-box {
  width: 382px;
  height: 406px;
  overflow: hidden;
}

.wechat-official-login-box iframe {
  display: block;
  width: 340px !important;
  height: 420px !important;
  border: 0;
  transform: scale(1.12);
  transform-origin: top center;
}

.wechat-qr-placeholder {
  gap: 12px;
  color: #555d70;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.wechat-login-tip {
  margin: 0 0 12px;
  color: #3f4451;
  font-size: 17px;
  font-weight: 800;
}

.qr-refresh {
  min-width: 110px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #e1e6f0;
  border-radius: 999px;
  color: #666e81;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.qr-refresh:hover,
.qr-refresh:focus-visible {
  border-color: #cfd6e8;
  color: #424a5f;
  outline: none;
}

.wechat-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 40%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 36% 46%, #fff 0 18%, transparent 19%),
    #18b875;
}

.login-errors {
  width: min(360px, 100%);
  margin-top: 8px;
}

.auth-error {
  margin: 8px 0 0;
  text-align: left;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  padding: 14px 18px;
  border-radius: 12px;
  color: #fff;
  background: #20263a;
  box-shadow: var(--shadow);
}

.hidden-input {
  display: none;
}

@media (min-width: 1381px) {
  .viral-video-workbench {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .viral-video-studio-shell {
    grid-template-columns: minmax(760px, 1fr) 344px;
    justify-content: stretch;
    margin: 0;
  }

  .viral-video-board {
    grid-template-columns: minmax(150px, 0.55fr) 36px minmax(280px, 1fr) 36px minmax(150px, 0.55fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .viral-remix-source,
  .viral-remix-reference,
  .viral-remix-output {
    grid-row: auto;
    grid-column: auto;
  }

  .viral-remix-arrow {
    display: block;
  }
}

@media (max-width: 1380px) {
  .viral-video-workbench {
    grid-template-columns: 326px minmax(0, 1fr);
  }

  .viral-video-stage {
    padding: 18px 20px;
  }

  .viral-video-studio-shell {
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 16px;
    width: 100%;
    margin: 0;
  }

  .viral-video-preview-card {
    min-height: auto;
    padding: 0;
  }

  .viral-video-board {
    grid-template-columns: minmax(0, 1fr) 150px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .viral-remix-reference {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .viral-remix-source {
    grid-column: 2;
    grid-row: 1;
  }

  .viral-remix-output {
    grid-column: 2;
    grid-row: 2;
  }

  .viral-remix-arrow {
    display: none;
  }

  .viral-remix-phone {
    width: min(132px, calc(100% - 22px));
  }

  .viral-video-source {
    min-height: 0;
  }

  .viral-video-motion-map {
    min-height: 0;
  }

  .viral-video-result-preview {
    width: 100%;
    max-height: 184px;
  }

  .viral-video-motion-visual {
    height: 112px;
    min-height: 112px;
    margin: 12px;
  }

  .viral-video-motion-visual::before {
    inset: 18px;
  }

  .viral-video-motion-visual::after {
    right: 24px;
    bottom: 20px;
    left: 24px;
  }

  .viral-video-motion-visual span {
    width: 40px;
    height: 56px;
    border-radius: 12px;
  }

  .viral-video-motion-visual span:nth-child(1) {
    top: 30px;
    left: 36px;
  }

  .viral-video-motion-visual span:nth-child(2) {
    top: 24px;
    left: calc(50% - 20px);
  }

  .viral-video-motion-visual span:nth-child(3) {
    top: 32px;
    right: 38px;
  }

  .viral-video-timeline {
    padding: 0 12px 12px;
  }

  .viral-video-timeline div {
    min-height: 66px;
    grid-template-columns: 1fr;
  }

  .viral-video-stage-head {
    margin-bottom: 14px;
  }

  .viral-video-stage-head h2 {
    margin-top: 8px;
    font-size: 22px;
  }

  .viral-video-panel {
    gap: 10px;
    padding: 16px 14px 12px;
  }

  .viral-control-group {
    padding: 12px 0 0;
  }

  .viral-upload-strip {
    min-height: 58px;
  }

  .viral-control-field textarea {
    height: 46px;
    min-height: 0;
  }

  .viral-control-textarea.is-compact textarea {
    height: 38px;
    min-height: 0;
  }

  .viral-video-side-stack {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .viral-video-result-card {
    position: relative;
    top: auto;
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .viral-video-workbench {
    grid-template-columns: 286px minmax(0, 1fr);
    height: calc(100vh - 68px);
    min-height: calc(100vh - 68px);
    overflow: hidden;
  }

  .viral-video-panel {
    display: flex;
    max-height: calc(100vh - 68px);
    padding: 14px 13px 10px;
    border-right: 1px solid #e3e8f0;
    border-bottom: 0;
    overflow-y: auto;
  }

  .viral-agent-top,
  .viral-agent-metrics,
  .viral-flow-rail,
  .viral-video-panel .viral-action-bar {
    grid-column: 1 / -1;
  }

  .viral-brief-group {
    grid-column: auto;
  }

  .viral-control-group {
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid #e2e8f1;
    border-radius: 0;
    background: transparent;
  }

  .viral-control-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .viral-control-heading em {
    display: none;
  }

  .viral-control-field {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .viral-upload-strip {
    min-height: 44px;
  }

  .viral-control-field textarea {
    height: 34px;
    min-height: 0;
  }

  .viral-control-textarea.is-compact textarea {
    height: 32px;
    min-height: 0;
  }

  .viral-video-panel .viral-action-bar {
    padding-top: 6px;
  }

  .viral-video-panel .commerce-reset-btn,
  .viral-video-panel .commerce-suite-submit {
    height: 34px;
  }

  .viral-video-stage {
    height: calc(100vh - 68px);
    min-height: 0;
    padding: 16px;
    overflow: hidden;
  }

  .viral-video-studio-shell {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    grid-auto-rows: max-content;
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-y: auto;
    padding-right: 2px;
  }

  .viral-video-preview-card {
    min-height: min(560px, calc(100vh - 112px));
  }

  .viral-video-board {
    grid-template-columns: minmax(0, 1fr) 136px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: none;
  }

  .viral-remix-reference {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .viral-remix-source {
    grid-column: 2;
    grid-row: 1;
  }

  .viral-remix-output {
    grid-column: 2;
    grid-row: 2;
  }

  .viral-remix-arrow {
    display: none;
  }

  .viral-video-side-stack {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(250px, 0.88fr) minmax(260px, 1fr);
    height: auto;
    min-height: 277px;
  }

  .viral-video-result-card {
    position: relative;
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .viral-video-motion-map,
  .viral-video-side-stack .commerce-record-strip {
    min-height: 0;
  }
}

@media (max-width: 1050px) {
  .topbar-inner {
    width: calc(100% - 28px);
  }

  .brand,
  .nav,
  .actions {
    min-width: 0;
  }

  .login-modal {
    grid-template-columns: 390px minmax(0, 1fr);
  }

  .login-panel {
    padding-right: 42px;
    padding-left: 42px;
  }

  .login-panel-head h2 {
    font-size: 25px;
  }

  .wechat-qr-card {
    width: 382px;
    min-height: 406px;
  }

  .wechat-qr-object,
  .wechat-qr-frame,
  .wechat-official-login-box,
  .wechat-qr-placeholder {
    width: 262px;
    height: 262px;
  }

  .wechat-official-login-box,
  .wechat-official-login-box iframe {
    width: 334px !important;
  }

  .wechat-official-login-box {
    width: 372px !important;
    height: 396px !important;
  }

  .wechat-official-login-box iframe {
    height: 414px !important;
  }

  .brand {
    min-width: unset;
  }

  .brand-sub {
    display: none;
  }

  .nav {
    gap: 1px;
    padding: 3px;
  }

  .nav-link {
    padding: 0 11px;
  }

  .dropdown-imageEdit {
    width: 480px;
  }

  .dropdown-matting {
    width: 318px;
  }

  .dropdown-draw {
    width: 292px;
  }

  .actions {
    flex: 0 0 auto;
    min-width: 0;
    gap: 6px;
  }

  .header-member-chip,
  .header-points-chip {
    width: 38px;
    padding: 0;
    justify-content: center;
  }

  .header-member-chip.is-guest-guide {
    width: auto;
    padding: 0 10px;
    justify-content: flex-start;
  }

  .header-member-chip span:last-child,
  .header-points-chip span:last-child {
    display: none;
  }

  .header-member-chip.is-guest-guide span:last-child {
    display: grid;
  }

  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-tools {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-card {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
  }

  .footer-links {
    max-width: none;
  }

  .legal-content {
    padding: 24px;
  }

  .tools-banner,
		  .tool-hero-grid,
		  .workspace,
		  .workspace.with-style-drawer,
		  .editor-layout,
		  .montage-page,
		  .commerce-workbench,
		  .viral-video-workbench {
			    grid-template-columns: 1fr;
			  }

  .watermark-editor-layout {
    grid-template-areas:
      "controls"
      "preview";
  }

  .watermark-preview-section {
    padding-bottom: 0;
    scroll-margin-top: 132px;
  }

  .watermark-preview-shell {
    width: 100%;
  }

	  .side-panel,
	  .style-drawer,
	  .montage-left,
	  .montage-right {
	    height: auto;
	    min-height: auto;
	    max-height: none;
	  }

	  .result-area {
	    height: auto;
	    min-height: min(560px, calc(100vh - 68px));
	  }

	  .id-photo-editor {
	    grid-template-columns: 1fr;
	  }

  .id-photo-workspace {
    grid-template-columns: 1fr;
  }

  .id-photo-panel {
    min-height: auto;
  }

  .id-photo-panel .color-dots {
    grid-template-columns: repeat(7, minmax(24px, 30px));
  }

  .style-drawer {
    max-height: none;
    border-right: 0;
    border-top: 1px solid #e7ebf3;
  }

		  .montage-page {
		    display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
		  }

		  .commerce-control-panel,
		  .viral-video-panel,
		  .commerce-creation-center {
		    min-height: auto;
		    border-right: 0;
		    border-left: 0;
		  }

		  .commerce-preview-stage {
		    padding: 24px;
		  }

  .commerce-form-grid {
    grid-template-columns: 1fr;
  }

  .commerce-form-spacer {
    display: none;
  }

		  .viral-video-stage {
		    padding: 18px;
		  }

		  .viral-video-side-stack {
		    grid-template-columns: minmax(260px, 0.95fr) minmax(260px, 1fr);
		  }

  .viral-video-workbench {
    grid-template-columns: 286px minmax(0, 1fr);
    height: calc(100vh - 68px);
    min-height: calc(100vh - 68px);
    overflow: hidden;
  }

  .viral-video-panel {
    display: flex;
    max-height: calc(100vh - 68px);
    border-right: 1px solid #e3e8f0;
    overflow-y: auto;
  }

  .viral-agent-top,
  .viral-agent-metrics,
  .viral-flow-rail,
  .viral-brief-group,
  .viral-video-panel .viral-action-bar {
    grid-column: auto;
  }

  .viral-video-stage {
    height: calc(100vh - 68px);
    min-height: 0;
    padding: 16px;
    overflow: hidden;
  }

  .viral-video-studio-shell {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    grid-auto-rows: max-content;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow-y: auto;
    padding-right: 2px;
  }

  .viral-video-preview-card {
    min-height: min(560px, calc(100vh - 112px));
  }

  .viral-video-board {
    grid-template-columns: minmax(0, 1fr) 136px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .viral-remix-reference {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .viral-remix-source {
    grid-column: 2;
    grid-row: 1;
  }

  .viral-remix-output {
    grid-column: 2;
    grid-row: 2;
  }

  .viral-remix-arrow {
    display: none;
  }

  .viral-video-side-stack {
    grid-template-rows: auto;
    grid-template-columns: minmax(250px, 0.88fr) minmax(260px, 1fr);
    height: auto;
    min-height: 277px;
  }

  .viral-video-result-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .viral-video-motion-map {
    min-height: 0;
  }

  .viral-video-side-stack .commerce-record-strip {
    min-height: 220px;
  }

	  .commerce-visual-preview {
	    width: 100%;
	  }

  .commerce-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
	}

@media (max-width: 760px) {
  .topbar {
    height: auto;
  }

	  .commerce-suite-upload,
	  .commerce-suite-grid,
	  .commerce-visual-preview,
	  .commerce-output-choice,
	  .commerce-result-grid {
	    grid-template-columns: 1fr;
	  }

  .commerce-suite-upload {
    width: 100%;
    min-height: 124px;
    padding: 18px;
  }

	  .commerce-field-head strong,
	  .commerce-suite-field span {
	    font-size: 14px;
	  }

	  .commerce-suite-field input,
	  .commerce-suite-field select,
	  .commerce-copy-field textarea {
	    font-size: 14px;
	  }

	  .commerce-suite-submit {
	    height: 48px;
	    font-size: 15px;
	  }

	  .commerce-preview-stage,
	  .commerce-control-panel,
	  .commerce-creation-center {
	    padding: 18px;
	  }

	  .commerce-stage-head {
	    align-items: flex-start;
	    flex-direction: column;
	  }

	  .commerce-visual-preview {
	    min-height: auto;
	  }

	  .commerce-main-art {
	    min-height: 280px;
	  }

  .commerce-preview-browser {
    right: 8px;
    bottom: 8px;
    left: 8px;
    max-width: none;
  }

  .commerce-browser-item {
    min-width: 76px;
  }

  .commerce-library-modal {
    padding: 22px 16px;
  }

  .commerce-library-grid {
    grid-template-columns: 1fr;
  }

  .login-modal {
    display: block;
    width: min(390px, calc(100% - 24px));
    min-height: 0;
    overflow: visible;
  }

  .login-modal .modal-close {
    top: 12px;
    right: 12px;
    font-size: 38px;
  }

  .login-visual {
    display: none;
  }

  .login-panel {
    padding: 58px 22px 24px;
  }

  .login-panel-head {
    gap: 10px;
    margin: 0 34px 48px;
  }

  .login-panel-head h2 {
    font-size: 21px;
    line-height: 1.3;
  }

  .wechat-icon {
    width: 32px;
    height: 27px;
  }

  .wechat-qr-card {
    width: min(350px, 100%);
    min-height: 378px;
    height: auto;
    aspect-ratio: auto;
    margin-bottom: 18px;
    padding: 10px;
    border-width: 7px;
  }

  .wechat-login-tag {
    top: -40px;
    right: 50%;
    min-width: 226px;
    height: 44px;
    padding: 0 18px;
    font-size: 16px;
    line-height: 44px;
    transform: translateX(50%);
  }

  .wechat-qr-object,
  .wechat-qr-frame,
  .wechat-official-login-box,
  .wechat-qr-placeholder {
    width: min(286px, 100%);
    height: 286px;
  }

  .wechat-official-login-box,
  .wechat-official-login-box iframe {
    width: 310px !important;
    max-width: 100%;
  }

  .wechat-official-login-box {
    height: 342px !important;
  }

  .wechat-official-login-box iframe {
    height: 390px !important;
    transform: scale(1.05);
  }

  .wechat-login-tip {
    font-size: 15px;
  }

  .topbar-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
  }

  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 14px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .dropdown,
  .dropdown-imageEdit,
  .dropdown-matting,
  .dropdown-draw {
    position: fixed;
    top: 128px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 148px);
    overflow: auto;
    transform: translateY(8px);
  }

  .dropdown-imageEdit {
    grid-template-columns: 1fr;
  }

  .nav-item.open .dropdown {
    transform: translateY(0);
  }

  .actions {
    min-width: unset;
  }

  .hero {
    min-height: auto;
    padding: 30px 0 36px;
  }

  .legal-page {
    padding: 26px 16px 54px;
  }

  .legal-hero {
    padding: 18px 0 20px;
  }

  .legal-hero h1 {
    font-size: 32px;
  }

  .legal-hero p {
    font-size: 15px;
  }

  .legal-meta {
    display: grid;
    gap: 8px;
  }

  .legal-content {
    padding: 18px;
  }

  .legal-section h2 {
    font-size: 16px;
  }

  .legal-section p {
    font-size: 14px;
  }

  .hero-content {
    width: calc(100% - 24px);
  }

  .hero-brand-lockup {
    gap: 10px;
  }

  .hero-logo {
    width: 46px;
    height: 46px;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 15px;
    line-height: 1.55;
  }

  .hero-tools,
  .gallery-grid,
  .tools-grid,
  .steps,
  .feature-section,
  .plans,
  .member-body {
    grid-template-columns: 1fr;
  }

  .feature-panel,
  .feature-panel.is-even {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 22px;
    padding: 26px 0;
  }

  .feature-panel.is-even .feature-media {
    order: 0;
  }

  .feature-copy h3 {
    font-size: 22px;
  }

  .feature-copy p {
    font-size: 14px;
    line-height: 1.75;
  }

  .payment-method-row,
  .payment-status-card .payment-order-row {
    align-items: stretch;
    flex-direction: column;
  }

  .member-top {
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 14px 58px 14px 18px;
  }

  .member-heading {
    min-width: 0;
  }

  .member-heading strong {
    font-size: 22px;
  }

  .member-heading p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 12px;
  }

  .member-user {
    min-width: 172px;
  }

  .member-body {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .benefit-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .benefit {
    padding: 10px;
  }

  .benefit p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .plan {
    min-height: 92px;
    padding: 10px 8px;
  }

  .price {
    font-size: 22px;
  }

  .pay-box {
    margin-top: 12px;
    padding: 12px;
  }

  .payment-status-card {
    grid-template-columns: 114px minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  .payment-qr-object,
  .payment-qr-placeholder {
    width: 106px;
    height: 106px;
  }

  .payment-order-panel {
    width: 100%;
    gap: 8px;
  }

  .payment-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-link {
    display: none;
  }

  .payment-channel-tabs,
  .payment-channel {
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .payment-status-card .payment-order-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
  }

  .payment-status-card .payment-order-row strong {
    width: 100%;
    max-width: none;
    text-align: right;
  }

  .user-center-modal {
    padding: 18px;
  }

  .user-center-head {
    grid-template-columns: 48px minmax(0, 1fr);
    padding-right: 42px;
  }

  .user-avatar-large {
    width: 48px;
    height: 48px;
  }

  .user-center-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .user-center-actions .primary-btn,
  .user-center-actions .ghost-btn,
  .user-center-actions .secondary-btn {
    width: 100%;
  }

  .user-center-refresh {
    grid-column: 1 / -1;
    width: 100%;
  }

  .user-center-summary,
  .user-center-account,
  .user-center-grid {
    grid-template-columns: 1fr;
  }

  .recharge-center-modal {
    width: min(100% - 24px, 560px);
  }

  .recharge-hero,
  .recharge-layout,
  .recharge-input-card,
  .recharge-pay-row,
  .recharge-ledger-strip {
    grid-template-columns: 1fr;
  }

  .recharge-hero {
    gap: 14px;
    padding: 22px 58px 20px 18px;
  }

  .recharge-hero h2 {
    font-size: 24px;
  }

  .recharge-balance-card {
    padding: 12px;
  }

  .recharge-layout {
    padding: 14px 14px 0;
  }

  .recharge-purchase-card,
  .recharge-status-card {
    min-height: 0;
    padding: 14px;
  }

  .recharge-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .recharge-section-title span {
    text-align: left;
  }

  .recharge-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recharge-create-btn {
    width: 100%;
  }

  .recharge-records {
    margin: 14px 14px 0;
    padding: 14px;
  }

  .recharge-ledger-strip {
    margin: 14px;
  }

  .recharge-ledger-strip div {
    border-right: 0;
    border-bottom: 1px solid #edf0f7;
  }

  .recharge-ledger-strip div:last-child {
    border-bottom: 0;
  }

  .point-success-dialog {
    padding: 24px 18px 18px;
  }

  .point-success-grid,
  .point-success-actions {
    grid-template-columns: 1fr;
  }

  .point-recharge-form {
    grid-template-columns: 1fr;
  }

  .point-recharge-panel .payment-status-card {
    grid-template-columns: 1fr;
  }

  .user-center-row {
    align-items: flex-start;
    min-height: 58px;
  }

  .user-center-row em {
    max-width: 92px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
  }

  .footer {
    padding: 30px 18px 24px;
  }

  .footer-card {
    gap: 24px;
    padding: 0;
  }

  .footer-brand {
    max-width: none;
  }

  .footer-brand-title {
    flex-wrap: nowrap;
    row-gap: 10px;
  }

  .footer-brand-name {
    font-size: 19px;
  }

  .footer-copy {
    max-width: none;
    font-size: 12px;
  }

  .footer-groups {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .footer-links {
    justify-content: flex-start;
    max-width: none;
    font-size: 12px;
  }

  .faq-item {
    min-height: 0;
    line-height: 1.5;
  }

  .faq-question {
    align-items: flex-start;
    min-height: 0;
    padding: 16px;
  }

  .faq-answer {
    padding: 0 16px 16px;
  }

  .hero-tools {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
  }

  .gallery-card,
  .gallery-card:nth-child(1),
  .gallery-card:nth-child(2),
  .gallery-card:nth-child(3),
  .gallery-card:nth-child(4),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(6),
  .gallery-card:nth-child(7),
  .gallery-card:nth-child(8),
  .gallery-card:nth-child(9),
  .gallery-card:nth-child(10) {
    grid-row: auto;
    aspect-ratio: 1;
    height: auto;
  }

  .quick-tool {
    min-height: 0;
  }

  .quick-info {
    padding: 34px 10px 10px;
  }

  .quick-title {
    font-size: 14px;
  }

  .quick-text {
    font-size: 11px;
  }

  .home-gallery {
    width: calc(100% - 24px);
    margin-top: 24px;
    margin-bottom: 48px;
  }

  .home-gallery-head {
    align-items: center;
  }

  .home-gallery h2 {
    font-size: 24px;
  }

  .home-gallery-more {
    margin-top: 34px;
  }

  .home-gallery-more .more-btn {
    width: min(320px, calc(100vw - 48px));
    height: 46px;
    padding: 0 18px;
    font-size: 13px;
  }

  .tools-banner {
    padding: 28px 24px;
  }

  .tools-banner h1,
  .tool-title-block h1 {
    font-size: 34px;
  }

  .tool-hero-grid {
    width: calc(100% - 24px);
  }

  .before-after,
  .upload-card {
    min-height: 260px;
  }

  .upload-card {
    padding: 28px 18px 24px;
  }

  .upload-icon {
    width: 78px;
    height: 62px;
    margin-bottom: 22px;
  }

  .upload-icon::before {
    left: 17px;
    bottom: 14px;
    width: 44px;
    height: 27px;
  }

  .upload-icon::after {
    right: -16px;
    top: -12px;
    width: 40px;
    height: 30px;
    background-size: 17px 17px;
  }

  .upload-title {
    font-size: 15px;
  }

  .upload-inner .upload-hint {
    max-width: 320px;
    font-size: 13px;
    line-height: 1.55;
  }

  .try-row {
    margin-top: 38px;
  }

  .result-area,
  .editor-canvas {
    padding: 18px 12px;
  }

  .watermark-preview-shell {
    gap: 10px;
  }

  .watermark-preview-head {
    padding: 12px;
  }

  .watermark-preview-head strong {
    font-size: 14px;
  }

  .watermark-checker {
    aspect-ratio: 1.08;
    border-radius: 14px;
  }

  .watermark-checker .preview-photo {
    inset: 28px;
  }

  .history-panel {
    right: 12px;
    width: min(280px, calc(100% - 24px));
  }

  .tool-generation-list {
    grid-template-columns: 1fr;
  }

  .image-task-compare {
    grid-template-columns: 1fr;
  }

  .inpaint-workspace {
    grid-template-columns: 1fr;
  }

  .image-task-pane,
  .inpaint-mask-stage {
    min-height: 260px;
  }

  .point-strip {
    grid-template-columns: 1fr;
  }

  .id-photo-actions {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .id-photo-outfit-options {
    grid-template-columns: 1fr;
  }

  .viral-video-workbench {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }

  .viral-video-panel,
  .viral-video-stage,
  .viral-video-workbench .commerce-creation-center {
    width: 100%;
  }

  .viral-video-panel {
    max-height: none;
    border-right: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .viral-agent-metrics,
  .viral-compact-grid {
    grid-template-columns: 1fr;
  }

  .viral-agent-metrics {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .viral-flow-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .viral-upload-strip {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .viral-upload-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }

	  .viral-video-stage {
	    height: auto;
	    padding: 14px;
	    overflow: visible;
	  }

	  .viral-video-studio-shell {
	    grid-template-columns: 1fr;
	    width: 100%;
	    height: auto;
	  }

	  .viral-video-preview-card {
	    min-height: 0;
	    padding: 16px;
	  }

	  .viral-video-stage-head {
	    flex-direction: column;
	  }

	  .viral-video-stage-head h2 {
	    font-size: 24px;
	  }

	  .viral-video-side-stack {
	    grid-template-rows: auto;
	    grid-template-columns: 1fr;
	    height: auto;
	  }

	  .viral-video-board {
	    grid-template-columns: 1fr;
	  }

	  .viral-video-source,
	  .viral-video-motion-map {
	    min-height: 260px;
	  }

	  .viral-video-source-media {
	    min-height: 280px;
	  }

	  .viral-video-motion-visual {
	    min-height: 190px;
	  }

	  .viral-video-motion-visual span {
	    width: 54px;
	    height: 78px;
	  }

	  .viral-video-timeline div {
	    grid-template-columns: 1fr;
	    gap: 4px;
	    padding: 12px;
	  }
	}

@media (max-width: 560px) {
  .member-body {
    grid-template-columns: 1fr;
  }

  .benefit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .member-top {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 58px 16px 18px;
  }

  .member-user {
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
  }

  .benefit-list,
  .plans {
    grid-template-columns: 1fr;
  }

  .payment-status-card {
    grid-template-columns: 1fr;
  }
}

/* Final layout authority for the viral-video remix workbench. */
.viral-video-workbench {
  display: block;
  height: calc(100vh - 68px);
  min-height: calc(100vh - 68px);
  padding: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%),
    #f3f6fa;
}

.viral-console-shell {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 252, 0.86)),
    #f8fafc;
  box-shadow: 0 22px 54px rgba(30, 41, 59, 0.12);
}

.viral-video-panel {
  gap: 9px;
  min-height: 0;
  max-height: none;
  padding: 16px 14px 12px;
  border-right: 1px solid #dfe7f0;
  background:
    linear-gradient(180deg, rgba(247, 250, 252, 0.96), rgba(241, 246, 249, 0.92)),
    #f8fafc;
  box-shadow: none;
}

.viral-video-panel .panel-title {
  font-size: 24px;
}

.viral-agent-top strong {
  border-radius: 7px;
  color: #0f766e;
  background: #e8f7f3;
}

.viral-agent-metrics {
  gap: 10px;
  color: #687384;
}

.viral-flow-rail {
  padding-bottom: 5px;
}

.viral-control-group {
  gap: 8px;
  padding-top: 11px;
}

.viral-control-field input,
.viral-control-field select,
.viral-control-field textarea {
  border-color: #dfe6ef;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.viral-segment-control {
  border-color: #dfe6ef;
  background: #edf2f7;
}

.viral-segment-control button.active {
  color: #142033;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
}

.viral-video-panel .commerce-suite-submit {
  background: linear-gradient(135deg, #111827, #174f55 58%, #10a37f);
  box-shadow: 0 13px 28px rgba(16, 163, 127, 0.22);
}

.viral-video-stage {
  height: 100%;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}

.viral-video-studio-shell {
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.viral-video-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  min-height: 0;
}

.viral-video-stage-head {
  align-items: center;
  margin-bottom: 10px;
  padding: 0 1px;
}

.viral-video-stage-head span {
  height: 22px;
  border: 0;
  border-radius: 7px;
  color: #0f766e;
  background: #e8f7f3;
  font-size: 11px;
}

.viral-video-stage-head h2 {
  margin-top: 5px;
  color: #121826;
  font-size: 24px;
}

.viral-video-stage-head p {
  max-width: 520px;
  margin: 5px 0 0;
  color: #647084;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
}

.viral-video-stage-head .commerce-stage-pills span {
  height: 24px;
  border-color: #dfe6ef;
  color: #475569;
  background: #fff;
  box-shadow: none;
}

.viral-video-board.viral-director-board {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 136px minmax(220px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(20, 184, 166, 0.12), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172033 100%);
  box-shadow: 0 18px 42px rgba(30, 41, 59, 0.12);
}

.viral-theater,
.viral-engine-bridge {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 14px;
}

.viral-theater {
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr) auto;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.96)),
    #0f172a;
}

.viral-theater-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.12);
  color: #cbd5e1;
}

.viral-theater-head span,
.viral-theater-head b {
  overflow: hidden;
  font-size: 12px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-theater-head b {
  flex: 0 0 auto;
  color: #5eead4;
  font-weight: 950;
}

.viral-theater-screen {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(79, 70, 229, 0.22), transparent 30%),
    linear-gradient(180deg, #111827, #060913);
}

.viral-theater-screen::before {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  content: "";
  pointer-events: none;
}

.viral-theater-screen::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.2), rgba(94, 234, 212, 0.86), rgba(251, 191, 36, 0.74));
  content: "";
  opacity: 0.72;
}

.viral-theater-screen video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viral-theater-screen em {
  position: absolute;
  right: 14px;
  bottom: 16px;
  z-index: 2;
  color: #5eead4;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.viral-theater-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 9px;
  border-top: 1px solid rgba(226, 232, 240, 0.1);
}

.viral-theater-tags span {
  display: grid;
  place-items: center;
  min-height: 24px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-engine-bridge {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 54px auto;
  gap: 10px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(229, 238, 242, 0.92)),
    #f8fafc;
}

.viral-engine-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}

.viral-engine-card > span,
.viral-engine-card > strong {
  overflow: hidden;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-engine-card > strong {
  color: #0f766e;
}

.viral-engine-status {
  display: grid;
  gap: 7px;
  place-items: center;
  min-height: 0;
  padding: 12px 8px;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 26%, rgba(20, 184, 166, 0.16), transparent 42%),
    #fff;
}

.viral-engine-status b,
.viral-engine-status em {
  overflow: hidden;
  max-width: 100%;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-engine-status b {
  color: #142033;
  font-size: 14px;
  font-weight: 950;
}

.viral-engine-status em {
  color: #647084;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.viral-engine-status.is-ready {
  border-color: #bfe5dd;
  background:
    radial-gradient(circle at 50% 26%, rgba(20, 184, 166, 0.2), transparent 42%),
    #f4fbf9;
}

.viral-engine-flow {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  color: #0f766e;
}

.viral-engine-flow i {
  width: 2px;
  min-height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #14b8a6, transparent);
}

.viral-engine-flow b {
  display: grid;
  place-items: center;
  width: 62px;
  height: 28px;
  border: 1px solid #cce5df;
  border-radius: 999px;
  color: #0f766e;
  background: #e8f7f3;
  font-size: 11px;
  font-weight: 950;
}

.viral-engine-tags {
  display: grid;
  gap: 6px;
}

.viral-engine-tags span {
  display: grid;
  place-items: center;
  min-height: 24px;
  border: 1px solid #dce5ee;
  border-radius: 7px;
  color: #475569;
  background: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
}

.viral-monitor,
.viral-hero-monitor {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

.viral-monitor {
  grid-template-rows: 36px minmax(0, 1fr);
  background:
    linear-gradient(180deg, rgba(247, 250, 252, 0.96), rgba(236, 243, 247, 0.94)),
    #f3f7fa;
}

.viral-hero-monitor {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-rows: 36px minmax(0, 1fr);
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.viral-monitor-source {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid #e2e8f0;
}

.viral-monitor-output {
  grid-column: 2;
  grid-row: 2;
}

.viral-monitor-head,
.viral-canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 36px;
  padding: 0 11px;
}

.viral-monitor-head {
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  color: #4b5565;
  background: rgba(255, 255, 255, 0.62);
}

.viral-canvas-toolbar {
  border-bottom: 1px solid #e5ebf3;
  color: #4b5565;
  background: rgba(255, 255, 255, 0.88);
}

.viral-monitor-head span,
.viral-canvas-toolbar span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-monitor-head b,
.viral-canvas-toolbar strong {
  flex: 0 0 auto;
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
}

.viral-canvas-toolbar strong {
  color: #0f766e;
}

.viral-monitor-screen {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(99, 102, 241, 0.2), transparent 30%),
    linear-gradient(180deg, #111827, #070b13);
}

.viral-monitor-body,
.viral-reference-body {
  display: grid;
  min-height: 0;
  padding: 12px;
}

.viral-monitor-body {
  grid-template-columns: minmax(0, 1fr) 126px;
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(15, 118, 110, 0.07), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(239, 246, 249, 0.66));
}

.viral-reference-body {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
}

.viral-monitor-source .viral-monitor-screen,
.viral-monitor-output .viral-monitor-screen {
  align-self: stretch;
  justify-self: stretch;
  width: auto;
  min-height: 0;
  aspect-ratio: auto;
  border: 1px solid rgba(226, 232, 240, 0.12);
  border-radius: 12px;
  box-shadow:
    0 16px 28px rgba(15, 23, 42, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.viral-monitor-meta,
.viral-reference-meta {
  display: grid;
  gap: 6px;
}

.viral-monitor-meta span,
.viral-reference-meta span {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid #e4ebf3;
  border-radius: 8px;
  color: #647084;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-monitor-source .viral-monitor-meta,
.viral-monitor-output .viral-monitor-meta {
  align-content: center;
}

.viral-monitor-meta span::before,
.viral-reference-meta span::before {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 999px;
  background: #14b8a6;
  content: "";
}

.viral-reference-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.viral-reference-meta span {
  justify-content: center;
}

.viral-reference-meta span::before {
  margin-right: 7px;
}

.viral-monitor-source .viral-monitor-screen::before,
.viral-monitor-output .viral-monitor-screen::before {
  inset: 10px;
  border-radius: 14px;
}

.viral-monitor-screen::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  content: "";
  pointer-events: none;
}

.viral-monitor-screen::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.2), rgba(94, 234, 212, 0.86), rgba(251, 191, 36, 0.74));
  content: "";
  opacity: 0.72;
}

.viral-monitor-screen video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viral-monitor-placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  justify-items: center;
  max-width: 128px;
  color: #94a3b8;
  text-align: center;
}

.viral-monitor-placeholder strong {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.viral-monitor-placeholder span {
  max-width: 100%;
  overflow: hidden;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-monitor-screen em {
  position: absolute;
  right: 12px;
  bottom: 16px;
  z-index: 2;
  color: #5eead4;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.viral-main-canvas {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.94)),
    #f8fafc;
}

.viral-main-canvas img {
  position: absolute;
  inset: clamp(14px, 2.2vh, 24px);
  z-index: 1;
  width: calc(100% - clamp(28px, 4.4vh, 48px));
  height: calc(100% - clamp(28px, 4.4vh, 48px));
  object-fit: contain;
}

.viral-main-canvas > strong {
  position: relative;
  z-index: 1;
  color: #647084;
  font-size: 14px;
  font-weight: 900;
}

.viral-canvas-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.7;
}

.viral-canvas-caption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
}

.viral-canvas-caption span,
.viral-canvas-caption strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-canvas-caption span {
  color: #99f6e4;
}

.viral-canvas-caption strong {
  color: #fff;
}

.viral-video-motion-map {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  grid-template-rows: 34px minmax(0, 1fr);
  min-height: 106px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.viral-video-motion-head {
  grid-column: 2;
  grid-row: 1;
  min-height: 34px;
  padding: 0 12px;
}

.viral-video-motion-visual {
  grid-column: 1;
  grid-row: 1 / 3;
  height: auto;
  min-height: 0;
  margin: 10px;
  border-radius: 10px;
}

.viral-video-motion-visual::before {
  inset: 16px;
}

.viral-video-motion-visual span {
  width: 34px;
  height: 48px;
}

.viral-video-motion-visual span:nth-child(1) {
  top: 32px;
  left: 28px;
}

.viral-video-motion-visual span:nth-child(2) {
  top: 25px;
  left: calc(50% - 17px);
}

.viral-video-motion-visual span:nth-child(3) {
  top: 34px;
  right: 30px;
}

.viral-video-timeline {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 10px 0;
}

.viral-video-timeline div {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 9px;
}

.viral-video-timeline b,
.viral-video-timeline strong,
.viral-video-timeline em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-video-side-stack {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: 1fr;
  height: 100%;
  min-height: 0;
}

.viral-delivery-card {
  gap: 10px;
  padding: 14px;
  border-color: #dfe6ef;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.94)),
    #fff;
  box-shadow: 0 12px 28px rgba(30, 41, 59, 0.055);
}

.viral-delivery-head {
  padding-bottom: 10px;
}

.viral-delivery-head strong {
  font-size: 20px;
}

.viral-delivery-head em {
  border-radius: 7px;
  color: #0f766e;
  background: #e8f7f3;
}

.viral-delivery-metrics {
  gap: 7px;
}

.viral-delivery-metrics div {
  min-height: 52px;
  border-radius: 9px;
  background: #fff;
}

.viral-delivery-actions .commerce-result-download:disabled,
.viral-delivery-actions .commerce-copy-link:disabled {
  border-color: #e3e8f0;
  color: #9aa5b5;
  background: #edf2f7;
  box-shadow: none;
  opacity: 1;
}

.viral-video-side-stack .commerce-record-strip {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 0;
}

.viral-video-side-stack .commerce-record-head {
  margin-bottom: 8px;
}

.viral-video-side-stack .commerce-record-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.viral-video-side-stack .commerce-creation-empty {
  gap: 10px;
  min-height: 0;
  height: 100%;
  border: 1px dashed #cfd8e6;
  border-radius: 14px;
  color: #7b8799;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 251, 252, 0.88)),
    #fff;
  font-size: 13px;
  font-weight: 850;
}

.viral-video-side-stack .commerce-creation-empty::before {
  display: block;
  width: 46px;
  height: 34px;
  border: 1px solid #d8e0ea;
  border-radius: 9px;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(15, 23, 42, 0.08) 16% 18%, transparent 18% 38%, rgba(15, 23, 42, 0.08) 38% 40%, transparent 40% 60%, rgba(15, 23, 42, 0.08) 60% 62%, transparent 62% 82%, rgba(15, 23, 42, 0.08) 82% 84%, transparent 84%),
    linear-gradient(135deg, #f8fafc, #eef4f8);
  content: "";
}

@media (min-width: 1600px) {
  .viral-console-shell {
    grid-template-columns: 318px minmax(0, 1fr);
  }

  .viral-video-studio-shell {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
  }

  .viral-video-board.viral-director-board {
    grid-template-columns: minmax(164px, 0.54fr) minmax(420px, 1.45fr) minmax(164px, 0.54fr);
    gap: 14px;
    padding: 14px;
  }
}

@media (max-width: 1180px) {
  .viral-video-workbench {
    height: calc(100vh - 68px);
    min-height: calc(100vh - 68px);
    padding: 10px;
    overflow: hidden;
  }

  .viral-console-shell {
    grid-template-columns: 268px minmax(0, 1fr);
  }

  .viral-video-panel {
    display: flex;
    max-height: none;
    border-right: 1px solid #e3e8f0;
    border-bottom: 0;
    overflow-y: auto;
  }

  .viral-video-stage {
    height: 100%;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }

  .viral-video-studio-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    height: 100%;
    overflow-y: auto;
  }

  .viral-video-preview-card {
    min-height: min(590px, calc(100vh - 130px));
  }

  .viral-video-stage-head {
    margin-bottom: 8px;
  }

  .viral-video-stage-head h2 {
    font-size: 22px;
  }

  .viral-video-stage-head p {
    display: none;
  }

  .viral-video-board.viral-director-board {
    grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .viral-theater {
    grid-template-rows: 32px minmax(0, 1fr);
  }

  .viral-theater-tags,
  .viral-engine-tags {
    display: none;
  }

  .viral-theater-head {
    min-height: 32px;
    padding: 0 9px;
  }

  .viral-theater-head span,
  .viral-theater-head b {
    font-size: 11px;
  }

  .viral-engine-bridge {
    grid-template-rows: minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 8px;
  }

  .viral-engine-card {
    gap: 6px;
  }

  .viral-engine-card > span {
    display: none;
  }

  .viral-engine-flow b {
    width: 54px;
    height: 25px;
  }

  .viral-engine-thumb img {
    object-fit: contain;
  }

  .viral-video-motion-map {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 96px;
  }

  .viral-video-motion-visual span {
    width: 30px;
    height: 42px;
  }

  .viral-video-timeline div {
    min-height: 44px;
    padding: 7px 8px;
  }

  .viral-video-side-stack {
    grid-template-columns: minmax(230px, 0.9fr) minmax(240px, 1fr);
    grid-template-rows: auto;
    min-height: 238px;
    height: auto;
  }
}

@media (max-width: 760px) {
  .viral-video-workbench {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }

  .viral-video-panel {
    display: grid;
    grid-template-columns: 1fr;
    max-height: none;
    border-right: 0;
  }

  .viral-video-stage {
    height: auto;
    overflow: visible;
  }

  .viral-video-studio-shell {
    height: auto;
    overflow: visible;
  }

  .viral-video-preview-card {
    min-height: 0;
  }

  .viral-video-board.viral-director-board {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .viral-monitor,
  .viral-hero-monitor {
    grid-column: auto;
    grid-row: auto;
    min-height: 240px;
  }

  .viral-hero-monitor {
    min-height: 340px;
  }

  .viral-video-motion-map,
  .viral-video-side-stack {
    grid-template-columns: 1fr;
    height: auto;
  }

  .viral-video-motion-map {
    grid-template-rows: auto auto auto;
  }

  .viral-video-motion-head,
  .viral-video-motion-visual,
  .viral-video-timeline {
    grid-column: 1;
    grid-row: auto;
  }

  .viral-video-motion-visual {
    min-height: 160px;
  }

  .viral-video-timeline {
    grid-template-columns: 1fr;
    padding: 0 10px 10px;
  }
}

/* Final front-end design pass: stage-first control console. */
.viral-video-workbench {
  height: calc(100vh - 68px);
  min-height: calc(100vh - 68px);
  padding: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f8fafc 0%, #edf3f7 100%),
    #f4f7fb;
}

.viral-console-shell {
  display: grid;
  grid-template-areas:
    "stage"
    "controls";
  grid-template-columns: 1fr;
  grid-template-rows: minmax(420px, 1fr) 236px;
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d9e2ee;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 18px 46px rgba(30, 41, 59, 0.1);
}

.viral-video-stage {
  grid-area: stage;
  height: 100%;
  min-height: 0;
  padding: 14px;
  overflow: hidden;
  border-bottom: 1px solid #dfe7f0;
}

.viral-video-studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.viral-video-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 92px auto;
  min-height: 0;
}

.viral-video-stage-head {
  min-height: 46px;
  margin-bottom: 10px;
}

.viral-video-stage-head h2 {
  font-size: 22px;
}

.viral-video-stage-head p {
  max-width: 680px;
  font-size: 12px;
}

.viral-video-board.viral-director-board {
  grid-template-columns: minmax(260px, 1fr) 118px minmax(260px, 1fr);
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

.viral-theater {
  grid-template-rows: 36px minmax(0, 1fr) 38px;
}

.viral-engine-bridge {
  grid-template-rows: minmax(0, 1fr) 48px auto;
  gap: 8px;
  padding: 9px;
}

.viral-video-motion-map {
  grid-template-columns: 142px minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-height: 78px;
  margin-top: 10px;
  overflow: hidden;
}

.viral-video-motion-head {
  grid-column: 1;
  grid-row: 1;
  align-content: center;
  padding: 12px;
}

.viral-video-motion-visual {
  display: none;
}

.viral-video-timeline {
  grid-column: 2;
  grid-row: 1;
  gap: 8px;
  padding: 10px 10px 10px 0;
}

.viral-video-timeline div {
  min-height: 54px;
}

.viral-video-side-stack {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.viral-delivery-card {
  padding: 13px;
}

.viral-delivery-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.viral-delivery-metrics div {
  min-height: 48px;
}

.viral-video-panel {
  grid-area: controls;
  display: grid;
  grid-template-columns: 170px 218px minmax(420px, 1.2fr) minmax(320px, 0.95fr) 176px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  padding: 12px 14px;
  overflow: hidden;
  border-right: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 251, 0.96)),
    #f8fafc;
  box-shadow: none;
}

.viral-agent-top {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.viral-video-panel .panel-title {
  font-size: 21px;
}

.viral-agent-metrics {
  grid-column: 1;
  grid-row: 2;
  align-content: start;
  gap: 8px;
}

.viral-flow-rail {
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: center;
  padding: 0;
}

.viral-video-panel .viral-control-group {
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #e1e8f1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.viral-video-panel .viral-control-group:nth-of-type(1) {
  grid-column: 2;
  grid-row: 2;
}

.viral-video-panel .viral-control-group:nth-of-type(2) {
  grid-column: 3;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
}

.viral-video-panel .viral-control-group:nth-of-type(2) .viral-control-heading,
.viral-video-panel .viral-control-group:nth-of-type(2) .viral-control-url,
.viral-video-panel .viral-control-group:nth-of-type(2) .viral-video-duration-note,
.viral-video-panel .viral-control-group:nth-of-type(2) .viral-voice-control {
  grid-column: 1 / -1;
}

.viral-video-panel .viral-control-group:nth-of-type(3) {
  grid-column: 4;
  grid-row: 2;
}

.viral-video-panel .viral-action-bar {
  grid-column: 5;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.viral-video-panel .commerce-reset-btn,
.viral-video-panel .commerce-suite-submit {
  width: 100%;
  min-width: 0;
}

.viral-upload-strip {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 46px;
}

.viral-upload-actions {
  grid-column: 1 / -1;
  flex-direction: row;
}

.viral-upload-actions button {
  flex: 1;
}

.viral-compact-grid {
  gap: 8px;
}

.viral-control-field,
.viral-setting-row {
  grid-template-columns: 62px minmax(0, 1fr);
}

.viral-control-field input,
.viral-control-field select {
  height: 30px;
}

.viral-control-field textarea {
  height: 42px;
}

.viral-control-textarea.is-compact textarea {
  height: 38px;
}

.viral-voice-control {
  padding: 8px;
  gap: 7px;
}

.viral-voice-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.viral-voice-options button {
  min-height: 38px;
  padding: 6px 7px;
}

.viral-voice-options span {
  display: none;
}

.viral-voice-preset {
  grid-template-columns: 62px minmax(0, 1fr);
}

@media (max-width: 1280px) {
  .viral-console-shell {
    grid-template-rows: minmax(400px, 1fr) 250px;
  }

  .viral-video-studio-shell {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 10px;
  }

  .viral-video-panel {
    grid-template-columns: 154px 198px minmax(350px, 1.15fr) minmax(270px, 0.95fr) 154px;
    gap: 8px;
    padding: 10px;
  }

  .viral-video-board.viral-director-board {
    grid-template-columns: minmax(220px, 1fr) 102px minmax(220px, 1fr);
    gap: 8px;
    padding: 8px;
  }
}

@media (max-width: 1080px) {
  .viral-video-workbench {
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }

  .viral-console-shell {
    grid-template-rows: auto auto;
    height: auto;
    overflow: visible;
  }

  .viral-video-stage {
    height: auto;
    min-height: 560px;
    overflow: visible;
  }

  .viral-video-studio-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .viral-video-preview-card {
    min-height: 560px;
  }

  .viral-video-side-stack {
    grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1fr);
    grid-template-rows: auto;
    height: auto;
  }

  .viral-video-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    height: auto;
    align-items: start;
    overflow: visible;
  }

  .viral-video-panel .viral-control-group {
    align-self: start;
  }

  .viral-agent-top,
  .viral-agent-metrics,
  .viral-flow-rail,
  .viral-video-panel .viral-control-group:nth-of-type(1),
  .viral-video-panel .viral-control-group:nth-of-type(2),
  .viral-video-panel .viral-control-group:nth-of-type(3),
  .viral-video-panel .viral-action-bar {
    grid-column: auto;
    grid-row: auto;
  }

  .viral-agent-top {
    grid-column: 1;
    grid-row: 1;
  }

  .viral-agent-metrics {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .viral-flow-rail {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .viral-video-panel .viral-control-group:nth-of-type(1) {
    grid-column: 1;
    grid-row: 3;
  }

  .viral-video-panel .viral-control-group:nth-of-type(2) {
    grid-column: 2;
    grid-row: 3 / span 2;
  }

  .viral-video-panel .viral-control-group:nth-of-type(3) {
    grid-column: 1;
    grid-row: 4;
  }

  .viral-video-panel .viral-action-bar {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .viral-agent-metrics,
  .viral-flow-rail {
    justify-content: flex-start;
  }

  .viral-video-panel .viral-action-bar {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }
}

@media (max-width: 720px) {
  .viral-video-workbench {
    padding: 8px;
  }

  .viral-video-stage {
    min-height: 0;
    padding: 10px;
  }

  .viral-video-preview-card {
    min-height: 0;
  }

  .viral-video-board.viral-director-board {
    grid-template-columns: 1fr;
  }

  .viral-engine-bridge {
    min-height: 150px;
  }

  .viral-video-motion-map,
  .viral-video-side-stack,
  .viral-video-panel {
    grid-template-columns: 1fr;
  }

  .viral-video-panel .viral-action-bar {
    grid-template-columns: 1fr;
  }

  .viral-voice-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Corrected final pass: single-screen integrated console. */
.viral-video-workbench {
  height: calc(100vh - 68px);
  min-height: calc(100vh - 68px);
  padding: 12px;
  overflow: hidden;
  background: #f4f7fb;
}

.viral-console-shell {
  display: grid;
  grid-template-areas: "controls stage";
  grid-template-columns: 258px minmax(0, 1fr);
  grid-template-rows: 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 18px 42px rgba(30, 41, 59, 0.1);
}

.viral-video-panel {
  grid-area: controls;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto minmax(0, auto);
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 12px 10px 10px;
  overflow-y: auto;
  border-right: 1px solid #e0e7f0;
  background:
    linear-gradient(180deg, rgba(250, 252, 253, 0.98), rgba(242, 247, 250, 0.96)),
    #f8fafc;
}

.viral-agent-top,
.viral-agent-metrics,
.viral-flow-rail,
.viral-video-panel .viral-control-group:nth-of-type(1),
.viral-video-panel .viral-control-group:nth-of-type(2),
.viral-video-panel .viral-control-group:nth-of-type(3),
.viral-video-panel .viral-action-bar {
  grid-column: 1;
  grid-row: auto;
}

.viral-video-panel .panel-title {
  font-size: 20px;
}

.viral-agent-metrics {
  gap: 8px;
}

.viral-flow-rail {
  justify-content: flex-start;
  padding-bottom: 2px;
}

.viral-video-panel .viral-control-group {
  display: grid;
  gap: 6px;
  min-height: 0;
  padding: 8px;
  overflow: visible;
  border: 1px solid #e2e8f1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.viral-video-panel .viral-control-group:nth-of-type(1),
.viral-video-panel .viral-control-group:nth-of-type(2),
.viral-video-panel .viral-control-group:nth-of-type(3) {
  grid-template-columns: 1fr;
  align-content: start;
}

.viral-upload-strip {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 5px;
}

.viral-upload-actions {
  grid-column: auto;
  flex-direction: column;
}

.viral-upload-actions button {
  flex: 0 0 auto;
}

.viral-control-field,
.viral-setting-row {
  grid-template-columns: 1fr;
  gap: 4px;
}

.viral-control-field input,
.viral-control-field select {
  height: 28px;
}

.viral-control-field textarea {
  height: 38px;
}

.viral-control-textarea.is-compact textarea {
  height: 34px;
}

.viral-compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.viral-compact-grid .viral-control-field {
  grid-template-columns: 1fr;
}

.viral-voice-control {
  gap: 6px;
  padding: 7px;
}

.viral-voice-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.viral-voice-options button {
  min-height: 30px;
  padding: 5px 4px;
  text-align: center;
}

.viral-voice-options span {
  display: none;
}

.viral-voice-note {
  line-height: 1.35;
}

.viral-video-panel .viral-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 8px;
  padding-top: 8px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.98) 34%),
    #f8fafc;
}

.viral-video-panel .commerce-reset-btn,
.viral-video-panel .commerce-suite-submit {
  width: 100%;
  min-width: 0;
}

.viral-video-stage {
  grid-area: stage;
  height: 100%;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  border-bottom: 0;
}

.viral-video-studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  grid-template-rows: 1fr;
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.viral-video-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 78px auto;
  height: 100%;
  min-height: 0;
}

.viral-video-stage-head {
  min-height: 42px;
  margin-bottom: 8px;
}

.viral-video-stage-head h2 {
  margin-top: 3px;
  font-size: 22px;
}

.viral-video-stage-head p {
  display: none;
}

.viral-video-stage-head .commerce-stage-pills {
  gap: 7px;
}

.viral-video-stage-head .commerce-stage-pills span {
  height: 23px;
}

.viral-video-board.viral-director-board {
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  gap: 7px;
  min-height: 0;
  padding: 8px;
}

.viral-theater {
  grid-template-rows: 32px minmax(0, 1fr);
}

.viral-theater-tags,
.viral-engine-tags {
  display: none;
}

.viral-theater-head {
  min-height: 32px;
  padding: 0 9px;
}

.viral-theater-screen::before {
  inset: 12px;
}

.viral-engine-bridge {
  grid-template-rows: minmax(0, 1fr) 34px;
  gap: 7px;
  padding: 7px;
}

.viral-engine-card > span {
  display: none;
}

.viral-engine-card > strong {
  display: none;
}

.viral-engine-flow b {
  width: 48px;
  height: 25px;
}

.viral-mixer-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #d9e4ee;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 247, 247, 0.9)),
    #f8fafc;
}

.viral-mixer-head {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.viral-mixer-head span {
  color: #66758a;
  font-size: 10px;
  font-weight: 900;
}

.viral-mixer-head strong {
  overflow: hidden;
  color: #0f766e;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-mixer-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.viral-mixer-options button {
  height: 28px;
  min-width: 0;
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  color: #526176;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.viral-mixer-options button.active {
  border-color: #9bd9cc;
  color: #0f766e;
  background: #e8f7f3;
}

.viral-mixer-select {
  width: 100%;
  height: 30px;
  min-width: 0;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  color: #263244;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  outline: none;
}

.viral-mixer-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 5px;
  height: 42px;
  padding: 7px 8px;
  border: 1px solid #dfe7f0;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(232, 247, 243, 0.72)),
    #fff;
}

.viral-mixer-bars i {
  display: block;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #14b8a6, #64748b);
  opacity: 0.88;
}

.viral-mixer-bars i:nth-child(1) {
  height: 18px;
}

.viral-mixer-bars i:nth-child(2) {
  height: 28px;
}

.viral-mixer-bars i:nth-child(3) {
  height: 22px;
}

.viral-mixer-bars i:nth-child(4) {
  height: 34px;
}

.viral-mixer-panel em {
  overflow: hidden;
  color: #7b8798;
  font-size: 10px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
  text-align: center;
}

.viral-video-motion-map {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 68px;
  margin-top: 8px;
}

.viral-video-motion-head {
  display: none;
}

.viral-video-motion-head span,
.viral-video-motion-head b {
  white-space: normal;
}

.viral-video-motion-visual {
  display: none;
}

.viral-video-timeline {
  grid-column: 1;
  grid-row: 1;
  gap: 6px;
  padding: 8px;
}

.viral-video-timeline div {
  min-height: 48px;
  padding: 7px 8px;
}

.viral-video-side-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.viral-delivery-card {
  gap: 8px;
  min-height: 0;
  padding: 10px;
}

.viral-delivery-head {
  padding-bottom: 8px;
}

.viral-delivery-head strong {
  font-size: 18px;
}

.viral-delivery-metrics {
  grid-template-columns: 1fr;
  gap: 7px;
}

.viral-delivery-metrics div {
  min-height: 38px;
}

.viral-delivery-actions {
  gap: 8px;
}

.viral-video-side-stack .commerce-record-strip {
  min-height: 0;
}

.viral-video-side-stack .commerce-record-list {
  min-height: 0;
  overflow-y: auto;
}

@media (min-width: 1320px) {
  .viral-console-shell {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  .viral-video-studio-shell {
    grid-template-columns: minmax(0, 1fr) 292px;
    grid-template-rows: 1fr;
  }

  .viral-video-side-stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
  }
}

@media (max-width: 760px) {
  .viral-video-workbench {
    height: auto;
    overflow: visible;
  }

  .viral-console-shell {
    grid-template-areas:
      "stage"
      "controls";
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .viral-video-panel,
  .viral-video-stage,
  .viral-video-studio-shell,
  .viral-video-preview-card {
    height: auto;
    overflow: visible;
  }

  .viral-video-board.viral-director-board,
  .viral-video-side-stack {
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* Mixer space tuning. */
.viral-video-board.viral-director-board {
  grid-template-columns: minmax(0, 0.92fr) 156px minmax(0, 0.92fr);
}

.viral-mixer-panel {
  padding: 10px;
}

.viral-mixer-head strong {
  font-size: 14px;
}

.viral-mixer-options {
  gap: 6px;
}

.viral-mixer-options button {
  height: 30px;
  font-size: 12px;
}

.viral-mixer-bars {
  height: 54px;
  padding: 8px 12px;
}

@media (max-width: 1180px) {
  .viral-video-studio-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 174px;
  }

  .viral-video-side-stack {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: 1fr;
    height: 174px;
  }

  .viral-delivery-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .viral-video-panel {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .viral-agent-top,
  .viral-agent-metrics,
  .viral-flow-rail,
  .viral-video-panel .viral-control-group:nth-of-type(1),
  .viral-video-panel .viral-control-group:nth-of-type(2),
  .viral-video-panel .viral-control-group:nth-of-type(3),
  .viral-video-panel .viral-action-bar {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Production visual reset: integrated dark control room. */
.viral-video-workbench {
  padding: 10px;
  background:
    linear-gradient(180deg, #f3f6fa 0%, #e9eef5 100%),
    #edf2f7;
}

.viral-console-shell {
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid #cfd9e6;
  border-radius: 14px;
  background: #0f172a;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.16);
}

.viral-video-panel {
  padding: 14px 12px 12px;
  border-right: 1px solid #d7e0ec;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 250, 0.98)),
    #f8fafc;
}

.viral-agent-top {
  min-height: 38px;
}

.viral-video-panel .panel-title {
  font-size: 23px;
  letter-spacing: 0;
}

.viral-agent-metrics {
  padding: 2px 0 4px;
}

.viral-video-panel .viral-control-group {
  gap: 7px;
  padding: 10px;
  border-color: #dfe7f1;
  border-radius: 10px;
  background: #fff;
}

.viral-upload-strip {
  border-radius: 9px;
  background: #f8fafc;
}

.viral-video-panel .viral-action-bar {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.98) 28%),
    #f8fafc;
}

.viral-video-stage {
  padding: 14px;
  background:
    radial-gradient(circle at 50% 20%, rgba(20, 184, 166, 0.1), transparent 32%),
    linear-gradient(180deg, #111827, #0b1120);
}

.viral-video-studio-shell {
  grid-template-columns: minmax(0, 1fr) 228px;
  gap: 12px;
}

.viral-video-stage-head {
  min-height: 44px;
  margin-bottom: 10px;
}

.viral-video-stage-head span {
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.14);
}

.viral-video-stage-head h2 {
  color: #f8fafc;
}

.viral-video-stage-head .commerce-stage-pills span {
  border-color: rgba(148, 163, 184, 0.2);
  color: #dbe6f3;
  background: rgba(15, 23, 42, 0.72);
}

.viral-video-board.viral-director-board {
  grid-template-columns: minmax(0, 0.9fr) 170px minmax(0, 0.9fr);
  gap: 10px;
  padding: 10px;
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.94)),
    #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.viral-theater,
.viral-engine-bridge {
  border-color: rgba(148, 163, 184, 0.18);
  border-radius: 12px;
}

.viral-theater {
  background: #0b1120;
}

.viral-theater-head {
  background: rgba(15, 23, 42, 0.82);
}

.viral-theater-screen {
  background:
    radial-gradient(circle at 50% 44%, rgba(99, 102, 241, 0.2), transparent 34%),
    linear-gradient(180deg, #111827, #030712);
}

.viral-engine-bridge {
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(226, 240, 241, 0.98), rgba(213, 231, 232, 0.96)),
    #e8f1f2;
}

.viral-mixer-panel {
  padding: 11px;
  border-color: #cbdde2;
  background:
    linear-gradient(180deg, #ffffff, #eef8f5),
    #f8fafc;
}

.viral-mixer-head span {
  color: #64748b;
}

.viral-mixer-head strong {
  font-size: 15px;
}

.viral-mixer-options button {
  height: 32px;
  border-radius: 8px;
}

.viral-mixer-bars {
  height: 62px;
}

.viral-engine-flow b {
  color: #0f766e;
  background: #ecfdf5;
}

.viral-video-motion-map {
  min-height: 70px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.84);
}

.viral-video-timeline div {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.viral-video-timeline b {
  color: #5eead4;
}

.viral-video-timeline strong {
  color: #f8fafc;
}

.viral-video-timeline em {
  color: #9ca3af;
}

.viral-delivery-card,
.viral-video-side-stack .commerce-record-strip {
  border-color: rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: #f8fafc;
}

.viral-delivery-card {
  padding: 12px;
}

.viral-video-side-stack .commerce-record-strip {
  padding: 12px;
}

@media (min-width: 1320px) {
  .viral-video-studio-shell {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}

@media (max-width: 1180px) {
  .viral-console-shell {
    grid-template-columns: 272px minmax(0, 1fr);
  }

  .viral-video-stage {
    padding: 10px;
  }

  .viral-video-studio-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 168px;
  }

  .viral-video-board.viral-director-board {
    grid-template-columns: minmax(0, 0.9fr) 150px minmax(0, 0.9fr);
  }

  .viral-video-side-stack {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: 1fr;
    height: 168px;
  }
}

/* Product simplification: video comparison first, mixer as floating control. */
.viral-video-board.viral-director-board {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.viral-theater-source {
  grid-column: 1;
}

.viral-theater-output {
  grid-column: 2;
}

.viral-engine-bridge {
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 5;
  display: block;
  width: min(360px, calc(100% - 48px));
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: translateX(-50%);
}

.viral-engine-flow,
.viral-engine-tags {
  display: none;
}

.viral-mixer-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 58px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 221, 226, 0.92);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.94);
  box-shadow:
    0 18px 38px rgba(2, 6, 23, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
}

.viral-mixer-head {
  min-width: 68px;
  text-align: left;
}

.viral-mixer-head span {
  display: block;
  font-size: 10px;
}

.viral-mixer-head strong {
  display: block;
  max-width: 76px;
  font-size: 13px;
}

.viral-mixer-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.viral-mixer-options button {
  height: 30px;
  border-radius: 8px;
  font-size: 11px;
}

.viral-mixer-bars {
  height: 36px;
  padding: 5px 6px;
}

.viral-mixer-panel em,
.viral-mixer-select {
  grid-column: 1 / -1;
}

.viral-mixer-select {
  height: 28px;
}

.viral-theater-screen {
  padding-top: 34px;
}

@media (max-width: 1180px) {
  .viral-video-board.viral-director-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .viral-engine-bridge {
    width: min(320px, calc(100% - 36px));
  }

  .viral-mixer-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .viral-mixer-bars {
    display: none;
  }
}

.viral-video-panel .viral-control-field,
.viral-video-panel .viral-setting-row {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
}

.viral-video-panel .viral-control-field span,
.viral-video-panel .viral-setting-row > span {
  font-size: 10px;
  line-height: 1.2;
}

.viral-video-panel .viral-compact-grid .viral-control-field {
  grid-template-columns: 42px minmax(0, 1fr);
}

.viral-video-panel .viral-segment-control {
  min-height: 28px;
}

.viral-video-panel .viral-segment-control button {
  height: 21px;
  font-size: 11px;
}

/* Final product pass: true left-center-right video console. */
.viral-video-workbench {
  height: calc(100vh - 68px);
  min-height: calc(100vh - 68px);
  padding: 10px;
  overflow: hidden;
  background: #edf3f8;
}

.viral-console-shell {
  display: grid;
  grid-template-areas: "controls stage delivery";
  grid-template-columns: clamp(236px, 23vw, 288px) minmax(340px, 1fr) clamp(168px, 18vw, 232px);
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d8e2ee;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 18px 40px rgba(24, 39, 75, 0.12);
}

.viral-video-panel {
  grid-area: controls;
  height: 100%;
  min-height: 0;
  padding: 12px 10px;
  overflow-y: auto;
  border-right: 1px solid #dfe7f1;
  background: #fbfdff;
}

.viral-video-panel .panel-title {
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0;
}

.viral-agent-top {
  min-height: 36px;
}

.viral-agent-top span,
.viral-flow-rail span,
.viral-control-heading span,
.viral-control-heading em,
.viral-video-panel .viral-control-field span,
.viral-video-panel .viral-setting-row > span {
  letter-spacing: 0;
}

.viral-video-panel .viral-control-group {
  gap: 7px;
  padding: 9px;
  border-color: #e1e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.viral-upload-strip {
  min-height: 46px;
  border-radius: 8px;
  background: #f7fafc;
}

.viral-upload-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.viral-upload-actions button {
  min-height: 24px;
  border-radius: 6px;
  font-size: 11px;
}

.viral-video-panel .viral-control-field,
.viral-video-panel .viral-setting-row {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 6px;
}

.viral-video-panel .viral-control-field input,
.viral-video-panel .viral-control-field select {
  height: 30px;
  border-radius: 7px;
}

.viral-video-panel .viral-control-field textarea {
  height: 46px;
  border-radius: 7px;
}

.viral-video-panel .viral-control-textarea.is-compact textarea {
  height: 38px;
}

.viral-video-panel .viral-segment-control {
  min-height: 30px;
  border-radius: 8px;
}

.viral-video-panel .viral-segment-control button {
  height: 24px;
  border-radius: 6px;
  font-size: 11px;
}

.viral-video-panel .viral-action-bar {
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  gap: 8px;
  padding-top: 8px;
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0), rgba(251, 253, 255, 0.98) 34%),
    #fbfdff;
}

.viral-video-panel .commerce-reset-btn,
.viral-video-panel .commerce-suite-submit {
  min-height: 38px;
  border-radius: 8px;
}

.viral-video-stage {
  grid-area: stage;
  height: 100%;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  border-right: 1px solid #dfe7f1;
  background:
    linear-gradient(180deg, #f3f7fb, #edf3f7),
    #f2f6fb;
}

.viral-video-studio-shell {
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.viral-video-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.viral-video-stage-head {
  min-height: 42px;
  margin: 0;
}

.viral-video-stage-head h2 {
  margin-top: 2px;
  color: #111827;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: 0;
}

.viral-video-stage-head p {
  display: none;
}

.viral-video-stage-head span {
  color: #6d28d9;
  background: #f1eafe;
}

.viral-video-stage-head .commerce-stage-pills {
  gap: 6px;
}

.viral-video-stage-head .commerce-stage-pills span {
  height: 24px;
  border-color: #e2e8f0;
  color: #334155;
  background: #fff;
  font-size: 11px;
}

.viral-video-board.viral-director-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #172033;
  border-radius: 8px;
  background: #111827;
  box-shadow: none;
}

.viral-video-board.viral-director-board::before {
  position: absolute;
  top: 48px;
  bottom: 16px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.34), transparent);
  content: "";
  pointer-events: none;
}

.viral-theater-source,
.viral-theater-output {
  grid-column: auto;
}

.viral-theater {
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.14);
  border-radius: 8px;
  background: #0b1120;
}

.viral-theater-head {
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.1);
  color: #cbd5e1;
  background: #111827;
}

.viral-theater-head span,
.viral-theater-head b {
  font-size: 12px;
  letter-spacing: 0;
}

.viral-theater-head b {
  color: #a7f3d0;
}

.viral-theater-screen {
  min-height: 0;
  padding-top: 0;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.78), rgba(3, 7, 18, 0.98)),
    #030712;
}

.viral-theater-screen::before {
  inset: 12px;
  border-color: rgba(148, 163, 184, 0.12);
  border-radius: 8px;
}

.viral-theater-screen::after {
  right: 18px;
  bottom: 16px;
  left: 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.24), rgba(20, 184, 166, 0.78), rgba(251, 191, 36, 0.68));
}

.viral-theater-screen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viral-theater-screen em {
  right: 13px;
  bottom: 14px;
  color: #a7f3d0;
}

.viral-theater-tags {
  display: none;
}

.viral-monitor-placeholder {
  max-width: min(170px, 82%);
}

.viral-monitor-placeholder strong {
  color: #f8fafc;
  font-size: 13px;
}

.viral-monitor-placeholder span {
  white-space: normal;
}

.viral-audio-dock {
  display: grid;
  grid-template-areas:
    "title options"
    "wave detail";
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 7px 10px;
  min-height: 82px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
}

.viral-audio-title {
  grid-area: title;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.viral-audio-title span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.viral-audio-title strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-audio-options {
  grid-area: options;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.viral-audio-options button {
  height: 31px;
  min-width: 0;
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  color: #475569;
  background: #f8fafc;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.viral-audio-options button.active {
  border-color: #a78bfa;
  color: #5b21b6;
  background: #f3eefe;
}

.viral-audio-wave {
  grid-area: wave;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 4px;
  height: 30px;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
}

.viral-audio-wave i {
  display: block;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, #8b5cf6, #14b8a6);
}

.viral-audio-wave i:nth-child(1) { height: 12px; }
.viral-audio-wave i:nth-child(2) { height: 20px; }
.viral-audio-wave i:nth-child(3) { height: 15px; }
.viral-audio-wave i:nth-child(4) { height: 24px; }
.viral-audio-wave i:nth-child(5) { height: 17px; }

.viral-audio-field {
  grid-area: detail;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.viral-audio-field span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.viral-audio-field input,
.viral-audio-field select {
  width: 100%;
  height: 30px;
  min-width: 0;
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  color: #1f2937;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.viral-audio-dock p {
  grid-area: detail;
  align-self: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-video-motion-map {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 68px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.viral-video-motion-head,
.viral-video-motion-visual {
  display: none;
}

.viral-video-timeline {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
}

.viral-video-timeline div {
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
  box-shadow: none;
}

.viral-video-timeline b,
.viral-video-timeline strong,
.viral-video-timeline em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-video-timeline b {
  color: #6d28d9;
}

.viral-video-timeline strong {
  color: #111827;
  font-size: 12px;
}

.viral-video-timeline em {
  color: #64748b;
  font-size: 11px;
}

.viral-video-side-stack {
  grid-area: delivery;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 12px 10px;
  overflow: hidden;
  background: #fbfdff;
}

.viral-delivery-card,
.viral-video-side-stack .commerce-record-strip {
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.viral-delivery-card {
  gap: 9px;
  min-height: 0;
  padding: 10px;
}

.viral-delivery-head {
  padding-bottom: 8px;
}

.viral-delivery-head strong {
  font-size: 18px;
  letter-spacing: 0;
}

.viral-delivery-head em {
  border-radius: 7px;
  color: #5b21b6;
  background: #f3eefe;
}

.viral-delivery-metrics {
  grid-template-columns: 1fr;
  gap: 7px;
}

.viral-delivery-metrics div {
  min-height: 38px;
  padding: 7px;
  border-radius: 7px;
  background: #f8fafc;
}

.viral-delivery-actions {
  gap: 7px;
}

.viral-delivery-actions .commerce-result-download,
.viral-delivery-actions .commerce-copy-link {
  min-height: 34px;
  border-radius: 7px;
}

.viral-video-side-stack .commerce-record-strip {
  min-height: 0;
  padding: 10px;
}

.viral-video-side-stack .commerce-record-head {
  margin-bottom: 8px;
}

.viral-video-side-stack .commerce-record-head strong {
  font-size: 14px;
}

.viral-video-side-stack .commerce-record-head span {
  font-size: 11px;
}

.viral-video-side-stack .commerce-record-list {
  min-height: 0;
  overflow-y: auto;
}

.viral-video-side-stack .commerce-creation-empty {
  min-height: 112px;
  border-radius: 8px;
  background: #f8fafc;
}

@media (min-width: 1320px) {
  .viral-console-shell {
    grid-template-columns: 292px minmax(520px, 1fr) 250px;
  }

  .viral-audio-dock {
    grid-template-columns: 86px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .viral-console-shell {
    grid-template-columns: 220px minmax(320px, 1fr) 176px;
  }

  .viral-video-workbench {
    padding: 8px;
  }

  .viral-video-panel {
    padding: 10px 8px;
  }

  .viral-video-stage {
    padding: 10px;
  }

  .viral-video-side-stack {
    padding: 10px 8px;
  }

  .viral-video-stage-head .commerce-stage-pills span:nth-child(3),
  .viral-video-stage-head .commerce-stage-pills span:nth-child(4) {
    display: none;
  }

  .viral-audio-dock {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 6px 8px;
    min-height: 78px;
    padding: 8px;
  }

  .viral-audio-options {
    gap: 4px;
  }

  .viral-audio-options button {
    height: 29px;
    font-size: 10px;
  }

  .viral-audio-wave {
    height: 28px;
  }
}

.viral-video-panel .viral-compact-grid .viral-control-field {
  grid-template-columns: 1fr;
  gap: 3px;
}

.viral-video-panel .viral-compact-grid .viral-control-field span {
  white-space: nowrap;
}

.viral-delivery-head {
  align-items: flex-start;
}

.viral-delivery-head strong {
  white-space: nowrap;
}

.viral-delivery-actions {
  grid-template-columns: 1fr;
}

.viral-delivery-actions .commerce-result-download,
.viral-delivery-actions .commerce-copy-link {
  width: 100%;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .viral-video-workbench {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .viral-console-shell {
    grid-template-areas:
      "stage"
      "controls"
      "delivery";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    overflow: visible;
  }

  .viral-video-panel,
  .viral-video-stage,
  .viral-video-side-stack,
  .viral-video-studio-shell,
  .viral-video-preview-card {
    height: auto;
    overflow: visible;
  }

  .viral-video-stage {
    border-right: 0;
  }

  .viral-video-board.viral-director-board {
    min-height: 420px;
  }

  .viral-video-side-stack {
    grid-template-rows: auto auto;
  }
}

/* Premium polish for the public viral-video console. */
.viral-console-shell {
  border-color: #d4deeb;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 253, 0.94)),
    #f8fafc;
}

.viral-video-panel {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto minmax(0, auto);
  gap: 8px;
  padding: 12px 12px 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fafd 100%),
    #fbfdff;
}

.viral-agent-top {
  align-items: center;
  min-height: 40px;
  padding: 0 2px 2px;
}

.viral-agent-top span {
  color: #7c8799;
  font-size: 11px;
  font-weight: 900;
}

.viral-video-panel .panel-title {
  margin-top: 2px;
  color: #101827;
  font-size: 24px;
  font-weight: 950;
}

.viral-agent-top > strong {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #cceee8;
  border-radius: 8px;
  color: #0f766e;
  background: #ecfdf8;
  font-size: 12px;
  font-weight: 950;
}

.viral-agent-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.viral-agent-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: #667085;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.viral-agent-metrics span + span::before {
  display: none;
}

.viral-agent-metrics strong {
  color: #101827;
  font-size: 15px;
  line-height: 1;
  font-weight: 950;
}

.viral-agent-metrics em {
  margin-left: 2px;
  color: #8b96a8;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.viral-flow-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 3px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f3f7fb;
}

.viral-flow-rail span {
  justify-content: center;
  min-height: 24px;
  border-radius: 6px;
  color: #7b8798;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

.viral-flow-rail span + span::before {
  display: none;
}

.viral-flow-rail span.is-active,
.viral-flow-rail span.is-done {
  color: #0f766e;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 118, 110, 0.08);
}

.viral-video-panel .viral-control-group {
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #fbfdff),
    #fff;
}

.viral-control-heading {
  min-height: 24px;
  gap: 8px;
}

.viral-control-heading span {
  width: 26px;
  height: 22px;
  border-radius: 6px;
  color: #6d28d9;
  background: #f1eafe;
  font-size: 11px;
  font-weight: 950;
}

.viral-control-heading strong {
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}

.viral-control-heading em {
  color: #7c8799;
  font-size: 11px;
  font-weight: 900;
}

.viral-upload-strip {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 52px;
  padding: 6px;
  border: 1px solid #d9e5f0;
  border-radius: 8px;
  background: #f8fbfe;
}

.viral-upload-thumb {
  width: 40px;
  height: 40px;
  border-color: #d2deeb;
  background: #fff;
}

.viral-upload-thumb span {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #334155;
}

.viral-upload-meta strong {
  color: #172033;
  font-size: 14px;
  font-weight: 950;
}

.viral-upload-meta span {
  color: #8b96a8;
  font-size: 11px;
  font-weight: 850;
}

.viral-upload-actions {
  gap: 6px;
}

.viral-upload-actions button {
  min-width: 54px;
  height: 28px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 950;
}

.viral-upload-actions button:first-child {
  border-color: #172033;
  background: #172033;
}

.viral-video-panel .viral-control-field,
.viral-video-panel .viral-setting-row,
.viral-video-panel .viral-control-textarea {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.viral-video-panel .viral-control-field span,
.viral-video-panel .viral-setting-row > span {
  min-height: 14px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
}

.viral-video-panel .viral-control-field input,
.viral-video-panel .viral-control-field select {
  height: 32px;
  padding: 0 12px;
  border-color: #dbe5ef;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.viral-video-panel .viral-control-field textarea {
  height: 42px;
  padding: 7px 10px;
  border-color: #dbe5ef;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.viral-video-panel .viral-control-textarea.is-compact textarea {
  height: 36px;
}

.viral-compact-grid {
  gap: 8px;
}

.viral-video-panel .viral-compact-grid .viral-control-field {
  grid-template-columns: 1fr;
  gap: 4px;
}

.viral-video-duration-note {
  margin-top: -2px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  color: #64748b;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.viral-video-panel .viral-segment-control {
  min-height: 32px;
  padding: 3px;
  border-color: #dbe5ef;
  border-radius: 9px;
  background: #eef3f8;
}

.viral-video-panel .viral-segment-control button {
  height: 24px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 950;
}

.viral-video-panel .viral-segment-control button.active {
  color: #111827;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.viral-video-panel .viral-action-bar {
  gap: 10px;
  padding-top: 8px;
}

.viral-video-panel .commerce-reset-btn,
.viral-video-panel .commerce-suite-submit {
  min-height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 950;
}

.viral-video-panel .commerce-suite-submit {
  background: linear-gradient(135deg, #101827, #0f9f7a);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.2);
}

/* Remove tab-like step rail and keep the left panel from covering fields. */
.viral-flow-rail {
  display: none !important;
}

.viral-video-panel {
  grid-template-rows: auto auto auto auto auto minmax(0, auto);
}

.viral-video-panel .viral-action-bar {
  position: static;
  bottom: auto;
  z-index: auto;
  padding-top: 6px;
  background: transparent;
}

.viral-video-panel .viral-control-group {
  min-height: 0;
}

.viral-video-panel .viral-control-field input,
.viral-video-panel .viral-control-field select {
  height: 30px;
}

.viral-video-panel .viral-control-field textarea {
  height: 34px;
}

.viral-video-panel .viral-control-textarea.is-compact textarea {
  height: 30px;
}

.viral-video-duration-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 900px) {
  .viral-console-shell {
    grid-template-columns: 244px minmax(300px, 1fr) 176px;
  }
}

.viral-brief-group {
  gap: 8px;
}

.viral-script-box {
  position: relative;
  display: block;
  min-height: 124px;
}

.viral-script-box textarea {
  width: 100%;
  height: 124px;
  min-height: 124px;
  padding: 12px 12px 48px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  color: #172033;
  background: #fff;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.45;
  resize: none;
  outline: none;
}

.viral-script-box textarea::placeholder {
  color: #9aa5b5;
  font-weight: 820;
}

.viral-script-box textarea:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.14);
}

.viral-script-optimize {
  position: absolute;
  right: 10px;
  bottom: 10px;
  height: 32px;
  min-width: 78px;
  padding: 0 13px;
  border: 1px solid #c7b8ff;
  border-radius: 7px;
  color: #5b21b6;
  background: #f3eefe;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.viral-script-optimize:disabled {
  cursor: default;
  opacity: 0.62;
}

/* Compact headers: no repeated marketing labels. */
.viral-agent-top {
  min-height: 32px;
  padding: 0;
}

.viral-agent-top > div {
  display: flex;
  align-items: center;
  min-width: 0;
}

.viral-agent-top span,
.viral-video-stage-head > div > span {
  display: none;
}

.viral-video-panel .panel-title {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}

.viral-agent-top > strong {
  height: 26px;
  padding: 0 9px;
  font-size: 11px;
}

.viral-video-stage-head {
  min-height: 34px;
  align-items: center;
}

.viral-video-stage-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.viral-video-stage-head .commerce-stage-pills span {
  height: 24px;
}

/* Source stays as context; the generated video owns the main preview. */
.viral-console-shell {
  grid-template-columns: minmax(284px, 304px) minmax(0, 1fr) minmax(190px, 220px);
}

.viral-video-panel,
.viral-video-stage,
.viral-video-side-stack {
  min-width: 0;
}

.viral-upload-strip {
  grid-template-columns: 40px minmax(0, 1fr) max-content;
}

.viral-upload-actions {
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: max-content;
}

.viral-upload-actions button {
  min-width: 48px;
  padding: 0 9px;
}

.viral-video-panel .viral-setting-row {
  grid-template-columns: 52px minmax(0, 1fr);
}

.viral-video-panel .viral-segment-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.viral-video-panel .viral-segment-control button {
  min-width: 0;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-script-optimize {
  right: 8px;
  max-width: calc(100% - 16px);
}

.viral-video-preview-card {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.viral-video-board.viral-director-board {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}

.viral-video-board.viral-director-board::before {
  display: none;
}

.viral-source-compact {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.88);
}

.viral-source-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  background: #020617;
}

.viral-source-mark span {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(20, 184, 166, 0.9);
  border-radius: 999px;
}

.viral-source-mini-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viral-source-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.viral-source-copy span {
  color: #93a4bb;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.viral-source-copy strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-source-compact b {
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 7px;
  color: #a7f3d0;
  background: rgba(20, 184, 166, 0.1);
  font-size: 11px;
  font-weight: 950;
  line-height: 22px;
  white-space: nowrap;
}

.viral-source-compact b.is-warning {
  border-color: rgba(245, 158, 11, 0.34);
  color: #fde68a;
  background: rgba(245, 158, 11, 0.14);
}

.viral-watermark-guard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 8px;
  color: #dbeafe;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(18, 83, 87, 0.72));
}

.viral-watermark-guard span {
  color: #99f6e4;
  font-size: 11px;
  font-weight: 950;
}

.viral-watermark-guard strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
}

.viral-watermark-guard p {
  grid-column: 1 / -1;
  margin: 0;
  color: #a7b6ca;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.viral-watermark-guard.is-blocked {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(92, 58, 18, 0.68));
}

.viral-output-main {
  grid-row: 3;
}

.viral-output-main .viral-theater-screen {
  padding-top: 0;
}

.viral-output-main .viral-monitor-placeholder {
  max-width: min(220px, 82%);
}

@media (max-width: 1040px) {
  .viral-console-shell {
    grid-template-areas:
      "controls stage"
      "controls delivery";
    grid-template-columns: 286px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 142px;
  }

  .viral-video-stage {
    border-right: 0;
    border-bottom: 1px solid #dfe7f1;
  }

  .viral-video-side-stack {
    grid-template-columns: minmax(300px, 0.68fr) minmax(0, 0.32fr);
    grid-template-rows: 1fr;
    gap: 8px;
    height: 100%;
    padding: 8px;
    overflow: hidden;
    border-left: 0;
    background: #fbfdff;
  }

  .viral-delivery-card {
    display: grid;
    grid-template-rows: 28px 38px 32px;
    gap: 6px;
    padding: 8px;
    overflow: hidden;
  }

  .viral-delivery-head {
    align-items: center;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .viral-delivery-head span {
    display: none;
  }

  .viral-delivery-head strong {
    margin: 0;
    font-size: 15px;
  }

  .viral-delivery-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .viral-delivery-metrics div {
    min-height: 30px;
    gap: 1px;
    padding: 4px 6px;
  }

  .viral-delivery-metrics span {
    font-size: 10px;
    line-height: 1;
  }

  .viral-delivery-metrics strong {
    font-size: 11px;
    line-height: 1.15;
  }

  .viral-delivery-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .viral-delivery-actions .commerce-result-download,
  .viral-delivery-actions .commerce-copy-link {
    min-height: 30px;
  }

  .viral-video-side-stack .commerce-record-strip {
    min-height: 0;
    padding: 8px;
    overflow: hidden;
  }

  .viral-video-side-stack .commerce-record-head {
    margin-bottom: 6px;
  }

  .viral-video-side-stack .commerce-creation-empty {
    min-height: 66px;
  }
}

@media (max-width: 760px) {
  .viral-video-workbench {
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: auto;
  }

  .viral-console-shell {
    grid-template-areas:
      "controls"
      "stage"
      "delivery";
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(480px, 58vh) auto;
    overflow: visible;
  }

  .viral-video-panel {
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #dfe7f1;
  }

  .viral-video-stage {
    min-height: 480px;
  }

  .viral-video-side-stack {
    grid-template-columns: 1fr;
    height: auto;
  }
}

@media (max-width: 1180px) {
  .api-banner {
    grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.78fr);
    min-height: 240px;
    padding: 28px 30px;
  }

  .api-doc-hero,
  .api-debug-hero {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.5fr);
  }

  .api-doc-layout,
  .api-debug-layout {
    gap: 16px;
  }

  .api-doc-layout {
    grid-template-columns: 236px minmax(0, 1fr);
  }

  .api-debug-layout {
    grid-template-columns: minmax(0, 1fr) 258px;
  }

  .api-debug-terminal code {
    font-size: 13px;
  }

  .api-console {
    grid-template-columns: 1fr;
  }

  .api-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .api-doc-hero,
  .api-debug-hero,
  .api-doc-layout,
  .api-debug-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .api-page {
    padding-bottom: 44px;
  }

  .api-console,
  .api-category-strip,
  .api-product-grid {
    width: calc(100% - 24px);
  }

  .api-banner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px 24px;
  }

  .api-access-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .api-flow,
  .api-console-stats,
  .api-card-meta,
  .api-product-grid {
    grid-template-columns: 1fr;
  }

  .api-console {
    padding: 14px;
    border-radius: 16px;
  }

  .api-console-main {
    padding: 2px;
  }

  .api-console-main h2 {
    font-size: 21px;
  }

  .api-card {
    min-height: 0;
    padding: 16px;
    border-radius: 16px;
  }

  .api-endpoint code {
    white-space: normal;
    word-break: break-word;
  }

  .api-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .api-card-link,
  .api-card-primary {
    width: 100%;
  }

  .api-banner-tags {
    gap: 8px;
  }

  .api-banner-tags span {
    height: 34px;
    font-size: 12px;
  }

  .api-banner-visual {
    height: 180px;
  }

  .api-tool-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .api-tool-footer button {
    width: 100%;
  }

  .api-doc-layout,
  .api-debug-layout {
    width: calc(100% - 24px);
    margin-bottom: 44px;
  }

  .api-doc-card,
  .api-debug-panel {
    padding: 16px;
    border-radius: 16px;
  }

  .api-doc-cover,
  .api-debug-terminal {
    min-height: 0;
    height: 190px;
    border-radius: 18px;
  }

  .api-doc-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .api-doc-card-head h2 {
    font-size: 20px;
  }

  .api-doc-endpoint-line,
  .api-doc-auth-grid,
  .api-doc-table div,
  .api-doc-steps {
    grid-template-columns: 1fr;
  }

  .api-doc-endpoint-line code {
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
  }

  .api-doc-inline-actions,
  .api-debug-actions,
  .api-doc-support {
    align-items: stretch;
    flex-direction: column;
  }

  .api-doc-inline-actions button,
  .api-debug-actions button,
  .api-doc-support button {
    width: 100%;
  }

  .api-debug-field textarea {
    min-height: 220px;
  }
}

/* Commerce product effect-one blueprint, 2026-06-12 */
.commerce-workbench {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  min-height: calc(100vh - 68px);
  padding: 0 18px 38px;
  background: #fff;
}

.commerce-form-card.commerce-control-panel,
.commerce-preview-stage {
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.commerce-form-card.commerce-control-panel {
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.commerce-panel-head {
  min-height: 0;
  margin: 0 0 14px;
}

.commerce-form-card .panel-title {
  margin: 0;
  color: #202336;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 950;
}

.commerce-form-card .point-strip {
  min-height: 39px;
  margin: 0 0 19px;
  padding: 0 12px;
  align-items: center;
  border-color: #edf0f6;
  color: #515a6d;
  background: #fff;
  box-shadow: none;
}

.commerce-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 10px;
}

.commerce-panel-section,
.commerce-form-section,
.commerce-suite-field {
  min-width: 0;
}

.commerce-form-spacer {
  min-height: 151px;
}

.commerce-upload-section {
  min-width: 0;
}

.commerce-panel-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.commerce-field-head,
.commerce-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.commerce-field-head strong,
.commerce-section-title span,
.commerce-suite-field span {
  color: #242a3b;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
}

.commerce-section-title strong {
  min-width: 0;
  overflow: hidden;
  color: #737b8d;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-field-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid #dedcf5;
  border-radius: 8px;
  color: #6d5cf0;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.commerce-suite-upload {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  width: 214px;
  height: 124px;
  min-height: 124px;
  padding: 16px 18px;
  border: 1px dashed #d7dce8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.commerce-suite-upload.has-upload {
  border-style: solid;
  border-color: #d7d1ff;
  background: #fbfaff;
}

.commerce-upload-icon {
  display: block;
  width: 39px;
  height: 29px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 33% 36%, #ffffff 0 2px, transparent 3px),
    linear-gradient(135deg, #7a6cff, #e75fb8);
  box-shadow: 0 8px 18px rgba(108, 92, 240, 0.2);
}

.commerce-upload-actions {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  opacity: 0;
  pointer-events: none;
}

.commerce-suite-upload:hover .commerce-upload-actions,
.commerce-suite-upload:focus-within .commerce-upload-actions {
  opacity: 1;
  pointer-events: auto;
}

.commerce-upload-actions button {
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.commerce-upload-copy {
  display: grid;
  gap: 4px;
  color: #30374a;
  text-align: center;
}

.commerce-upload-copy strong {
  color: #6b7280;
  font-size: 14px;
  font-weight: 850;
}

.commerce-upload-copy span {
  color: #8b8f9d;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.commerce-upload-thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.commerce-upload-thumbs span {
  width: 38px;
  height: 38px;
  border: 1px solid #e3e0ef;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.commerce-suite-field {
  display: grid;
  gap: 10px;
}

.commerce-platform-select {
  gap: 0;
}

.commerce-suite-field input,
.commerce-suite-field select,
.commerce-copy-field textarea {
  width: 100%;
  border: 1px solid #e5e7ef;
  border-radius: 10px;
  color: #252b3b;
  background: #fff;
  font-size: 15px;
  font-weight: 760;
  outline: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.commerce-suite-field input:focus,
.commerce-suite-field select:focus,
.commerce-copy-field textarea:focus {
  border-color: #b8aff8;
  box-shadow: 0 0 0 3px rgba(109, 92, 240, 0.1);
}

.commerce-suite-field input,
.commerce-suite-field select {
  height: 43px;
  padding: 0 15px;
}

.commerce-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commerce-platform-site-row,
.commerce-language-category-row,
.commerce-style-product-row,
.commerce-output-section,
.commerce-copy-field,
.commerce-submit-bar {
  grid-column: 1 / -1;
}

.commerce-output-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.commerce-output-option {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 41px;
  padding: 0 12px;
  border: 1px solid #e8e8ef;
  border-radius: 9px;
  color: #282d3c;
  background: #fff;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 14px rgba(28, 34, 52, 0.025);
}

.commerce-output-option strong,
.commerce-output-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-output-option strong {
  font-size: 14px;
  font-weight: 850;
}

.commerce-output-option span {
  display: none;
}

.commerce-output-option.active {
  border-color: #7d6af2;
  color: #1f2433;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(125, 106, 242, 0.35);
}

.commerce-output-option.is-suite {
  border-color: #d9d6f3;
  background: #fff;
}

.commerce-output-option.is-suite.active {
  border-color: #7d6af2;
  color: #202336;
  background: #fff;
}

.commerce-detail-module-section {
  margin-top: 10px;
  padding: 11px 12px 12px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fbfcff;
}

.commerce-module-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #343b4f;
  font-size: 13px;
  font-weight: 850;
}

.commerce-module-summary strong {
  color: #737b8d;
  font-size: 12px;
  font-weight: 850;
}

.commerce-module-chips {
  gap: 6px;
}

.commerce-module-chip {
  min-height: 28px;
  padding: 4px 8px 4px 5px;
  border-radius: 8px;
}

.commerce-module-chip b {
  min-width: 18px;
  height: 18px;
  font-size: 9px;
}

.commerce-copy-field textarea {
  display: block;
  min-height: 92px;
  padding: 12px 13px 34px;
  resize: none;
  line-height: 1.5;
}

.commerce-copy-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: -31px;
  padding: 0 12px 9px;
  color: #737b8d;
  font-size: 12px;
  font-weight: 800;
}

.commerce-copy-footer button {
  color: #737b8d;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.commerce-submit-bar {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  margin: 0;
}

.commerce-suite-submit {
  width: 100%;
  height: 44px;
  border-radius: 8px;
}

.commerce-form-card .commerce-suite-submit {
  background: linear-gradient(135deg, #7666ed, #d84fb8);
  box-shadow: 0 12px 26px rgba(118, 102, 237, 0.24);
}

.commerce-preview-stage {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  align-content: start;
  gap: 14px;
  width: calc(100% + 36px);
  min-width: 0;
  min-height: 620px;
  margin: 32px -18px 0;
  padding: 26px 18px 34px;
  background:
    linear-gradient(180deg, rgba(249, 251, 254, 0.96), rgba(241, 246, 251, 0.96)),
    #f5f8fb;
}

.commerce-stage-head,
.commerce-visual-preview,
.commerce-record-strip {
  width: min(1080px, 100%);
  max-width: none;
  margin: 0 auto;
}

.commerce-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.commerce-stage-head h2 {
  margin: 4px 0 0;
  color: #172033;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: 0;
}

.commerce-stage-head span {
  color: #7b8495;
  font-size: 12px;
  font-weight: 850;
}

.commerce-stage-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 360px;
}

.commerce-stage-pills span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(112, 104, 216, 0.14);
  border-radius: 8px;
  color: #485468;
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 880;
  box-shadow: 0 6px 16px rgba(57, 66, 105, 0.04);
}

.commerce-visual-preview {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 0;
}

.commerce-artboard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: min(620px, calc(100vh - 168px));
  padding: 16px;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(36, 48, 76, 0.075);
}

.commerce-main-art {
  width: min(520px, 100%, calc(100vh - 260px));
  min-width: 300px;
}

.commerce-record-strip {
  padding: 12px;
  border-radius: 8px;
}

@media (max-width: 1050px) {
  .commerce-form-grid {
    grid-template-columns: 1fr;
  }

  .commerce-form-spacer {
    display: none;
  }
}

@media (max-width: 760px) {
  .commerce-workbench {
    padding: 0 12px 28px;
  }

  .commerce-form-row,
  .commerce-output-choice,
  .commerce-submit-bar {
    grid-template-columns: 1fr;
  }

  .commerce-suite-upload {
    width: 100%;
    min-height: 124px;
    padding: 18px;
  }

  .commerce-preview-stage {
    width: calc(100% + 24px);
    min-height: 0;
    margin: 22px -12px 0;
    padding: 16px;
  }

  .commerce-stage-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .commerce-artboard {
    min-height: 420px;
  }

  .commerce-preview-browser {
    grid-template-columns: 1fr;
    position: static;
    max-width: none;
    margin-top: 10px;
  }

  .commerce-browser-arrow {
    display: none;
  }
}

/* Commerce product reference final override, 2026-06-14 */
.commerce-shell .topbar-inner {
  justify-content: flex-start;
  width: min(1526px, calc(100% - 62px));
}

.commerce-shell .brand,
.commerce-shell .actions {
  flex: 0 0 170px;
}

.commerce-shell .nav {
  flex: 0 0 auto;
  margin-left: 22px;
}

.commerce-shell .actions {
  margin-left: auto;
}

.commerce-shell .commerce-workbench {
  grid-template-columns: 606px minmax(0, 1fr);
  gap: 24px;
  width: min(1526px, calc(100% - 62px));
  padding: 26px 0 22px;
  background: #f6f8fc;
}

.commerce-shell .commerce-form-card.commerce-control-panel {
  padding: 18px 19px 20px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.035);
}

.commerce-shell .commerce-form-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.commerce-shell .commerce-suite-upload {
  width: 100%;
  height: 174px;
  min-height: 174px;
  padding: 26px 18px 14px;
}

.commerce-shell .commerce-output-choice {
  grid-template-columns: 1.06fr 1.06fr 1.06fr 1.52fr;
}

.commerce-shell .commerce-module-buttons {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.commerce-shell .commerce-language-category-row {
  grid-template-columns: 136px 136px minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
}

.commerce-shell .commerce-language-category-row .commerce-copy-field {
  grid-column: 3;
  grid-row: 1;
}

.commerce-shell .commerce-copy-field textarea {
  height: 50px;
  min-height: 50px;
  padding: 10px 12px 19px;
}

.commerce-shell .commerce-form-card .commerce-suite-submit {
  height: 48px;
}

.commerce-shell .commerce-preview-stage {
  display: grid;
  gap: 16px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 23px 20px 18px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.035);
}

.commerce-shell .commerce-artboard {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.commerce-shell .commerce-artboard-surface {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.commerce-shell .commerce-main-art {
  width: 100%;
  min-width: 0;
  aspect-ratio: 852 / 600;
  border-radius: 8px;
}

.commerce-shell .commerce-main-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commerce-shell .commerce-artboard-actions,
.commerce-shell .commerce-preview-browser {
  display: none;
}

.commerce-shell .commerce-record-strip {
  width: 100%;
  margin: 0;
  padding: 18px 20px 21px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.035);
}

.commerce-shell .commerce-record-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

.commerce-shell .commerce-record-item {
  height: 105px;
}

@media (max-width: 1200px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 1120px);
  }
}

@media (max-width: 760px) {
  .commerce-shell .nav {
    margin-left: 0;
    width: 100%;
  }

  .commerce-shell .commerce-workbench {
    width: calc(100% - 24px);
  }

  .commerce-shell .commerce-preview-stage {
    width: 100%;
    margin: 0;
    padding: 16px;
  }

  .commerce-shell .commerce-stage-head,
  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface,
  .commerce-shell .commerce-main-art {
    width: 100%;
    max-width: 100%;
  }

  .commerce-shell .commerce-output-choice,
  .commerce-shell .commerce-platform-buttons,
  .commerce-shell .commerce-module-buttons,
  .commerce-shell .commerce-record-list {
    grid-template-columns: 1fr 1fr;
  }

  .commerce-shell .commerce-language-category-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }

  .commerce-shell .commerce-language-category-row .commerce-copy-field {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Commerce product reference visual lock, 2026-06-14 */
.commerce-shell {
  min-height: 100vh;
  background: #f6f8fc;
}

.commerce-shell .topbar {
  height: 66px;
  border-bottom: 1px solid #edf0f6;
  background: #fff;
  backdrop-filter: none;
}

.commerce-shell .topbar-inner {
  width: min(1526px, calc(100% - 62px));
}

.commerce-shell .brand {
  gap: 11px;
  min-width: 168px;
}

.commerce-shell .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  overflow: hidden;
  background: url("./assets/reference/commerce-product/logo-mark.png") center / cover no-repeat;
  box-shadow: none;
}

.commerce-shell .brand-mark .brand-logo {
  opacity: 0;
}

.commerce-shell .brand-mark::before,
.commerce-shell .brand-mark::after {
  display: none;
}

.commerce-shell .brand-name {
  color: #101321;
  font-size: 27px;
  font-weight: 900;
}

.commerce-shell .brand-sub,
.commerce-shell .nav > .nav-link[href="#/pages/api-center"] {
  display: none;
}

.commerce-shell .nav {
  gap: 31px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.commerce-shell .nav-link {
  position: relative;
  height: 66px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #171b2a;
  background: transparent;
  font-size: 15px;
  font-weight: 760;
  box-shadow: none;
}

.commerce-shell .nav-link.active,
.commerce-shell .nav-link:hover {
  color: #5b27ff;
  background: transparent;
  box-shadow: none;
}

.commerce-shell .nav-link.active::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #6d34ff;
  content: "";
}

.commerce-shell .chevron {
  display: none;
}

.commerce-shell .actions {
  min-width: 168px;
  text-align: right;
}

.commerce-shell .login-btn {
  width: 82px;
  height: 41px;
  padding: 0;
  border: 1.5px solid #6d34ff;
  border-radius: 10px;
  color: #4c20e8;
  background: #fff;
  font-size: 15px;
  font-weight: 850;
}

.commerce-shell .commerce-workbench {
  display: grid;
  grid-template-columns: minmax(480px, 39.5%) minmax(0, 1fr);
  gap: 24px;
  width: min(1526px, calc(100% - 62px));
  min-height: calc(100vh - 66px);
  margin: 0 auto;
  padding: 26px 0 22px;
  overflow: visible;
  background: #f6f8fc;
}

.commerce-shell .commerce-form-card.commerce-control-panel,
.commerce-shell .commerce-preview-stage,
.commerce-shell .commerce-record-strip {
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.035);
}

.commerce-shell .commerce-form-card.commerce-control-panel {
  padding: 18px 19px 20px;
}

.commerce-shell .commerce-panel-head {
  margin: 0 0 16px;
}

.commerce-shell .commerce-panel-head p {
  display: block;
  margin: 7px 0 0;
  color: #7d8596;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 520;
}

.commerce-shell .commerce-form-card .panel-title {
  color: #111827;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 900;
}

.commerce-shell .commerce-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.commerce-shell .commerce-form-section,
.commerce-shell .commerce-panel-section {
  padding: 0;
  border: 0;
  background: transparent;
}

.commerce-shell .commerce-section-title {
  margin: 0 0 9px;
}

.commerce-shell .commerce-section-title span,
.commerce-shell .commerce-suite-field > span {
  color: #1d2435;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 760;
}

.commerce-shell .commerce-suite-upload {
  width: 100%;
  height: 174px;
  min-height: 174px;
  gap: 8px;
  padding: 26px 18px 14px;
  border-color: #d7deec;
  border-radius: 10px;
  background: #fff;
}

.commerce-shell .commerce-upload-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background:
    #fff
    url("./assets/reference/commerce-product/upload-icon.png") center / 44px 40px no-repeat;
  box-shadow: none;
}

.commerce-shell .commerce-upload-icon::before,
.commerce-shell .commerce-upload-icon::after {
  display: none;
}

.commerce-shell .commerce-upload-copy {
  order: 2;
  gap: 5px;
}

.commerce-shell .commerce-upload-copy strong {
  color: #4b5567;
  font-size: 14px;
  font-weight: 700;
}

.commerce-shell .commerce-upload-copy span {
  color: #8c94a3;
  font-size: 12px;
  font-weight: 520;
}

.commerce-shell .commerce-upload-actions {
  position: static;
  order: 3;
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.commerce-shell .commerce-upload-actions button:first-child {
  display: none;
}

.commerce-shell .commerce-upload-actions button:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 13px;
  border: 1px solid #e2e7f0;
  border-radius: 7px;
  color: #3c4456;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
}

.commerce-shell .commerce-suite-field {
  gap: 8px;
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea {
  height: 36px;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  color: #222839;
  background: #fff;
  font-size: 14px;
  font-weight: 560;
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select {
  padding: 0 14px;
}

.commerce-shell .commerce-suite-field input::placeholder,
.commerce-shell .commerce-copy-field textarea::placeholder {
  color: #9aa2b2;
}

.commerce-shell .commerce-output-choice {
  grid-template-columns: 1.06fr 1.06fr 1.06fr 1.52fr;
  gap: 8px;
}

.commerce-shell .commerce-output-option {
  min-height: 56px;
  padding: 0 8px;
  border-color: #e3e7ef;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}

.commerce-shell .commerce-output-option strong {
  color: #1e2536;
  font-size: 14px;
  font-weight: 800;
}

.commerce-shell .commerce-output-option span {
  display: none;
}

.commerce-shell .commerce-output-option + .commerce-output-option:not(.is-suite)::before {
  position: absolute;
  left: -5px;
  top: 13px;
  width: 1px;
  height: 30px;
  background: #e8ebf2;
  content: "";
}

.commerce-shell .commerce-output-option.active:not(.is-suite) {
  border-color: #e3e7ef;
  background: #fff;
  box-shadow: none;
}

.commerce-shell .commerce-output-option.is-suite {
  overflow: visible;
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #6d48f4 0%, #a237ee 48%, #ed1295 100%);
  box-shadow: 0 9px 20px rgba(150, 55, 226, 0.24);
}

.commerce-shell .commerce-output-option.is-suite strong,
.commerce-shell .commerce-output-option.is-suite span {
  color: #fff;
}

.commerce-shell .commerce-output-option.is-suite span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 520;
}

.commerce-shell .commerce-output-option.is-suite small {
  position: absolute;
  top: -10px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  color: #d56b00;
  background: #ffe58c;
  font-size: 10px;
  font-weight: 900;
}

.commerce-shell .commerce-module-summary {
  justify-content: flex-start;
  margin: 10px 0 8px;
  color: #283044;
  font-size: 14px;
  font-weight: 560;
}

.commerce-shell .commerce-module-summary strong {
  color: #5f6574;
  font-size: 13px;
  font-weight: 520;
}

.commerce-shell .commerce-module-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.commerce-shell .commerce-module-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 35px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  color: #4b5263;
  background: #fff;
  font-size: 13px;
  font-weight: 620;
  white-space: nowrap;
  cursor: pointer;
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: #e2d9ff;
  color: #5b34e8;
  background: #f6f2ff;
}

.commerce-shell .commerce-module-buttons b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #fff;
  background: #6d48f4;
  font-size: 10px;
  line-height: 1;
}

.commerce-shell .commerce-module-buttons button:not(.active) b {
  display: none;
}

.commerce-shell .commerce-region-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 255px;
  height: 33px;
  margin: 0 0 13px;
  overflow: hidden;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  background: #fff;
}

.commerce-shell .commerce-region-tabs button {
  color: #4f5668;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.commerce-shell .commerce-region-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #6d4df4, #7b32ee);
}

.commerce-shell .commerce-platform-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.commerce-shell .commerce-platform-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  color: #2f3648;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.commerce-shell .commerce-platform-buttons button.active {
  border-color: #7042ff;
  color: #222839;
  box-shadow: inset 0 0 0 1px rgba(112, 66, 255, 0.12);
}

.commerce-shell .commerce-platform-buttons b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: #fff;
  background: #ff6a00;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.commerce-shell .commerce-platform-buttons button:nth-child(2) b {
  background: #df2331;
}

.commerce-shell .commerce-platform-buttons button:nth-child(3) b {
  background: #f0445a;
}

.commerce-shell .commerce-platform-buttons button:nth-child(4) b,
.commerce-shell .commerce-platform-buttons button:nth-child(8) b {
  background: #050505;
}

.commerce-shell .commerce-platform-buttons button:nth-child(5) b {
  background: #ef243d;
}

.commerce-shell .commerce-platform-buttons button:nth-child(6) b {
  color: #111827;
  background: #fff;
  box-shadow: inset 0 -3px #ff9900;
}

.commerce-shell .commerce-platform-buttons button:nth-child(7) b {
  background: #ff6409;
}

.commerce-shell .commerce-platform-buttons button:nth-child(9) b {
  background: linear-gradient(135deg, #ff3d8f, #ff8d00);
}

.commerce-shell .commerce-language-category-row {
  display: grid;
  grid-template-columns: 136px 136px minmax(0, 1fr);
  gap: 19px;
  align-items: end;
}

.commerce-shell .commerce-language-category-row .commerce-copy-field {
  position: relative;
}

.commerce-shell .commerce-copy-field textarea {
  display: block;
  height: 50px;
  min-height: 50px;
  padding: 10px 12px 19px;
  resize: none;
  line-height: 1.22;
}

.commerce-shell .commerce-copy-field > b {
  position: absolute;
  right: 10px;
  bottom: 7px;
  color: #9aa2b2;
  font-size: 12px;
  font-weight: 520;
}

.commerce-shell .commerce-copy-footer {
  display: none;
}

.commerce-shell .commerce-submit-bar {
  margin-top: 0;
}

.commerce-shell .commerce-form-card .commerce-suite-submit {
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 49%, var(--brand-2) 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 850;
  box-shadow: none;
}

.commerce-shell .commerce-preview-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.commerce-shell .commerce-preview-stage {
  display: grid;
  gap: 16px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 23px 20px 18px;
}

.commerce-shell .commerce-stage-head,
.commerce-shell .commerce-visual-preview,
.commerce-shell .commerce-record-strip {
  width: 100%;
  margin: 0;
}

.commerce-shell .commerce-stage-head h2,
.commerce-shell .commerce-record-head strong {
  margin: 0;
  color: #151b2b;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 850;
}

.commerce-shell .commerce-visual-preview {
  display: block;
}

.commerce-shell .commerce-artboard {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.commerce-shell .commerce-artboard-surface {
  display: block;
}

.commerce-shell .commerce-main-art {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 852 / 600;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f8;
}

.commerce-shell .commerce-main-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commerce-shell .commerce-main-art > span {
  display: grid;
  place-items: center;
  height: 100%;
  color: #8c94a3;
}

.commerce-shell .commerce-artboard-actions {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
}

.commerce-shell .commerce-result-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 103px;
  padding: 0 13px;
  border-radius: 8px;
  color: #333b4d;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: none;
  font-size: 13px;
  font-weight: 720;
}

.commerce-shell .commerce-result-download:disabled {
  opacity: 1;
}

.commerce-shell .commerce-preview-browser {
  position: absolute;
  left: 36.8%;
  right: 10px;
  bottom: 11px;
  z-index: 2;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  max-width: none;
  min-height: 132px;
  margin: 0;
  padding: 16px 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 6px 22px rgba(47, 56, 82, 0.14);
  backdrop-filter: blur(12px);
}

.commerce-shell .commerce-browser-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.commerce-shell .commerce-browser-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 60px;
  color: #111827;
  background: transparent;
  font-size: 38px;
  font-weight: 300;
  cursor: pointer;
}

.commerce-shell .commerce-browser-item {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #232a3a;
  cursor: pointer;
}

.commerce-shell .commerce-browser-item span {
  display: block;
  width: 82px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 9px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 20px rgba(64, 72, 101, 0.08);
}

.commerce-shell .commerce-browser-item.active span {
  border-color: #6a3cff;
  box-shadow:
    0 0 0 2px rgba(106, 60, 255, 0.13),
    0 8px 20px rgba(64, 72, 101, 0.08);
}

.commerce-shell .commerce-browser-item strong {
  color: #222839;
  font-size: 13px;
  line-height: 1;
  font-weight: 720;
}

.commerce-shell .commerce-output-tray {
  display: none;
}

.commerce-shell .commerce-record-strip {
  padding: 18px 20px 21px;
}

.commerce-shell .commerce-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 19px;
}

.commerce-shell .commerce-record-head span {
  color: #4d5567;
  font-size: 14px;
  font-weight: 520;
}

.commerce-shell .commerce-record-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

.commerce-shell .commerce-record-item {
  display: block;
  height: 105px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.commerce-shell .commerce-record-item.active {
  border-color: #6a3cff;
  box-shadow: 0 0 0 2px rgba(106, 60, 255, 0.18);
}

.commerce-shell .commerce-record-item span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
}

@media (max-width: 1200px) {
  .commerce-shell .topbar-inner,
  .commerce-shell .commerce-workbench {
    width: min(100% - 32px, 1120px);
  }

  .commerce-shell .commerce-workbench {
    grid-template-columns: 1fr;
  }

  .commerce-shell .commerce-preview-browser {
    left: 28%;
  }
}

@media (max-width: 760px) {
  .commerce-shell .topbar {
    height: auto;
  }

  .commerce-shell .topbar-inner {
    width: calc(100% - 24px);
    min-height: 62px;
  }

  .commerce-shell .brand {
    min-width: 0;
  }

  .commerce-shell .brand-name {
    font-size: 22px;
  }

  .commerce-shell .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 62px;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    padding: 0 12px;
    border-top: 1px solid #edf0f6;
    background: #fff;
  }

  .commerce-shell .nav-link {
    height: 44px;
    font-size: 14px;
  }

  .commerce-shell .actions {
    min-width: 76px;
  }

  .commerce-shell .commerce-workbench {
    width: calc(100% - 24px);
    padding-top: 58px;
  }

  .commerce-shell .commerce-output-choice,
  .commerce-shell .commerce-platform-buttons,
  .commerce-shell .commerce-module-buttons,
  .commerce-shell .commerce-language-category-row,
  .commerce-shell .commerce-record-list {
    grid-template-columns: 1fr 1fr;
  }

  .commerce-shell .commerce-region-tabs {
    width: 100%;
  }

  .commerce-shell .commerce-preview-browser {
    position: static;
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 10px;
  }

  .commerce-shell .commerce-browser-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-shell .commerce-browser-arrow {
    display: none;
  }
}

/* Commerce product effect-one final lock, 2026-06-13 */
.commerce-workbench {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  width: 100%;
  min-height: calc(100vh - 68px);
  overflow-x: hidden;
  padding: 0 18px 38px;
  background: #fff;
}

.commerce-form-card.commerce-control-panel {
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.commerce-panel-head {
  display: block;
  min-height: 0;
  margin: 0 0 14px;
}

.commerce-panel-head p {
  display: none;
}

.commerce-form-card .panel-title {
  margin: 0;
  color: #202336;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 950;
}

.commerce-form-card .point-strip {
  min-height: 39px;
  margin: 0 0 19px;
  padding: 0 12px;
  align-items: center;
  border-color: #edf0f6;
  color: #515a6d;
  background: #fff;
  box-shadow: none;
}

.commerce-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 10px;
}

.commerce-form-spacer {
  min-height: 151px;
}

.commerce-upload-section,
.commerce-panel-section,
.commerce-form-section,
.commerce-suite-field {
  min-width: 0;
}

.commerce-panel-section,
.commerce-form-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.commerce-field-head,
.commerce-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.commerce-field-head strong,
.commerce-section-title span,
.commerce-suite-field > span {
  color: #242a3b;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
}

.commerce-section-title strong {
  min-width: 0;
  overflow: hidden;
  color: #737b8d;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-field-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid #dedcf5;
  border-radius: 8px;
  color: #6d5cf0;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.commerce-suite-upload {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  width: 214px;
  height: 124px;
  min-height: 124px;
  padding: 16px 18px;
  border: 1px dashed #d7dce8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.commerce-suite-upload.has-upload {
  border-style: solid;
  border-color: #d7d1ff;
  background: #fbfaff;
}

.commerce-upload-icon {
  display: block;
  width: 39px;
  height: 29px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 33% 36%, #ffffff 0 2px, transparent 3px),
    linear-gradient(135deg, #7a6cff, #e75fb8);
  box-shadow: 0 8px 18px rgba(108, 92, 240, 0.2);
}

.commerce-upload-actions {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  opacity: 0;
  pointer-events: none;
}

.commerce-suite-upload:hover .commerce-upload-actions,
.commerce-suite-upload:focus-within .commerce-upload-actions {
  opacity: 1;
  pointer-events: auto;
}

.commerce-upload-actions button {
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.commerce-upload-copy {
  display: grid;
  gap: 4px;
  color: #30374a;
  text-align: center;
}

.commerce-upload-copy strong {
  color: #6b7280;
  font-size: 14px;
  font-weight: 850;
}

.commerce-upload-copy span {
  color: #8b8f9d;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.commerce-upload-thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.commerce-upload-thumbs span {
  width: 38px;
  height: 38px;
  border: 1px solid #e3e0ef;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.commerce-suite-field {
  display: grid;
  gap: 10px;
}

.commerce-suite-field input,
.commerce-suite-field select,
.commerce-copy-field textarea {
  width: 100%;
  border: 1px solid #e5e7ef;
  border-radius: 10px;
  color: #252b3b;
  background: #fff;
  font-size: 15px;
  font-weight: 760;
  outline: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.commerce-suite-field input:focus,
.commerce-suite-field select:focus,
.commerce-copy-field textarea:focus {
  border-color: #b8aff8;
  box-shadow: 0 0 0 3px rgba(109, 92, 240, 0.1);
}

.commerce-suite-field input,
.commerce-suite-field select {
  height: 43px;
  padding: 0 15px;
}

.commerce-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commerce-platform-site-row,
.commerce-language-category-row,
.commerce-style-product-row,
.commerce-output-section,
.commerce-copy-field,
.commerce-submit-bar,
.commerce-preview-stage {
  grid-column: 1 / -1;
}

.commerce-output-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.commerce-output-option {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 41px;
  padding: 0 12px;
  border: 1px solid #e8e8ef;
  border-radius: 9px;
  color: #282d3c;
  background: #fff;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 14px rgba(28, 34, 52, 0.025);
}

.commerce-output-option strong,
.commerce-output-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-output-option strong {
  font-size: 14px;
  font-weight: 850;
}

.commerce-output-option span,
.commerce-output-option small {
  display: none;
}

.commerce-output-option.active {
  border-color: #7d6af2;
  color: #1f2433;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(125, 106, 242, 0.35);
}

.commerce-output-option.is-suite {
  border-color: #7d6af2;
}

.commerce-detail-module-section {
  margin-top: 10px;
  padding: 11px 12px 12px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fbfcff;
}

.commerce-module-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #343b4f;
  font-size: 13px;
  font-weight: 850;
}

.commerce-module-summary strong {
  color: #737b8d;
  font-size: 12px;
  font-weight: 850;
}

.commerce-module-chips {
  gap: 6px;
}

.commerce-module-chip {
  min-height: 28px;
  padding: 4px 8px 4px 5px;
  border-radius: 8px;
}

.commerce-module-chip b {
  min-width: 18px;
  height: 18px;
  font-size: 9px;
}

.commerce-copy-field textarea {
  display: block;
  min-height: 92px;
  padding: 12px 13px 34px;
  resize: none;
  line-height: 1.5;
}

.commerce-copy-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: -31px;
  padding: 0 12px 9px;
  color: #737b8d;
  font-size: 12px;
  font-weight: 800;
}

.commerce-copy-footer button {
  color: #737b8d;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.commerce-submit-bar {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  margin: 0;
}

.commerce-form-card .commerce-suite-submit {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7666ed, #d84fb8);
  box-shadow: 0 12px 26px rgba(118, 102, 237, 0.24);
}

.commerce-preview-stage {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  align-content: start;
  gap: 14px;
  width: calc(100% + 36px);
  min-width: 0;
  min-height: 620px;
  margin: 32px -18px 0;
  padding: 26px 18px 34px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(249, 251, 254, 0.96), rgba(241, 246, 251, 0.96)),
    #f5f8fb;
}

.commerce-stage-head,
.commerce-visual-preview,
.commerce-record-strip {
  width: min(1080px, 100%);
  max-width: none;
  margin: 0 auto;
}

.commerce-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.commerce-stage-head h2 {
  margin: 4px 0 0;
  color: #172033;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: 0;
}

.commerce-stage-head span {
  color: #7b8495;
  font-size: 12px;
  font-weight: 850;
}

.commerce-stage-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 360px;
}

.commerce-stage-pills span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(112, 104, 216, 0.14);
  border-radius: 8px;
  color: #485468;
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 880;
  box-shadow: 0 6px 16px rgba(57, 66, 105, 0.04);
}

.commerce-visual-preview {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 0;
}

.commerce-artboard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: min(620px, calc(100vh - 168px));
  padding: 16px;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(36, 48, 76, 0.075);
}

.commerce-main-art {
  width: min(520px, 100%, calc(100vh - 260px));
  min-width: 300px;
}

.commerce-record-strip {
  padding: 12px;
  border-radius: 8px;
}

.commerce-output-tray {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.commerce-output-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #20283a;
  font-size: 13px;
  font-weight: 900;
}

.commerce-output-tray-head span {
  color: #7a8497;
  font-size: 12px;
  font-weight: 850;
}

.commerce-output-tray-head button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  color: #3a4255;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.commerce-output-tray-head button:hover {
  border-color: #8879f3;
  color: #6154d9;
  background: #f8f6ff;
}

.commerce-output-tray-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.commerce-output-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: repeat(2, max-content);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 76px;
  padding: 8px;
  border: 1px solid #e4e9f2;
  border-radius: 8px;
  color: #252d40;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.commerce-output-card span {
  grid-row: 1 / 3;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 7px;
  background-position: center;
  background-size: cover;
}

.commerce-output-card strong,
.commerce-output-card small {
  grid-column: 2;
  align-self: end;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-output-card strong {
  font-size: 13px;
  font-weight: 920;
}

.commerce-output-card small {
  align-self: start;
  color: #7a8496;
  font-size: 11px;
  font-weight: 760;
}

.commerce-output-card.active {
  border-color: #8879f3;
  background: #f8f6ff;
  box-shadow: inset 0 0 0 1px rgba(122, 109, 242, 0.18);
}

@media (max-width: 1050px) {
  .commerce-form-grid {
    grid-template-columns: 1fr;
  }

  .commerce-form-spacer {
    display: none;
  }
}

@media (max-width: 760px) {
  .commerce-workbench {
    padding: 0 12px 28px;
  }

  .commerce-form-row,
  .commerce-output-choice,
  .commerce-output-tray-list,
  .commerce-submit-bar {
    grid-template-columns: 1fr;
  }

  .commerce-suite-upload {
    width: 100%;
    min-height: 124px;
    padding: 18px;
  }

  .commerce-preview-stage {
    width: calc(100% + 24px);
    min-height: 0;
    margin: 22px -12px 0;
    padding: 16px;
  }

  .commerce-stage-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .commerce-artboard {
    min-height: 420px;
  }

  .commerce-preview-browser {
    grid-template-columns: 1fr;
    position: static;
    max-width: none;
    margin-top: 10px;
  }

  .commerce-browser-arrow {
    display: none;
  }
}

/* Commerce product strict reference tail lock, 2026-06-14 */
.commerce-shell .topbar-inner {
  justify-content: flex-start;
  width: min(1526px, calc(100% - 62px));
}

.commerce-shell .brand,
.commerce-shell .actions {
  flex: 0 0 170px;
}

.commerce-shell .nav {
  flex: 0 0 auto;
  margin-left: 22px;
}

.commerce-shell .actions {
  margin-left: auto;
}

.commerce-shell .commerce-workbench {
  display: grid;
  grid-template-columns: 606px minmax(0, 1fr);
  gap: 24px;
  width: min(1526px, calc(100% - 62px));
  min-height: calc(100vh - 66px);
  margin: 0 auto;
  padding: 26px 0 22px;
  overflow: visible;
  background: #f6f8fc;
}

.commerce-shell .commerce-form-card.commerce-control-panel {
  width: 100%;
  padding: 18px 19px 20px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.035);
}

.commerce-shell .commerce-form-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.commerce-shell .commerce-suite-upload {
  width: 100%;
  height: 174px;
  min-height: 174px;
  padding: 26px 18px 14px;
}

.commerce-shell .commerce-output-choice {
  grid-template-columns: 1.06fr 1.06fr 1.06fr 1.52fr;
}

.commerce-shell .commerce-module-buttons {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.commerce-shell .commerce-language-category-row {
  grid-template-columns: 136px 136px minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
}

.commerce-shell .commerce-language-category-row .commerce-copy-field {
  grid-column: 3;
  grid-row: 1;
}

.commerce-shell .commerce-copy-field textarea {
  height: 50px;
  min-height: 50px;
  padding: 10px 12px 19px;
}

.commerce-shell .commerce-form-card .commerce-suite-submit {
  height: 48px;
}

.commerce-shell .commerce-preview-stage {
  display: grid;
  gap: 16px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 23px 20px 18px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.035);
}

.commerce-shell .commerce-artboard,
.commerce-shell .commerce-artboard-surface {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.commerce-shell .commerce-main-art {
  width: 100%;
  min-width: 0;
  aspect-ratio: 852 / 600;
  border-radius: 8px;
}

.commerce-shell .commerce-main-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commerce-shell .commerce-artboard-actions,
.commerce-shell .commerce-preview-browser {
  display: none;
}

.commerce-shell .commerce-record-strip {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 20px 21px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.035);
}

.commerce-shell .commerce-record-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

.commerce-shell .commerce-record-item {
  height: 105px;
}

@media (max-width: 1200px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 1120px);
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-workbench {
    width: calc(100% - 24px);
  }

  .commerce-shell .commerce-output-choice,
  .commerce-shell .commerce-platform-buttons,
  .commerce-shell .commerce-module-buttons,
  .commerce-shell .commerce-record-list {
    grid-template-columns: 1fr 1fr;
  }

  .commerce-shell .commerce-language-category-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }

  .commerce-shell .commerce-language-category-row .commerce-copy-field {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Commerce product mobile overflow clamp, 2026-06-14 */
@media (max-width: 760px) {
  html,
  body,
  .commerce-shell {
    overflow-x: hidden;
  }

  .commerce-shell .nav {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
  }

  .commerce-shell .commerce-workbench {
    width: calc(100% - 24px);
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  .commerce-shell .commerce-preview-stage {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 16px;
  }

  .commerce-shell .commerce-stage-head,
  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface,
  .commerce-shell .commerce-main-art {
    width: 100%;
    max-width: 100%;
  }

  .commerce-shell .dropdown {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
}

/* Commerce product visible-first lock, 2026-06-14 */
.commerce-shell .commerce-platform-buttons b.has-reference-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  box-shadow: none;
}

.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  color: transparent;
  background-color: transparent;
  box-shadow: none;
}

.commerce-shell .commerce-artboard-actions {
  display: block;
}

.commerce-shell .commerce-preview-browser {
  display: grid;
}

.commerce-shell .history-float,
.commerce-shell .ai-advice-btn {
  display: none;
}

.commerce-shell .commerce-form-card .commerce-suite-submit {
  border: 0;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 49%, var(--brand-2) 100%);
}

.commerce-shell .commerce-output-option.is-suite {
  border-color: #dfe5ee;
  color: #1f2738;
  background: #fff;
  box-shadow: none;
}

.commerce-shell .commerce-output-option.is-suite strong,
.commerce-shell .commerce-output-option.is-suite span {
  color: #1f2738;
}

.commerce-shell .commerce-output-option.active,
.commerce-shell .commerce-output-option.is-suite.active {
  border-color: #7042ff;
  background: #f7f3ff;
  box-shadow: inset 0 0 0 1px rgba(112, 66, 255, 0.1);
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: #ded5ff;
  color: #4f2fd6;
  background: #f7f3ff;
}

.commerce-shell .commerce-module-buttons b {
  color: #fff;
  background: #6d48f4;
}

.commerce-shell .commerce-region-tabs {
  display: none;
}

@media (max-height: 1100px) and (min-width: 1201px) {
  .commerce-shell .topbar {
    height: 60px;
  }

  .commerce-shell .topbar-inner {
    height: 60px;
  }

  .commerce-shell .nav-link {
    height: 60px;
  }

  .commerce-shell .commerce-workbench {
    min-height: calc(100vh - 60px);
    padding: 14px 0 12px;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 14px 17px 14px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 10px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px;
    font-size: 14px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 8px;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 6px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 14px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 136px;
    min-height: 136px;
    gap: 5px;
    padding: 17px 18px 12px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 38px;
    height: 36px;
    background-size: 38px 35px;
  }

  .commerce-shell .commerce-upload-copy {
    gap: 2px;
    transform: translateY(-2px);
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 30px;
  }

  .commerce-shell .commerce-suite-field {
    gap: 5px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 32px;
  }

  .commerce-shell .commerce-output-option {
    min-height: 48px;
  }

  .commerce-shell .commerce-output-option.active,
  .commerce-shell .commerce-output-option.is-suite.active {
    border-color: #6f3ff2;
    color: #2c2455;
    background: #faf8ff;
    box-shadow: inset 0 0 0 1px rgba(111, 63, 242, 0.12);
  }

  .commerce-shell .commerce-output-option.active strong,
  .commerce-shell .commerce-output-option.is-suite.active strong {
    color: #2c2455;
  }

  .commerce-shell .commerce-module-summary {
    margin: 7px 0 6px;
    font-size: 13px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 7px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 31px;
    padding: 0 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons button.active {
    border-color: #ded5ff;
    color: #4f2fd6;
    background: #f7f3ff;
  }

  .commerce-shell .commerce-module-buttons b {
    background: #6f3ff2;
  }

  .commerce-shell .commerce-region-tabs {
    display: none;
  }

  .commerce-shell .commerce-platform-buttons {
    display: none;
  }

  .commerce-shell .commerce-platform-select-field {
    display: grid;
    width: 100%;
  }

  .commerce-shell .commerce-language-category-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: 7px 12px;
    align-items: end;
  }

  .commerce-shell .commerce-language-category-row .commerce-copy-field {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 42px;
    min-height: 42px;
    padding: 8px 11px 16px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit {
    height: 42px;
    font-size: 16px;
  }

  .commerce-shell .commerce-preview-column {
    gap: 12px;
  }

  .commerce-shell .commerce-preview-stage {
    gap: 12px;
    padding: 16px 20px 16px;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 18px;
  }

  .commerce-shell .commerce-main-art {
    aspect-ratio: 852 / 560;
  }

  .commerce-shell .commerce-preview-browser {
    left: auto;
    right: 22px;
    bottom: 17px;
    width: 470px;
    height: 106px;
    min-height: 106px;
    overflow: hidden;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 8px;
    padding: 10px 10px 8px;
    border-radius: 12px;
  }

  .commerce-shell .commerce-browser-list {
    align-items: start;
    overflow: visible;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .commerce-shell .commerce-browser-item {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-content: start;
    gap: 5px;
    height: 86px;
    overflow: visible;
  }

  .commerce-shell .commerce-browser-item span {
    width: 58px;
    height: 58px;
  }

  .commerce-shell .commerce-browser-item strong {
    display: block;
    width: 100%;
    text-align: center;
  }

  .commerce-shell .commerce-browser-arrow {
    width: 24px;
    height: 48px;
    font-size: 30px;
  }

  .commerce-shell .commerce-record-strip {
    padding: 14px 20px 16px;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 12px;
  }

  .commerce-shell .commerce-record-item {
    height: 86px;
  }
}

/* Commerce product reference-preferred correction lock, 2026-06-14 */
.commerce-shell .commerce-suite-field input:focus,
.commerce-shell .commerce-suite-field select:focus,
.commerce-shell .commerce-copy-field textarea:focus {
  border-color: color-mix(in srgb, var(--brand) 58%, #dfe3f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent);
}

.commerce-shell .commerce-output-option {
  border-color: #e3e7ef;
  color: #1e2536;
  background: #fff;
  box-shadow: none;
}

.commerce-shell .commerce-output-option strong {
  color: #1e2536;
}

.commerce-shell .commerce-output-option.active:not(.is-suite),
.commerce-shell .commerce-output-card.active {
  border-color: color-mix(in srgb, var(--brand) 72%, #ffffff);
  color: #30256b;
  background: color-mix(in srgb, var(--brand) 8%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}

.commerce-shell .commerce-output-option.active:not(.is-suite) strong {
  color: #30256b;
}

.commerce-shell .commerce-output-option.is-suite,
.commerce-shell .commerce-output-option.is-suite.active {
  overflow: visible;
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 50%, var(--brand-2) 100%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 22%, transparent);
}

.commerce-shell .commerce-output-option.is-suite strong,
.commerce-shell .commerce-output-option.is-suite span,
.commerce-shell .commerce-output-option.is-suite.active strong,
.commerce-shell .commerce-output-option.is-suite.active span {
  color: #fff;
}

.commerce-shell .commerce-output-option.is-suite span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 620;
}

.commerce-shell .commerce-output-option.is-suite::after {
  position: absolute;
  top: -10px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  color: #b35400;
  background: #ffe08a;
  content: "推荐";
  font-size: 10px;
  font-weight: 900;
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 26%, #e7eaf3);
  color: #4f2fd6;
  background: color-mix(in srgb, var(--brand) 8%, #ffffff);
}

.commerce-shell .commerce-module-buttons b {
  color: #fff;
  background: var(--brand);
}

.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-3));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 22%, transparent);
}

.commerce-shell .commerce-form-card .commerce-suite-submit::before {
  content: none;
}

.commerce-shell .commerce-region-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(340px, 58%);
  height: 33px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  background: #fff;
}

.commerce-shell .commerce-region-tabs button {
  color: #4f5668;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 760;
}

.commerce-shell .commerce-region-tabs button.active {
  color: #fff;
  background: linear-gradient(90deg, var(--brand), #7037ef);
}

.commerce-shell .commerce-platform-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.commerce-shell .commerce-platform-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  min-width: 0;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  color: #2f3648;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.commerce-shell .commerce-platform-buttons button.active {
  border-color: var(--brand);
  color: #222839;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  box-shadow: none;
  color: transparent;
}

.commerce-shell .commerce-platform-buttons span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commerce-shell .commerce-language-category-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  grid-auto-flow: column;
  gap: 19px;
  align-items: end;
}

.commerce-shell .commerce-language-category-row .commerce-copy-field {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

.commerce-shell .commerce-copy-field textarea {
  width: 100%;
}

.commerce-shell .commerce-main-art {
  position: relative;
  overflow: hidden;
}

.commerce-shell .commerce-preview-browser {
  left: auto;
  right: 22px;
  bottom: 17px;
  width: min(470px, calc(100% - 44px));
  height: 106px;
  min-height: 106px;
  overflow: hidden;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  gap: 8px;
  padding: 10px 10px 8px;
  border-radius: 12px;
}

.commerce-shell .commerce-browser-list {
  min-width: 0;
  overflow: hidden;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.commerce-shell .commerce-browser-item {
  min-width: 0;
  height: 86px;
  overflow: hidden;
}

.commerce-shell .commerce-browser-item span {
  width: 58px;
  height: 58px;
}

.commerce-shell .commerce-browser-item strong {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-height: 1100px) and (min-width: 1201px) {
  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 50%, var(--brand-2));
  }

  .commerce-shell .commerce-output-option.active:not(.is-suite) {
    border-color: color-mix(in srgb, var(--brand) 72%, #ffffff);
    color: #30256b;
    background: color-mix(in srgb, var(--brand) 8%, #ffffff);
  }

  .commerce-shell .commerce-output-option.active:not(.is-suite) strong {
    color: #30256b;
  }

  .commerce-shell .commerce-module-buttons button.active {
    border-color: color-mix(in srgb, var(--brand) 26%, #e7eaf3);
    color: #4f2fd6;
    background: color-mix(in srgb, var(--brand) 8%, #ffffff);
  }

  .commerce-shell .commerce-module-buttons b {
    background: var(--brand);
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-language-category-row .commerce-copy-field {
    grid-column: 1 / -1;
  }

  .commerce-shell .commerce-region-tabs {
    width: 100%;
  }

  .commerce-shell .commerce-platform-buttons,
  .commerce-shell .commerce-language-category-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }

  .commerce-shell .commerce-preview-browser {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 10px;
  }
}

/* Commerce product viewport-fit correction lock, 2026-06-14 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    align-items: stretch;
    height: calc(100vh - 60px);
    min-height: 0;
    overflow: hidden;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .commerce-shell .commerce-form-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: clamp(9px, 1.2vh, 15px);
    min-height: 0;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: auto;
    padding-top: clamp(10px, 1.6vh, 22px);
  }

  .commerce-shell .commerce-preview-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
    height: 100%;
  }

  .commerce-shell .commerce-preview-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 11px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 16px 20px 14px;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 22px;
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface,
  .commerce-shell .commerce-main-art {
    min-height: 0;
    height: 100%;
  }

  .commerce-shell .commerce-main-art {
    aspect-ratio: auto;
  }

  .commerce-shell .commerce-record-strip {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: clamp(108px, 13.4vh, 130px);
    padding: 11px 16px 13px;
    overflow: hidden;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-record-item {
    height: 100%;
    min-height: 64px;
  }

  .commerce-shell .commerce-record-list {
    min-height: 0;
    height: 100%;
    gap: 14px;
  }
}

/* Commerce product polish pass, 2026-06-14 */
.commerce-shell .commerce-panel-head {
  margin-bottom: 12px;
}

.commerce-shell .commerce-panel-head p {
  color: #697386;
  font-size: 14px;
  font-weight: 600;
}

.commerce-shell .commerce-section-title span,
.commerce-shell .commerce-suite-field > span {
  color: #202739;
  font-weight: 820;
}

.commerce-shell .commerce-suite-upload {
  border-color: #dfe5ef;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.98)),
    #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.commerce-shell .commerce-suite-upload:hover,
.commerce-shell .commerce-suite-upload:focus-within {
  border-color: color-mix(in srgb, var(--brand) 34%, #dfe5ef);
  background: #fff;
}

.commerce-shell .commerce-upload-actions button:last-child {
  border-color: #e3e8f2;
  color: #384154;
  box-shadow: 0 5px 14px rgba(34, 45, 74, 0.04);
}

.commerce-shell .commerce-output-choice {
  align-items: stretch;
}

.commerce-shell .commerce-output-option {
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.commerce-shell .commerce-output-option:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, #dfe5ef);
  background: #fbfaff;
}

.commerce-shell .commerce-output-option.is-suite,
.commerce-shell .commerce-output-option.is-suite.active {
  min-height: 56px;
}

.commerce-shell .commerce-output-option.is-suite::after {
  top: -9px;
  right: -5px;
  box-shadow: 0 4px 10px rgba(210, 126, 16, 0.12);
}

.commerce-shell .commerce-module-summary {
  align-items: center;
}

.commerce-shell .commerce-module-buttons button {
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.commerce-shell .commerce-module-buttons button:hover,
.commerce-shell .commerce-platform-buttons button:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, #dfe5ef);
  background: #fbfaff;
}

.commerce-shell .commerce-region-tabs {
  box-shadow: 0 4px 12px rgba(38, 48, 78, 0.025);
}

.commerce-shell .commerce-region-tabs button {
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.commerce-shell .commerce-platform-buttons button {
  box-shadow: 0 5px 14px rgba(38, 48, 78, 0.025);
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.commerce-shell .commerce-platform-buttons button.active {
  background: #fff;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent),
    0 8px 18px rgba(95, 77, 226, 0.08);
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea {
  box-shadow: inset 0 1px 0 rgba(17, 24, 39, 0.015);
}

.commerce-shell .commerce-copy-field > b {
  right: 12px;
  bottom: 8px;
}

.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  letter-spacing: 0;
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--brand) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition:
    filter 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.commerce-shell .commerce-form-card .commerce-suite-submit:hover {
  filter: saturate(1.04) brightness(1.02);
  transform: translateY(-1px);
}

.commerce-shell .commerce-result-download {
  border: 1px solid rgba(226, 232, 240, 0.86);
  color: #2d3548;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.commerce-shell .commerce-preview-browser {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 12px 28px rgba(32, 40, 66, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.commerce-shell .commerce-browser-arrow {
  color: #293144;
  border-radius: 8px;
}

.commerce-shell .commerce-browser-arrow:hover {
  background: rgba(122, 106, 248, 0.08);
}

.commerce-shell .commerce-browser-item span {
  border: 1px solid rgba(226, 232, 240, 0.88);
}

.commerce-shell .commerce-browser-item.active span {
  border-color: var(--brand);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent),
    0 8px 18px rgba(64, 72, 101, 0.08);
}

.commerce-shell .commerce-record-strip {
  box-shadow: 0 7px 24px rgba(38, 48, 78, 0.04);
}

.commerce-shell .commerce-record-head span {
  color: #4f39d7;
  cursor: pointer;
  font-weight: 720;
}

.commerce-shell .commerce-record-list {
  align-items: stretch;
}

.commerce-shell .commerce-record-item {
  background: #f8fafc;
  box-shadow: 0 6px 14px rgba(31, 41, 61, 0.035);
}

.commerce-shell .commerce-record-item span {
  background-position: center;
  background-size: cover;
}

.commerce-shell .commerce-record-item.active {
  border-color: var(--brand);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent),
    0 7px 18px rgba(95, 77, 226, 0.09);
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-suite-upload {
    height: 124px;
    min-height: 124px;
  }

  .commerce-shell .commerce-output-option {
    min-height: 44px;
  }

  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 50px;
  }

  .commerce-shell .commerce-platform-buttons button {
    height: 34px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 42px;
    min-height: 42px;
  }
}

/* Commerce product reference-size lock, 2026-06-14 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    height: auto;
    min-height: calc(100vh - 60px);
    overflow: visible;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel,
  .commerce-shell .commerce-preview-column {
    height: auto;
  }

  .commerce-shell .commerce-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(9px, 1vh, 12px);
  }

  .commerce-shell .commerce-suite-upload {
    height: clamp(128px, 15.6vh, 174px);
    min-height: clamp(128px, 15.6vh, 174px);
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: clamp(8px, 1.2vh, 14px);
    padding-top: 0;
  }

  .commerce-shell .commerce-preview-column {
    display: grid;
    grid-template-rows: auto auto;
    gap: clamp(10px, 1.2vh, 14px);
    min-height: 0;
  }

  .commerce-shell .commerce-preview-stage {
    display: grid;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: clamp(16px, 1.8vh, 23px) 20px clamp(14px, 1.8vh, 18px);
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface {
    height: auto;
    min-height: 0;
  }

  .commerce-shell .commerce-main-art {
    height: auto;
    aspect-ratio: 852 / 600;
  }

  .commerce-shell .commerce-main-art img {
    object-fit: cover;
  }

  .commerce-shell .commerce-preview-browser {
    right: 22px;
    bottom: 17px;
    width: min(470px, calc(100% - 44px));
    height: 106px;
    min-height: 106px;
  }

  .commerce-shell .commerce-record-strip {
    height: clamp(118px, 14.2vh, 152px);
    min-height: 0;
    padding: clamp(12px, 1.4vh, 18px) 20px clamp(13px, 1.6vh, 21px);
  }

  .commerce-shell .commerce-record-list {
    gap: clamp(14px, 1.4vw, 22px);
  }

  .commerce-shell .commerce-record-item {
    min-height: 0;
  }
}

@media (min-width: 1201px) and (max-height: 940px) {
  .commerce-shell .commerce-main-art {
    aspect-ratio: 852 / 560;
  }

  .commerce-shell .commerce-record-strip {
    height: clamp(108px, 13.2vh, 132px);
    padding-top: 11px;
    padding-bottom: 13px;
  }
}

@media (min-width: 1201px) and (min-height: 1040px) {
  .commerce-shell .commerce-main-art {
    aspect-ratio: 852 / 600;
  }

  .commerce-shell .commerce-record-strip {
    height: 152px;
  }
}

/* Commerce product supplied-reference size lock, 2026-06-14 */
@media (min-width: 1201px) {
  .commerce-shell .topbar,
  .commerce-shell .topbar-inner,
  .commerce-shell .nav-link {
    height: 66px;
  }

  .commerce-shell .commerce-workbench {
    display: grid;
    grid-template-columns: 606px minmax(0, 1fr);
    gap: 24px;
    width: min(1526px, calc(100% - 62px));
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 26px 0 22px;
    overflow: visible;
    align-items: start;
    background: #f6f8fc;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 18px 19px 20px;
  }

  .commerce-shell .commerce-panel-head {
    margin: 0 0 16px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 26px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 520;
  }

  .commerce-shell .commerce-form-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 15px;
  }

  .commerce-shell .commerce-suite-upload {
    position: relative;
    align-content: center;
    justify-items: center;
    height: 174px;
    min-height: 174px;
    gap: 9px;
    padding: 22px 18px 14px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 46px;
    height: 43px;
    background-size: 46px 42px;
  }

  .commerce-shell .commerce-upload-copy {
    gap: 5px;
  }

  .commerce-shell .commerce-upload-copy strong {
    font-size: 14px;
    line-height: 1.2;
  }

  .commerce-shell .commerce-upload-copy span {
    font-size: 12px;
    line-height: 1.2;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 36px;
  }

  .commerce-shell .commerce-upload-actions {
    position: absolute;
    inset: auto auto 14px 14px;
    z-index: 2;
    display: flex;
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .commerce-shell .commerce-upload-actions button:first-child {
    display: none;
  }

  .commerce-shell .commerce-output-choice {
    grid-template-columns: 1.06fr 1.06fr 1.06fr 1.52fr;
  }

  .commerce-shell .commerce-module-buttons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .commerce-shell .commerce-platform-buttons button {
    height: 38px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 50px;
    min-height: 50px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: auto;
    padding-top: 14px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px;
  }

  .commerce-shell .commerce-preview-column {
    display: grid;
    grid-template-rows: 682px 174px;
    gap: 20px;
    height: auto;
    min-height: 0;
    align-content: start;
  }

  .commerce-shell .commerce-preview-stage {
    display: grid;
    grid-template-rows: auto auto;
    gap: 14px;
    height: 682px;
    min-height: 0;
    padding: 25px 20px 20px;
    overflow: visible;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 22px;
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface {
    height: auto;
    min-height: 0;
  }

  .commerce-shell .commerce-main-art {
    height: auto;
    aspect-ratio: 852 / 600;
  }

  .commerce-shell .commerce-preview-browser {
    right: 13px;
    bottom: 10px;
    width: min(523px, calc(100% - 26px));
    height: 132px;
    min-height: 132px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 16px 9px 13px;
    overflow: hidden;
    border-radius: 14px;
  }

  .commerce-shell .commerce-browser-list {
    height: 103px;
    gap: 12px;
    align-items: start;
    overflow: hidden;
  }

  .commerce-shell .commerce-browser-arrow {
    width: 28px;
    height: 60px;
    font-size: 38px;
  }

  .commerce-shell .commerce-browser-item {
    height: 103px;
    gap: 7px;
    overflow: hidden;
  }

  .commerce-shell .commerce-browser-item span {
    width: 70px;
    height: 70px;
  }

  .commerce-shell .commerce-record-strip {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 174px;
    min-height: 174px;
    padding: 18px 20px 21px;
    overflow: hidden;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-record-list {
    height: 105px;
    min-height: 0;
    gap: 22px;
  }

  .commerce-shell .commerce-record-item {
    height: 105px;
    min-height: 105px;
  }
}

@media (min-width: 1201px) and (max-height: 940px) {
  .commerce-shell .commerce-workbench {
    height: auto;
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel,
  .commerce-shell .commerce-preview-column {
    height: auto;
  }

  .commerce-shell .commerce-suite-upload {
    height: 132px;
    min-height: 132px;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 132px;
    gap: 14px;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface,
  .commerce-shell .commerce-main-art {
    height: 100%;
    min-height: 0;
  }

  .commerce-shell .commerce-main-art {
    aspect-ratio: auto;
  }

  .commerce-shell .commerce-preview-browser {
    width: min(470px, calc(100% - 44px));
    height: 106px;
    min-height: 106px;
    right: 22px;
    bottom: 12px;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 8px;
    padding: 10px 10px 8px;
    border-radius: 12px;
  }

  .commerce-shell .commerce-browser-list {
    height: 86px;
    gap: 8px;
  }

  .commerce-shell .commerce-browser-arrow {
    width: 24px;
    height: 48px;
    font-size: 30px;
  }

  .commerce-shell .commerce-browser-item {
    height: 86px;
    gap: 5px;
  }

  .commerce-shell .commerce-browser-item span {
    width: 58px;
    height: 58px;
  }

  .commerce-shell .commerce-record-strip {
    height: 132px;
    min-height: 132px;
    padding: 11px 20px 13px;
  }

  .commerce-shell .commerce-record-list {
    height: 80px;
    gap: 14px;
  }

  .commerce-shell .commerce-record-item {
    height: 80px;
    min-height: 80px;
  }
}

/* Commerce product final visible reference override, 2026-06-14 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px minmax(0, 1fr);
    gap: 24px;
    width: min(1526px, calc(100% - 62px));
    height: auto;
    min-height: 0;
    padding: 26px 0 22px;
    overflow: visible;
    align-items: start;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto;
    min-height: 0;
  }

  .commerce-shell .commerce-preview-column {
    height: auto;
    align-content: start;
  }

  .commerce-shell .commerce-upload-actions {
    inset: auto auto 14px 14px;
    width: auto;
    height: auto;
  }

  .commerce-shell .commerce-upload-actions button:first-child {
    display: none;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .topbar,
  .commerce-shell .topbar-inner,
  .commerce-shell .nav-link {
    height: 66px;
  }

  .commerce-shell .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .commerce-shell .brand-name {
    font-size: 27px;
  }

  .commerce-shell .login-btn {
    width: 82px;
    height: 41px;
    border-radius: 10px;
  }

  .commerce-shell .commerce-workbench {
    padding-top: 26px;
    padding-bottom: 22px;
    overflow: visible;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 18px 19px 20px;
  }

  .commerce-shell .commerce-panel-head {
    margin: 0 0 16px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 26px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.35;
  }

  .commerce-shell .commerce-form-grid {
    gap: 12px;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 15px;
    line-height: 1.2;
  }

  .commerce-shell .commerce-suite-upload {
    height: 174px;
    min-height: 174px;
    gap: 9px;
    padding: 26px 18px 14px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 46px;
    height: 43px;
    background-size: 46px 42px;
  }

  .commerce-shell .commerce-upload-copy {
    gap: 5px;
  }

  .commerce-shell .commerce-upload-copy strong {
    font-size: 14px;
    line-height: 1.2;
  }

  .commerce-shell .commerce-upload-copy span {
    font-size: 13px;
    line-height: 1.2;
  }

  .commerce-shell .commerce-upload-actions {
    inset: auto auto 14px 14px;
    width: auto;
    height: auto;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 36px;
    padding: 0 13px;
    font-size: 12px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 40px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 14px;
  }

  .commerce-shell .commerce-output-choice {
    gap: 8px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 56px;
    border-radius: 8px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 15px;
  }

  .commerce-shell .commerce-output-option span,
  .commerce-shell .commerce-output-option.is-suite span {
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 8px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 35px;
    min-height: 35px;
    gap: 6px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-module-buttons b {
    width: 17px;
    height: 17px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 33px;
    margin-bottom: 12px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 8px;
  }

  .commerce-shell .commerce-platform-buttons button {
    height: 38px;
    gap: 8px;
    padding: 0 9px;
    font-size: 13px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    background-size: 22px 22px;
  }

  .commerce-shell .commerce-language-category-row {
    gap: 19px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 50px;
    min-height: 50px;
    padding: 10px 12px 19px;
    font-size: 13px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 12px;
    padding-top: 0;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px;
    font-size: 17px;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 682px 174px;
    gap: 20px;
  }

  .commerce-shell .commerce-preview-stage {
    height: 682px;
    overflow: visible;
    padding: 25px 20px 20px;
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface {
    height: auto;
  }

  .commerce-shell .commerce-main-art {
    height: auto;
    aspect-ratio: 852 / 600;
  }

  .commerce-shell .commerce-preview-browser {
    right: 13px;
    bottom: 10px;
    width: min(523px, calc(100% - 26px));
    height: 132px;
    min-height: 132px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 16px 9px 13px;
    border-radius: 14px;
  }

  .commerce-shell .commerce-browser-list {
    height: 103px;
    gap: 12px;
  }

  .commerce-shell .commerce-browser-arrow {
    width: 28px;
    height: 60px;
    font-size: 38px;
  }

  .commerce-shell .commerce-browser-item {
    height: 103px;
    gap: 7px;
  }

  .commerce-shell .commerce-browser-item span {
    width: 70px;
    height: 70px;
  }

  .commerce-shell .commerce-record-strip {
    height: 174px;
    min-height: 174px;
    padding: 18px 20px 21px;
  }

  .commerce-shell .commerce-record-list {
    height: 105px;
    gap: 22px;
  }

  .commerce-shell .commerce-record-item {
    height: 105px;
    min-height: 105px;
  }
}

/* Commerce product short-browser density lock, 2026-06-14 */
@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .topbar,
  .commerce-shell .topbar-inner,
  .commerce-shell .nav-link {
    height: 58px;
  }

  .commerce-shell .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .commerce-shell .brand-name {
    font-size: 24px;
  }

  .commerce-shell .login-btn {
    width: 76px;
    height: 36px;
    border-radius: 9px;
  }

  .commerce-shell .commerce-workbench {
    height: auto;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel,
  .commerce-shell .commerce-preview-column {
    height: auto;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 12px 17px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 22px;
    line-height: 1.08;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.25;
  }

  .commerce-shell .commerce-form-grid {
    height: 100%;
    justify-content: space-between;
    gap: 0;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 13px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-suite-upload {
    height: 88px;
    min-height: 88px;
    gap: 3px;
    padding: 8px 16px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 30px;
    height: 28px;
    background-size: 30px 27px;
  }

  .commerce-shell .commerce-upload-copy {
    gap: 2px;
  }

  .commerce-shell .commerce-upload-copy strong {
    font-size: 13px;
    line-height: 1.12;
  }

  .commerce-shell .commerce-upload-copy span {
    font-size: 12px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 27px;
    padding: 0 10px;
    font-size: 12px;
  }

  .commerce-shell .commerce-upload-actions {
    inset: auto auto 7px 10px;
  }

  .commerce-shell .commerce-suite-field {
    gap: 4px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 34px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 13px;
  }

  .commerce-shell .commerce-output-choice {
    gap: 8px;
  }

  .commerce-shell .commerce-output-option {
    min-height: 40px;
    padding: 0 8px;
    border-radius: 7px;
  }

  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 40px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 13px;
  }

  .commerce-shell .commerce-output-option span,
  .commerce-shell .commerce-output-option.is-suite span {
    margin-top: 2px;
    font-size: 11px;
  }

  .commerce-shell .commerce-output-option.is-suite::after {
    top: -8px;
    right: -5px;
    height: 17px;
    padding: 0 6px;
  }

  .commerce-shell .commerce-module-summary {
    min-height: 16px;
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 26px;
    min-height: 26px;
    gap: 4px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons b {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 28px;
    margin-bottom: 6px;
    border-radius: 7px;
  }

  .commerce-shell .commerce-region-tabs button {
    font-size: 13px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 6px;
  }

  .commerce-shell .commerce-platform-buttons button {
    height: 29px;
    gap: 5px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    background-size: 18px 18px;
  }

  .commerce-shell .commerce-language-category-row {
    gap: 10px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 38px;
    min-height: 38px;
    padding: 8px 10px 17px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-copy-field > b {
    right: 9px;
    bottom: 5px;
    font-size: 11px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 8px;
    padding-top: 0;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px;
    border-radius: 8px;
    font-size: 15px;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 118px;
    gap: 12px;
  }

  .commerce-shell .commerce-preview-stage {
    padding-top: 13px;
    padding-bottom: 12px;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 17px;
  }

  .commerce-shell .commerce-record-strip {
    height: 118px;
    min-height: 118px;
    padding: 10px 18px 11px;
  }

  .commerce-shell .commerce-record-list {
    height: 72px;
  }

  .commerce-shell .commerce-record-item {
    height: 72px;
    min-height: 72px;
  }
}

/* Commerce product Safari visible reference correction, 2026-06-14 */
@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .topbar,
  .commerce-shell .topbar-inner,
  .commerce-shell .nav-link {
    height: 60px;
  }

  .commerce-shell .brand-mark {
    width: 32px;
    height: 32px;
  }

  .commerce-shell .brand-name {
    font-size: 25px;
  }

  .commerce-shell .login-btn {
    width: 80px;
    height: 38px;
  }

  .commerce-shell .commerce-workbench {
    height: auto;
    width: min(1526px, calc(100% - 62px));
    padding-top: 14px;
    padding-bottom: 12px;
    overflow: visible;
    align-items: start;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto;
    padding: 14px 17px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 9px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px;
    line-height: 1.1;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.28;
  }

  .commerce-shell .commerce-form-grid {
    gap: 8px;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 6px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 14px;
    line-height: 1.18;
  }

  .commerce-shell .commerce-suite-upload {
    height: 132px;
    min-height: 132px;
    gap: 5px;
    padding: 17px 18px 12px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 38px;
    height: 36px;
    background-size: 38px 35px;
  }

  .commerce-shell .commerce-upload-copy {
    gap: 3px;
  }

  .commerce-shell .commerce-upload-copy strong {
    font-size: 14px;
    line-height: 1.18;
  }

  .commerce-shell .commerce-upload-copy span {
    font-size: 13px;
    line-height: 1.18;
  }

  .commerce-shell .commerce-upload-actions {
    inset: auto auto 12px 13px;
    width: auto;
    height: auto;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
  }

  .commerce-shell .commerce-output-choice {
    gap: 9px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 44px;
    border-radius: 8px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 14px;
  }

  .commerce-shell .commerce-output-option span,
  .commerce-shell .commerce-output-option.is-suite span {
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 7px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 30px;
    min-height: 30px;
    gap: 5px;
    padding: 0 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-module-buttons b {
    width: 16px;
    height: 16px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 31px;
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 7px;
  }

  .commerce-shell .commerce-platform-buttons button {
    height: 34px;
    gap: 7px;
    padding: 0 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    background-size: 20px 20px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 42px;
    min-height: 42px;
    padding: 9px 11px 18px;
    font-size: 13px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 9px;
    padding-top: 0;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 44px;
    font-size: 16px;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 132px;
    gap: 14px;
    height: auto;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto;
    overflow: hidden;
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .commerce-shell .commerce-record-strip {
    height: 132px;
    min-height: 132px;
    padding: 11px 20px 13px;
  }

  .commerce-shell .commerce-record-list {
    height: 80px;
    gap: 14px;
  }

  .commerce-shell .commerce-record-item {
    height: 80px;
    min-height: 80px;
  }
}

/* Commerce product final browser reference lock, 2026-06-14 */
@media (min-width: 1201px) {
  .commerce-shell .topbar,
  .commerce-shell .topbar-inner,
  .commerce-shell .nav-link {
    height: 66px;
  }

  .commerce-shell .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .commerce-shell .brand-name {
    font-size: 27px;
  }

  .commerce-shell .login-btn {
    width: 82px;
    height: 41px;
    border-radius: 10px;
  }

  .commerce-shell .commerce-workbench {
    display: grid;
    grid-template-columns: 606px minmax(0, 1fr);
    gap: 24px;
    width: min(1526px, calc(100% - 62px));
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 26px 0 22px;
    overflow: visible;
    align-items: start;
    background: #f6f8fc;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    display: flex;
    flex-direction: column;
    height: 878px;
    min-height: 0;
    padding: 18px 19px 20px;
  }

  .commerce-shell .commerce-panel-head {
    margin: 0 0 16px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 26px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.35;
  }

  .commerce-shell .commerce-form-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 15px;
    line-height: 1.2;
  }

  .commerce-shell .commerce-suite-upload {
    position: relative;
    display: block;
    height: 174px;
    min-height: 174px;
    gap: 9px;
    padding: 26px 18px 14px;
  }

  .commerce-shell .commerce-upload-icon {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 46px;
    height: 43px;
    background-size: 46px 42px;
    transform: translateX(-50%);
  }

  .commerce-shell .commerce-upload-copy {
    position: absolute;
    top: 63px;
    left: 50%;
    width: 260px;
    gap: 5px;
    transform: translateX(-50%);
  }

  .commerce-shell .commerce-upload-actions {
    position: absolute;
    inset: auto auto 22px 14px;
    z-index: 2;
    display: flex;
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .commerce-shell .commerce-upload-actions button:first-child {
    display: none;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 36px;
    padding: 0 13px;
    font-size: 12px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 40px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 14px;
  }

  .commerce-shell .commerce-output-choice {
    grid-template-columns: 1fr 1fr 1fr 1.84fr;
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 56px;
    border-radius: 0;
  }

  .commerce-shell .commerce-output-option:not(.is-suite) {
    border-color: #e2e7ef;
    background: #fff;
    box-shadow: none;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):first-child {
    border-radius: 8px 0 0 8px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(2),
  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    margin-left: -1px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    border-radius: 0 8px 8px 0;
  }

  .commerce-shell .commerce-output-option:not(.is-suite).active {
    border-color: #e2e7ef;
    color: #1e2536;
    background: #fff;
    box-shadow: none;
  }

  .commerce-shell .commerce-output-option:not(.is-suite) + .commerce-output-option:not(.is-suite)::before {
    position: absolute;
    left: 0;
    top: 13px;
    width: 1px;
    height: 30px;
    background: #e7ebf2;
    content: "";
  }

  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    margin-left: 8px;
    border-radius: 8px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 15px;
  }

  .commerce-shell .commerce-output-option span,
  .commerce-shell .commerce-output-option.is-suite span {
    font-size: 12px;
  }

  .commerce-shell .commerce-module-summary {
    min-height: 18px;
    margin: 10px 0 8px;
    font-size: 14px;
  }

  .commerce-shell .commerce-module-buttons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 35px;
    min-height: 35px;
    gap: 6px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-module-buttons b {
    width: 17px;
    height: 17px;
  }

  .commerce-shell .commerce-region-tabs {
    width: 250px;
    height: 33px;
    margin-bottom: 12px;
  }

  .commerce-shell .commerce-platform-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
  }

  .commerce-shell .commerce-platform-buttons button {
    flex: 0 0 100px;
    height: 38px;
    gap: 5px;
    min-width: 0;
    padding: 0 7px;
    font-size: 13px;
  }

  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8) {
    flex-basis: 128px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    background-size: 18px 18px;
  }

  .commerce-shell .commerce-language-category-row {
    display: grid;
    grid-template-columns: 136px 136px minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 19px;
    align-items: end;
  }

  .commerce-shell .commerce-language-category-row .commerce-copy-field {
    grid-column: 3;
    grid-row: 1;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 50px;
    min-height: 50px;
    padding: 10px 12px 19px;
    font-size: 13px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: auto;
    padding-top: 14px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 50%, var(--brand-2));
    font-size: 17px;
    letter-spacing: 0;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit::before {
    content: none;
  }

  .commerce-shell .commerce-preview-column {
    display: grid;
    grid-template-rows: 682px 174px;
    gap: 20px;
    height: auto;
    min-height: 0;
    align-content: start;
  }

  .commerce-shell .commerce-preview-stage {
    display: grid;
    grid-template-rows: auto auto;
    gap: 14px;
    height: 682px;
    min-height: 0;
    padding: 25px 20px 20px;
    overflow: visible;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 22px;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 19px;
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface {
    height: auto;
    min-height: 0;
  }

  .commerce-shell .commerce-main-art {
    height: auto;
    aspect-ratio: 852 / 600;
  }

  .commerce-shell .commerce-preview-browser {
    right: 13px;
    bottom: 10px;
    width: min(523px, calc(100% - 26px));
    height: 132px;
    min-height: 132px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 16px 9px 13px;
    overflow: hidden;
    border-radius: 14px;
  }

  .commerce-shell .commerce-browser-list {
    height: 103px;
    gap: 12px;
    align-items: start;
    overflow: hidden;
  }

  .commerce-shell .commerce-browser-arrow {
    width: 28px;
    height: 60px;
    font-size: 38px;
  }

  .commerce-shell .commerce-browser-item {
    height: 103px;
    gap: 7px;
    overflow: hidden;
  }

  .commerce-shell .commerce-browser-item span {
    width: 70px;
    height: 70px;
    background-size: cover;
  }

  .commerce-shell .commerce-record-strip {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 174px;
    min-height: 174px;
    padding: 18px 20px 21px;
    overflow: hidden;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-record-list {
    height: 105px;
    min-height: 0;
    gap: 22px;
  }

  .commerce-shell .commerce-record-item {
    height: 105px;
    min-height: 105px;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .topbar,
  .commerce-shell .topbar-inner,
  .commerce-shell .nav-link {
    height: 58px;
  }

  .commerce-shell .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .commerce-shell .brand-name {
    font-size: 24px;
  }

  .commerce-shell .login-btn {
    width: 76px;
    height: 36px;
    border-radius: 9px;
  }

  .commerce-shell .commerce-workbench {
    grid-template-columns: 580px minmax(0, 1fr);
    gap: 18px;
    width: min(1468px, calc(100% - 48px));
    height: calc(100vh - 58px);
    min-height: 0;
    padding: 12px 0;
    overflow: hidden;
    align-items: stretch;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 100%;
    padding: 12px 16px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px;
    line-height: 1.08;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.23;
  }

  .commerce-shell .commerce-form-grid {
    height: 100%;
    justify-content: space-between;
    gap: 0;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 13px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-suite-upload {
    height: 118px;
    min-height: 118px;
    gap: 3px;
    padding: 9px 16px 10px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 34px;
    height: 32px;
    background-size: 34px 31px;
  }

  .commerce-shell .commerce-upload-copy {
    gap: 2px;
  }

  .commerce-shell .commerce-upload-copy strong {
    font-size: 13px;
    line-height: 1.12;
  }

  .commerce-shell .commerce-upload-copy span {
    font-size: 12px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-upload-actions {
    inset: auto auto 12px 10px;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }

  .commerce-shell .commerce-suite-field {
    gap: 4px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 34px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 13px;
  }

  .commerce-shell .commerce-output-choice {
    grid-template-columns: 1fr 1fr 1fr 1.56fr;
    column-gap: 0;
    row-gap: 0;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 42px;
    padding: 0 8px;
    border-radius: 0;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):first-child {
    border-radius: 7px 0 0 7px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(2),
  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    margin-left: -1px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    border-radius: 0 7px 7px 0;
  }

  .commerce-shell .commerce-output-option:not(.is-suite) + .commerce-output-option:not(.is-suite)::before {
    top: 9px;
    height: 22px;
  }

  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    margin-left: 7px;
    border-radius: 7px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 13px;
  }

  .commerce-shell .commerce-output-option span,
  .commerce-shell .commerce-output-option.is-suite span {
    margin-top: 2px;
    font-size: 11px;
  }

  .commerce-shell .commerce-output-option.is-suite::after {
    top: -8px;
    right: -5px;
    height: 17px;
    padding: 0 6px;
  }

  .commerce-shell .commerce-module-summary {
    min-height: 14px;
    margin: 6px 0 5px;
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 30px;
    min-height: 30px;
    gap: 4px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons b {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .commerce-shell .commerce-region-tabs {
    width: 250px;
    height: 31px;
    margin-bottom: 7px;
    border-radius: 7px;
  }

  .commerce-shell .commerce-region-tabs button {
    font-size: 13px;
  }

  .commerce-shell .commerce-platform-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
  }

  .commerce-shell .commerce-platform-buttons button {
    flex: 0 0 101px;
    height: 32px;
    gap: 4px;
    min-width: 0;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8) {
    flex-basis: 112px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    background-size: 16px 16px;
  }

  .commerce-shell .commerce-language-category-row {
    grid-template-columns: 135px 135px minmax(0, 1fr);
    gap: 10px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 40px;
    min-height: 40px;
    padding: 8px 10px 17px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-copy-field > b {
    right: 9px;
    bottom: 5px;
    font-size: 11px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0;
    padding-top: 0;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 44px;
    border-radius: 8px;
    font-size: 15px;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 122px;
    gap: 12px;
    height: 100%;
  }

  .commerce-shell .commerce-preview-stage {
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    min-height: 0;
    gap: 9px;
    overflow: hidden;
    padding: 14px 18px 12px;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 20px;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 17px;
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface,
  .commerce-shell .commerce-main-art {
    min-height: 0;
    height: 100%;
  }

  .commerce-shell .commerce-main-art {
    aspect-ratio: auto;
  }

  .commerce-shell .commerce-preview-browser {
    right: 12px;
    bottom: 10px;
    width: min(470px, calc(100% - 24px));
    height: 104px;
    min-height: 104px;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 8px;
    padding: 9px 10px 8px;
    border-radius: 12px;
  }

  .commerce-shell .commerce-browser-list {
    height: 86px;
    gap: 8px;
  }

  .commerce-shell .commerce-browser-arrow {
    width: 24px;
    height: 48px;
    font-size: 30px;
  }

  .commerce-shell .commerce-browser-item {
    height: 86px;
    gap: 5px;
  }

  .commerce-shell .commerce-browser-item span {
    width: 58px;
    height: 58px;
  }

  .commerce-shell .commerce-record-strip {
    height: 122px;
    min-height: 122px;
    padding: 10px 18px 11px;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-record-list {
    height: 75px;
    gap: 14px;
  }

  .commerce-shell .commerce-record-item {
    height: 75px;
    min-height: 75px;
  }
}

/* Commerce product final color/material fidelity lock, 2026-06-15 */
@media (min-width: 1201px) {
  .commerce-shell {
    color: #111827;
    background: #f6f8fc;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel,
  .commerce-shell .commerce-preview-stage,
  .commerce-shell .commerce-record-strip {
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  }

  .commerce-shell .commerce-form-card .panel-title,
  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    color: #101828;
    font-weight: 800;
  }

  .commerce-shell .commerce-panel-head p {
    color: #667085;
    font-weight: 500;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span,
  .commerce-shell .commerce-module-summary span,
  .commerce-shell .commerce-module-summary strong {
    color: #1f2937;
    font-weight: 700;
  }

  .commerce-shell .commerce-suite-upload {
    border-color: #d7ddea;
    background: #fff;
  }

  .commerce-shell .commerce-upload-icon {
    opacity: 0.94;
    filter: saturate(0.86) contrast(1.12);
  }

  .commerce-shell .commerce-upload-copy strong,
  .commerce-shell .commerce-output-option strong,
  .commerce-shell .commerce-platform-buttons span,
  .commerce-shell .commerce-module-buttons span,
  .commerce-shell .commerce-browser-item strong {
    color: #172033;
    font-weight: 700;
  }

  .commerce-shell .commerce-upload-copy span,
  .commerce-shell .commerce-output-option span {
    color: #7b8495;
    font-weight: 500;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select,
  .commerce-shell .commerce-copy-field textarea,
  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-module-buttons button,
  .commerce-shell .commerce-output-option:not(.is-suite),
  .commerce-shell .commerce-upload-actions button:last-child {
    border-color: #e2e7ef;
    color: #1f2937;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
  }

  .commerce-shell .commerce-suite-field input::placeholder,
  .commerce-shell .commerce-copy-field textarea::placeholder {
    color: #98a2b3;
  }

  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active,
  .commerce-shell .commerce-region-tabs button.active,
  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2));
  }

  .commerce-shell .commerce-region-tabs button.active {
    background: var(--brand);
  }

  .commerce-shell .commerce-output-option.is-suite strong,
  .commerce-shell .commerce-output-option.is-suite span,
  .commerce-shell .commerce-output-option.is-suite.active strong,
  .commerce-shell .commerce-output-option.is-suite.active span {
    color: #fff;
  }

  .commerce-shell .commerce-output-option.is-suite::after {
    color: #ea580c;
    background: #ffe9b0;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.18);
  }

  .commerce-shell .commerce-module-buttons button.active {
    border-color: color-mix(in srgb, var(--brand) 22%, #e2e7ef);
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, #fff);
    box-shadow: none;
  }

  .commerce-shell .commerce-module-buttons button.active span,
  .commerce-shell .commerce-module-buttons button.active b {
    color: var(--brand);
  }

  .commerce-shell .commerce-module-buttons b {
    color: transparent;
    background: transparent;
  }

  .commerce-shell .commerce-module-buttons button.active b {
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
  }

  .commerce-shell .commerce-platform-buttons button.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    background-size: 22px 22px;
    filter: saturate(1.12) contrast(1.05);
    color: transparent;
    overflow: hidden;
    text-indent: -999px;
  }

  .commerce-shell .commerce-record-head span {
    color: var(--brand);
    font-weight: 700;
  }

  .commerce-shell .commerce-main-art {
    background: #eef2f7;
  }

  .commerce-shell .commerce-main-art img {
    filter: saturate(1.04) contrast(1.02) brightness(1.015);
  }

  .commerce-shell .commerce-preview-browser {
    border: 1px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(12px);
  }

  .commerce-shell .commerce-browser-item span,
  .commerce-shell .commerce-record-item span {
    background-color: #f8fafc;
    background-size: cover;
    filter: saturate(1.04) contrast(1.02) brightness(1.015);
  }

  .commerce-shell .commerce-browser-item.active span,
  .commerce-shell .commerce-record-item.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(98, 55, 255, 0.18);
  }

  .commerce-shell .commerce-browser-arrow {
    color: #111827;
    font-weight: 500;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    background-size: 18px 18px;
  }
}

/* Commerce product clean icon lock, 2026-06-15 */
.commerce-shell .commerce-platform-buttons b.has-reference-icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -999px;
  overflow: hidden;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  filter: none;
}

.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  color: transparent;
  background: var(--commerce-platform-icon) center / contain no-repeat;
  box-shadow: none;
  filter: none;
}

.commerce-shell .commerce-module-buttons b {
  display: none;
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #fff;
  background: transparent;
  font-size: 0;
  line-height: 0;
}

.commerce-shell .commerce-module-buttons button.active b {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
}

.commerce-shell .commerce-module-buttons button.active b i {
  display: block;
  width: 8px;
  height: 5px;
  margin-top: -1px;
  border-color: currentColor;
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.commerce-shell .commerce-browser-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: #111827;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  text-indent: 0;
}

.commerce-shell .commerce-browser-arrow span {
  display: block;
  width: 14px;
  height: 14px;
  border-color: currentColor;
  border-style: solid;
  border-width: 0 0 4px 4px;
  border-radius: 2px;
}

.commerce-shell .commerce-browser-arrow-prev span {
  transform: rotate(45deg);
}

.commerce-shell .commerce-browser-arrow-next span {
  transform: rotate(-135deg);
}

.commerce-shell .commerce-record-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--brand);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.commerce-shell .commerce-record-more span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.commerce-shell .commerce-record-more i {
  display: block;
  width: 8px;
  height: 8px;
  border-color: currentColor;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.commerce-shell .commerce-result-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.commerce-shell .commerce-download-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.commerce-shell .commerce-download-icon::before,
.commerce-shell .commerce-download-icon::after {
  position: absolute;
  content: "";
}

.commerce-shell .commerce-download-icon::before {
  left: 7px;
  top: 2px;
  width: 2px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

.commerce-shell .commerce-download-icon::after {
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-color: currentColor;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-radius: 1px;
  transform: rotate(45deg);
}

@media (min-width: 1201px) {
  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    background-size: contain;
  }

  .commerce-shell .commerce-browser-arrow {
    align-self: center;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-platform-buttons b.has-reference-icon {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
  }

  .commerce-shell .commerce-browser-arrow span {
    width: 12px;
    height: 12px;
    border-width: 0 0 3.5px 3.5px;
  }

  .commerce-shell .commerce-record-more {
    font-size: 13px;
  }
}

/* Commerce product mobile density lock, 2026-06-15 */
@media (max-width: 760px) {
  .commerce-shell .topbar {
    height: 82px;
    min-height: 82px;
  }

  .commerce-shell .topbar-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 82px;
    min-height: 82px;
    padding: 8px 12px 7px;
  }

  .commerce-shell .brand {
    position: absolute;
    top: 8px;
    left: 12px;
    flex: 0 0 auto;
    width: auto;
    height: 28px;
    gap: 8px;
    min-width: 0;
  }

  .commerce-shell .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .commerce-shell .brand-name {
    font-size: 21px;
    line-height: 1;
  }

  .commerce-shell .brand-subtitle {
    display: none;
  }

  .commerce-shell .login-btn {
    width: 70px;
    height: 32px;
    border-radius: 9px;
  }

  .commerce-shell .actions {
    position: absolute;
    top: 8px;
    right: 12px;
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
  }

  .commerce-shell .nav {
    top: 43px;
    height: 35px;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px;
    scrollbar-width: none;
  }

  .commerce-shell .nav::-webkit-scrollbar {
    display: none;
  }

  .commerce-shell .nav-link {
    flex: 0 0 auto;
    height: 34px;
    font-size: 14px;
    white-space: nowrap;
  }

  .commerce-shell .commerce-workbench {
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 20px;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 12px 16px 13px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 22px;
    line-height: 1.08;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.24;
  }

  .commerce-shell .commerce-form-grid {
    gap: 6px;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 3px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 13px;
    line-height: 1.12;
  }

  .commerce-shell .commerce-suite-upload {
    height: 104px;
    min-height: 104px;
    padding: 8px 12px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 26px;
    height: 24px;
    background-size: 26px 24px;
  }

  .commerce-shell .commerce-upload-copy {
    gap: 3px;
  }

  .commerce-shell .commerce-upload-copy strong {
    font-size: 12px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-upload-copy span {
    font-size: 11px;
    line-height: 1.25;
  }

  .commerce-shell .commerce-upload-actions {
    inset: auto auto 8px 10px;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
  }

  .commerce-shell .commerce-suite-field {
    gap: 5px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-preview-column,
  .commerce-shell .commerce-preview-stage,
  .commerce-shell .commerce-record-strip,
  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface,
  .commerce-shell .commerce-main-art {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .commerce-shell .commerce-output-choice {
    display: flex;
    gap: 0;
    align-items: stretch;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 0 5px;
    border-radius: 0;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):first-child {
    border-radius: 7px 0 0 7px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(2),
  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    margin-left: -1px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    border-radius: 0 7px 7px 0;
  }

  .commerce-shell .commerce-output-option:not(.is-suite) + .commerce-output-option:not(.is-suite)::before {
    top: 9px;
    height: 22px;
  }

  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    flex: 1.55 1 0;
    margin-left: 6px;
    border-radius: 7px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 12px;
  }

  .commerce-shell .commerce-output-option span,
  .commerce-shell .commerce-output-option.is-suite span {
    display: none;
  }

  .commerce-shell .commerce-output-option.is-suite span {
    display: none;
  }

  .commerce-shell .commerce-output-option.is-suite::after {
    top: -7px;
    right: -4px;
    height: 16px;
    padding: 0 6px;
    font-size: 10px;
  }

  .commerce-shell .commerce-module-summary {
    min-height: 14px;
    margin: 4px 0 3px;
    font-size: 11px;
  }

  .commerce-shell .commerce-module-buttons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 24px;
    min-height: 24px;
    gap: 2px;
    padding: 0 2px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
  }

  .commerce-shell .commerce-module-buttons b {
    flex-basis: 11px;
    width: 11px;
    height: 11px;
  }

  .commerce-shell .commerce-region-tabs {
    width: 100%;
    height: 26px;
    margin-bottom: 4px;
    border-radius: 8px;
  }

  .commerce-shell .commerce-region-tabs button {
    font-size: 12px;
  }

  .commerce-shell .commerce-platform-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8) {
    flex: initial;
    width: 100%;
    height: 23px;
    gap: 3px;
    padding: 0 4px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
  }

  .commerce-shell .commerce-platform-buttons span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .commerce-shell .commerce-language-category-row {
    display: flex;
    gap: 6px;
    align-items: end;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field:nth-child(1),
  .commerce-shell .commerce-language-category-row .commerce-suite-field:nth-child(2) {
    flex: 0 0 82px;
    min-width: 0;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field:nth-child(2) {
    flex-basis: 88px;
  }

  .commerce-shell .commerce-language-category-row .commerce-copy-field {
    flex: 1 1 0;
    min-width: 0;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 40px;
    min-height: 40px;
    padding: 7px 9px 14px;
    border-radius: 8px;
    font-size: 12px;
  }

  .commerce-shell .commerce-copy-field > b {
    right: 9px;
    bottom: 4px;
    font-size: 10px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px;
    padding-top: 0;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 39px;
    border-radius: 8px;
    font-size: 14px;
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2));
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit::before {
    content: none;
  }

  .commerce-shell .commerce-preview-stage {
    padding: 13px;
  }

  .commerce-shell .commerce-preview-browser {
    width: 100%;
    margin-top: 7px;
    padding: 9px;
  }

  .commerce-shell .commerce-record-strip {
    min-height: 164px;
    padding: 14px;
  }

  .commerce-shell .commerce-record-list {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    height: 96px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .commerce-shell .commerce-record-list::-webkit-scrollbar {
    display: none;
  }

  .commerce-shell .commerce-record-item {
    flex: 0 0 138px;
    height: 96px;
    min-height: 96px;
    scroll-snap-align: start;
  }
}

/* Commerce product browser polish lock, 2026-06-15 */
.commerce-shell .commerce-form-card .panel-title,
.commerce-shell .commerce-stage-head h2,
.commerce-shell .commerce-record-head strong {
  color: #101321;
  letter-spacing: 0;
}

.commerce-shell .commerce-panel-head p,
.commerce-shell .commerce-upload-copy span,
.commerce-shell .commerce-output-option span,
.commerce-shell .commerce-copy-field textarea::placeholder,
.commerce-shell .commerce-suite-field input::placeholder {
  color: #7b8192;
}

.commerce-shell .commerce-section-title span,
.commerce-shell .commerce-suite-field > span,
.commerce-shell .commerce-module-summary span,
.commerce-shell .commerce-module-summary strong {
  color: #202638;
}

.commerce-shell .commerce-output-option.is-suite,
.commerce-shell .commerce-output-option.is-suite.active,
.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2));
}

.commerce-shell .commerce-region-tabs button.active,
.commerce-shell .commerce-module-buttons button.active b {
  background: var(--brand);
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 26%, #e7eaf3);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, #fff);
}

.commerce-shell .commerce-platform-buttons button.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}

.commerce-shell .commerce-suite-upload {
  border-color: #d7ddea;
  background: #fff;
}

.commerce-shell .commerce-upload-actions button:last-child {
  border-color: #e1e5ef;
  color: #273044;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.commerce-shell .commerce-platform-buttons button {
  border-color: #e2e7ef;
  color: #273044;
  background: #fff;
}

.commerce-shell .commerce-platform-buttons span {
  color: #202638;
  font-weight: 750;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  background-size: contain;
  filter: none;
}

.commerce-shell .commerce-main-art,
.commerce-shell .commerce-browser-item span,
.commerce-shell .commerce-record-item span {
  background-color: #f4f7fb;
}

@media (min-width: 1201px) {
  .commerce-shell .commerce-upload-actions {
    bottom: 19px;
    left: 14px;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 34px;
  }

  .commerce-shell .commerce-platform-buttons button {
    justify-content: flex-start;
  }

  .commerce-shell .commerce-platform-buttons button:nth-child(8) {
    flex-basis: 118px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-upload-actions {
    position: absolute;
    top: auto;
    bottom: 8px;
    left: 10px;
    right: auto;
    width: auto;
  }

  .commerce-shell .commerce-platform-buttons button {
    justify-content: flex-start;
  }

  .commerce-shell .commerce-platform-buttons span {
    min-width: 0;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 13px;
    width: 13px;
    height: 13px;
  }

  .commerce-shell .commerce-suite-upload {
    padding-top: 9px;
    padding-bottom: 8px;
  }
}

/* Commerce product visual finish lock, 2026-06-15 */
.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea {
  font-weight: 560;
}

.commerce-shell .commerce-suite-field input::placeholder,
.commerce-shell .commerce-copy-field textarea::placeholder {
  color: #8992a3;
  font-weight: 520;
}

.commerce-shell .commerce-upload-copy strong {
  color: #343b4d;
  font-weight: 760;
}

.commerce-shell .commerce-upload-copy span {
  color: #8790a2;
  font-weight: 500;
}

.commerce-shell .commerce-upload-actions button:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 720;
}

.commerce-shell .commerce-upload-actions button:last-child::before {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
  background:
    radial-gradient(circle at 72% 30%, currentColor 0 1.4px, transparent 1.7px),
    linear-gradient(135deg, transparent 0 47%, currentColor 48% 58%, transparent 59%) 2px 6px / 10px 6px no-repeat;
  opacity: 0.88;
  content: "";
}

.commerce-shell .commerce-platform-buttons span {
  color: #232b3f;
  font-weight: 650;
}

.commerce-shell .commerce-platform-buttons button.active span {
  color: #131a2b;
  font-weight: 760;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.08));
}

.commerce-shell .commerce-preview-browser {
  border-color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.16),
    0 2px 8px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.commerce-shell .commerce-browser-item span,
.commerce-shell .commerce-record-item span {
  border: 1px solid rgba(226, 232, 240, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 4px 10px rgba(15, 23, 42, 0.04);
}

.commerce-shell .commerce-browser-item.active span {
  border-color: color-mix(in srgb, var(--brand) 68%, #fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand) 72%, transparent),
    0 8px 18px rgba(98, 55, 255, 0.18);
}

.commerce-shell .commerce-record-item {
  border-color: transparent;
  background: #fff;
}

.commerce-shell .commerce-record-item.active {
  border-color: color-mix(in srgb, var(--brand) 72%, #fff);
  box-shadow:
    0 0 0 2px rgba(98, 55, 255, 0.2),
    0 8px 16px rgba(15, 23, 42, 0.05);
}

@media (min-width: 1201px) {
  .commerce-shell .commerce-upload-actions button:last-child {
    min-width: 130px;
  }

  .commerce-shell .commerce-browser-item strong {
    color: #1f2638;
    font-weight: 760;
  }

  .commerce-shell .commerce-record-item span {
    border-radius: 8px;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-upload-actions button:last-child {
    min-width: 124px;
    gap: 6px;
  }

  .commerce-shell .commerce-upload-actions button:last-child::before {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
    border-radius: 3px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-upload-copy {
    top: 51px;
  }

  .commerce-shell .commerce-upload-copy span {
    display: none;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    gap: 5px;
  }

  .commerce-shell .commerce-upload-actions button:last-child::before {
    width: 11px;
    height: 11px;
    flex-basis: 11px;
    border-width: 1.4px;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-weight: 650;
  }
}

/* Commerce product final soft-detail lock, 2026-06-15 */
.commerce-shell .commerce-suite-field input::placeholder,
.commerce-shell .commerce-copy-field textarea::placeholder {
  color: #98a2b3;
  font-weight: 500;
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea {
  color: #31394a;
  font-weight: 540;
}

.commerce-shell .commerce-panel-head p {
  color: #667085;
  font-weight: 520;
}

.commerce-shell .commerce-platform-buttons span {
  color: #273044;
  font-weight: 620;
}

.commerce-shell .commerce-platform-buttons button.active span {
  color: #151c2d;
  font-weight: 720;
}

.commerce-shell .commerce-record-item span {
  border-color: rgba(238, 242, 247, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.commerce-shell .commerce-record-item:not(.active) {
  box-shadow: none;
}

.commerce-shell .commerce-preview-browser {
  background: rgba(255, 255, 255, 0.9);
}

@media (min-width: 1201px) {
  .commerce-shell .commerce-upload-actions button:last-child {
    color: #2e3748;
    font-weight: 680;
  }

  .commerce-shell .commerce-browser-item strong {
    font-weight: 720;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select,
  .commerce-shell .commerce-copy-field textarea {
    font-weight: 520;
  }
}

/* Commerce product reference edge-detail lock, 2026-06-15 */
.commerce-shell .commerce-suite-upload {
  border-color: #d6dce8;
  background: #fff;
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea,
.commerce-shell .commerce-output-option:not(.is-suite),
.commerce-shell .commerce-platform-buttons button,
.commerce-shell .commerce-module-buttons button {
  border-color: #e1e6ef;
}

.commerce-shell .commerce-suite-field input::placeholder,
.commerce-shell .commerce-copy-field textarea::placeholder {
  color: #8f99aa;
}

.commerce-shell .commerce-main-art img,
.commerce-shell .commerce-browser-item span,
.commerce-shell .commerce-record-item span {
  filter: saturate(1.055) contrast(1.025) brightness(1.012);
}

.commerce-shell .commerce-record-item span {
  background-size: cover;
}

.commerce-shell .commerce-browser-item:not(.active) span {
  border-color: rgba(232, 237, 245, 0.86);
}

@media (min-width: 1201px) {
  .commerce-shell .commerce-panel-head p {
    margin-top: 7px;
  }

  .commerce-shell .commerce-suite-upload {
    border-style: dashed;
  }

  .commerce-shell .commerce-platform-buttons button {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.018);
  }
}

/* Commerce product reference micro-fidelity lock, 2026-06-15 */
.commerce-shell .commerce-panel-head p {
  color: #6f7788;
  font-weight: 510;
}

.commerce-shell .commerce-section-title span,
.commerce-shell .commerce-suite-field > span,
.commerce-shell .commerce-module-summary span,
.commerce-shell .commerce-module-summary strong {
  color: #1d2434;
  font-weight: 740;
}

.commerce-shell .commerce-suite-upload {
  border-color: #d4dbea;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.commerce-shell .commerce-upload-icon {
  width: 42px;
  height: 42px;
  background-size: 42px 38px;
  filter: contrast(0.96) brightness(1.04);
  opacity: 0.92;
}

.commerce-shell .commerce-upload-copy strong {
  color: #40485a;
  font-weight: 710;
}

.commerce-shell .commerce-upload-copy span {
  color: #8b94a6;
  font-weight: 500;
}

.commerce-shell .commerce-upload-actions button:last-child {
  border-color: #dfe5ef;
  color: #2f3748;
  font-weight: 680;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.032);
}

.commerce-shell .commerce-upload-actions button:last-child::before {
  border-width: 1.45px;
  opacity: 0.82;
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea {
  color: #2f3748;
  border-color: #dfe5ef;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.018);
}

.commerce-shell .commerce-suite-field input::placeholder,
.commerce-shell .commerce-copy-field textarea::placeholder {
  color: #929bad;
  font-weight: 500;
}

.commerce-shell .commerce-output-option:not(.is-suite),
.commerce-shell .commerce-module-buttons button,
.commerce-shell .commerce-platform-buttons button {
  border-color: #e1e6ef;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.014);
}

.commerce-shell .commerce-output-option:not(.is-suite) strong,
.commerce-shell .commerce-module-buttons span,
.commerce-shell .commerce-platform-buttons span {
  color: #232b3d;
}

.commerce-shell .commerce-platform-buttons span {
  font-weight: 640;
}

.commerce-shell .commerce-platform-buttons button.active {
  border-color: #6d34ff;
  box-shadow: 0 0 0 1px rgba(109, 52, 255, 0.22);
}

.commerce-shell .commerce-platform-buttons button.active span {
  color: #172033;
  font-weight: 720;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  flex-basis: 21px;
  width: 21px;
  height: 21px;
  background-size: 21px 21px;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.075));
}

.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  letter-spacing: 0;
}

.commerce-shell .commerce-form-card .commerce-suite-submit::before,
.commerce-shell .primary-btn.commerce-suite-submit::before {
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
  background:
    linear-gradient(135deg, transparent 0 46%, currentColor 47% 58%, transparent 59%) 2px 8px / 11px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 10px 3px / 4px 1.7px no-repeat,
    linear-gradient(currentColor, currentColor) 11px 2px / 1.7px 4px no-repeat;
  opacity: 0.9;
  content: "";
}

.commerce-shell .commerce-browser-item span[style*="record-detail-reference"],
.commerce-shell .commerce-browser-item span[style*="record-scene-reference"] {
  background-size: cover;
}

.commerce-shell .commerce-preview-browser {
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 17px 34px rgba(15, 23, 42, 0.145),
    0 2px 8px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.commerce-shell .commerce-browser-item span,
.commerce-shell .commerce-record-item span {
  filter: saturate(1.04) contrast(1.022) brightness(1.016);
}

.commerce-shell .commerce-record-more {
  color: #6d34ff;
  font-weight: 760;
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
    background-size: 17px 17px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    gap: 7px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit::before,
  .commerce-shell .primary-btn.commerce-suite-submit::before {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    border-width: 1.6px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 13px;
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit::before,
  .commerce-shell .primary-btn.commerce-suite-submit::before {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

/* Commerce product reference tone lock, 2026-06-15 */
.commerce-shell .commerce-output-option.is-suite,
.commerce-shell .commerce-output-option.is-suite.active,
.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand) 92%, #101321) 0%,
    color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 51%,
    var(--brand-2) 100%
  );
}

.commerce-shell .commerce-region-tabs button.active {
  background: var(--brand);
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 30%, #e2e7ef);
  background: color-mix(in srgb, var(--brand) 9%, #fff);
}

.commerce-shell .commerce-module-buttons button.active b,
.commerce-shell .commerce-module-buttons button.active b i {
  color: #fff;
}

.commerce-shell .commerce-output-option.is-suite strong,
.commerce-shell .commerce-form-card .commerce-suite-submit {
  text-shadow: 0 1px 1px rgba(57, 31, 159, 0.16);
}

/* Commerce product reference control-tone lock, 2026-06-15 */
.commerce-shell .commerce-output-option.is-suite,
.commerce-shell .commerce-output-option.is-suite.active,
.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%);
}

.commerce-shell .commerce-region-tabs button.active {
  background: var(--brand);
}

.commerce-shell .commerce-output-option:not(.is-suite),
.commerce-shell .commerce-module-buttons button,
.commerce-shell .commerce-platform-buttons button {
  border-color: #e5e9f2;
  background: #fff;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.01);
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 22%, #e8edf4);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
}

.commerce-shell .commerce-module-buttons button.active span {
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
}

.commerce-shell .commerce-platform-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 88%, #fff);
  box-shadow: 0 0 0 1px rgba(109, 52, 255, 0.18);
}

/* Commerce product reference thumbnail-tone lock, 2026-06-15 */
.commerce-shell .commerce-preview-browser {
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.15),
    0 2px 8px rgba(15, 23, 42, 0.048),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.commerce-shell .commerce-browser-item:nth-child(2) span {
  filter: saturate(0.88) contrast(0.96) brightness(1.12);
}

.commerce-shell .commerce-browser-item:nth-child(3) span {
  filter: saturate(0.96) contrast(0.98) brightness(1.025);
}

.commerce-shell .commerce-browser-item:nth-child(4) span {
  filter: saturate(0.94) contrast(0.98) brightness(0.985);
}

.commerce-shell .commerce-browser-item:nth-child(5) span {
  filter: saturate(0.93) contrast(0.97) brightness(0.96);
}

.commerce-shell .commerce-record-item:nth-child(3) span {
  filter: saturate(0.96) contrast(0.98) brightness(0.965);
}

.commerce-shell .commerce-record-item:nth-child(4) span {
  filter: saturate(1.02) contrast(0.98) brightness(1.06);
}

.commerce-shell .commerce-record-item:nth-child(5) span {
  filter: saturate(0.96) contrast(0.97) brightness(1.09);
}

/* Commerce product reference field-tone lock, 2026-06-15 */
.commerce-shell .commerce-suite-field select {
  appearance: auto;
  color: #293143;
  font-weight: 660;
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea {
  border-color: #e4e8f1;
  background-color: #fff;
}

.commerce-shell .commerce-copy-field textarea {
  color: #5f6879;
  font-weight: 530;
}

.commerce-shell .commerce-copy-field textarea::placeholder {
  color: #9aa3b3;
  font-weight: 510;
}

.commerce-shell .commerce-copy-field > b {
  color: #9ca4b4;
  font-weight: 500;
}

/* Viral video commerce-system implementation lock, 2026-06-15 */
.viral-shell .viral-video-workbench {
  height: calc(100vh - 68px);
  min-height: 760px;
  padding: 22px 31px;
  overflow: hidden;
  color: #111827;
  background: #f6f8fc;
}

.viral-shell .viral-console-shell {
  display: grid;
  grid-template-areas: "controls stage delivery";
  grid-template-columns: 390px minmax(560px, 1fr) 442px;
  gap: 20px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.viral-shell .viral-video-panel,
.viral-shell .viral-video-stage,
.viral-shell .viral-video-side-stack {
  min-width: 0;
  min-height: 0;
}

.viral-shell .viral-video-panel,
.viral-shell .viral-video-preview-card,
.viral-shell .viral-delivery-card,
.viral-shell .viral-video-side-stack .commerce-record-strip {
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.viral-shell .viral-video-panel {
  grid-area: controls;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid #e2e7ef;
}

.viral-shell .viral-agent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 14px 16px;
  border-bottom: 1px solid #edf2f6;
}

.viral-shell .viral-agent-top > div {
  min-width: 0;
}

.viral-shell .viral-video-panel .panel-title {
  margin: 0;
  color: #101828;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}

.viral-shell .viral-agent-top > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, #e5e9f2);
  border-radius: 999px;
  color: color-mix(in srgb, var(--brand) 88%, #4730c8);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.viral-shell .viral-agent-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 70px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid #edf2f6;
  border-radius: 0;
  background: #fff;
}

.viral-shell .viral-agent-metrics span {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #edf2f6;
  border-radius: 8px;
  color: #7b8495;
  background: #fafcfe;
  font-size: 12px;
  font-weight: 560;
  white-space: nowrap;
}

.viral-shell .viral-agent-metrics strong {
  display: block;
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 800;
  text-overflow: ellipsis;
}

.viral-shell .viral-agent-metrics em {
  display: none;
}

.viral-shell .viral-video-panel .viral-control-group {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid #edf2f6;
  border-radius: 0;
  background: #fff;
}

.viral-shell .viral-brief-group {
  min-height: 0;
}

.viral-shell .viral-control-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.viral-shell .viral-control-heading span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  color: color-mix(in srgb, var(--brand) 92%, #4730c8);
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  font-size: 11px;
  font-weight: 760;
}

.viral-shell .viral-control-heading strong {
  color: #1d2434;
  font-size: 13px;
  font-weight: 740;
}

.viral-shell .viral-control-heading em {
  color: #8f99aa;
  font-size: 12px;
  font-style: normal;
  font-weight: 520;
}

.viral-shell .viral-upload-strip {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px;
  border: 1px dashed #d4dbea;
  border-radius: 8px;
  background: #fff;
}

.viral-shell .viral-upload-thumb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid #e4e8f1;
  border-radius: 8px;
  background: #f3f6fb;
}

.viral-shell .viral-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viral-shell .viral-upload-thumb span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #5f6879;
  background: #fff;
  font-size: 18px;
  font-weight: 740;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.viral-shell .viral-upload-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.viral-shell .viral-upload-meta strong {
  overflow: hidden;
  color: #40485a;
  font-size: 14px;
  font-weight: 710;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-upload-meta span {
  overflow: hidden;
  color: #8b94a6;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-upload-actions {
  display: grid;
  gap: 6px;
  min-width: 54px;
}

.viral-shell .viral-upload-actions button {
  height: 28px;
  min-width: 54px;
  padding: 0 10px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  color: #2f3748;
  background: #fff;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.032);
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
}

.viral-shell .viral-upload-actions button:first-child {
  border-color: color-mix(in srgb, var(--brand) 88%, #fff);
  color: #fff;
  background: var(--brand);
}

.viral-shell .viral-video-panel .viral-control-field,
.viral-shell .viral-video-panel .viral-setting-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.viral-shell .viral-video-panel .viral-control-url {
  grid-template-columns: 1fr;
  gap: 8px;
}

.viral-shell .viral-video-panel .viral-control-field span,
.viral-shell .viral-video-panel .viral-setting-row > span {
  color: #1d2434;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.2;
}

.viral-shell .viral-video-panel .viral-control-field input,
.viral-shell .viral-video-panel .viral-control-field select,
.viral-shell .viral-video-panel .viral-control-field textarea,
.viral-shell .viral-script-box textarea {
  width: 100%;
  border: 1px solid #e4e8f1;
  border-radius: 8px;
  color: #2f3748;
  background: #fff;
  font-size: 13px;
  font-weight: 540;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.018);
}

.viral-shell .viral-video-panel .viral-control-field input,
.viral-shell .viral-video-panel .viral-control-field select {
  height: 38px;
  padding: 0 12px;
}

.viral-shell .viral-video-panel .viral-control-field input::placeholder,
.viral-shell .viral-script-box textarea::placeholder {
  color: #9aa3b3;
  font-weight: 510;
}

.viral-shell .viral-video-panel .viral-control-field input:focus,
.viral-shell .viral-script-box textarea:focus,
.viral-shell .viral-audio-field input:focus,
.viral-shell .viral-audio-field select:focus {
  border-color: color-mix(in srgb, var(--brand) 58%, #dfe3f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent);
}

.viral-shell .viral-video-panel .viral-segment-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid #e4e8f1;
  border-radius: 9px;
  background: #f4f7fb;
}

.viral-shell .viral-video-panel .viral-segment-control button {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  color: #5f6879;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-video-panel .viral-segment-control button.active {
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  background: #fff;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.06);
}

.viral-shell .viral-script-box {
  position: relative;
  display: block;
  min-height: 124px;
}

.viral-shell .viral-script-box textarea {
  height: 124px;
  min-height: 124px;
  padding: 12px 12px 48px;
  color: #5f6879;
  line-height: 1.45;
  resize: none;
}

.viral-shell .viral-script-optimize {
  position: absolute;
  right: 10px;
  bottom: 10px;
  height: 32px;
  min-width: 88px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, #e8edf4);
  border-radius: 7px;
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
}

.viral-shell .viral-script-optimize:disabled {
  cursor: default;
  opacity: 0.62;
}

.viral-shell .viral-platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.viral-shell .viral-platform-chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  color: #5f6879;
  background: #fff;
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.viral-shell .viral-platform-chips span.active {
  border-color: color-mix(in srgb, var(--brand) 88%, #fff);
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  box-shadow: 0 0 0 1px rgba(109, 52, 255, 0.18);
}

.viral-shell .viral-source-url-group {
  align-content: start;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #fbfcfe;
}

.viral-shell .viral-source-url-group .viral-control-heading {
  opacity: 0.82;
}

.viral-shell .viral-source-url-group .viral-control-url input {
  height: 34px;
  font-size: 12px;
}

.viral-shell .viral-source-url-group .viral-setting-row {
  grid-template-columns: 62px minmax(0, 1fr);
}

.viral-shell .viral-source-url-group .viral-segment-control {
  min-height: 34px;
}

.viral-shell .viral-source-url-group .viral-segment-control button {
  height: 26px;
}

.viral-shell .viral-video-panel .viral-action-bar {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 10px;
  padding: 15px 16px;
  border-top: 1px solid #edf2f6;
  background: #fff;
}

.viral-shell .viral-video-panel .commerce-reset-btn,
.viral-shell .viral-video-panel .commerce-suite-submit {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
}

.viral-shell .viral-video-panel .commerce-suite-submit,
.viral-shell .viral-delivery-actions .commerce-result-download:not(:disabled) {
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%);
  box-shadow: 0 12px 24px rgba(109, 52, 255, 0.18);
}

.viral-shell .viral-video-panel .commerce-suite-submit::before,
.viral-shell .viral-delivery-actions .commerce-result-download::before {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1.6px solid currentColor;
  border-radius: 4px;
  background:
    linear-gradient(135deg, transparent 0 46%, currentColor 47% 58%, transparent 59%) 2px 8px / 10px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 9px 3px / 4px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) 10px 2px / 1.6px 4px no-repeat;
  opacity: 0.9;
  content: "";
}

.viral-shell .viral-video-panel .commerce-reset-btn {
  border: 1px solid #dfe5ef;
  color: #2f3748;
  background: #fff;
}

.viral-shell .viral-video-stage {
  grid-area: stage;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.viral-shell .viral-video-studio-shell {
  display: block;
  height: 100%;
  min-height: 0;
}

.viral-shell .viral-video-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.viral-shell .viral-video-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 14px 16px;
  border-bottom: 1px solid #edf2f6;
}

.viral-shell .viral-video-stage-head h2 {
  margin: 0;
  color: #101828;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

.viral-shell .viral-video-stage-head p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 12px;
  font-weight: 520;
  line-height: 1.35;
}

.viral-shell .viral-video-stage-head .commerce-stage-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.viral-shell .viral-video-stage-head .commerce-stage-pills span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #e1e6ef;
  border-radius: 999px;
  color: #667085;
  background: #fff;
  font-size: 12px;
  font-weight: 640;
  white-space: nowrap;
}

.viral-shell .viral-video-board.viral-director-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 18px 18px 16px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, #fbfcfd, #f3f7fb),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 44%);
}

.viral-shell .viral-video-board.viral-director-board::before {
  display: none;
}

.viral-shell .viral-phone-preview {
  display: grid;
  place-items: center;
  min-height: 0;
}

.viral-shell .viral-phone-device {
  position: relative;
  overflow: hidden;
  width: min(292px, 74%);
  aspect-ratio: 9 / 16;
  border: 8px solid #111827;
  border-radius: 34px;
  background: #111827;
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.viral-shell .viral-phone-device::before {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 5;
  width: 72px;
  height: 18px;
  border-radius: 999px;
  background: rgba(7, 12, 20, 0.9);
  content: "";
  transform: translateX(-50%);
}

.viral-shell .viral-phone-device img,
.viral-shell .viral-phone-device video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viral-shell .viral-phone-device video {
  background: #050816;
}

.viral-shell .viral-phone-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.72));
}

.viral-shell .viral-phone-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 92px;
  z-index: 2;
  display: grid;
  gap: 8px;
  color: #fff;
}

.viral-shell .viral-phone-copy strong {
  color: #fff;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.18;
  font-weight: 820;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.viral-shell .viral-phone-copy span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 580;
}

.viral-shell .viral-phone-audio {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: #fff;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(14px);
}

.viral-shell .viral-phone-audio strong,
.viral-shell .viral-phone-audio span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-phone-audio strong {
  color: #fff;
  font-size: 12px;
  font-weight: 760;
}

.viral-shell .viral-phone-audio span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 560;
}

.viral-shell .viral-audio-mini-wave,
.viral-shell .viral-audio-wave {
  display: flex;
  align-items: center;
  gap: 3px;
}

.viral-shell .viral-audio-mini-wave {
  height: 30px;
}

.viral-shell .viral-audio-mini-wave i,
.viral-shell .viral-audio-wave i {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--brand-2) 72%, #fff));
}

.viral-shell .viral-audio-mini-wave i:nth-child(1),
.viral-shell .viral-audio-wave i:nth-child(1) { height: 12px; }
.viral-shell .viral-audio-mini-wave i:nth-child(2),
.viral-shell .viral-audio-wave i:nth-child(2) { height: 19px; }
.viral-shell .viral-audio-mini-wave i:nth-child(3),
.viral-shell .viral-audio-wave i:nth-child(3) { height: 27px; }
.viral-shell .viral-audio-mini-wave i:nth-child(4),
.viral-shell .viral-audio-wave i:nth-child(4) { height: 16px; }
.viral-shell .viral-audio-mini-wave i:nth-child(5),
.viral-shell .viral-audio-wave i:nth-child(5) { height: 24px; }

.viral-shell .viral-preview-context {
  display: none;
}

.viral-shell .viral-source-compact {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px;
  color: #172033;
}

.viral-shell .viral-source-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e4e8f1;
  border-radius: 8px;
  background: #f4f7fb;
}

.viral-shell .viral-source-mark span {
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--brand) 80%, #4730c8);
  border-radius: 999px;
}

.viral-shell .viral-source-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.viral-shell .viral-source-copy span {
  color: #7b8495;
  font-size: 11px;
  font-weight: 640;
}

.viral-shell .viral-source-copy strong {
  overflow: hidden;
  color: #232b3d;
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-source-compact b {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, #e8edf4);
  border-radius: 999px;
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.viral-shell .viral-source-compact b.is-warning {
  border-color: rgba(245, 158, 11, 0.28);
  color: #9a5f16;
  background: #fff7e7;
}

.viral-shell .viral-watermark-guard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  min-height: 70px;
  padding: 11px 12px;
}

.viral-shell .viral-watermark-guard span {
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  font-size: 12px;
  font-weight: 720;
}

.viral-shell .viral-watermark-guard strong {
  color: #1d2434;
  font-size: 13px;
  font-weight: 740;
}

.viral-shell .viral-watermark-guard p {
  grid-column: 1 / -1;
  margin: 0;
  color: #7b8495;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.viral-shell .viral-watermark-guard.is-blocked {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fffbf2;
}

.viral-shell .viral-readiness-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.viral-shell .viral-readiness-card div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.viral-shell .viral-readiness-card span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e8eef5;
}

.viral-shell .viral-readiness-card span::before {
  color: #7b8495;
  font-size: 11px;
  font-weight: 760;
  content: "•";
}

.viral-shell .viral-readiness-card span.is-done {
  background: #e9f8f1;
}

.viral-shell .viral-readiness-card span.is-done::before {
  color: #15976b;
  content: "✓";
}

.viral-shell .viral-readiness-card strong {
  color: #232b3d;
  font-size: 13px;
  font-weight: 720;
}

.viral-shell .viral-readiness-card em {
  color: #7b8495;
  font-size: 12px;
  font-style: normal;
  font-weight: 560;
}

.viral-shell .viral-task-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
}

.viral-shell .viral-task-progress strong,
.viral-shell .viral-task-progress span {
  color: #232b3d;
  font-size: 12px;
  font-weight: 720;
}

.viral-shell .viral-task-progress i {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef5;
}

.viral-shell .viral-task-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%);
}

.viral-shell .viral-audio-dock {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "options"
    "wave"
    "status"
    "detail";
  gap: 10px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.viral-shell .viral-audio-title {
  display: none;
}

.viral-shell .viral-audio-title span {
  color: #7b8495;
  font-size: 12px;
  font-weight: 640;
}

.viral-shell .viral-audio-title strong {
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-audio-options {
  grid-area: options;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.viral-shell .viral-audio-options button {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 78px;
  padding: 10px;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  color: #5f6879;
  background: #fff;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.01);
  cursor: pointer;
  text-align: left;
}

.viral-shell .viral-audio-options button strong {
  overflow: hidden;
  color: #232b3d;
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-audio-options button span {
  display: block;
  color: #8b94a6;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

.viral-shell .viral-audio-options button.active {
  border-color: color-mix(in srgb, var(--brand) 88%, #fff);
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  box-shadow: 0 0 0 1px rgba(109, 52, 255, 0.18);
}

.viral-shell .viral-audio-options button.active strong {
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
}

.viral-shell .viral-audio-wave {
  grid-area: wave;
  height: 62px;
  align-items: end;
  justify-content: center;
  padding: 8px;
  border: 1px solid #edf2f6;
  border-radius: 8px;
  background: #fafcfe;
}

.viral-shell .viral-audio-wave i {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
}

.viral-shell .viral-audio-status {
  grid-area: status;
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #edf2f6;
  border-radius: 8px;
  background: #fafcfe;
}

.viral-shell .viral-audio-status strong {
  color: #232b3d;
  font-size: 13px;
  font-weight: 740;
}

.viral-shell .viral-audio-status span {
  color: #7b8495;
  font-size: 12px;
  font-weight: 500;
}

.viral-shell .viral-audio-status.is-done {
  border-color: #d7f0e3;
  background: #f1fbf6;
}

.viral-shell .viral-audio-status.is-done strong {
  color: #15976b;
}

.viral-shell .viral-audio-status.is-warning {
  border-color: #fde1b3;
  background: #fff8ea;
}

.viral-shell .viral-audio-status.is-warning strong {
  color: #9a5f16;
}

.viral-shell .viral-audio-field {
  grid-area: detail;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.viral-shell .viral-audio-field span {
  color: #1d2434;
  font-size: 12px;
  font-weight: 740;
}

.viral-shell .viral-audio-field input,
.viral-shell .viral-audio-field select {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #e4e8f1;
  border-radius: 8px;
  color: #2f3748;
  background: #fff;
  font-size: 13px;
  font-weight: 540;
  outline: none;
}

.viral-shell .viral-audio-dock p {
  grid-area: detail;
  align-self: center;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #edf2f6;
  border-radius: 8px;
  color: #7b8495;
  background: #fafcfe;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
}

.viral-shell .viral-video-motion-map {
  display: grid;
  min-height: 166px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid #edf2f6;
  border-radius: 0;
  background: #fff;
}

.viral-shell .viral-video-motion-head,
.viral-shell .viral-video-motion-visual {
  display: none;
}

.viral-shell .viral-video-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.viral-shell .viral-video-timeline div {
  display: grid;
  gap: 4px;
  min-height: 138px;
  padding: 8px;
  border: 1px solid #edf2f6;
  border-radius: 8px;
  background: #fafcfe;
  box-shadow: none;
}

.viral-shell .viral-video-timeline div > span {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 7px;
  background: #eef3f8;
}

.viral-shell .viral-video-timeline img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.018) brightness(1.012);
}

.viral-shell .viral-phone-device.is-empty {
  border-color: #d7dee8;
  background:
    linear-gradient(180deg, #ffffff, #f3f7fb),
    #f8fafc;
  box-shadow:
    0 24px 58px rgba(15, 23, 42, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.viral-shell .viral-phone-device.is-empty::before {
  background: #d8e0ea;
}

.viral-shell .viral-phone-empty {
  position: absolute;
  inset: 44px 20px 92px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  border: 1px dashed #cfd8e5;
  border-radius: 22px;
  color: #667085;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.82)),
    #f8fafc;
  text-align: center;
}

.viral-shell .viral-phone-empty::before {
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  background:
    linear-gradient(135deg, #fff 0 48%, #eef4f9 48% 100%),
    #f8fafc;
  content: "";
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.72);
}

.viral-shell .viral-phone-empty strong {
  color: #232b3d;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
}

.viral-shell .viral-phone-empty span {
  max-width: 172px;
  color: #7b8495;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 540;
}

.viral-shell .viral-phone-device.is-empty .viral-phone-audio {
  border-color: #e1e8f0;
  color: #667085;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}

.viral-shell .viral-phone-device.is-empty .viral-phone-audio strong {
  color: #232b3d;
}

.viral-shell .viral-phone-device.is-empty .viral-phone-audio span {
  color: #7b8495;
}

.viral-shell .viral-phone-device.is-empty .viral-audio-mini-wave i {
  background: linear-gradient(180deg, #cfd8e5, #b9c5d5);
}

.viral-shell .viral-video-timeline.is-empty div {
  background:
    linear-gradient(180deg, #ffffff, #fafcfe),
    #fff;
}

.viral-shell .viral-video-timeline.is-empty div > span {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #f8fafc 0 50%, #edf3f8 50% 100%),
    #f3f7fb;
}

.viral-shell .viral-video-timeline.is-empty div > span i {
  display: block;
  width: 34px;
  height: 22px;
  border: 1px solid #d5dee9;
  border-radius: 7px;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(207, 216, 229, 0.58) 48% 54%, transparent 54% 100%),
    #fff;
}

.viral-shell .viral-video-timeline b,
.viral-shell .viral-video-timeline strong,
.viral-shell .viral-video-timeline em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-video-timeline b {
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  font-size: 11px;
  font-weight: 720;
}

.viral-shell .viral-video-timeline strong {
  color: #232b3d;
  font-size: 13px;
  font-weight: 740;
}

.viral-shell .viral-video-timeline em {
  color: #7b8495;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.viral-shell .viral-video-preview-card > .task-status-card {
  margin: 0 16px 14px;
}

.viral-shell .viral-video-side-stack {
  grid-area: delivery;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.viral-shell .viral-delivery-card {
  display: grid;
  gap: 13px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.viral-shell .viral-param-card,
.viral-shell .viral-side-audio-card {
  overflow: hidden;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.viral-shell .viral-param-card {
  display: grid;
  gap: 0;
}

.viral-shell .viral-side-audio-card {
  display: grid;
  gap: 0;
  padding-bottom: 14px;
}

.viral-shell .viral-side-audio-card .viral-audio-dock {
  padding: 14px 16px 0;
}

.viral-shell .viral-side-audio-card .viral-audio-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.viral-shell .viral-side-audio-card .viral-audio-options button {
  min-height: 68px;
}

.viral-shell .viral-side-audio-card .viral-audio-field,
.viral-shell .viral-side-audio-card .viral-audio-dock p {
  grid-template-columns: 1fr;
}

.viral-shell .viral-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 14px 16px;
  border-bottom: 1px solid #edf2f6;
}

.viral-shell .viral-side-head strong {
  color: #101828;
  font-size: 16px;
  font-weight: 800;
}

.viral-shell .viral-side-head span {
  color: #7b8495;
  font-size: 12px;
  font-weight: 640;
  white-space: nowrap;
}

.viral-shell .viral-param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.viral-shell .viral-param-grid div {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid #edf2f6;
  border-radius: 8px;
  background: #fafcfe;
}

.viral-shell .viral-param-grid span {
  color: #7b8495;
  font-size: 12px;
  font-weight: 640;
}

.viral-shell .viral-param-grid strong {
  color: #172033;
  font-size: 15px;
  font-weight: 800;
}

.viral-shell .viral-delivery-checks {
  display: grid;
  gap: 10px;
  padding: 14px 16px 0;
}

.viral-shell .viral-delivery-checks div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid #edf2f6;
  border-radius: 8px;
  background: #fafcfe;
}

.viral-shell .viral-delivery-checks span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #667085;
  background: #e8eef5;
  font-size: 12px;
  font-weight: 760;
}

.viral-shell .viral-delivery-checks .is-done span {
  color: #15976b;
  background: #e9f8f1;
}

.viral-shell .viral-delivery-checks .is-pending span {
  color: #9b6120;
  background: #fff4de;
}

.viral-shell .viral-delivery-checks strong {
  color: #232b3d;
  font-size: 13px;
  font-weight: 720;
}

.viral-shell .viral-delivery-checks em {
  color: #7b8495;
  font-size: 12px;
  font-style: normal;
  font-weight: 560;
  white-space: nowrap;
}

.viral-shell .viral-delivery-card .task-status-card {
  margin: 0 16px;
}

.viral-shell .viral-delivery-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}

.viral-shell .viral-delivery-actions .commerce-result-download,
.viral-shell .viral-delivery-actions .commerce-copy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 760;
  white-space: nowrap;
}

.viral-shell .viral-video-side-stack .commerce-record-strip {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.viral-shell .viral-video-side-stack .commerce-record-head {
  min-height: 50px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #edf2f6;
}

.viral-shell .viral-video-side-stack .commerce-record-head strong {
  color: #101828;
  font-size: 16px;
  font-weight: 800;
}

.viral-shell .viral-video-side-stack .commerce-record-more {
  color: color-mix(in srgb, var(--brand) 90%, #4730c8);
  font-weight: 760;
}

.viral-shell .viral-video-side-stack .commerce-record-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
  overflow-y: auto;
}

.viral-shell .viral-video-side-stack .commerce-record-item {
  min-height: 88px;
  border-radius: 8px;
}

.viral-shell .viral-video-side-stack .commerce-record-item span {
  border-color: rgba(238, 242, 247, 0.72);
  background-size: cover;
  filter: saturate(1.04) contrast(1.022) brightness(1.016);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.viral-shell .viral-video-side-stack .commerce-creation-empty {
  min-height: 132px;
  margin: 14px 16px;
  border-radius: 8px;
  background: #fafcfe;
}

@media (max-width: 1320px) {
  .viral-shell .viral-console-shell {
    grid-template-columns: 360px minmax(500px, 1fr) 360px;
    gap: 16px;
  }

  .viral-shell .viral-phone-device {
    width: min(284px, 84%);
  }
}

@media (max-width: 1120px) {
  .viral-shell .viral-video-workbench {
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }

  .viral-shell .viral-console-shell {
    grid-template-areas:
      "controls stage"
      "delivery delivery";
    grid-template-columns: 360px minmax(0, 1fr);
    height: auto;
  }

  .viral-shell .viral-video-panel,
  .viral-shell .viral-video-preview-card,
  .viral-shell .viral-video-side-stack {
    height: auto;
  }

  .viral-shell .viral-video-side-stack {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.46fr);
    grid-template-rows: auto;
  }
}

@media (max-width: 760px) {
  .viral-shell .viral-video-workbench {
    min-height: 0;
    padding: 10px;
  }

  .viral-shell .viral-console-shell {
    grid-template-areas:
      "stage"
      "controls"
      "delivery";
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .viral-shell .viral-video-panel {
    grid-template-rows: auto;
    overflow: visible;
  }

  .viral-shell .viral-agent-metrics,
  .viral-shell .viral-param-grid,
  .viral-shell .viral-video-side-stack,
  .viral-shell .viral-audio-options {
    grid-template-columns: 1fr;
  }

  .viral-shell .viral-video-panel .viral-control-field,
  .viral-shell .viral-video-panel .viral-setting-row,
  .viral-shell .viral-audio-field {
    grid-template-columns: 1fr;
  }

  .viral-shell .viral-upload-strip {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .viral-shell .viral-upload-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .viral-shell .viral-video-stage-head,
  .viral-shell .viral-video-board.viral-director-board,
  .viral-shell .viral-audio-dock,
  .viral-shell .viral-video-timeline {
    padding-left: 12px;
    padding-right: 12px;
  }

  .viral-shell .viral-video-stage-head {
    align-items: flex-start;
    flex-direction: row;
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .viral-shell .viral-video-stage-head p,
  .viral-shell .viral-video-stage-head .commerce-stage-pills span:nth-child(n + 3) {
    display: none;
  }

  .viral-shell .viral-video-stage-head h2 {
    font-size: 16px;
  }

  .viral-shell .viral-video-stage-head .commerce-stage-pills {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .viral-shell .viral-phone-device {
    width: min(180px, 48vw);
  }

  .viral-shell .viral-phone-device::before {
    width: 54px;
    height: 14px;
  }

  .viral-shell .viral-phone-copy {
    left: 12px;
    right: 12px;
    bottom: 68px;
    gap: 5px;
  }

  .viral-shell .viral-phone-copy strong {
    font-size: 15px;
  }

  .viral-shell .viral-phone-copy span {
    font-size: 11px;
  }

  .viral-shell .viral-phone-audio {
    left: 10px;
    right: 10px;
    bottom: 10px;
    min-height: 38px;
    padding: 7px 8px;
  }

  .viral-shell .viral-phone-audio strong {
    font-size: 11px;
  }

  .viral-shell .viral-phone-audio span {
    font-size: 10px;
  }

  .viral-shell .viral-video-board.viral-director-board {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .viral-shell .viral-video-motion-map {
    min-height: 172px;
  }

  .viral-shell .viral-video-timeline {
    display: flex;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
  }

  .viral-shell .viral-video-timeline div {
    flex: 0 0 168px;
    min-height: 142px;
    scroll-snap-align: start;
  }

  .viral-shell .viral-video-timeline div > span {
    aspect-ratio: 16 / 9;
  }

  .viral-shell .viral-audio-dock {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "options"
      "wave"
      "status"
      "detail";
    min-height: 0;
  }

  .viral-shell .viral-delivery-actions {
    grid-template-columns: 1fr;
  }
}

/* Viral video left-panel no-overlap v86, 2026-06-16 */
.viral-shell .viral-video-workbench {
  box-sizing: border-box !important;
  height: calc(100vh - 68px) !important;
  min-height: 0 !important;
  padding: 18px 24px !important;
  overflow: hidden !important;
}

.viral-shell .viral-console-shell {
  height: 100% !important;
  min-height: 0 !important;
}

.viral-shell .viral-video-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.viral-shell .viral-panel-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.viral-shell .viral-panel-scroll > .viral-control-group {
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

.viral-shell .viral-panel-scroll > .viral-action-bar {
  border-left: 0 !important;
  border-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.viral-shell .viral-video-panel .viral-source-url-group {
  position: relative;
  z-index: 1;
  min-height: 0 !important;
  padding-bottom: 14px !important;
}

.viral-shell .viral-source-url-group .viral-control-heading {
  grid-template-columns: 28px minmax(0, 1fr) max-content !important;
}

.viral-shell .viral-source-url-group .viral-control-heading em {
  position: static !important;
  justify-self: end;
  max-width: 96px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-shell .viral-video-panel .viral-action-bar {
  position: relative !important;
  bottom: auto !important;
  z-index: 5;
  margin-top: 0 !important;
  min-height: 58px;
  padding-top: 8px !important;
  padding-bottom: 10px !important;
  box-shadow: none;
}

.viral-shell .viral-video-panel .commerce-reset-btn,
.viral-shell .viral-video-panel .commerce-suite-submit {
  min-height: 38px !important;
}

@media (max-height: 840px) and (min-width: 1121px) {
  .viral-shell .viral-video-workbench {
    padding: 14px 22px !important;
  }

  .viral-shell .viral-console-shell {
    gap: 14px !important;
  }

  .viral-shell .viral-panel-scroll > .viral-control-group {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .viral-shell .viral-script-box,
  .viral-shell .viral-script-box textarea {
    min-height: 94px !important;
    height: 94px !important;
  }

  .viral-shell .viral-video-panel .viral-action-bar {
    min-height: 56px;
  }
}

/* Viral video left-panel no-overlap final v86, 2026-06-16 */
.viral-shell .viral-video-workbench {
  box-sizing: border-box !important;
  height: calc(100vh - 68px) !important;
  min-height: 0 !important;
}

.viral-shell .viral-video-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.viral-shell .viral-panel-scroll {
  min-height: 0;
  overflow-y: auto;
}

/* Viral video empty-state narrow layout v88, 2026-06-17 */
@media (max-width: 1120px) {
  .viral-shell .viral-video-workbench {
    height: auto !important;
    min-height: calc(100vh - 68px) !important;
    overflow: visible !important;
  }

  .viral-shell .viral-console-shell {
    height: auto !important;
    overflow: visible !important;
  }

  .viral-shell .viral-video-stage,
  .viral-shell .viral-video-studio-shell,
  .viral-shell .viral-video-preview-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .viral-shell .viral-video-board.viral-director-board {
    min-height: 400px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  .viral-shell .viral-video-board.viral-director-board {
    min-height: 372px !important;
  }

  .viral-shell .viral-phone-device {
    width: min(196px, 56vw) !important;
  }
}

/* Commerce product global-tone reference lock, 2026-06-15 */
.commerce-shell .commerce-form-card.commerce-control-panel,
.commerce-shell .commerce-preview-stage,
.commerce-shell .commerce-record-strip {
  border-color: rgba(229, 233, 244, 0.96);
  background: #fff;
  box-shadow: 0 12px 34px rgba(44, 55, 89, 0.055);
}

.commerce-shell .commerce-form-card .panel-title {
  color: #101321;
  font-size: 27px;
  font-weight: 780;
  line-height: 1.08;
}

.commerce-shell .commerce-panel-head p {
  margin-top: 8px;
  color: #737b8c;
  font-size: 14px;
  font-weight: 520;
  line-height: 1.35;
}

.commerce-shell .commerce-section-title span,
.commerce-shell .commerce-suite-field > span,
.commerce-shell .commerce-module-summary span,
.commerce-shell .commerce-module-summary strong {
  color: #151a27;
  font-size: 14px;
  font-weight: 690;
}

.commerce-shell .commerce-suite-upload {
  position: relative;
  border-color: #d7deec;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.76),
    0 1px 0 rgba(15, 23, 42, 0.015);
}

.commerce-shell .commerce-upload-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.commerce-shell .commerce-upload-actions {
  z-index: 3;
}

.commerce-shell .commerce-upload-actions button {
  position: relative;
  z-index: 4;
}

.commerce-shell .commerce-upload-icon {
  width: 40px;
  height: 40px;
  background-size: 40px 36px;
  filter: contrast(0.98) brightness(1.02);
  opacity: 0.9;
}

.commerce-shell .commerce-upload-copy strong {
  color: #343b4e;
  font-size: 14px;
  font-weight: 640;
}

.commerce-shell .commerce-upload-copy span {
  color: #8b93a5;
  font-size: 13px;
  font-weight: 470;
}

.commerce-shell .commerce-upload-actions button:last-child {
  height: 34px;
  border-color: #dde4ef;
  color: #30384b;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.035);
  font-size: 13px;
  font-weight: 620;
}

.commerce-shell .commerce-suite-field input,
.commerce-shell .commerce-suite-field select,
.commerce-shell .commerce-copy-field textarea {
  border-color: #e3e8f1;
  color: #293143;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.018);
  font-weight: 540;
}

.commerce-shell .commerce-suite-field input::placeholder,
.commerce-shell .commerce-copy-field textarea::placeholder {
  color: #9aa3b4;
  font-weight: 470;
}

.commerce-shell .commerce-output-option:not(.is-suite),
.commerce-shell .commerce-module-buttons button,
.commerce-shell .commerce-platform-buttons button {
  border-color: #e5eaf2;
  color: #202738;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.012);
}

.commerce-shell .commerce-output-option strong,
.commerce-shell .commerce-module-buttons span,
.commerce-shell .commerce-platform-buttons span {
  color: #1b2233;
  font-weight: 660;
}

.commerce-shell .commerce-output-option span {
  color: #7f8798;
  font-weight: 480;
}

.commerce-shell .commerce-output-option.is-suite,
.commerce-shell .commerce-output-option.is-suite.active,
.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%);
  box-shadow: 0 11px 22px color-mix(in srgb, var(--brand) 18%, transparent);
}

.commerce-shell .commerce-region-tabs button.active {
  color: #fff;
  background: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 6%, #fff);
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 26%, #e5eaf2);
  background: color-mix(in srgb, var(--brand) 7%, #fff);
}

.commerce-shell .commerce-module-buttons button.active span {
  color: color-mix(in srgb, var(--brand) 84%, #101321);
}

.commerce-shell .commerce-module-buttons button.active b,
.commerce-shell .commerce-module-buttons button.active b i {
  background: var(--brand);
  color: #fff;
}

.commerce-shell .commerce-platform-buttons button.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}

.commerce-shell .commerce-platform-buttons button.active span {
  color: #151a27;
  font-weight: 700;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  flex-basis: 22px;
  width: 22px;
  height: 22px;
  background-size: 22px 22px;
  filter: saturate(1.05) contrast(1.03);
}

.commerce-shell .commerce-preview-browser {
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.91);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.14),
    0 2px 8px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.93);
}

.commerce-shell .commerce-browser-item span,
.commerce-shell .commerce-record-item span {
  border-color: #eef1f6;
  background-color: #f8fafc;
  filter: saturate(1.02) contrast(1.012) brightness(1.018);
}

.commerce-shell .commerce-record-item:not(.active) {
  border-color: rgba(229, 233, 244, 0.72);
  box-shadow: none;
}

.commerce-shell .commerce-record-more {
  color: var(--brand);
}

.commerce-shell .commerce-form-card .commerce-suite-submit,
.commerce-shell .primary-btn.commerce-suite-submit {
  gap: 10px;
  color: #fff;
  font-weight: 760;
  text-shadow: 0 1px 1px rgba(44, 55, 89, 0.13);
}

.commerce-shell .commerce-form-card .commerce-suite-submit::before,
.commerce-shell .primary-btn.commerce-suite-submit::before {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border-width: 1.7px;
  border-radius: 5px;
  opacity: 0.88;
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-form-card .panel-title {
    font-size: 25px;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px;
    font-size: 13px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span,
  .commerce-shell .commerce-module-summary span,
  .commerce-shell .commerce-module-summary strong {
    font-size: 13px;
  }

  .commerce-shell .commerce-suite-upload {
    min-height: 104px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 28px;
    height: 26px;
    background-size: 28px 25px;
  }

  .commerce-shell .commerce-upload-copy strong,
  .commerce-shell .commerce-upload-copy span {
    line-height: 1.2;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 15px;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    gap: 8px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit::before,
  .commerce-shell .primary-btn.commerce-suite-submit::before {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    border-width: 1.55px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-form-card .panel-title {
    font-size: 22px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 13px;
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 50%, var(--brand-2)) 54%, var(--brand-2) 100%);
  }
}

/* Commerce product upload-copy fit lock, 2026-06-15 */
@media (min-width: 761px) {
  .commerce-shell .commerce-upload-copy {
    width: min(420px, calc(100% - 120px));
    max-width: 420px;
  }

  .commerce-shell .commerce-upload-copy span {
    white-space: nowrap;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-upload-copy {
    width: min(360px, calc(100% - 112px));
  }
}

/* Commerce product narrow-browser upload clarity lock, 2026-06-15 */
@media (max-width: 760px) {
  .commerce-shell .commerce-suite-upload {
    position: relative;
    align-content: start;
    padding-top: 17px;
  }

  .commerce-shell .commerce-upload-icon {
    margin: 0 auto;
  }

  .commerce-shell .commerce-upload-copy {
    position: absolute;
    top: 50px;
    left: 12px;
    width: calc(100% - 24px);
    height: 17px;
    text-align: center;
  }

  .commerce-shell .commerce-upload-copy strong {
    display: block;
    overflow: hidden;
    color: #343b4e;
    font-size: 12px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .commerce-shell .commerce-upload-actions {
    position: absolute;
    inset: auto auto 8px 10px;
    z-index: 2;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 27px;
  }
}

/* Commerce product mobile platform readability lock, 2026-06-15 */
@media (max-width: 760px) {
  .commerce-shell .commerce-platform-section {
    margin-top: 2px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 28px;
    margin-bottom: 6px;
  }

  .commerce-shell .commerce-region-tabs button {
    font-size: 12px;
    font-weight: 710;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8) {
    height: 30px;
    min-height: 30px;
    gap: 5px;
    padding: 0 6px;
    border-radius: 8px;
    justify-content: flex-start;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
  }

  .commerce-shell .commerce-platform-buttons span {
    min-width: 0;
    font-size: 11px;
    font-weight: 690;
    line-height: 1;
    text-align: left;
  }
}

/* Commerce product left-order logic lock, 2026-06-15 */
.commerce-shell .commerce-product-info-row,
.commerce-shell .commerce-platform-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 10px;
  align-items: end;
}

.commerce-shell .commerce-platform-meta-row {
  grid-template-columns: 148px minmax(0, 1fr);
  margin-bottom: 7px;
}

.commerce-shell .commerce-selling-row {
  display: block;
}

.commerce-shell .commerce-selling-row .commerce-copy-field {
  width: 100%;
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-product-info-row {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 7px;
  }

  .commerce-shell .commerce-platform-meta-row {
    grid-template-columns: 132px minmax(0, 1fr);
    margin-bottom: 3px;
  }

  .commerce-shell .commerce-selling-row .commerce-copy-field textarea {
    height: 34px;
    min-height: 34px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px;
    min-height: 40px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-product-info-row,
  .commerce-shell .commerce-platform-meta-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .commerce-shell .commerce-platform-meta-row {
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding-top: 9px;
    padding-bottom: 10px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 5px;
  }

  .commerce-shell .commerce-panel-head p {
    display: none;
  }

  .commerce-shell .commerce-form-grid {
    gap: 4px;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 2px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 100px;
    min-height: 100px;
    padding-top: 10px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 42px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 34px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 2px 0;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 22px;
    min-height: 22px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 34px;
    min-height: 34px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 36px;
  }
}

/* Commerce product left workflow order v60 lock, 2026-06-15 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 878px;
  }

  .commerce-shell .commerce-form-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 158px;
    min-height: 158px;
  }

  .commerce-shell .commerce-name-section input {
    height: 40px;
  }

  .commerce-shell .commerce-platform-section {
    margin-top: 0;
  }

  .commerce-shell .commerce-platform-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-content: flex-start;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: auto;
    padding-top: 10px;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 100%;
  }

  .commerce-shell .commerce-form-grid {
    gap: 0;
    justify-content: space-between;
  }

  .commerce-shell .commerce-suite-upload {
    height: 116px;
    min-height: 116px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 40px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 5px 0 4px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 28px;
    min-height: 28px;
  }

  .commerce-shell .commerce-platform-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .commerce-shell .commerce-platform-buttons button {
    flex-basis: 94px;
    height: 28px;
    gap: 4px;
    padding: 0 6px;
    font-size: 11px;
  }

  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    flex-basis: 108px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 15px;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 36px;
    min-height: 36px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px;
    min-height: 40px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 96px;
    min-height: 96px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8) {
    height: 30px;
    min-height: 30px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 38px;
    min-height: 38px;
  }
}

/* Commerce product in-app narrow viewport v61 lock, 2026-06-15 */
@media (min-width: 430px) and (max-width: 760px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 10px 16px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 6px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 21px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 2px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span,
  .commerce-shell .commerce-module-summary span,
  .commerce-shell .commerce-module-summary strong {
    font-size: 12px;
    line-height: 1.08;
  }

  .commerce-shell .commerce-suite-upload {
    height: 82px;
    min-height: 82px;
    padding-top: 7px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 22px;
    height: 21px;
    background-size: 22px 20px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 34px;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 6px;
  }

  .commerce-shell .commerce-product-info-row {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 8px;
  }

  .commerce-shell .commerce-suite-field {
    gap: 3px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-platform-section {
    position: relative;
  }

  .commerce-shell .commerce-platform-section .commerce-section-title {
    min-height: 29px;
    padding-right: 140px;
  }

  .commerce-shell .commerce-platform-meta-row {
    position: absolute;
    top: 0;
    right: 0;
    width: 132px;
    margin: 0;
  }

  .commerce-shell .commerce-platform-meta-row .commerce-suite-field > span {
    display: none;
  }

  .commerce-shell .commerce-region-tabs {
    height: 24px;
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8) {
    height: 27px;
    min-height: 27px;
    gap: 3px;
    padding: 0 4px;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-size: 10px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 13px;
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 32px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 2px 0;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 21px;
    min-height: 21px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 32px;
    min-height: 32px;
    padding-top: 6px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 34px;
    min-height: 34px;
  }
}

/* Commerce product visible v60/v77 language-row cleanup, 2026-06-16 */
.commerce-shell .commerce-meta-section {
  min-width: 0;
}

.commerce-shell .commerce-meta-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commerce-shell .commerce-meta-fields .commerce-suite-field {
  min-width: 0;
  gap: 0;
}

.commerce-shell .commerce-meta-fields .commerce-suite-field > span,
.commerce-shell .commerce-meta-fields label.commerce-suite-field > span {
  display: none !important;
}

.commerce-shell .commerce-meta-fields .commerce-suite-field select,
.commerce-shell .commerce-meta-fields .commerce-suite-field select:focus {
  height: 39px;
  min-height: 39px;
  padding: 0 36px 0 14px;
}

.commerce-shell .commerce-bottom-row {
  display: block;
}

.commerce-shell .commerce-bottom-row .commerce-copy-field {
  min-width: 0;
}

.commerce-shell .commerce-submit-bar {
  margin-top: 2px;
}

.commerce-shell .commerce-form-card.commerce-control-panel {
  padding-bottom: 14px;
}

.commerce-shell .commerce-platform-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
}

.commerce-shell .commerce-platform-buttons button,
.commerce-shell .commerce-platform-buttons button:nth-child(1),
.commerce-shell .commerce-platform-buttons button:nth-child(6),
.commerce-shell .commerce-platform-buttons button:nth-child(8),
.commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
.commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
.commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
  width: 100%;
  height: 34px;
  min-height: 34px;
  gap: 8px;
  justify-content: flex-start;
  padding: 0 12px;
  overflow: visible;
  white-space: nowrap;
}

.commerce-shell .commerce-platform-buttons span {
  min-width: 0;
  overflow: visible;
  color: #222839;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  overflow: visible;
  border-radius: 5px;
  background: var(--commerce-platform-icon) center / 22px 22px no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon img,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon img {
  display: block;
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 22px;
}

.commerce-shell .commerce-preview-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 36px;
  color: #6b7486;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(124, 95, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(242, 246, 251, 0.96));
}

.commerce-shell .commerce-preview-empty i {
  display: block;
  width: 46px;
  height: 46px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 30%, #a6b0c1 0 3px, transparent 3.5px),
    linear-gradient(135deg, transparent 0 48%, #a6b0c1 49% 58%, transparent 59%) 10px 26px / 27px 12px no-repeat,
    #fff;
  box-shadow: 0 10px 22px rgba(29, 39, 61, 0.055);
}

.commerce-shell .commerce-preview-empty strong {
  color: #283246;
  font-size: 17px;
  font-weight: 820;
  line-height: 1.2;
}

.commerce-shell .commerce-preview-empty span {
  max-width: 260px;
  color: #7b8495;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.5;
}

.commerce-shell .commerce-record-strip.is-empty {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.commerce-shell .commerce-record-strip.is-empty .commerce-record-more {
  opacity: 0.42;
  pointer-events: none;
}

.commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 8px;
  border-color: #e2e8f0;
  color: #8b94a6;
  background: rgba(248, 250, 252, 0.78);
  font-weight: 700;
}

/* Commerce product main-output module gate v84, 2026-06-16 */
.commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) {
  padding-bottom: 2px;
}

.commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) + .commerce-platform-section {
  margin-top: 4px;
}

.commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) .commerce-output-choice {
  margin-bottom: 2px;
}

.commerce-shell .commerce-module-picker {
  margin-top: 0;
}

/* Commerce product suite selection state v84, 2026-06-16 */
.commerce-shell .commerce-output-option.is-suite:not(.active) {
  border-color: #e5e9f2 !important;
  color: #1f2738 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.commerce-shell .commerce-output-option.is-suite:not(.active) strong,
.commerce-shell .commerce-output-option.is-suite:not(.active) span {
  color: #1f2738 !important;
  text-shadow: none !important;
}

.commerce-shell .commerce-output-option.is-suite.active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

.commerce-shell .commerce-output-option.is-suite.active strong,
.commerce-shell .commerce-output-option.is-suite.active span {
  color: #fff !important;
}

/* Commerce product selected output gradient v85, 2026-06-16 */
.commerce-shell .commerce-output-option.active,
.commerce-shell .commerce-output-option.active:not(.is-suite),
.commerce-shell .commerce-output-option.is-suite.active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

.commerce-shell .commerce-output-option.active strong,
.commerce-shell .commerce-output-option.active span {
  color: #fff !important;
  text-shadow: 0 1px 8px color-mix(in srgb, #000 14%, transparent);
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-module-summary {
    margin: 7px 0 8px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 7px;
  }

  .commerce-shell .commerce-platform-section .commerce-section-title {
    margin-bottom: 5px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .commerce-shell .commerce-platform-buttons:not(:has(button:nth-child(5))) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 34px;
    min-height: 34px;
    gap: 5px;
    padding: 0 7px;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-size: 11.5px;
    font-weight: 720;
  }

  .commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) + .commerce-platform-section {
    margin-top: 9px;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-suite-upload {
    height: 90px;
    min-height: 90px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 6px 0 8px;
  }

  .commerce-shell .commerce-platform-section .commerce-section-title {
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 32px;
    min-height: 32px;
    gap: 5px;
    padding: 0 6px;
  }

  .commerce-shell .commerce-submit-bar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) + .commerce-platform-section {
    margin-top: 5px;
  }
}

/* Commerce product global header reset v83, 2026-06-16 */
.commerce-shell .topbar {
  height: 68px !important;
  min-height: 68px !important;
  border-bottom: 1px solid rgba(229, 233, 244, 0.95) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(18px) !important;
}

.commerce-shell .topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(1200px, calc(100% - 48px)) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.commerce-shell .brand {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
  width: auto !important;
  height: auto !important;
  min-width: 230px !important;
}

.commerce-shell .brand-mark {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
  border-radius: 14px !important;
  background: none !important;
  box-shadow: 0 12px 24px rgba(111, 91, 235, 0.22) !important;
}

.commerce-shell .brand-mark .brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
}

.commerce-shell .brand-mark::before,
.commerce-shell .brand-mark::after {
  display: none !important;
  content: none !important;
}

.commerce-shell .brand-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

.commerce-shell .brand-name {
  color: #101321 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
}

.commerce-shell .brand-sub {
  display: inline !important;
  color: #9096a6 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.commerce-shell .nav {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  order: initial !important;
  gap: 2px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px !important;
  overflow: visible !important;
  border: 1px solid rgba(232, 236, 247, 0.92) !important;
  border-radius: 16px !important;
  background: #f7f8fc !important;
}

.commerce-shell .nav > .nav-link[href="#/pages/api-center"] {
  display: inline-flex !important;
}

.commerce-shell .nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 15px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #242838 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.commerce-shell .nav-link.active,
.commerce-shell .nav-link:hover {
  border-color: rgba(119, 102, 244, 0.16) !important;
  background: #fff !important;
  color: #6857ed !important;
  box-shadow: 0 10px 24px rgba(82, 92, 132, 0.1) !important;
}

.commerce-shell .nav-link.active::after {
  content: none !important;
  display: none !important;
}

.commerce-shell .chevron {
  display: inline-block !important;
}

.commerce-shell .actions {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  gap: 14px !important;
  width: auto !important;
  min-width: 112px !important;
  margin-left: 0 !important;
  text-align: right !important;
}

.commerce-shell .login-btn {
  width: auto !important;
  height: 40px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #6b7df5, #9e6cff) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    height: calc(100vh - 68px) !important;
    min-height: 0 !important;
    padding-top: 24px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 1050px) {
  .commerce-shell .topbar {
    height: 68px !important;
    min-height: 68px !important;
  }

  .commerce-shell .topbar-inner {
    width: calc(100% - 28px) !important;
  }

  .commerce-shell .brand {
    min-width: 0 !important;
  }

  .commerce-shell .brand-sub {
    display: none !important;
  }

  .commerce-shell .nav {
    gap: 1px !important;
    padding: 3px !important;
  }

  .commerce-shell .nav-link {
    padding: 0 11px !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .topbar {
    height: 118px !important;
    min-height: 118px !important;
  }

  .commerce-shell .topbar-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: calc(100% - 28px) !important;
    height: 100% !important;
    padding: 12px 0 !important;
  }

  .commerce-shell .nav {
    order: 3 !important;
    justify-content: flex-start !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 14px !important;
    scrollbar-width: none !important;
  }

  .commerce-shell .nav::-webkit-scrollbar {
    display: none !important;
  }

  .commerce-shell .nav-link {
    flex: 0 0 auto !important;
  }

  .commerce-shell .actions {
    min-width: 0 !important;
  }
}

/* Commerce product actual tail short-browser breathing lock v89, 2026-06-17 */
@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    height: calc(100vh - 68px) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 118px !important;
    gap: 10px !important;
    height: calc(100vh - 84px) !important;
    min-height: 0 !important;
    transform: translateY(-8px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 118px !important;
    min-height: 118px !important;
    padding: 10px 16px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 64px !important;
    padding: 16px 18px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    height: 90px !important;
    min-height: 90px !important;
    padding: 6px 16px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
  }

  .commerce-shell .commerce-submit-bar {
    padding-top: 2px !important;
    transform: translateY(-8px) !important;
  }
}

/* Commerce product true final short-browser breathing lock v89, 2026-06-17 */
@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    height: calc(100vh - 68px) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 108px !important;
    gap: 10px !important;
    height: calc(100vh - 84px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 108px !important;
    min-height: 108px !important;
    padding: 10px 16px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    height: 90px !important;
    min-height: 90px !important;
    padding: 6px 16px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
  }

  .commerce-shell .commerce-submit-bar {
    padding-top: 2px !important;
    transform: translateY(-8px) !important;
  }
}

/* Commerce product short-browser breathing final lock v89, 2026-06-17 */
@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-preview-column {
    height: calc(100vh - 84px) !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    height: 90px !important;
    min-height: 90px !important;
    padding: 6px 16px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
  }

  .commerce-shell .commerce-submit-bar {
    padding-top: 2px !important;
    transform: translateY(-8px) !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 108px !important;
    gap: 10px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 108px !important;
    min-height: 108px !important;
    padding: 10px 16px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 7px !important;
  }
}

/* Commerce product upload and generation-state final lock v89, 2026-06-17 */
.commerce-shell .commerce-suite-upload {
  isolation: isolate !important;
}

.commerce-shell .commerce-upload-input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.commerce-shell .commerce-upload-actions,
.commerce-shell .commerce-upload-actions button,
.commerce-shell .commerce-upload-copy,
.commerce-shell .commerce-upload-icon,
.commerce-shell .commerce-upload-main-thumb,
.commerce-shell .commerce-upload-thumbs {
  position: relative !important;
  z-index: 3 !important;
}

.commerce-shell .commerce-upload-actions button {
  pointer-events: auto !important;
}

.commerce-shell .commerce-suite-upload.has-upload {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "thumb copy copy"
    "thumb actions thumbs" !important;
  align-items: center !important;
  justify-items: stretch !important;
  align-content: center !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
  padding: 14px 16px !important;
  border-style: solid !important;
  border-color: #dfe6f3 !important;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  cursor: default !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-icon {
  display: none !important;
}

.commerce-shell .commerce-upload-main-thumb {
  display: none;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-main-thumb {
  display: block !important;
  grid-area: thumb !important;
  width: 82px !important;
  height: 82px !important;
  overflow: hidden !important;
  border: 1px solid #e5ebf3 !important;
  border-radius: 8px !important;
  background: #f7f9fc !important;
  box-shadow: 0 8px 20px rgba(30, 42, 72, 0.055) !important;
}

.commerce-shell .commerce-upload-main-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-copy {
  grid-area: copy !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  gap: 5px !important;
  text-align: left !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-copy strong,
.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-copy span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-copy strong {
  color: #172033 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-copy span {
  color: #7b8495 !important;
  font-size: 12px !important;
  font-weight: 540 !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-actions {
  grid-area: actions !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 76px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 8px !important;
  color: #30384b !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-actions button:first-child {
  border-color: color-mix(in srgb, var(--brand) 18%, #e1e7f0) !important;
  color: color-mix(in srgb, var(--brand) 84%, #101321) !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-thumbs {
  grid-area: thumbs !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.commerce-shell .commerce-suite-upload.has-upload .commerce-upload-thumbs span {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

.commerce-shell .commerce-preview-empty.is-pending {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 30%),
    linear-gradient(180deg, #fbfcff 0%, #f4f7fb 100%) !important;
}

.commerce-shell .commerce-preview-empty.is-pending i {
  border-radius: 50% !important;
  border-color: color-mix(in srgb, var(--brand) 28%, #dbe3ee) !important;
  background:
    conic-gradient(from 120deg, color-mix(in srgb, var(--brand) 70%, #fff), var(--brand-2), color-mix(in srgb, var(--brand) 22%, #fff)),
    #fff !important;
  animation: commerce-pending-spin 1.2s linear infinite;
}

.commerce-shell .commerce-preview-empty.is-failed i {
  border-color: #f0c9c9 !important;
  background: #fff6f6 !important;
}

.commerce-shell .commerce-preview-progress {
  width: min(240px, 72%) !important;
  height: 5px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e8edf5 !important;
}

.commerce-shell .commerce-preview-progress span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
}

.commerce-shell .commerce-visual-preview > .task-status-card {
  width: min(520px, 100%) !important;
  margin: 12px auto 0 !important;
}

.commerce-shell .commerce-record-strip.is-pending,
.commerce-shell .commerce-record-strip.is-fresh {
  border-color: #e7edf6 !important;
  background: #fff !important;
}

.commerce-shell .commerce-record-strip.is-pending .commerce-record-more,
.commerce-shell .commerce-record-strip.is-fresh .commerce-record-more,
.commerce-shell .commerce-record-more:disabled {
  opacity: 0.36 !important;
  pointer-events: none !important;
}

.commerce-shell .commerce-record-strip.is-pending .commerce-creation-empty,
.commerce-shell .commerce-record-strip.is-fresh .commerce-creation-empty {
  color: #727c8f !important;
  background: linear-gradient(180deg, #fbfcff, #f8fafc) !important;
}

@keyframes commerce-pending-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    min-height: 96px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-main-thumb {
    width: 64px !important;
    height: 64px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-actions button {
    height: 27px !important;
    min-width: 68px !important;
    padding: 0 9px !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb copy"
      "thumb actions" !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    min-height: 96px !important;
    padding: 10px 12px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-main-thumb {
    width: 58px !important;
    height: 58px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-actions {
    gap: 6px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-actions button {
    height: 26px !important;
    min-width: 62px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-thumbs {
    display: none !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    align-content: start !important;
    min-height: 112px !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) .commerce-upload-icon {
    margin: 0 auto !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) .commerce-upload-copy {
    position: absolute !important;
    top: 52px !important;
    left: 12px !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    text-align: center !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) .commerce-upload-copy strong,
  .commerce-shell .commerce-suite-upload:not(.has-upload) .commerce-upload-copy span {
    display: block !important;
    overflow: hidden !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) .commerce-upload-actions {
    position: absolute !important;
    inset: auto auto 10px 12px !important;
    display: flex !important;
    gap: 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) .commerce-upload-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px !important;
    height: 26px !important;
    padding: 0 8px !important;
    border: 1px solid #e1e7f0 !important;
    border-radius: 8px !important;
    color: #30384b !important;
    background: #fff !important;
    font-size: 11px !important;
    font-weight: 680 !important;
  }
}

/* Commerce product reference-left workspace v70 lock, 2026-06-15 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px minmax(0, 1fr);
    gap: 24px;
    width: min(1526px, calc(100% - 62px));
    padding: 26px 0 22px;
    align-items: start;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    display: flex;
    flex-direction: column;
    height: 878px;
    padding: 18px 19px 20px;
    overflow: hidden;
  }

  .commerce-shell .commerce-panel-head {
    flex: 0 0 auto;
    margin: 0 0 16px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 26px;
    line-height: 1.15;
  }

  .commerce-shell .commerce-panel-head p {
    display: block;
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.35;
  }

  .commerce-shell .commerce-form-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 11px;
    min-height: 0;
  }

  .commerce-shell .commerce-section-title {
    margin: 0 0 8px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span,
  .commerce-shell .commerce-module-summary span,
  .commerce-shell .commerce-module-summary strong {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 740;
  }

  .commerce-shell .commerce-upload-field {
    flex: 0 0 auto;
  }

  .commerce-shell .commerce-suite-upload {
    height: 174px;
    min-height: 174px;
    padding: 26px 18px 14px;
  }

  .commerce-shell .commerce-upload-icon {
    top: 18px;
    width: 42px;
    height: 42px;
    background-size: 42px 38px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 64px;
    width: min(420px, calc(100% - 120px));
    max-width: 420px;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 16px;
    left: 14px;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 35px;
    min-width: 130px;
  }

  .commerce-shell .commerce-product-info-row,
  .commerce-shell .commerce-platform-meta-row {
    display: contents;
  }

  .commerce-shell .commerce-name-section,
  .commerce-shell .commerce-output-section,
  .commerce-shell .commerce-platform-section,
  .commerce-shell .commerce-selling-row,
  .commerce-shell .commerce-submit-bar {
    flex: 0 0 auto;
  }

  .commerce-shell .commerce-product-name-field {
    gap: 0;
  }

  .commerce-shell .commerce-suite-field {
    gap: 7px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 40px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 14px;
  }

  .commerce-shell .commerce-output-choice {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.58fr;
    column-gap: 0;
    row-gap: 0;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 50px;
    border-radius: 0;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):first-child {
    border-radius: 8px 0 0 8px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(2),
  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    margin-left: -1px;
  }

  .commerce-shell .commerce-output-option:not(.is-suite):nth-child(3) {
    border-radius: 0 8px 8px 0;
  }

  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    margin-left: 8px;
    border-radius: 8px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 15px;
  }

  .commerce-shell .commerce-output-option.is-suite span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
  }

  .commerce-shell .commerce-module-summary {
    min-height: 18px;
    margin: 8px 0 7px;
  }

  .commerce-shell .commerce-module-buttons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 33px;
    min-height: 33px;
    gap: 6px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-region-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 250px;
    height: 33px;
    margin: 0 0 8px;
    border-radius: 8px;
  }

  .commerce-shell .commerce-platform-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    width: 100%;
    height: 34px;
    min-height: 34px;
    flex: initial;
    gap: 7px;
    padding: 0 10px;
    justify-content: flex-start;
    border-radius: 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    background-size: 21px 21px;
  }

  .commerce-shell .commerce-meta-section {
    flex: 0 0 auto;
    min-width: 0;
  }

  .commerce-shell .commerce-meta-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field {
    position: relative;
    gap: 0;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field > span {
    position: absolute;
    top: 9px;
    left: 14px;
    z-index: 1;
    color: #8d98ad;
    font-size: 16px;
    line-height: 1;
    font-weight: 760;
    pointer-events: none;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 72px;
    padding: 30px 42px 9px 14px;
    border-color: #dfe5f0;
    border-radius: 12px;
    color: #1f2937;
    background-color: #fff;
    font-size: 20px;
    font-weight: 820;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field:focus-within select {
    border-color: color-mix(in srgb, var(--brand) 58%, #dfe3f1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
  }

  .commerce-shell .commerce-copy-field {
    position: relative;
    min-width: 0;
  }

  .commerce-shell .commerce-selling-row {
    display: block;
  }

  .commerce-shell .commerce-selling-row .commerce-copy-field {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
  }

  .commerce-shell .commerce-selling-row .commerce-copy-field > span {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.2;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 40px;
    min-height: 40px;
    padding: 10px 12px 19px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.22;
  }

  .commerce-shell .commerce-copy-field > b {
    right: 10px;
    bottom: 7px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: 14px;
    transform: translateY(-8px);
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px;
    min-height: 48px;
    border-radius: 8px;
    font-size: 17px;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 580px minmax(0, 1fr);
    gap: 18px;
    width: min(1468px, calc(100% - 48px));
    height: calc(100vh - 58px);
    padding: 12px 0;
    overflow: hidden;
    align-items: stretch;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 100%;
    padding: 12px 16px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 6px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.23;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span,
  .commerce-shell .commerce-module-summary span,
  .commerce-shell .commerce-module-summary strong {
    font-size: 13px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 104px;
    min-height: 104px;
    padding: 9px 16px 10px;
  }

  .commerce-shell .commerce-upload-icon {
    width: 28px;
    height: 26px;
    background-size: 28px 25px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 42px;
    width: min(360px, calc(100% - 112px));
  }

  .commerce-shell .commerce-upload-copy strong,
  .commerce-shell .commerce-upload-copy span {
    line-height: 1.2;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 10px;
    left: 10px;
  }

  .commerce-shell .commerce-upload-actions button:last-child {
    height: 27px;
    min-width: 124px;
  }

  .commerce-shell .commerce-suite-field {
    gap: 4px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 31px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-output-choice {
    grid-template-columns: 1fr 1fr 1fr 1.42fr;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 40px;
    padding: 0 7px;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 13px;
  }

  .commerce-shell .commerce-output-option.is-suite span {
    display: none;
  }

  .commerce-shell .commerce-module-summary {
    min-height: 14px;
    margin: 4px 0 3px;
    font-size: 12px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 24px;
    min-height: 24px;
    gap: 3px;
    padding: 0 5px;
    font-size: 11px;
  }

  .commerce-shell .commerce-region-tabs {
    width: 226px;
    height: 27px;
    margin-bottom: 4px;
    border-radius: 7px;
  }

  .commerce-shell .commerce-region-tabs button {
    font-size: 12px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 26px;
    min-height: 26px;
    gap: 4px;
    padding: 0 6px;
    font-size: 11px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
  }

  .commerce-shell .commerce-meta-fields {
    gap: 7px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field > span {
    top: 6px;
    left: 10px;
    font-size: 12px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 42px;
    padding: 16px 28px 4px 10px;
    border-radius: 8px;
    font-size: 13px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 32px;
    min-height: 32px;
    padding: 7px 10px 15px;
    border-radius: 7px;
    font-size: 12px;
  }

  .commerce-shell .commerce-copy-field > b {
    right: 9px;
    bottom: 4px;
    font-size: 11px;
  }

  .commerce-shell .commerce-submit-bar {
    padding-top: 0;
    padding-bottom: 8px;
    transform: translateY(-18px);
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px;
    min-height: 40px;
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-meta-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field {
    gap: 3px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 32px;
    min-height: 32px;
    padding-top: 6px;
  }
}

/* Commerce product language-category under-name narrow v70 lock, 2026-06-15 */
@media (min-width: 430px) and (max-width: 760px) {
  .commerce-shell .commerce-meta-section {
    min-width: 0;
  }

  .commerce-shell .commerce-meta-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field {
    position: relative;
    gap: 0;
    min-width: 0;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field > span {
    position: absolute;
    top: 9px;
    left: 13px;
    z-index: 1;
    color: #8d98ad;
    font-size: 13px;
    line-height: 1;
    font-weight: 740;
    pointer-events: none;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    width: 100%;
    height: 64px;
    min-height: 64px;
    padding: 27px 34px 8px 13px;
    border-color: #dfe5f0;
    border-radius: 11px;
    color: #1f2937;
    background-color: #fff;
    font-size: 17px;
    font-weight: 820;
    line-height: 1.1;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field:focus-within select {
    border-color: color-mix(in srgb, var(--brand) 58%, #dfe3f1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
  }
}

@media (max-width: 429px) {
  .commerce-shell .commerce-meta-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field {
    position: relative;
    gap: 0;
    min-width: 0;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field > span {
    position: absolute;
    top: 8px;
    left: 11px;
    z-index: 1;
    color: #8d98ad;
    font-size: 12px;
    line-height: 1;
    font-weight: 740;
    pointer-events: none;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    width: 100%;
    height: 58px;
    min-height: 58px;
    padding: 24px 30px 7px 11px;
    border-color: #dfe5f0;
    border-radius: 10px;
    color: #1f2937;
    background-color: #fff;
    font-size: 15px;
    font-weight: 820;
    line-height: 1.1;
  }
}

/* Commerce product anti-crowding rhythm v70 lock, 2026-06-15 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 878px;
    overflow: hidden;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 12px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 9px;
    justify-content: flex-start;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 5px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 142px;
    min-height: 142px;
    padding: 18px 18px 12px;
  }

  .commerce-shell .commerce-upload-icon {
    top: 15px;
    width: 36px;
    height: 34px;
    background-size: 36px 32px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 54px;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 12px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 38px;
  }

  .commerce-shell .commerce-meta-fields {
    gap: 12px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field > span {
    top: 8px;
    font-size: 14px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 58px;
    min-height: 58px;
    padding: 24px 38px 7px 14px;
    font-size: 17px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 43px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 6px 0 5px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 7px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 31px;
    min-height: 31px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 30px;
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 7px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 31px;
    min-height: 31px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 48px;
    min-height: 48px;
    padding: 11px 12px 18px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-4px);
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 46px;
    min-height: 46px;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 100%;
    padding: 12px 16px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 6px;
    justify-content: flex-start;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 3px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 94px;
    min-height: 94px;
    padding: 8px 16px 9px;
  }

  .commerce-shell .commerce-upload-icon {
    top: 11px;
    width: 25px;
    height: 24px;
    background-size: 25px 23px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 38px;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 8px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 31px;
  }

  .commerce-shell .commerce-meta-fields {
    gap: 8px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field > span {
    top: 6px;
    font-size: 12px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 44px;
    min-height: 44px;
    padding: 17px 30px 5px 10px;
    font-size: 13px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 36px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 3px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 24px;
    min-height: 24px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 25px;
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 27px;
    min-height: 27px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 40px;
    min-height: 40px;
    padding: 8px 10px 15px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px;
    padding-top: 0;
    padding-bottom: 0;
    transform: none;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px;
    min-height: 40px;
  }
}

@media (min-width: 430px) and (max-width: 760px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto;
    overflow: visible;
    padding: 14px 16px 16px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 10px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 10px;
    justify-content: flex-start;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 5px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 96px;
    min-height: 96px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 56px;
    min-height: 56px;
    padding: 23px 32px 7px 12px;
    font-size: 15px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 38px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 48px;
    min-height: 48px;
    padding-top: 10px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px;
    padding-top: 0;
    padding-bottom: 0;
    transform: none;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 44px;
    min-height: 44px;
  }
}

/* Commerce product desktop balanced rhythm v71 lock, 2026-06-16 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-grid {
    gap: 12px;
    justify-content: space-between;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0;
    padding-top: 4px;
    padding-bottom: 0;
    transform: none;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-panel-head {
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 7px;
    justify-content: space-between;
  }

  .commerce-shell .commerce-suite-upload {
    height: 90px;
    min-height: 90px;
    padding: 7px 16px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 30px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 40px;
    min-height: 40px;
    padding: 15px 30px 4px 10px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 36px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 24px;
    min-height: 24px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 26px;
    min-height: 26px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 36px;
    min-height: 36px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px;
    min-height: 40px;
  }
}

/* Commerce product premium polish v72 lock, 2026-06-16 */
.commerce-shell .commerce-form-card.commerce-control-panel,
.commerce-shell .commerce-preview-stage,
.commerce-shell .commerce-record-strip {
  border-color: #e7edf6;
  box-shadow:
    0 18px 44px rgba(39, 49, 78, 0.055),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.commerce-shell .commerce-form-card.commerce-control-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff 42%),
    #fff;
}

.commerce-shell .commerce-section-title span,
.commerce-shell .commerce-suite-field > span,
.commerce-shell .commerce-module-summary span {
  letter-spacing: 0;
}

.commerce-shell .commerce-meta-fields .commerce-suite-field > span {
  display: none;
}

.commerce-shell .commerce-meta-fields .commerce-suite-field select,
.commerce-shell .commerce-meta-fields .commerce-suite-field select:focus {
  height: 44px;
  min-height: 44px;
  padding: 0 40px 0 14px;
  border-color: #dfe6f1;
  border-radius: 10px;
  color: #172033;
  background-color: #fff;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.1;
}

.commerce-shell .commerce-meta-fields .commerce-suite-field:focus-within select {
  border-color: color-mix(in srgb, var(--brand) 42%, #dfe6f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent);
}

.commerce-shell .commerce-output-option:not(.is-suite),
.commerce-shell .commerce-module-buttons button,
.commerce-shell .commerce-platform-buttons button {
  border-color: #e4eaf3;
  background: linear-gradient(180deg, #fff, #fbfcff);
}

.commerce-shell .commerce-module-buttons button {
  border-radius: 999px;
}

.commerce-shell .commerce-module-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 30%, #e3e8f4);
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent);
}

.commerce-shell .commerce-platform-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.commerce-shell .commerce-platform-buttons button,
.commerce-shell .commerce-platform-buttons button:nth-child(1),
.commerce-shell .commerce-platform-buttons button:nth-child(6),
.commerce-shell .commerce-platform-buttons button:nth-child(8),
.commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
.commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
.commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
  justify-content: flex-start;
  height: 42px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  gap: 10px;
}

.commerce-shell .commerce-platform-buttons button.active {
  border-color: color-mix(in srgb, var(--brand) 70%, #dfe6f1);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, #fff), #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand) 13%, transparent),
    0 8px 18px color-mix(in srgb, var(--brand) 10%, transparent);
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--commerce-platform-icon) center / 22px 22px no-repeat;
  box-shadow: none;
  filter: saturate(1.02) contrast(1.01);
}

.commerce-shell .commerce-platform-buttons span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.commerce-shell .commerce-preview-browser {
  left: auto;
  right: 16px;
  bottom: 16px;
  width: min(446px, calc(100% - 40px));
  min-height: 116px;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  gap: 8px;
  padding: 12px 8px 10px;
  border-color: rgba(255, 255, 255, 0.78);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 14px 28px rgba(25, 34, 55, 0.11),
    0 2px 7px rgba(25, 34, 55, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.commerce-shell .commerce-browser-list {
  gap: 9px;
}

.commerce-shell .commerce-browser-arrow {
  width: 24px;
  height: 50px;
}

.commerce-shell .commerce-browser-arrow span {
  width: 19px;
  height: 19px;
}

.commerce-shell .commerce-browser-item {
  gap: 6px;
}

.commerce-shell .commerce-browser-item span {
  width: 66px;
  height: 66px;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 7px 16px rgba(45, 56, 82, 0.065);
}

.commerce-shell .commerce-browser-item.active span {
  border-color: color-mix(in srgb, var(--brand) 72%, #fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent),
    0 7px 16px rgba(45, 56, 82, 0.065);
}

.commerce-shell .commerce-browser-item strong {
  font-size: 12px;
  font-weight: 680;
}

@media (min-width: 1201px) {
  .commerce-shell .commerce-panel-head {
    margin-bottom: 10px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 10px;
  }

  .commerce-shell .commerce-meta-fields {
    gap: 10px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 128px;
    min-height: 128px;
    padding: 15px 18px 12px;
  }

  .commerce-shell .commerce-upload-icon {
    top: 12px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 49px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 40px;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-form-grid {
    gap: 6px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 90px;
    min-height: 90px;
    padding: 7px 16px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 34px;
    min-height: 34px;
    padding: 0 32px 0 10px;
    font-size: 14px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px 7px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 28px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 9px;
    gap: 7px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
  }

  .commerce-shell .commerce-preview-browser {
    width: min(404px, calc(100% - 36px));
    min-height: 100px;
    padding: 10px 7px 8px;
  }

  .commerce-shell .commerce-browser-item span {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-meta-fields .commerce-suite-field > span {
    display: none;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select {
    height: 42px;
    min-height: 42px;
    padding: 0 32px 0 11px;
    font-size: 15px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }

  .commerce-shell .commerce-preview-browser {
    width: 100%;
    min-height: 0;
  }
}

/* Commerce product decongested review v73 lock, 2026-06-16 */
@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 600px minmax(0, 1fr);
    gap: 30px;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 878px;
    padding: 18px 24px 20px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 11px;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 25px;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px;
    font-size: 14px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 9px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 116px;
    min-height: 116px;
    padding: 14px 18px 11px;
  }

  .commerce-shell .commerce-upload-icon {
    top: 10px;
    width: 32px;
    height: 30px;
    background-size: 32px 29px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 43px;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 11px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select,
  .commerce-shell .commerce-meta-fields .commerce-suite-field select:focus {
    height: 40px;
    min-height: 40px;
    font-size: 15px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 38px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 4px 0 5px;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 28px;
    min-height: 28px;
  }

  .commerce-shell .commerce-region-tabs {
    width: 100%;
    height: 29px;
    margin-bottom: 7px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    justify-content: center;
    height: 34px;
    min-height: 34px;
    padding: 0 7px;
    border-radius: 10px;
    gap: 6px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
  }

  .commerce-shell .commerce-platform-buttons span {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 42px;
    min-height: 42px;
    padding: 10px 12px 16px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 44px;
    min-height: 44px;
  }

  .commerce-shell .commerce-preview-stage {
    height: 682px;
    padding: 24px 28px 25px;
  }

  .commerce-shell .commerce-artboard-surface {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
  }

  .commerce-shell .commerce-main-art {
    aspect-ratio: auto;
    height: 514px;
  }

  .commerce-shell .commerce-preview-browser {
    position: static;
    width: 100%;
    min-height: 96px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(28, 38, 63, 0.055);
    backdrop-filter: none;
  }

  .commerce-shell .commerce-browser-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .commerce-shell .commerce-browser-item {
    gap: 6px;
  }

  .commerce-shell .commerce-browser-item span {
    width: 62px;
    height: 62px;
  }

  .commerce-shell .commerce-browser-arrow {
    height: 56px;
  }

  .commerce-shell .commerce-record-strip {
    padding: 17px 20px 19px;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 12px 18px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 6px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 86px;
    min-height: 86px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select,
  .commerce-shell .commerce-meta-fields .commerce-suite-field select:focus {
    height: 32px;
    min-height: 32px;
    font-size: 13px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 23px;
    min-height: 23px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 24px;
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 27px;
    min-height: 27px;
    padding: 0 5px;
    gap: 4px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
    background-size: 17px 17px;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-size: 11px;
  }

  .commerce-shell .commerce-copy-field textarea {
    height: 34px;
    min-height: 34px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 38px;
    min-height: 38px;
  }

  .commerce-shell .commerce-preview-stage {
    padding: 18px 20px 18px;
  }

  .commerce-shell .commerce-main-art {
    height: 430px;
  }

  .commerce-shell .commerce-preview-browser {
    min-height: 84px;
    padding: 8px 10px;
  }

  .commerce-shell .commerce-browser-item span {
    width: 50px;
    height: 50px;
  }
}

/* Commerce product no-overlap browser strip v74 lock, 2026-06-16 */
.commerce-shell .commerce-main-art > .commerce-preview-browser {
  display: none !important;
}

.commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
  display: grid;
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    position: static;
    width: 100%;
    min-height: 96px;
    margin: 0;
  }
}

/* Commerce product real Safari cleanup v76, 2026-06-16 */
@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px minmax(0, 1fr);
    gap: 24px;
    width: min(1526px, calc(100% - 62px));
    height: calc(100vh - 66px);
    min-height: 0;
    padding: 26px 0 22px;
    align-items: start;
    box-sizing: border-box;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: 878px;
    padding: 18px 19px 20px;
    overflow: hidden;
  }

  .commerce-shell .commerce-panel-head {
    margin: 0 0 16px;
  }

  .commerce-shell .commerce-form-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-start;
    min-height: 0;
  }

  .commerce-shell .commerce-section-title {
    margin: 0 0 8px;
  }

  .commerce-shell .commerce-suite-upload {
    width: 100%;
    height: 174px;
    min-height: 174px;
    padding: 24px 18px 14px;
  }

  .commerce-shell .commerce-upload-icon {
    top: 24px;
    width: 42px;
    height: 42px;
    background-size: 42px 38px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 74px;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 18px;
  }

  .commerce-shell .commerce-name-section,
  .commerce-shell .commerce-meta-section,
  .commerce-shell .commerce-output-section,
  .commerce-shell .commerce-platform-section,
  .commerce-shell .commerce-bottom-row,
  .commerce-shell .commerce-submit-bar {
    flex: 0 0 auto;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 39px;
    border-radius: 8px;
  }

  .commerce-shell .commerce-output-choice {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.58fr;
    gap: 8px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 54px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 9px 0 8px;
  }

  .commerce-shell .commerce-module-buttons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 34px;
    min-height: 34px;
  }

  .commerce-shell .commerce-region-tabs {
    width: 255px;
    height: 33px;
    margin: 0 0 10px;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    justify-content: center;
    height: 38px;
    min-height: 38px;
    padding: 0 9px;
    border-radius: 8px;
    gap: 8px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--commerce-platform-icon) center / contain no-repeat;
    box-shadow: none;
  }

  .commerce-shell .commerce-bottom-row {
    display: block;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field {
    min-width: 0;
  }

  .commerce-shell .commerce-meta-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field > span,
  .commerce-shell .commerce-meta-fields label.commerce-suite-field > span {
    display: none !important;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select,
  .commerce-shell .commerce-meta-fields .commerce-suite-field select:focus {
    height: 39px;
    min-height: 39px;
    padding: 0 34px 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 640;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field > span {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 48px;
    min-height: 48px;
    padding: 10px 12px 18px;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px;
    padding-top: 0;
    padding-bottom: 0;
    transform: none;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px;
    min-height: 48px;
  }

  .commerce-shell .commerce-preview-column {
    display: grid;
    grid-template-rows: 682px 174px;
    gap: 20px;
    min-width: 0;
  }

  .commerce-shell .commerce-preview-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    width: 100%;
    height: 682px;
    min-height: 682px;
    margin: 0;
    padding: 23px 20px 18px;
    overflow: hidden;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 23px;
  }

  .commerce-shell .commerce-visual-preview,
  .commerce-shell .commerce-artboard,
  .commerce-shell .commerce-artboard-surface {
    width: 100%;
    min-height: 0;
  }

  .commerce-shell .commerce-artboard-surface {
    display: block;
  }

  .commerce-shell .commerce-main-art {
    width: 100%;
    height: auto;
    aspect-ratio: 852 / 600;
    border-radius: 8px;
  }

  .commerce-shell .commerce-main-art img {
    object-fit: cover;
    object-position: center;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    display: none;
  }

  .commerce-shell .commerce-record-strip {
    height: 174px;
    min-height: 174px;
    padding: 17px 20px 19px;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 590px minmax(0, 1fr);
    gap: 22px;
    width: min(1488px, calc(100% - 48px));
    padding: 14px 0;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: calc(100vh - 86px);
    min-height: 0;
    padding: 12px 18px;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px;
  }

  .commerce-shell .commerce-form-grid {
    gap: 7px;
  }

  .commerce-shell .commerce-suite-upload {
    height: 96px;
    min-height: 96px;
    padding: 8px 16px;
  }

  .commerce-shell .commerce-upload-icon {
    top: 10px;
    width: 26px;
    height: 25px;
    background-size: 26px 24px;
  }

  .commerce-shell .commerce-upload-copy {
    top: 39px;
  }

  .commerce-shell .commerce-upload-actions {
    bottom: 8px;
  }

  .commerce-shell .commerce-suite-field input,
  .commerce-shell .commerce-suite-field select {
    height: 31px;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    min-height: 36px;
  }

  .commerce-shell .commerce-module-summary {
    margin: 4px 0 3px;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 24px;
    min-height: 24px;
  }

  .commerce-shell .commerce-region-tabs {
    height: 25px;
    margin-bottom: 4px;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 27px;
    min-height: 27px;
    gap: 4px;
    padding: 0 5px;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-size: 11px;
  }

  .commerce-shell .commerce-bottom-row {
    display: block;
  }

  .commerce-shell .commerce-meta-fields .commerce-suite-field select,
  .commerce-shell .commerce-meta-fields .commerce-suite-field select:focus,
  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 34px;
    min-height: 34px;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px;
    min-height: 40px;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 118px;
    gap: 12px;
    height: calc(100vh - 86px);
    min-height: 0;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto;
    min-height: 0;
    padding: 18px 20px;
  }

  .commerce-shell .commerce-record-strip {
    height: 118px;
    min-height: 118px;
    padding: 12px 18px;
  }
}

/* Commerce product main-output module gate final v84, 2026-06-16 */
.commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) {
  padding-bottom: 2px;
}

.commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) + .commerce-platform-section {
  margin-top: 4px;
}

.commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) .commerce-output-choice {
  margin-bottom: 2px;
}

.commerce-shell .commerce-module-picker {
  margin-top: 0;
}

/* Commerce product suite selection state final v84, 2026-06-16 */
.commerce-shell .commerce-output-option.is-suite:not(.active) {
  border-color: #e5e9f2 !important;
  color: #1f2738 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.commerce-shell .commerce-output-option.is-suite:not(.active) strong,
.commerce-shell .commerce-output-option.is-suite:not(.active) span {
  color: #1f2738 !important;
  text-shadow: none !important;
}

.commerce-shell .commerce-output-option.is-suite.active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

.commerce-shell .commerce-output-option.is-suite.active strong,
.commerce-shell .commerce-output-option.is-suite.active span {
  color: #fff !important;
}

/* Commerce product selected output gradient final v85, 2026-06-16 */
.commerce-shell .commerce-output-option.active,
.commerce-shell .commerce-output-option.active:not(.is-suite),
.commerce-shell .commerce-output-option.is-suite.active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 52%, var(--brand-2) 100%) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

.commerce-shell .commerce-output-option.active strong,
.commerce-shell .commerce-output-option.active span {
  color: #fff !important;
  text-shadow: 0 1px 8px color-mix(in srgb, #000 14%, transparent);
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) + .commerce-platform-section {
    margin-top: 9px;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-output-section:not(:has(.commerce-module-picker)) + .commerce-platform-section {
    margin-top: 5px;
  }
}

/* Commerce product global header final reset v83, 2026-06-16 */
.commerce-shell .topbar {
  height: 68px !important;
  min-height: 68px !important;
  border-bottom: 1px solid rgba(229, 233, 244, 0.95) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(18px) !important;
}

.commerce-shell .topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(1200px, calc(100% - 48px)) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.commerce-shell .brand {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
  width: auto !important;
  height: auto !important;
  min-width: 230px !important;
}

.commerce-shell .brand-mark {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
  border-radius: 14px !important;
  background: none !important;
  box-shadow: 0 12px 24px rgba(111, 91, 235, 0.22) !important;
}

.commerce-shell .brand-mark .brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
}

.commerce-shell .brand-mark::before,
.commerce-shell .brand-mark::after {
  display: none !important;
  content: none !important;
}

.commerce-shell .brand-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

.commerce-shell .brand-name {
  color: #101321 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
}

.commerce-shell .brand-sub {
  display: inline !important;
  color: #9096a6 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.commerce-shell .nav {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  order: initial !important;
  gap: 2px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px !important;
  overflow: visible !important;
  border: 1px solid rgba(232, 236, 247, 0.92) !important;
  border-radius: 16px !important;
  background: #f7f8fc !important;
}

.commerce-shell .nav > .nav-link[href="#/pages/api-center"] {
  display: inline-flex !important;
}

.commerce-shell .nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 15px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #242838 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.commerce-shell .nav-link.active,
.commerce-shell .nav-link:hover {
  border-color: rgba(119, 102, 244, 0.16) !important;
  background: #fff !important;
  color: #6857ed !important;
  box-shadow: 0 10px 24px rgba(82, 92, 132, 0.1) !important;
}

.commerce-shell .nav-link.active::after {
  content: none !important;
  display: none !important;
}

.commerce-shell .chevron {
  display: inline-block !important;
}

.commerce-shell .actions {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  gap: 14px !important;
  width: auto !important;
  min-width: 112px !important;
  margin-left: 0 !important;
  text-align: right !important;
}

.commerce-shell .login-btn {
  width: auto !important;
  height: 40px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #6b7df5, #9e6cff) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    height: calc(100vh - 68px) !important;
    min-height: 0 !important;
    padding-top: 24px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 1050px) {
  .commerce-shell .topbar {
    height: 68px !important;
    min-height: 68px !important;
  }

  .commerce-shell .topbar-inner {
    width: calc(100% - 28px) !important;
  }

  .commerce-shell .brand {
    min-width: 0 !important;
  }

  .commerce-shell .brand-sub {
    display: none !important;
  }

  .commerce-shell .nav {
    gap: 1px !important;
    padding: 3px !important;
  }

  .commerce-shell .nav-link {
    padding: 0 11px !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .topbar {
    height: 118px !important;
    min-height: 118px !important;
  }

  .commerce-shell .topbar-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: calc(100% - 28px) !important;
    height: 100% !important;
    padding: 12px 0 !important;
  }

  .commerce-shell .nav {
    order: 3 !important;
    justify-content: flex-start !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 14px !important;
    scrollbar-width: none !important;
  }

  .commerce-shell .nav::-webkit-scrollbar {
    display: none !important;
  }

  .commerce-shell .nav-link {
    flex: 0 0 auto !important;
  }

  .commerce-shell .actions {
    min-width: 0 !important;
  }
}

/* Commerce product EOF short-browser breathing lock v89, 2026-06-17 */
@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    height: calc(100vh - 68px) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 108px !important;
    gap: 10px !important;
    height: calc(100vh - 84px) !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 108px !important;
    min-height: 108px !important;
    padding: 10px 16px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    height: 90px !important;
    min-height: 90px !important;
    padding: 6px 16px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
  }

  .commerce-shell .commerce-submit-bar {
    padding-top: 2px !important;
    transform: translateY(-8px) !important;
  }
}

/* Commerce product left-workbench refinement v90, 2026-06-17 */
.commerce-shell .commerce-hidden-meta {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-panel-head p {
  max-width: 420px !important;
}

.commerce-shell .commerce-suite-upload {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "icon copy actions" !important;
  align-items: center !important;
  column-gap: 14px !important;
  min-height: 104px !important;
  height: 104px !important;
  padding: 16px 18px !important;
  border: 1px dashed #d9e1ee !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, #ffffff, #fbfcff) !important;
  box-shadow: none !important;
}

.commerce-shell .commerce-suite-upload:not(.has-upload):hover {
  border-color: color-mix(in srgb, var(--brand) 34%, #d9e1ee) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 3%, #fff), #fbfcff) !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-icon {
  grid-area: icon !important;
  position: static !important;
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border: 1px solid #e3e9f3 !important;
  border-radius: 10px !important;
  background:
    #fff
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15V4M12 4L8 8M12 4L16 8' stroke='%236B7DF5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 15.5V17.2C5 18.75 6.25 20 7.8 20H16.2C17.75 20 19 18.75 19 17.2V15.5' stroke='%236B7DF5' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 24px 24px no-repeat !important;
  box-shadow: 0 8px 18px rgba(35, 48, 78, 0.06) !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-copy {
  grid-area: copy !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: left !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-copy strong,
.commerce-shell .commerce-suite-upload .commerce-upload-copy span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-copy strong {
  color: #182033 !important;
  font-size: 15px !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-copy span {
  margin-top: 5px !important;
  color: #7c8596 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-actions {
  grid-area: actions !important;
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 74px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 8px !important;
  color: #273043 !important;
  background: #fff !important;
  box-shadow: 0 5px 12px rgba(31, 42, 68, 0.045) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-suite-upload .commerce-upload-actions button:first-child {
  border-color: color-mix(in srgb, var(--brand) 22%, #dfe6f1) !important;
  color: color-mix(in srgb, var(--brand) 88%, #172033) !important;
}

.commerce-shell .commerce-platform-inline {
  margin-top: 10px !important;
  padding: 10px 12px 12px !important;
  border: 1px solid #edf1f7 !important;
  border-radius: 12px !important;
  background: #fbfcff !important;
}

.commerce-shell .commerce-platform-inline-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.commerce-shell .commerce-platform-inline-head > span {
  flex: 0 0 auto !important;
  color: #596273 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

.commerce-shell .commerce-platform-inline .commerce-region-tabs {
  flex: 0 0 150px !important;
  width: 150px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 2px !important;
  border-radius: 8px !important;
  background: #eef2f8 !important;
}

.commerce-shell .commerce-platform-inline .commerce-region-tabs button {
  height: 24px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.commerce-shell .commerce-platform-inline .commerce-platform-buttons,
.commerce-shell .commerce-platform-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  overflow: hidden !important;
}

.commerce-shell .commerce-platform-inline .commerce-platform-buttons button,
.commerce-shell .commerce-platform-buttons button,
.commerce-shell .commerce-platform-buttons button:nth-child(1),
.commerce-shell .commerce-platform-buttons button:nth-child(6),
.commerce-shell .commerce-platform-buttons button:nth-child(8),
.commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
.commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
.commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  border-radius: 9px !important;
  justify-content: center !important;
}

.commerce-shell .commerce-platform-inline .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px !important;
  background: var(--commerce-platform-icon) center / contain no-repeat !important;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon img {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
}

.commerce-shell .commerce-platform-inline .commerce-platform-buttons span,
.commerce-shell .commerce-platform-buttons span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #252d3e !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-platform-inline .commerce-platform-buttons button.active span,
.commerce-shell .commerce-platform-buttons button.active span {
  color: color-mix(in srgb, var(--brand) 86%, #101321) !important;
}

.commerce-shell .commerce-output-choice {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.commerce-shell .commerce-output-option,
.commerce-shell .commerce-output-option.is-suite,
.commerce-shell .commerce-output-option.is-suite.active {
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
}

.commerce-shell .commerce-output-option strong {
  font-size: 13px !important;
  line-height: 1 !important;
}

.commerce-shell .commerce-output-option span {
  display: none !important;
}

.commerce-shell .commerce-module-summary {
  margin: 11px 0 8px !important;
}

.commerce-shell .commerce-module-summary span {
  color: #5f6878 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.commerce-shell .commerce-module-summary strong {
  color: #7a6cf2 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

.commerce-shell .commerce-module-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.commerce-shell .commerce-module-buttons button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
}

.commerce-shell .commerce-module-buttons button span {
  font-size: 12px !important;
  font-weight: 720 !important;
}

.commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 10px !important;
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: calc(100vh - 116px) !important;
    min-height: 650px !important;
    max-height: 878px !important;
    padding: 18px 20px 18px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 12px !important;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: calc(100vh - 84px) !important;
    min-height: 0 !important;
    padding: 12px 18px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 7px !important;
  }

  .commerce-shell .commerce-suite-upload {
    min-height: 82px !important;
    height: 82px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-suite-upload .commerce-upload-icon {
    width: 34px !important;
    height: 34px !important;
    background-size: 20px 20px !important;
  }

  .commerce-shell .commerce-suite-upload .commerce-upload-actions button {
    height: 28px !important;
    min-width: 66px !important;
    padding: 0 9px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 8px !important;
    padding: 8px 10px 10px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-region-tabs {
    height: 26px !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 5px !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons b.has-reference-icon img {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 7px 0 5px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-submit-bar {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon copy"
      "actions actions" !important;
    row-gap: 10px !important;
    min-height: 126px !important;
    height: auto !important;
    padding: 14px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb copy"
      "actions actions" !important;
  }

  .commerce-shell .commerce-suite-upload .commerce-upload-actions,
  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-actions {
    justify-content: flex-start !important;
  }

  .commerce-shell .commerce-platform-inline {
    padding: 10px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-region-tabs {
    width: 100% !important;
    flex-basis: auto !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-platform-buttons,
  .commerce-shell .commerce-platform-buttons {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 1px !important;
    scrollbar-width: none !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-platform-buttons::-webkit-scrollbar,
  .commerce-shell .commerce-platform-buttons::-webkit-scrollbar {
    display: none !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    flex: 0 0 92px !important;
  }

  .commerce-shell .commerce-output-choice {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .commerce-shell .commerce-module-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Commerce product upload card hard reset v90.1, 2026-06-17 */
.commerce-shell .commerce-suite-upload {
  contain: layout paint !important;
  overflow: hidden !important;
}

.commerce-shell .commerce-suite-upload > .commerce-upload-icon {
  display: none !important;
}

.commerce-shell .commerce-suite-upload > .commerce-upload-copy,
.commerce-shell .commerce-suite-upload > .commerce-upload-actions,
.commerce-shell .commerce-suite-upload > .commerce-upload-main-thumb,
.commerce-shell .commerce-suite-upload > .commerce-upload-thumbs {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 4 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.commerce-shell .commerce-suite-upload > .commerce-upload-copy strong,
.commerce-shell .commerce-suite-upload > .commerce-upload-copy span {
  box-sizing: border-box !important;
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-indent: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: none !important;
}

.commerce-shell .commerce-suite-upload:not(.has-upload) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "copy actions" !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 82px !important;
  height: 82px !important;
  padding: 15px 16px !important;
  border: 1px dashed #dbe3ef !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #fbfcff) !important;
}

.commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-copy {
  grid-area: copy !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: left !important;
}

.commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-copy strong {
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
}

.commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-copy span {
  color: #7d8697 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.25 !important;
}

.commerce-shell .commerce-suite-upload > .commerce-upload-actions,
.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-actions,
.commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-actions {
  grid-area: actions !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.commerce-shell .commerce-suite-upload > .commerce-upload-actions button,
.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-actions button,
.commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-actions button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 72px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 8px !important;
  color: #273043 !important;
  background: #fff !important;
  box-shadow: 0 5px 12px rgba(31, 42, 68, 0.045) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-indent: 0 !important;
  transform: none !important;
}

.commerce-shell .commerce-suite-upload.has-upload {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) auto !important;
  grid-template-areas: "thumb copy actions" !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 100px !important;
  height: 100px !important;
  padding: 12px 14px !important;
  border: 1px solid #dfe6f3 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #fbfcff) !important;
}

.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-main-thumb {
  grid-area: thumb !important;
  display: block !important;
  width: 74px !important;
  height: 74px !important;
  overflow: hidden !important;
  border: 1px solid #e5ebf3 !important;
  border-radius: 9px !important;
  background: #f7f9fc !important;
}

.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-main-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-copy {
  grid-area: copy !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
}

.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-copy strong {
  color: #172033 !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
}

.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-copy span {
  color: #7d8697 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.25 !important;
}

.commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-thumbs {
  display: none !important;
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    min-height: 74px !important;
    height: 74px !important;
    padding: 12px 14px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 62px minmax(0, 1fr) auto !important;
    min-height: 86px !important;
    height: 86px !important;
    padding: 10px 12px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-main-thumb {
    width: 62px !important;
    height: 62px !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "copy"
      "actions" !important;
    min-height: 118px !important;
    height: auto !important;
    gap: 10px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb copy"
      "actions actions" !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-main-thumb {
    width: 58px !important;
    height: 58px !important;
  }

  .commerce-shell .commerce-suite-upload > .commerce-upload-actions,
  .commerce-shell .commerce-suite-upload.has-upload > .commerce-upload-actions,
  .commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-actions {
    justify-content: flex-start !important;
  }
}

/* Commerce product mobile first-preview fit v90.2, 2026-06-17 */
@media (max-width: 760px) {
  .commerce-shell .commerce-workbench {
    gap: 12px !important;
    padding-top: 10px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 14px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 22px !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 8px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    min-height: 80px !important;
    height: 80px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy actions" !important;
    padding: 11px 12px !important;
    gap: 10px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-copy strong {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) > .commerce-upload-copy span {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 7px !important;
    padding: 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-platform-inline-head > span {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-region-tabs {
    flex: 0 0 132px !important;
    width: 132px !important;
    height: 25px !important;
  }

  .commerce-shell .commerce-platform-inline .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    flex-basis: 82px !important;
    height: 29px !important;
    min-height: 29px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 36px !important;
    min-height: 36px !important;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 6px 0 5px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 27px !important;
    min-height: 27px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Commerce product language/category row v91, 2026-06-17 */
.commerce-shell .commerce-language-category-row {
  display: block !important;
  min-width: 0 !important;
  margin-top: 8px !important;
}

.commerce-shell .commerce-language-category-row .commerce-meta-fields {
  display: grid !important;
  grid-template-columns: auto repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
}

.commerce-shell .commerce-language-category-row .commerce-meta-row-title {
  display: block !important;
  color: #5f6878 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-language-category-row .commerce-suite-field {
  display: block !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid #e3e9f3 !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(31, 42, 68, 0.035) !important;
}

.commerce-shell .commerce-language-category-row .commerce-suite-field > span,
.commerce-shell .commerce-language-category-row label.commerce-suite-field > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-language-category-row .commerce-suite-field select,
.commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 34px 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #1d2636 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  outline: none !important;
}

.commerce-shell .commerce-language-category-row .commerce-suite-field:focus-within {
  border-color: color-mix(in srgb, var(--brand) 36%, #e3e9f3) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 9%, transparent) !important;
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-language-category-row {
    margin-top: 6px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    grid-template-columns: auto repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 28px 0 11px !important;
    font-size: 11px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field > span,
  .commerce-shell .commerce-language-category-row label.commerce-suite-field > span {
    position: absolute !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-submit-bar {
    transform: translateY(-4px) !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-language-category-row {
    margin-top: 7px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    grid-template-columns: auto repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 26px 0 11px !important;
    font-size: 11px !important;
  }
}

/* Commerce product title row, preview balance and pending motion v92, 2026-06-17 */
.commerce-shell .commerce-language-category-row {
  display: block !important;
  margin-top: 8px !important;
}

.commerce-shell .commerce-language-category-row .commerce-meta-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.commerce-shell .commerce-language-category-row .commerce-meta-row-title {
  grid-column: 1 / -1 !important;
  display: block !important;
  margin: 0 0 1px !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-language-category-row .commerce-suite-field {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 9px !important;
}

.commerce-shell .commerce-language-category-row .commerce-suite-field select,
.commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 32px 0 12px !important;
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(420px, 1fr) 178px !important;
    align-content: start !important;
    gap: 14px !important;
    height: min(calc(100vh - 92px), 848px) !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-preview-stage {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-main-art {
    max-height: min(520px, calc(100vh - 360px)) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 178px !important;
    min-height: 178px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 112px !important;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-form-grid {
    gap: 4px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 3px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload) {
    height: 82px !important;
    min-height: 82px !important;
    padding: 6px 14px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 4px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 5px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    margin-bottom: 0 !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 26px !important;
    min-height: 26px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 26px 0 10px !important;
    font-size: 11px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 5px !important;
    padding: 7px 9px 8px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(360px, 1fr) 132px !important;
    gap: 10px !important;
    height: calc(100vh - 84px) !important;
  }

  .commerce-shell .commerce-main-art {
    max-height: min(442px, calc(100vh - 278px)) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 132px !important;
    min-height: 132px !important;
    padding: 10px 16px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 78px !important;
  }
}

/* Commerce product right-side balance v96, 2026-06-17 */
@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 22px 24px 24px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 13px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 96px !important;
    min-height: 96px !important;
    padding: 14px 18px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 42px !important;
    min-height: 42px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 10px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 8px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 38px 0 15px !important;
    font-size: 15px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 12px !important;
    padding: 12px 12px 13px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 630px 204px !important;
    gap: 14px !important;
    height: auto !important;
    max-height: none !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 630px !important;
    padding: 20px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 540px !important;
    max-height: 540px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 204px !important;
    min-height: 204px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 138px !important;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 12px 18px 14px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 7px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 88px !important;
    min-height: 88px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 7px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 6px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 34px 0 13px !important;
    font-size: 13px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 482px 150px !important;
    gap: 10px !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 482px !important;
    padding: 16px 18px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 404px !important;
    max-height: 404px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 150px !important;
    min-height: 150px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 92px !important;
  }
}

.commerce-shell .commerce-main-art.is-pending {
  position: relative !important;
  overflow: hidden !important;
}

.commerce-shell .commerce-main-art.is-pending::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 34% 34%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 26%),
    radial-gradient(circle at 66% 58%, color-mix(in srgb, var(--brand-2) 10%, transparent), transparent 28%),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.72) 44%, transparent 58%) !important;
  background-size: 100% 100%, 100% 100%, 220% 100% !important;
  animation: commerce-pending-sheen 1.8s ease-in-out infinite !important;
}

.commerce-shell .commerce-main-art.is-pending .commerce-preview-empty {
  position: relative !important;
  z-index: 1 !important;
}

.commerce-shell .commerce-preview-empty.is-pending i {
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--brand) 8%, transparent),
    0 14px 28px rgba(89, 70, 210, 0.13) !important;
}

.commerce-shell .commerce-pending-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 46px) !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

.commerce-shell .commerce-pending-steps em {
  display: block !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--brand) 18%, #dfe6f1) !important;
  transform-origin: left center !important;
  animation: commerce-pending-step 1.45s ease-in-out infinite !important;
}

.commerce-shell .commerce-pending-steps em:nth-child(2) {
  animation-delay: 0.16s !important;
}

.commerce-shell .commerce-pending-steps em:nth-child(3) {
  animation-delay: 0.32s !important;
}

.commerce-shell .commerce-preview-progress span {
  position: relative !important;
  overflow: hidden !important;
}

.commerce-shell .commerce-preview-progress span::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.74), transparent) !important;
  transform: translateX(-100%) !important;
  animation: commerce-pending-progress 1.35s ease-in-out infinite !important;
}

@keyframes commerce-pending-sheen {
  0% {
    background-position: center, center, 120% 0;
  }
  100% {
    background-position: center, center, -120% 0;
  }
}

@keyframes commerce-pending-step {
  0%,
  100% {
    opacity: 0.38;
    transform: scaleX(0.58);
  }
  45% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes commerce-pending-progress {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    grid-column: 1 / -1 !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-preview-column {
    gap: 10px !important;
  }

  .commerce-shell .commerce-record-strip {
    min-height: 126px !important;
  }
}

/* Commerce product preview/history final balance v92.1, 2026-06-17 */
@media (min-width: 1024px) {
  .commerce-shell .commerce-preview-column {
    grid-template-rows: 610px 178px !important;
    align-content: start !important;
    gap: 14px !important;
    height: auto !important;
    max-height: calc(100vh - 92px) !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 610px !important;
    min-height: 0 !important;
    padding: 20px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 520px !important;
    max-height: 520px !important;
    aspect-ratio: auto !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 178px !important;
    min-height: 178px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 112px !important;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-preview-column {
    grid-template-rows: 504px 132px !important;
    gap: 10px !important;
    height: auto !important;
    max-height: calc(100vh - 84px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 504px !important;
    padding: 16px 18px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 426px !important;
    max-height: 426px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 132px !important;
    min-height: 132px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 78px !important;
  }
}

/* Commerce product right-side balance v96 final override, 2026-06-17 */
@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px 24px 24px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 16px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    gap: 13px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 96px !important;
    min-height: 96px !important;
    padding: 14px 18px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 42px !important;
    min-height: 42px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 10px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 8px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    margin-bottom: 0 !important;
    color: #202739 !important;
    font-size: 15px !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 38px 0 15px !important;
    font-size: 15px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 12px !important;
    padding: 12px 12px 13px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 10px !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 10px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 48px !important;
    min-height: 48px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 12px 0 8px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 8px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 36px !important;
    min-height: 36px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 52px !important;
    min-height: 52px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px !important;
    min-height: 48px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 630px 204px !important;
    gap: 14px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 630px !important;
    min-height: 0 !important;
    padding: 20px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 540px !important;
    max-height: 540px !important;
    aspect-ratio: auto !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 204px !important;
    min-height: 204px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 138px !important;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 18px 14px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 7px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 88px !important;
    min-height: 88px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 7px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 6px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 34px 0 13px !important;
    font-size: 13px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 8px !important;
    padding: 8px 10px 10px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 39px !important;
    min-height: 39px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 8px 0 6px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 29px !important;
    min-height: 29px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 42px !important;
    min-height: 42px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 482px 150px !important;
    gap: 10px !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 482px !important;
    padding: 16px 18px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 404px !important;
    max-height: 404px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 150px !important;
    min-height: 150px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 92px !important;
  }
}

/* Commerce product right panel enlargement v97, 2026-06-17 */
@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 668px 226px !important;
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 668px !important;
    min-height: 0 !important;
    padding: 20px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 578px !important;
    max-height: 578px !important;
    aspect-ratio: auto !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 226px !important;
    min-height: 226px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 160px !important;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 20px !important;
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(450px, 1fr) 170px !important;
    gap: 10px !important;
    height: calc(100vh - 72px) !important;
    max-height: calc(100vh - 72px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 16px 14px !important;
  }

  .commerce-shell .commerce-main-art {
    height: min(578px, calc(100vh - 274px)) !important;
    max-height: min(578px, calc(100vh - 274px)) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 170px !important;
    min-height: 170px !important;
    padding: 12px 16px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 108px !important;
  }
}

@media (min-width: 1201px) and (max-height: 760px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 2px !important;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 74px !important;
    min-height: 74px !important;
    padding: 7px 11px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 30px !important;
    min-height: 30px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 5px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
    line-height: 1.02 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 4px !important;
    padding: 6px 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-region-tabs {
    height: 27px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 38px !important;
    min-height: 38px !important;
  }
}

/* Commerce product upload status in-card v98, 2026-06-17 */
.commerce-shell .commerce-suite-upload > .commerce-upload-copy .commerce-upload-status {
  display: grid !important;
  gap: 5px !important;
  width: min(360px, 100%) !important;
  margin-top: 4px !important;
  padding: 0 !important;
}

.commerce-shell .commerce-upload-status-head {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
}

.commerce-shell .commerce-upload-status-head em {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent) !important;
}

.commerce-shell .commerce-upload-status-head strong,
.commerce-shell .commerce-upload-status-head span,
.commerce-shell .commerce-suite-upload > .commerce-upload-copy .commerce-upload-status p {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-indent: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-upload-status-head strong {
  color: #273043 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.commerce-shell .commerce-upload-status-head span {
  color: #7a8294 !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

.commerce-shell .commerce-upload-status-track {
  height: 5px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e8edf6 !important;
}

.commerce-shell .commerce-upload-status-track i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  transition: width 0.22s ease !important;
}

.commerce-shell .commerce-suite-upload > .commerce-upload-copy .commerce-upload-status p {
  color: #7b8495 !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
}

.commerce-shell .commerce-upload-status.is-success .commerce-upload-status-head em {
  background: #24a35a !important;
  box-shadow: 0 0 0 4px rgba(36, 163, 90, 0.12) !important;
}

.commerce-shell .commerce-upload-status.is-success .commerce-upload-status-track i {
  background: linear-gradient(90deg, #24a35a, color-mix(in srgb, var(--brand) 46%, #24a35a)) !important;
}

.commerce-shell .commerce-upload-status.is-failed .commerce-upload-status-head em {
  background: #d94b4b !important;
  box-shadow: 0 0 0 4px rgba(217, 75, 75, 0.12) !important;
}

.commerce-shell .commerce-upload-status.is-failed .commerce-upload-status-track i {
  background: linear-gradient(90deg, #d94b4b, #f08f78) !important;
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-suite-upload.has-upload {
    min-height: 112px !important;
    height: 112px !important;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-suite-upload.has-upload {
    min-height: 96px !important;
    height: 96px !important;
  }

  .commerce-shell .commerce-suite-upload > .commerce-upload-copy .commerce-upload-status {
    gap: 4px !important;
    margin-top: 3px !important;
  }

  .commerce-shell .commerce-suite-upload > .commerce-upload-copy .commerce-upload-status p {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-suite-upload > .commerce-upload-copy .commerce-upload-status {
    width: 100% !important;
  }
}

/* Commerce product full-image preview lock v99, 2026-06-17 */
.commerce-shell .commerce-main-art.has-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 12px !important;
  background:
    linear-gradient(135deg, rgba(248, 250, 253, 0.96), rgba(255, 255, 255, 0.98)) !important;
}

.commerce-shell .commerce-main-art.has-image img,
.commerce-shell .commerce-result-preview.has-result img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
  border-radius: 16px !important;
}

.commerce-shell .commerce-browser-item span,
.commerce-shell .commerce-browser-item span[style*="record-detail-reference"],
.commerce-shell .commerce-browser-item span[style*="record-scene-reference"],
.commerce-shell .commerce-record-item span,
.commerce-shell .commerce-output-card span {
  background-color: #f8fafc !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* Commerce product visible full-image browser strip v100, 2026-06-17 */
.commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
  position: static !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 92px !important;
  height: 92px !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid #e7ecf4 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-arrow {
  width: 28px !important;
  height: 60px !important;
  min-width: 28px !important;
}

.commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item {
  gap: 5px !important;
}

.commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item span {
  width: 52px !important;
  height: 52px !important;
  max-width: 100% !important;
  border-radius: 8px !important;
  background-size: contain !important;
}

.commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item strong {
  color: #242b3a !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (min-width: 1024px) {
  .commerce-shell .commerce-main-art.has-image {
    height: min(474px, calc(100vh - 388px)) !important;
    max-height: min(474px, calc(100vh - 388px)) !important;
  }
}

/* Commerce product record suite browser lock v101, 2026-06-17 */
@media (min-width: 1024px) {
  .commerce-shell .commerce-workbench {
    height: calc(100vh - 74px) !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 660px 226px !important;
    gap: 10px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 660px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 570px !important;
    max-height: 570px !important;
  }
}

.commerce-shell .commerce-record-strip {
  min-height: 226px !important;
  height: 226px !important;
  padding: 18px 28px 20px !important;
}

.commerce-shell .commerce-record-head {
  margin-bottom: 14px !important;
}

.commerce-shell .commerce-record-head strong {
  font-size: 23px !important;
  line-height: 1.15 !important;
}

.commerce-shell .commerce-record-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.commerce-shell .commerce-record-item {
  display: grid !important;
  grid-template-rows: 104px auto auto !important;
  gap: 7px !important;
  height: 154px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.commerce-shell .commerce-record-item span {
  width: 100% !important;
  height: 104px !important;
  border: 1px solid #e6ebf4 !important;
  border-radius: 12px !important;
  background-color: #f8fafc !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.commerce-shell .commerce-record-item.active span {
  border-color: color-mix(in srgb, var(--brand) 70%, #fff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent) !important;
}

.commerce-shell .commerce-record-item strong,
.commerce-shell .commerce-record-item small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #151b2b !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.commerce-shell .commerce-record-item strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 780 !important;
}

.commerce-shell .commerce-record-item small {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 620 !important;
}

.commerce-shell .commerce-record-item em {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--brand) 86%, #111827) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

.commerce-record-dialog {
  width: min(1180px, calc(100% - 34px)) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.commerce-record-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 72px 18px 26px;
  border-bottom: 1px solid #edf1f7;
}

.commerce-record-dialog-head span {
  display: block;
  margin-bottom: 5px;
  color: #667085;
  font-size: 13px;
  font-weight: 720;
}

.commerce-record-dialog-head h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 880;
}

.commerce-record-dialog-head .primary-btn {
  width: auto;
  min-width: 152px;
  height: 42px;
  border-radius: 10px;
  white-space: nowrap;
}

.commerce-record-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  padding: 22px 26px 26px;
  background: #f7f9fc;
}

.commerce-record-dialog-preview {
  display: grid;
  place-items: center;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #e4eaf2;
  border-radius: 14px;
  background: #fff;
}

.commerce-record-dialog-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
  object-position: center;
}

.commerce-record-dialog-preview div {
  display: grid;
  gap: 6px;
  color: #667085;
  text-align: center;
}

.commerce-record-dialog-preview strong {
  color: #202636;
  font-size: 18px;
}

.commerce-record-dialog-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.commerce-record-dialog-meta {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e5ebf3;
  border-radius: 12px;
  background: #fff;
}

.commerce-record-dialog-meta strong {
  color: #151b2b;
  font-size: 16px;
  font-weight: 820;
}

.commerce-record-dialog-meta span {
  color: #667085;
  font-size: 13px;
  font-weight: 620;
}

.commerce-record-dialog-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
}

.commerce-record-dialog-list button {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 5px 12px;
  align-items: center;
  min-height: 84px;
  padding: 8px;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.commerce-record-dialog-list button.active {
  border-color: color-mix(in srgb, var(--brand) 66%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.commerce-record-dialog-list button span {
  grid-row: 1 / 3;
  display: block;
  width: 72px;
  height: 68px;
  border-radius: 9px;
  background-color: #f8fafc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.commerce-record-dialog-list button strong,
.commerce-record-dialog-list button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-record-dialog-list button strong {
  color: #151b2b;
  font-size: 14px;
  font-weight: 800;
}

.commerce-record-dialog-list button small {
  color: #667085;
  font-size: 12px;
  font-weight: 620;
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-record-strip {
    min-height: 218px !important;
    height: 218px !important;
    padding: 18px 24px 20px !important;
  }

  .commerce-shell .commerce-record-item {
    height: 148px !important;
    grid-template-rows: 92px auto auto !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 92px !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-record-strip {
    height: auto !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-record-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .commerce-record-dialog-body {
    grid-template-columns: 1fr;
  }

  .commerce-record-dialog-preview {
    min-height: 360px;
  }

  .commerce-record-dialog-head {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 66px;
  }
}

@media (min-width: 1024px) and (max-height: 840px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 4px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 3px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 4px !important;
    padding-top: 6px !important;
    padding-bottom: 7px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-output-section {
    gap: 4px !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 6px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 5px 0 4px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px 6px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 26px !important;
    min-height: 26px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 6px !important;
    padding-top: 0 !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 482px 150px !important;
    gap: 10px !important;
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 482px !important;
    padding: 16px 18px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 404px !important;
    max-height: 404px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 150px !important;
    min-height: 150px !important;
    padding: 12px 16px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 92px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 78px !important;
    min-height: 78px !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item span {
    width: 42px !important;
    height: 42px !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: min(386px, calc(100vh - 354px)) !important;
    max-height: min(386px, calc(100vh - 354px)) !important;
  }
}

/* Commerce product suite dialog proportion fix v102, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: minmax(520px, 606px) minmax(0, 1fr) !important;
    gap: 24px !important;
    width: min(1524px, calc(100% - 62px)) !important;
    margin-inline: auto !important;
    align-items: start !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 668px 226px !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 668px !important;
    min-height: 0 !important;
    padding: 20px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 578px !important;
    max-height: 578px !important;
    aspect-ratio: auto !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 226px !important;
    min-height: 226px !important;
    padding: 18px 22px 20px !important;
  }

  .commerce-shell .commerce-record-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .commerce-shell .commerce-record-list:has(> .commerce-record-item:only-child) {
    grid-template-columns: minmax(320px, 460px) !important;
  }
}

@media (min-width: 1201px) and (max-height: 840px) {
  .commerce-shell .commerce-workbench {
    width: min(1524px, calc(100% - 62px)) !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 482px 150px !important;
    gap: 10px !important;
    width: 100% !important;
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 482px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 404px !important;
    max-height: 404px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 150px !important;
    min-height: 150px !important;
    padding: 12px 16px !important;
  }
}

/* Commerce product wide/short browser proportion lock v103, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px minmax(0, 894px) !important;
    justify-content: center !important;
    gap: 24px !important;
    width: min(1524px, calc(100% - 62px)) !important;
    max-width: 1524px !important;
    margin-inline: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: transparent !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    width: 606px !important;
    min-width: 606px !important;
    max-width: 606px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .commerce-shell .commerce-preview-column {
    width: 894px !important;
    max-width: 894px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: 640px 206px !important;
    gap: 12px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 640px !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 34px !important;
    margin-bottom: 10px !important;
  }

  .commerce-shell .commerce-main-art {
    width: 100% !important;
    height: 548px !important;
    max-height: 548px !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 82px !important;
    min-height: 82px !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-arrow {
    height: 52px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item span {
    width: 46px !important;
    height: 46px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 206px !important;
    min-height: 206px !important;
    padding: 16px 20px 18px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 12px !important;
  }

  .commerce-shell .commerce-record-head strong {
    font-size: 21px !important;
  }

  .commerce-shell .commerce-record-item {
    grid-template-rows: 92px auto auto !important;
    height: 142px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 92px !important;
  }
}

@media (min-width: 1760px) {
  .commerce-shell .commerce-workbench {
    width: 1524px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-workbench {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 10px 18px 12px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 78px !important;
    min-height: 78px !important;
    padding: 10px 12px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 5px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 5px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 30px !important;
    min-height: 30px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 6px !important;
    padding: 7px 9px 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 36px !important;
    min-height: 36px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 6px 0 5px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 27px !important;
    min-height: 27px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 474px 142px !important;
    height: 626px !important;
    max-height: 626px !important;
    gap: 10px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 474px !important;
    padding: 14px 16px !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 22px !important;
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-main-art {
    height: 398px !important;
    max-height: 398px !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: 318px !important;
    max-height: 318px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 72px !important;
    min-height: 72px !important;
    margin-top: 7px !important;
    padding: 7px 9px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-arrow {
    height: 46px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item {
    gap: 4px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item span {
    width: 38px !important;
    height: 38px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item strong {
    font-size: 10px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 142px !important;
    min-height: 142px !important;
    padding: 10px 14px 12px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-record-list {
    gap: 10px !important;
  }

  .commerce-shell .commerce-record-item {
    grid-template-rows: 72px auto auto !important;
    height: 106px !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 72px !important;
  }

  .commerce-shell .commerce-record-item strong {
    font-size: 12px !important;
  }

  .commerce-shell .commerce-record-item small,
  .commerce-shell .commerce-record-item em {
    font-size: 11px !important;
  }
}

@media (min-width: 1201px) and (min-height: 901px) {
  .commerce-shell .commerce-main-art.has-image {
    height: 458px !important;
    max-height: 458px !important;
  }
}

@media (min-width: 1201px) and (max-height: 780px) {
  .commerce-shell .commerce-preview-column {
    grid-template-rows: 438px 132px !important;
    height: 580px !important;
    max-height: 580px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 438px !important;
    padding: 12px 14px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 368px !important;
    max-height: 368px !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: 292px !important;
    max-height: 292px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 132px !important;
    min-height: 132px !important;
  }
}

/* Commerce product medium desktop correction v103.1, 2026-06-17 */
@media (min-width: 1201px) and (max-width: 1585px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: minmax(500px, 520px) minmax(0, 1fr) !important;
    gap: 20px !important;
    width: min(1378px, calc(100% - 62px)) !important;
    max-width: 1378px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .commerce-shell .commerce-preview-column {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Commerce product left rhythm terminal override v106.1, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 18px 22px 20px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 48px !important;
    min-height: 48px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 20px 16px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 11px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px !important;
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 3px !important;
  }
}

/* Commerce product left rhythm correction final v106, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 18px 22px 20px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 48px !important;
    min-height: 48px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 20px 16px !important;
  }

  .commerce-shell .commerce-form-grid {
    justify-content: flex-start !important;
    gap: 11px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 40px !important;
    min-height: 40px !important;
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-form-grid {
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 3px !important;
  }
}

/* Commerce product left rhythm correction v106, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    align-items: start !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 18px 22px 20px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 12px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 106px !important;
    min-height: 106px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 8px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 9px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 8px 0 6px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 48px !important;
    min-height: 48px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 20px 16px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 11px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 92px !important;
    min-height: 92px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 7px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 6px 0 4px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-form-grid {
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 78px !important;
    min-height: 78px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 3px !important;
  }
}

@media (min-width: 1586px) and (min-height: 901px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px 894px !important;
    width: 1524px !important;
    max-width: 1524px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    width: 606px !important;
    min-width: 606px !important;
    max-width: 606px !important;
  }

  .commerce-shell .commerce-preview-column {
    width: 894px !important;
    max-width: 894px !important;
    grid-template-rows: 668px 226px !important;
    height: auto !important;
    max-height: none !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 668px !important;
    padding: 20px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 578px !important;
    max-height: 578px !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: 474px !important;
    max-height: 474px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 226px !important;
    min-height: 226px !important;
    padding: 18px 22px 20px !important;
  }

  .commerce-shell .commerce-record-item {
    grid-template-rows: 104px auto auto !important;
    height: 154px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 104px !important;
  }
}

/* Commerce product balanced lower space correction v104, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px 894px !important;
    align-items: start !important;
    justify-content: center !important;
    gap: 24px !important;
    width: min(1524px, calc(100% - 62px)) !important;
    max-width: 1524px !important;
    min-height: calc(100vh - 68px) !important;
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 606px !important;
    min-width: 606px !important;
    max-width: 606px !important;
    height: min(878px, calc(100vh - 92px)) !important;
    min-height: min(878px, calc(100vh - 92px)) !important;
    padding: 16px 22px 18px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 9px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 25px !important;
    line-height: 1.12 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .commerce-shell .commerce-form-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 100px !important;
    min-height: 100px !important;
    padding: 11px 15px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 74px minmax(0, 1fr) auto !important;
    column-gap: 13px !important;
    row-gap: 7px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-main-thumb {
    width: 74px !important;
    height: 74px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 7px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 7px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 7px !important;
    padding: 8px 10px 9px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 7px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 8px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 39px !important;
    min-height: 39px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 7px 0 5px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 29px !important;
    min-height: 29px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 42px !important;
    min-height: 42px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: clamp(16px, 5vh, 46px) !important;
    transform: none !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 44px !important;
    min-height: 44px !important;
  }

  .commerce-shell .commerce-preview-column {
    width: 894px !important;
    max-width: 894px !important;
    min-height: calc(100vh - 92px) !important;
    height: auto !important;
    max-height: none !important;
    grid-template-rows: minmax(0, 1fr) 214px !important;
    gap: 12px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 28px !important;
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-stage-head h2 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .commerce-shell .commerce-visual-preview {
    display: grid !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-artboard-surface {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(428px, calc(100vh - 426px), 578px) !important;
    max-height: clamp(428px, calc(100vh - 426px), 578px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(346px, calc(100vh - 498px), 474px) !important;
    max-height: clamp(346px, calc(100vh - 498px), 474px) !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 84px !important;
    min-height: 84px !important;
    margin-top: 0 !important;
    padding: 8px 10px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-arrow {
    height: 54px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item {
    gap: 4px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item span {
    width: 48px !important;
    height: 48px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item strong {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-output-tray {
    gap: 8px !important;
    padding: 10px !important;
  }

  .commerce-shell .commerce-output-tray-head {
    min-height: 28px !important;
  }

  .commerce-shell .commerce-output-tray-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .commerce-shell .commerce-output-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 62px !important;
    padding: 7px !important;
    gap: 7px !important;
  }

  .commerce-shell .commerce-output-card span {
    width: 44px !important;
    height: 44px !important;
  }

  .commerce-shell .commerce-output-card strong {
    font-size: 12px !important;
  }

  .commerce-shell .commerce-output-card small {
    font-size: 10px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 214px !important;
    min-height: 214px !important;
    padding: 17px 22px 18px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 12px !important;
  }

  .commerce-shell .commerce-record-head strong {
    font-size: 21px !important;
    line-height: 1.12 !important;
  }

  .commerce-shell .commerce-record-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .commerce-shell .commerce-record-item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 5px !important;
    height: 132px !important;
    padding: 8px !important;
    border: 1px solid #e7ecf5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-record-item span {
    grid-row: 1 / 3 !important;
    width: 72px !important;
    height: 96px !important;
    border-radius: 10px !important;
  }

  .commerce-shell .commerce-record-item strong,
  .commerce-shell .commerce-record-item small {
    white-space: nowrap !important;
  }

  .commerce-shell .commerce-record-item em {
    top: 10px !important;
    right: 10px !important;
  }
}

@media (min-width: 1201px) and (min-height: 901px) {
  .commerce-shell .commerce-preview-column {
    grid-template-rows: 668px 226px !important;
    min-height: 906px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 668px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 578px !important;
    max-height: 578px !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: 474px !important;
    max-height: 474px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 226px !important;
    min-height: 226px !important;
  }

  .commerce-shell .commerce-record-item {
    height: 146px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 104px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-workbench {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: calc(100vh - 92px) !important;
    min-height: calc(100vh - 92px) !important;
  }

  .commerce-shell .commerce-preview-column {
    min-height: calc(100vh - 92px) !important;
    grid-template-rows: minmax(0, 1fr) 214px !important;
    gap: 12px !important;
  }

  .commerce-shell .commerce-preview-stage {
    min-height: 0 !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 214px !important;
    min-height: 214px !important;
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-form-grid {
    justify-content: space-between !important;
    gap: 4px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 2px !important;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 78px !important;
    min-height: 78px !important;
    padding: 8px 12px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
  }

  .commerce-shell .commerce-suite-upload.has-upload .commerce-upload-main-thumb {
    width: 56px !important;
    height: 56px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 32px !important;
    min-height: 32px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 3px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 4px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field {
    height: 30px !important;
    min-height: 30px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 4px !important;
    padding: 6px 8px 7px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 18px !important;
    width: 18px !important;
    height: 18px !important;
    background-size: 18px 18px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-output-option.is-suite small {
    top: -8px !important;
    height: 17px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 4px 0 3px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-summary strong {
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: clamp(10px, 3vh, 22px) !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 176px !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(340px, calc(100vh - 398px), 470px) !important;
    max-height: clamp(340px, calc(100vh - 398px), 470px) !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(274px, calc(100vh - 468px), 382px) !important;
    max-height: clamp(274px, calc(100vh - 468px), 382px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 176px !important;
    min-height: 176px !important;
    padding: 12px 16px 14px !important;
  }

  .commerce-shell .commerce-record-item {
    height: 104px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 76px !important;
  }
}

@media (min-width: 1201px) and (max-width: 1585px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: minmax(500px, 520px) minmax(0, 1fr) !important;
    width: min(1378px, calc(100% - 62px)) !important;
    max-width: 1378px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .commerce-shell .commerce-preview-column {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Commerce product left rhythm true terminal override v106.3, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 18px 22px 20px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 96px !important;
    min-height: 96px !important;
    padding: 12px 15px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 46px !important;
    min-height: 46px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }
}

/* Commerce product short-height rhythm terminal override v106.5, 2026-06-17 */
@media (min-width: 1201px) and (max-height: 760px) {
  .commerce-shell .commerce-workbench {
    padding-top: 7px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 2px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 74px !important;
    min-height: 74px !important;
    padding: 7px 11px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 30px !important;
    min-height: 30px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
    line-height: 1.02 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 4px !important;
    padding: 6px 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 38px !important;
    min-height: 38px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 20px 16px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 11px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 86px !important;
    min-height: 86px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0 !important;
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0 !important;
  }
}

/* Commerce product left rhythm terminal override v106.2, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 18px 22px 20px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 48px !important;
    min-height: 48px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 20px 16px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 11px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 3px !important;
  }
}

/* Commerce product refined left rhythm terminal override v106.4, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 20px 24px 22px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 14px !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 96px !important;
    min-height: 96px !important;
    padding: 14px 18px !important;
  }

  .commerce-shell .commerce-product-name-field input,
  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 8px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 10px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 10px !important;
    padding: 10px 12px 12px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 9px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 10px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 44px !important;
    min-height: 44px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 8px 0 7px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 8px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 44px !important;
    min-height: 44px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0 !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px !important;
    min-height: 48px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 20px 16px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 11px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 86px !important;
    min-height: 86px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0 !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* Commerce product short-height true terminal override v106.6, 2026-06-17 */
@media (min-width: 1201px) and (max-height: 760px) {
  .commerce-shell .commerce-workbench {
    padding-top: 7px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 2px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 74px !important;
    min-height: 74px !important;
    padding: 7px 11px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 30px !important;
    min-height: 30px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
    line-height: 1.02 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 4px !important;
    padding: 6px 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 0 !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 38px !important;
    min-height: 38px !important;
  }
}

/* Commerce product refined comfort lock v107, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 21px 24px 23px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 15px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 98px !important;
    min-height: 98px !important;
    padding: 14px 18px !important;
  }

  .commerce-shell .commerce-product-name-field input,
  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 8px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 10px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 10px !important;
    padding: 10px 12px 12px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .commerce-shell .commerce-platform-buttons span {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    background-size: 20px 20px !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 10px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 44px !important;
    min-height: 44px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 8px 0 7px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 8px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 44px !important;
    min-height: 44px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px !important;
    min-height: 48px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 15px 20px 16px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px !important;
  }

  .commerce-shell .commerce-panel-head p {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 88px !important;
    min-height: 88px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 42px !important;
    min-height: 42px !important;
  }
}

@media (min-width: 1201px) and (max-height: 760px) {
  .commerce-shell .commerce-workbench {
    padding-top: 7px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 9px 16px 10px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px !important;
    line-height: 1.06 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 6px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 3px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 76px !important;
    min-height: 76px !important;
    padding: 7px 11px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 31px !important;
    min-height: 31px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 3px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
    line-height: 1.04 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 29px !important;
    min-height: 29px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 5px !important;
    padding: 6px 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 5px !important;
    gap: 4px !important;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 17px !important;
    width: 17px !important;
    height: 17px !important;
    background-size: 17px 17px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 35px !important;
    min-height: 35px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 3px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 23px !important;
    min-height: 23px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 29px !important;
    min-height: 29px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 39px !important;
    min-height: 39px !important;
  }
}

/* Commerce product refined comfort lock v108, 2026-06-17 */
@media (min-width: 1201px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: minmax(548px, 584px) minmax(0, 1fr) !important;
    gap: 24px !important;
    width: min(1524px, calc(100% - 54px)) !important;
    max-width: 1524px !important;
    align-items: start !important;
    justify-content: center !important;
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel,
  .commerce-shell .commerce-preview-stage,
  .commerce-shell .commerce-record-strip {
    border-color: #e8edf5 !important;
    border-radius: 12px !important;
    box-shadow:
      0 16px 36px rgba(33, 43, 72, 0.055),
      0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 21px 24px 23px !important;
    overflow: visible !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), #fff 48%),
      #fff !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 14px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 5px !important;
    color: #687285 !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }

  .commerce-shell .commerce-form-grid {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 15px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 7px !important;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span,
  .commerce-shell .commerce-platform-inline-head > span,
  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    color: #20283a !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 100px !important;
    min-height: 100px !important;
    padding: 14px 18px !important;
    border-radius: 11px !important;
  }

  .commerce-shell .commerce-product-name-field input,
  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 8px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 9px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    padding: 0 38px 0 14px !important;
    font-size: 14px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 10px !important;
    padding: 10px 12px 12px !important;
    border: 1px solid #e8edf5 !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-region-tabs {
    height: 31px !important;
    border-radius: 9px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    background-size: 20px 20px !important;
  }

  .commerce-shell .commerce-platform-buttons span {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 9px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  .commerce-shell .commerce-output-option.active,
  .commerce-shell .commerce-output-option.is-suite.active {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 42%, var(--brand-2)) 52%, var(--brand-2) 100%) !important;
    box-shadow: 0 10px 22px rgba(136, 70, 232, 0.18) !important;
  }

  .commerce-shell .commerce-output-option.active strong,
  .commerce-shell .commerce-output-option.active span,
  .commerce-shell .commerce-output-option.is-suite.active strong,
  .commerce-shell .commerce-output-option.is-suite.active span {
    color: #fff !important;
  }

  .commerce-shell .commerce-output-option.is-suite {
    box-shadow: 0 10px 22px rgba(136, 70, 232, 0.18) !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 8px 0 7px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 8px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 33px !important;
    min-height: 33px !important;
    border-radius: 9px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
    transform: none !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 24px color-mix(in srgb, var(--brand) 17%, transparent) !important;
  }

  .commerce-shell .commerce-preview-column {
    width: auto !important;
    max-width: none !important;
    min-height: calc(100vh - 92px) !important;
    height: auto !important;
    max-height: none !important;
    grid-template-rows: minmax(0, 1fr) 214px !important;
    gap: 12px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 28px !important;
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    color: #151b2b !important;
    font-size: 21px !important;
    line-height: 1.14 !important;
    font-weight: 880 !important;
  }

  .commerce-shell .commerce-visual-preview {
    display: grid !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-artboard-surface {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(420px, calc(100vh - 430px), 578px) !important;
    max-height: clamp(420px, calc(100vh - 430px), 578px) !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    aspect-ratio: auto !important;
    background:
      linear-gradient(135deg, #f5f8fc 0%, #eef3fa 100%) !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(344px, calc(100vh - 500px), 474px) !important;
    max-height: clamp(344px, calc(100vh - 500px), 474px) !important;
  }

  .commerce-shell .commerce-preview-empty {
    gap: 11px !important;
  }

  .commerce-shell .commerce-preview-empty i {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  .commerce-shell .commerce-preview-empty strong {
    color: #20283a !important;
    font-size: 17px !important;
  }

  .commerce-shell .commerce-preview-empty span {
    color: #687285 !important;
    font-size: 13px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 84px !important;
    min-height: 84px !important;
    margin-top: 0 !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-arrow {
    height: 54px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item span {
    width: 48px !important;
    height: 48px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 214px !important;
    min-height: 214px !important;
    padding: 17px 22px 18px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 12px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 132px !important;
    border: 1px dashed #e2e8f2 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fbfcff, #f8fafc) !important;
    color: #7b8495 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .commerce-shell .commerce-record-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .commerce-shell .commerce-record-item {
    height: 132px !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 1586px) and (min-height: 901px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px 894px !important;
    width: 1524px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: 668px 226px !important;
    min-height: 906px !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: 668px !important;
  }

  .commerce-shell .commerce-main-art {
    height: 578px !important;
    max-height: 578px !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: 474px !important;
    max-height: 474px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 226px !important;
    min-height: 226px !important;
  }
}

@media (min-width: 1201px) and (max-height: 900px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 15px 21px 16px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px !important;
  }

  .commerce-shell .commerce-panel-head p {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 10px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 90px !important;
    min-height: 90px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 39px !important;
    min-height: 39px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 42px !important;
    min-height: 42px !important;
  }
}

@media (min-width: 1201px) and (max-height: 760px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: minmax(548px, 560px) minmax(0, 1fr) !important;
    gap: 22px !important;
    width: min(1488px, calc(100% - 48px)) !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 11px 19px 13px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px !important;
    line-height: 1.06 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 7px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 82px !important;
    min-height: 82px !important;
    padding: 8px 12px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 32px !important;
    min-height: 32px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 4px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 5px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 30px !important;
    min-height: 30px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    font-size: 12px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 5px !important;
    padding: 6px 8px 7px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-region-tabs {
    height: 27px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 6px !important;
    gap: 4px !important;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 17px !important;
    width: 17px !important;
    height: 17px !important;
    background-size: 17px 17px !important;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 35px !important;
    min-height: 35px !important;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 4px 0 3px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 31px !important;
    min-height: 31px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 1px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px !important;
    min-height: 40px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 170px !important;
    gap: 10px !important;
    min-height: calc(100vh - 86px) !important;
    height: calc(100vh - 86px) !important;
    max-height: calc(100vh - 86px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    padding: 13px 15px !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 22px !important;
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(326px, calc(100vh - 400px), 428px) !important;
    max-height: clamp(326px, calc(100vh - 400px), 428px) !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(270px, calc(100vh - 468px), 348px) !important;
    max-height: clamp(270px, calc(100vh - 468px), 348px) !important;
  }

  .commerce-shell .commerce-preview-empty i {
    width: 42px !important;
    height: 42px !important;
  }

  .commerce-shell .commerce-preview-empty strong {
    font-size: 15px !important;
  }

  .commerce-shell .commerce-preview-empty span {
    font-size: 12px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 72px !important;
    min-height: 72px !important;
    padding: 7px 9px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-arrow {
    height: 46px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item span {
    width: 38px !important;
    height: 38px !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser .commerce-browser-item strong {
    font-size: 10px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 170px !important;
    min-height: 170px !important;
    padding: 12px 16px 14px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 108px !important;
  }

  .commerce-shell .commerce-record-item {
    height: 104px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 76px !important;
  }
}

@media (min-width: 1586px) {
  .commerce-shell .commerce-workbench {
    grid-template-columns: 606px 894px !important;
    width: 1524px !important;
    max-width: 1524px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    width: 606px !important;
    min-width: 606px !important;
    max-width: 606px !important;
  }

  .commerce-shell .commerce-preview-column {
    width: 894px !important;
    max-width: 894px !important;
  }
}

/* Commerce product record badge containment v108.1, 2026-06-17 */
.commerce-shell .commerce-record-item {
  position: relative !important;
}

.commerce-shell .commerce-record-item em {
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
  min-width: 42px !important;
  height: 23px !important;
  padding: 0 9px !important;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, #e6ebf4) !important;
  border-radius: 999px !important;
  color: color-mix(in srgb, var(--brand) 82%, #20283a) !important;
  background: color-mix(in srgb, var(--brand) 8%, #fff) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  pointer-events: none !important;
}

/* Commerce product first-screen fit lock v111, 2026-06-17 */
@media (min-width: 1201px) and (max-height: 1000px) {
  .commerce-shell .commerce-workbench {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
    align-items: start !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 14px 21px 16px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 8px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 3px !important;
    font-size: 13px !important;
    line-height: 1.16 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 9px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 86px !important;
    min-height: 86px !important;
    padding: 10px 14px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 36px !important;
    min-height: 36px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 6px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 9px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 36px !important;
    min-height: 36px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 7px !important;
    padding: 8px 10px 9px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-region-tabs {
    height: 29px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 6px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons b.has-reference-icon,
  .commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
    flex-basis: 18px !important;
    width: 18px !important;
    height: 18px !important;
    background-size: 18px 18px !important;
  }

  .commerce-shell .commerce-platform-buttons span {
    font-size: 11px !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 8px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-output-option strong {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 5px 0 4px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 6px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 27px !important;
    min-height: 27px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 36px !important;
    min-height: 36px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 42px !important;
    min-height: 42px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) clamp(176px, 20vh, 204px) !important;
    gap: 10px !important;
    height: min(840px, calc(100vh - 118px)) !important;
    min-height: 0 !important;
    max-height: min(840px, calc(100vh - 118px)) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 15px 17px !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 24px !important;
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-stage-head h2,
  .commerce-shell .commerce-record-head strong {
    font-size: 19px !important;
    line-height: 1.1 !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(360px, calc(100vh - 492px), 500px) !important;
    max-height: clamp(360px, calc(100vh - 492px), 500px) !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(300px, calc(100vh - 548px), 420px) !important;
    max-height: clamp(300px, calc(100vh - 548px), 420px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: clamp(176px, 20vh, 204px) !important;
    min-height: clamp(176px, 20vh, 204px) !important;
    padding: 14px 18px 15px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 9px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 108px !important;
  }
}

/* Commerce product ultra-short first-screen fit lock v111.1, 2026-06-17 */
@media (min-width: 1201px) and (max-height: 760px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 8px 16px 10px !important;
  }

  .commerce-shell .commerce-panel-head {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-form-card .panel-title {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .commerce-shell .commerce-panel-head p {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 5px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 2px !important;
  }

  .commerce-shell .commerce-section-title span,
  .commerce-shell .commerce-suite-field > span {
    font-size: 13px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 74px !important;
    min-height: 74px !important;
    padding: 7px 11px !important;
  }

  .commerce-shell .commerce-product-name-field input {
    height: 30px !important;
    min-height: 30px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 2px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-fields {
    gap: 5px !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-meta-row-title {
    font-size: 11px !important;
    line-height: 1.02 !important;
  }

  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 4px !important;
    padding: 6px 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-region-tabs {
    height: 27px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 28px !important;
    min-height: 28px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 34px !important;
    min-height: 34px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 3px 0 2px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 38px !important;
    min-height: 38px !important;
  }
}

/* Commerce product record visible real-browser lock v112.1 terminal, 2026-06-17 */
@media (min-width: 1201px) and (max-height: 1000px) {
  .commerce-shell .commerce-workbench {
    padding-top: 8px !important;
    padding-bottom: 18px !important;
  }

  .commerce-shell .commerce-preview-column {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 190px !important;
    gap: 12px !important;
    height: min(804px, calc(100vh - 158px)) !important;
    min-height: 0 !important;
    max-height: min(804px, calc(100vh - 158px)) !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-stage-head {
    min-height: 24px !important;
    margin-bottom: 6px !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(320px, calc(100vh - 560px), 455px) !important;
    max-height: clamp(320px, calc(100vh - 560px), 455px) !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(270px, calc(100vh - 628px), 360px) !important;
    max-height: clamp(270px, calc(100vh - 628px), 360px) !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 76px !important;
    min-height: 76px !important;
    margin-top: 0 !important;
    padding: 7px 9px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 190px !important;
    min-height: 190px !important;
    padding: 13px 17px 15px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 9px !important;
  }

  .commerce-shell .commerce-record-head strong {
    font-size: 19px !important;
    line-height: 1.12 !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 124px !important;
    padding: 18px !important;
  }

  .commerce-shell .commerce-record-list {
    gap: 12px !important;
  }

  .commerce-shell .commerce-record-item {
    height: 118px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 86px !important;
  }
}

@media (min-width: 1201px) and (max-height: 860px) {
  .commerce-shell .commerce-workbench {
    padding-bottom: 20px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 184px !important;
    height: calc(100vh - 166px) !important;
    max-height: calc(100vh - 166px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    padding: 12px 15px !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(300px, calc(100vh - 564px), 405px) !important;
    max-height: clamp(300px, calc(100vh - 564px), 405px) !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(250px, calc(100vh - 628px), 328px) !important;
    max-height: clamp(250px, calc(100vh - 628px), 328px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 184px !important;
    min-height: 184px !important;
    padding: 12px 16px 14px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 118px !important;
  }
}

@media (min-width: 1201px) and (max-height: 780px) {
  .commerce-shell .commerce-workbench {
    padding-top: 7px !important;
    padding-bottom: 22px !important;
  }

  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 172px !important;
    gap: 10px !important;
    height: calc(100vh - 172px) !important;
    max-height: calc(100vh - 172px) !important;
  }

  .commerce-shell .commerce-preview-stage {
    padding: 11px 14px !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(270px, calc(100vh - 558px), 350px) !important;
    max-height: clamp(270px, calc(100vh - 558px), 350px) !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(230px, calc(100vh - 624px), 290px) !important;
    max-height: clamp(230px, calc(100vh - 624px), 290px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 172px !important;
    min-height: 172px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 106px !important;
  }
}

/* Commerce product tall real-browser right-fill v115 terminal, 2026-06-17 */
@media (min-width: 1586px) and (min-height: 1001px) {
  .commerce-shell .commerce-preview-column {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 206px !important;
    gap: 12px !important;
    height: calc(100vh - 96px) !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(610px, calc(100vh - 380px), 960px) !important;
    max-height: clamp(610px, calc(100vh - 380px), 960px) !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(500px, calc(100vh - 498px), 760px) !important;
    max-height: clamp(500px, calc(100vh - 498px), 760px) !important;
  }

  .commerce-shell .commerce-artboard-surface > .commerce-preview-browser {
    height: 80px !important;
    min-height: 80px !important;
    margin-top: 0 !important;
    padding: 8px 10px !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 206px !important;
    min-height: 206px !important;
    padding: 15px 20px 17px !important;
  }

  .commerce-shell .commerce-record-head {
    margin-bottom: 10px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 132px !important;
  }

  .commerce-shell .commerce-record-list {
    gap: 13px !important;
  }

  .commerce-shell .commerce-record-item {
    height: 128px !important;
  }

  .commerce-shell .commerce-record-item span {
    height: 94px !important;
  }
}

/* Unified generation workspace blueprint lock, 2026-06-21 */
.generation-workbench {
  min-height: calc(100vh - 68px);
  padding: 12px clamp(18px, 3vw, 42px) 18px;
  background: #f6f7fb;
  color: #171821;
}

.generation-head-actions,
.generation-segment,
.generation-count-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e8e9f0;
  border-radius: 8px;
  background: #fff;
}

.generation-head-actions button,
.generation-segment button,
.generation-count-switch button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6e7280;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}

.generation-head-actions button.active,
.generation-segment button.active,
.generation-count-switch button.active {
  background: #171821;
  color: #fff;
  box-shadow: 0 8px 22px rgba(23, 24, 33, 0.13);
}

.generation-count-switch button:disabled {
  cursor: not-allowed;
  opacity: 0.76;
}

.generation-count-control {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e9ebf2;
  border-radius: 10px;
  background: #fff;
}

.generation-count-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.generation-count-readout span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: #171821;
  font-size: 14px;
  font-weight: 900;
}

.generation-count-readout strong {
  font-size: 28px;
  line-height: 1;
}

.generation-count-readout small {
  color: #7d8391;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
}

.generation-count-range {
  width: 100%;
  accent-color: #171821;
}

.generation-count-marks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}

.generation-count-marks button {
  padding: 0 8px;
}

.generation-layout {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 352px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: calc(100vh - 104px);
}

.generation-workbench.with-style-drawer .generation-layout {
  grid-template-columns: minmax(300px, 352px) minmax(300px, 360px) minmax(0, 1fr);
}

.generation-panel,
.generation-preview-card,
.generation-recent-card,
.generation-taskbar {
  background: #fff;
  border: 1px solid #eceef5;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(20, 22, 33, 0.06);
}

.generation-panel {
  padding: 12px;
  max-height: calc(100vh - 104px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.generation-settings {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.generation-settings,
.commerce-shell .commerce-form-grid,
.viral-shell .viral-panel-scroll {
  scrollbar-color: rgba(106, 112, 132, 0.34) transparent;
  scrollbar-gutter: stable;
}

.generation-settings::-webkit-scrollbar,
.commerce-shell .commerce-form-grid::-webkit-scrollbar,
.viral-shell .viral-panel-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.generation-settings::-webkit-scrollbar-track,
.commerce-shell .commerce-form-grid::-webkit-scrollbar-track,
.viral-shell .viral-panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.generation-settings::-webkit-scrollbar-thumb,
.commerce-shell .commerce-form-grid::-webkit-scrollbar-thumb,
.viral-shell .viral-panel-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(106, 112, 132, 0.26);
}

.generation-settings::-webkit-scrollbar-thumb:hover,
.commerce-shell .commerce-form-grid::-webkit-scrollbar-thumb:hover,
.viral-shell .viral-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(106, 112, 132, 0.42);
}

.generation-panel-section {
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid #f0f1f6;
}

.generation-panel-section:last-child {
  border-bottom: 0;
}

.generation-label,
.generation-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: #222431;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.generation-icon-btn,
.generation-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  border: 1px solid #e7e9f2;
  border-radius: 7px;
  background: #fff;
  color: #5e6270;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.generation-more-btn {
  padding: 0 10px;
}

.generation-more-btn.active,
.generation-icon-btn:hover {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 28%, #e7e9f2);
  background: color-mix(in srgb, var(--brand) 7%, #fff);
}

.generation-upload {
  width: 100%;
  min-height: 104px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 14px;
  border: 1px dashed #d6dae6;
  border-radius: 8px;
  background: #fafbfe;
  color: #383b49;
  text-align: center;
  cursor: pointer;
}

.generation-upload.has-upload {
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 34%, #d6dae6);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
}

.generation-upload-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background:
    linear-gradient(#fff, #fff) center / 14px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 14px no-repeat,
    linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 30%, transparent);
}

.generation-upload strong {
  font-size: 13px;
}

.generation-upload small {
  max-width: 260px;
  color: #8b8f9c;
  font-size: 12px;
  line-height: 1.45;
}

.generation-prompt {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  border: 1px solid #e7e9f2;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcff;
  color: #202231;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
}

.generation-prompt:focus {
  border-color: color-mix(in srgb, var(--brand) 42%, #e7e9f2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.generation-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.generation-style-grid .draw-style-card {
  min-height: 88px;
  border-radius: 8px;
}

.generation-style-advanced {
  display: grid;
  gap: 8px;
}

.generation-advanced-hint {
  margin: -2px 0 0;
  color: #8b8f9c;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.generation-label-row.compact {
  margin-bottom: 0;
}

.generation-label-row.compact span {
  color: #8b8f9c;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.generation-link-btn {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.generation-model-select-wrap {
  position: relative;
}

.generation-model-select-wrap::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #717684;
  border-bottom: 1.5px solid #717684;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.generation-model-select {
  width: 100%;
  height: 42px;
  appearance: none;
  border: 1px solid #e7e9f2;
  border-radius: 8px;
  background: #fff;
  color: #202331;
  padding: 0 38px 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
}

.generation-model-select:focus {
  border-color: color-mix(in srgb, var(--brand) 42%, #e7e9f2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.generation-video-model-section,
.generation-image-model-section,
.generation-model-picker-section {
  position: relative;
  overflow: visible;
}

.generation-video-family-card,
.generation-model-picker-card {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, #e7e9f2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 7%, #fff);
  color: #242735;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.generation-video-family-card:hover,
.generation-video-family-card.active,
.generation-model-picker-card:hover,
.generation-model-picker-card.active {
  border-color: color-mix(in srgb, var(--brand) 48%, #e7e9f2);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 12%, transparent);
}

.generation-video-family-card span,
.generation-model-picker-card span,
.generation-video-family-menu button span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.generation-video-family-card strong,
.generation-model-picker-card strong,
.generation-video-family-menu strong {
  color: #202331;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-video-family-card small,
.generation-model-picker-card small,
.generation-video-family-menu small {
  color: #858a99;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-video-family-card > b,
.generation-model-picker-card > b {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #7d8290;
  border-bottom: 1.5px solid #7d8290;
  transform: translateY(-2px) rotate(45deg);
  justify-self: center;
}

.generation-video-family-card.active > b,
.generation-model-picker-card.active > b {
  transform: translateY(2px) rotate(225deg);
}

.generation-model-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 22%, transparent);
}

.generation-model-icon.is-bars {
  gap: 3px;
}

.generation-model-icon.is-bars i {
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
}

.generation-model-icon.is-bars i:nth-child(2) {
  height: 22px;
}

.generation-model-icon.is-play {
  font-size: 14px;
}

.generation-model-icon.is-logo {
  background: #fff;
  border: 1px solid #e8ebf3;
  box-shadow: 0 8px 18px rgba(23, 24, 33, 0.08);
  background-image: var(--generation-model-logo);
  background-position: center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  overflow: hidden;
}

.generation-model-icon.is-logo img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.generation-video-family-menu {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 87px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e6e8f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(23, 24, 33, 0.14);
}

.generation-video-family-menu button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.generation-video-family-menu button:hover,
.generation-video-family-menu button.active {
  border-color: color-mix(in srgb, var(--brand) 24%, #e7e9f2);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
}

.generation-image-family-card {
  grid-template-columns: 30px minmax(0, 1fr) 16px;
}

.generation-image-family-menu {
  top: 87px;
}

.generation-model-picker-menu {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 76px;
  max-height: min(360px, calc(100vh - 210px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e6e8f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(23, 24, 33, 0.15);
  overflow: auto;
}

.generation-model-picker-group {
  display: grid;
  gap: 5px;
}

.generation-model-picker-group + .generation-model-picker-group {
  padding-top: 8px;
  border-top: 1px solid #f0f2f7;
}

.generation-model-picker-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px;
  color: #7c8291;
  font-size: 12px;
  font-weight: 800;
}

.generation-model-picker-group-title .generation-model-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background-size: 16px 16px;
  font-size: 12px;
}

.generation-model-picker-option {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
}

.generation-model-picker-option:hover,
.generation-model-picker-option.active {
  border-color: color-mix(in srgb, var(--brand) 24%, #e7e9f2);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
}

.generation-model-picker-option span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.generation-model-picker-option strong {
  color: #202331;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-model-picker-option small {
  color: #858a99;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.generation-model-picker-option b {
  max-width: 78px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f2f4fa;
  color: #747989;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-model-picker-option.active b {
  background: color-mix(in srgb, var(--brand) 13%, #fff);
  color: var(--brand);
}

.generation-model-sub-label {
  margin-top: 12px;
}

.generation-family-model-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.generation-family-model-tabs button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #e7e9f2;
  border-radius: 8px;
  background: #fff;
  color: #555b68;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.generation-family-model-tabs button.active {
  border-color: #171821;
  background: #171821;
  color: #fff;
  box-shadow: 0 8px 20px rgba(23, 24, 33, 0.12);
}

.generation-model-select-wrap.is-hidden {
  display: none;
}

.generation-model-note {
  margin: 8px 0 0;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
  border: 1px solid #eef0f6;
  border-radius: 8px;
  background: #fafbfe;
}

.generation-model-note strong {
  color: var(--brand);
  font-size: 12px;
  line-height: 1.35;
}

.generation-model-note span {
  color: #838897;
  font-size: 12px;
  line-height: 1.5;
}

.generation-style-note .generation-label-row {
  margin-bottom: 6px;
}

.generation-panel-section > .generation-label-row .generation-label {
  margin-bottom: 0;
}

.generation-style-note .generation-label-row span {
  color: #8b8f9c;
  font-size: 12px;
  font-weight: 600;
}

.generation-style-note p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #eef0f6;
  border-radius: 8px;
  background: #fafbfe;
  color: #838897;
  font-size: 12px;
  line-height: 1.55;
}

.generation-reference-assets-section {
  display: grid;
  gap: 10px;
}

.generation-reference-assets-section .generation-label-row {
  margin-bottom: 0;
}

.generation-reference-assets-section .generation-label-row span {
  color: #8b8f9c;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.generation-reference-asset {
  display: grid;
  gap: 7px;
}

.generation-reference-asset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.generation-reference-asset-head strong {
  color: #222431;
  font-size: 12px;
  line-height: 1.35;
}

.generation-reference-asset-head span {
  color: #de7800;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.generation-reference-upload {
  min-height: 88px;
  grid-template-columns: 104px minmax(0, 1fr);
  justify-items: start;
  text-align: left;
  gap: 12px;
  padding: 12px;
  border-color: #dedced;
  background: #fbfaff;
}

.generation-reference-upload .generation-upload-icon {
  width: auto;
  min-width: 82px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid #e1e3eb;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  color: #171821;
}

.generation-reference-upload .generation-upload-icon::before {
  content: "本地上传";
  color: #171821;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.generation-reference-upload-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.generation-reference-upload-copy strong {
  color: #111827;
  font-size: 13px;
  line-height: 1.35;
}

.generation-reference-upload-copy small {
  max-width: none;
  display: grid;
  gap: 2px;
  color: #747989;
  font-size: 12px;
  line-height: 1.45;
}

.generation-reference-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.generation-reference-list span {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid #e7e9f2;
  border-radius: 7px;
  background: #fbfcff;
  color: #4f5565;
  font-size: 12px;
  line-height: 1.2;
}

.generation-reference-list b {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-reference-list button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #eef0f6;
  color: #727887;
  cursor: pointer;
  line-height: 18px;
}

.generation-inline-input {
  width: 100%;
  height: 38px;
  border: 1px solid #e7e9f2;
  border-radius: 8px;
  background: #fff;
  color: #202231;
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.generation-inline-input:focus {
  border-color: color-mix(in srgb, var(--brand) 42%, #e7e9f2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.generation-ratio-grid,
.generation-quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.generation-ratio-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.generation-ratio-grid button,
.generation-quality-grid button {
  min-height: 50px;
  border: 1px solid #e7e9f2;
  border-radius: 8px;
  background: #fff;
  color: #333644;
  text-align: left;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  cursor: pointer;
  position: relative;
}

.generation-ratio-grid button {
  min-height: 66px;
  place-items: center;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 5px;
  padding: 8px 6px 7px;
  background: #fbfbff;
}

.generation-ratio-grid button i {
  width: calc(var(--ratio-icon-w, 36px) * 0.72);
  height: calc(var(--ratio-icon-h, 36px) * 0.72);
  border-radius: 6px;
  background: #737b8b;
  display: block;
}

.generation-ratio-grid button.active i {
  background: var(--brand);
}

.generation-ratio-grid button strong,
.generation-quality-grid button strong {
  font-size: 12px;
  line-height: 1.2;
}

.generation-ratio-grid button strong {
  color: #707789;
  font-size: 15px;
  font-weight: 500;
}

.generation-ratio-grid button.active strong {
  color: var(--brand);
}

.generation-ratio-grid button span,
.generation-quality-grid button span {
  color: #8b8f9c;
  font-size: 12px;
}

.generation-ratio-grid button span {
  display: none;
}

.generation-ratio-grid button.active,
.generation-quality-grid button.active {
  border-color: color-mix(in srgb, var(--brand) 46%, #e7e9f2);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
}

.generation-ratio-grid button.active::after,
.generation-quality-grid button.active::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 44%, #fff 45% 55%, transparent 56%) 45% 55% / 8px 8px no-repeat,
    linear-gradient(135deg, var(--brand), var(--brand-2));
}

.generation-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.generation-variant-grid button {
  min-height: 52px;
  border: 1px solid #e0e3ee;
  border-radius: 8px;
  background: #fbfbff;
  color: #707789;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px 10px;
  cursor: pointer;
  position: relative;
}

.generation-variant-grid button strong {
  font-size: 16px;
  line-height: 1.2;
}

.generation-variant-grid button span {
  color: #9aa0ad;
  font-size: 11px;
}

.generation-variant-grid button.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, #fff);
  color: var(--brand);
}

.generation-variant-grid button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px 0 7px 0;
  background:
    linear-gradient(135deg, transparent 42%, #fff 43% 55%, transparent 56%) 60% 62% / 12px 12px no-repeat,
    linear-gradient(135deg, transparent 0 50%, var(--brand) 51%);
}

.generation-reference-controls .control-row {
  margin: 0;
}

.generation-format-switch {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.generation-format-switch button {
  width: 100%;
  padding: 0 8px;
}

.generation-switch-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  color: #303240;
  font-size: 13px;
  font-weight: 600;
}

.generation-switch-row.inline {
  margin: 12px 0 0;
}

.generation-switch-row input {
  width: 38px;
  height: 22px;
  accent-color: var(--brand);
}

.generation-cost-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fc;
  border: 1px solid #eceef5;
  box-shadow: 0 10px 22px rgba(31, 35, 54, 0.06);
}

.generation-panel > .generation-cost-card {
  margin-top: 10px;
}

.generation-cost-card span,
.generation-cost-card small {
  display: block;
  color: #8a8e9d;
  font-size: 12px;
  line-height: 1.4;
}

.generation-cost-card strong {
  display: block;
  margin: 2px 0;
  color: #171821;
  font-size: 18px;
  line-height: 1.25;
}

.generation-submit,
.generation-preview-footer button,
.generation-preview-footer .task-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 54%, var(--brand-2)) 50%, var(--brand-2));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 24%, transparent);
  overflow: hidden;
}

.generation-submit {
  gap: 8px;
}

.generation-submit span,
.generation-submit em {
  position: relative;
  z-index: 1;
}

.generation-submit em {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.generation-submit:disabled,
.generation-preview-footer button:disabled {
  opacity: 0.86;
  cursor: not-allowed;
}

.generation-submit.is-busy::before,
.generation-preview-footer button.is-busy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.34) 42%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: generation-button-sheen 1.45s ease-in-out infinite;
}

.generation-submit.is-busy::after,
.generation-preview-footer button.is-busy::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 11px 0 0 rgba(255, 255, 255, 0.76), 22px 0 0 rgba(255, 255, 255, 0.48);
  animation: generation-button-dots 1s steps(3, end) infinite;
}

.generation-preview-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  height: calc(100vh - 104px);
}

.generation-preview-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.generation-preview-head,
.generation-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.generation-preview-head span,
.generation-recent-head span {
  color: #8b8f9c;
  font-size: 12px;
}

.generation-preview-head h2 {
  margin: 3px 0 0;
  color: #171821;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.generation-preview-stage {
  position: relative;
  min-height: 0;
  border: 1px dashed #d8dce8;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(127, 132, 148, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(127, 132, 148, 0.05) 1px, transparent 1px),
    #fbfcff;
  background-size: 28px 28px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  color: #a0a4b1;
}

.generation-preview-stage::before,
.generation-preview-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.generation-preview-stage::before {
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 28%),
    radial-gradient(circle at 82% 80%, color-mix(in srgb, var(--brand-2) 10%, transparent), transparent 32%);
  opacity: 0.82;
}

.generation-preview-stage.is-empty::after {
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: translateX(-130%) skewX(-14deg);
  animation: generation-stage-soft-scan 4.6s ease-in-out infinite;
}

.generation-preview-stage.is-recorded {
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 24%, #d8dce8);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 34%),
    linear-gradient(135deg, #fbfcff, #f8f9ff 58%, #fff7fd);
}

.generation-preview-stage.is-recorded::before {
  opacity: 0.64;
}

.generation-preview-stage.is-busy {
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 38%, #d8dce8);
  background:
    linear-gradient(90deg, rgba(118, 108, 245, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(236, 76, 180, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, #fbfcff 0%, #f7f8ff 52%, #fff7fd 100%);
  background-size: 30px 30px, 30px 30px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.generation-preview-stage.is-busy::after {
  height: 52%;
  top: -52%;
  background: linear-gradient(180deg, transparent, rgba(125, 108, 255, 0.14), rgba(236, 76, 180, 0.12), transparent);
  animation: generation-stage-scan 2.35s ease-in-out infinite;
}

.generation-preview-stage.has-result {
  display: block;
  padding: 12px;
  box-sizing: border-box;
  border-style: solid;
  border-color: #e4e7f0;
  background: #fafbfe;
}

.generation-preview-stage.has-result::before,
.generation-preview-stage.has-result::after {
  display: none;
}

.generation-preview-stage img,
.generation-preview-stage video {
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: contain;
  display: block;
}

.generation-result-shell {
  position: relative;
  z-index: 1;
  width: min(100%, var(--generation-result-w, 640px));
  height: auto;
  max-height: 100%;
  aspect-ratio: var(--generation-result-aspect, 1 / 1);
  min-height: 220px;
  max-height: var(--generation-result-h, 430px);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  animation: generation-result-reveal 0.42s ease both;
}

.generation-result-shell.is-image-result {
  justify-self: center;
}

.generation-result-shell.is-video-cover,
.generation-result-shell.is-video-player {
  justify-self: center;
}

.generation-result-shell::before {
  content: none;
  position: absolute;
  inset: -10px;
  border-radius: 8px;
  border: 1px solid rgba(228, 231, 240, 0.8);
  pointer-events: none;
}

.generation-result-shell img,
.generation-result-shell video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  margin: auto;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 14px 34px rgba(31, 35, 54, 0.14);
}

.generation-result-shell.is-video-cover span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.generation-result-shell.is-video-player {
  background: #10131b;
  overflow: hidden;
}

.generation-preview-stage.has-result-strip .generation-result-shell {
  max-height: calc(var(--generation-result-h, 430px) - 82px);
  min-height: 180px;
}

.generation-result-strip {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  margin: 12px auto 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
}

.generation-result-strip a {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border: 1px solid #e4e7f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(31, 35, 54, 0.08);
}

.generation-result-strip a.active {
  border-color: color-mix(in srgb, var(--brand) 48%, #e4e7f0);
}

.generation-result-strip img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

.generation-result-strip span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.68);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.generation-preview-stage strong {
  color: #565b68;
  font-size: 15px;
}

.generation-preview-stage small {
  color: #9ba0ad;
  font-size: 12px;
}

.generation-preview-empty {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
}

.generation-empty-cube {
  position: relative;
  width: 86px;
  height: 70px;
  animation: generation-empty-float 3.8s ease-in-out infinite;
}

.generation-empty-cube span,
.generation-empty-cube i,
.generation-empty-cube b {
  position: absolute;
  inset: 12px 18px;
  border: 2px solid #d8dce8;
  border-radius: 8px;
  transform: skewY(-12deg);
  background: linear-gradient(135deg, #fff, #f1f3f8);
}

.generation-empty-cube i {
  inset: 4px 26px 20px 10px;
  opacity: 0.72;
}

.generation-empty-cube b {
  inset: 20px 8px 4px 30px;
  opacity: 0.55;
}

.generation-complete-state {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100% - 36px));
  display: grid;
  place-items: center;
  gap: 11px;
  text-align: center;
}

.generation-complete-icon {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--brand) 30%, transparent);
}

.generation-complete-icon i {
  width: 34px;
  height: 20px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: translateY(-3px) rotate(-45deg);
}

.generation-complete-icon b {
  position: absolute;
  inset: -8px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 24px;
  animation: generation-frame-pulse 1.8s ease-in-out infinite;
}

.generation-complete-state strong {
  color: #171821;
  font-size: 20px;
  line-height: 1.25;
}

.generation-complete-state small {
  max-width: 100%;
  color: #737989;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.generation-complete-state button {
  height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  background: #171821;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.generation-empty-lines {
  width: 142px;
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.generation-empty-lines i {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf0f7, #f7f8fc);
}

.generation-empty-lines i:nth-child(2) {
  width: 76%;
  justify-self: center;
}

.generation-empty-lines i:nth-child(3) {
  width: 54%;
  justify-self: center;
}

.generation-process {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100% - 40px));
  display: grid;
  place-items: center;
  gap: 13px;
  text-align: center;
}

.generation-process-frame {
  position: relative;
  width: clamp(172px, 26vw, 248px);
  aspect-ratio: 16 / 10;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, #dfe3ef);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(118, 108, 245, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(236, 76, 180, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 255, 0.96));
  background-size: 20px 20px, 20px 20px, auto;
  box-shadow: 0 18px 40px rgba(78, 85, 120, 0.12);
  overflow: hidden;
}

.generation-process-frame::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 7px;
  border: 1px dashed rgba(118, 108, 245, 0.34);
  animation: generation-frame-pulse 1.8s ease-in-out infinite;
}

.generation-process-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.generation-process-core i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  animation: generation-core-orbit 2.8s linear infinite;
}

.generation-process-core i:nth-child(1) {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 26%, transparent);
}

.generation-process-core i:nth-child(2) {
  width: 86px;
  height: 86px;
  animation-duration: 3.8s;
  animation-direction: reverse;
}

.generation-process-core i:nth-child(3) {
  width: 126px;
  height: 126px;
  opacity: 0.62;
  animation-duration: 5s;
}

.generation-process-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.78), rgba(118, 108, 245, 0.16), transparent);
  transform: translateY(-105%);
  animation: generation-process-scan 1.9s ease-in-out infinite;
}

.generation-process-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--brand);
  opacity: 0.7;
}

.generation-process-corner.one {
  top: 10px;
  left: 10px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.generation-process-corner.two {
  top: 10px;
  right: 10px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.generation-process-corner.three {
  right: 10px;
  bottom: 10px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.generation-process-corner.four {
  bottom: 10px;
  left: 10px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.generation-process-copy {
  display: grid;
  gap: 4px;
}

.generation-process-copy span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.generation-process-copy strong {
  color: #171821;
  font-size: 19px;
  line-height: 1.25;
}

.generation-process-copy small {
  color: #717786;
  font-size: 12px;
  line-height: 1.45;
}

.generation-process-track {
  width: min(360px, 100%);
  height: 8px;
  border-radius: 999px;
  background: rgba(228, 232, 242, 0.9);
  overflow: hidden;
}

.generation-process-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 42%, transparent);
  transition: width 0.45s ease;
}

.generation-process em {
  color: #5f6677;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.generation-process-steps {
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.generation-process-step {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 5px;
  color: #9aa0ae;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.generation-process-step i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9dde8;
}

.generation-process-step.is-done i,
.generation-process-step.is-active i {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.generation-process-step.is-active i {
  animation: generation-step-pulse 1.25s ease-in-out infinite;
}

.generation-process-step.is-done b,
.generation-process-step.is-active b {
  color: #404657;
}

.generation-process-step b {
  max-width: 100%;
  font-weight: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-preview-footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #7d8290;
  font-size: 12px;
}

.generation-recent-card {
  padding: 11px 14px 12px;
  overflow: hidden;
}

.generation-recent-head {
  margin-bottom: 8px;
}

.generation-recent-head strong {
  color: #202231;
  font-size: 14px;
}

.generation-recent-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 1px 5px;
  scrollbar-width: thin;
}

.generation-recent-item {
  flex: 0 0 216px;
  width: 216px;
  min-width: 216px;
  min-height: 68px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #eceef5;
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px 9px 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.generation-recent-item.active {
  border-color: color-mix(in srgb, var(--brand) 46%, #eceef5);
}

.generation-recent-item.has-result:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, #eceef5);
  box-shadow: 0 14px 30px rgba(61, 66, 90, 0.11);
  transform: translateY(-1px);
}

.generation-recent-thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  background: #f2f4f8 center / cover no-repeat;
  border: 1px solid transparent;
  overflow: hidden;
}

.generation-recent-item.is-empty-thumb .generation-recent-thumb {
  background: linear-gradient(180deg, #f8f9fc 0%, #eef1f7 100%);
  border-color: #e4e8f2;
}

.generation-recent-thumb i {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid #cdd3e1;
  background: #fff;
}

.generation-recent-item.is-video-result .generation-recent-thumb i::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid color-mix(in srgb, var(--brand) 72%, #8b92a3);
}

.generation-recent-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: center;
}

.generation-recent-item b {
  display: block;
  margin-top: 0;
  color: #303442;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.22;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.generation-recent-item small {
  color: #8a90a0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-recent-item em {
  width: fit-content;
  max-width: 100%;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 9%, #fff);
  color: var(--brand);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-recent-item.is-failed em {
  background: #fff2f0;
  color: #cc3b2f;
}

.generation-recent-empty {
  width: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed #e1e4ee;
  border-radius: 8px;
  color: #9ba0ad;
  font-size: 13px;
}

.generation-taskbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.generation-task-info span {
  display: block;
  color: #8b8f9c;
  font-size: 12px;
  line-height: 1.3;
}

.generation-task-info strong {
  display: block;
  margin-top: 2px;
  color: #252734;
  font-size: 13px;
  line-height: 1.35;
}

.generation-task-progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #eef0f6;
  overflow: hidden;
}

.generation-task-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width 0.45s ease;
}

.generation-taskbar.is-busy .generation-task-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 34%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  animation: generation-progress-sheen 1.35s ease-in-out infinite;
}

.generation-taskbar em {
  color: #8b8f9c;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.generation-workbench .history-panel {
  position: absolute;
  z-index: 4;
  top: 58px;
  right: 16px;
  width: min(300px, calc(100% - 32px));
}

.generation-workbench .generation-history-panel {
  width: min(340px, calc(100% - 32px));
  padding: 10px;
  border-color: #e8ebf4;
  box-shadow: 0 18px 46px rgba(23, 24, 33, 0.13);
}

.generation-history-panel .history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #202231;
}

.generation-history-panel .history-title span {
  color: #9aa0ae;
  font-size: 11px;
  font-weight: 700;
}

.generation-history-panel .history-item {
  min-height: 54px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.generation-history-panel .history-item + .history-item {
  margin-top: 5px;
}

.generation-history-panel .history-item i {
  width: 52px;
  height: 38px;
  border-radius: 6px;
  background: #f0f2f7 center / cover no-repeat;
}

.generation-history-panel .history-item span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.generation-history-panel .history-item b,
.generation-history-panel .history-item small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-history-panel .history-item b {
  color: #34394c;
  font-size: 12px;
  font-weight: 800;
}

.generation-history-panel .history-item small {
  color: #8e94a3;
  font-size: 11px;
}

.generation-history-panel .history-item strong {
  color: var(--brand);
  font-size: 11px;
}

.generation-history-panel .history-item.active,
.generation-history-panel .history-item:hover {
  border-color: color-mix(in srgb, var(--brand) 28%, #e7e9f2);
  background: color-mix(in srgb, var(--brand) 5%, #fff);
}

@keyframes generation-button-sheen {
  0% {
    transform: translateX(-120%);
  }
  58%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes generation-button-dots {
  0% {
    opacity: 0.36;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.36;
  }
}

@keyframes generation-stage-soft-scan {
  0%,
  48% {
    transform: translateX(-130%) skewX(-14deg);
  }
  78%,
  100% {
    transform: translateX(300%) skewX(-14deg);
  }
}

@keyframes generation-stage-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(292%);
  }
}

@keyframes generation-empty-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes generation-result-reveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes generation-frame-pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.02);
  }
}

@keyframes generation-core-orbit {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes generation-process-scan {
  0% {
    transform: translateY(-105%);
  }
  100% {
    transform: translateY(105%);
  }
}

@keyframes generation-step-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 0%, transparent);
  }
}

@keyframes generation-progress-sheen {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

@media (max-width: 900px) {
  .generation-layout,
  .generation-workbench.with-style-drawer .generation-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 12px;
  }

  .generation-panel {
    max-height: min(680px, calc(100vh - 118px));
  }

  .generation-preview-column {
    height: auto;
    grid-template-rows: minmax(0, auto);
  }

  .generation-preview-card {
    min-height: 420px;
  }

  .generation-preview-stage {
    min-height: 320px;
  }
}

@media (min-width: 901px) {
  .generation-layout {
    min-height: calc(100vh - 104px);
  }

  .generation-panel {
    max-height: calc(100vh - 104px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    overflow: hidden;
  }

  .generation-settings {
    overflow: auto;
    scrollbar-width: thin;
  }

  .generation-preview-column {
    height: calc(100vh - 104px);
    grid-template-rows: minmax(0, 1fr);
  }

  .generation-preview-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .generation-preview-stage {
    min-height: 0;
  }

  .generation-recent-thumb {
    width: 46px;
    height: 46px;
  }

  .generation-taskbar {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .generation-workbench {
    padding: 14px 12px 22px;
  }

  .generation-head-actions {
    width: 100%;
  }

  .generation-head-actions button,
  .generation-segment button {
    flex: 1;
    padding: 0 8px;
  }

  .generation-style-grid,
  .generation-ratio-grid,
  .generation-quality-grid,
  .generation-format-switch,
  .generation-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .generation-cost-card,
  .generation-taskbar {
    grid-template-columns: 1fr;
  }

  .generation-cost-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .generation-submit,
  .generation-preview-footer button,
  .generation-preview-footer .task-download {
    width: 100%;
  }

  .generation-cost-card .generation-submit {
    width: auto;
  }
}

/* Commerce product real Chrome right-column fill v116 terminal, 2026-06-17 */
@media (min-width: 1201px) and (max-height: 1000px) {
  .commerce-shell .commerce-workbench {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-shell .commerce-preview-column {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 190px !important;
    gap: 12px !important;
    height: calc(100vh - 86px) !important;
    min-height: calc(100vh - 86px) !important;
    max-height: calc(100vh - 86px) !important;
    align-self: start !important;
  }

  .commerce-shell .commerce-preview-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(410px, calc(100vh - 350px), 620px) !important;
    max-height: clamp(410px, calc(100vh - 350px), 620px) !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(330px, calc(100vh - 444px), 500px) !important;
    max-height: clamp(330px, calc(100vh - 444px), 500px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 190px !important;
    min-height: 190px !important;
    padding: 13px 17px 15px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 124px !important;
  }
}

@media (min-width: 1201px) and (max-height: 820px) {
  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 176px !important;
    height: calc(100vh - 84px) !important;
    min-height: calc(100vh - 84px) !important;
    max-height: calc(100vh - 84px) !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(382px, calc(100vh - 336px), 500px) !important;
    max-height: clamp(382px, calc(100vh - 336px), 500px) !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(304px, calc(100vh - 426px), 410px) !important;
    max-height: clamp(304px, calc(100vh - 426px), 410px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 176px !important;
    min-height: 176px !important;
  }

  .commerce-shell .commerce-record-strip.is-empty .commerce-creation-empty {
    min-height: 110px !important;
  }
}

@media (min-width: 1586px) and (min-height: 1001px) {
  .commerce-shell .commerce-preview-column {
    grid-template-rows: minmax(0, 1fr) 206px !important;
    height: calc(100vh - 96px) !important;
    min-height: calc(100vh - 96px) !important;
    max-height: none !important;
  }

  .commerce-shell .commerce-main-art {
    height: clamp(610px, calc(100vh - 380px), 960px) !important;
    max-height: clamp(610px, calc(100vh - 380px), 960px) !important;
  }

  .commerce-shell .commerce-main-art.has-image {
    height: clamp(500px, calc(100vh - 498px), 760px) !important;
    max-height: clamp(500px, calc(100vh - 498px), 760px) !important;
  }

  .commerce-shell .commerce-record-strip {
    height: 206px !important;
    min-height: 206px !important;
  }
}

/* Unified generation and commerce icon visibility lock, 2026-06-21 */
.generation-model-icon.is-logo {
  background-color: #fff !important;
  background-image: var(--generation-model-logo) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;
}

.generation-model-icon.is-logo img {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--commerce-platform-icon) center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
}

.commerce-shell .commerce-platform-buttons b.has-reference-icon img,
.commerce-shell .commerce-platform-buttons button:nth-child(n) b.has-reference-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Commerce product compact header and selling-points comfort lock, 2026-06-21 */
.commerce-shell .commerce-form-card.commerce-control-panel {
  padding-top: 16px !important;
}

.commerce-shell .commerce-panel-head {
  display: none !important;
}

.commerce-shell .commerce-form-grid {
  gap: 12px !important;
}

.commerce-shell .commerce-bottom-row,
.commerce-shell .commerce-bottom-row .commerce-copy-field {
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
}

.commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 12px 58px 17px 14px !important;
  border-radius: 12px !important;
  resize: none !important;
}

@media (min-width: 901px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding-top: 14px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 10px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
  }
}

@media (max-width: 720px) {
  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 58px !important;
    min-height: 58px !important;
  }
}

/* Commerce product bottom-space use lock, 2026-06-21 */
@media (min-width: 901px) {
  .commerce-shell .commerce-workbench {
    padding-bottom: 8px !important;
    align-items: stretch !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 86px) !important;
    min-height: calc(100vh - 86px) !important;
    padding: 16px 21px 14px !important;
    overflow: hidden !important;
  }

  .commerce-shell .commerce-form-grid {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 12px !important;
  }

  .commerce-shell .commerce-bottom-row {
    display: flex !important;
    flex: 1 1 112px !important;
    min-height: 104px !important;
    margin: 0 !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    position: relative !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 84px !important;
    padding: 12px 58px 18px 14px !important;
  }

  .commerce-shell .commerce-submit-bar {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 10px !important;
  }

  .commerce-shell .commerce-bottom-row {
    flex-basis: 84px !important;
    min-height: 76px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    min-height: 58px !important;
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 1200px) {
  .commerce-shell .commerce-workbench {
    padding: 10px 12px 12px !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 14px 12px !important;
    overflow: visible !important;
  }

  .commerce-shell .commerce-form-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 8px !important;
  }

  .commerce-shell .commerce-section-title {
    margin-bottom: 5px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 76px !important;
    min-height: 76px !important;
    padding: 8px 12px !important;
  }

  .commerce-shell .commerce-product-name-field input,
  .commerce-shell .commerce-language-category-row .commerce-suite-field,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select,
  .commerce-shell .commerce-language-category-row .commerce-suite-field select:focus {
    height: 32px !important;
    min-height: 32px !important;
  }

  .commerce-shell .commerce-language-category-row {
    margin-top: 4px !important;
  }

  .commerce-shell .commerce-platform-inline {
    margin-top: 5px !important;
    padding: 7px 8px 8px !important;
  }

  .commerce-shell .commerce-platform-inline-head {
    margin-bottom: 4px !important;
  }

  .commerce-shell .commerce-region-tabs {
    height: 28px !important;
  }

  .commerce-shell .commerce-platform-buttons {
    gap: 6px !important;
  }

  .commerce-shell .commerce-platform-buttons button,
  .commerce-shell .commerce-platform-buttons button:nth-child(1),
  .commerce-shell .commerce-platform-buttons button:nth-child(6),
  .commerce-shell .commerce-platform-buttons button:nth-child(8),
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="taobao"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="amazon"],
  .commerce-shell .commerce-platform-buttons button[data-commerce-value="tiktok_shop"] {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 7px !important;
    gap: 5px !important;
  }

  .commerce-shell .commerce-output-choice {
    gap: 6px !important;
  }

  .commerce-shell .commerce-output-option,
  .commerce-shell .commerce-output-option.is-suite,
  .commerce-shell .commerce-output-option.is-suite.active {
    height: 38px !important;
    min-height: 38px !important;
  }

  .commerce-shell .commerce-module-summary {
    margin: 4px 0 3px !important;
  }

  .commerce-shell .commerce-module-buttons {
    gap: 5px !important;
  }

  .commerce-shell .commerce-module-buttons button {
    height: 26px !important;
    min-height: 26px !important;
  }

  .commerce-shell .commerce-bottom-row {
    flex: none !important;
    min-height: 0 !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field {
    position: relative !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 52px !important;
    min-height: 52px !important;
    padding: 9px 54px 18px 12px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field > b {
    right: 11px !important;
    bottom: 7px !important;
  }

  .commerce-shell .commerce-submit-bar {
    margin-top: 4px !important;
  }

  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    height: 40px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 760px) {
  .commerce-shell .commerce-workbench {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px 12px !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel,
  .commerce-shell .commerce-preview-column,
  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload,
  .commerce-shell .commerce-platform-inline,
  .commerce-shell .commerce-bottom-row,
  .commerce-shell .commerce-bottom-row .commerce-copy-field,
  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .commerce-shell .primary-btn.commerce-suite-submit {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .commerce-shell .commerce-form-card.commerce-control-panel {
    padding: 12px 12px 11px !important;
  }

  .commerce-shell .commerce-form-grid {
    gap: 7px !important;
  }

  .commerce-shell .commerce-suite-upload,
  .commerce-shell .commerce-suite-upload:not(.has-upload),
  .commerce-shell .commerce-suite-upload.has-upload {
    height: 74px !important;
    min-height: 74px !important;
  }

  .commerce-shell .commerce-bottom-row .commerce-copy-field textarea {
    height: 50px !important;
    min-height: 50px !important;
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    gap: 8px;
    padding: 8px 0 9px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .brand-name {
    font-size: 20px;
  }

  .actions {
    min-width: 176px;
    gap: 6px;
  }

  .header-member-chip,
  .login-btn {
    height: 36px;
  }

  .header-member-chip.is-guest-guide {
    padding: 0 9px;
  }

  .header-member-chip strong {
    font-size: 11px;
  }

  .header-member-chip small {
    font-size: 9px;
  }

  .login-btn {
    padding: 0 18px;
  }

  .nav {
    padding: 2px;
    border-radius: 13px;
  }

  .nav-link {
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13px;
  }

  .tools-page:not(.api-page) .tools-banner {
    width: calc(100% - 28px);
    min-height: 0;
    margin: 18px auto 14px;
    padding: 22px 24px;
    gap: 16px;
    border-radius: 20px;
  }

  .tools-page:not(.api-page) .tools-banner h1 {
    font-size: clamp(26px, 7.2vw, 32px);
    line-height: 1.22;
  }

  .tools-page:not(.api-page) .tools-banner p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
  }

  .tools-page:not(.api-page) .tools-banner .prompt-visual {
    height: 128px;
    border-radius: 18px;
  }

  .tools-page:not(.api-page) .tools-grid {
    width: calc(100% - 28px);
    gap: 14px;
    margin-bottom: 42px;
  }

  .tools-page:not(.api-page) .tool-card {
    border-radius: 14px;
  }

  .tools-page:not(.api-page) .tool-cover {
    height: 132px;
  }

  .tools-page:not(.api-page) .tool-info {
    min-height: 82px;
    padding: 13px 14px 15px;
  }

  .tools-page:not(.api-page) .tool-info h3 {
    margin-bottom: 5px;
    font-size: 16px;
  }

  .tools-page:not(.api-page) .tool-info p {
    font-size: 12px;
    line-height: 1.45;
  }
}

/* Four creative tools model-generated brand primary action, 2026-06-23 */
.generation-workbench .generation-cost-card .generation-submit,
.generation-workbench .generation-preview-footer button[data-action="generate"],
.commerce-shell .commerce-form-card .commerce-suite-submit,
.viral-shell .viral-video-panel .commerce-suite-submit {
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 166px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 48%, var(--brand-2)) 53%, var(--brand-2) 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow:
    0 13px 24px color-mix(in srgb, var(--brand) 20%, transparent),
    0 4px 9px rgba(122, 106, 248, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(132, 54, 180, 0.2) !important;
  text-shadow: 0 1px 1px rgba(84, 47, 176, 0.16);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease;
}

.generation-workbench .generation-cost-card {
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

.generation-workbench .generation-cost-card .generation-submit {
  flex-shrink: 0;
  min-width: 178px !important;
}

.generation-workbench .generation-preview-footer button[data-action="generate"] {
  min-width: 138px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
}

.generation-submit-mark {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%202L14.55%207.15L19.7%208.7L14.55%2010.25L13%2015.4L11.45%2010.25L6.3%208.7L11.45%207.15L13%202Z'%20fill='black'/%3E%3Cpath%20d='M6.5%2013.2L7.45%2016.05L10.3%2017L7.45%2017.95L6.5%2020.8L5.55%2017.95L2.7%2017L5.55%2016.05L6.5%2013.2Z'%20fill='black'/%3E%3Cpath%20d='M18.2%2014.3L18.9%2016.1L20.7%2016.8L18.9%2017.5L18.2%2019.3L17.5%2017.5L15.7%2016.8L17.5%2016.1L18.2%2014.3Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%202L14.55%207.15L19.7%208.7L14.55%2010.25L13%2015.4L11.45%2010.25L6.3%208.7L11.45%207.15L13%202Z'%20fill='black'/%3E%3Cpath%20d='M6.5%2013.2L7.45%2016.05L10.3%2017L7.45%2017.95L6.5%2020.8L5.55%2017.95L2.7%2017L5.55%2016.05L6.5%2013.2Z'%20fill='black'/%3E%3Cpath%20d='M18.2%2014.3L18.9%2016.1L20.7%2016.8L18.9%2017.5L18.2%2019.3L17.5%2017.5L15.7%2016.8L17.5%2016.1L18.2%2014.3Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.96;
}

.generation-workbench .generation-cost-card .generation-submit span,
.generation-workbench .generation-preview-footer button[data-action="generate"] span,
.commerce-shell .commerce-form-card .commerce-suite-submit,
.viral-shell .viral-video-panel .commerce-suite-submit {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-weight: 800 !important;
}

.generation-workbench .generation-cost-card .generation-submit:not(:disabled):hover,
.generation-workbench .generation-preview-footer button[data-action="generate"]:not(:disabled):hover,
.commerce-shell .commerce-form-card .commerce-suite-submit:not(:disabled):hover,
.viral-shell .viral-video-panel .commerce-suite-submit:not(:disabled):hover {
  transform: translateY(-1px);
  filter: saturate(1.04) brightness(1.015);
  box-shadow:
    0 16px 28px color-mix(in srgb, var(--brand) 24%, transparent),
    0 6px 13px rgba(122, 106, 248, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(132, 54, 180, 0.22) !important;
}

.generation-workbench .generation-cost-card .generation-submit:not(:disabled):active,
.generation-workbench .generation-preview-footer button[data-action="generate"]:not(:disabled):active,
.commerce-shell .commerce-form-card .commerce-suite-submit:not(:disabled):active,
.viral-shell .viral-video-panel .commerce-suite-submit:not(:disabled):active {
  transform: translateY(0);
  filter: saturate(0.98) brightness(0.98);
  box-shadow:
    0 9px 18px color-mix(in srgb, var(--brand) 18%, transparent),
    inset 0 1px 2px rgba(92, 50, 180, 0.18) !important;
}

.generation-workbench .generation-cost-card .generation-submit:disabled,
.generation-workbench .generation-preview-footer button[data-action="generate"]:disabled,
.commerce-shell .commerce-form-card .commerce-suite-submit:disabled,
.viral-shell .viral-video-panel .commerce-suite-submit:disabled {
  cursor: not-allowed !important;
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0.02) 54%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 62%, #bfc5dc) 0%, color-mix(in srgb, var(--brand) 44%, var(--brand-2)) 56%, color-mix(in srgb, var(--brand-2) 64%, #d4d9e9) 100%) !important;
  box-shadow:
    0 9px 18px color-mix(in srgb, var(--brand) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  text-shadow: none;
}

.generation-workbench .generation-cost-card .generation-submit.is-busy {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 48%, var(--brand-2)) 53%, var(--brand-2) 100%) !important;
}

.generation-workbench .generation-cost-card .generation-submit:disabled span,
.generation-workbench .generation-preview-footer button[data-action="generate"]:disabled span,
.commerce-shell .commerce-form-card .commerce-suite-submit:disabled,
.viral-shell .viral-video-panel .commerce-suite-submit:disabled {
  color: rgba(255, 255, 255, 0.82) !important;
}

.commerce-shell .commerce-form-card .commerce-suite-submit::before,
.viral-shell .viral-video-panel .commerce-suite-submit::before {
  display: inline-block !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  opacity: 0.95 !important;
  content: "" !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5.8%204H18.2C19.75%204%2021%205.25%2021%206.8V17.2C21%2018.75%2019.75%2020%2018.2%2020H5.8C4.25%2020%203%2018.75%203%2017.2V6.8C3%205.25%204.25%204%205.8%204ZM5%206.8V17.2C5%2017.65%205.35%2018%205.8%2018H18.2C18.65%2018%2019%2017.65%2019%2017.2V6.8C19%206.35%2018.65%206%2018.2%206H5.8C5.35%206%205%206.35%205%206.8ZM7%2015.5L9.65%2012.7L11.45%2014.5L14.2%2010.95L17.2%2015.5H7Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5.8%204H18.2C19.75%204%2021%205.25%2021%206.8V17.2C21%2018.75%2019.75%2020%2018.2%2020H5.8C4.25%2020%203%2018.75%203%2017.2V6.8C3%205.25%204.25%204%205.8%204ZM5%206.8V17.2C5%2017.65%205.35%2018%205.8%2018H18.2C18.65%2018%2019%2017.65%2019%2017.2V6.8C19%206.35%2018.65%206%2018.2%206H5.8C5.35%206%205%206.35%205%206.8ZM7%2015.5L9.65%2012.7L11.45%2014.5L14.2%2010.95L17.2%2015.5H7Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.viral-shell .viral-video-panel .commerce-suite-submit::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5.8%204.2C5.8%203.2%206.88%202.58%207.74%203.09L18.65%209.55C19.5%2010.05%2019.5%2011.3%2018.65%2011.8L7.74%2018.26C6.88%2018.77%205.8%2018.15%205.8%2017.15V4.2Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5.8%204.2C5.8%203.2%206.88%202.58%207.74%203.09L18.65%209.55C19.5%2010.05%2019.5%2011.3%2018.65%2011.8L7.74%2018.26C6.88%2018.77%205.8%2018.15%205.8%2017.15V4.2Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 760px) {
  .generation-workbench .generation-cost-card {
    grid-template-columns: 1fr;
  }

  .generation-workbench .generation-cost-card .generation-submit,
  .generation-workbench .generation-preview-footer button[data-action="generate"],
  .commerce-shell .commerce-form-card .commerce-suite-submit,
  .viral-shell .viral-video-panel .commerce-suite-submit {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Global tool console fixed-record layout, 2026-06-23 */
.side-panel.tool-console-panel {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  height: calc(100vh - 76px) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 76px) !important;
  overflow: hidden !important;
}

.tool-console-scroll {
  min-height: 0;
  max-height: calc(100vh - 336px);
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.tool-console-actions {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf1f7;
  background: #fff;
}

.tool-console-actions .ai-advice-btn {
  margin: 0;
}

.tool-console-panel > .tool-generation-records {
  min-height: 0;
  margin-top: 10px;
}

.tool-console-panel > .tool-generation-records .tool-generation-list {
  max-height: 190px;
  overflow: auto;
  scrollbar-width: thin;
}

.id-photo-panel.tool-console-panel {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
}

.id-photo-panel.tool-console-panel .id-photo-history {
  min-height: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf1f7;
}

.id-photo-panel.tool-console-panel .id-photo-history-item,
.id-photo-panel.tool-console-panel .id-photo-history-empty {
  margin-top: 8px;
}

.id-photo-result-panel .id-photo-history {
  display: none !important;
}

@media (max-width: 900px) {
  .workspace,
  .workspace.with-style-drawer,
  .editor-layout,
  .id-photo-editor {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .side-panel.tool-console-panel {
    height: auto !important;
    max-height: min(680px, calc(100vh - 118px)) !important;
    overflow: hidden !important;
  }

  .tool-console-scroll {
    max-height: min(420px, calc(100vh - 360px));
    overflow: auto;
  }

  .tool-console-panel > .tool-generation-records,
  .id-photo-panel.tool-console-panel .id-photo-history {
    padding: 10px;
  }

  .tool-console-panel > .tool-generation-records .tool-generation-list {
    max-height: 132px;
  }

  .tool-generation-records.compact .tool-generation-item {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-height: 50px;
    padding: 6px;
  }

  .tool-generation-records.compact .tool-generation-thumb {
    width: 36px;
    height: 36px;
  }

  .tool-generation-records.compact .tool-generation-copy strong {
    font-size: 11px;
  }

  .tool-generation-copy small {
    font-size: 11px;
  }

  .montage-left {
    gap: 10px;
    padding: 14px 16px;
  }

  .montage-upload-main {
    height: 38px;
  }

  .montage-source-grid {
    gap: 8px;
    padding: 8px;
  }

  .montage-source-slot {
    grid-template-rows: 52px auto auto;
    min-height: 104px;
    padding: 6px;
  }

  .montage-recommend {
    gap: 8px;
    padding: 10px;
  }

  .montage-recommend p {
    display: none;
  }

  .montage-mobile-download {
    display: block;
    margin-top: 0;
    height: 42px;
  }

  .montage-desktop-download {
    display: none;
  }

  .result-area,
  .editor-canvas {
    height: auto !important;
    min-height: 420px !important;
  }

}

/* Ordinary tool redesign blueprint workbench v1, 2026-06-23 */
.ordinary-workbench {
  --ordinary-border: #dde5f1;
  --ordinary-soft: #f7f9fd;
  --ordinary-text: #161b2d;
  --ordinary-muted: #7a8497;
  display: grid;
  grid-template-columns: 392px minmax(0, 1fr);
  gap: 20px;
  min-height: calc(100vh - 68px);
  padding: 22px 28px 30px;
  background:
    linear-gradient(180deg, rgba(245, 249, 255, 0.9), rgba(240, 245, 252, 0.92)),
    #f4f7fb;
}

.ordinary-workbench .ordinary-control {
  height: calc(100vh - 116px) !important;
  max-height: calc(100vh - 116px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ordinary-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(25, 36, 66, 0.08);
}

.ordinary-workbench .ordinary-control-scroll {
  min-height: 0;
  max-height: calc(100vh - 268px);
  overflow: auto;
  padding: 20px 20px 14px;
  scrollbar-width: thin;
}

.ordinary-control-scroll::-webkit-scrollbar,
.ordinary-preview-column::-webkit-scrollbar,
.tool-generation-list::-webkit-scrollbar,
.id-photo-history::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ordinary-control-scroll::-webkit-scrollbar-thumb,
.ordinary-preview-column::-webkit-scrollbar-thumb,
.tool-generation-list::-webkit-scrollbar-thumb,
.id-photo-history::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(119, 126, 149, 0.32);
  background-clip: padding-box;
}

.ordinary-title,
.montage-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.ordinary-title .panel-title {
  margin: 0;
  color: var(--ordinary-text);
  font-size: 24px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: 0;
}

.ordinary-title p {
  margin: 6px 0 0;
  color: var(--ordinary-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 760;
}

.ordinary-title-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 24px rgba(111, 99, 245, 0.24);
}

.ordinary-title-icon::before {
  width: 19px;
  height: 19px;
  background: currentColor;
  content: "";
}

.ordinary-icon-watermark::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.8C4 4.8 4.8 4 5.8 4H18.2C19.2 4 20 4.8 20 5.8V18.2C20 19.2 19.2 20 18.2 20H5.8C4.8 20 4 19.2 4 18.2V5.8ZM7 8H17V10H7V8ZM7 12H14V14H7V12ZM7 16H12V17.5H7V16Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.8C4 4.8 4.8 4 5.8 4H18.2C19.2 4 20 4.8 20 5.8V18.2C20 19.2 19.2 20 18.2 20H5.8C4.8 20 4 19.2 4 18.2V5.8ZM7 8H17V10H7V8ZM7 12H14V14H7V12ZM7 16H12V17.5H7V16Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-icon-id-photo::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3H18C19.1 3 20 3.9 20 5V19C20 20.1 19.1 21 18 21H6C4.9 21 4 20.1 4 19V5C4 3.9 4.9 3 6 3ZM12 12C13.66 12 15 10.66 15 9C15 7.34 13.66 6 12 6C10.34 6 9 7.34 9 9C9 10.66 10.34 12 12 12ZM7.5 18H16.5C16.1 15.7 14.32 14.2 12 14.2C9.68 14.2 7.9 15.7 7.5 18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3H18C19.1 3 20 3.9 20 5V19C20 20.1 19.1 21 18 21H6C4.9 21 4 20.1 4 19V5C4 3.9 4.9 3 6 3ZM12 12C13.66 12 15 10.66 15 9C15 7.34 13.66 6 12 6C10.34 6 9 7.34 9 9C9 10.66 10.34 12 12 12ZM7.5 18H16.5C16.1 15.7 14.32 14.2 12 14.2C9.68 14.2 7.9 15.7 7.5 18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-icon-inpaint::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 3.4L20.6 7.4L9.2 18.8H5.2V14.8L16.6 3.4ZM18 2L22 6L20.7 7.3L16.7 3.3L18 2ZM4 20H21V22H4V20Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 3.4L20.6 7.4L9.2 18.8H5.2V14.8L16.6 3.4ZM18 2L22 6L20.7 7.3L16.7 3.3L18 2ZM4 20H21V22H4V20Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-icon-matting::before,
.ordinary-icon-enhance::before,
.ordinary-icon-amplify::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L13.85 8.15L20 10L13.85 11.85L12 18L10.15 11.85L4 10L10.15 8.15L12 2ZM18 14L18.9 17.1L22 18L18.9 18.9L18 22L17.1 18.9L14 18L17.1 17.1L18 14Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L13.85 8.15L20 10L13.85 11.85L12 18L10.15 11.85L4 10L10.15 8.15L12 2ZM18 14L18.9 17.1L22 18L18.9 18.9L18 22L17.1 18.9L14 18L17.1 17.1L18 14Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-icon-montage::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4H11V11H4V4ZM13 4H20V9H13V4ZM13 11H20V20H13V11ZM4 13H11V20H4V13Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4H11V11H4V4ZM13 4H20V9H13V4ZM13 11H20V20H13V11ZM4 13H11V20H4V13Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-step {
  display: grid;
  gap: 13px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid #e2e8f2;
  border-radius: 8px;
  background: #fff;
}

.ordinary-step-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--ordinary-text);
}

.ordinary-step-head b {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 13px;
  font-weight: 950;
}

.ordinary-step-head strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 950;
}

.ordinary-step-head span {
  flex: 0 0 auto;
  color: #7d8596;
  font-size: 12px;
  font-weight: 850;
}

.ordinary-upload-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 88px;
  padding: 10px;
  border: 1px dashed #cfd8e8;
  border-radius: 8px;
  background: #fafcff;
  cursor: pointer;
}

.ordinary-upload-card.has-upload {
  border-style: solid;
  background: #fff;
}

.ordinary-upload-thumb {
  display: grid;
  place-items: center;
  width: 70px;
  height: 60px;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(45deg, rgba(228, 233, 242, 0.82) 25%, transparent 25% 50%, rgba(228, 233, 242, 0.82) 50% 75%, transparent 75%) 0 0 / 18px 18px,
    #eef3fb;
  background-position: center;
  background-size: cover;
}

.ordinary-upload-thumb i {
  width: 23px;
  height: 23px;
  background: #7b8498;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L17 9H14V15H10V9H7L12 4ZM5 18H19V20H5V18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L17 9H14V15H10V9H7L12 4ZM5 18H19V20H5V18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-upload-copy {
  min-width: 0;
}

.ordinary-upload-copy strong,
.ordinary-upload-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordinary-upload-copy strong {
  color: #202638;
  font-size: 13px;
  font-weight: 920;
}

.ordinary-upload-copy small {
  margin-top: 5px;
  color: #8a93a5;
  font-size: 12px;
  font-weight: 760;
}

.ordinary-upload-card button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e1e7f1;
  border-radius: 7px;
  color: #5f55e8;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.ordinary-segment,
.ordinary-scale-tabs,
.ordinary-inpaint-tabs {
  gap: 8px;
}

.ordinary-step .tool-tab {
  min-height: 38px;
  border-radius: 8px;
}

.ordinary-two-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.ordinary-step .form-block {
  margin: 0;
}

.ordinary-output-note,
.ordinary-mask-state {
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  background: #f8faff;
}

.ordinary-output-note strong,
.ordinary-mask-state strong {
  color: #202638;
  font-size: 13px;
  font-weight: 950;
}

.ordinary-output-note span,
.ordinary-mask-state span {
  color: #7b8495;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 760;
}

.ordinary-mask-state.is-ready {
  border-color: #b9ead9;
  background: #f0fff8;
}

.ordinary-mask-state.is-ready strong {
  color: #0f8d64;
}

.ordinary-step .upload-hint {
  margin: 0;
  color: #7b8495;
  font-size: 12px;
  line-height: 1.55;
}

.ordinary-workbench .control-row {
  grid-template-columns: 82px minmax(0, 1fr) 52px;
  gap: 10px;
  min-height: 34px;
}

.ordinary-workbench .control-row span,
.ordinary-workbench .control-row strong {
  font-size: 12px;
}

.ordinary-preview-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 252px;
  grid-template-areas:
    "preview"
    "records";
  gap: 12px;
  min-width: 0;
  max-height: calc(100vh - 116px);
  overflow: hidden;
}

.ordinary-preview-column > .ordinary-preview-card {
  grid-area: preview !important;
}

.ordinary-preview-column > .ordinary-records {
  grid-area: records !important;
  width: 100%;
}

.ordinary-toolbar,
.ordinary-preview-card,
.ordinary-records {
  border: 1px solid var(--ordinary-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(25, 36, 66, 0.07);
}

.ordinary-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 14px;
}

.ordinary-preview-head h2 {
  margin: 0;
  color: #182033;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.ordinary-preview-head p {
  margin: 5px 0 0;
  color: #7a8497;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}

.ordinary-preview-head span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #e4e9f3;
  border-radius: 999px;
  color: #6657f4;
  background: #f7f5ff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ordinary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 10px 16px;
}

.ordinary-toolbar-status {
  display: grid;
  grid-template-columns: auto auto minmax(150px, 220px) auto;
  gap: 12px;
  align-items: center;
  color: #3c465a;
}

.ordinary-spark {
  width: 18px;
  height: 18px;
  color: var(--brand);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L13.6 8.4L20 10L13.6 11.6L12 18L10.4 11.6L4 10L10.4 8.4L12 2ZM18 15L18.8 17.2L21 18L18.8 18.8L18 21L17.2 18.8L15 18L17.2 17.2L18 15Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L13.6 8.4L20 10L13.6 11.6L12 18L10.4 11.6L4 10L10.4 8.4L12 2ZM18 15L18.8 17.2L21 18L18.8 18.8L18 21L17.2 18.8L15 18L17.2 17.2L18 15Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-toolbar-status strong {
  font-size: 13px;
  font-weight: 950;
}

.ordinary-toolbar-status i {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8ecf5;
}

.ordinary-toolbar-status em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.ordinary-toolbar-status small {
  color: #7b8495;
  font-size: 12px;
  font-weight: 850;
}

.ordinary-toolbar-actions {
  display: flex;
  gap: 10px;
}

.ordinary-icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border: 1px solid #e1e7f1;
  border-radius: 8px;
  background: #fff;
}

.ordinary-icon-button::before {
  width: 17px;
  height: 17px;
  background: #687287;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5C9.6 5 7.45 6.25 6.25 8.1L4.5 6.35V12H10.15L7.7 9.55C8.55 8.05 10.15 7 12 7C14.75 7 17 9.25 17 12C17 14.75 14.75 17 12 17C10.4 17 8.98 16.25 8.07 15.07L6.5 16.3C7.78 17.95 9.78 19 12 19C15.86 19 19 15.86 19 12C19 8.14 15.86 5 12 5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5C9.6 5 7.45 6.25 6.25 8.1L4.5 6.35V12H10.15L7.7 9.55C8.55 8.05 10.15 7 12 7C14.75 7 17 9.25 17 12C17 14.75 14.75 17 12 17C10.4 17 8.98 16.25 8.07 15.07L6.5 16.3C7.78 17.95 9.78 19 12 19C15.86 19 19 15.86 19 12C19 8.14 15.86 5 12 5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-preview-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
}

.ordinary-preview-card .image-task-board,
.ordinary-preview-card .inpaint-task-board {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.ordinary-preview-card .image-task-pane,
.ordinary-preview-card .inpaint-mask-stage {
  min-height: min(48vh, 482px);
  border: 1px solid #dfe6f1;
  box-shadow: none;
}

.ordinary-preview-card .image-task-compare,
.ordinary-preview-card .inpaint-workspace {
  min-height: 0;
  height: 100%;
}

.ordinary-preview-card .image-task-hint {
  margin: 12px 0 0;
}

.ordinary-preview-card .image-task-pane span,
.ordinary-preview-card .mask-badge {
  border-radius: 8px;
  background: rgba(20, 27, 45, 0.68);
}

.ordinary-preview-card .image-task-pane.after span {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.ordinary-preview-card .task-status-card,
.ordinary-preview-card .task-complete-actions {
  margin-top: 12px;
}

.ordinary-records {
  min-height: 0;
  padding: 16px 18px;
  overflow: hidden;
}

.ordinary-records .tool-generation-records,
.ordinary-records .id-photo-history {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ordinary-records .tool-generation-list {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 8px 2px 4px;
}

.ordinary-records .tool-generation-item {
  grid-template-columns: 1fr;
  grid-template-rows: 112px auto;
  flex: 0 0 178px;
  min-height: 178px;
  padding: 10px;
  border-radius: 8px;
}

.ordinary-records .tool-generation-thumb {
  width: 100%;
  height: 112px;
  border-radius: 7px;
}

.ordinary-records .tool-generation-copy strong,
.ordinary-records .tool-generation-copy small {
  white-space: normal;
}

.ordinary-records .tool-generation-item em {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.ordinary-records .tool-generation-item {
  position: relative;
}

.ordinary-records .id-photo-history {
  max-height: none;
}

.ordinary-records .id-photo-history {
  display: grid;
  gap: 12px;
}

.ordinary-records .id-photo-history-head {
  margin-bottom: 2px;
}

.ordinary-records .id-photo-history .id-photo-history-item {
  display: inline-grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  width: min(310px, 100%);
}

.ordinary-actions {
  margin: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid #edf1f7;
  background: #fff;
}

.ordinary-actions .ghost-btn,
.ordinary-actions .primary-btn,
.ordinary-actions .ai-advice-btn {
  height: 44px;
  border-radius: 8px;
}

.ordinary-primary-action {
  gap: 9px;
  height: 48px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--brand-2)), var(--brand-2)) !important;
  box-shadow:
    0 12px 22px rgba(116, 91, 245, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.ordinary-primary-action strong {
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.ordinary-primary-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L13.4 8.6L19 10L13.4 11.4L12 17L10.6 11.4L5 10L10.6 8.6L12 3ZM6 17H18V20H6V17Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L13.4 8.6L19 10L13.4 11.4L12 17L10.6 11.4L5 10L10.6 8.6L12 3ZM6 17H18V20H6V17Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-matting-shell {
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100vh - 61px);
  padding: 16px 28px 30px 30px;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
}

.ordinary-matting-shell .ordinary-control {
  height: calc(100vh - 96px) !important;
  max-height: calc(100vh - 96px) !important;
  border: 1px solid #dce5f2;
  border-radius: 8px;
  box-shadow: 0 15px 34px rgba(30, 43, 70, 0.07);
}

.ordinary-matting-shell .ordinary-control-scroll {
  max-height: calc(100vh - 189px);
  padding: 20px 24px 16px;
}

.ordinary-matting-shell .ordinary-title {
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.ordinary-matting-shell .ordinary-title-icon {
  display: none;
}

.ordinary-matting-shell .ordinary-title .panel-title {
  font-size: 25px;
  line-height: 1.15;
  font-weight: 900;
}

.ordinary-matting-shell .ordinary-title p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: #637086;
  font-weight: 700;
}

.ordinary-matting-shell .ordinary-step {
  gap: 13px;
  margin-bottom: 14px;
  padding: 16px 14px;
  border-color: #dce4f1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 22px rgba(35, 48, 74, 0.04);
}

.ordinary-matting-shell .ordinary-step-head b {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  background: linear-gradient(135deg, #5f4ff1 0%, #c653ec 100%);
  font-size: 12px;
}

.ordinary-matting-shell .ordinary-step-head strong {
  font-size: 15px;
  font-weight: 900;
}

.ordinary-matting-shell .ordinary-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 24px 20px;
}

.ordinary-matting-shell .ordinary-actions .ghost-btn {
  height: 40px;
  border-color: #dbe3ef;
  color: #354052;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.ordinary-matting-shell .ordinary-primary-action {
  height: 56px !important;
  border-radius: 8px !important;
  background: linear-gradient(100deg, #6b4df6 0%, #8f52ee 46%, #f151b8 100%) !important;
  box-shadow: 0 16px 32px rgba(128, 82, 241, 0.26);
}

.ordinary-matting-shell .ordinary-primary-action strong {
  font-size: 16px;
  font-weight: 900;
}

.ordinary-matting-shell .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 252px;
  gap: 10px;
  max-height: calc(100vh - 96px);
}

.ordinary-matting-shell .ordinary-preview-card,
.ordinary-matting-shell .ordinary-records {
  border-color: #dce5f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 15px 34px rgba(30, 43, 70, 0.07);
}

.ordinary-matting-shell .ordinary-preview-card {
  padding: 0;
}

.ordinary-matting-shell .ordinary-preview-head {
  display: none;
}

.ordinary-matting-matting-1,
.ordinary-matting-matting-2 {
  position: relative;
  grid-template-columns: 476px minmax(0, 1fr);
  gap: 22px;
  padding: 68px 26px 30px;
}

.ordinary-matting-matting-2 {
  grid-template-columns: 368px minmax(0, 1fr);
}

.ordinary-matting-matting-2 .ordinary-title {
  left: 30px;
  top: 16px;
}

.ordinary-matting-matting-2 .ordinary-control-scroll {
  overflow-y: auto;
}

.ordinary-matting-matting-2 .matting-bg-tabs {
  grid-template-columns: 1fr;
}

.ordinary-matting-matting-2 .matting-bg-tabs button {
  min-height: 34px;
}

.ordinary-matting-matting-2 .matting-bg-tabs button:not(.active) {
  display: none;
}

.ordinary-matting-matting-2 .matting-bg-tabs button.active {
  justify-content: flex-start;
}

.ordinary-matting-matting-2 .matting-bg-tabs button.active::after {
  margin-left: auto;
  color: #667085;
  content: "⌄";
}

.ordinary-matting-matting-2 .product-matting-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ordinary-matting-matting-2 .product-matting-upload-grid.has-upload {
  grid-template-columns: 1fr;
}

.ordinary-matting-matting-2 .product-matting-source,
.ordinary-matting-matting-2 .product-matting-upload-drop {
  display: grid;
  align-content: center;
  min-height: 160px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  background: #fff;
}

.ordinary-matting-matting-2 .product-matting-source {
  gap: 8px;
  overflow: hidden;
  padding: 0;
}

.ordinary-matting-matting-2 .product-matting-source span {
  display: block;
  height: 154px;
  background: #f8fafc center / contain no-repeat;
  background-position: center !important;
  background-size: contain !important;
}

.ordinary-matting-matting-2 .product-matting-source small {
  padding: 0 8px 8px;
  color: #8090a7;
  font-size: 10px;
  font-weight: 600;
}

.ordinary-matting-matting-2 .product-matting-upload-drop {
  justify-items: center;
  gap: 4px;
  border-style: dashed;
  color: #718096;
}

.ordinary-matting-matting-2 .product-matting-upload-drop i {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 16V7.8l-3.2 3.2-1.4-1.4L12 4l5.6 5.6-1.4 1.4L13 7.8V16h-2Zm-6 4v-2h14v2H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 16V7.8l-3.2 3.2-1.4-1.4L12 4l5.6 5.6-1.4 1.4L13 7.8V16h-2Zm-6 4v-2h14v2H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-matting-matting-2 .product-matting-upload-drop strong {
  color: #445169;
  font-size: 12px;
  font-weight: 800;
}

.ordinary-matting-matting-2 .product-matting-upload-drop small,
.ordinary-matting-matting-2 .product-matting-upload-drop em {
  color: #94a1b5;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.ordinary-matting-matting-2 .product-matting-upload-meta {
  position: relative;
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding-right: 24px;
}

.ordinary-matting-matting-2 .product-matting-upload-meta strong {
  color: #2d3648;
  font-size: 13px;
  font-weight: 800;
}

.ordinary-matting-matting-2 .product-matting-upload-meta span {
  color: #7c879a;
  font-size: 11px;
  font-weight: 600;
}

.ordinary-matting-matting-2 .product-matting-upload-meta .matting-upload-remove {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ordinary-matting-matting-2 .product-matting-bg-inline {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.ordinary-matting-matting-2 .product-matting-bg-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.ordinary-matting-matting-2 .product-matting-bg-control.has-color {
  grid-template-columns: minmax(0, 1fr) 34px 34px;
}

.ordinary-matting-matting-2 .product-matting-bg-control select {
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #dfe6f1;
  border-radius: 6px;
  color: #5f6b7f;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ordinary-matting-matting-2 .product-matting-custom-color {
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 1px solid #dfe6f1;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.ordinary-matting-matting-2 .product-matting-eyedropper {
  width: 34px;
  height: 34px;
  border: 1px solid #dfe6f1;
  border-radius: 6px;
  background-color: #fff;
}

.ordinary-matting-matting-2 .product-matting-bg-inline .matting-color-grid {
  display: none;
}

.ordinary-matting-matting-2 .product-matting-bg-inline > span,
.ordinary-matting-matting-2 .product-matting-edge-presets > span,
.ordinary-matting-matting-2 .product-matting-select-row > span {
  color: #4a5568;
  font-size: 12px;
  font-weight: 700;
}

.ordinary-matting-matting-2 .product-matting-edge-presets {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.ordinary-matting-matting-2 .product-matting-edge-presets > span em {
  margin-left: 8px;
  color: #9aa5b6;
  font-style: normal;
  font-weight: 600;
}

.ordinary-matting-matting-2 .product-matting-edge-presets button,
.ordinary-matting-matting-2 .product-matting-platforms button {
  min-width: 0;
  height: 30px;
  border: 1px solid #dfe6f1;
  border-radius: 6px;
  color: #4a5568;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ordinary-matting-matting-2 .product-matting-edge-presets select {
  width: 100%;
  height: 30px;
  border: 1px solid #dfe6f1;
  border-radius: 6px;
  color: #5f6b7f;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
}

.ordinary-matting-matting-2 .product-matting-edge-presets button.active,
.ordinary-matting-matting-2 .product-matting-platforms button.active {
  border-color: #7b5cf5;
  color: #6d4df5;
  background: #fbf9ff;
}

.ordinary-matting-matting-2 .product-matting-select-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.ordinary-matting-matting-2 .product-matting-select-row select {
  width: 100%;
  height: 30px;
  border: 1px solid #dfe6f1;
  border-radius: 6px;
  color: #5f6b7f;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
}

.ordinary-matting-matting-2 .product-matting-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ordinary-matting-matting-2 .product-matting-platform-select {
  grid-template-columns: 72px minmax(0, 1fr);
}

.ordinary-matting-matting-2 .product-matting-advanced-grid {
  display: grid;
  gap: 8px;
}

.ordinary-matting-matting-2 .matting-records .tool-generation-list {
  display: flex;
  grid-template-columns: none;
  gap: 14px;
  overflow: hidden;
}

.ordinary-matting-matting-2 .ordinary-actions {
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 12px;
  margin-top: 0;
}

.ordinary-matting-matting-2 .ordinary-actions .matting-reset-action {
  order: 2;
  width: 56px;
  min-width: 56px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.ordinary-matting-matting-2 .ordinary-actions .matting-reset-action::before {
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  background: #3b4658;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4 13.5c.08-.48.08-.98 0-1.46l2.05-1.6-2-3.46-2.42.98a7.1 7.1 0 0 0-1.26-.73L15.4 4.6h-4l-.37 2.63c-.45.2-.87.45-1.26.73l-2.42-.98-2 3.46 2.05 1.6a7.3 7.3 0 0 0 0 1.46l-2.05 1.6 2 3.46 2.42-.98c.39.29.81.53 1.26.73l.37 2.63h4l.37-2.63c.45-.2.87-.45 1.26-.73l2.42.98 2-3.46-2.05-1.6ZM13.4 15.7a3.45 3.45 0 1 1 0-6.9 3.45 3.45 0 0 1 0 6.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4 13.5c.08-.48.08-.98 0-1.46l2.05-1.6-2-3.46-2.42.98a7.1 7.1 0 0 0-1.26-.73L15.4 4.6h-4l-.37 2.63c-.45.2-.87.45-1.26.73l-2.42-.98-2 3.46 2.05 1.6a7.3 7.3 0 0 0 0 1.46l-2.05 1.6 2 3.46 2.42-.98c.39.29.81.53 1.26.73l.37 2.63h4l.37-2.63c.45-.2.87-.45 1.26-.73l2.42.98 2-3.46-2.05-1.6ZM13.4 15.7a3.45 3.45 0 1 1 0-6.9 3.45 3.45 0 0 1 0 6.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-matting-matting-2 .ordinary-actions .ordinary-primary-action {
  order: 1;
}

.ordinary-matting-matting-2 .matting-background-step > .matting-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 30px);
  gap: 8px;
  margin-top: 8px;
}

.ordinary-matting-matting-2 .matting-background-step > .matting-color-grid .matting-color,
.ordinary-matting-matting-2 .matting-background-step > .matting-color-grid .matting-eyedropper {
  width: 30px;
  height: 30px;
}

.ordinary-matting-matting-1 .ordinary-control,
.ordinary-matting-matting-2 .ordinary-control {
  height: calc(100vh - 166px) !important;
  max-height: calc(100vh - 166px) !important;
  border: 1px solid #dde6f2;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(30, 43, 70, 0.07);
}

.ordinary-matting-matting-1 .ordinary-control-scroll,
.ordinary-matting-matting-2 .ordinary-control-scroll {
  max-height: calc(100vh - 260px);
  padding: 16px 24px 14px;
}

.ordinary-matting-matting-1 .ordinary-title,
.ordinary-matting-matting-2 .ordinary-title {
  position: absolute;
  left: 30px;
  top: 14px;
  margin: 0;
}

.ordinary-matting-matting-1 .ordinary-title .panel-title,
.ordinary-matting-matting-2 .ordinary-title .panel-title {
  font-size: 26px;
}

.ordinary-matting-matting-1 .ordinary-title p,
.ordinary-matting-matting-2 .ordinary-title p {
  display: none;
}

.ordinary-matting-matting-1 .ordinary-preview-column,
.ordinary-matting-matting-2 .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 238px;
  max-height: calc(100vh - 166px);
}

.ordinary-matting-matting-1 .ordinary-preview-card,
.ordinary-matting-matting-2 .ordinary-preview-card {
  min-height: 0;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 {
  grid-template-columns: 476px minmax(0, 1fr);
  gap: 22px;
  min-height: calc(100vh - 56px);
  padding: 78px 26px 18px;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-title {
  left: 30px;
  top: 16px;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control {
  display: block !important;
  height: calc(100vh - 152px) !important;
  max-height: calc(100vh - 152px) !important;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control-scroll {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto;
  padding: 16px 24px 18px;
}

.ordinary-matting-matting-1 .ordinary-step {
  gap: 11px;
  margin-bottom: 13px;
  padding: 14px;
  border: 1px solid #dfe6f1;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.ordinary-matting-matting-1 .ordinary-step-head {
  min-height: 23px;
}

.ordinary-matting-matting-1 .matting-upload-card {
  min-height: 96px;
}

.ordinary-matting-matting-1 .matting-setting-step {
  gap: 13px;
}

.ordinary-matting-matting-1 .matting-background-step {
  margin-bottom: 14px;
}

.ordinary-matting-matting-1 .matting-other-step {
  display: none;
}

.ordinary-matting-matting-1 .matting-bg-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ordinary-matting-matting-1 .matting-color-grid {
  gap: 13px;
  margin-top: 13px;
}

.ordinary-matting-matting-1 .matting-color,
.ordinary-matting-matting-1 .matting-eyedropper {
  width: 36px;
  height: 36px;
}

.matting-protect-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 2px;
}

.matting-protect-note i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dce8ef;
  border-radius: 7px;
  color: #22c26e;
  background: #f7fffb;
}

.matting-protect-note i::before {
  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.4 16.2-3.6-3.6 1.4-1.4 2.2 2.2 7.4-7.4 1.4 1.4-8.8 8.8ZM12 22C6.5 20.6 3 15.8 3 10V5l9-3 9 3v5c0 5.8-3.5 10.6-9 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.4 16.2-3.6-3.6 1.4-1.4 2.2 2.2 7.4-7.4 1.4 1.4-8.8 8.8ZM12 22C6.5 20.6 3 15.8 3 10V5l9-3 9 3v5c0 5.8-3.5 10.6-9 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-protect-note b,
.matting-protect-note small {
  display: block;
}

.matting-protect-note b {
  color: #2f394b;
  font-size: 13px;
  font-weight: 850;
}

.matting-protect-note small {
  margin-top: 4px;
  color: #7d8799;
  font-size: 12px;
  font-weight: 650;
}

.ordinary-matting-matting-1 .ordinary-actions {
  display: none;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 24px 20px;
}

.ordinary-matting-matting-1 .ordinary-actions .ghost-btn {
  height: 42px;
}

.ordinary-matting-matting-1 .ordinary-primary-action {
  height: 58px !important;
}

.ordinary-matting-matting-1 .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 238px;
  height: calc(100vh - 152px) !important;
  max-height: calc(100vh - 152px) !important;
}

.matting-upload-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 22px;
  gap: 13px;
  align-items: center;
  min-height: 84px;
  padding: 10px;
  border: 1px solid #d8e1ef;
  border-radius: 8px;
  background: #fff;
}

.matting-upload-thumb {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 6px;
  background:
    linear-gradient(45deg, rgba(224, 230, 240, 0.9) 25%, transparent 25% 50%, rgba(224, 230, 240, 0.9) 50% 75%, transparent 75%) 0 0 / 16px 16px,
    #eef3fb;
  background-position: center;
  background-size: cover;
}

.matting-upload-card strong,
.matting-upload-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matting-upload-card strong {
  color: #20293a;
  font-size: 14px;
  font-weight: 850;
}

.matting-upload-card small {
  margin-top: 7px;
  color: #7d8799;
  font-size: 12px;
  font-weight: 600;
}

.matting-upload-card div button {
  margin-top: 8px;
  border: 0;
  color: #6f55f5;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.matting-upload-remove {
  width: 22px;
  height: 22px;
  border: 0;
  background: #9aa4b5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 6h10l-1 14H8L7 6Zm2-3h6l1 2H8l1-2Zm-4 3h14v2H5V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 6h10l-1 14H8L7 6Zm2-3h6l1 2H8l1-2Zm-4 3h14v2H5V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-mode-list {
  display: grid;
  gap: 10px;
}

.matting-mode-select {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 60px;
  padding: 9px 42px 9px 12px;
  border: 1px solid #805cf6;
  border-radius: 8px;
  background: linear-gradient(180deg, #faf8ff, #fff);
  box-shadow: 0 0 0 1px rgba(128, 92, 246, 0.22) inset;
}

.matting-mode-select::after {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #7f56f6;
  border-bottom: 2px solid #7f56f6;
  content: "";
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.matting-mode-select-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.matting-mode-select select {
  width: 100%;
  min-width: 0;
  height: 24px;
  border: 0;
  outline: 0;
  color: #243044;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  appearance: none;
}

.matting-mode-select small {
  display: block;
  color: #7c8798;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.matting-mode-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid #e2e7f0;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.matting-mode-card.active {
  border-color: #805cf6;
  background: linear-gradient(180deg, #faf8ff, #fff);
  box-shadow: 0 0 0 1px rgba(128, 92, 246, 0.22) inset;
}

.matting-mode-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #6f55f5;
  background: #f1efff;
}

.matting-mode-icon::before {
  width: 20px;
  height: 20px;
  background: currentColor;
  content: "";
}

.matting-mode-icon.ai::before,
.matting-mode-icon.batch::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2Zm6 13l.9 3.1L22 19l-3.1.9L18 23l-.9-3.1L14 19l3.1-.9L18 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2Zm6 13l.9 3.1L22 19l-3.1.9L18 23l-.9-3.1L14 19l3.1-.9L18 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-mode-icon.cut::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.7 4.7 4.6 4.6L16.6 12l2.7 2.7-4.6 4.6L12 16.6l-2.7 2.7-4.6-4.6L7.4 12 4.7 9.3l4.6-4.6L12 7.4l2.7-2.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.7 4.7 4.6 4.6L16.6 12l2.7 2.7-4.6 4.6L12 16.6l-2.7 2.7-4.6-4.6L7.4 12 4.7 9.3l4.6-4.6L12 7.4l2.7-2.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-mode-card strong {
  display: block;
  color: #243044;
  font-size: 14px;
  font-weight: 850;
}

.matting-mode-card small {
  display: block;
  margin-top: 4px;
  color: #7c8798;
  font-size: 12px;
  font-weight: 600;
}

.matting-range-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
  min-height: 34px;
}

.matting-range-row span {
  color: #4b5568;
  font-size: 13px;
  font-weight: 700;
}

.matting-range-row input {
  accent-color: #7a5cf6;
}

.matting-range-row strong {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  color: #667085;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.matting-toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 31px;
  color: #4b5568;
  font-size: 13px;
  font-weight: 700;
}

.matting-toggle-row small {
  display: block;
  margin-top: 5px;
  color: #7d8799;
  font-size: 12px;
  font-weight: 600;
}

.matting-toggle-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.matting-toggle-row i {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cbd3df;
}

.matting-toggle-row i::before {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  content: "";
  transition: transform 0.18s ease;
}

.matting-toggle-row input:checked + i {
  background: #745cf4;
}

.matting-toggle-row input:checked + i::before {
  transform: translateX(16px);
}

.matting-bg-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.matting-bg-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.matting-bg-tabs button.active {
  border-color: #765cf4;
  color: #6d56f4;
  background: #f7f5ff;
}

.matting-bg-tabs i,
.matting-color,
.matting-eyedropper {
  background:
    linear-gradient(45deg, #d8dde8 25%, transparent 25% 50%, #d8dde8 50% 75%, transparent 75%) 0 0 / 10px 10px,
    #fff;
}

.matting-bg-tabs i {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.matting-bg-tabs i.solid {
  background: #fff;
  box-shadow: inset 0 0 0 1px #d7deea;
}

.matting-bg-tabs i.image {
  background: #eef3fb;
}

.matting-bg-tabs i.custom {
  background: linear-gradient(135deg, #ff4567, #ffce4a, #39d98a, #4aa3ff, #9c5cff);
}

.matting-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.matting-color,
.matting-eyedropper {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  box-shadow: none;
}

.matting-color.active {
  border-color: #725cf4;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #725cf4;
}

.matting-color.is-rainbow {
  background: linear-gradient(135deg, #ff4b6f, #ffd84a, #35d48d, #4aa3ff, #9c5cff);
}

.matting-eyedropper::before {
  position: absolute;
  inset: 8px;
  background: #667085;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m17.7 2.3 4 4-2.8 2.8 1.4 1.4-2.1 2.1-1.4-1.4-7.8 7.8H5v-4l7.8-7.8-1.4-1.4 2.1-2.1 1.4 1.4 2.8-2.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m17.7 2.3 4 4-2.8 2.8 1.4 1.4-2.1 2.1-1.4-1.4-7.8 7.8H5v-4l7.8-7.8-1.4-1.4 2.1-2.1 1.4 1.4 2.8-2.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-preview-workspace {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 80px;
  height: 100%;
  min-height: 0;
}

.matting-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid #edf1f7;
}

.matting-status {
  display: grid;
  grid-template-columns: 20px auto 170px auto;
  gap: 12px;
  align-items: center;
  color: #384256;
  font-size: 13px;
  font-weight: 800;
}

.matting-status i {
  width: 18px;
  height: 18px;
  color: #9a58f1;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2Zm6 13 .9 3.1L22 19l-3.1.9L18 23l-.9-3.1L14 19l3.1-.9L18 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2Zm6 13 .9 3.1L22 19l-3.1.9L18 23l-.9-3.1L14 19l3.1-.9L18 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-status b {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e8f1;
}

.matting-status em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #755af5, #f14fc0);
}

.matting-status strong {
  color: #7b8496;
  font-size: 13px;
  font-weight: 700;
}

.matting-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.matting-toolbar-actions button {
  height: 36px;
  padding: 0 18px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.matting-toolbar-actions button:last-child {
  border-color: #765cf4;
  color: #6d56f4;
  background: #fff;
}

.matting-stage {
  position: relative;
  display: grid;
  min-height: 0;
  margin: 14px 18px 10px;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #f8fbff;
}

.matting-preview-workspace.is-split .matting-stage {
  grid-template-columns: 1fr 1fr;
}

.matting-preview-workspace.is-single .matting-stage {
  place-items: center;
}

.matting-preview-workspace.is-stage .matting-stage {
  display: block;
}

.matting-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.matting-preview-workspace.is-single .matting-canvas.single {
  width: 100%;
  height: 100%;
}

.matting-preview-workspace.is-split .matting-canvas {
  width: 100%;
  height: 100%;
}

.matting-canvas.after,
.matting-canvas.single,
.matting-canvas.stage {
  background-image:
    var(--matting-image, none),
    linear-gradient(45deg, #e7edf5 25%, transparent 25%),
    linear-gradient(-45deg, #e7edf5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e7edf5 75%),
    linear-gradient(-45deg, transparent 75%, #e7edf5 75%);
  background-color: #fff;
  background-position: center, 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: contain, 24px 24px, 24px 24px, 24px 24px, 24px 24px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}

.matting-canvas.stage {
  width: 100%;
  height: 100%;
  background-size: contain, 24px 24px, 24px 24px, 24px 24px, 24px 24px;
}

.matting-canvas.single.is-source-waiting {
  background-color: #f8fbff;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.matting-source-ready-note {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  display: grid;
  gap: 4px;
  width: min(360px, calc(100% - 48px));
  padding: 14px 16px;
  border: 1px solid rgba(124, 92, 246, 0.18);
  border-radius: 16px;
  color: #4c5870;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  text-align: center;
  transform: translateX(-50%);
}

.matting-source-ready-note strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.matting-source-ready-note small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.matting-canvas span,
.matting-canvas em {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  color: #fff;
  background: rgba(45, 52, 66, 0.7);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.matting-canvas.after span {
  background: linear-gradient(135deg, #7c5cf6, #e758d1);
}

.matting-canvas em {
  left: 82px;
  color: #475467;
  background: rgba(255, 255, 255, 0.92);
}

.matting-compare-handle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 2px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  transform: translateX(-1px);
}

.matting-compare-handle::before {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #465267;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  content: "↔";
  transform: translate(-50%, -50%);
}

.matting-loupe {
  position: absolute;
  right: 64px;
  top: 25%;
  width: 172px;
  height: 172px;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 16px 40px rgba(24, 37, 64, 0.2);
}

.matting-loupe i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: var(--matting-image, none);
  background-position: 78% 22%;
  background-size: 260%;
  background-repeat: no-repeat;
}

.matting-loupe strong {
  position: absolute;
  left: 8px;
  bottom: -44px;
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  color: #475467;
  background: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  line-height: 32px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(24, 37, 64, 0.12);
}

.matting-loupe strong::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: #23c56e;
  content: "";
}

.matting-zoom-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dfe6f0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(24, 37, 64, 0.12);
}

.matting-zoom-controls button,
.matting-zoom-controls span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border: 0;
  border-right: 1px solid #e4e9f2;
  color: #344054;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
}

.matting-zoom-controls button:last-child {
  border-right: 0;
}

.matting-zoom-controls button:first-child::before,
.matting-zoom-controls button:last-child::before {
  width: 17px;
  height: 17px;
  background: currentColor;
  content: "";
}

.matting-zoom-controls button:first-child::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2v6l2.3-2.3 1.4 1.4L12 11.8 7.3 7.1l1.4-1.4L11 8V2h2Zm-2 20v-6l-2.3 2.3-1.4-1.4L12 12.2l4.7 4.7-1.4 1.4L13 16v6h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2v6l2.3-2.3 1.4 1.4L12 11.8 7.3 7.1l1.4-1.4L11 8V2h2Zm-2 20v-6l-2.3 2.3-1.4-1.4L12 12.2l4.7 4.7-1.4 1.4L13 16v6h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-zoom-controls button:last-child::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h7v2H6v5H4V4Zm14 2h-5V4h7v7h-2V6ZM6 13v5h5v2H4v-7h2Zm12 5v-5h2v7h-7v-2h5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h7v2H6v5H4V4Zm14 2h-5V4h7v7h-2V6ZM6 13v5h5v2H4v-7h2Zm12 5v-5h2v7h-7v-2h5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-export-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 192px 116px;
  gap: 16px;
  align-items: center;
  min-height: 80px;
  padding: 0 18px;
  border-top: 1px solid #edf1f7;
}

.matting-export-row.compact {
  grid-template-columns: minmax(0, 1fr) 214px;
  justify-items: end;
}

.matting-export-row > strong {
  color: #222b3d;
  font-size: 15px;
  font-weight: 900;
}

.matting-format-list {
  display: flex;
  gap: 10px;
}

.matting-format-list button {
  display: grid;
  place-items: center;
  min-width: 78px;
  height: 48px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
}

.matting-format-list button.active {
  border-color: #765cf4;
  color: #6d56f4;
  box-shadow: 0 0 0 1px rgba(118, 92, 244, 0.25) inset;
}

.matting-format-list b {
  font-size: 13px;
  font-weight: 850;
}

.matting-format-list small {
  color: #8a94a6;
  font-size: 11px;
  font-weight: 600;
}

.matting-download,
.matting-more-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.matting-download {
  color: #fff;
  background: linear-gradient(100deg, #755af5 0%, #8d55ef 46%, #f154b8 100%);
  box-shadow: 0 14px 28px rgba(128, 82, 241, 0.24);
}

.matting-download i {
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h3l-4 4-4-4h3V4ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h3l-4 4-4-4h3V4ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.matting-more-edit {
  border: 1px solid #dfe6f0;
  color: #344054;
  background: #fff;
}

.matting-records {
  padding: 14px 18px 16px;
}

.matting-records .tool-generation-head strong {
  color: #20293a;
  font-size: 15px;
  font-weight: 900;
}

.matting-records .tool-generation-head span {
  color: #7d8799;
  font-size: 12px;
  font-weight: 700;
}

.matting-records .tool-generation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
  overflow: hidden;
  padding: 9px 2px 3px;
}

.matting-records .tool-generation-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-rows: 118px auto;
  min-height: 190px;
  border-color: #dfe6f0;
  background: #fff;
}

.ordinary-matting-matting-1 .matting-records .tool-generation-item,
.ordinary-matting-matting-2 .matting-records .tool-generation-item {
  flex-basis: 124px;
  grid-template-rows: 124px auto;
  min-height: 176px;
}

.matting-records .tool-generation-item.active {
  border-color: #765cf4;
  box-shadow: 0 0 0 1px rgba(118, 92, 244, 0.32) inset;
}

.matting-records .tool-generation-thumb {
  height: 118px;
  border-radius: 7px;
  background-color: #f7f9fd;
  background-size: cover;
}

.ordinary-matting-matting-1 .matting-records .tool-generation-thumb,
.ordinary-matting-matting-2 .matting-records .tool-generation-thumb {
  height: 124px;
  background-size: cover;
}

.matting-records .tool-generation-copy strong {
  color: #30394a;
  font-size: 12px;
  font-weight: 800;
}

.matting-records .tool-generation-copy small {
  color: #8a94a6;
  font-size: 12px;
  font-weight: 600;
}

.matting-records .tool-generation-item em {
  right: 10px;
  bottom: 10px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #6d56f4;
  background: #f1efff;
  font-size: 11px;
  line-height: 24px;
  font-style: normal;
  font-weight: 850;
}

.ordinary-watermark-preview {
  width: 100%;
}

.ordinary-workbench .watermark-checker {
  width: 100%;
  aspect-ratio: 16 / 9;
  box-shadow: none;
}

.ordinary-workbench .preview-photo {
  inset: 0;
  border-radius: 8px;
}

.ordinary-id-photo-shell {
  grid-template-columns: 374px minmax(0, 1fr);
}

.ordinary-id-photo-preview {
  width: min(820px, 100%);
}

.ordinary-id-photo-shell .ordinary-preview-card {
  min-height: 560px;
}

.ordinary-id-photo-shell .id-photo-stage {
  border: 1px solid #e3e9f3;
  border-radius: 8px;
  box-shadow: none;
}

.ordinary-id-photo-shell .id-photo-result-card {
  border-radius: 8px;
  box-shadow: none;
}

.ordinary-id-photo-shell .color-dots {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 10px;
}

.ordinary-id-photo-shell .color-dot {
  width: 32px;
  height: 32px;
}

.ordinary-id-photo-shell select {
  height: 40px;
  border-radius: 8px;
}

.ordinary-id-photo-shell .id-photo-actions {
  grid-template-columns: 108px 1fr;
}

/* Locked ordinary blueprint: 05 AI证件照, starts below global header. */
.id-photo-blueprint {
  grid-template-columns: 377px minmax(0, 1fr);
  gap: 30px;
  min-height: calc(100vh - 60px);
  padding: 27px 26px 18px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 72% 4%, rgba(112, 148, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #f4f8ff 0%, #eef5ff 100%);
  color: #111827;
}

.id-photo-blue-left {
  display: grid;
  align-content: start;
  grid-template-rows: auto 48px;
  min-width: 0;
  max-height: calc(100vh - 106px);
}

.id-photo-blue-left-scroll {
  min-height: 0;
  overflow: auto;
  padding: 0 0 8px;
  overflow-x: hidden;
}

.id-photo-blue-left-scroll::-webkit-scrollbar,
.id-photo-history-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.id-photo-blue-left-scroll::-webkit-scrollbar-thumb,
.id-photo-history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(117, 131, 160, 0.28);
}

.id-photo-blue-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin: 0 0 11px 4px;
}

.id-photo-blue-title .ordinary-title-icon {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 14px 26px rgba(111, 96, 245, 0.28);
}

.id-photo-blue-title .ordinary-title-icon::before {
  width: 25px;
  height: 25px;
}

.id-photo-blue-title h1 {
  margin: 0;
  color: #111827;
  font-size: 27px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}

.id-photo-blue-title p {
  margin: 6px 0 0;
  color: #657287;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
}

.id-photo-blue-step {
  display: grid;
  gap: 7px;
  margin: 0 0 6px;
  padding: 9px 12px 8px;
  border: 1px solid rgba(211, 220, 235, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 10px 30px rgba(21, 37, 74, 0.055);
}

.id-photo-blue-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
}

.id-photo-blue-step-head b {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #6b5cf6;
  background: #ebe8ff;
  font-size: 13px;
  font-weight: 800;
}

.id-photo-blue-step-head strong {
  flex: 1 1 auto;
  color: #182033;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
}

.id-photo-step-aside {
  flex: 0 0 auto;
}

.id-photo-step-aside button {
  border: 0;
  color: #6b5cf6;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.id-photo-blue-upload {
  display: grid;
  grid-template-columns: minmax(0, 178px) 86px;
  grid-template-rows: 36px 16px;
  column-gap: 28px;
  row-gap: 4px;
  align-items: center;
}

.id-photo-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border: 1px solid #d9e0ec;
  border-radius: 6px;
  color: #4b5568;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.id-photo-upload-button i,
.id-photo-result-download span,
.id-photo-result-buttons span,
.id-photo-blue-tip i,
.id-photo-history-more i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
}

.id-photo-upload-button i {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4 7.5 8.5h3V15h3V8.5h3L12 4Zm-7 14h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4 7.5 8.5h3V15h3V8.5h3L12 4Zm-7 14h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.id-photo-upload-preview {
  grid-row: 1 / 3;
  grid-column: 2;
  width: 82px;
  height: 82px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, #dce9ff, #5aa3e8);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(21, 33, 58, 0.08);
}

.id-photo-blue-upload small {
  grid-column: 1;
  overflow: hidden;
  color: #7b8497;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-upload-status {
  display: inline-flex;
  grid-column: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 8px 0 12px;
  border: 1px solid rgba(86, 110, 255, 0.18);
  border-radius: 6px;
  background: rgba(246, 248, 255, 0.92);
}

.id-photo-upload-status strong {
  overflow: hidden;
  color: #2c3762;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-upload-remove {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #ef4444;
  font-size: 12px;
  font-weight: 800;
  line-height: 24px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.22);
}

.id-photo-upload-remove:hover {
  background: #dc2626;
}

.id-photo-blue-colors {
  display: grid;
  grid-template-columns: repeat(6, 44px) 44px;
  gap: 7px;
  justify-content: space-between;
}

.id-photo-blue-colors .color-dot,
.id-photo-color-more {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}

.id-photo-color-more input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.id-photo-color-more.active {
  border-color: #6f62ff;
  background: var(--id-photo-custom-color, #fff);
  box-shadow: 0 0 0 2px rgba(111, 98, 255, 0.18);
}

.id-photo-color-more.active::before {
  color: #fff;
  text-shadow: 0 1px 2px rgba(17, 24, 39, 0.6);
}

.id-photo-blue-colors .color-dot.active {
  border-color: #6f62ff;
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 2px #6f62ff;
}

.id-photo-blue-colors .color-dot.active::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  content: "✓";
  text-shadow: 0 1px 2px rgba(17, 24, 39, 0.18);
}

.id-photo-blue-colors .color-dot[style*="ffffff"].active::after,
.id-photo-blue-colors .color-dot[style*="f7f8fb"].active::after {
  color: #6f62ff;
  text-shadow: none;
}

.id-photo-color-more::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5d6678;
  font-size: 24px;
  letter-spacing: 2px;
  content: "...";
  pointer-events: none;
}

.id-photo-size-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 20px;
  min-width: 0;
}

.id-photo-size-current,
.id-photo-more-size {
  min-width: 0;
  height: 34px;
  border: 1px solid #d9e0ec;
  border-radius: 6px;
  background: #fff;
}

.id-photo-size-current {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  padding: 0 12px;
  text-align: left;
}

.id-photo-size-current strong {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.id-photo-size-current span {
  overflow: hidden;
  color: #687386;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-more-size {
  position: relative;
  display: grid;
  place-items: center;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.id-photo-more-size select {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.id-photo-blueprint .id-photo-outfit-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.id-photo-blueprint .id-photo-outfit-primary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.id-photo-blueprint .id-photo-outfit-option,
.id-photo-blueprint .id-photo-outfit-more {
  display: grid;
  grid-template-rows: 36px 15px;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 4px;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  color: #4b5568;
  background: #fff;
}

.id-photo-blueprint .id-photo-outfit-more {
  place-items: center;
}

.id-photo-blueprint .id-photo-outfit-option.active {
  border-color: #6f62ff;
  color: #6b5cf6;
  box-shadow: 0 0 0 1px #6f62ff inset;
}

.id-photo-blueprint .id-photo-outfit-more.active {
  border-color: #6f62ff;
  color: #6b5cf6;
  background: #fbfaff;
  box-shadow: 0 0 0 1px #6f62ff inset;
}

.id-photo-blueprint .id-photo-outfit-thumb {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: 4px;
  background: #f4f7fb center 36% / cover no-repeat;
}

.id-photo-blueprint .id-photo-outfit-option em,
.id-photo-blueprint .id-photo-outfit-more {
  overflow: hidden;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-blueprint .id-photo-outfit-more em {
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.id-photo-blueprint .id-photo-outfit-more i {
  display: block;
  color: #647086;
  font-size: 22px;
  font-style: normal;
  letter-spacing: 4px;
  content: "...";
}

.id-photo-blueprint .id-photo-outfit-more i::before {
  content: "...";
}

.id-photo-blueprint .id-photo-outfit-more-panel {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e3e8f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfcff, #f7f9fd);
}

.id-photo-blueprint .id-photo-outfit-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 18px;
}

.id-photo-blueprint .id-photo-outfit-more-head strong {
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
}

.id-photo-blueprint .id-photo-outfit-more-head span {
  color: #8a94a6;
  font-size: 11px;
  font-weight: 600;
}

.id-photo-blueprint .id-photo-outfit-more-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.id-photo-blueprint .id-photo-outfit-option.is-more {
  grid-template-rows: 38px 16px;
  min-height: 60px;
}

.id-photo-blueprint .id-photo-outfit-option.is-more .id-photo-outfit-thumb {
  height: 38px;
}

.id-photo-retouch-panel,
.id-photo-print-panel {
  display: grid;
  gap: 6px;
}

.id-photo-retouch-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 42px;
  gap: 11px;
  align-items: center;
}

.id-photo-retouch-row span,
.id-photo-dermabrasion span,
.id-photo-paper-select span,
.id-photo-switch-row span {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.id-photo-retouch-row strong {
  color: #4b5568;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.id-photo-retouch-row input[type="range"] {
  accent-color: #6f62ff;
}

.id-photo-dermabrasion,
.id-photo-paper-select {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.id-photo-dermabrasion div,
.id-photo-print-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.id-photo-dermabrasion button,
.id-photo-print-tabs button {
  height: 27px;
  border: 1px solid #dfe5ef;
  border-radius: 5px;
  color: #4b5568;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.id-photo-dermabrasion button.active,
.id-photo-print-tabs button.active {
  border-color: #6f62ff;
  color: #6b5cf6;
  background: #f7f5ff;
}

.id-photo-print-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 110px;
}

.id-photo-print-tabs i {
  position: relative;
  top: -10px;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  background: #ff5cc8;
  font-size: 9px;
  font-style: normal;
}

.id-photo-paper-select select {
  height: 28px;
  padding: 0 28px 0 10px;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  color: #4b5568;
  background: #fff;
  font-size: 12px;
}

.id-photo-switch-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

.id-photo-switch-row input {
  position: absolute;
  right: 0;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.id-photo-switch-row i {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #d9dee8;
}

.id-photo-switch-row i::before {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  content: "";
  transition: transform 0.18s ease;
}

.id-photo-switch-row input:checked + i {
  background: #6f62ff;
}

.id-photo-switch-row input:checked + i::before {
  transform: translateX(16px);
}

.id-photo-blue-actionbar {
  display: grid;
  align-items: end;
  padding: 7px 4px 0;
}

.id-photo-generate-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: linear-gradient(100deg, #5b49f5 0%, #794cf3 47%, #f24fca 100%) !important;
  box-shadow: 0 14px 26px rgba(110, 83, 241, 0.26) !important;
}

.id-photo-generate-button em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  margin-left: 18px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(109, 68, 225, 0.55);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.id-photo-generate-button em i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7ac8, #7b61ff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.36);
}

.id-photo-blue-main {
  display: grid;
  grid-template-rows: minmax(0, 576px) 270px auto;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.id-photo-blue-result-card,
.id-photo-history {
  border: 1px solid rgba(214, 223, 237, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px rgba(25, 43, 76, 0.08);
}

.id-photo-blue-result-card {
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  padding: 18px;
}

.id-photo-blue-result-card h2 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
}

.id-photo-blue-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 284px;
  gap: 16px;
  min-height: 0;
}

.id-photo-blue-canvas {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: #fbfcff;
}

.id-photo-blueprint .id-photo-output-preview {
  width: 320px;
  max-height: 460px;
  border: 0;
  border-radius: 0;
  background: #56a8e9;
  box-shadow: 0 16px 34px rgba(17, 30, 55, 0.14);
}

.id-photo-blueprint .id-photo-output-preview img {
  object-fit: cover;
  object-position: 72% 50%;
}

.id-photo-guide-frame {
  position: absolute;
  inset: 18px 15px 18px;
  display: none;
  border: 2px dashed rgba(255, 255, 255, 0.82);
  pointer-events: none;
}

.id-photo-output-preview.show-guides .id-photo-guide-frame {
  display: block;
}

.id-photo-output-preview.show-guides::before,
.id-photo-output-preview.show-guides::after {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.55);
  content: "";
  pointer-events: none;
}

.id-photo-output-preview.show-guides::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.id-photo-output-preview.show-guides::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.id-photo-result-panel {
  min-width: 0;
}

.id-photo-blueprint .id-photo-result-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 48px 44px;
  height: 100%;
  padding: 18px 16px;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.id-photo-result-card h3 {
  margin: 0 0 14px;
  color: #1f2937;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
}

.id-photo-blueprint .id-photo-result-meta {
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 0;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #edf1f7;
  overflow: hidden;
}

.id-photo-blueprint .id-photo-result-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.id-photo-blueprint .id-photo-result-meta strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.id-photo-blueprint .id-photo-result-meta .id-photo-status-row {
  justify-content: flex-start;
}

.id-photo-blueprint .id-photo-result-meta .id-photo-status-row strong {
  padding: 5px 8px;
  border-radius: 999px;
  color: #18a05e;
  background: #eaf9f0;
  font-size: 13px;
  font-weight: 800;
}

.id-photo-status-row i {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #dff7e8;
}

.id-photo-status-row i::before {
  display: grid;
  place-items: center;
  color: #18a05e;
  font-size: 12px;
  line-height: 16px;
  content: "✓";
}

.id-photo-result-meta .id-photo-bg-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.id-photo-result-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(100deg, #5b49f5 0%, #794cf3 48%, #f24fca 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(110, 83, 241, 0.24);
}

.id-photo-result-download span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h3l-4 4-4-4h3V4Zm-6 15h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h3l-4 4-4-4h3V4Zm-6 15h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.id-photo-result-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.id-photo-result-buttons .ghost-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  color: #4b5568;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.id-photo-result-buttons span {
  color: #667085;
}

.id-photo-result-buttons .ghost-btn:first-child span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12v5H6V3Zm-2 7h16v7h-3v4H7v-4H4v-7Zm5 6v3h6v-3H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12v5H6V3Zm-2 7h16v7h-3v4H7v-4H4v-7Zm5 6v3h6v-3H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.id-photo-result-buttons .ghost-btn:last-child span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 1 6.3 4H21l-4 4-4-4h3.05A5 5 0 1 0 17 12h2a7 7 0 1 1-7-7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 1 6.3 4H21l-4 4-4-4h3.05A5 5 0 1 0 17 12h2a7 7 0 1 1-7-7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.id-photo-history {
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  min-height: 0;
  padding: 16px 18px;
}

.id-photo-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.id-photo-history-head strong {
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.id-photo-history-head div {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #475467;
  font-size: 13px;
  font-weight: 600;
}

.id-photo-history-head label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.id-photo-history-head input {
  width: 18px;
  height: 18px;
  accent-color: #6f62ff;
}

.id-photo-history-head button {
  width: 22px;
  height: 22px;
  border: 0;
  color: #8b95a8;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h8l1 2h4v2H3V6h4l1-2Zm1 6h2v8H9v-8Zm4 0h2v8h-2v-8ZM6 10h12l-1 11H7L6 10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h8l1 2h4v2H3V6h4l1-2Zm1 6h2v8H9v-8Zm4 0h2v8h-2v-8ZM6 10h12l-1 11H7L6 10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.id-photo-history-head button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.id-photo-history-list {
  display: grid;
  grid-auto-columns: 170px;
  grid-auto-flow: column;
  gap: 14px;
  min-height: 0;
  overflow-x: auto;
  padding: 6px 4px 6px 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 137, 160, 0.22) transparent;
}

.id-photo-blueprint .id-photo-history-item,
.id-photo-blueprint .id-photo-history-more {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 96px auto;
  gap: 8px;
  min-width: 0;
  height: 198px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.id-photo-blueprint .id-photo-history-item.active {
  border-color: #6f62ff;
  box-shadow: 0 0 0 1px #6f62ff inset;
}

.id-photo-blueprint .id-photo-history-item.is-selected {
  border-color: #6f62ff;
  background: #f8f7ff;
  box-shadow: 0 0 0 1px #6f62ff inset;
}

.id-photo-history-select-mark {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #a7b0c0;
  border-radius: 4px;
  color: #fff;
  background: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.id-photo-history-item.is-selected .id-photo-history-select-mark {
  border-color: #6f62ff;
  background: #6f62ff;
}

.id-photo-blueprint .id-photo-history-thumb {
  display: block;
  width: 88px;
  height: 96px;
  justify-self: center;
  border-radius: 2px;
  background-position: center 28%;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.id-photo-blueprint .id-photo-history-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.id-photo-blueprint .id-photo-history-copy strong {
  overflow: hidden;
  color: #293244;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-blueprint .id-photo-history-copy small {
  overflow: hidden;
  color: #7b8497;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-blueprint .id-photo-history-more {
  place-items: center;
  color: #687386;
  background: linear-gradient(180deg, #fbfcff, #f7f9fd);
  text-align: center;
}

.id-photo-history-more i {
  width: 58px;
  height: 58px;
  color: #9ca8be;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 17h30v7H17v-7Zm-4 9h38v7H13v-7Zm4 9h30v18H17V35Zm10 6v6h10v-6H27Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 17h30v7H17v-7Zm-4 9h38v7H13v-7Zm4 9h30v18H17V35Zm10 6v6h10v-6H27Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.id-photo-history-more strong {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.id-photo-history-more span {
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}

.id-photo-blue-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 22px;
  color: #7b8497;
  font-size: 12px;
  font-weight: 500;
}

.id-photo-blue-tip i {
  width: 14px;
  height: 14px;
  color: #7b8497;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 17h2v-6h-2v6Zm0-8h2V7h-2v2Zm1 13a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 17h2v-6h-2v6Zm0-8h2V7h-2v2Zm1 13a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-inpaint-shell .ordinary-preview-card {
  align-items: stretch;
}

.ordinary-inpaint-shell .inpaint-workspace {
  grid-template-columns: 1fr 1fr;
}

.montage-page .ordinary-title {
  margin-bottom: 6px;
}

.montage-page .ordinary-title .panel-title {
  font-size: 23px;
}

.montage-page .ordinary-title p {
  font-size: 12px;
}

.montage-page {
  background:
    linear-gradient(180deg, rgba(245, 249, 255, 0.9), rgba(240, 245, 252, 0.92)),
    #f4f7fb;
}

.montage-left,
.montage-right {
  background: rgba(255, 255, 255, 0.96);
}

.montage-upload-main,
.montage-recommend button,
.ai-advice-btn,
.download-wide {
  border-radius: 8px;
}

.montage-upload-main {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 22px rgba(116, 91, 245, 0.18);
}

.montage-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.montage-side-records {
  min-height: 0;
  margin-top: 2px;
}

.montage-side-records .tool-generation-records {
  margin: 0;
}

.montage-side-records .tool-generation-list {
  max-height: 244px;
  overflow: auto;
}

@media (max-width: 1180px) {
  .ordinary-workbench {
    grid-template-columns: 340px minmax(0, 1fr);
    padding: 18px;
  }

  .ordinary-id-photo-shell {
    grid-template-columns: 330px minmax(0, 1fr);
  }

  .ordinary-preview-card .image-task-compare,
  .ordinary-inpaint-shell .inpaint-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .ordinary-workbench {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px;
  }

  .ordinary-workbench .ordinary-control {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-preview-column {
    max-height: none;
    overflow: visible;
  }

  .ordinary-toolbar-status {
    grid-template-columns: auto 1fr auto;
  }

  .ordinary-toolbar-status i {
    grid-column: 1 / -1;
  }

  .ordinary-preview-card {
    min-height: 360px;
  }

  .ordinary-records .tool-generation-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ordinary-records .tool-generation-item {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    flex-basis: auto;
    min-height: 64px;
  }

  .ordinary-records .tool-generation-thumb {
    width: 54px;
    height: 54px;
  }
}

/* Ordinary tool redesign blueprint workbench v1 */
/* Ordinary tool 06-14 blueprint completion, 2026-06-24 */
.ordinary-enhance-blueprint,
.ordinary-inpaint-blueprint {
  grid-template-columns: minmax(326px, 376px) minmax(0, 1fr);
  gap: 18px;
  padding: 20px 28px 26px;
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%),
    #f3f7fc;
}

.ordinary-enhance-blueprint .ordinary-control,
.ordinary-inpaint-blueprint .ordinary-control {
  height: calc(100vh - 112px) !important;
  max-height: calc(100vh - 112px) !important;
  border-color: #dde6f2;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(30, 43, 70, 0.08);
}

.ordinary-enhance-blueprint .ordinary-control-scroll,
.ordinary-inpaint-blueprint .ordinary-control-scroll {
  max-height: calc(100vh - 272px);
  padding: 18px;
}

.ordinary-enhance-blueprint .ordinary-preview-column,
.ordinary-inpaint-blueprint .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 196px;
  gap: 12px;
  max-height: calc(100vh - 112px);
}

.ordinary-enhance-blueprint .ordinary-preview-card,
.ordinary-inpaint-blueprint .ordinary-preview-card,
.ordinary-enhance-blueprint .ordinary-records,
.ordinary-inpaint-blueprint .ordinary-records {
  min-width: 0;
  overflow: hidden;
  border-color: #dae4f1;
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(28, 42, 71, 0.07);
}

.ordinary-enhance-blueprint .ordinary-preview-card,
.ordinary-inpaint-blueprint .ordinary-preview-card {
  padding: 16px;
}

.ordinary-blueprint-amplify {
  grid-template-columns: minmax(386px, 402px) minmax(0, 1fr);
  gap: 20px;
  padding: 20px 30px 24px;
}

.ordinary-blueprint-amplify .ordinary-control {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ordinary-blueprint-amplify .ordinary-control-scroll {
  max-height: none;
  overflow: visible;
  padding: 0;
}

.ordinary-blueprint-amplify .ordinary-title {
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin: 0 0 22px;
}

.ordinary-blueprint-amplify .ordinary-title-icon,
.ordinary-blueprint-amplify .ordinary-title p {
  display: none;
}

.ordinary-blueprint-amplify .ordinary-title .panel-title {
  font-size: 24px;
  line-height: 1.2;
}

.ordinary-blueprint-amplify .ordinary-title::after {
  display: none;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  color: #667189;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  content: "ⓘ 使用教程";
}

.ordinary-amplify-help {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 22px;
  padding: 0 10px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  color: #667189;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
}

.amplify-reset-button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.ordinary-blueprint-amplify .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 236px;
  margin-top: 50px;
  max-height: calc(100vh - 162px);
}

.ordinary-blueprint-amplify .ordinary-preview-card {
  padding: 16px;
}

.ordinary-blueprint-color .ordinary-title {
  justify-content: space-between;
  margin-bottom: 14px;
}

.ordinary-blueprint-color .ordinary-control {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.ordinary-blueprint-color .ordinary-control-scroll {
  max-height: none;
  overflow: visible;
}

.ordinary-blueprint-color .ordinary-title-icon {
  display: none;
}

.ordinary-blueprint-color .ordinary-title > div {
  min-width: 0;
}

.ordinary-blueprint-color .ordinary-title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordinary-blueprint-color .ordinary-title::after {
  display: none;
  content: none;
}

.ordinary-blueprint-color .enhance-tuning-step .ordinary-step-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ordinary-blueprint-color .enhance-tuning-step .ordinary-step-head span::after {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7257f2, #ea4eb0);
  content: "";
}

.ordinary-blueprint-color .enhance-tuning-step .ordinary-step-head span::before {
  order: 2;
  color: inherit;
  content: "";
}

.ordinary-blueprint-color .ordinary-step {
  gap: 11px;
  margin-bottom: 10px;
  padding: 12px;
}

.ordinary-blueprint-color .blueprint-range-row,
.ordinary-blueprint-color .blueprint-switch-row {
  min-height: 31px;
}

.ordinary-blueprint-color .enhance-analysis-card {
  gap: 7px;
  padding: 10px;
}

.ordinary-blueprint-colorize .ordinary-control {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.ordinary-blueprint-colorize .ordinary-control-scroll {
  max-height: none;
  overflow: visible;
}

.ordinary-blueprint-colorize .ordinary-step {
  gap: 8px;
  margin-bottom: 8px;
  padding: 11px;
}

.ordinary-blueprint-colorize .enhance-mode-tabs {
  gap: 8px;
}

.ordinary-blueprint-colorize .blueprint-chip-list button,
.ordinary-blueprint-colorize .enhance-output-grid button,
.ordinary-blueprint-colorize .enhance-format-tabs button {
  min-height: 32px;
}

.ordinary-blueprint-colorize .blueprint-range-row,
.ordinary-blueprint-colorize .blueprint-switch-row {
  min-height: 28px;
}

.ordinary-blueprint-colorize .enhance-more-row {
  margin: 0;
  padding: 8px 12px;
}

.ordinary-blueprint-colorize .ordinary-actions {
  padding-top: 10px;
  padding-bottom: 12px;
}

.ordinary-blueprint-anime .ordinary-control {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.ordinary-blueprint-anime .ordinary-control-scroll {
  max-height: none;
  overflow: visible;
}

.ordinary-blueprint-anime .ordinary-step {
  gap: 9px;
  margin-bottom: 10px;
  padding: 12px;
}

.ordinary-blueprint-anime .blueprint-range-row,
.ordinary-blueprint-anime .blueprint-switch-row {
  min-height: 30px;
}

.ordinary-blueprint-anime .enhance-scale-tabs button,
.ordinary-blueprint-anime .enhance-format-tabs button {
  min-height: 34px;
}

.anime-output-size-select {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  color: #4b556b;
  background: #fff;
  font-size: 13px;
  font-weight: 820;
}

.anime-output-size-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.anime-output-size-select strong {
  min-width: 0;
  overflow: hidden;
  color: #30394d;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-output-size-select::after {
  color: #8a94a8;
  content: "⌄";
  pointer-events: none;
}

.anime-reset-button {
  border: 0;
  color: #7657f2;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.ordinary-blueprint-old-photo .ordinary-control {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.ordinary-blueprint-old-photo .ordinary-control-scroll {
  max-height: none;
  overflow: visible;
}

.ordinary-blueprint-old-photo .ordinary-step {
  gap: 8px;
  margin-bottom: 8px;
  padding: 11px;
}

.ordinary-blueprint-old-photo .blueprint-chip-list button,
.ordinary-blueprint-old-photo .enhance-output-grid button,
.ordinary-blueprint-old-photo .enhance-format-tabs button {
  min-height: 32px;
}

.ordinary-blueprint-old-photo .blueprint-range-row,
.ordinary-blueprint-old-photo .blueprint-switch-row {
  min-height: 28px;
}

.ordinary-blueprint-old-photo .ordinary-actions {
  padding-top: 10px;
  padding-bottom: 4px;
}

.enhance-color-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 12px;
}

.enhance-refresh-action {
  height: 48px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #fff;
  color: #526078;
}

.enhance-refresh-action::before {
  font-size: 20px;
  font-weight: 850;
  content: "↻";
}

.ordinary-enhance-blueprint .ordinary-step,
.ordinary-inpaint-blueprint .ordinary-step {
  gap: 13px;
  margin-bottom: 12px;
  padding: 14px;
  border-color: #dfe7f3;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(38, 50, 78, 0.035);
}

.enhance-upload-card,
.inpaint-upload-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  min-height: 102px;
  padding: 10px;
  border: 1px solid #dbe4f1;
  border-radius: 8px;
  background: #fbfdff;
}

.enhance-upload-thumb,
.inpaint-upload-card > span {
  display: block;
  width: 88px;
  height: 68px;
  overflow: hidden;
  border-radius: 7px;
  background:
    linear-gradient(45deg, rgba(225, 232, 242, 0.85) 25%, transparent 25% 50%, rgba(225, 232, 242, 0.85) 50% 75%, transparent 75%) 0 0 / 18px 18px,
    #edf3fa;
  background-position: center;
  background-size: cover;
}

.enhance-upload-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  width: 100%;
  border: 1px dashed #cfd8e8;
  border-radius: 8px;
  color: #6e7890;
  background: #fbfdff;
  font-size: 13px;
  font-weight: 820;
}

.enhance-upload-drop i {
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L17 9H14V15H10V9H7L12 4ZM5 18H19V20H5V18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L17 9H14V15H10V9H7L12 4ZM5 18H19V20H5V18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.enhance-upload-card strong,
.enhance-upload-card small,
.inpaint-upload-card strong,
.inpaint-upload-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhance-upload-card strong,
.inpaint-upload-card strong {
  color: #20283a;
  font-size: 14px;
  font-weight: 900;
}

.enhance-upload-card small,
.inpaint-upload-card small {
  margin-top: 7px;
  color: #7d879a;
  font-size: 12px;
  font-weight: 700;
}

.enhance-upload-card div button {
  height: 32px;
  margin-top: 9px;
  padding: 0 12px;
  border: 1px solid #d9e3ef;
  border-radius: 7px;
  color: #4f56d9;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.enhance-upload-remove,
.inpaint-upload-card > button {
  width: 28px;
  height: 28px;
  border: 0;
  background: #fff;
  color: #758198;
}

.enhance-upload-remove::before,
.inpaint-upload-card > button::before {
  content: "⌫";
  font-size: 16px;
}

.blueprint-chip-list,
.enhance-output-grid,
.enhance-format-tabs,
.enhance-quality-tabs,
.inpaint-tool-tabs {
  display: grid;
  gap: 10px;
}

.blueprint-chip-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.enhance-mode-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.amplify-quality-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.amplify-quality-grid button {
  min-height: 58px;
  padding: 8px 7px;
  text-align: left;
}

.amplify-quality-grid button strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
}

.amplify-quality-grid button small {
  display: block;
  margin-top: 5px;
  color: #818ba0;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
}

.amplify-quality-grid button.active small {
  color: #6b4df6;
}

.enhance-scale-tabs,
.enhance-output-grid,
.enhance-format-tabs,
.enhance-quality-tabs {
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}

.blueprint-chip-list button,
.enhance-output-grid button,
.enhance-format-tabs button,
.enhance-quality-tabs button,
.inpaint-tool-tabs button,
.inpaint-mode-card-list button {
  min-height: 42px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  color: #30394d;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.blueprint-chip-list button.active,
.enhance-output-grid button.active,
.enhance-format-tabs button.active,
.enhance-quality-tabs button.active,
.inpaint-tool-tabs button.active,
.inpaint-mode-card-list button.active {
  border-color: #7b5cff;
  color: #6b4df6;
  background: linear-gradient(180deg, #fff 0%, #f6f3ff 100%);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, 0.16);
}

.enhance-output-grid button strong,
.enhance-output-grid button small {
  display: block;
}

.enhance-output-grid button small {
  margin-top: 3px;
  color: #8a93a7;
  font-size: 11px;
  font-weight: 650;
}

.blueprint-range-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(0, 1.55fr) 44px;
  gap: 10px;
  align-items: center;
  min-height: 34px;
}

.blueprint-range-row span,
.blueprint-range-row strong {
  color: #3d465a;
  font-size: 12px;
  font-weight: 780;
}

.blueprint-range-row span i {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  border: 1px solid #aeb8c9;
  border-radius: 50%;
  vertical-align: -2px;
}

.blueprint-range-row input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: #7b5cff;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
}

.blueprint-range-row input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #7458f4 0%,
    #df59ad var(--range-value, 50%),
    #dfe5ee var(--range-value, 50%),
    #dfe5ee 100%
  );
}

.blueprint-range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1.5px #d85aa8,
    0 4px 8px rgba(45, 56, 80, 0.16);
}

.blueprint-range-row input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #dfe5ee;
}

.blueprint-range-row input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7458f4, #df59ad);
}

.blueprint-range-row input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1.5px #d85aa8,
    0 4px 8px rgba(45, 56, 80, 0.16);
}

.blueprint-range-row strong {
  display: grid;
  place-items: center;
  min-height: 28px;
  border: 1px solid #dde5ef;
  border-radius: 7px;
  background: #f8fafc;
}

.blueprint-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  color: #3d465a;
  font-size: 13px;
  font-weight: 800;
}

.blueprint-switch-row span small {
  display: block;
  margin-top: 3px;
  color: #8a93a7;
  font-size: 11px;
  font-weight: 650;
}

.blueprint-switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.blueprint-switch-row i {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d9e1ee;
}

.blueprint-switch-row i::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(27, 38, 61, 0.16);
  content: "";
}

.blueprint-switch-row input:checked + i {
  background: linear-gradient(135deg, #7257f2, #ea4eb0);
}

.blueprint-switch-row input:checked + i::before {
  transform: translateX(16px);
}

.enhance-analysis-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e3e7f4;
  border-radius: 8px;
  background: #f7f6ff;
}

.enhance-analysis-progress {
  display: flex;
  align-items: center;
  gap: 9px;
}

.enhance-analysis-progress i {
  width: 26px;
  height: 26px;
  border: 6px solid #e7e1ff;
  border-top-color: #7b5cff;
  border-radius: 50%;
}

.enhance-analysis-progress strong {
  flex: 1;
  color: #293248;
  font-size: 13px;
}

.enhance-analysis-progress span,
.enhance-analysis-card p {
  color: #6f7890;
  font-size: 12px;
  font-weight: 700;
}

.enhance-analysis-card > b {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e8f2;
}

.enhance-analysis-card > b em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6f57f5, #e74eb0);
}

.enhance-analysis-card p {
  margin: 0;
}

.enhance-analysis-card p::before {
  margin-right: 8px;
  content: "○";
}

.enhance-analysis-card p.is-done::before {
  color: #16b978;
  content: "✓";
}

.enhance-analysis-card p.is-active::before {
  color: #7b5cff;
  content: "◌";
}

.enhance-more-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid #e1e7f1;
  border-radius: 8px;
  color: #667187;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.enhance-setting-label {
  color: #3b4458;
  font-size: 13px;
  font-weight: 850;
}

.enhance-cost-note {
  margin: 2px 0 0;
  color: #8892a6;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.enhance-preview-workspace,
.inpaint-blueprint-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  height: 100%;
}

.enhance-preview-toolbar,
.inpaint-preview-toolbar,
.enhance-stage-actions,
.inpaint-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.enhance-preview-toolbar strong,
.enhance-preview-headline strong {
  display: block;
  color: #1f2638;
  font-size: 15px;
  font-weight: 920;
}

.enhance-preview-toolbar span,
.enhance-preview-headline span {
  color: #7e879a;
  font-size: 12px;
  font-weight: 700;
}

.enhance-toolbar-actions,
.inpaint-preview-toolbar > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.enhance-toolbar-note {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #7a8498;
  background: #f4f7fc;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
}

.enhance-toolbar-actions button,
.inpaint-preview-toolbar button,
.enhance-toolbar-actions span,
.inpaint-preview-toolbar span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  color: #4b556b;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.enhance-color-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 30px;
}

.enhance-color-tabs button {
  position: relative;
  height: 30px;
  padding: 0;
  border: 0;
  color: #7b8497;
  background: transparent;
  font-size: 14px;
  font-weight: 850;
}

.enhance-color-tabs button.active {
  color: #7b5cff;
}

.enhance-color-tabs button.active::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7b5cff, #ee55b3);
  content: "";
}

.enhance-color-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
}

.enhance-color-view-tools,
.enhance-color-edit-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.enhance-color-view-tools button,
.enhance-color-edit-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  color: #4b556b;
  background: #fff;
  font-size: 13px;
  font-weight: 820;
}

.enhance-color-edit-tools {
  border: 1px solid #e0e6f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.enhance-color-edit-tools button,
.enhance-color-download {
  border: 0;
  border-radius: 0;
}

.enhance-color-edit-tools button + button,
.enhance-color-edit-tools button + .enhance-color-download {
  border-left: 1px solid #e6ebf3;
}

.enhance-color-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 36px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #7b5cff, #ee55b3);
  font-size: 13px;
  font-weight: 880;
  text-decoration: none;
  white-space: nowrap;
}

.enhance-colorize-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.enhance-colorize-head strong {
  display: block;
  color: #1f2638;
  font-size: 15px;
  font-weight: 920;
}

.enhance-colorize-head span {
  display: block;
  margin-top: 5px;
  color: #7e879a;
  font-size: 12px;
  font-weight: 700;
}

.enhance-colorize-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.enhance-colorize-head button,
.enhance-colorize-download {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  color: #4b556b;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.enhance-colorize-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #7b5cff, #ee55b3);
  text-decoration: none;
  white-space: nowrap;
}

.enhance-colorize-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(219, 226, 238, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 10px 22px rgba(25, 36, 62, 0.12);
}

.enhance-colorize-zoom button,
.enhance-colorize-zoom strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: #3f485d;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.enhance-colorize-zoom strong {
  min-width: 48px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e2e8f2;
}

.enhance-compare-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #eef3f9;
}

.enhance-image {
  position: relative;
  min-height: 390px;
  background-position: center;
  background-size: cover;
}

.enhance-image.before {
  filter: saturate(0.72) brightness(0.82);
}

.enhance-preview-amplify .enhance-image.before,
.enhance-preview-sharpen .enhance-image.before {
  filter: blur(2.2px) saturate(0.82) brightness(0.92);
}

.enhance-preview-amplify .enhance-image {
  background-size: 200% auto;
  transform: scale(var(--amplify-zoom, 1));
  transition: transform 150ms ease;
}

.enhance-preview-amplify .enhance-compare-stage:not(.is-design-locked) {
  grid-template-columns: var(--enhance-compare-position, 50%) calc(100% - var(--enhance-compare-position, 50%));
}

.enhance-preview-amplify .enhance-compare-stage.is-design-locked {
  background-position: center;
  background-size: var(--amplify-zoom-percent, 100%) auto;
  background-repeat: no-repeat;
  transition: background-size 150ms ease;
}

.enhance-preview-amplify .enhance-image.before {
  background-position: left center;
  filter: blur(0.8px) saturate(0.86) brightness(0.94);
}

.enhance-preview-amplify .enhance-image.after {
  background-position: right center;
  filter: saturate(1.08) contrast(1.03);
}

.enhance-preview-colorize .enhance-image.before,
.enhance-preview-old-photo .enhance-image.before {
  filter: grayscale(1) sepia(0.16) contrast(0.9);
}

.enhance-image.after {
  filter: saturate(1.12) contrast(1.04);
}

.enhance-preview-sharpen .enhance-image.after {
  filter: saturate(1.08) contrast(1.08);
}

.enhance-image span,
.inpaint-stage-head span {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  color: #fff;
  background: rgba(28, 35, 52, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.enhance-image.after span,
.inpaint-stage-head span {
  background: linear-gradient(135deg, #7056f2, #e94daf);
}

.enhance-compare-handle {
  position: absolute;
  top: 50%;
  left: var(--enhance-compare-position, 50%);
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(47, 58, 76, 0.82);
  box-shadow: 0 8px 18px rgba(20, 30, 50, 0.22);
  transform: translate(-50%, -50%);
}

.enhance-preview-amplify.is-preview-fullscreen {
  position: fixed;
  inset: 12px;
  z-index: 1200;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - 24px);
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(20, 28, 48, 0.28);
}

.enhance-preview-amplify.is-preview-fullscreen .enhance-compare-stage {
  min-height: 0;
}

.enhance-compare-handle::before {
  color: #fff;
  font-size: 18px;
  content: "↔";
}

.enhance-fullscreen-btn {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(219, 226, 238, 0.92);
  border-radius: 8px;
  color: #3f485d;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(25, 36, 62, 0.12);
}

.enhance-fullscreen-btn::before {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5H11V7H7V11H5V5ZM13 5H19V11H17V7H13V5ZM5 13H7V17H11V19H5V13ZM17 13H19V19H13V17H17V13Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5H11V7H7V11H5V5ZM13 5H19V11H17V7H13V5ZM5 13H7V17H11V19H5V13ZM17 13H19V19H13V17H17V13Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.enhance-preview-amplify .amplify-download-btn {
  position: absolute;
  right: 146px;
  bottom: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(100deg, #6d55f2, #ec4fb0);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(93, 67, 225, 0.22);
}

.enhance-loupe {
  position: absolute;
  z-index: 5;
  width: 164px;
  height: 150px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 14px 28px rgba(22, 32, 52, 0.22);
}

.enhance-loupe.before {
  left: 28px;
  bottom: 92px;
  backdrop-filter: blur(5px);
}

.enhance-loupe.after {
  right: 28px;
  bottom: 92px;
  background-position: center;
  background-size: 260%;
}

.enhance-loupe i {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 16px 16px;
}

.enhance-loupe b {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(25, 33, 49, 0.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.enhance-curve-panel,
.enhance-heatmap {
  position: absolute;
  right: 24px;
  bottom: 60px;
  z-index: 5;
  width: 184px;
  padding: 12px;
  border: 1px solid rgba(211, 219, 232, 0.92);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 36px rgba(28, 41, 70, 0.16);
}

.enhance-curve-panel strong,
.enhance-heatmap strong {
  display: inline-block;
  color: #2c3548;
  font-size: 12px;
  font-weight: 900;
}

.enhance-curve-panel > span {
  float: right;
  color: #69758a;
  font-size: 11px;
}

.enhance-curve-panel > i,
.enhance-heatmap > i {
  display: block;
  height: 118px;
  margin: 10px 0;
  border: 1px solid #e1e6ef;
  border-radius: 4px;
  background:
    linear-gradient(135deg, transparent 0 48%, #657084 49% 51%, transparent 52%),
    linear-gradient(180deg, rgba(99, 112, 132, 0.1), rgba(99, 112, 132, 0.02)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(145, 156, 174, 0.18) 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(145, 156, 174, 0.18) 23px);
}

.enhance-curve-panel div {
  display: flex;
  gap: 8px;
}

.enhance-curve-panel b {
  flex: 1;
  padding: 6px;
  border: 1px solid #e2e8f2;
  border-radius: 6px;
  text-align: center;
  color: #6b7488;
  font-size: 11px;
}

.enhance-curve-panel button {
  width: 100%;
  height: 30px;
  margin-top: 8px;
  border: 1px solid #dfe6f0;
  border-radius: 6px;
  background: #fff;
  color: #6b7488;
  font-size: 12px;
  font-weight: 750;
}

.enhance-heatmap > i {
  height: 86px;
  background:
    radial-gradient(circle at 42% 38%, rgba(29, 210, 177, 0.78), transparent 28%),
    radial-gradient(circle at 70% 52%, rgba(246, 219, 73, 0.86), transparent 30%),
    linear-gradient(135deg, #27248e, #1386d8 42%, #23d0a7 64%, #ffe34f 78%, #ee4b5f);
}

.enhance-heatmap span,
.enhance-heatmap em {
  color: #5f697d;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.enhance-heatmap em {
  float: right;
}

.enhance-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e0e7f2;
  border-radius: 8px;
  background: #fff;
}

.enhance-feature-strip div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  min-width: 0;
}

.enhance-feature-strip b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #6f56f2;
  background: #f3f0ff;
  font-size: 12px;
  font-weight: 950;
}

.enhance-feature-strip strong,
.enhance-feature-strip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhance-feature-strip strong {
  color: #2d3549;
  font-size: 12px;
  font-weight: 900;
}

.enhance-feature-strip span {
  color: #8791a4;
  font-size: 11px;
  font-weight: 650;
}

.old-photo-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e0e7f2;
  border-radius: 8px;
  background: #fff;
}

.old-photo-flow span {
  position: relative;
  color: #7b8496;
  text-align: center;
  font-size: 12px;
  font-weight: 850;
}

.old-photo-flow span.done {
  color: #22a86f;
}

.old-photo-flow span.active {
  color: #6d55f2;
}

.old-photo-flow i {
  display: none;
}

.enhance-stage-actions {
  justify-content: flex-end;
}

.enhance-stage-actions .primary-btn,
.inpaint-preview-actions .primary-btn {
  min-width: 150px;
  background: linear-gradient(100deg, #6d55f2, #ec4fb0);
}

.enhance-anime-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 1.15fr;
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.enhance-preview-anime {
  display: block;
  height: 100%;
}

/* Contract-review fixtures only; production remains driven by uploaded images and task results. */
.ordinary-blueprint-anime .anime-contract-stage {
  min-height: 0;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ordinary-blueprint-anime .anime-contract-history {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}

.ordinary-blueprint-old-photo .old-photo-contract-stage {
  min-height: 0;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ordinary-blueprint-old-photo .enhance-records-old-photo.anime-contract-history {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}

.ordinary-blueprint-old-photo .enhance-upload-contract-fixture {
  min-height: 109px;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ordinary-blueprint-sharpen .enhance-records-sharpen.anime-contract-history {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}

.anime-compare-card,
.anime-line-card,
.anime-result-card {
  min-height: 0;
  padding: 12px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
}

.anime-split-stage,
.anime-line-art {
  position: relative;
  height: calc(100% - 32px);
  min-height: 340px;
  overflow: hidden;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.anime-split-stage::before {
  position: absolute;
  inset: 0 50% 0 0;
  background: rgba(15, 20, 36, 0.28);
  content: "";
}

.anime-split-stage.is-source-waiting::before {
  display: none;
}

.anime-split-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.anime-split-stage.is-source-waiting .anime-split-image.before {
  clip-path: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.anime-split-stage.is-source-waiting .anime-split-image.after,
.anime-split-stage.is-source-waiting button[data-anime-compare-handle],
.anime-split-stage.is-source-waiting em {
  display: none !important;
}

.anime-split-image.after {
  clip-path: inset(0 0 0 var(--anime-compare-position, 50%));
}

.anime-split-stage span,
.anime-split-stage em {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 7px 11px;
  border-radius: 6px;
  color: #333b4d;
  background: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.anime-split-stage span {
  left: 12px;
}

.anime-split-stage em {
  right: 12px;
}

.anime-split-stage button {
  position: absolute;
  top: 50%;
  left: var(--anime-compare-position, 50%);
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

.anime-split-stage button::before,
.anime-split-stage button::after {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 500px;
  background: #fff;
  transform: translateX(-50%);
  content: "";
}

.anime-split-stage button::before {
  bottom: 100%;
}

.anime-split-stage button::after {
  top: 100%;
}

.anime-line-art {
  background:
    radial-gradient(circle at 46% 38%, transparent 0 19%, rgba(42, 47, 59, 0.46) 20% 20.6%, transparent 21%),
    radial-gradient(circle at 61% 39%, transparent 0 17%, rgba(42, 47, 59, 0.42) 18% 18.6%, transparent 19%),
    repeating-linear-gradient(110deg, transparent 0 12px, rgba(30, 36, 50, 0.18) 13px, transparent 14px),
    #fbfbfb;
}

.anime-line-art-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(1) contrast(2.5) brightness(1.65);
  transform: scale(var(--anime-line-zoom, 2));
  transform-origin: center;
}

.anime-line-art span {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 850;
}

.anime-line-tools {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  grid-template-columns: 32px 58px 32px 32px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e0e6ef;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(24, 36, 61, 0.14);
}

.anime-line-tools button,
.anime-line-tools b {
  display: grid;
  min-width: 0;
  height: 34px;
  place-items: center;
  border: 0;
  color: #465066;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.anime-line-tools button {
  cursor: pointer;
}

.anime-line-tools button:hover {
  color: #6d55f2;
  background: #f3f0ff;
}

.anime-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.anime-result-grid button {
  position: relative;
  height: 134px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #edf2f8;
}

.anime-result-grid button.active {
  border-color: #7b5cff;
}

.anime-result-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.anime-result-grid span {
  display: block;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.anime-result-grid b {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, #7056f2, #e94daf);
  font-size: 12px;
}

.anime-download-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 12px;
}

.anime-result-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  text-decoration: none;
}

.enhance-record-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.enhance-result-download {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(100deg, #6d55f2, #ec4fb0);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(93, 67, 225, 0.22);
}

.old-photo-download-btn {
  bottom: 72px;
  width: auto !important;
  min-width: 100px !important;
  max-width: 132px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 14px !important;
  line-height: 1 !important;
}

.sharpen-download-btn {
  right: 16px;
  bottom: 16px;
  width: auto !important;
  min-width: 100px !important;
  max-width: 132px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 14px !important;
  line-height: 1 !important;
}

.enhance-record-list,
.inpaint-record-list {
  display: flex;
  gap: 14px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 8px 2px 4px;
}

.enhance-record-item,
.inpaint-record-item {
  position: relative;
  display: grid;
  grid-template-rows: 100px auto auto;
  flex: 0 0 180px;
  min-height: 162px;
  padding: 9px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.enhance-record-item.active,
.inpaint-record-item.active {
  border-color: #7558f4;
  box-shadow: inset 0 0 0 1px rgba(117, 88, 244, 0.22);
}

.enhance-record-item.is-processing {
  border-color: rgba(117, 88, 244, 0.46);
  background: linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
}

.enhance-record-item.is-failed {
  border-color: rgba(239, 68, 68, 0.34);
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
}

.enhance-record-thumb,
.inpaint-record-item > span {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background-position: center;
  background-size: cover;
}

.enhance-record-thumb b {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 4px 7px;
  border-radius: 5px;
  color: #fff;
  background: rgba(24, 31, 47, 0.72);
  font-size: 11px;
  font-weight: 850;
}

.enhance-record-item strong,
.inpaint-record-item strong {
  margin-top: 8px;
  overflow: hidden;
  color: #30384c;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhance-record-item small,
.inpaint-record-item small {
  color: #8a93a6;
  font-size: 11px;
  font-weight: 650;
}

.enhance-record-item em,
.inpaint-record-item em {
  position: absolute;
  right: 10px;
  bottom: 9px;
  color: #20a76d;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.enhance-record-item .enhance-record-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(32, 167, 109, 0.10);
  line-height: 1;
}

.enhance-record-item.is-processing .enhance-record-status {
  color: #7654f2;
  background: rgba(117, 88, 244, 0.12);
}

.enhance-record-item.is-failed .enhance-record-status {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.10);
}

.enhance-record-item i {
  position: absolute;
  right: 10px;
  bottom: 12px;
  width: 70px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9f2;
}

.enhance-record-item i em {
  position: static;
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6d55f2, #e94daf);
}

.enhance-record-item.is-processing i {
  right: 10px;
  left: 10px;
  bottom: 30px;
  width: auto;
}

.ordinary-blueprint-sharpen {
  grid-template-columns: minmax(388px, 408px) minmax(0, 1fr);
  gap: 14px;
  padding: 20px 20px 22px;
}

.ordinary-blueprint-sharpen .ordinary-control-scroll {
  max-height: calc(100vh - 208px);
  padding: 14px;
}

.ordinary-blueprint-sharpen .ordinary-title {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.ordinary-blueprint-sharpen .ordinary-title::before {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid #e6ebf4;
  border-radius: 8px;
  color: #5b6578;
  background: #fff;
  font-size: 18px;
  font-weight: 750;
  content: "‹";
}

.ordinary-blueprint-sharpen .ordinary-title-icon {
  display: none;
}

.ordinary-blueprint-sharpen .ordinary-title .panel-title {
  font-size: 20px;
  line-height: 1.2;
}

.ordinary-blueprint-sharpen .ordinary-title p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}

.ordinary-blueprint-sharpen .ordinary-step {
  gap: 9px;
  margin-bottom: 10px;
  padding: 11px;
}

.ordinary-blueprint-sharpen .ordinary-step-head {
  min-height: 28px;
}

.ordinary-blueprint-sharpen .ordinary-step-head b {
  width: 19px;
  height: 19px;
  font-size: 12px;
}

.ordinary-blueprint-sharpen .ordinary-step-head strong {
  font-size: 14px;
}

.ordinary-blueprint-sharpen .ordinary-step-head span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #ebe8ff;
  border-radius: 7px;
  color: #6d55f2;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.ordinary-blueprint-sharpen .ordinary-step-head span::before {
  color: #7b5cff;
  content: "✦";
}

.ordinary-blueprint-sharpen .enhance-upload-card {
  grid-template-columns: 64px minmax(0, 1fr) 28px;
  min-height: 80px;
  padding: 9px;
  border-style: dashed;
  background: #fff;
}

.ordinary-blueprint-sharpen .enhance-upload-thumb {
  width: 64px;
  height: 64px;
}

.ordinary-blueprint-sharpen .enhance-upload-card small {
  margin-top: 6px;
}

.ordinary-blueprint-sharpen .enhance-upload-card div button {
  height: 26px;
  margin-top: 6px;
}

.ordinary-blueprint-sharpen .enhance-upload-remove {
  background: transparent;
}

.ordinary-blueprint-sharpen .enhance-upload-remove::before {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11H7.7L7 9Zm3 2v7h1.5v-7H10Zm2.5 0v7H14v-7h-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11H7.7L7 9Zm3 2v7h1.5v-7H10Zm2.5 0v7H14v-7h-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-sharpen .blueprint-range-row {
  grid-template-columns: 108px minmax(0, 1fr) 42px;
  gap: 8px;
  min-height: 34px;
}

.ordinary-blueprint-sharpen .blueprint-range-row input[type="range"] {
  accent-color: #d85aa8;
}

.ordinary-blueprint-sharpen .blueprint-range-row input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    #7458f4 0%,
    #d85aa8 var(--range-value, 50%),
    #dfe5ee var(--range-value, 50%),
    #dfe5ee 100%
  );
}

.ordinary-blueprint-sharpen .blueprint-range-row strong {
  min-height: 28px;
}

.ordinary-blueprint-sharpen .enhance-more-row {
  margin: 3px 0 0;
  min-height: 30px;
  padding: 7px 10px;
  cursor: pointer;
}

.ordinary-blueprint-sharpen .enhance-more-row.is-open {
  border-color: rgba(124, 87, 239, 0.34);
  color: #6b4df0;
  background: #fbf8ff;
}

.sharpen-advanced-settings {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e7defd;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #fbf8ff);
}

.ordinary-blueprint-sharpen .sharpen-settings-step {
  margin-bottom: 38px;
}

.ordinary-blueprint-sharpen .enhance-output-group {
  display: grid;
  gap: 5px;
}

.ordinary-blueprint-sharpen .enhance-output-group + .enhance-output-group {
  margin-top: 6px;
}

.ordinary-blueprint-sharpen .sharpen-output-step .enhance-output-group + .enhance-output-group {
  margin-top: -12px;
}

.ordinary-blueprint-sharpen .enhance-setting-label {
  margin: 0;
  color: #3d465a;
  font-size: 12px;
  font-weight: 780;
}

.ordinary-blueprint-sharpen .enhance-output-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.ordinary-blueprint-sharpen .enhance-format-tabs {
  grid-template-columns: repeat(2, minmax(0, 70px));
  gap: 7px;
}

.ordinary-blueprint-sharpen .enhance-quality-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ordinary-blueprint-sharpen .blueprint-chip-list button,
.ordinary-blueprint-sharpen .enhance-output-grid button,
.ordinary-blueprint-sharpen .enhance-format-tabs button,
.ordinary-blueprint-sharpen .enhance-quality-tabs button {
  min-height: 30px;
  border-radius: 7px;
  font-size: 12px;
}

.ordinary-blueprint-sharpen .enhance-output-grid button small {
  margin-top: 1px;
  font-size: 9px;
}

.ordinary-blueprint-sharpen .sharpen-size-group .enhance-output-grid button {
  min-height: 42px;
}

.ordinary-blueprint-sharpen .ordinary-actions {
  gap: 8px;
  padding: 9px 14px 12px;
}

.sharpen-primary-action {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 28px rgba(124, 87, 239, 0.23);
}

.sharpen-primary-action .ordinary-primary-icon {
  flex: 0 0 18px;
  color: #fff;
}

.sharpen-primary-action strong {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -2px;
  text-align: left;
}

.sharpen-primary-action em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.sharpen-primary-action em::before {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 225, 84, 0.34);
  font-size: 11px;
  content: "●";
}

.sharpen-time-note {
  margin-top: 8px;
  text-align: left;
}

.sharpen-time-note::before {
  margin-right: 6px;
  content: "ⓘ";
}

.ordinary-blueprint-sharpen .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 268px;
  gap: 10px;
  max-height: calc(100vh - 96px);
}

.ordinary-blueprint-sharpen .ordinary-preview-card {
  padding: 12px;
}

.ordinary-blueprint-sharpen .enhance-preview-sharpen {
  grid-template-rows: minmax(0, 1fr);
}

.sharpen-preview-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  height: 100%;
}

.ordinary-blueprint-sharpen .enhance-compare-stage {
  min-height: 0;
  height: 100%;
  border-radius: 9px;
}

.ordinary-blueprint-sharpen .enhance-image {
  min-height: 0;
  background-color: #f8fafc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ordinary-blueprint-sharpen .enhance-image.before {
  filter: blur(3.6px) saturate(0.82) brightness(0.92);
}

.ordinary-blueprint-sharpen .enhance-image.after {
  filter: none;
}

.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked .enhance-image {
  background-image: none !important;
  background-size: 1040px 506px;
  filter: none;
}

.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked .enhance-image.before {
  background: rgba(255, 255, 255, 0.02);
}

.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked .enhance-image.after {
  background: transparent;
}

.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked .enhance-image span,
.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked .enhance-compare-handle,
.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked .sharpen-preview-tools,
.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked .enhance-heatmap {
  display: none;
}

.ordinary-blueprint-sharpen .enhance-image span {
  top: 12px;
  left: 12px;
  height: 28px;
  border-radius: 7px;
  background: rgba(30, 38, 54, 0.74);
}

.ordinary-blueprint-sharpen .enhance-image.after span {
  background: rgba(30, 38, 54, 0.74);
}

.ordinary-blueprint-sharpen .enhance-compare-handle {
  width: 38px;
  height: 38px;
  background: rgba(40, 49, 66, 0.84);
}

.sharpen-preview-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.sharpen-preview-tools button {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: rgba(34, 44, 62, 0.72);
  font-size: 12px;
  font-weight: 850;
}

.sharpen-preview-tools button[aria-label] {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.sharpen-preview-tools button[aria-label]::before {
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h6v2H7v4H5V5Zm8 0h6v6h-2V7h-4V5ZM5 13h2v4h4v2H5v-6Zm12 0h2v6h-6v-2h4v-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h6v2H7v4H5V5Zm8 0h6v6h-2V7h-4V5ZM5 13h2v4h4v2H5v-6Zm12 0h2v6h-6v-2h4v-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-sharpen .enhance-heatmap {
  right: 16px;
  bottom: 16px;
  width: 162px;
  padding: 9px;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(38, 44, 58, 0.74);
  box-shadow: 0 14px 26px rgba(17, 24, 40, 0.18);
}

.ordinary-blueprint-sharpen .enhance-heatmap strong,
.ordinary-blueprint-sharpen .enhance-heatmap span,
.ordinary-blueprint-sharpen .enhance-heatmap em {
  color: #fff;
}

.ordinary-blueprint-sharpen .enhance-heatmap > i {
  height: 86px;
  margin: 8px 0 5px;
  border-color: rgba(255, 255, 255, 0.24);
}

.ordinary-blueprint-sharpen .enhance-feature-strip {
  min-height: 50px;
  padding: 9px 12px;
}

.ordinary-blueprint-sharpen .enhance-feature-strip div {
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 9px;
}

.ordinary-blueprint-sharpen .enhance-feature-strip b {
  width: 30px;
  height: 30px;
  color: #7658f4;
  background: #f1edff;
}

.sharpen-task-records {
  padding: 12px;
}

.sharpen-task-records .tool-generation-records {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.sharpen-task-records .tool-generation-head {
  margin-bottom: 8px;
}

.sharpen-refresh-button {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #e2e8f2;
  border-radius: 6px;
  color: #7b8497;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.sharpen-refresh-button::before {
  margin-right: 4px;
  content: "↻";
}

.sharpen-task-table {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e0e7f1;
  border-radius: 8px;
}

.sharpen-task-head,
.sharpen-task-row {
  display: grid;
  grid-template-columns: minmax(154px, 1.55fr) minmax(106px, 0.85fr) minmax(208px, 1.55fr) minmax(78px, 0.7fr) minmax(46px, 0.45fr) minmax(126px, 0.88fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sharpen-task-head {
  min-height: 30px;
  padding: 0 11px;
  color: #667287;
  background: #fbfcff;
  font-size: 12px;
  font-weight: 850;
}

.sharpen-task-row {
  min-height: 50px;
  padding: 7px 11px;
  border-top: 1px solid #edf1f7;
  color: #344054;
  font-size: 12px;
  font-weight: 780;
}

.sharpen-task-name {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sharpen-task-name span {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
}

.sharpen-task-name strong,
.sharpen-task-size,
.sharpen-task-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sharpen-task-name strong {
  color: #293244;
  font-size: 12px;
  font-weight: 850;
}

.sharpen-task-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.sharpen-task-settings b {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  border: 1px solid #e5eaf2;
  border-radius: 5px;
  color: #627087;
  background: #fbfcff;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.sharpen-task-status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #18a566;
}

.sharpen-task-status strong {
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.sharpen-task-status strong::before {
  margin-right: 4px;
  content: "✓";
}

.sharpen-task-row.is-processing .sharpen-task-status {
  color: #6d55f2;
}

.sharpen-task-row.is-processing .sharpen-task-status strong::before {
  content: "◌";
}

.sharpen-task-status i {
  display: block;
  flex: 1 1 56px;
  max-width: 72px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9f2;
}

.sharpen-task-status i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d55f2, #e94daf);
}

.sharpen-task-status small {
  color: #6d55f2;
  font-size: 11px;
  font-weight: 850;
}

.sharpen-task-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sharpen-task-actions button {
  height: 26px;
  padding: 0 5px;
  border: 1px solid #e3e8f1;
  border-radius: 6px;
  color: #667287;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.sharpen-task-actions button.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #7358f4, #9a65f2);
}

.sharpen-task-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 30px;
  padding-top: 6px;
  color: #5f697e;
  font-size: 12px;
  font-weight: 820;
}

.sharpen-task-footer div {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sharpen-task-footer button {
  width: 26px;
  height: 24px;
  border: 1px solid #e3e8f1;
  border-radius: 6px;
  color: #98a2b3;
  background: #f7f9fc;
}

.ordinary-sharpen-topbar {
  height: 70px;
}

.ordinary-sharpen-topbar-inner {
  width: min(1600px, calc(100% - 48px));
  gap: 24px;
}

.ordinary-sharpen-brand {
  min-width: 120px;
  font-size: 30px;
}

.ordinary-sharpen-nav {
  gap: 36px;
  color: #262c3d;
}

.ordinary-sharpen-nav a,
.ordinary-sharpen-nav button {
  height: 40px;
  font-size: 15px;
  font-weight: 760;
}

.ordinary-sharpen-actions {
  gap: 12px;
  height: 70px;
}

.ordinary-sharpen-member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(95deg, #7b4df3 0%, #e554a8 100%);
  box-shadow: 0 8px 18px rgba(153, 89, 233, 0.14);
  font-size: 14px;
  font-weight: 900;
}

.ordinary-sharpen-member span {
  width: 16px;
  height: 16px;
  background: currentColor;
  clip-path: polygon(50% 0, 64% 34%, 100% 34%, 71% 56%, 82% 100%, 50% 75%, 18% 100%, 29% 56%, 0 34%, 36% 34%);
}

.ordinary-sharpen-points {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  height: 36px;
  padding: 0 14px;
}

.ordinary-sharpen-points em {
  display: none;
}

.ordinary-sharpen-points span {
  width: 17px;
  height: 17px;
}

.ordinary-sharpen-plus {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e0e5ee;
  border-radius: 8px;
  color: #7f8898;
  background: #fff;
}

.ordinary-sharpen-plus::before {
  font-size: 20px;
  font-weight: 800;
  content: "+";
}

.ordinary-sharpen-caret {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
}

.ordinary-sharpen-caret::before {
  width: 8px;
  height: 8px;
  border: solid #6c7487;
  border-width: 0 1.6px 1.6px 0;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-sharpen-topbar .user-menu {
  top: 50px;
}

.ordinary-blueprint-sharpen .ordinary-control {
  height: calc(100vh - 114px) !important;
  max-height: calc(100vh - 114px) !important;
}

.ordinary-blueprint-sharpen .ordinary-preview-column {
  max-height: calc(100vh - 114px);
}

.ordinary-blueprint-sharpen .ordinary-control-scroll {
  max-height: calc(100vh - 252px);
  padding-bottom: 22px;
}

.ordinary-blueprint-sharpen .ordinary-preview-card {
  min-height: 0;
}

.ordinary-blueprint-sharpen .enhance-preview-sharpen {
  min-height: 0;
}

.ordinary-blueprint-sharpen .sharpen-preview-stack {
  gap: 10px;
}

.ordinary-blueprint-sharpen .sharpen-preview-tools button {
  min-width: 48px;
  height: 34px;
}

.ordinary-blueprint-sharpen .sharpen-preview-tools button[aria-label] {
  width: 34px;
  min-width: 34px;
}

.ordinary-blueprint-sharpen .sharpen-task-table {
  border-color: #dfe6f0;
}

.ordinary-blueprint-sharpen .sharpen-task-head,
.ordinary-blueprint-sharpen .sharpen-task-row {
  gap: 7px;
}

.ordinary-inpaint-blueprint {
  grid-template-columns: minmax(326px, 360px) minmax(0, 1fr);
}

.ordinary-inpaint-blueprint .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 226px;
}

.inpaint-tool-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ordinary-blueprint-text .inpaint-tool-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inpaint-detect-button {
  width: 100%;
  height: 42px;
  border: 1px solid #b9a9ff;
  border-radius: 8px;
  color: #6d55f2;
  background: #fbf9ff;
  font-size: 13px;
  font-weight: 900;
}

.inpaint-range-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.inpaint-mask-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.inpaint-mask-actions button {
  height: 40px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  color: #4d566b;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.inpaint-mode-card-list {
  display: grid;
  gap: 10px;
}

.inpaint-mode-card-list button {
  display: grid;
  gap: 5px;
  padding: 12px;
  text-align: left;
}

.inpaint-mode-card-list strong {
  color: #30384c;
  font-size: 13px;
}

.inpaint-mode-card-list span {
  color: #8791a4;
  font-size: 12px;
}

.inpaint-preview-toolbar {
  min-height: 42px;
  border-bottom: 1px solid #edf1f7;
  padding-bottom: 10px;
}

.inpaint-dual-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  min-height: 0;
}

.inpaint-dual-stage section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.inpaint-stage-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inpaint-stage-head strong {
  color: #222b3e;
  font-size: 15px;
  font-weight: 900;
}

.inpaint-stage-head span {
  position: static;
  height: 26px;
  color: #0d9868;
  background: #ddf7eb;
}

.inpaint-dual-stage section:first-child .inpaint-stage-head span {
  color: #e04e75;
  background: #ffe7ef;
}

.inpaint-canvas {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background-color: #eef3f9;
  background-position: center;
  background-size: cover;
}

.inpaint-canvas.after {
  filter: saturate(1.02) contrast(1.02);
}

.inpaint-blueprint-mask-canvas {
  z-index: 2;
}

.inpaint-mask-shape {
  position: absolute;
  left: 54%;
  top: 38%;
  width: 96px;
  height: 184px;
  border-radius: 50% 48% 44% 52%;
  background: rgba(232, 78, 112, 0.58);
  box-shadow: 0 0 0 14px rgba(232, 78, 112, 0.15);
  transform: rotate(7deg);
  pointer-events: none;
}

.ordinary-blueprint-watermark .inpaint-mask-shape {
  left: 46%;
  top: 48%;
  width: 196px;
  height: 82px;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: 48% 46% 54% 42%;
  background: rgba(109, 67, 196, 0.6);
  transform: rotate(-5deg);
}

.watermark-mask-text {
  position: absolute;
  left: 51%;
  top: 54%;
  color: rgba(255, 255, 255, 0.66);
  font-size: 42px;
  font-weight: 950;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.ordinary-blueprint-text .inpaint-mask-shape {
  left: 10%;
  top: 12%;
  width: 44%;
  height: 42%;
  border-radius: 12px;
  background: rgba(239, 82, 125, 0.42);
  box-shadow: none;
  transform: none;
}

.text-mask-lines {
  position: absolute;
  left: 12%;
  top: 15%;
  width: 42%;
  height: 38%;
  background:
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 0 0 / 88% 18px no-repeat,
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 0 54px / 96% 18px no-repeat,
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 0 108px / 74% 18px no-repeat;
}

.inpaint-preview-actions {
  justify-content: flex-end;
}

.inpaint-record-item {
  grid-template-rows: 96px auto auto;
  flex-basis: 168px;
}

.inpaint-record-item > span i {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: rgba(30, 39, 56, 0.65);
}

.inpaint-record-item.is-failed em {
  color: #d64d4d;
}

.ordinary-blueprint-object {
  grid-template-columns: minmax(326px, 337px) minmax(0, 1fr);
  gap: 18px;
  padding: 20px 30px 24px;
}

.ordinary-blueprint-object .ordinary-control {
  width: 100%;
}

.ordinary-blueprint-object .ordinary-control-scroll {
  max-height: calc(100vh - 196px);
  padding: 18px 20px 20px;
}

.ordinary-blueprint-object .ordinary-title {
  margin-bottom: 16px;
}

.ordinary-blueprint-object .ordinary-title-icon {
  display: none;
}

.ordinary-blueprint-object .ordinary-title .panel-title {
  font-size: 22px;
  line-height: 1.18;
}

.ordinary-blueprint-object .ordinary-title p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.ordinary-blueprint-object .ordinary-step {
  gap: 12px;
  margin: 0 -20px 0;
  padding: 16px 20px;
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}

.ordinary-blueprint-object .ordinary-step:last-child {
  border-bottom: 0;
}

.ordinary-blueprint-object .ordinary-step-head b {
  display: none;
}

.ordinary-blueprint-object .ordinary-step-head strong {
  font-size: 15px;
}

.ordinary-blueprint-object .ordinary-step-head span {
  display: none;
}

.ordinary-blueprint-object .inpaint-upload-card {
  grid-template-columns: 88px minmax(0, 1fr) 24px;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ordinary-blueprint-object .inpaint-upload-card > span {
  width: 88px;
  height: 58px;
  border-radius: 7px;
}

.ordinary-blueprint-object .inpaint-upload-card > button::before {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7V5.5C8 4.1 9.1 3 10.5 3H13.5C14.9 3 16 4.1 16 5.5V7H19V9H17.8L16.9 19.2C16.8 20.2 15.9 21 14.9 21H9.1C8.1 21 7.2 20.2 7.1 19.2L6.2 9H5V7H8ZM10 7H14V5.5C14 5.2 13.8 5 13.5 5H10.5C10.2 5 10 5.2 10 5.5V7ZM8.2 9L9 19H15L15.8 9H8.2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7V5.5C8 4.1 9.1 3 10.5 3H13.5C14.9 3 16 4.1 16 5.5V7H19V9H17.8L16.9 19.2C16.8 20.2 15.9 21 14.9 21H9.1C8.1 21 7.2 20.2 7.1 19.2L6.2 9H5V7H8ZM10 7H14V5.5C14 5.2 13.8 5 13.5 5H10.5C10.2 5 10 5.2 10 5.5V7ZM8.2 9L9 19H15L15.8 9H8.2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-object .inpaint-upload-card strong {
  font-size: 14px;
  font-weight: 850;
}

.ordinary-blueprint-object .inpaint-upload-card small {
  margin-top: 4px;
  color: #7d879a;
}

.ordinary-blueprint-object .inpaint-tool-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ordinary-blueprint-object .inpaint-tool-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 7px;
}

.ordinary-blueprint-object .inpaint-tool-tabs button::before {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
}

.ordinary-blueprint-object .inpaint-tool-tabs button[data-inpaint-mode="brush"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20C4.8 17.5 5.8 15.5 7 14.2L15.7 5.5C16.5 4.7 17.8 4.7 18.6 5.5C19.4 6.3 19.4 7.6 18.6 8.4L9.9 17.1C8.6 18.4 6.5 19.3 4 20ZM8.4 15.6C7.9 16.1 7.4 16.9 7 17.7C7.9 17.3 8.6 16.9 9.1 16.4L17.2 8.3L16.5 7.6L8.4 15.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20C4.8 17.5 5.8 15.5 7 14.2L15.7 5.5C16.5 4.7 17.8 4.7 18.6 5.5C19.4 6.3 19.4 7.6 18.6 8.4L9.9 17.1C8.6 18.4 6.5 19.3 4 20ZM8.4 15.6C7.9 16.1 7.4 16.9 7 17.7C7.9 17.3 8.6 16.9 9.1 16.4L17.2 8.3L16.5 7.6L8.4 15.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-object .inpaint-tool-tabs button[data-inpaint-mode="rect"]::before {
  background: none;
  border: 2px solid currentColor;
  border-radius: 1px;
}

.ordinary-blueprint-object .inpaint-tool-tabs button[data-inpaint-mode="lasso"]::before {
  background: none;
  border: 2px dashed currentColor;
  border-radius: 50%;
}

.ordinary-blueprint-object .inpaint-range-list {
  gap: 12px;
  margin-top: 14px;
}

.ordinary-blueprint-object .blueprint-range-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  min-height: 42px;
}

.ordinary-blueprint-object .blueprint-range-row input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
}

.ordinary-blueprint-object .blueprint-range-row span {
  grid-column: 1;
  grid-row: 1;
}

.ordinary-blueprint-object .blueprint-range-row strong {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: #3d465a;
}

.ordinary-blueprint-object .inpaint-mask-actions {
  gap: 16px;
  margin-top: 14px;
}

.ordinary-blueprint-object .inpaint-mask-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ordinary-blueprint-object .inpaint-mask-actions button::before {
  width: 15px;
  height: 15px;
  background: currentColor;
  content: "";
}

.ordinary-blueprint-object .inpaint-mask-actions button:first-child::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 4L20 8.5L9 19.5H4.5V15L15.5 4ZM15.5 6.8L6.5 15.8V17.5H8.2L17.2 8.5L15.5 6.8ZM12.5 18H20V20H10.5L12.5 18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 4L20 8.5L9 19.5H4.5V15L15.5 4ZM15.5 6.8L6.5 15.8V17.5H8.2L17.2 8.5L15.5 6.8ZM12.5 18H20V20H10.5L12.5 18Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-object .inpaint-mask-actions button:last-child::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7H17V9H7V7ZM7 15H17V17H7V15ZM4 10H14V12H4V10ZM10 12H20V14H10V12Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7H17V9H7V7ZM7 15H17V17H7V15ZM4 10H14V12H4V10ZM10 12H20V14H10V12Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-object .inpaint-mode-card-list {
  gap: 10px;
}

.ordinary-blueprint-object .inpaint-mode-card-list button {
  display: grid;
  grid-template-columns: 16px 16px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 7px;
  min-height: 57px;
  padding: 10px 12px;
  border-color: #d9dfe9;
  background: #fff;
  text-align: left;
}

.ordinary-blueprint-object .inpaint-mode-card-list button::before,
.ordinary-blueprint-object .inpaint-mode-card-list button::after {
  align-self: center;
  grid-row: 1;
  margin-top: 0;
  content: "";
}

.ordinary-blueprint-object .inpaint-mode-card-list button::before {
  width: 13px;
  height: 13px;
  grid-column: 1;
  border: 1.5px solid #9aa3b5;
  border-radius: 50%;
}

.ordinary-blueprint-object .inpaint-mode-card-list button.active::before {
  border-color: #7a5cf6;
  background: radial-gradient(circle at 50% 50%, #7a5cf6 0 35%, transparent 40%);
}

.ordinary-blueprint-object .inpaint-mode-card-list button.active {
  border-color: #bbaaff;
  background: #fbfaff;
}

.ordinary-blueprint-object .inpaint-mode-card-list button::after {
  width: 14px;
  height: 14px;
  grid-column: 2;
  background: #6e7688;
}

.ordinary-blueprint-object .inpaint-mode-card-list button.active::after {
  background: #7b5cff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L13.4 8.6L19 10L13.4 11.4L12 17L10.6 11.4L5 10L10.6 8.6L12 3ZM6 17H18V20H6V17Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L13.4 8.6L19 10L13.4 11.4L12 17L10.6 11.4L5 10L10.6 8.6L12 3ZM6 17H18V20H6V17Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-object .inpaint-mode-card-list button:not(.active)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 18C6.9 18 4 15.1 4 11.5S6.9 5 10.5 5 17 7.9 17 11.5c0 1.4-.4 2.6-1.1 3.7L20 19.3 18.6 20.7 14.6 16.7C13.5 17.5 12.1 18 10.5 18Zm0-2C13 16 15 14 15 11.5S13 7 10.5 7 6 9 6 11.5 8 16 10.5 16Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 18C6.9 18 4 15.1 4 11.5S6.9 5 10.5 5 17 7.9 17 11.5c0 1.4-.4 2.6-1.1 3.7L20 19.3 18.6 20.7 14.6 16.7C13.5 17.5 12.1 18 10.5 18Zm0-2C13 16 15 14 15 11.5S13 7 10.5 7 6 9 6 11.5 8 16 10.5 16Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-object .inpaint-mode-card-list strong {
  display: block;
  align-self: center;
  grid-row: 1;
  grid-column: 3;
  color: #394055;
  font-size: 14px;
  font-weight: 900;
}

.ordinary-blueprint-object .inpaint-mode-card-list span {
  display: block;
  grid-column: 2 / 4;
  grid-row: 2;
  margin-top: 0;
  color: #8b94a5;
  font-size: 12px;
  font-weight: 700;
}

.ordinary-blueprint-object .upload-hint {
  display: none;
}

.ordinary-blueprint-object .ordinary-actions {
  gap: 8px;
  padding: 0 20px 18px;
  border-top-color: transparent;
}

.inpaint-primary-action {
  min-height: 54px;
  border-radius: 8px !important;
  box-shadow: 0 16px 28px rgba(124, 87, 239, 0.22);
}

.inpaint-cost-note {
  margin: 10px 0 0;
  text-align: center;
}

.ordinary-blueprint-object .inpaint-cost-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8a91a6;
  font-size: 12px;
  font-weight: 760;
}

.ordinary-blueprint-object .inpaint-cost-note::before {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7659f4, #8a6cff);
  color: #fff;
  content: "";
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.ordinary-blueprint-object .inpaint-cost-note::after {
  position: absolute;
  left: calc(50% - 19px);
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

.ordinary-blueprint-object .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 254px;
  max-height: calc(100vh - 112px);
}

.ordinary-blueprint-object .ordinary-preview-card {
  padding: 16px;
}

.ordinary-blueprint-object .inpaint-blueprint-preview {
  gap: 14px;
}

.ordinary-blueprint-object .inpaint-preview-toolbar {
  min-height: 44px;
  padding-bottom: 10px;
}

.ordinary-blueprint-object .inpaint-preview-toolbar button,
.ordinary-blueprint-object .inpaint-preview-toolbar span {
  min-width: 40px;
  height: 34px;
  border-radius: 7px;
}

.ordinary-blueprint-object .inpaint-dual-stage {
  gap: 14px;
}

.ordinary-blueprint-object .inpaint-stage-head strong {
  font-size: 14px;
}

.ordinary-blueprint-object .inpaint-stage-head span {
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 12px;
}

.ordinary-blueprint-object .inpaint-canvas {
  min-height: 0;
}

.ordinary-blueprint-object .inpaint-mask-shape {
  left: 64%;
  top: 40%;
  width: 90px;
  height: 178px;
}

.ordinary-blueprint-object .inpaint-preview-object .inpaint-mask-shape {
  display: none;
}

.ordinary-blueprint-watermark .inpaint-mask-shape {
  display: none;
}

.ordinary-blueprint-object .inpaint-preview-actions {
  gap: 12px;
}

.ordinary-blueprint-object .inpaint-preview-actions .ghost-btn,
.ordinary-blueprint-object .inpaint-preview-actions .primary-btn {
  min-width: 142px;
  height: 42px;
  border-radius: 7px;
}

.ordinary-blueprint-object .inpaint-records {
  padding: 14px 16px;
}

.ordinary-blueprint-object .inpaint-record-list {
  gap: 20px;
  padding-top: 8px;
}

.ordinary-blueprint-object .inpaint-record-item {
  grid-template-rows: 132px auto auto;
  flex: 0 0 196px;
  min-height: 198px;
  padding: 9px;
}

.ordinary-blueprint-object .inpaint-record-item > span {
  min-height: 0;
}

.ordinary-blueprint-object .inpaint-record-item.active::after {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #1fc36c;
  font-size: 13px;
  font-weight: 900;
  content: "✓";
}

.ordinary-blueprint-watermark {
  position: relative;
  grid-template-columns: minmax(340px, 362px) minmax(0, 1fr);
  gap: 18px;
  padding: 86px 30px 24px;
}

.ordinary-blueprint-watermark .ordinary-title {
  position: absolute;
  top: 20px;
  left: 30px;
  display: block;
  width: min(520px, calc(100vw - 60px));
  margin: 0;
}

.ordinary-blueprint-watermark .ordinary-title-icon {
  display: none;
}

.ordinary-blueprint-watermark .ordinary-title .panel-title {
  font-size: 24px;
  line-height: 1.18;
}

.ordinary-blueprint-watermark .ordinary-title p {
  margin-top: 8px;
  font-size: 13px;
}

.ordinary-blueprint-watermark .ordinary-control,
.ordinary-blueprint-watermark .ordinary-preview-column {
  height: calc(100vh - 196px) !important;
  max-height: calc(100vh - 196px) !important;
}

.ordinary-blueprint-watermark .ordinary-control-scroll {
  max-height: calc(100vh - 316px);
  padding: 18px;
}

.ordinary-blueprint-watermark .ordinary-step {
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
}

.ordinary-blueprint-watermark .ordinary-step-head {
  align-items: flex-start;
}

.ordinary-blueprint-watermark .ordinary-step-head b {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

.ordinary-blueprint-watermark .ordinary-step-head strong {
  font-size: 15px;
}

.ordinary-blueprint-watermark .ordinary-step-head span {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #e3e8f1;
  border-radius: 6px;
  color: #7b8497;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.ordinary-blueprint-watermark .ordinary-step-head span::before {
  margin-right: 4px;
  content: "ⓘ";
}

.ordinary-blueprint-watermark .inpaint-upload-step .ordinary-step-head {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 9px;
}

.ordinary-blueprint-watermark .inpaint-upload-step .ordinary-step-head strong {
  min-width: 0;
  white-space: nowrap;
}

.ordinary-blueprint-watermark .inpaint-upload-step .ordinary-step-head span {
  grid-column: 2;
  margin-left: 0;
  padding: 0;
  border: 0;
  color: #7d8798;
  background: transparent;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.ordinary-blueprint-watermark .inpaint-upload-step .ordinary-step-head span::before {
  content: none;
}

.ordinary-blueprint-watermark .inpaint-upload-card {
  grid-template-columns: 88px minmax(0, 1fr) 20px;
  gap: 12px;
  min-height: 74px;
  padding: 10px;
}

.ordinary-blueprint-watermark .inpaint-upload-card > span {
  width: 88px;
  height: 63px;
}

.ordinary-blueprint-watermark .inpaint-upload-card strong {
  font-size: 12px;
  font-weight: 850;
}

.ordinary-blueprint-watermark .inpaint-upload-card small {
  margin-top: 5px;
  font-size: 11px;
}

.ordinary-blueprint-watermark .inpaint-detect-button {
  height: 38px;
  border-color: #bfaeff;
  color: #6d55f2;
  background: #fbfaff;
}

.ordinary-blueprint-watermark .inpaint-tool-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ordinary-blueprint-watermark .inpaint-tool-tabs button {
  min-height: 36px;
}

.ordinary-blueprint-watermark .inpaint-range-list {
  gap: 14px;
  margin-top: 14px;
}

.ordinary-blueprint-watermark .blueprint-range-row {
  grid-template-columns: minmax(82px, 1fr) minmax(0, 1.45fr) 42px;
}

.watermark-protect-block {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.watermark-protect-block > strong {
  color: #384155;
  font-size: 13px;
  font-weight: 850;
}

.watermark-protect-block .blueprint-switch-row {
  min-height: 42px;
}

.watermark-more-row {
  margin: 6px 0 0;
  padding: 10px 0 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

.ordinary-blueprint-watermark .ordinary-actions {
  gap: 10px;
  padding: 12px 18px 16px;
}

.ordinary-blueprint-watermark .ordinary-actions .ghost-btn,
.ordinary-blueprint-watermark .ordinary-actions .primary-btn {
  height: 40px;
  border-radius: 7px;
}

.ordinary-blueprint-watermark .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 254px;
  gap: 12px;
}

.ordinary-blueprint-watermark .ordinary-preview-card {
  padding: 16px;
}

.ordinary-blueprint-watermark .inpaint-blueprint-preview {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
}

.ordinary-blueprint-watermark .inpaint-preview-toolbar {
  min-height: 42px;
  padding-bottom: 10px;
}

.ordinary-blueprint-watermark .inpaint-blueprint-preview {
  position: relative;
  padding-bottom: 54px;
}

.ordinary-blueprint-watermark .watermark-detect-tip {
  position: absolute;
  left: 0;
  bottom: 0;
}

.ordinary-blueprint-watermark .inpaint-preview-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
}

.ordinary-blueprint-watermark .inpaint-preview-toolbar button,
.ordinary-blueprint-watermark .inpaint-preview-toolbar span {
  min-width: 40px;
  height: 32px;
  border-radius: 7px;
}

.ordinary-blueprint-watermark .inpaint-dual-stage {
  gap: 18px;
}

.ordinary-blueprint-watermark .inpaint-stage-head span {
  display: none;
}

.ordinary-blueprint-watermark .inpaint-stage-head strong {
  font-size: 15px;
}

.ordinary-blueprint-watermark .inpaint-canvas {
  min-height: 0;
}

.ordinary-blueprint-watermark .inpaint-mask-shape {
  left: 60%;
  top: 64%;
  width: 210px;
  height: 82px;
  border: 2px dashed rgba(255, 255, 255, 0.94);
  border-radius: 44% 48% 40% 52%;
  background: rgba(112, 67, 188, 0.66);
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(6deg);
}

.ordinary-blueprint-watermark .watermark-mask-text {
  left: 60%;
  top: 64%;
  font-size: 44px;
  transform: translate(-50%, -50%) rotate(6deg);
}

.watermark-detect-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(430px, 50%);
  min-height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  color: #fff;
  background: rgba(28, 36, 50, 0.92);
  font-size: 12px;
  font-weight: 760;
}

.watermark-detect-tip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-detect-tip button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.ordinary-blueprint-watermark .inpaint-preview-actions {
  gap: 12px;
}

.ordinary-blueprint-watermark .inpaint-preview-actions .ghost-btn,
.ordinary-blueprint-watermark .inpaint-preview-actions .primary-btn {
  min-width: 132px;
  height: 40px;
  border-radius: 7px;
}

.ordinary-blueprint-watermark .inpaint-preview-actions .primary-btn::after {
  margin-left: 10px;
  content: "⌄";
}

.watermark-task-records {
  padding: 14px 16px;
}

.watermark-task-records .tool-generation-records {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.watermark-task-records .tool-generation-head {
  margin-bottom: 8px;
}

.watermark-clear-records {
  height: 26px;
  border: 0;
  color: #7f8798;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.watermark-clear-records::before {
  margin-right: 5px;
  content: "⌫";
}

.watermark-task-table {
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid #e6ebf3;
}

.watermark-task-head,
.watermark-task-row {
  display: grid;
  grid-template-columns: 54px minmax(160px, 1.6fr) minmax(98px, 0.8fr) minmax(142px, 1fr) minmax(112px, 1fr) minmax(96px, 0.6fr);
  align-items: center;
  gap: 12px;
}

.watermark-task-head {
  min-height: 32px;
  color: #6b7488;
  font-size: 12px;
  font-weight: 850;
}

.watermark-task-row {
  min-height: 42px;
  border-top: 1px solid #eef2f7;
  color: #364154;
  font-size: 12px;
  font-weight: 760;
}

.watermark-task-thumb {
  display: block;
  width: 38px;
  height: 28px;
  border-radius: 4px;
  background-position: center;
  background-size: cover;
}

.watermark-task-row strong,
.watermark-task-row > span:not(.watermark-task-thumb) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-task-row em {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #11a66a;
  font-style: normal;
  font-weight: 850;
}

.watermark-task-row.is-processing em {
  color: #4b8bf7;
}

.watermark-task-row.is-failed em {
  color: #ef4c68;
}

.watermark-task-row em i {
  display: block;
  width: 70px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf2;
}

.watermark-task-row em b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d55f2, #e94daf);
}

.watermark-task-row em small {
  color: #6b7488;
  font-size: 11px;
}

.watermark-task-row div {
  display: flex;
  gap: 12px;
}

.watermark-task-row div button,
.watermark-task-row div a {
  display: block;
  width: 18px;
  height: 18px;
  border: 0;
  color: #5f687b;
  background: currentColor;
}

.watermark-task-row div :is(button, a):nth-child(1) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h3l-4 4-4-4h3V4Zm-6 15h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h3l-4 4-4-4h3V4Zm-6 15h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.watermark-task-row div button:nth-child(2) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h6l2 2h8v10a2 2 0 0 1-2 2H4V6Zm2 4v8h12v-8H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h6l2 2h8v10a2 2 0 0 1-2 2H4V6Zm2 4v8h12v-8H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.watermark-task-row div button:nth-child(3) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-text {
  grid-template-columns: minmax(346px, 366px) minmax(0, 1fr);
  gap: 14px;
  padding: 8px 12px 16px;
}

.ordinary-blueprint-text .ordinary-title {
  display: none;
}

.ordinary-blueprint-text .ordinary-control {
  height: calc(100vh - 84px) !important;
  max-height: calc(100vh - 84px) !important;
}

.ordinary-blueprint-text .ordinary-control-scroll {
  max-height: calc(100vh - 206px);
  padding: 18px;
}

.ordinary-blueprint-text .ordinary-step {
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px;
}

.ordinary-blueprint-text .ordinary-step-head b {
  width: 20px;
  height: 20px;
}

.ordinary-blueprint-text .ordinary-step-head strong {
  font-size: 15px;
}

.ordinary-blueprint-text .ordinary-step-head span {
  font-size: 12px;
}

.ordinary-blueprint-text .inpaint-upload-card {
  min-height: 82px;
}

.ordinary-blueprint-text .inpaint-upload-card > span {
  width: 86px;
  height: 58px;
}

.ordinary-blueprint-text .inpaint-tool-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ordinary-blueprint-text .inpaint-tool-tabs button {
  min-height: 56px;
}

.ordinary-blueprint-text .inpaint-range-list {
  gap: 12px;
}

.ordinary-blueprint-text .blueprint-range-row {
  grid-template-columns: minmax(88px, 1fr) minmax(0, 1.4fr) 46px;
}

.ordinary-blueprint-text .inpaint-mask-actions {
  display: none;
}

.ordinary-blueprint-text .inpaint-mode-card-list button {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 42px;
}

.ordinary-blueprint-text .upload-hint {
  display: none;
}

.ordinary-blueprint-text .ordinary-actions {
  gap: 8px;
  padding: 12px 18px 18px;
}

.ordinary-blueprint-text .ordinary-actions .primary-btn {
  min-height: 56px;
  border-radius: 8px;
}

.ordinary-blueprint-text .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 252px;
  max-height: calc(100vh - 84px);
}

.ordinary-blueprint-text .ordinary-preview-card {
  padding: 18px 20px;
}

.ordinary-blueprint-text .ordinary-preview-head {
  align-items: center;
  margin-bottom: 12px;
}

.ordinary-blueprint-text .ordinary-preview-head h2 {
  font-size: 22px;
}

.ordinary-blueprint-text .ordinary-preview-head p {
  font-size: 13px;
}

.ordinary-blueprint-text .ordinary-preview-head > span {
  display: none;
}

.ordinary-blueprint-text .inpaint-blueprint-preview {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.ordinary-blueprint-text .inpaint-preview-toolbar {
  justify-content: flex-end;
  min-height: 46px;
  padding: 0;
  border-bottom: 0;
}

.ordinary-blueprint-text .inpaint-preview-toolbar button,
.ordinary-blueprint-text .inpaint-preview-toolbar span {
  min-width: 44px;
  height: 38px;
  border-radius: 8px;
}

.ordinary-blueprint-text .inpaint-dual-stage {
  gap: 18px;
}

.ordinary-blueprint-text .inpaint-dual-stage section {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
}

.ordinary-blueprint-text .inpaint-stage-head {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

.ordinary-blueprint-text .inpaint-stage-head strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  color: #fff;
  background: rgba(30, 36, 48, 0.86);
  font-size: 13px;
}

.ordinary-blueprint-text .inpaint-stage-head span {
  display: none;
}

.ordinary-blueprint-text .inpaint-canvas {
  min-height: 0;
  background-size: cover;
}

.ordinary-blueprint-text .inpaint-canvas.before {
  background-position: center top;
}

.ordinary-blueprint-text .inpaint-canvas.after {
  background-position: center top;
}

.ordinary-blueprint-text .text-canvas-tools {
  bottom: 14px;
}

.ordinary-blueprint-text .text-result-download {
  bottom: 14px;
}

.ordinary-blueprint-text .text-mask-lines {
  left: 7%;
  top: 10%;
  width: 52%;
  height: 72%;
  border-radius: 10px;
  background:
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 6% 5% / 48% 24px no-repeat,
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 4% 16% / 72% 22px no-repeat,
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 5% 27% / 68% 22px no-repeat,
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 8% 41% / 58% 22px no-repeat,
    linear-gradient(rgba(239, 82, 125, 0.62), rgba(239, 82, 125, 0.62)) 7% 64% / 82% 24px no-repeat;
}

.text-canvas-tools {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 28px);
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(225, 230, 239, 0.95);
  border-radius: 7px;
  color: #566177;
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 820;
  box-shadow: 0 12px 24px rgba(24, 36, 61, 0.12);
}

.text-canvas-tools span {
  color: #f05686;
}

.text-canvas-tools button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.text-result-download {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  height: 42px;
  padding: 0 18px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  color: #30394d;
  background: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 12px 24px rgba(24, 36, 61, 0.12);
}

.text-result-download::before {
  margin-right: 7px;
  content: "⇩";
}

.ordinary-blueprint-text .inpaint-records {
  padding: 14px 16px;
}

.ordinary-blueprint-text .inpaint-record-list {
  gap: 22px;
  padding-top: 8px;
}

.ordinary-blueprint-text .inpaint-record-item {
  grid-template-rows: 138px auto auto;
  flex: 0 0 196px;
  min-height: 198px;
}

.ordinary-blueprint-text .inpaint-record-item > span {
  min-height: 0;
}

@media (max-width: 1180px) {
  .ordinary-enhance-blueprint,
  .ordinary-inpaint-blueprint {
    grid-template-columns: 320px minmax(0, 1fr);
    padding: 16px;
  }

  .enhance-anime-layout {
    grid-template-columns: 1fr 1fr;
  }

  .anime-result-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .ordinary-enhance-blueprint,
  .ordinary-inpaint-blueprint {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .ordinary-enhance-blueprint .ordinary-control,
  .ordinary-inpaint-blueprint .ordinary-control {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-enhance-blueprint .ordinary-control-scroll,
  .ordinary-inpaint-blueprint .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
    padding: 16px;
  }

  .ordinary-enhance-blueprint .ordinary-preview-column,
  .ordinary-inpaint-blueprint .ordinary-preview-column {
    grid-template-rows: auto auto;
    margin-top: 0;
    max-height: none;
    overflow: visible;
  }

  .ordinary-enhance-blueprint .ordinary-title .panel-title,
  .ordinary-inpaint-blueprint .ordinary-title .panel-title {
    font-size: 22px;
    line-height: 1.18;
  }

  .ordinary-enhance-blueprint .ordinary-title p,
  .ordinary-inpaint-blueprint .ordinary-title p {
    font-size: 12px;
  }

  .ordinary-enhance-blueprint .ordinary-step-head strong,
  .ordinary-inpaint-blueprint .ordinary-step-head strong {
    font-size: 14px;
  }

  .ordinary-enhance-blueprint .primary-btn,
  .ordinary-inpaint-blueprint .primary-btn {
    font-size: 15px;
  }

  .enhance-compare-stage,
  .inpaint-dual-stage,
  .enhance-anime-layout {
    grid-template-columns: 1fr;
  }

  .enhance-preview-anime,
  .enhance-preview-anime .enhance-anime-layout {
    height: auto;
  }

  .enhance-preview-amplify .enhance-compare-stage {
    grid-template-columns: 1fr 1fr;
  }

  .enhance-preview-color .enhance-compare-stage {
    grid-template-columns: 1fr 1fr;
  }

  .enhance-preview-colorize .enhance-compare-stage {
    grid-template-columns: 1fr 1fr;
  }

  .enhance-preview-old-photo .enhance-compare-stage {
    grid-template-columns: 1fr 1fr;
  }

  .enhance-image,
  .inpaint-canvas,
  .anime-split-stage,
  .anime-line-art {
    min-height: 320px;
  }

  .enhance-feature-strip {
    grid-template-columns: 1fr 1fr;
  }

  .enhance-preview-toolbar,
  .inpaint-preview-toolbar,
  .enhance-stage-actions,
  .inpaint-preview-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .enhance-toolbar-actions,
  .inpaint-preview-toolbar > div {
    flex-wrap: wrap;
  }

  .enhance-color-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .enhance-color-edit-tools {
    max-width: 100%;
    overflow-x: auto;
  }

  .enhance-colorize-head {
    flex-wrap: wrap;
  }

  .enhance-preview-amplify .enhance-loupe {
    width: 132px;
    height: 118px;
  }

  .enhance-preview-amplify .enhance-loupe.before {
    left: 16px;
    bottom: 72px;
  }

  .enhance-preview-amplify .enhance-loupe.after {
    right: 16px;
    bottom: 72px;
  }
}

@media (max-width: 480px) {
  .ordinary-enhance-blueprint,
  .ordinary-inpaint-blueprint {
    padding: 12px;
  }

  .ordinary-enhance-blueprint .ordinary-step,
  .ordinary-inpaint-blueprint .ordinary-step {
    padding: 12px;
  }

  .enhance-upload-card,
  .inpaint-upload-card {
    grid-template-columns: 72px minmax(0, 1fr) 24px;
    min-height: 88px;
  }

  .enhance-upload-thumb,
  .inpaint-upload-card > span {
    width: 72px;
    height: 58px;
  }

  .blueprint-range-row {
    grid-template-columns: minmax(82px, 1fr) minmax(0, 1.25fr) 40px;
    gap: 8px;
  }

  .enhance-image,
  .inpaint-canvas,
  .anime-split-stage,
  .anime-line-art {
    min-height: 260px;
  }

  .enhance-preview-colorize .colorize-compare-stage {
    min-height: 260px;
  }

  .enhance-preview-amplify .enhance-loupe {
    width: 106px;
    height: 98px;
  }

  .enhance-preview-amplify .enhance-loupe.before {
    left: 10px;
    bottom: 58px;
  }

  .enhance-preview-amplify .enhance-loupe.after {
    right: 10px;
    bottom: 58px;
  }

  .enhance-fullscreen-btn {
    right: 10px;
    bottom: 10px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .enhance-colorize-zoom {
    right: 10px;
    bottom: 10px;
    gap: 3px;
    padding: 4px;
  }

  .enhance-colorize-zoom button,
  .enhance-colorize-zoom strong {
    min-width: 40px;
    height: 26px;
    padding: 0 5px;
    font-size: 11px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-sharpen .ordinary-control-scroll {
    max-height: calc(100vh - 236px);
    padding: 14px 12px 18px;
  }

  .ordinary-blueprint-sharpen .ordinary-step {
    gap: 7px;
    margin-bottom: 9px;
    padding: 9px;
  }

  .ordinary-blueprint-sharpen .ordinary-title {
    gap: 10px;
    margin-bottom: 8px;
  }

  .ordinary-blueprint-sharpen .ordinary-title p {
    margin-top: 2px;
    line-height: 1.25;
  }

  .ordinary-blueprint-sharpen .ordinary-step-head {
    min-height: 24px;
  }

  .ordinary-blueprint-sharpen .ordinary-step-head span {
    min-height: 24px;
    padding: 0 8px;
  }

  .ordinary-blueprint-sharpen .blueprint-range-row {
    min-height: 28px;
    gap: 7px;
  }

  .ordinary-blueprint-sharpen .blueprint-range-row strong {
    min-height: 26px;
  }

  .ordinary-blueprint-sharpen .enhance-upload-card {
    min-height: 74px;
    padding: 8px;
  }

  .ordinary-blueprint-sharpen .enhance-upload-thumb {
    height: 52px;
  }

  .ordinary-blueprint-sharpen .enhance-upload-card div button {
    height: 24px;
    margin-top: 4px;
  }

  .ordinary-blueprint-sharpen .enhance-more-row {
    min-height: 26px;
    padding: 5px 9px;
  }

  .ordinary-blueprint-sharpen .enhance-output-grid,
  .ordinary-blueprint-sharpen .enhance-format-tabs,
  .ordinary-blueprint-sharpen .enhance-quality-tabs {
    gap: 6px;
  }

  .ordinary-blueprint-sharpen .blueprint-chip-list button,
  .ordinary-blueprint-sharpen .enhance-output-grid button,
  .ordinary-blueprint-sharpen .enhance-format-tabs button,
  .ordinary-blueprint-sharpen .enhance-quality-tabs button {
    min-height: 28px;
    padding: 0 7px;
    font-size: 11px;
  }

  .ordinary-blueprint-sharpen .enhance-output-grid button small {
    margin-top: 1px;
    font-size: 9px;
  }

  .ordinary-blueprint-sharpen .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 248px;
  }

  .ordinary-blueprint-sharpen .enhance-feature-strip {
    min-height: 48px;
    padding: 8px 10px;
  }

  .sharpen-task-row {
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .ordinary-blueprint-sharpen .ordinary-actions {
    padding: 10px 12px 10px;
  }

  .ordinary-blueprint-sharpen .sharpen-primary-action {
    min-height: 52px;
  }
}

@media (max-width: 1180px) {
  .ordinary-blueprint-sharpen {
    grid-template-columns: 344px minmax(0, 1fr);
    padding: 16px;
  }

  .ordinary-blueprint-sharpen .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 252px;
  }

  .sharpen-task-head,
  .sharpen-task-row {
    grid-template-columns: minmax(154px, 1.45fr) minmax(100px, 0.8fr) minmax(196px, 1.35fr) minmax(82px, 0.7fr) minmax(48px, 0.45fr) minmax(126px, 0.8fr);
    gap: 8px;
  }

  .sharpen-task-actions {
    gap: 5px;
  }

  .sharpen-task-actions button {
    padding: 0 7px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-sharpen {
    grid-template-columns: 1fr;
  }

  .ordinary-blueprint-sharpen .ordinary-control-scroll {
    max-height: none;
  }

  .ordinary-blueprint-sharpen .ordinary-preview-column {
    grid-template-rows: auto auto;
    max-height: none;
  }

  .ordinary-blueprint-sharpen .ordinary-preview-card {
    min-height: 0;
  }

  .ordinary-blueprint-sharpen .enhance-preview-sharpen .enhance-compare-stage {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 1.78;
    min-height: 320px;
  }

  .ordinary-blueprint-sharpen .enhance-image {
    min-height: 320px;
  }

  .ordinary-blueprint-sharpen .enhance-heatmap {
    width: 144px;
  }

  .ordinary-blueprint-sharpen .enhance-heatmap > i {
    height: 70px;
  }

  .sharpen-task-records {
    min-height: 0;
  }

  .sharpen-task-records .tool-generation-records {
    grid-template-rows: auto auto auto;
    height: auto;
  }

  .sharpen-task-table {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .sharpen-task-head {
    display: none;
  }

  .sharpen-task-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border: 1px solid #e0e7f1;
    border-radius: 8px;
    background: #fff;
  }

  .sharpen-task-status {
    flex-wrap: wrap;
  }

  .sharpen-task-actions {
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-start;
  }

  .sharpen-task-footer {
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    padding-top: 4px;
  }

  .sharpen-task-footer div {
    position: static;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .ordinary-blueprint-sharpen .ordinary-title {
    gap: 10px;
  }

  .ordinary-blueprint-sharpen .ordinary-title .panel-title {
    font-size: 20px;
  }

  .ordinary-blueprint-sharpen .ordinary-title p {
    max-width: 100%;
  }

  .ordinary-blueprint-sharpen .enhance-output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ordinary-blueprint-sharpen .enhance-preview-sharpen .enhance-compare-stage {
    width: 100%;
    aspect-ratio: auto;
    min-height: 260px;
  }

  .ordinary-blueprint-sharpen .enhance-image {
    min-height: 260px;
  }

  .ordinary-blueprint-sharpen .enhance-image span {
    top: 10px;
    left: 10px;
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }

  .sharpen-preview-tools {
    top: 10px;
    right: 10px;
    gap: 6px;
  }

  .sharpen-preview-tools button {
    height: 28px;
    min-width: 38px;
    padding: 0 8px;
    font-size: 11px;
  }

  .sharpen-preview-tools button[aria-label] {
    width: 28px;
    min-width: 28px;
  }

  .ordinary-blueprint-sharpen .enhance-compare-handle {
    width: 34px;
    height: 34px;
  }

  .ordinary-blueprint-sharpen .enhance-heatmap {
    right: 10px;
    bottom: 10px;
    width: 118px;
    padding: 8px;
  }

  .ordinary-blueprint-sharpen .enhance-heatmap strong {
    font-size: 11px;
  }

  .ordinary-blueprint-sharpen .enhance-heatmap > i {
    height: 52px;
  }

  .ordinary-blueprint-sharpen .enhance-feature-strip {
    grid-template-columns: 1fr;
  }

  .sharpen-task-settings {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .ordinary-blueprint-sharpen {
    padding: 12px;
  }

  .ordinary-blueprint-sharpen .ordinary-control-scroll {
    padding: 12px;
  }

  .ordinary-blueprint-sharpen .ordinary-step {
    padding: 10px;
  }

  .ordinary-blueprint-sharpen .enhance-upload-card {
    grid-template-columns: 64px minmax(0, 1fr) 24px;
    min-height: 82px;
  }

  .ordinary-blueprint-sharpen .enhance-upload-thumb {
    width: 64px;
    height: 54px;
  }

  .ordinary-blueprint-sharpen .blueprint-range-row {
    grid-template-columns: minmax(88px, 1fr) minmax(0, 1.15fr) 38px;
    gap: 7px;
  }

  .ordinary-blueprint-sharpen .blueprint-range-row span,
  .ordinary-blueprint-sharpen .blueprint-range-row strong {
    font-size: 11px;
  }

  .ordinary-blueprint-sharpen .enhance-format-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sharpen-primary-action {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 2px;
    min-height: 58px;
  }

  .sharpen-primary-action em {
    grid-column: 2;
    justify-self: center;
    font-size: 11px;
  }

  .sharpen-task-actions button {
    height: 24px;
    padding: 0 6px;
    font-size: 10px;
  }

  .ordinary-blueprint-sharpen .enhance-preview-sharpen .enhance-compare-stage {
    width: 100%;
    aspect-ratio: auto;
    min-height: 230px;
  }

  .ordinary-blueprint-sharpen .enhance-image {
    min-height: 230px;
  }

  .ordinary-blueprint-sharpen .enhance-heatmap {
    display: none;
  }
}

@media (max-width: 1180px) {
  .ordinary-blueprint-object {
    grid-template-columns: 326px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .ordinary-blueprint-object .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 236px;
  }

  .ordinary-blueprint-object .inpaint-record-list {
    gap: 14px;
  }

  .ordinary-blueprint-object .inpaint-record-item {
    flex-basis: 176px;
    grid-template-rows: 112px auto auto;
    min-height: 178px;
  }
}

@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-object .inpaint-record-list {
    gap: 12px;
  }

  .ordinary-blueprint-object .inpaint-record-item {
    flex-basis: 160px;
    grid-template-rows: 100px auto auto;
    min-height: 166px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-object {
    grid-template-columns: 1fr;
  }

  .ordinary-blueprint-object .ordinary-control-scroll {
    max-height: none;
  }

  .ordinary-blueprint-object .ordinary-preview-column {
    grid-template-rows: auto auto;
    max-height: none;
  }

  .ordinary-blueprint-object .ordinary-preview-card {
    min-height: 0;
  }

  .ordinary-blueprint-object .inpaint-dual-stage {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ordinary-blueprint-object .inpaint-canvas {
    min-height: 300px;
  }

  .ordinary-blueprint-object .inpaint-record-item {
    flex-basis: auto;
  }

  .ordinary-blueprint-object .inpaint-record-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
  }

  .ordinary-blueprint-object .inpaint-record-item {
    grid-template-rows: 112px auto auto;
    min-width: 0;
    min-height: 178px;
  }
}

@media (max-width: 600px) {
  .ordinary-blueprint-object .ordinary-control-scroll {
    padding: 16px;
  }

  .ordinary-blueprint-object .ordinary-step {
    margin-right: -16px;
    margin-left: -16px;
    padding: 16px;
  }

  .ordinary-blueprint-object .inpaint-preview-toolbar {
    gap: 8px;
  }

  .ordinary-blueprint-object .inpaint-preview-toolbar > div {
    gap: 5px;
  }

  .ordinary-blueprint-object .inpaint-preview-toolbar button,
  .ordinary-blueprint-object .inpaint-preview-toolbar span {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }

  .ordinary-blueprint-object .inpaint-dual-stage {
    gap: 8px;
  }

  .ordinary-blueprint-object .inpaint-stage-head {
    align-items: flex-start;
    gap: 6px;
    flex-direction: column;
  }

  .ordinary-blueprint-object .inpaint-canvas {
    min-height: 220px;
  }

  .ordinary-blueprint-object .inpaint-mask-shape {
    left: 58%;
    top: 40%;
    width: 58px;
    height: 116px;
    box-shadow: 0 0 0 9px rgba(232, 78, 112, 0.15);
  }

  .ordinary-blueprint-object .inpaint-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ordinary-blueprint-object .inpaint-preview-actions .ghost-btn,
  .ordinary-blueprint-object .inpaint-preview-actions .primary-btn {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .ordinary-blueprint-object {
    padding: 12px;
  }

  .ordinary-blueprint-object .ordinary-title .panel-title {
    font-size: 20px;
  }

  .ordinary-blueprint-object .inpaint-upload-card {
    grid-template-columns: 72px minmax(0, 1fr) 24px;
  }

  .ordinary-blueprint-object .inpaint-upload-card > span {
    width: 72px;
    height: 52px;
  }

  .ordinary-blueprint-object .inpaint-tool-tabs button {
    min-height: 42px;
    font-size: 12px;
  }

  .ordinary-blueprint-object .blueprint-range-row {
    grid-template-columns: minmax(82px, 1fr) minmax(0, 1.15fr) 40px;
  }

  .ordinary-blueprint-object .inpaint-canvas {
    min-height: 176px;
  }

  .ordinary-blueprint-object .inpaint-stage-head strong {
    font-size: 12px;
  }

  .ordinary-blueprint-object .inpaint-stage-head span {
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
  }

  .ordinary-blueprint-object .inpaint-record-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ordinary-blueprint-object .inpaint-record-item {
    grid-template-rows: 92px auto auto;
    min-height: 158px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-object .ordinary-control-scroll {
    max-height: calc(100vh - 248px);
    padding: 14px;
  }

  .ordinary-blueprint-object .ordinary-step {
    gap: 9px;
    margin-right: -14px;
    margin-left: -14px;
    padding: 13px 14px;
  }

  .ordinary-blueprint-object .inpaint-upload-card {
    min-height: 70px;
  }

  .ordinary-blueprint-object .inpaint-upload-card > span {
    width: 78px;
    height: 52px;
  }

  .ordinary-blueprint-object .inpaint-tool-tabs button {
    min-height: 42px;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list {
    gap: 8px;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list button {
    min-height: 48px;
    padding: 9px 10px;
  }

  .ordinary-blueprint-object .inpaint-mode-step {
    padding-bottom: 0;
  }

  .ordinary-blueprint-watermark {
    padding-top: 16px;
  }

  .ordinary-blueprint-watermark .ordinary-title {
    display: none;
  }

  .ordinary-blueprint-watermark .ordinary-control,
  .ordinary-blueprint-watermark .ordinary-preview-column {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-watermark .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
    padding: 14px;
  }

  .ordinary-blueprint-watermark .ordinary-step {
    gap: 9px;
    margin-bottom: 10px;
    padding: 11px 12px;
  }

  .ordinary-blueprint-watermark .inpaint-upload-card {
    min-height: 76px;
  }

  .ordinary-blueprint-watermark .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 156px;
  }

  .ordinary-blueprint-watermark .watermark-task-head {
    min-height: 24px;
  }

  .watermark-task-row {
    min-height: 26px;
    gap: 6px;
  }

  .watermark-task-thumb {
    width: 32px;
    height: 24px;
  }

  .watermark-task-row em i {
    width: 48px;
  }
}

@media (max-width: 1180px) {
  .ordinary-blueprint-watermark {
    grid-template-columns: 332px minmax(0, 1fr);
    gap: 16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .ordinary-blueprint-watermark .ordinary-title {
    left: 16px;
  }

  .watermark-task-head,
  .watermark-task-row {
    grid-template-columns: 46px minmax(130px, 1.4fr) minmax(82px, 0.7fr) minmax(118px, 0.9fr) minmax(100px, 0.9fr) minmax(76px, 0.5fr);
    gap: 8px;
  }

  .watermark-task-row div {
    gap: 8px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-watermark {
    grid-template-columns: 1fr;
    padding-top: 86px;
  }

  .ordinary-blueprint-watermark .ordinary-title {
    top: 18px;
    left: 16px;
  }

  .ordinary-blueprint-watermark .ordinary-control,
  .ordinary-blueprint-watermark .ordinary-preview-column {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-watermark .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
  }

  .ordinary-blueprint-watermark .ordinary-preview-column {
    grid-template-rows: auto auto;
  }

  .ordinary-blueprint-watermark .ordinary-preview-card {
    min-height: 0;
  }

  .ordinary-blueprint-watermark .inpaint-dual-stage {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ordinary-blueprint-watermark .inpaint-canvas {
    min-height: 300px;
  }

  .watermark-detect-tip {
    width: 100%;
  }

  .watermark-task-table {
    display: grid;
    gap: 10px;
    overflow: visible;
    border-top: 0;
  }

  .watermark-task-head {
    display: none;
  }

  .watermark-task-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 7px 10px;
    min-height: 0;
    padding: 10px;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    background: #fff;
  }

  .watermark-task-thumb {
    grid-row: span 4;
    width: 48px;
    height: 48px;
  }

  .watermark-task-row div {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .ordinary-blueprint-watermark .ordinary-title .panel-title {
    font-size: 22px;
  }

  .ordinary-blueprint-watermark .ordinary-title p {
    font-size: 12px;
  }

  .ordinary-blueprint-watermark .ordinary-control-scroll {
    padding: 14px;
  }

  .ordinary-blueprint-watermark .ordinary-step {
    padding: 12px;
  }

  .ordinary-blueprint-watermark .inpaint-preview-toolbar {
    gap: 8px;
  }

  .ordinary-blueprint-watermark .inpaint-preview-toolbar > div {
    gap: 5px;
  }

  .ordinary-blueprint-watermark .inpaint-preview-toolbar button,
  .ordinary-blueprint-watermark .inpaint-preview-toolbar span {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }

  .ordinary-blueprint-watermark .inpaint-dual-stage {
    gap: 8px;
  }

  .ordinary-blueprint-watermark .inpaint-stage-head {
    min-height: 20px;
  }

  .ordinary-blueprint-watermark .inpaint-stage-head strong {
    font-size: 12px;
  }

  .ordinary-blueprint-watermark .inpaint-canvas {
    min-height: 214px;
  }

  .ordinary-blueprint-watermark .inpaint-mask-shape {
    width: 98px;
    height: 44px;
  }

  .ordinary-blueprint-watermark .watermark-mask-text {
    font-size: 24px;
  }

  .watermark-detect-tip {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 46px;
    padding: 8px 10px;
  }

  .watermark-detect-tip button {
    grid-column: 2;
    justify-self: start;
  }

  .ordinary-blueprint-watermark .inpaint-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ordinary-blueprint-watermark .inpaint-preview-actions .ghost-btn,
  .ordinary-blueprint-watermark .inpaint-preview-actions .primary-btn {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .ordinary-blueprint-watermark {
    padding: 82px 12px 12px;
  }

  .ordinary-blueprint-watermark .ordinary-title {
    top: 16px;
    left: 12px;
    width: calc(100vw - 24px);
  }

  .ordinary-blueprint-watermark .ordinary-title .panel-title {
    font-size: 20px;
  }

  .ordinary-blueprint-watermark .inpaint-upload-card {
    grid-template-columns: 72px minmax(0, 1fr) 24px;
  }

  .ordinary-blueprint-watermark .inpaint-upload-card > span {
    width: 72px;
    height: 52px;
  }

  .ordinary-blueprint-watermark .blueprint-range-row {
    grid-template-columns: minmax(78px, 1fr) minmax(0, 1.1fr) 38px;
  }

  .ordinary-blueprint-watermark .inpaint-canvas {
    min-height: 174px;
  }

  .watermark-task-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .watermark-task-thumb {
    width: 44px;
    height: 44px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-text {
    min-height: calc(100vh - 68px);
  }

  .ordinary-blueprint-text .ordinary-control,
  .ordinary-blueprint-text .ordinary-preview-column {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-text .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
    padding: 14px;
  }

  .ordinary-blueprint-text .ordinary-step {
    gap: 9px;
    margin-bottom: 9px;
    padding: 10px;
  }

  .ordinary-blueprint-text .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 122px;
  }

  .ordinary-blueprint-text .inpaint-records {
    padding: 8px 10px;
  }

  .ordinary-blueprint-text .inpaint-records .tool-generation-records {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-text .inpaint-record-list {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    gap: 8px;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-text .inpaint-record-item {
    grid-template-rows: 46px auto;
    min-height: 70px;
    padding: 6px;
  }

  .ordinary-blueprint-text .inpaint-record-item small {
    display: none;
  }
}

@media (max-width: 1180px) {
  .ordinary-blueprint-text {
    grid-template-columns: 326px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
  }

  .ordinary-blueprint-text .inpaint-record-list {
    gap: 14px;
  }

  .ordinary-blueprint-text .inpaint-record-item {
    flex-basis: 166px;
    grid-template-rows: 108px auto auto;
    min-height: 176px;
  }
}

@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-text .inpaint-record-list {
    gap: 12px;
  }

  .ordinary-blueprint-text .inpaint-record-item {
    flex-basis: 160px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-text {
    grid-template-columns: 1fr;
  }

  .ordinary-blueprint-text .ordinary-control,
  .ordinary-blueprint-text .ordinary-preview-column {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-text .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
  }

  .ordinary-blueprint-text .ordinary-preview-column {
    grid-template-rows: auto auto;
    max-height: none;
  }

  .ordinary-blueprint-text .ordinary-preview-card {
    min-height: 0;
  }

  .ordinary-blueprint-text .inpaint-dual-stage {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ordinary-blueprint-text .inpaint-canvas {
    min-height: 320px;
  }

  .ordinary-blueprint-text .inpaint-record-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
  }

  .ordinary-blueprint-text .inpaint-record-item {
    flex-basis: auto;
    grid-template-rows: 120px auto auto;
    min-width: 0;
    min-height: 188px;
  }
}

@media (max-width: 600px) {
  .ordinary-blueprint-text .ordinary-preview-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ordinary-blueprint-text .ordinary-preview-head h2 {
    font-size: 20px;
  }

  .ordinary-blueprint-text .inpaint-preview-toolbar {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ordinary-blueprint-text .inpaint-preview-toolbar > div {
    gap: 5px;
  }

  .ordinary-blueprint-text .inpaint-preview-toolbar button,
  .ordinary-blueprint-text .inpaint-preview-toolbar span {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }

  .ordinary-blueprint-text .inpaint-dual-stage {
    gap: 8px;
  }

  .ordinary-blueprint-text .inpaint-canvas {
    min-height: 224px;
  }

  .ordinary-blueprint-text .inpaint-stage-head strong {
    min-height: 24px;
    padding: 0 8px;
    font-size: 11px;
  }

  .text-canvas-tools {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 7px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }

  .text-result-download {
    right: 8px;
    bottom: 8px;
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .ordinary-blueprint-text .inpaint-record-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ordinary-blueprint-text .inpaint-record-item {
    grid-template-rows: 104px auto auto;
    min-height: 172px;
  }
}

@media (max-width: 480px) {
  .ordinary-blueprint-text {
    padding: 12px;
  }

  .ordinary-blueprint-text .ordinary-control-scroll {
    padding: 14px;
  }

  .ordinary-blueprint-text .ordinary-step {
    padding: 11px;
  }

  .ordinary-blueprint-text .inpaint-tool-tabs {
    gap: 7px;
  }

  .ordinary-blueprint-text .inpaint-tool-tabs button {
    min-height: 42px;
    font-size: 12px;
  }

  .ordinary-blueprint-text .blueprint-range-row {
    grid-template-columns: minmax(78px, 1fr) minmax(0, 1.1fr) 38px;
  }

  .ordinary-blueprint-text .inpaint-canvas {
    min-height: 178px;
  }

  .text-canvas-tools button:nth-of-type(n + 2) {
    display: none;
  }

  .ordinary-blueprint-text .inpaint-record-item {
    grid-template-rows: 92px auto auto;
    min-height: 158px;
  }
}

/* Ordinary tool 15 montage blueprint completion, 2026-06-24 */
.montage-page {
  grid-template-columns: minmax(374px, 398px) minmax(0, 1fr) 238px;
  gap: 22px;
  height: calc(100vh - 68px);
  min-height: 0;
  padding: 8px 34px 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%),
    #f3f7fc;
}

.montage-left,
.montage-right,
.montage-center {
  min-width: 0;
}

.montage-left {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-y: auto;
}

.montage-right {
  align-self: start;
  height: calc(100% - 60px);
  max-height: calc(100% - 60px);
  margin-top: 60px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(28, 42, 71, 0.07);
}

.montage-title {
  margin: 0 0 10px;
}

.montage-title .ordinary-title-icon {
  display: none;
}

.montage-title .panel-title {
  font-size: 28px !important;
  line-height: 1.12;
}

.montage-title p {
  margin-top: 5px;
  font-size: 13px !important;
}

.montage-step {
  padding: 12px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
}

.montage-panel-head {
  min-height: 24px;
  margin-bottom: 10px;
}

.montage-panel-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1e2638;
  font-size: 15px;
  font-weight: 900;
}

.montage-panel-head strong b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #6d55f2;
  font-size: 12px;
}

.montage-panel-head strong em {
  color: #7b8497;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.montage-help-dot {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid #aeb7c6;
  border-radius: 50%;
  color: #8a93a6;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.montage-ai-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  color: #d85fa3;
  background: #fff1f8;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.montage-panel-head button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0;
  border: 0;
  color: #687386;
  background: transparent;
  font-size: 12px;
  font-weight: 780;
}

.montage-panel-head button i {
  width: 14px;
  height: 14px;
  border: 1.8px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.montage-panel-head span {
  height: auto;
  padding: 0;
  color: #7b8497;
  background: transparent;
}

.montage-source-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.montage-source-slot,
.montage-upload-tile {
  min-height: 114px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
}

.montage-source-slot {
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
}

.montage-source-slot strong,
.montage-source-slot em {
  display: none;
}

.source-preview,
.source-empty {
  height: 100%;
  min-height: 114px;
  border-radius: 8px;
}

.montage-upload-tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #7c8596;
  cursor: pointer;
}

.montage-upload-tile i {
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.montage-upload-tile strong {
  color: #657086;
  font-size: 13px;
}

.montage-upload-tile span {
  font-size: 12px;
}

.montage-layout-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.montage-layout-options .template-thumb {
  grid-template-rows: 58px auto;
  min-width: 0;
  min-height: 92px;
  padding: 6px;
  text-align: center;
}

.montage-layout-options .template-name {
  text-align: center;
  white-space: nowrap;
}

.montage-ratio-tabs,
.montage-bg-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.montage-ratio-tabs button,
.montage-bg-tabs button {
  height: 32px;
  border: 1px solid #dfe7f2;
  border-radius: 7px;
  color: #5f687b;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.montage-ratio-tabs button.active,
.montage-bg-tabs button.active {
  border-color: #7658f4;
  color: #6d55f2;
  background: #f5f1ff;
}

.montage-size-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #667287;
  font-size: 12px;
  font-weight: 800;
}

.montage-size-row input {
  height: 34px;
  min-width: 0;
  border-radius: 7px;
}

.montage-style-step {
  display: grid;
  gap: 7px;
}

.montage-style-step .control-row {
  grid-template-columns: 54px minmax(0, 1fr) 46px;
  margin: 0;
}

.montage-style-step input[type="range"] {
  accent-color: #6d55f2;
}

.montage-style-step .control-row span,
.montage-style-step .control-row strong {
  font-size: 12px;
}

.montage-bg-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.montage-style-step .swatches {
  gap: 9px;
}

.montage-style-step .swatch {
  width: 27px;
  height: 27px;
  border-radius: 7px;
}

.montage-style-step .swatch.is-rainbow {
  background: conic-gradient(#f55, #fc4, #6d6, #5cf, #65f, #f5c, #f55);
}

.montage-left-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 10px;
  margin-top: 4px;
}

.montage-left-actions .download-wide {
  margin: 0;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(100deg, #6d55f2, #e94daf);
}

.montage-settings-button {
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  color: #5f687b;
  background: #fff;
}

.montage-settings-button::before {
  font-size: 24px;
  content: "⚙";
}

.montage-center {
  grid-template-rows: 48px minmax(0, 1fr) 182px;
  gap: 12px;
  padding: 0;
  overflow: hidden;
}

.montage-stage-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
}

.montage-layout-options .template-thumb.active,
.montage-layout-options .template-thumb.recommended.active,
.montage-filmstrip .template-thumb.active {
  border-color: #7658f4;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(118, 88, 244, 0.32);
}

.montage-layout-options .template-thumb.recommended:not(.active) {
  border-color: #dfe7f2;
  background: #fff;
}

.montage-layout-options .template-thumb.active .template-name,
.montage-layout-options .template-thumb.active small,
.montage-filmstrip .template-thumb.active .template-name,
.montage-filmstrip .template-thumb.active small {
  color: #7658f4;
}

.montage-layout-options .template-shape span,
.montage-filmstrip .template-shape span {
  background: #c7cfd8;
}

.montage-layout-options .template-thumb.recommended small,
.montage-filmstrip .template-thumb.recommended small {
  color: #7658f4;
  background: rgba(255, 255, 255, 0.92);
}

.montage-stage-head > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.montage-tool-groups {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.montage-undo-group,
.montage-zoom-group {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
}

.montage-stage-head .montage-undo-group button,
.montage-stage-head .montage-zoom-group button,
.montage-stage-head .montage-zoom-group span {
  min-width: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.montage-stage-head .montage-undo-group button + button,
.montage-stage-head .montage-zoom-group span,
.montage-stage-head .montage-zoom-group button + button {
  border-left: 1px solid #e5ebf4;
}

.montage-stage-head .montage-zoom-group span {
  min-width: 76px;
}

.montage-tool-icon {
  min-width: 44px !important;
  width: 44px;
  padding: 0 !important;
}

.montage-tool-icon::before {
  width: 20px;
  height: 20px;
  background: currentColor;
  content: "";
}

.montage-undo-btn::before,
.montage-redo-btn::before {
  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8 7.4H6.2l3.2-3.2L8 2.8 2.4 8.4 8 14l1.4-1.4-3.2-3.2h3.6c4.2 0 6.9 1.8 8.2 5.4l1.9-.7c-1.6-4.5-5-6.7-10.1-6.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8 7.4H6.2l3.2-3.2L8 2.8 2.4 8.4 8 14l1.4-1.4-3.2-3.2h3.6c4.2 0 6.9 1.8 8.2 5.4l1.9-.7c-1.6-4.5-5-6.7-10.1-6.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.montage-redo-btn::before {
  transform: scaleX(-1);
}

.montage-hand-tool::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11V5.5a1.5 1.5 0 0 1 3 0V10h1V4.5a1.5 1.5 0 0 1 3 0V10h1V6.5a1.5 1.5 0 0 1 3 0V14c0 4-2.6 7-7.1 7H11c-2.1 0-3.9-.9-5.1-2.6L2.7 14a1.7 1.7 0 0 1 2.6-2.1L8 14.4V11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11V5.5a1.5 1.5 0 0 1 3 0V10h1V4.5a1.5 1.5 0 0 1 3 0V10h1V6.5a1.5 1.5 0 0 1 3 0V14c0 4-2.6 7-7.1 7H11c-2.1 0-3.9-.9-5.1-2.6L2.7 14a1.7 1.7 0 0 1 2.6-2.1L8 14.4V11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.montage-fullscreen-tool::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h6v2H7v4H5V5Zm12 2h-4V5h6v6h-2V7ZM7 17h4v2H5v-6h2v4Zm12-4v6h-6v-2h4v-4h2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h6v2H7v4H5V5Zm12 2h-4V5h6v6h-2V7ZM7 17h4v2H5v-6h2v4Zm12-4v6h-6v-2h4v-4h2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-app-shell .montage-zoom-slider.is-hidden,
.montage-zoom-slider.is-hidden {
  display: none;
}

.montage-stage-head button,
.montage-stage-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  color: #4f5a70;
  background: #fff;
  font-size: 14px;
  font-weight: 850;
}

.montage-stage-head .download-wide,
.montage-top-download {
  min-width: 128px;
  margin: 0;
  border: 0;
  color: #fff;
  background: linear-gradient(100deg, #6d55f2, #e94daf);
}

.montage-canvas-viewport {
  position: relative;
  place-items: center;
  padding: 18px 26px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(28, 42, 71, 0.07);
}

.montage-blueprint-preview-image {
  position: absolute;
  inset: 24px 28px;
  z-index: 3;
  width: calc(100% - 56px);
  height: calc(100% - 48px);
  object-fit: contain;
  pointer-events: none;
}

.montage-blueprint-preview-image + .montage-canvas-shell {
  opacity: 0;
}

.montage-canvas-shell {
  justify-self: stretch;
  align-self: stretch;
  place-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
}

.montage-page .collage {
  justify-self: unsafe center;
  align-self: unsafe center;
  transform: scale(clamp(0.78, var(--montage-zoom, 0.86), 0.96));
  transform-origin: center;
  border-radius: 8px;
}

@media (min-width: 1440px) and (min-height: 900px) {
  .montage-page .collage {
    transform: scale(clamp(0.96, calc(var(--montage-zoom, 0.73) * 1.62), 1.22));
  }
}

.montage-filmstrip {
  height: 182px;
  padding: 12px;
}

.montage-filter-tabs {
  align-items: center;
  margin-bottom: 10px;
}

.montage-filter-tabs strong {
  margin-right: 12px;
  color: #1f2638;
  font-size: 15px;
  font-weight: 900;
}

.montage-filter-tabs span {
  margin-left: auto;
  color: #6b7488;
  font-size: 12px;
  font-weight: 850;
}

.montage-filmstrip .template-list {
  gap: 12px;
}

.montage-filmstrip .template-thumb {
  flex-basis: 86px;
  min-width: 86px;
  grid-template-rows: 66px auto;
  min-height: 102px;
}

.montage-right {
  padding: 14px 12px;
  overflow: hidden;
}

.right-title strong {
  color: #1f2638;
  font-size: 15px;
}

.right-title span,
.right-title button {
  padding: 0;
  border: 0;
  color: #8a93a6;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.montage-history-list {
  display: grid;
  gap: 12px;
  min-height: 0;
  margin-top: 12px;
  overflow-y: auto;
  padding: 2px 2px 4px;
}

.montage-history-card {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-rows: auto auto auto 26px;
  gap: 5px 10px;
  min-height: 130px;
  padding: 12px;
  border: 1px solid #e0e7f2;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.montage-history-card.active {
  border-color: #905cf6;
  box-shadow: inset 0 0 0 1px rgba(144, 92, 246, 0.25);
}

.montage-history-card > span {
  grid-row: span 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 7px;
  background: #eef2f8;
}

.montage-history-card i {
  background-position: center;
  background-size: cover;
}

.montage-history-card strong,
.montage-history-card small,
.montage-history-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.montage-history-card b,
.montage-history-card a {
  grid-row: 4;
}

.montage-history-card b:first-of-type,
.montage-history-card a:first-of-type {
  grid-column: 2;
  justify-self: start;
}

.montage-history-card b:last-of-type {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.montage-history-card strong {
  grid-column: 2;
  color: #2c3548;
  font-size: 13px;
  font-weight: 900;
}

.montage-history-card small {
  grid-column: 2;
  grid-row: 2;
}

.montage-history-card em {
  grid-column: 2;
  grid-row: 3;
}

.montage-history-card small,
.montage-history-card em {
  color: #7f899b;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.montage-history-card b,
.montage-history-card a {
  align-self: end;
  color: #4f5a70;
  font-size: 16px;
  text-decoration: none;
}

.montage-clear-history {
  height: 34px;
  margin-top: auto;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  color: #6b7488;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.montage-clear-history::before {
  margin-right: 6px;
  content: "⌫";
}

@media (max-height: 860px) and (min-width: 901px) {
  .montage-page {
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }

  .montage-center {
    grid-template-rows: 48px minmax(440px, auto) 168px;
  }
}

@media (max-width: 1280px) {
  .montage-page {
    grid-template-columns: 348px minmax(0, 1fr) 220px;
    gap: 14px;
    padding: 8px 16px 14px;
  }

  .montage-layout-options {
    gap: 7px;
  }

  .montage-history-card {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 112px;
  }

  .montage-history-card > span {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 900px) {
  .montage-page {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .montage-left,
  .montage-right {
    overflow: visible;
  }

  .montage-center {
    grid-template-rows: auto minmax(420px, auto) auto;
  }

  .montage-source-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .montage-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
}

@media (max-width: 600px) {
  .montage-page {
    padding: 10px 12px 12px;
  }

  .montage-title .panel-title {
    font-size: 24px !important;
  }

  .montage-source-grid,
  .montage-layout-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .montage-ratio-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .montage-stage-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .montage-stage-head > div {
    flex-wrap: wrap;
  }

  .montage-canvas-viewport {
    padding: 12px;
  }

  .montage-page .collage {
    margin-left: min(0px, calc((100% - var(--montage-frame-width, 560px)) / 3));
    transform: scale(clamp(0.28, var(--montage-zoom, 0.44), 0.48));
  }

  .montage-filmstrip .template-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .montage-filmstrip .template-thumb {
    min-width: 0;
    width: auto;
    flex-basis: auto;
  }

  .montage-history-list {
    grid-template-columns: 1fr;
  }
}

/* Ordinary tool blueprint topbar lock, 2026-06-24 */
.ordinary-blueprint-app-shell {
  min-height: 100vh;
  color: #12182a;
  background: #f3f7fc;
}

.ordinary-blueprint-app-shell .ordinary-blueprint-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  border-bottom: 1px solid #e4e9f2;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
}

.ordinary-blueprint-app-shell .ordinary-blueprint-topbar-inner {
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr) auto;
  gap: 26px;
  width: min(1476px, calc(100% - 60px));
  height: 56px;
  margin: 0 auto;
}

.ordinary-blueprint-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 112px;
  color: #161827;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.ordinary-blueprint-brand strong {
  color: #b64ff4;
  font: inherit;
  font-style: italic;
}

.ordinary-blueprint-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(22px, 3.25vw, 46px);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: #1d2435;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
  white-space: nowrap;
}

.ordinary-blueprint-nav a,
.ordinary-blueprint-nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.ordinary-blueprint-nav a.active,
.ordinary-blueprint-nav a.active-soft {
  color: #7559f5;
  background: #f2efff;
  border-radius: 4px;
}

.ordinary-blueprint-app-shell:has(.ordinary-matting-matting-2) .ordinary-blueprint-nav a.active,
.ordinary-blueprint-app-shell:has(.ordinary-matting-matting-2) .ordinary-blueprint-nav a.active-soft {
  position: relative;
  color: #5f4df2;
  background: transparent;
  border-radius: 0;
}

.ordinary-blueprint-app-shell:has(.ordinary-matting-matting-2) .ordinary-blueprint-nav a.active::after,
.ordinary-blueprint-app-shell:has(.ordinary-matting-matting-2) .ordinary-blueprint-nav a.active-soft::after {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -11px;
  height: 3px;
  border-radius: 999px;
  background: #6f55f5;
  content: "";
}

.ordinary-blueprint-nav a span {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.8px 1.8px 0;
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-blueprint-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  height: 56px;
}

.ordinary-blueprint-actions button {
  cursor: pointer;
}

.ordinary-blueprint-member-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 94px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #e7528f;
  background: #fff0ed;
  font-size: 13px;
  font-weight: 900;
}

.ordinary-blueprint-member-center span {
  width: 15px;
  height: 15px;
  background: #f26f2d;
  clip-path: polygon(50% 7%, 62% 37%, 96% 28%, 78% 60%, 87% 94%, 50% 77%, 13% 94%, 22% 60%, 4% 28%, 38% 37%);
}

.ordinary-blueprint-recharge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 70px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(95deg, #7b4df3 0%, #e554a8 100%);
  box-shadow: 0 8px 18px rgba(153, 89, 233, 0.14);
  font-size: 13px;
  font-weight: 900;
}

.ordinary-blueprint-vip {
  display: inline-grid;
  grid-template-columns: 18px auto 10px;
  align-items: center;
  gap: 9px;
  height: 36px;
  min-width: 126px;
  padding: 0 16px;
  border: 1px solid #eadfcb;
  border-radius: 8px;
  color: #3d3326;
  background: linear-gradient(180deg, #fffaf0, #fff7e5);
  box-shadow: none;
  font-size: 14px;
  font-weight: 900;
}

.ordinary-blueprint-vip span {
  width: 16px;
  height: 16px;
  background: #f2a619;
  clip-path: polygon(50% 7%, 63% 38%, 96% 28%, 80% 61%, 88% 94%, 50% 77%, 12% 94%, 20% 61%, 4% 28%, 37% 38%);
}

.ordinary-blueprint-vip strong {
  color: #2f271e;
  font-size: 14px;
  font-weight: 900;
}

.ordinary-blueprint-vip em {
  width: 8px;
  height: 8px;
  border: solid #847566;
  border-width: 0 1.6px 1.6px 0;
  font-style: normal;
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-blueprint-points {
  display: inline-grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 118px;
  padding: 0 12px;
  border: 1px solid #e0e5ee;
  border-radius: 8px;
  color: #475063;
  background: #fff;
  font-size: 13px;
  font-weight: 780;
}

.ordinary-blueprint-points span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #ffe4a8 0 18%, transparent 19%),
    linear-gradient(180deg, #ffb636, #f18b15);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34);
}

.ordinary-blueprint-points strong {
  color: #465063;
  font-size: 13px;
  font-weight: 820;
}

.ordinary-blueprint-points strong::before {
  margin-right: 8px;
  color: #6e7789;
  content: "剩余积分";
  font-weight: 760;
}

.ordinary-blueprint-points em {
  display: none;
  color: #1e2535;
  font-size: 18px;
  font-style: normal;
  line-height: 1;
}

.ordinary-blueprint-actions > i {
  display: block;
  width: 1px;
  height: 24px;
  background: #dfe5ef;
}

.ordinary-blueprint-bell,
.ordinary-blueprint-avatar,
.ordinary-blueprint-caret {
  display: inline-grid;
  place-items: center;
  background: transparent;
}

.ordinary-blueprint-bell {
  width: 34px;
  height: 34px;
  color: #161d2f;
}

.ordinary-blueprint-bell::before {
  width: 20px;
  height: 20px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.6 2.6 0 0 0 2.45-1.75h-4.9A2.6 2.6 0 0 0 12 22ZM5.5 18.5h13l-1.35-1.8V11a5.2 5.2 0 0 0-4.1-5.1V4a1.05 1.05 0 0 0-2.1 0v1.9A5.2 5.2 0 0 0 6.85 11v5.7L5.5 18.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.6 2.6 0 0 0 2.45-1.75h-4.9A2.6 2.6 0 0 0 12 22ZM5.5 18.5h13l-1.35-1.8V11a5.2 5.2 0 0 0-4.1-5.1V4a1.05 1.05 0 0 0-2.1 0v1.9A5.2 5.2 0 0 0 6.85 11v5.7L5.5 18.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    var(--avatar-image, none) center / cover no-repeat,
    radial-gradient(circle at 50% 34%, #fff 0 12%, transparent 13%),
    linear-gradient(135deg, #6f63f6, #6d8cff);
}

.ordinary-blueprint-caret {
  width: 18px;
  height: 34px;
  color: #4d566a;
}

.ordinary-blueprint-caret::before {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-blueprint-actions .user-menu {
  top: 48px;
  right: 0;
}

.ordinary-watermark-topbar .ordinary-blueprint-topbar-inner,
.ordinary-watermark-topbar-inner {
  grid-template-columns: 116px minmax(0, 1fr) auto;
  gap: 28px;
}

.ordinary-watermark-brand {
  color: #8f5bf4;
}

.ordinary-watermark-brand span {
  color: #8f5bf4;
}

.ordinary-watermark-brand strong {
  color: #c65bf3;
}

.ordinary-watermark-nav {
  gap: clamp(24px, 3.15vw, 42px);
  color: #1c2335;
  font-size: 14px;
  font-weight: 760;
}

.ordinary-watermark-nav a,
.ordinary-watermark-nav button {
  padding: 0 8px;
  border-radius: 0;
  background: transparent;
}

.ordinary-watermark-nav a.active-soft {
  color: #7c55ef;
  background: transparent;
}

.ordinary-watermark-nav a span {
  width: 7px;
  height: 7px;
}

.ordinary-watermark-actions {
  gap: 12px;
}

.ordinary-watermark-vip {
  grid-template-columns: 16px auto;
  gap: 8px;
  min-width: 102px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  color: #fff;
  background: linear-gradient(95deg, #7d4cf2 0%, #f16b9f 100%);
  box-shadow: 0 9px 18px rgba(144, 76, 224, 0.16);
}

.ordinary-watermark-vip span {
  background: #fff;
}

.ordinary-watermark-vip strong {
  color: #fff;
  font-size: 13px;
}

.ordinary-watermark-points {
  grid-template-columns: 18px auto 12px;
  min-width: 120px;
  height: 34px;
}

.ordinary-watermark-points strong::before {
  content: "";
  margin: 0;
}

.ordinary-watermark-points em {
  display: block;
  color: #1f2637;
  font-size: 17px;
  font-weight: 720;
}

.ordinary-watermark-actions > i {
  height: 24px;
}

.ordinary-matting-topbar .ordinary-blueprint-topbar-inner,
.ordinary-matting-topbar-inner {
  grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 30px;
}

.ordinary-matting-brand,
.ordinary-matting-brand span {
  color: #8b56f2;
}

.ordinary-matting-brand strong {
  color: #d65cd4;
}

.ordinary-matting-nav {
  gap: clamp(30px, 3.65vw, 52px);
  color: #1c2335;
  font-size: 14px;
  font-weight: 760;
}

.ordinary-matting-nav a,
.ordinary-matting-nav button {
  padding: 0 8px;
  background: transparent;
}

.ordinary-matting-nav a.active-soft {
  color: #111827;
  background: transparent;
  border-bottom: 3px solid #7d5cf6;
  border-radius: 0;
}

.ordinary-matting-actions {
  gap: 10px;
}

.ordinary-portrait-topbar .ordinary-blueprint-topbar-inner,
.ordinary-portrait-topbar-inner {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 34px;
}

.ordinary-blueprint-app-shell .ordinary-portrait-topbar {
  height: 64px;
}

.ordinary-blueprint-app-shell .ordinary-portrait-topbar .ordinary-blueprint-topbar-inner,
.ordinary-blueprint-app-shell .ordinary-portrait-topbar-inner {
  height: 64px;
}

.ordinary-portrait-brand,
.ordinary-portrait-brand span {
  color: #151827;
}

.ordinary-portrait-brand strong {
  color: #b64ff4;
}

.ordinary-portrait-nav {
  gap: clamp(28px, 3.35vw, 48px);
  color: #1c2335;
}

.ordinary-portrait-nav a,
.ordinary-portrait-nav button {
  padding: 0 8px;
  background: transparent;
}

.ordinary-portrait-nav a.active-soft {
  color: #7559f5;
  border-bottom: 3px solid #7d5cf6;
  border-radius: 0;
  background: transparent;
}

.ordinary-portrait-actions {
  gap: 12px;
}

.ordinary-portrait-points {
  min-width: 98px;
  grid-template-columns: 18px auto 10px;
}

.ordinary-portrait-points strong::before {
  content: "";
  margin: 0;
}

.ordinary-portrait-points em {
  display: block;
  color: #5f6676;
  font-size: 15px;
}

.ordinary-portrait-recharge {
  min-width: 62px;
}

.ordinary-portrait-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 88px;
  padding: 0 14px;
  border: 1px solid #e2e7f0;
  border-radius: 999px;
  color: #1f2637;
  background: #fff;
  font-size: 13px;
  font-weight: 820;
}

.ordinary-portrait-account span {
  width: 8px;
  height: 8px;
  border: solid #5f6676;
  border-width: 0 1.6px 1.6px 0;
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-matting-expiry {
  height: 28px;
  padding: 0 12px;
  border: 1px solid #f2e1bd;
  border-radius: 7px;
  color: #8a6933;
  background: #fff9ec;
  font-size: 12px;
  font-weight: 760;
}

.ordinary-matting-vip {
  display: inline-flex;
  min-width: 68px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  color: #fff;
  background: linear-gradient(95deg, #f05ea4 0%, #8a55f3 100%);
  font-size: 12px;
}

.ordinary-matting-vip strong {
  color: #fff;
  font-size: 12px;
}

.ordinary-matting-points {
  grid-template-columns: 18px auto 12px;
  min-width: 104px;
  height: 32px;
}

.ordinary-matting-points strong::before {
  content: "";
  margin: 0;
}

.ordinary-matting-points em {
  display: block;
  color: #1f2637;
  font-size: 16px;
}

.ordinary-matting-recharge {
  min-width: 62px;
  height: 32px;
}

.ordinary-blueprint-app-shell .ordinary-workbench {
  min-height: calc(100vh - 50px);
  padding-top: 16px;
}

.ordinary-blueprint-app-shell .ordinary-workbench .ordinary-control {
  height: calc(100vh - 96px) !important;
  max-height: calc(100vh - 96px) !important;
}

.ordinary-blueprint-app-shell .ordinary-workbench .ordinary-control-scroll {
  max-height: calc(100vh - 248px);
}

.ordinary-blueprint-app-shell .ordinary-preview-column {
  max-height: calc(100vh - 96px);
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark {
  padding-top: 86px;
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control,
.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
  height: calc(100vh - 196px) !important;
  max-height: calc(100vh - 196px) !important;
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control-scroll {
  max-height: calc(100vh - 316px);
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark {
    padding-top: 74px;
    padding-bottom: 12px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-title {
    top: 14px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    height: calc(100vh - 134px) !important;
    max-height: calc(100vh - 134px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control-scroll {
    max-height: calc(100vh - 262px);
    overflow: auto;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 170px;
    gap: 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-records {
    padding: 10px 12px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-head,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-row {
    min-height: 28px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    grid-template-rows: auto auto;
  }
}

.ordinary-blueprint-app-shell .montage-page {
  height: calc(100vh - 56px);
  padding-top: 20px;
}

.ordinary-blueprint-app-shell .montage-zoom-slider {
  display: inline-grid;
  align-items: center;
  width: 96px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
}

.ordinary-blueprint-app-shell .montage-zoom-slider input {
  width: 100%;
  min-width: 0;
  accent-color: #6d55f2;
}

.ordinary-blueprint-app-shell .montage-bottom-cue {
  position: absolute;
  left: 50%;
  bottom: 194px;
  z-index: 4;
  transform: translateX(-50%);
  box-shadow: 0 10px 24px rgba(38, 50, 78, 0.12);
}

.ordinary-blueprint-app-shell .montage-bottom-cue::before {
  width: 9px;
  height: 9px;
  border-right: 2px solid #6d55f2;
  border-bottom: 2px solid #6d55f2;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

@media (max-width: 1180px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-topbar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    width: min(100% - 28px, 1476px);
  }

  .ordinary-blueprint-nav {
    gap: 18px;
  }

  .ordinary-blueprint-actions {
    gap: 8px;
  }

  .ordinary-blueprint-points {
    min-width: 92px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-topbar {
    height: auto;
    min-height: 50px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-topbar-inner {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50px;
    gap: 10px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .ordinary-blueprint-brand {
    min-width: auto;
    font-size: 22px;
  }

  .ordinary-blueprint-nav {
    flex: 0 0 auto;
    gap: 14px;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-blueprint-actions {
    flex: 0 0 auto;
  }

  .ordinary-blueprint-vip {
    min-width: 82px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ordinary-blueprint-points {
    height: 32px;
    min-width: 82px;
    grid-template-columns: 14px auto 14px;
    gap: 6px;
    font-size: 12px;
  }

  .ordinary-blueprint-actions > i,
  .ordinary-blueprint-bell {
    display: none;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench,
  .ordinary-blueprint-app-shell .montage-page {
    min-height: calc(100vh - 50px);
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-page {
    height: calc(100vh - 50px);
    min-height: calc(100vh - 50px);
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-left,
  .ordinary-blueprint-app-shell .montage-right {
    height: calc(100vh - 66px);
    max-height: calc(100vh - 66px);
    overflow-y: auto;
  }

  .ordinary-blueprint-app-shell .montage-left {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    align-self: end;
    position: sticky;
    bottom: 0;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 32%);
  }

  .ordinary-blueprint-app-shell .montage-history-list {
    max-height: calc(100vh - 176px);
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-preview-column {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
  }

  .ordinary-blueprint-app-shell .montage-page {
    height: auto;
    min-height: calc(100vh - 50px);
    overflow: visible;
  }

  .ordinary-blueprint-app-shell .montage-left,
  .ordinary-blueprint-app-shell .montage-right {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

/* Ordinary tools use the locked blueprint header for design-image visual QA. */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench,
  .ordinary-blueprint-app-shell .montage-page {
    min-height: calc(100vh - 56px);
  }

  .ordinary-blueprint-app-shell .montage-page {
    height: calc(100vh - 56px);
  }

  .ordinary-blueprint-app-shell .ordinary-workbench .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-preview-column {
    height: calc(100vh - 114px) !important;
    max-height: calc(100vh - 114px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench .ordinary-control-scroll {
    max-height: calc(100vh - 266px);
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen .ordinary-control-scroll {
    max-height: calc(100vh - 255px);
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark {
    min-height: calc(100vh - 56px);
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-title {
    display: none;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    height: calc(100vh - 114px) !important;
    max-height: calc(100vh - 114px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control-scroll {
    max-height: calc(100vh - 248px);
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 136px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-records {
    padding: 8px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-records .tool-generation-records {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-table {
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-row:nth-of-type(n + 5) {
    display: none;
  }

  .ordinary-blueprint-app-shell .montage-left,
  .ordinary-blueprint-app-shell .montage-right {
    height: calc(100vh - 78px);
    max-height: calc(100vh - 78px);
  }

  .ordinary-blueprint-app-shell .montage-history-list {
    max-height: calc(100vh - 188px);
  }
}

.ordinary-page-head {
  display: none;
}

.ordinary-page-title,
.ordinary-page-tools {
  min-width: 0;
}

/* Ordinary tool responsive audit pass, 2026-06-24 */
.ordinary-blueprint-shell {
  width: min(100%, 1536px);
  margin: 0 auto;
}

@media (min-width: 1600px) {
  .ordinary-blueprint-shell {
    min-height: calc(100vh - 68px);
    padding-right: 28px;
    padding-left: 28px;
  }
}

.ordinary-preview-column,
.ordinary-preview-card,
.ordinary-records,
.ordinary-records .tool-generation-records,
.ordinary-records .tool-generation-list,
.ordinary-workbench .ordinary-control,
.ordinary-workbench .ordinary-control-scroll,
.matting-preview-workspace,
.matting-preview-toolbar,
.matting-status,
.matting-toolbar-actions,
.matting-stage,
.matting-export-row,
.enhance-preview-toolbar,
.enhance-stage-actions,
.enhance-toolbar-actions,
.enhance-compare-stage,
.enhance-record-list,
.inpaint-preview-toolbar,
.inpaint-preview-actions,
.inpaint-record-list,
.id-photo-blueprint,
.id-photo-blue-left,
.id-photo-blue-main,
.id-photo-blue-result-card,
.id-photo-blue-result-grid,
.id-photo-history,
.id-photo-history-list,
.montage-page,
.montage-left,
.montage-center,
.montage-right {
  min-width: 0;
}

.ordinary-records .tool-generation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 14px;
  overflow: hidden;
}

.ordinary-records .tool-generation-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.enhance-record-list,
.inpaint-record-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
  overflow: hidden;
}

.enhance-record-item,
.inpaint-record-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex-basis: auto;
}

.id-photo-blueprint .id-photo-history-list {
  grid-auto-columns: minmax(150px, 170px);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.id-photo-blueprint .id-photo-history-item,
.id-photo-blueprint .id-photo-history-more {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.ordinary-records .tool-generation-thumb,
.ordinary-records .tool-generation-copy,
.ordinary-records .tool-generation-copy strong,
.ordinary-records .tool-generation-copy small {
  min-width: 0;
  max-width: 100%;
}

.ordinary-tool-pdf-add-water .ordinary-preview-column {
  grid-template-rows: minmax(0, 1fr) 244px;
  max-height: calc(100vh - 116px);
}

.ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water {
  grid-template-columns: 392px minmax(0, 1fr);
  grid-template-rows: 32px minmax(0, 1fr);
  grid-template-areas:
    "pagehead pagehead"
    "control preview";
  gap: 8px 22px;
  width: min(100%, 1536px);
  min-height: calc(100vh - 50px);
  padding: 12px 30px 24px;
  background:
    linear-gradient(180deg, rgba(246, 250, 255, 0.96), rgba(238, 244, 252, 0.96)),
    #f3f7fc;
}

.ordinary-tool-pdf-add-water .ordinary-page-head {
  grid-area: pagehead;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.ordinary-tool-pdf-add-water .ordinary-page-title {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.ordinary-tool-pdf-add-water .ordinary-page-back {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d7dfeb;
  border-radius: 7px;
  color: #172033;
  background: #fff;
  box-shadow: 0 8px 18px rgba(34, 47, 80, 0.05);
}

.ordinary-tool-pdf-add-water .ordinary-page-back::before {
  width: 9px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 0 1.8px 1.8px;
  content: "";
  transform: translateX(2px) rotate(45deg);
}

.ordinary-tool-pdf-add-water .ordinary-page-title h1 {
  margin: 0;
  overflow: hidden;
  color: #12182a;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 920;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordinary-tool-pdf-add-water .ordinary-page-tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ordinary-tool-pdf-add-water .ordinary-page-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 98px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #dbe2ee;
  border-radius: 6px;
  color: #252d3f;
  background: #fff;
  font-size: 13px;
  font-weight: 780;
  box-shadow: 0 8px 18px rgba(34, 47, 80, 0.04);
}

.ordinary-tool-pdf-add-water .ordinary-page-tools span {
  width: 15px;
  height: 15px;
  background: currentColor;
}

.ordinary-tool-pdf-add-water .ordinary-page-help span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18h2v-2h-2v2Zm1-16a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.2A8.2 8.2 0 1 1 12 3.8a8.2 8.2 0 0 1 0 16.4Zm0-14.4a3.3 3.3 0 0 0-3.45 3.25h1.9c0-.98.64-1.55 1.52-1.55.86 0 1.53.5 1.53 1.34 0 .8-.42 1.17-1.22 1.67-1.05.65-1.46 1.25-1.38 2.49h1.74c0-.77.24-1.12 1.02-1.6.88-.54 1.34-1.2 1.34-2.52 0-1.82-1.54-3.08-3.5-3.08Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18h2v-2h-2v2Zm1-16a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.2A8.2 8.2 0 1 1 12 3.8a8.2 8.2 0 0 1 0 16.4Zm0-14.4a3.3 3.3 0 0 0-3.45 3.25h1.9c0-.98.64-1.55 1.52-1.55.86 0 1.53.5 1.53 1.34 0 .8-.42 1.17-1.22 1.67-1.05.65-1.46 1.25-1.38 2.49h1.74c0-.77.24-1.12 1.02-1.6.88-.54 1.34-1.2 1.34-2.52 0-1.82-1.54-3.08-3.5-3.08Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .ordinary-page-batch span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v2h3v16H4V5h3V3Zm2 2h6V4H9v1Zm-3 4h12V7H6v2Zm0 10h12v-8H6v8Zm2-6h3v2H8v-2Zm5 0h3v2h-3v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v2h3v16H4V5h3V3Zm2 2h6V4H9v1Zm-3 4h12V7H6v2Zm0 10h12v-8H6v8Zm2-6h3v2H8v-2Zm5 0h3v2h-3v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .ordinary-control {
  grid-area: control;
}

.ordinary-tool-pdf-add-water .ordinary-preview-column {
  grid-area: preview;
}

.ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control {
  height: calc(100vh - 148px) !important;
  max-height: calc(100vh - 148px) !important;
  border-radius: 7px;
}

.ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control-scroll {
  max-height: calc(100vh - 300px);
  padding: 18px 16px 12px;
}

.ordinary-tool-pdf-add-water .ordinary-step {
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
  border-color: #dfe6f1;
  border-radius: 7px;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 78px;
  margin-bottom: 14px;
  border: 1px dashed #cfd7e5;
  border-radius: 7px;
  color: #8a94a7;
  background: #fff;
  text-align: center;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone i {
  width: 18px;
  height: 18px;
  background: #a1abbc;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone strong {
  color: #6e7789;
  font-size: 13px;
  font-weight: 780;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone span {
  color: #a0a9b8;
  font-size: 11px;
  font-weight: 700;
}

.ordinary-tool-pdf-add-water .ordinary-step-head b {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  font-size: 13px;
}

.ordinary-tool-pdf-add-water .ordinary-step-head strong {
  font-size: 15px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-card {
  grid-template-columns: 50px minmax(0, 1fr) 28px;
  min-height: 42px;
  padding: 6px;
  background: #f7f9fc;
  border-style: solid;
  border-radius: 7px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-thumb {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-copy strong {
  font-size: 12px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-copy small {
  font-size: 12px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-card button {
  height: 28px;
  width: 28px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 12px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-card button::before {
  display: block;
  color: #1f2637;
  content: "×";
  font-size: 18px;
}

.ordinary-tool-pdf-add-water .ordinary-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border: 0;
  background: transparent;
}

.ordinary-tool-pdf-add-water .ordinary-step .tool-tab {
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  color: #1f2637;
  background: #fff;
  font-size: 13px;
  font-weight: 760;
}

.ordinary-tool-pdf-add-water .ordinary-step .tool-tab.active {
  border-color: #8e63ff;
  color: #6d55f2;
  background: #f5f0ff;
}

.ordinary-tool-pdf-add-water .ordinary-workbench .control-row,
.ordinary-tool-pdf-add-water .control-row {
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  min-height: 32px;
}

.ordinary-tool-pdf-add-water .control-row input[type="range"] {
  accent-color: #9a5cff;
}

.ordinary-tool-pdf-add-water .ordinary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 10px;
  padding: 12px 16px 16px;
}

.ordinary-tool-pdf-add-water .ordinary-actions .ai-advice-btn {
  grid-column: 1 / -1;
  border: 1px solid #ead7e5;
  color: #ad4ae0;
  background: linear-gradient(90deg, rgba(126, 88, 246, 0.08), rgba(238, 83, 166, 0.06));
}

.ordinary-tool-pdf-add-water .ordinary-actions .ghost-btn {
  grid-column: 2;
  grid-row: 2;
  min-width: 40px;
  padding: 0;
  overflow: hidden;
  color: transparent;
}

.ordinary-tool-pdf-add-water .ordinary-actions .ghost-btn::before {
  width: 17px;
  height: 17px;
  margin: auto;
  background: #222b3e;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 0-6.32 4H3l3.4 3.4L9.8 9H7.85a5 5 0 1 1 1.05 5.55l-1.42 1.42A7 7 0 1 0 12 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 0-6.32 4H3l3.4 3.4L9.8 9H7.85a5 5 0 1 1 1.05 5.55l-1.42 1.42A7 7 0 1 0 12 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .ordinary-actions .ordinary-primary-action {
  grid-column: 1;
  grid-row: 2;
  height: 42px !important;
}

.ordinary-tool-pdf-add-water .ordinary-preview-column {
  grid-template-rows: 632px 244px;
  gap: 12px;
  max-height: none;
}

.ordinary-tool-pdf-add-water .ordinary-preview-card,
.ordinary-tool-pdf-add-water .ordinary-records {
  min-width: 0;
  overflow: hidden;
}

.ordinary-tool-pdf-add-water .watermark-preview-section {
  padding: 0;
}

.ordinary-tool-pdf-add-water .ordinary-watermark-preview {
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
}

.ordinary-tool-pdf-add-water .watermark-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid #e1e7f1;
  background: #fff;
}

.ordinary-tool-pdf-add-water .watermark-compare-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #252d3f;
  font-size: 13px;
  font-weight: 780;
}

.ordinary-tool-pdf-add-water .watermark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 52px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: #c4c9d4;
  font-size: 12px;
  font-weight: 800;
}

.ordinary-tool-pdf-add-water .watermark-toggle i {
  width: 22px;
  height: 22px;
  margin-right: auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(38, 48, 73, 0.16);
}

.ordinary-tool-pdf-add-water .watermark-tab {
  height: 28px;
  padding: 0 13px;
  border: 1px solid #dfe6f1;
  border-radius: 6px;
  color: #2a3347;
  background: #f9fbfe;
  font-size: 13px;
  font-weight: 780;
}

.ordinary-tool-pdf-add-water .watermark-tab.active {
  border-color: #8b62ff;
  color: #744ff4;
  background: #f5efff;
}

.ordinary-tool-pdf-add-water .watermark-checker {
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0 0 7px 7px;
  background: #fff;
}

.ordinary-tool-pdf-add-water .preview-photo {
  border-radius: 0 0 7px 7px;
  background-position: center !important;
  background-size: cover !important;
}

.ordinary-tool-pdf-add-water .preview-photo::before {
  display: none;
}

.ordinary-tool-pdf-add-water .preview-photo .watermark-text {
  position: relative;
  z-index: 1;
  transform: rotate(-25deg);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(32px, 4vw, 58px);
  text-shadow: 0 2px 6px rgba(21, 32, 52, 0.18);
}

.ordinary-tool-pdf-add-water .watermark-checker {
  overflow: hidden;
}

.ordinary-tool-pdf-add-water .watermark-checker .preview-photo {
  transform-origin: center;
  transition: transform 160ms ease, background-position 80ms linear;
}

.ordinary-tool-pdf-add-water .watermark-live-result {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  background-position: center;
  background-size: cover;
}

.ordinary-tool-pdf-add-water .watermark-compare-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: none;
  width: 50%;
  background-color: #fff;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.ordinary-tool-pdf-add-water .watermark-compare-source {
  left: 0;
  border-right: 1px solid rgba(225, 231, 241, 0.9);
}

.ordinary-tool-pdf-add-water .watermark-compare-result {
  right: 0;
}

.ordinary-tool-pdf-add-water .watermark-compare-pane::after {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, 0.58);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.ordinary-tool-pdf-add-water .watermark-compare-source::after {
  content: "原图";
}

.ordinary-tool-pdf-add-water .watermark-compare-result::after {
  content: "加水印";
}

.ordinary-tool-pdf-add-water .preview-photo.show-watermark-result .watermark-live-result {
  display: block;
}

.ordinary-tool-pdf-add-water .preview-photo.show-watermark-compare .watermark-live-result {
  display: none;
}

.ordinary-tool-pdf-add-water .preview-photo.show-watermark-compare {
  background-image: none !important;
  background-color: #fff;
}

.ordinary-tool-pdf-add-water .preview-photo.show-watermark-compare .watermark-compare-pane {
  display: block;
}

.ordinary-tool-pdf-add-water .preview-photo.has-watermark-live-result .watermark-text,
.ordinary-tool-pdf-add-water .preview-photo.has-watermark-live-result .watermark-image-preview {
  display: none;
}

.ordinary-tool-pdf-add-water[data-ordinary-preview-mode="source"] .watermark-text,
.ordinary-tool-pdf-add-water[data-ordinary-preview-mode="source"] .watermark-image-preview {
  display: none;
}

.ordinary-tool-pdf-add-water[data-ordinary-compare="on"][data-ordinary-preview-mode="result"] .watermark-text,
.ordinary-tool-pdf-add-water[data-ordinary-compare="on"][data-ordinary-preview-mode="result"] .watermark-image-preview {
  clip-path: inset(0 0 0 var(--ordinary-compare-position, 50%));
}

.ordinary-tool-pdf-add-water .watermark-toggle.active {
  background: #7654ee;
}

.ordinary-tool-pdf-add-water .watermark-toggle.active i {
  order: 2;
  margin-right: 0;
  margin-left: auto;
}

.ordinary-tool-pdf-add-water.is-preview-panning .watermark-checker .preview-photo {
  cursor: grab;
}

.ordinary-tool-pdf-add-water.is-preview-panning .watermark-checker .preview-photo:active {
  cursor: grabbing;
}

.ordinary-tool-pdf-add-water.is-preview-fullscreen .watermark-preview-section {
  position: fixed;
  inset: 16px;
  z-index: 2000;
  height: auto;
  border: 1px solid #dbe2ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(20, 28, 48, 0.24);
}

.ordinary-tool-pdf-add-water.is-preview-fullscreen .ordinary-watermark-preview {
  height: 100%;
}

.ordinary-tool-pdf-add-water .watermark-color-row input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 1px solid #dfe5ef;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.ordinary-tool-pdf-add-water .watermark-zoom-tools {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  color: #fff;
  background: rgba(28, 45, 65, 0.48);
  backdrop-filter: blur(10px);
}

.ordinary-tool-pdf-add-water .watermark-zoom-tools button,
.ordinary-tool-pdf-add-water .watermark-zoom-tools strong {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 24px;
  color: inherit;
  background: transparent;
  font-size: 14px;
  font-weight: 820;
}

.ordinary-tool-pdf-add-water .watermark-zoom-tools i {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.42);
}

.ordinary-tool-pdf-add-water .watermark-zoom-tools button span {
  width: 17px;
  height: 17px;
  background: currentColor;
}

.ordinary-tool-pdf-add-water .watermark-zoom-tools button:first-child span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2v5h1.5V6.5a2 2 0 1 1 4 0V14a6 6 0 0 1-6 6h-1.1a6 6 0 0 1-4.25-1.76L4 14.1l1.4-1.4 3.1 3.1V4a2 2 0 0 1 3.5-1.32V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2v5h1.5V6.5a2 2 0 1 1 4 0V14a6 6 0 0 1-6 6h-1.1a6 6 0 0 1-4.25-1.76L4 14.1l1.4-1.4 3.1 3.1V4a2 2 0 0 1 3.5-1.32V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .watermark-zoom-tools button:last-child span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v2H7.4l3.3 3.3-1.4 1.4L6 7.4V10H4V4Zm10 0h6v6h-2V7.4l-3.3 3.3-1.4-1.4L16.6 6H14V4ZM9.3 13.3l1.4 1.4L7.4 18H10v2H4v-6h2v2.6l3.3-3.3Zm5.4 0 3.3 3.3V14h2v6h-6v-2h2.6l-3.3-3.3 1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v2H7.4l3.3 3.3-1.4 1.4L6 7.4V10H4V4Zm10 0h6v6h-2V7.4l-3.3 3.3-1.4-1.4L16.6 6H14V4ZM9.3 13.3l1.4 1.4L7.4 18H10v2H4v-6h2v2.6l3.3-3.3Zm5.4 0 3.3 3.3V14h2v6h-6v-2h2.6l-3.3-3.3 1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .ordinary-records {
  padding: 14px 16px 16px;
}

.ordinary-tool-pdf-add-water .ordinary-records .tool-generation-head {
  margin-bottom: 8px;
}

.ordinary-tool-pdf-add-water .ordinary-records .tool-generation-head h3 {
  font-size: 16px;
}

.ordinary-tool-pdf-add-water .ordinary-records .tool-generation-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
}

.ordinary-tool-pdf-add-water .ordinary-records .tool-generation-item {
  grid-template-rows: 110px auto auto;
  min-height: 172px;
  padding: 8px;
  border-radius: 7px;
}

.ordinary-tool-pdf-add-water .ordinary-records .tool-generation-thumb {
  height: 110px;
}

/* PDF watermark blueprint fidelity lock, 2026-06-25 */
.ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water {
  grid-template-columns: 392px minmax(0, 1fr);
  gap: 8px 22px;
}

.ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control {
  height: calc(100vh - 148px) !important;
  max-height: calc(100vh - 148px) !important;
  border-color: #dfe6f0;
  box-shadow: 0 18px 42px rgba(23, 37, 66, 0.06);
}

.ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control-scroll {
  height: 100%;
  max-height: none;
  overflow: hidden;
  padding: 14px 16px 16px;
}

.ordinary-tool-pdf-add-water .ordinary-step {
  gap: 6px;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ordinary-tool-pdf-add-water .ordinary-step:nth-of-type(2) {
  margin-bottom: 31px;
}

.ordinary-tool-pdf-add-water .ordinary-step:nth-of-type(3) {
  gap: 8px;
}

.ordinary-tool-pdf-add-water .ordinary-step-head {
  min-height: 26px;
}

.ordinary-tool-pdf-add-water .ordinary-step-head b {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  background: linear-gradient(135deg, #7a58f2 0%, #c962f2 100%);
  box-shadow: 0 8px 16px rgba(129, 88, 241, 0.16);
  font-size: 13px;
}

.ordinary-tool-pdf-add-water .ordinary-step-head strong {
  color: #151b2c;
  font-size: 15px;
  font-weight: 920;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone {
  min-height: 72px;
  margin-bottom: 8px;
  gap: 5px;
  border-color: #d3dae6;
  color: #8d96a9;
  background: #fff;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone i {
  width: 16px;
  height: 16px;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone strong {
  font-size: 13px;
}

.ordinary-tool-pdf-add-water .watermark-drop-zone span {
  font-size: 11px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-card {
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  min-height: 42px;
  padding: 6px;
  border-color: #e1e7f0;
  background: #f8fafd;
}

.ordinary-tool-pdf-add-water .ordinary-upload-thumb {
  width: 48px;
  height: 40px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-copy strong {
  font-size: 12px;
}

.ordinary-tool-pdf-add-water .ordinary-upload-copy small {
  margin-top: 3px;
  font-size: 12px;
}

.ordinary-tool-pdf-add-water .ordinary-step .form-label {
  margin-bottom: 0;
  color: #20283a;
  font-size: 13px;
  font-weight: 850;
}

.ordinary-tool-pdf-add-water .ordinary-step .form-block {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 0;
}

.ordinary-tool-pdf-add-water .watermark-layout-setting .upload-hint {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin-top: 2px;
  line-height: 1.45;
  word-break: normal;
}

.ordinary-tool-pdf-add-water .ordinary-step input,
.ordinary-tool-pdf-add-water .ordinary-step select {
  height: 34px;
  border-color: #dfe5ef;
  border-radius: 6px;
  font-size: 13px;
}

.ordinary-tool-pdf-add-water .watermark-text-field {
  position: relative;
  min-width: 0;
}

.ordinary-tool-pdf-add-water .watermark-text-field input {
  width: 100%;
  padding-right: 42px;
}

.ordinary-tool-pdf-add-water .watermark-text-field span {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #a8afbd;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.ordinary-tool-pdf-add-water .ordinary-segment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  overflow: hidden;
  background: #f9fafc;
}

.ordinary-tool-pdf-add-water .watermark-quality-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ordinary-tool-pdf-add-water .ordinary-step .tool-tab {
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
}

.ordinary-tool-pdf-add-water .ordinary-step .tool-tab.active {
  border: 1px solid #8b5cf6;
  border-radius: 6px;
  color: #7b51f4;
  background: #f7f2ff;
}

.ordinary-tool-pdf-add-water .ordinary-two-fields {
  grid-template-columns: 70px minmax(0, 1fr) 90px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.ordinary-tool-pdf-add-water .ordinary-two-fields .form-block {
  display: contents;
}

.ordinary-tool-pdf-add-water .ordinary-two-fields .form-block:first-child .form-label {
  grid-column: 1;
}

.ordinary-tool-pdf-add-water .ordinary-two-fields .form-block:first-child select {
  grid-column: 2;
}

.ordinary-tool-pdf-add-water .ordinary-two-fields .form-block:nth-child(2) .form-label {
  display: none;
}

.ordinary-tool-pdf-add-water .ordinary-two-fields .form-block:nth-child(2) select {
  grid-column: 3;
}

.ordinary-tool-pdf-add-water .control-row {
  grid-template-columns: 70px minmax(0, 1fr) 66px;
  min-height: 28px;
  gap: 8px;
  margin-bottom: 0;
}

.ordinary-tool-pdf-add-water .control-row span {
  color: #20283a;
  font-size: 13px;
  font-weight: 800;
}

.ordinary-tool-pdf-add-water .control-row strong {
  height: 28px;
  padding: 0 9px;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  color: #5a6375;
  background: #fff;
  font-size: 12px;
}

.ordinary-tool-pdf-add-water .control-row input[type="range"] {
  height: 4px;
  accent-color: #8d5cf5;
}

.ordinary-tool-pdf-add-water .watermark-color-row {
  display: grid;
  grid-template-columns: 70px 30px 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.ordinary-tool-pdf-add-water .watermark-color-row span {
  color: #20283a;
  font-size: 13px;
  font-weight: 800;
}

.ordinary-tool-pdf-add-water .watermark-color-row button {
  width: 30px;
  height: 24px;
  border: 1px solid #dce3ee;
  border-radius: 4px;
  background: #fff;
}

.ordinary-tool-pdf-add-water .watermark-color-row button:last-child {
  background:
    linear-gradient(45deg, #d7dde8 25%, transparent 25% 75%, #d7dde8 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, #d7dde8 25%, transparent 25% 75%, #d7dde8 75%) 5px 5px / 10px 10px,
    #fff;
}

.ordinary-tool-pdf-add-water .watermark-inline-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 10px;
  margin-top: 2px;
}

.ordinary-tool-pdf-add-water .watermark-inline-actions .ai-advice-btn {
  height: 34px;
  min-height: 34px;
  border: 1px solid #f0c9dd;
  border-radius: 6px;
  color: #a84edf;
  background: linear-gradient(90deg, rgba(128, 83, 242, 0.08), rgba(241, 98, 154, 0.08));
  font-size: 13px;
  font-weight: 880;
}

.ordinary-tool-pdf-add-water .watermark-inline-actions .ghost-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  color: transparent;
  background: #fff;
}

.ordinary-tool-pdf-add-water .watermark-inline-actions .ghost-btn::before {
  width: 16px;
  height: 16px;
  background: #111827;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 0-6.32 4H3l3.4 3.4L9.8 9H7.85a5 5 0 1 1 1.05 5.55l-1.42 1.42A7 7 0 1 0 12 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 0-6.32 4H3l3.4 3.4L9.8 9H7.85a5 5 0 1 1 1.05 5.55l-1.42 1.42A7 7 0 1 0 12 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .ordinary-step .ordinary-primary-action {
  width: 100%;
  height: 42px !important;
  margin-top: 12px;
  border-radius: 6px;
  background: linear-gradient(95deg, #7d4df3 0%, #f2639f 100%);
  box-shadow: 0 14px 28px rgba(144, 76, 224, 0.16);
}

.ordinary-tool-pdf-add-water .ordinary-preview-column {
  grid-template-rows: 632px 244px;
  max-height: none;
}

.ordinary-tool-pdf-add-water .pdf-watermark-records {
  padding: 12px;
  background: #fff;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #1e2638;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-head div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-head strong {
  font-size: 16px;
  font-weight: 920;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-refresh {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: #1f2637;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 0-6.32 4H3l3.4 3.4L9.8 9H7.85a5 5 0 1 1 1.05 5.55l-1.42 1.42A7 7 0 1 0 12 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 0 0-6.32 4H3l3.4 3.4L9.8 9H7.85a5 5 0 1 1 1.05 5.55l-1.42 1.42A7 7 0 1 0 12 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  color: #8791a3;
  background: transparent;
  font-size: 12px;
  font-weight: 780;
  -webkit-mask: none;
  mask: none;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-more em {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  background: #8b5cf6;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-more i {
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(-45deg);
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-card {
  position: relative;
  display: block;
  min-width: 0;
  height: 181px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: #f8fafc center / contain no-repeat;
  box-shadow: 0 8px 18px rgba(25, 38, 64, 0.05);
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-card.active {
  box-shadow: inset 0 0 0 2px #875bff, 0 8px 18px rgba(25, 38, 64, 0.05);
}

.ordinary-tool-pdf-add-water .pdf-watermark-record-card span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 5px 7px;
  overflow: hidden;
  border-radius: 999px;
  color: #475467;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  clip: auto;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Smart matting blueprint fidelity lock, 2026-06-25 */
.ordinary-blueprint-app-shell .ordinary-matting-matting {
  grid-template-columns: 332px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  height: calc(100vh - 56px);
  min-height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  padding: 16px 28px 24px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
}

.ordinary-matting-matting .ordinary-control {
  position: relative;
  display: grid !important;
  grid-template-rows: minmax(0, calc(100% - 136px)) 136px !important;
  height: calc(100vh - 56px) !important;
  max-height: calc(100vh - 56px) !important;
  margin-top: -16px;
  border-color: #dce5f2;
  box-shadow: 0 15px 34px rgba(30, 43, 70, 0.07);
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control {
  height: calc(100vh - 56px) !important;
  max-height: calc(100vh - 56px) !important;
}

.ordinary-matting-matting .ordinary-control-scroll {
  height: calc(100vh - 192px) !important;
  max-height: calc(100vh - 192px) !important;
  overflow: hidden;
  padding: 24px 26px 8px;
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control-scroll {
  height: calc(100vh - 192px) !important;
  max-height: calc(100vh - 192px) !important;
}

.ordinary-matting-matting .ordinary-title {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe7f2;
}

.ordinary-matting-matting .ordinary-title .panel-title {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 920;
}

.ordinary-matting-matting .ordinary-title .panel-title::after {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border-radius: 999px;
  color: #7f8899;
  background: #eef2f7;
  content: "?";
  font-size: 11px;
  line-height: 1;
  font-weight: 820;
  vertical-align: middle;
}

.ordinary-matting-matting .ordinary-title p {
  display: none;
}

.ordinary-matting-matting .ordinary-step {
  gap: 8px;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ordinary-matting-matting .matting-upload-step {
  margin-bottom: 14px;
}

.ordinary-matting-matting .matting-background-step {
  margin-bottom: 20px;
}

.ordinary-matting-matting .ordinary-step-head {
  min-height: 24px;
}

.ordinary-matting-matting .ordinary-step-head b {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 11px;
}

.ordinary-matting-matting .ordinary-step-head strong {
  font-size: 13px;
  font-weight: 900;
}

.ordinary-matting-matting .matting-mode-list {
  gap: 0;
}

.ordinary-matting-matting .matting-mode-select {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 7px 42px 7px 12px;
}

.ordinary-matting-matting .matting-mode-card {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  min-height: 56px;
  padding: 7px 12px;
}

.ordinary-matting-matting .matting-mode-icon {
  width: 34px;
  height: 34px;
}

.ordinary-matting-matting .matting-mode-icon.ai::before {
  width: auto;
  height: auto;
  background: transparent;
  color: #6f55f5;
  content: "AI";
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  -webkit-mask: none;
  mask: none;
}

.ordinary-matting-matting .matting-mode-card strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.ordinary-matting-matting .matting-mode-card small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

.ordinary-matting-matting .matting-mode-icon.cut::before {
  width: 18px;
  height: 18px;
  background: #1f2937;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 13.5 5 17a2.12 2.12 0 1 0 2 2.6l3.9-7.3 2.1 2.1L9.1 18.7a2.12 2.12 0 1 0 2.4.8L15 16l4.3 4.3 1.4-1.4L5.1 3.3 3.7 4.7l9.9 9.9-1.8 1.8-3.3-2.9ZM7 18.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm4 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM15.5 8.2 19.3 4.4 20.7 5.8 16.9 9.6l-1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 13.5 5 17a2.12 2.12 0 1 0 2 2.6l3.9-7.3 2.1 2.1L9.1 18.7a2.12 2.12 0 1 0 2.4.8L15 16l4.3 4.3 1.4-1.4L5.1 3.3 3.7 4.7l9.9 9.9-1.8 1.8-3.3-2.9ZM7 18.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm4 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM15.5 8.2 19.3 4.4 20.7 5.8 16.9 9.6l-1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-matting-matting .matting-mode-icon.batch::before {
  width: 18px;
  height: 18px;
  background: #1f2937;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6V4.8C8 3.8 8.8 3 9.8 3h4.4c1 0 1.8.8 1.8 1.8V6h3c1.1 0 2 .9 2 2v9.5c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h3Zm2 0h4V5h-4v1Zm9 4.5V8H5v2.5h14Zm-14 2V17.5h14V12.5h-5v1.2h-4V12.5H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6V4.8C8 3.8 8.8 3 9.8 3h4.4c1 0 1.8.8 1.8 1.8V6h3c1.1 0 2 .9 2 2v9.5c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h3Zm2 0h4V5h-4v1Zm9 4.5V8H5v2.5h14Zm-14 2V17.5h14V12.5h-5v1.2h-4V12.5H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-matting-matting .matting-mode-vip {
  display: inline-grid;
  place-items: center;
  height: 15px;
  padding: 0 4px;
  border-radius: 4px;
  color: #fff;
  background: #ffab2e;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.ordinary-matting-matting .matting-upload-card {
  grid-template-columns: 66px minmax(0, 1fr) 20px;
  min-height: 70px;
  padding: 8px;
}

.ordinary-matting-matting .matting-upload-thumb {
  width: 56px;
  height: 56px;
}

.ordinary-matting-matting .matting-upload-card strong {
  font-size: 13px;
}

.ordinary-matting-matting .matting-upload-card small {
  margin-top: 5px;
  font-size: 11px;
}

.ordinary-matting-matting .matting-upload-card div button {
  margin-top: 6px;
}

.ordinary-matting-matting .matting-upload-remove {
  position: relative;
  width: 20px;
  height: 20px;
  background: transparent;
  -webkit-mask: none;
  mask: none;
}

.ordinary-matting-matting .matting-upload-remove::before,
.ordinary-matting-matting .matting-upload-remove::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.7px;
  border-radius: 999px;
  background: #9aa4b5;
  content: "";
}

.ordinary-matting-matting .matting-upload-remove::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ordinary-matting-matting .matting-upload-remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ordinary-matting-matting .matting-upload-hint {
  margin: 4px 0 0;
  color: #98a2b3;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 680;
}

.ordinary-matting-matting .matting-range-row {
  grid-template-columns: 86px minmax(0, 1fr) 48px;
  gap: 8px;
  min-height: 26px;
}

.ordinary-matting-matting .matting-range-row input[type="range"] {
  height: 4px;
  min-height: 0;
  padding: 0;
}

.ordinary-matting-matting .matting-range-row span,
.ordinary-matting-matting .matting-toggle-row {
  font-size: 12px;
}

.ordinary-matting-matting .matting-range-row strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 46px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
}

.ordinary-matting-matting .matting-range-row strong::after {
  flex: 0 0 12px;
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #98a2b3;
  content: "?";
  font-size: 8px;
  font-weight: 900;
}

.ordinary-matting-matting .matting-toggle-row {
  min-height: 25px;
}

.ordinary-matting-matting .matting-toggle-row i {
  flex-basis: 32px;
  width: 32px;
  height: 18px;
}

.ordinary-matting-matting .matting-toggle-row i::before {
  width: 14px;
  height: 14px;
}

.ordinary-matting-matting .matting-toggle-row input:checked + i::before {
  transform: translateX(14px);
}

.ordinary-matting-matting .matting-bg-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ordinary-matting-matting .matting-bg-tabs button {
  height: 33px;
  gap: 3px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.ordinary-matting-matting .matting-color-grid {
  gap: 8px;
  margin-top: 8px;
}

.ordinary-matting-matting .matting-color,
.ordinary-matting-matting .matting-eyedropper {
  width: 29px;
  height: 29px;
}

.ordinary-matting-matting .matting-eyedropper {
  display: none;
}

.ordinary-matting-matting .ordinary-actions {
  position: static;
  display: block;
  padding: 14px 26px 0;
}

.ordinary-matting-matting .ordinary-primary-action {
  position: relative;
  justify-content: center;
  height: 64px !important;
  width: 100%;
  padding: 1px 76px 1px 22px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, #ee4fac 0%, #b94feb 52%, #7158f7 100%) !important;
}

.ordinary-matting-matting .ordinary-primary-action::after {
  position: absolute;
  right: 17px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 54px;
  height: 28px;
  padding: 0 9px 0 29px;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 17px 50%, #ffd448 0 6px, #f5a622 6.5px 9px, transparent 9.5px),
    rgba(255, 255, 255, 0.16);
  content: "-2";
  font-size: 13px;
  font-weight: 900;
  transform: translateY(-50%);
}

.ordinary-matting-matting .ordinary-preview-column {
  grid-template-rows: minmax(520px, 1fr) clamp(156px, 24vh, 252px);
  gap: 10px;
  height: calc(100vh - 88px) !important;
  max-height: calc(100vh - 88px) !important;
}

.ordinary-matting-matting .matting-preview-workspace {
  grid-template-rows: 56px minmax(0, 1fr) 86px;
}

.ordinary-matting-matting .matting-stage {
  margin: 14px 18px 10px;
}

.ordinary-matting-matting .matting-zoom-controls {
  display: none;
  right: 14px;
  top: 50%;
  bottom: auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 42px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-10%);
}

.ordinary-matting-matting .matting-zoom-controls span,
.ordinary-matting-matting .matting-zoom-controls button:last-child,
.ordinary-matting-matting .matting-zoom-controls button:nth-child(2),
.ordinary-matting-matting .matting-zoom-controls button:nth-child(4) {
  display: none;
}

.ordinary-matting-matting .matting-zoom-controls button {
  min-width: 42px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  color: #253044;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(24, 37, 64, 0.12);
}

.ordinary-matting-matting .matting-zoom-controls button:nth-child(4) {
  order: 1;
}

.ordinary-matting-matting .matting-zoom-controls button:nth-child(2) {
  order: 2;
}

.ordinary-matting-matting .matting-zoom-controls button:first-child {
  order: 3;
  width: 48px;
  min-width: 48px;
  height: 34px;
  margin-top: 2px;
  border-radius: 9px;
  color: #667085;
  font-size: 12px;
  font-weight: 820;
}

.ordinary-matting-matting .matting-zoom-controls button:nth-child(2),
.ordinary-matting-matting .matting-zoom-controls button:nth-child(4),
.ordinary-matting-matting .matting-zoom-controls button:last-child {
  order: initial;
}

.ordinary-matting-matting .matting-zoom-controls button:first-child::before {
  display: none;
}

.ordinary-matting-matting .matting-zoom-controls button:first-child::after {
  content: "适应";
}

/* Functional smart-matting controls and live result composition. */
.ordinary-matting-matting .matting-batch-queue {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.ordinary-matting-matting .matting-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #475467;
  font-size: 12px;
}

.ordinary-matting-matting .matting-batch-head span {
  color: #8a94a6;
}

.ordinary-matting-matting .matting-batch-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ordinary-matting-matting .matting-batch-item,
.ordinary-matting-matting .matting-batch-add {
  position: relative;
  display: grid;
  min-width: 0;
  height: 70px;
  overflow: hidden;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  background: #fff;
}

.ordinary-matting-matting .matting-batch-item > span {
  background-position: center;
  background-size: cover;
}

.ordinary-matting-matting .matting-batch-item b {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 4px 6px;
  color: #fff;
  background: rgba(26, 34, 50, 0.7);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordinary-matting-matting .matting-batch-item button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(25, 32, 47, 0.74);
}

.ordinary-matting-matting .matting-batch-item button::before,
.ordinary-matting-matting .matting-batch-item button::after {
  position: absolute;
  left: 5px;
  top: 9px;
  width: 10px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: rotate(45deg);
}

.ordinary-matting-matting .matting-batch-item button::after {
  transform: rotate(-45deg);
}

.ordinary-matting-matting .matting-batch-add {
  place-items: center;
  align-content: center;
  gap: 4px;
  color: #6d56f4;
  font-size: 11px;
}

.ordinary-matting-matting .matting-batch-add i::before {
  content: "+";
  font-size: 20px;
  font-style: normal;
}

.ordinary-matting-matting .matting-background-image-picker {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0 9px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin-top: 9px;
  padding: 6px 9px;
  border: 1px dashed #d7dfea;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  text-align: left;
}

.ordinary-matting-matting .matting-background-image-picker > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 36px;
  border-radius: 5px;
  background: #f0f3f8 center / cover no-repeat;
}

.ordinary-matting-matting .matting-background-image-picker b,
.ordinary-matting-matting .matting-background-image-picker small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordinary-matting-matting .matting-background-image-picker small {
  color: #8a94a6;
  font-size: 10px;
}

.ordinary-matting-matting .matting-custom-color {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.ordinary-matting-matting .matting-custom-color.active {
  border-color: #725cf4;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #725cf4;
}

.ordinary-matting-matting .matting-custom-color input {
  position: absolute;
  inset: -8px;
  width: 46px;
  height: 46px;
  opacity: 0;
  cursor: pointer;
}

.ordinary-matting-matting .matting-custom-color span {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  pointer-events: none;
}

.ordinary-matting-matting .matting-toolbar-actions button.active,
.ordinary-matting-matting .matting-zoom-controls button.active {
  border-color: #765cf4;
  color: #6d56f4;
  background: #f3f0ff;
}

.ordinary-matting-matting .matting-toolbar-actions button:disabled,
.ordinary-matting-matting .matting-download:disabled,
.ordinary-matting-matting .matting-more-edit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ordinary-matting-matting .matting-zoom-controls {
  display: flex;
  right: 14px;
  top: auto;
  bottom: 14px;
  flex-direction: row;
  width: auto;
  transform: none;
}

.ordinary-matting-matting .matting-zoom-controls span,
.ordinary-matting-matting .matting-zoom-controls button,
.ordinary-matting-matting .matting-zoom-controls button:last-child,
.ordinary-matting-matting .matting-zoom-controls button:nth-child(2),
.ordinary-matting-matting .matting-zoom-controls button:nth-child(4) {
  display: grid;
}

.ordinary-matting-matting .matting-zoom-controls button,
.ordinary-matting-matting .matting-zoom-controls span {
  order: initial;
  min-width: 38px;
  width: auto;
  height: 38px;
  border-right: 1px solid #e4e9f2;
  border-radius: 0;
  box-shadow: none;
}

.ordinary-matting-matting .matting-zoom-controls button:first-child {
  order: initial;
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin-top: 0;
  border-radius: 0;
  font-size: 0;
}

.ordinary-matting-matting .matting-zoom-controls button:first-child::before {
  display: block;
}

.ordinary-matting-matting .matting-zoom-controls button:first-child::after {
  display: none;
  content: "";
}

.ordinary-matting-matting .matting-canvas {
  transition: transform 150ms ease;
}

.ordinary-matting-matting[data-ordinary-compare="on"] .matting-preview-workspace.is-split .matting-stage {
  display: block;
}

.ordinary-matting-matting[data-ordinary-compare="on"] .matting-preview-workspace.is-split .matting-canvas.before,
.ordinary-matting-matting[data-ordinary-compare="on"] .matting-preview-workspace.is-split .matting-canvas.after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ordinary-matting-matting[data-ordinary-compare="on"] .matting-preview-workspace.is-split .matting-canvas.after {
  z-index: 1;
  clip-path: inset(0 0 0 var(--ordinary-compare-position, 50%));
}

.ordinary-matting-matting[data-ordinary-compare="on"] .matting-compare-handle {
  left: var(--ordinary-compare-position, 50%);
  display: block;
}

.ordinary-matting-matting[data-ordinary-compare="off"] .matting-preview-workspace.is-split .matting-stage {
  display: block;
}

.ordinary-matting-matting[data-ordinary-compare="off"] .matting-preview-workspace.is-split .matting-canvas.before,
.ordinary-matting-matting[data-ordinary-compare="off"] .matting-compare-handle {
  display: none;
}

.ordinary-matting-matting[data-ordinary-compare="off"] .matting-preview-workspace.is-split .matting-canvas.after {
  width: 100%;
  height: 100%;
}

.ordinary-matting-matting[data-matting-background-mode="solid"] .matting-canvas.after,
.ordinary-matting-matting[data-matting-background-mode="custom"] .matting-canvas.after,
.ordinary-matting-matting[data-matting-background-mode="solid"] .matting-canvas.single,
.ordinary-matting-matting[data-matting-background-mode="custom"] .matting-canvas.single {
  background-color: var(--matting-background-color, #fff);
  background-image: var(--matting-image, none);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ordinary-matting-matting[data-matting-background-mode="image"] .matting-canvas.after,
.ordinary-matting-matting[data-matting-background-mode="image"] .matting-canvas.single {
  background-color: #fff;
  background-image: var(--matting-image, none), var(--matting-background-image, none);
  background-position: center, center;
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;
}

.ordinary-matting-matting.is-preview-panning .matting-stage {
  cursor: grab;
}

.ordinary-matting-matting.is-preview-panning .matting-stage:active {
  cursor: grabbing;
}

.ordinary-matting-matting.is-preview-fullscreen .matting-preview-section {
  position: fixed;
  inset: 16px;
  z-index: 2000;
  height: auto;
  border: 1px solid #dbe2ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(20, 28, 48, 0.24);
}

.ordinary-matting-matting.is-preview-fullscreen .matting-preview-workspace {
  height: 100%;
}

.matting-download {
  border: 0;
}

.matting-records .tool-generation-head button {
  border: 0;
  color: #7d8799;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.matting-result-editor-modal {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  width: min(1040px, calc(100vw - 40px));
  min-height: min(680px, calc(100vh - 40px));
  overflow: hidden;
  padding: 0;
}

.matting-result-editor-preview {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 28px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e7edf5 25%, transparent 25%),
    linear-gradient(-45deg, #e7edf5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e7edf5 75%),
    linear-gradient(-45deg, transparent 75%, #e7edf5 75%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

.matting-result-editor-preview[data-background-mode="solid"],
.matting-result-editor-preview[data-background-mode="custom"] {
  background: var(--matting-background-color, #fff);
}

.matting-result-editor-preview[data-background-mode="image"] {
  background: var(--matting-background-image, none) center / cover no-repeat;
}

.matting-result-editor-preview img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
}

.matting-result-editor-modal > aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 42px 28px 28px;
  border-left: 1px solid #e7ebf2;
}

.matting-result-editor-modal > aside > span,
.matting-history-modal-head > span {
  color: #765cf4;
  font-size: 12px;
  font-weight: 800;
}

.matting-result-editor-modal h2,
.matting-history-modal h2 {
  margin: 0;
  color: #20293a;
  font-size: 24px;
  letter-spacing: 0;
}

.matting-result-editor-formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.matting-result-editor-formats button {
  height: 40px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  font-weight: 800;
}

.matting-result-editor-formats button.active {
  border-color: #765cf4;
  color: #6d56f4;
  background: #f5f2ff;
}

.matting-history-modal {
  width: min(920px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 34px;
}

.matting-history-modal-head {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.matting-history-modal-head small {
  color: #8a94a6;
}

.matting-history-modal-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.matting-history-modal-list > button {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  text-align: left;
}

.matting-history-modal-list > button > span {
  height: 124px;
  border-radius: 5px;
  background: #f1f4f8 center / cover no-repeat;
}

.matting-history-modal-list b,
.matting-history-modal-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matting-history-modal-list small {
  color: #8a94a6;
}

@media (max-width: 760px) {
  .matting-result-editor-modal {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .matting-result-editor-preview {
    min-height: 320px;
  }

  .matting-result-editor-modal > aside {
    border-top: 1px solid #e7ebf2;
    border-left: 0;
  }

  .matting-history-modal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.id-photo-history-modal {
  width: min(980px, calc(100vw - 40px));
  max-height: min(780px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 34px;
}

.id-photo-history-modal-head {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.id-photo-history-modal-head > span {
  color: #765cf4;
  font-size: 12px;
  font-weight: 800;
}

.id-photo-history-modal-head h2 {
  margin: 0;
  color: #20293a;
  font-size: 24px;
  letter-spacing: 0;
}

.id-photo-history-modal-head small {
  color: #8a94a6;
}

.id-photo-history-modal-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.id-photo-history-modal-list > button {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  text-align: left;
}

.id-photo-history-modal-list > button > span {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.id-photo-history-modal-list b,
.id-photo-history-modal-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-photo-history-modal-list small {
  color: #8a94a6;
}

@media (max-width: 760px) {
  .id-photo-history-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 30px 16px 18px;
  }

  .id-photo-history-modal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.enhance-history-modal {
  width: min(980px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 34px;
}

.enhance-history-modal-head {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.enhance-history-modal-head > span {
  color: #765cf4;
  font-size: 12px;
  font-weight: 800;
}

.enhance-history-modal-head h2 {
  margin: 0;
  color: #20293a;
  font-size: 24px;
  letter-spacing: 0;
}

.enhance-history-modal-head small {
  color: #8a94a6;
}

.enhance-history-modal-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.enhance-history-modal-list > button {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  text-align: left;
}

.enhance-history-modal-list > button > span {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  background: #eef2f7 center / cover no-repeat;
}

.enhance-history-modal-list b,
.enhance-history-modal-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhance-history-modal-list small {
  color: #8a94a6;
}

.watermark-history-modal,
.inpaint-history-modal,
.montage-history-modal {
  width: min(980px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 34px;
}

.watermark-history-modal-head,
.inpaint-history-modal-head,
.montage-history-modal-head {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.watermark-history-modal-head > span,
.inpaint-history-modal-head > span,
.montage-history-modal-head > span {
  color: #765cf4;
  font-size: 12px;
  font-weight: 800;
}

.watermark-history-modal-head h2,
.inpaint-history-modal-head h2,
.montage-history-modal-head h2 {
  margin: 0;
  color: #20293a;
  font-size: 24px;
  letter-spacing: 0;
}

.watermark-history-modal-head small,
.inpaint-history-modal-head small,
.montage-history-modal-head small {
  color: #8a94a6;
}

.watermark-history-modal-list,
.inpaint-history-modal-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.watermark-history-modal-list > button,
.inpaint-history-modal-list > button {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  text-align: left;
}

.watermark-history-modal-list > button.active,
.inpaint-history-modal-list > button.active {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12);
}

.watermark-history-modal-list > button > span,
.inpaint-history-modal-list > button > span {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  background: #eef2f7 center / contain no-repeat;
}

.watermark-history-modal-list b,
.watermark-history-modal-list small,
.inpaint-history-modal-list b,
.inpaint-history-modal-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-history-modal-list small,
.inpaint-history-modal-list small {
  color: #8a94a6;
}

.montage-history-modal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.montage-history-modal-list .montage-history-card {
  min-height: 132px;
}

@media (max-width: 760px) {
  .watermark-history-modal,
  .inpaint-history-modal,
  .montage-history-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 30px 16px 18px;
  }

  .watermark-history-modal-list,
  .inpaint-history-modal-list,
  .montage-history-modal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .enhance-history-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 30px 16px 18px;
  }

  .enhance-history-modal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ordinary-matting-matting .matting-export-row {
  min-height: 86px;
}

.ordinary-matting-matting .matting-blueprint-records {
  padding: 14px 12px 16px;
  min-height: 0;
  overflow: hidden;
}

.ordinary-matting-matting .matting-blueprint-records .tool-generation-records {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ordinary-matting-matting .matting-blueprint-record-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
  overflow: hidden;
  padding-top: 9px;
}

.ordinary-matting-matting .matting-blueprint-record-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #f8fafc center / contain no-repeat;
  box-shadow: 0 8px 18px rgba(25, 38, 64, 0.04);
}

.ordinary-matting-matting .matting-blueprint-record-card.active {
  box-shadow: inset 0 0 0 2px #805bff, 0 8px 18px rgba(25, 38, 64, 0.04);
}

.ordinary-matting-matting .matting-blueprint-record-card > span:not(.record-progress-overlay) {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 5px 7px;
  overflow: hidden;
  border-radius: 999px;
  color: #475467;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  clip: auto;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-height: 900px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting {
    min-height: calc(100vh - 56px);
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control,
  .ordinary-matting-matting .ordinary-control {
    grid-template-rows: minmax(0, calc(100% - 86px)) 86px !important;
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
    margin-top: -12px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control-scroll,
  .ordinary-matting-matting .ordinary-control-scroll {
    height: calc(100vh - 166px) !important;
    max-height: calc(100vh - 166px) !important;
    padding: 18px 24px 6px;
  }

  .ordinary-matting-matting .ordinary-title {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .ordinary-matting-matting .ordinary-title .panel-title {
    font-size: 21px;
  }

  .ordinary-matting-matting .ordinary-step {
    gap: 6px;
    margin-bottom: 6px;
  }

  .ordinary-matting-matting .matting-upload-step {
    margin-bottom: 10px;
  }

  .ordinary-matting-matting .matting-background-step {
    margin-bottom: 14px;
  }

  .ordinary-matting-matting .matting-mode-card {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 47px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .ordinary-matting-matting .matting-mode-select {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 44px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .ordinary-matting-matting .matting-mode-icon {
    width: 30px;
    height: 30px;
  }

  .ordinary-matting-matting .matting-mode-card small,
  .ordinary-matting-matting .matting-upload-hint {
    display: block;
    font-size: 10px;
    line-height: 1.1;
  }

  .ordinary-matting-matting .matting-mode-card strong,
  .ordinary-matting-matting .matting-upload-card strong {
    font-size: 12px;
  }

  .ordinary-matting-matting .matting-upload-card {
    min-height: 60px;
    grid-template-columns: 52px minmax(0, 1fr) 18px;
    padding: 6px;
  }

  .ordinary-matting-matting .matting-upload-thumb {
    width: 46px;
    height: 46px;
  }

  .ordinary-matting-matting .matting-upload-card small {
    margin-top: 3px;
  }

  .ordinary-matting-matting .matting-upload-card div button {
    margin-top: 3px;
  }

  .ordinary-matting-matting .matting-range-row {
    min-height: 21px;
  }

  .ordinary-matting-matting .matting-toggle-row {
    min-height: 21px;
  }

  .ordinary-matting-matting .matting-bg-tabs button {
    height: 28px;
    font-size: 9px;
  }

  .ordinary-matting-matting .matting-color-grid {
    gap: 7px;
    margin-top: 5px;
  }

  .ordinary-matting-matting .matting-color,
  .ordinary-matting-matting .matting-eyedropper {
    width: 23px;
    height: 23px;
  }

  .ordinary-matting-matting .matting-background-step {
    margin-bottom: 8px;
  }

  .ordinary-matting-matting .matting-other-step .ordinary-step-head {
    min-height: 20px;
  }

  .ordinary-matting-matting .matting-other-step {
    margin-bottom: 4px;
  }

  .ordinary-matting-matting .matting-other-step .matting-toggle-row {
    min-height: 19px;
  }

  .ordinary-matting-matting .matting-other-step .matting-range-row {
    min-height: 20px;
  }

  .ordinary-matting-matting .ordinary-actions {
    padding: 6px 24px 0;
  }

  .ordinary-matting-matting .ordinary-primary-action {
    height: 50px !important;
  }

  .ordinary-matting-matting .ordinary-preview-column {
    grid-template-rows: minmax(438px, 1fr) 158px;
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
    gap: 8px;
  }

  .ordinary-matting-matting .matting-preview-workspace {
    grid-template-rows: 52px minmax(0, 1fr) 78px;
  }

  .ordinary-matting-matting .matting-stage {
    margin: 10px 14px 8px;
  }

  .ordinary-matting-matting .matting-export-row {
    min-height: 78px;
    padding: 0 14px;
  }

  .ordinary-matting-matting .matting-blueprint-records {
    padding: 10px 10px 12px;
  }

  .ordinary-matting-matting .matting-blueprint-record-list {
    gap: 10px;
    padding-top: 7px;
  }

  .ordinary-matting-matting .matting-blueprint-record-card {
    min-height: 96px;
  }
}

@media (max-height: 780px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control,
  .ordinary-matting-matting .ordinary-control {
    grid-template-rows: minmax(0, calc(100% - 58px)) 58px !important;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    margin-top: -10px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control-scroll,
  .ordinary-matting-matting .ordinary-control-scroll {
    height: calc(100vh - 134px) !important;
    max-height: calc(100vh - 134px) !important;
    overflow-y: auto;
    padding: 8px 22px 12px;
  }

  .ordinary-matting-matting .ordinary-title {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  .ordinary-matting-matting .ordinary-title .panel-title {
    font-size: 18px;
  }

  .ordinary-matting-matting .ordinary-step {
    gap: 4px;
    margin-bottom: 4px;
  }

  .ordinary-matting-matting .matting-mode-list {
    gap: 4px;
  }

  .ordinary-matting-matting .matting-mode-card {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 41px;
    gap: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .ordinary-matting-matting .matting-mode-select {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    min-height: 38px;
    gap: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .ordinary-matting-matting .matting-mode-icon {
    width: 26px;
    height: 26px;
  }

  .ordinary-matting-matting .matting-mode-card small,
  .ordinary-matting-matting .matting-upload-hint {
    display: block;
    font-size: 9px;
    line-height: 1.05;
  }

  .ordinary-matting-matting .ordinary-step-head {
    min-height: 19px;
  }

  .ordinary-matting-matting .ordinary-step-head b {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 10px;
  }

  .ordinary-matting-matting .matting-upload-card {
    min-height: 48px;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
  }

  .ordinary-matting-matting .matting-upload-thumb {
    width: 36px;
    height: 36px;
  }

  .ordinary-matting-matting .matting-upload-card div button {
    margin-top: 1px;
  }

  .ordinary-matting-matting .matting-background-step {
    margin-bottom: 5px;
  }

  .ordinary-matting-matting .matting-bg-tabs button {
    height: 25px;
  }

  .ordinary-matting-matting .matting-color-grid {
    gap: 5px;
    margin-top: 4px;
  }

  .ordinary-matting-matting .matting-color,
  .ordinary-matting-matting .matting-eyedropper {
    width: 19px;
    height: 19px;
  }

  .ordinary-matting-matting .matting-other-step {
    gap: 3px;
    margin-bottom: 3px;
  }

  .ordinary-matting-matting .matting-other-step .matting-toggle-row,
  .ordinary-matting-matting .matting-other-step .matting-range-row {
    min-height: 17px;
  }

  .ordinary-matting-matting .matting-other-step .matting-range-row span,
  .ordinary-matting-matting .matting-other-step .matting-toggle-row {
    font-size: 11px;
  }

  .ordinary-matting-matting .matting-other-step .matting-range-row strong {
    height: 20px;
  }

  .ordinary-matting-matting .ordinary-actions {
    padding: 3px 22px 0;
  }

  .ordinary-matting-matting .ordinary-primary-action {
    height: 36px !important;
    padding-right: 70px !important;
  }

  .ordinary-matting-matting .ordinary-primary-action::after {
    height: 23px;
    width: 48px;
    right: 14px;
    padding-left: 26px;
  }

  .ordinary-matting-matting .ordinary-preview-column {
    grid-template-rows: minmax(376px, 1fr) 126px;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
  }

  .ordinary-matting-matting .matting-preview-workspace {
    grid-template-rows: 48px minmax(0, 1fr) 70px;
  }

  .ordinary-matting-matting .matting-toolbar-actions {
    gap: 8px;
  }

  .ordinary-matting-matting .matting-toolbar-actions button {
    height: 32px;
    padding: 0 14px;
  }

  .ordinary-matting-matting .matting-stage {
    margin: 8px 12px 6px;
  }

  .ordinary-matting-matting .matting-export-row {
    grid-template-columns: auto minmax(0, 1fr) 168px 104px;
    gap: 10px;
    min-height: 70px;
  }

  .ordinary-matting-matting .matting-format-list {
    gap: 8px;
  }

  .ordinary-matting-matting .matting-format-list button,
  .ordinary-matting-matting .matting-download,
  .ordinary-matting-matting .matting-more-edit {
    height: 44px;
  }

  .ordinary-matting-matting .matting-blueprint-records {
    padding: 8px 10px 10px;
  }

  .ordinary-matting-matting .matting-blueprint-record-card {
    min-height: 72px;
  }
}

@media (max-height: 780px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control,
  .ordinary-matting-matting .ordinary-control {
    grid-template-rows: minmax(0, calc(100% - 42px)) 42px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control-scroll,
  .ordinary-matting-matting .ordinary-control-scroll {
    height: calc(100vh - 118px) !important;
    max-height: calc(100vh - 118px) !important;
    padding-top: 7px;
    padding-bottom: 8px;
  }

  .ordinary-matting-matting .ordinary-title {
    margin-bottom: 4px;
    padding-bottom: 4px;
  }

  .ordinary-matting-matting .ordinary-title .panel-title {
    font-size: 16px;
  }

  .ordinary-matting-matting .ordinary-step {
    gap: 2px;
    margin-bottom: 2px;
  }

  .ordinary-matting-matting .ordinary-step-head {
    min-height: 15px;
  }

  .ordinary-matting-matting .ordinary-step-head b {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    font-size: 9px;
  }

  .ordinary-matting-matting .ordinary-step-head strong {
    font-size: 11px;
  }

  .ordinary-matting-matting .matting-mode-list {
    gap: 3px;
  }

  .ordinary-matting-matting .matting-mode-card {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    min-height: 27px;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .ordinary-matting-matting .matting-mode-select {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    min-height: 30px;
    gap: 6px;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .ordinary-matting-matting .matting-mode-icon {
    width: 22px;
    height: 22px;
  }

  .ordinary-matting-matting .matting-mode-card small,
  .ordinary-matting-matting .matting-mode-select small,
  .ordinary-matting-matting .matting-upload-hint {
    display: none;
  }

  .ordinary-matting-matting .matting-upload-card {
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    min-height: 32px;
    padding: 3px 6px;
  }

  .ordinary-matting-matting .matting-upload-thumb {
    width: 24px;
    height: 24px;
  }

  .ordinary-matting-matting .matting-upload-card strong,
  .ordinary-matting-matting .matting-mode-select select,
  .ordinary-matting-matting .matting-mode-card strong {
    font-size: 11px;
  }

  .ordinary-matting-matting .matting-upload-card small {
    display: block;
    margin-top: 0;
    font-size: 9px;
    line-height: 1;
  }

  .ordinary-matting-matting .matting-upload-card div button {
    display: none;
  }

  .ordinary-matting-matting .matting-range-row,
  .ordinary-matting-matting .matting-toggle-row,
  .ordinary-matting-matting .matting-other-step .matting-range-row,
  .ordinary-matting-matting .matting-other-step .matting-toggle-row {
    min-height: 16px;
  }

  .ordinary-matting-matting .matting-bg-tabs button {
    height: 18px;
    font-size: 8px;
  }

  .ordinary-matting-matting .matting-color-grid {
    gap: 4px;
    margin-top: 3px;
  }

  .ordinary-matting-matting .matting-color,
  .ordinary-matting-matting .matting-eyedropper {
    width: 14px;
    height: 14px;
  }

  .ordinary-matting-matting .ordinary-actions {
    padding: 2px 22px 0;
  }

  .ordinary-matting-matting .ordinary-primary-action {
    height: 32px !important;
  }
}

@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-shell {
    grid-template-columns: minmax(344px, 372px) minmax(0, 1fr);
    gap: 16px;
    padding: 18px 28px 24px;
  }

  .ordinary-workbench .ordinary-control {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
  }

  .ordinary-workbench .ordinary-control-scroll {
    max-height: none;
  }

  .ordinary-preview-column {
    max-height: none;
  }

  .ordinary-records .tool-generation-list {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
  }

  .enhance-record-list,
  .inpaint-record-list {
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 12px;
  }

  .id-photo-blueprint .id-photo-history-list {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    overflow: hidden;
  }

  .ordinary-records .tool-generation-item {
    flex-basis: auto;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water {
    grid-template-columns: minmax(352px, 372px) minmax(0, 1fr);
    gap: 8px 16px;
    padding: 12px 20px 24px;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control-scroll {
    max-height: none;
  }

  .ordinary-tool-pdf-add-water .ordinary-preview-column {
    grid-template-rows: minmax(420px, auto) auto;
    max-height: none;
  }

  .ordinary-tool-pdf-add-water .ordinary-records .tool-generation-list {
    grid-template-columns: repeat(5, minmax(116px, 1fr));
    gap: 12px;
  }

  .ordinary-tool-pdf-add-water .ordinary-records .tool-generation-item {
    grid-template-rows: 86px auto auto;
    min-height: 148px;
  }

  .ordinary-tool-pdf-add-water .ordinary-records .tool-generation-thumb {
    height: 86px;
  }

  .ordinary-matting-shell {
    grid-template-columns: minmax(312px, 332px) minmax(0, 1fr);
    padding: 14px 20px 24px;
  }

  .ordinary-matting-shell .ordinary-control {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-matting-shell .ordinary-control-scroll {
    max-height: none;
  }

  .ordinary-matting-shell .ordinary-preview-column {
    grid-template-rows: minmax(0, 560px) auto;
    max-height: none;
  }

  .matting-preview-workspace {
    grid-template-rows: auto minmax(390px, 1fr) auto;
  }

  .matting-preview-toolbar,
  .matting-export-row {
    min-height: 64px;
  }

  .matting-status {
    grid-template-columns: 20px minmax(0, 150px) minmax(90px, 140px) auto;
  }

  .matting-toolbar-actions {
    gap: 8px;
  }

  .matting-toolbar-actions button {
    padding: 0 12px;
  }

  .matting-records .tool-generation-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .matting-records .tool-generation-item {
    flex: 0 0 132px;
    grid-template-rows: 88px auto;
    min-height: 150px;
  }

  .matting-records .tool-generation-thumb {
    height: 88px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 50px);
    max-height: none;
    overflow: visible;
    padding: 14px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control,
  .ordinary-matting-matting .ordinary-control {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0;
    overflow: visible !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control-scroll,
  .ordinary-matting-matting .ordinary-control-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    padding: 18px;
  }

  .ordinary-matting-matting .ordinary-actions {
    padding: 12px 18px 18px;
  }

  .ordinary-matting-matting .ordinary-primary-action {
    height: 52px !important;
  }

  .ordinary-matting-matting .ordinary-preview-column {
    grid-template-rows: auto auto;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }

  .ordinary-matting-matting .matting-preview-workspace {
    grid-template-rows: auto minmax(320px, auto) auto;
    height: auto;
  }

  .ordinary-matting-matting .matting-stage {
    min-height: 320px;
  }

  .ordinary-matting-matting .matting-export-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ordinary-matting-matting .matting-blueprint-record-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .ordinary-matting-matting .matting-blueprint-record-card {
    height: 118px;
    min-height: 118px;
  }

  .topbar-inner {
    overflow: hidden;
  }

  .nav {
    max-width: 100%;
    min-width: 0;
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .nav-link {
    padding-right: 12px;
    padding-left: 12px;
  }

  .ordinary-blueprint-shell {
    width: 100%;
  }

  .ordinary-records .tool-generation-list {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    overflow: visible;
  }

  .ordinary-tool-pdf-add-water .ordinary-preview-column {
    grid-template-rows: auto auto;
    max-height: none;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "pagehead"
      "control"
      "preview";
    gap: 12px;
    width: 100%;
    padding: 12px;
  }

  .ordinary-tool-pdf-add-water .ordinary-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .ordinary-tool-pdf-add-water .ordinary-page-title {
    width: 100%;
    gap: 12px;
  }

  .ordinary-tool-pdf-add-water .ordinary-page-title h1 {
    font-size: 21px;
  }

  .ordinary-tool-pdf-add-water .ordinary-page-tools {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control-scroll {
    max-height: none;
  }

  .ordinary-tool-pdf-add-water .ordinary-actions {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .ordinary-tool-pdf-add-water .watermark-preview-toolbar {
    height: auto;
    min-height: 50px;
    padding: 10px;
  }

  .ordinary-tool-pdf-add-water .watermark-compare-tools {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ordinary-tool-pdf-add-water .ordinary-watermark-preview {
    height: auto;
  }

  .ordinary-tool-pdf-add-water .watermark-checker {
    min-height: 260px;
    aspect-ratio: 1.25;
  }

  .ordinary-tool-pdf-add-water .watermark-zoom-tools {
    right: 10px;
    bottom: 10px;
    gap: 7px;
    height: 30px;
    padding: 0 8px;
  }

  .ordinary-tool-pdf-add-water .ordinary-records .tool-generation-list {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
  }

  .ordinary-tool-pdf-add-water .ordinary-records .tool-generation-item {
    grid-template-rows: 92px auto auto;
    min-height: 154px;
  }

  .ordinary-tool-pdf-add-water .ordinary-records .tool-generation-thumb {
    height: 92px;
  }

  .ordinary-matting-shell {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .ordinary-matting-shell .ordinary-control {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-matting-shell .ordinary-control-scroll {
    max-height: none;
    overflow: visible;
    padding: 18px;
  }

  .ordinary-matting-shell .ordinary-preview-column {
    grid-template-rows: auto auto;
    max-height: none;
    overflow: visible;
  }

  .ordinary-matting-shell .ordinary-title .panel-title {
    font-size: 23px;
  }

  .matting-preview-workspace {
    grid-template-rows: auto minmax(340px, auto) auto;
    height: auto;
  }

  .matting-preview-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 58px;
    padding: 10px 12px;
  }

  .matting-status {
    grid-template-columns: 20px minmax(0, 1fr) minmax(70px, 120px) auto;
    flex: 1 1 240px;
  }

  .matting-toolbar-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .matting-toolbar-actions button {
    height: 34px;
    min-width: 0;
    padding: 0 12px;
  }

  .matting-stage {
    min-height: 340px;
    margin: 10px 12px;
  }

  .matting-preview-workspace.is-split .matting-stage {
    grid-template-columns: 1fr;
  }

  .matting-preview-workspace.is-split .matting-canvas {
    min-height: 220px;
  }

  .matting-preview-workspace.is-split .matting-canvas.before {
    display: none;
  }

  .matting-compare-handle {
    display: none;
  }

  .matting-loupe {
    right: 20px;
    width: 118px;
    height: 118px;
  }

  .matting-zoom-controls {
    right: 10px;
    bottom: 10px;
    transform: scale(0.9);
    transform-origin: right bottom;
  }

  .matting-export-row,
  .matting-export-row.compact {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 10px;
    height: auto;
    min-height: 0;
    padding: 12px;
  }

  .matting-format-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .matting-format-list button,
  .matting-download,
  .matting-more-edit {
    width: 100%;
  }

  .matting-records .tool-generation-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }

  .matting-records .tool-generation-item {
    flex: 0 0 142px;
    grid-template-rows: 92px auto;
    min-height: 150px;
  }

  .matting-records .tool-generation-thumb {
    height: 92px;
  }

  .matting-preview-toolbar,
  .matting-status,
  .matting-toolbar-actions,
  .enhance-preview-toolbar,
  .enhance-stage-actions,
  .inpaint-preview-toolbar,
  .inpaint-preview-actions {
    max-width: 100%;
  }

  .matting-preview-toolbar,
  .enhance-preview-toolbar,
  .enhance-stage-actions,
  .inpaint-preview-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
    height: auto;
    min-height: 58px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .matting-status {
    grid-template-columns: 20px minmax(0, 1fr) minmax(72px, 120px) auto;
    flex: 1 1 250px;
  }

  .matting-status span,
  .matting-status strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .matting-toolbar-actions,
  .enhance-toolbar-actions,
  .inpaint-preview-toolbar > div,
  .inpaint-preview-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .matting-toolbar-actions button,
  .enhance-toolbar-actions button,
  .inpaint-preview-toolbar button,
  .inpaint-preview-actions .ghost-btn,
  .inpaint-preview-actions .primary-btn {
    min-width: 0;
    max-width: 100%;
  }

  .id-photo-blueprint .id-photo-history-list {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  .nav {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 4px;
  }

  .nav-item {
    flex: 0 1 auto;
  }

  .nav-link {
    height: 34px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 13px;
  }

  .ordinary-records .tool-generation-list {
    grid-template-columns: 1fr;
  }

  .ordinary-tool-pdf-add-water .ordinary-upload-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .ordinary-tool-pdf-add-water .ordinary-segment {
    grid-template-columns: 1fr;
  }

  .ordinary-tool-pdf-add-water .ordinary-workbench .control-row,
  .ordinary-tool-pdf-add-water .control-row {
    grid-template-columns: 70px minmax(0, 1fr) 48px;
  }

  .ordinary-tool-pdf-add-water .ordinary-records .tool-generation-list {
    grid-template-columns: 1fr;
  }

  .ordinary-tool-pdf-add-water .watermark-zoom-tools {
    transform: scale(0.92);
    transform-origin: right bottom;
  }

  .enhance-record-list,
  .inpaint-record-list {
    grid-template-columns: 1fr;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-template-columns: 1fr;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    height: auto;
    min-height: 174px;
  }

  .matting-export-row,
  .matting-export-row.compact {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: auto;
    min-height: 0;
    padding: 12px;
  }

  .matting-export-row > strong,
  .matting-format-list {
    grid-column: 1 / -1;
  }

  .matting-format-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .matting-format-list button,
  .matting-download,
  .matting-more-edit {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .matting-status {
    grid-template-columns: 20px minmax(0, 1fr) 70px auto;
    gap: 8px;
  }

  .matting-toolbar-actions button,
  .enhance-toolbar-actions button,
  .inpaint-preview-toolbar button {
    height: 32px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
  }
}

/* Ordinary tool 05 fit pass: keep ID photo inside laptop and phone viewports. */
@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(330px, 354px) minmax(0, 1fr);
    gap: 18px;
    min-height: calc(100vh - 60px);
    padding: 12px 20px 10px;
  }

  .id-photo-blue-left {
    align-content: start;
    grid-template-rows: auto 44px;
    max-height: calc(100vh - 78px);
  }

  .id-photo-blue-title {
    min-height: 44px;
    margin-bottom: 8px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .id-photo-blue-title h1 {
    font-size: 22px;
  }

  .id-photo-blue-title p {
    margin-top: 4px;
    font-size: 12px;
  }

  .id-photo-blue-step {
    gap: 5px;
    margin-bottom: 5px;
    padding: 8px 10px 7px;
  }

  .id-photo-blue-step-head strong {
    font-size: 14px;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 70px;
    grid-template-rows: 32px 15px;
    column-gap: 14px;
  }

  .id-photo-upload-button {
    height: 32px;
    font-size: 13px;
  }

  .id-photo-upload-preview {
    width: 68px;
    height: 68px;
  }

  .id-photo-blue-colors {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    width: 100%;
    height: 34px;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 10px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 7px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 31px 14px;
    min-height: 50px;
    padding: 3px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 31px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 5px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 9px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 66px minmax(0, 1fr) 34px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 25px;
    font-size: 11px;
  }

  .id-photo-print-tabs {
    gap: 7px;
    padding-left: 86px;
  }

  .id-photo-generate-button {
    height: 44px !important;
  }

  .id-photo-blue-main {
    grid-template-rows: minmax(0, 418px) 190px auto;
    gap: 10px;
    max-height: calc(100vh - 78px);
  }

  .id-photo-blue-result-card {
    grid-template-rows: 28px minmax(0, 1fr);
    padding: 14px;
  }

  .id-photo-blue-result-card h2,
  .id-photo-history-head strong,
  .id-photo-result-card h3 {
    font-size: 14px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(226px, 250px);
    gap: 12px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(220px, 24vw, 260px);
    max-height: 364px;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto minmax(0, 1fr) 38px 34px;
    padding: 13px 12px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 6px;
    padding-top: 7px;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    gap: 8px;
    font-size: 11.5px;
  }

  .id-photo-blueprint .id-photo-result-meta .id-photo-status-row strong {
    padding: 4px 7px;
    font-size: 11.5px;
  }

  .id-photo-result-download {
    height: 38px;
    margin-top: 8px;
    font-size: 14px;
  }

  .id-photo-result-buttons {
    gap: 8px;
    margin-top: 8px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 34px;
    font-size: 12px;
  }

  .id-photo-history {
    grid-template-rows: 28px minmax(0, 1fr);
    padding: 12px 14px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(124px, 142px);
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 60px auto;
    gap: 6px;
    height: 124px;
    padding: 7px 9px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 56px;
    height: 60px;
  }

  .id-photo-blueprint .id-photo-history-copy {
    gap: 3px;
  }

  .id-photo-blueprint .id-photo-history-copy strong,
  .id-photo-blueprint .id-photo-history-copy small,
  .id-photo-history-more strong,
  .id-photo-history-more span {
    font-size: 11px;
    line-height: 1.12;
  }

  .id-photo-blue-tip {
    margin-top: 2px;
    margin-left: 12px;
    font-size: 11px;
  }
}

/* Ordinary tool 05 short-height containment lock, 2026-06-28 */
@media (max-width: 1400px) and (min-width: 901px) and (max-height: 820px) {
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar,
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar-inner {
    height: 56px;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button {
    height: 56px;
  }

  .ordinary-id-photo-actions {
    height: 56px;
  }

  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    min-height: calc(100vh - 60px);
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .id-photo-blue-left {
    align-content: start;
    grid-template-rows: auto 40px;
    max-height: calc(100vh - 72px);
  }

  .id-photo-blue-left-scroll {
    padding-bottom: 0;
    overflow: hidden;
  }

  .id-photo-blue-title {
    min-height: 36px;
    gap: 9px;
    margin: 0 0 4px 3px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .id-photo-blue-title .ordinary-title-icon::before {
    width: 20px;
    height: 20px;
  }

  .id-photo-blue-title h1 {
    font-size: 20px;
    line-height: 1;
  }

  .id-photo-blue-title p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.1;
  }

  .id-photo-blue-step {
    gap: 3px;
    margin-bottom: 3px;
    padding: 5px 8px;
  }

  .id-photo-blue-step-head {
    gap: 7px;
    min-height: 17px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
    font-size: 10px;
  }

  .id-photo-blue-step-head strong {
    font-size: 12.5px;
    line-height: 1.05;
  }

  .id-photo-step-aside button {
    font-size: 10.5px;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 54px;
    grid-template-rows: 26px 12px;
    column-gap: 9px;
    row-gap: 2px;
  }

  .id-photo-upload-button {
    height: 26px;
    gap: 5px;
    font-size: 11.5px;
  }

  .id-photo-upload-button i {
    width: 13px;
    height: 13px;
  }

  .id-photo-upload-preview {
    width: 52px;
    height: 52px;
  }

  .id-photo-blue-upload small {
    font-size: 9px;
    line-height: 1;
  }

  .id-photo-blue-colors {
    gap: 5px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 27px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 27px;
    font-size: 11px;
  }

  .id-photo-size-current {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 0 9px;
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 11px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 5px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 22px 12px;
    min-height: 39px;
    gap: 2px;
    padding: 2px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 22px;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 9px;
    line-height: 12px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 3px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 58px minmax(0, 1fr) 30px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 10.5px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 20px;
    font-size: 10px;
  }

  .id-photo-print-tabs {
    gap: 6px;
    padding-left: 66px;
  }

  .id-photo-print-tabs i {
    top: -7px;
    margin-left: 4px;
    padding: 1px 4px;
    font-size: 8px;
  }

  .id-photo-switch-row {
    min-height: 16px;
  }

  .id-photo-switch-row i {
    width: 28px;
    height: 15px;
  }

  .id-photo-switch-row i::before {
    width: 11px;
    height: 11px;
  }

  .id-photo-switch-row input:checked + i::before {
    transform: translateX(13px);
  }

  .id-photo-blue-actionbar {
    padding-top: 4px;
  }

  .id-photo-generate-button {
    height: 40px !important;
  }

  .id-photo-generate-button em {
    height: 20px;
    margin-left: 12px;
    padding: 0 9px;
    font-size: 11px;
  }
}

/* Ordinary tool 05 true Chrome short-height lock, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar,
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar-inner {
    height: 52px;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button,
  .ordinary-id-photo-actions {
    height: 52px;
  }

  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(318px, 348px) minmax(0, 1fr);
    gap: 14px;
    min-height: calc(100vh - 60px);
    padding: 6px 18px;
  }

  .id-photo-blue-left {
    align-content: start;
    grid-template-rows: auto 38px;
    max-height: calc(100vh - 72px);
  }

  .id-photo-blue-left-scroll {
    overflow: hidden;
  }

  .id-photo-blue-title {
    min-height: 30px;
    gap: 7px;
    margin: 0 0 3px 2px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .id-photo-blue-title .ordinary-title-icon::before {
    width: 17px;
    height: 17px;
  }

  .id-photo-blue-title h1 {
    font-size: 18px;
    line-height: 1;
  }

  .id-photo-blue-title p {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1;
  }

  .id-photo-blue-step {
    gap: 2px;
    margin-bottom: 2px;
    padding: 4px 7px;
  }

  .id-photo-blue-step-head {
    gap: 6px;
    min-height: 15px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 15px;
    width: 15px;
    height: 15px;
    font-size: 9px;
  }

  .id-photo-blue-step-head strong,
  .id-photo-step-aside button {
    font-size: 11px;
    line-height: 1;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: 22px 10px;
    column-gap: 8px;
    row-gap: 1px;
  }

  .id-photo-upload-button {
    height: 22px;
    gap: 4px;
    font-size: 10.5px;
  }

  .id-photo-upload-button i {
    width: 11px;
    height: 11px;
  }

  .id-photo-upload-preview {
    width: 43px;
    height: 43px;
    border-radius: 5px;
  }

  .id-photo-blue-upload small {
    font-size: 8.5px;
  }

  .id-photo-blue-colors {
    gap: 4px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 22px;
    border-radius: 5px;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 7px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 22px;
    border-radius: 5px;
    font-size: 9.5px;
  }

  .id-photo-size-current {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 0 7px;
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 9.5px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 4px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 18px 10px;
    min-height: 31px;
    gap: 1px;
    padding: 1px;
    border-radius: 5px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 18px;
    border-radius: 4px;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 8.5px;
    line-height: 10px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 2px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 7px;
    min-height: 15px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 52px minmax(0, 1fr) 28px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 9.5px;
    line-height: 1;
  }

  .id-photo-retouch-row input[type="range"] {
    height: 4px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 17px;
    border-radius: 5px;
    font-size: 9px;
  }

  .id-photo-print-tabs {
    gap: 5px;
    padding-left: 59px;
  }

  .id-photo-print-tabs i {
    top: -6px;
    padding: 0 3px;
    font-size: 7px;
  }

  .id-photo-switch-row {
    min-height: 13px;
  }

  .id-photo-switch-row i {
    width: 25px;
    height: 13px;
  }

  .id-photo-switch-row i::before {
    width: 9px;
    height: 9px;
  }

  .id-photo-switch-row input:checked + i::before {
    transform: translateX(12px);
  }

  .id-photo-blue-actionbar {
    padding-top: 2px;
  }

  .id-photo-generate-button {
    height: 38px !important;
    font-size: 14px;
  }

  .id-photo-blue-main {
    grid-template-rows: minmax(0, 306px) 160px auto;
    gap: 8px;
    max-height: calc(100vh - 72px);
  }

  .id-photo-blue-result-card {
    grid-template-rows: 24px minmax(0, 1fr);
    padding: 12px;
  }

  .id-photo-blue-result-card h2,
  .id-photo-history-head strong,
  .id-photo-result-card h3 {
    font-size: 13px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(206px, 226px);
    gap: 10px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(154px, 14vw, 168px);
    max-height: 236px;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto minmax(0, 1fr) 34px 30px;
    padding: 10px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 4px;
    padding-top: 5px;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    gap: 6px;
    font-size: 10px;
  }

  .id-photo-blueprint .id-photo-result-meta .id-photo-status-row strong {
    padding: 3px 6px;
    font-size: 10px;
  }

  .id-photo-result-download {
    height: 34px;
    margin-top: 6px;
    font-size: 12px;
  }

  .id-photo-result-buttons {
    gap: 6px;
    margin-top: 6px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 30px;
    font-size: 11px;
  }

  .id-photo-history {
    grid-template-rows: 24px minmax(0, 1fr);
    padding: 10px 12px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(112px, 128px);
    gap: 10px;
    overflow-x: auto;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 48px auto;
    gap: 4px;
    height: 104px;
    padding: 5px 7px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 46px;
    height: 48px;
  }

  .id-photo-blueprint .id-photo-history-copy strong,
  .id-photo-blueprint .id-photo-history-copy small,
  .id-photo-history-more strong,
  .id-photo-history-more span {
    font-size: 9.5px;
  }

  .id-photo-blue-tip {
    height: 16px;
    overflow: hidden;
    margin-top: 0;
    font-size: 10px;
    white-space: nowrap;
  }
}

@media (min-width: 1401px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint {
    min-height: calc(100vh - 60px);
  }
}

@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .id-photo-blue-main {
    grid-template-rows: minmax(0, 418px) 190px auto;
    gap: 10px;
  }

  .id-photo-blue-result-card {
    grid-template-rows: 28px minmax(0, 1fr);
    padding: 14px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(226px, 250px);
    gap: 12px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(220px, 24vw, 260px);
    max-height: 364px;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto minmax(0, 1fr) 38px 34px;
    padding: 13px 12px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 6px;
    padding-top: 7px;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    gap: 8px;
    font-size: 11.5px;
  }

  .id-photo-blueprint .id-photo-result-meta .id-photo-status-row strong {
    padding: 4px 7px;
    font-size: 11.5px;
  }

  .id-photo-result-download {
    height: 38px;
    margin-top: 8px;
    font-size: 14px;
  }

  .id-photo-result-buttons {
    gap: 8px;
    margin-top: 8px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 34px;
    font-size: 12px;
  }

  .id-photo-history {
    grid-template-rows: 28px minmax(0, 1fr);
    padding: 12px 14px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(124px, 142px);
    gap: 12px;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 60px auto;
    gap: 6px;
    height: 124px;
    padding: 7px 9px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 56px;
    height: 60px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar {
    height: auto;
  }

  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "nav nav";
    align-items: center;
    row-gap: 8px;
    column-gap: 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8px 12px 9px;
    overflow: visible;
  }

  .ordinary-id-photo-brand {
    grid-area: brand;
    min-width: 0;
    font-size: 22px;
  }

  .ordinary-id-photo-nav {
    grid-area: nav;
    gap: 6px 18px;
    width: 100%;
    height: auto;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button {
    height: 24px;
    padding: 0 2px;
  }

  .ordinary-id-photo-actions {
    grid-area: actions;
    justify-self: end;
    gap: 6px;
    height: auto;
  }

  .ordinary-id-photo-points {
    min-width: 76px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .ordinary-id-photo-recharge {
    min-width: 62px;
    height: 30px;
    padding: 0 9px;
    font-size: 12px;
  }

  .ordinary-id-photo-vip {
    grid-template-columns: 15px auto 8px;
    gap: 6px;
    min-width: 70px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .id-photo-blueprint {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 12px 14px 18px;
    overflow: visible;
  }

  .id-photo-blue-left {
    grid-template-rows: auto auto;
    max-height: none;
  }

  .id-photo-blue-left-scroll {
    overflow: visible;
    padding-bottom: 0;
  }

  .id-photo-blue-title {
    min-height: 44px;
    gap: 10px;
    margin: 0 0 10px 4px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .id-photo-blue-title h1 {
    font-size: 24px;
    line-height: 1.12;
  }

  .id-photo-blue-title p {
    margin-top: 3px;
    font-size: 13px;
  }

  .id-photo-blue-step {
    gap: 7px;
    margin-bottom: 8px;
    padding: 9px 10px;
  }

  .id-photo-blue-step-head strong {
    font-size: 15px;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 82px;
    column-gap: 12px;
  }

  .id-photo-blue-colors {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    width: 100%;
    height: 42px;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 74px;
    gap: 10px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 7px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 34px 15px;
    min-height: 54px;
    padding: 3px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 34px;
  }

  .id-photo-print-tabs {
    padding-left: 87px;
  }

  .id-photo-blue-actionbar {
    padding: 2px 0 0;
  }

  .id-photo-generate-button {
    height: 46px !important;
  }

  .id-photo-blue-main {
    grid-template-rows: auto auto auto;
    gap: 12px;
    max-height: none;
    overflow: visible;
  }

  .id-photo-blue-result-card {
    grid-template-rows: auto auto;
    padding: 12px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .id-photo-blue-canvas {
    min-height: 318px;
    padding: 12px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(190px, 62vw, 260px);
    max-height: none;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto auto auto auto;
    height: auto;
    padding: 12px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    grid-template-columns: 1fr;
    gap: 6px;
    overflow: visible;
  }

  .id-photo-blueprint .id-photo-result-meta div:nth-child(n+7) {
    display: none;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    min-width: 0;
    font-size: 12px;
  }

  .id-photo-blueprint .id-photo-result-meta strong {
    white-space: normal;
  }

  .id-photo-result-download {
    height: 40px;
    margin-top: 8px;
    font-size: 14px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 36px;
    font-size: 12px;
  }

  .id-photo-history {
    grid-template-rows: 30px 174px;
    padding: 12px;
  }

  .id-photo-history-head {
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }

  .id-photo-history-head div {
    width: auto;
    justify-content: flex-end;
    gap: 10px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 148px);
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 82px auto;
    height: 156px;
    min-height: 156px;
    padding: 9px 8px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 76px;
    height: 82px;
  }

  .id-photo-blue-tip {
    align-items: flex-start;
    margin: 0 2px;
    line-height: 1.45;
  }
}

@media (max-width: 420px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-topbar-inner {
    gap: 8px;
    padding: 0 10px;
  }

  .ordinary-blueprint-brand {
    font-size: 21px;
  }

  .ordinary-blueprint-nav {
    gap: 12px;
  }

  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar-inner {
    gap: 8px;
    padding: 8px 10px 9px;
  }

  .ordinary-id-photo-actions {
    gap: 5px;
  }

  .ordinary-id-photo-points {
    min-width: 70px;
    padding: 0 7px;
  }

  .ordinary-id-photo-recharge {
    min-width: 58px;
    padding: 0 8px;
  }

  .ordinary-id-photo-vip {
    min-width: 62px;
    padding: 0 7px;
  }

  .ordinary-id-photo-nav {
    gap: 6px 16px;
  }

  .ordinary-blueprint-recharge {
    min-width: 62px;
    padding: 0 10px;
  }

  .ordinary-blueprint-vip {
    min-width: 82px;
    grid-template-columns: 16px auto;
    gap: 7px;
    padding: 0 10px;
  }

  .ordinary-blueprint-vip em {
    display: none;
  }

  .id-photo-blueprint {
    padding-right: 12px;
    padding-left: 12px;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 80px;
  }

  .id-photo-upload-preview {
    width: 72px;
    height: 72px;
  }

  .id-photo-blue-title h1 {
    font-size: 22px;
  }

  .id-photo-blue-title p {
    font-size: 12px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 36px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 30px 14px;
    min-height: 49px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 30px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 74px minmax(0, 1fr) 34px;
    gap: 8px;
  }

  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
  }

  .id-photo-print-tabs {
    padding-left: 82px;
  }

  .id-photo-blue-canvas {
    min-height: 272px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(178px, 55vw, 218px);
  }

  .id-photo-history-head strong {
    font-size: 14px;
  }

  .id-photo-history-head div {
    gap: 8px;
    font-size: 12px;
  }
}

/* Ordinary tool 06 header and laptop fit pass. */
.ordinary-blueprint-app-shell .ordinary-amplify-topbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  width: min(1476px, calc(100% - 60px));
  height: 50px;
  margin: 0 auto;
}

.ordinary-amplify-brand {
  min-width: 108px;
  color: #111827;
}

.ordinary-amplify-brand strong {
  color: inherit;
  font-style: normal;
}

.ordinary-amplify-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.8vw, 42px);
  min-width: 0;
  height: 50px;
  overflow: hidden;
  color: #40495d;
  font-size: 14px;
  font-weight: 780;
  white-space: nowrap;
}

.ordinary-amplify-nav a,
.ordinary-amplify-nav button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.ordinary-amplify-nav a.active {
  color: #7657f5;
}

.ordinary-amplify-nav a.active::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: #7657f5;
  content: "";
}

.ordinary-amplify-nav span {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-amplify-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  height: 50px;
}

.ordinary-amplify-actions button {
  cursor: pointer;
}

.ordinary-amplify-upgrade,
.ordinary-amplify-api,
.ordinary-amplify-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  border: 1px solid #dfe6f1;
  border-radius: 7px;
  background: #fff;
  color: #3f485b;
  font-size: 13px;
  font-weight: 850;
}

.ordinary-amplify-upgrade {
  min-width: 112px;
  border: 0;
  color: #fff;
  background: linear-gradient(96deg, #7558f4 0%, #e94fae 100%);
  box-shadow: 0 8px 18px rgba(130, 92, 232, 0.15);
}

.ordinary-amplify-upgrade span {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: #ffe28b;
  transform: rotate(45deg);
}

.ordinary-amplify-api {
  min-width: 96px;
  padding: 0 12px;
}

.ordinary-amplify-api span {
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v3H4V5Zm0 5h16v9H4v-9Zm3 2v2h2v-2H7Zm4 0v2h6v-2h-6Zm-4 4v1h10v-1H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v3H4V5Zm0 5h16v9H4v-9Zm3 2v2h2v-2H7Zm4 0v2h6v-2h-6Zm-4 4v1h10v-1H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-amplify-points {
  min-width: 102px;
  padding: 0 10px;
  color: #556075;
}

.ordinary-amplify-points span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8f74ff, #c58dff);
}

.ordinary-amplify-points strong {
  color: #3e4659;
  font-size: 13px;
  font-weight: 850;
}

.ordinary-amplify-points em {
  color: #6e778b;
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}

.ordinary-amplify-caret {
  width: 28px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #5c6576;
}

.ordinary-amplify-caret::before {
  display: block;
  width: 8px;
  height: 8px;
  margin: 9px auto 0;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  content: "";
  transform: rotate(45deg);
}

.ordinary-amplify-actions .user-menu {
  top: 48px;
  right: 0;
}

@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-amplify,
  .ordinary-workbench.ordinary-blueprint-amplify {
    height: calc(100vh - 56px);
    min-height: 0;
    padding: 16px 30px 18px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-control,
  .ordinary-blueprint-amplify .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 90px) !important;
    max-height: calc(100vh - 90px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-control-scroll,
  .ordinary-blueprint-amplify .ordinary-control-scroll {
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding-right: 2px;
  }

  .ordinary-blueprint-amplify .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-preview-column,
  .ordinary-blueprint-amplify .ordinary-preview-column {
    align-self: start;
    grid-template-rows: minmax(0, 1fr) 220px;
    height: calc(100vh - 140px) !important;
    max-height: calc(100vh - 140px) !important;
    overflow: hidden;
  }

  .ordinary-blueprint-amplify .ordinary-preview-card,
  .ordinary-blueprint-amplify .ordinary-records,
  .ordinary-blueprint-amplify .tool-generation-records,
  .ordinary-blueprint-amplify .enhance-preview-workspace,
  .ordinary-blueprint-amplify .enhance-compare-stage {
    min-height: 0;
  }

  .ordinary-blueprint-amplify .tool-generation-records {
    height: 100%;
    overflow: hidden;
  }

  .ordinary-blueprint-amplify .enhance-record-list {
    max-height: calc(100% - 30px);
  }
}

@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-amplify-topbar-inner {
    gap: 18px;
    width: min(100% - 40px, 1476px);
  }

  .ordinary-amplify-nav {
    justify-content: flex-start;
    gap: 22px;
  }

  .ordinary-amplify-actions {
    gap: 8px;
  }

  .ordinary-amplify-api {
    min-width: 88px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify,
  .ordinary-blueprint-amplify {
    grid-template-columns: minmax(344px, 370px) minmax(0, 1fr);
    gap: 16px;
    min-height: calc(100vh - 54px);
    padding: 12px 20px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-control,
  .ordinary-blueprint-amplify .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-control-scroll,
  .ordinary-blueprint-amplify .ordinary-control-scroll {
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding-right: 2px;
  }

  .ordinary-blueprint-amplify .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-preview-column,
  .ordinary-blueprint-amplify .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    margin-top: 36px;
    max-height: calc(100vh - 128px);
  }

  .ordinary-blueprint-amplify .ordinary-preview-card {
    padding: 14px;
  }

  .ordinary-blueprint-amplify .enhance-image {
    min-height: 300px;
  }

  .ordinary-blueprint-amplify .enhance-loupe {
    width: 132px;
    height: 118px;
  }

  .ordinary-blueprint-amplify .enhance-loupe.before {
    left: 16px;
    bottom: 72px;
  }

  .ordinary-blueprint-amplify .enhance-loupe.after {
    right: 16px;
    bottom: 72px;
  }

  .ordinary-blueprint-amplify .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-amplify .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-amplify .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-amplify,
  .ordinary-workbench.ordinary-blueprint-amplify {
    padding: 12px 30px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-control,
  .ordinary-blueprint-amplify .ordinary-control {
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
  }

  .ordinary-blueprint-amplify .ordinary-title {
    min-height: 28px;
    margin-bottom: 10px;
  }

  .ordinary-blueprint-amplify .ordinary-step {
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 14px;
  }

  .ordinary-blueprint-amplify .ordinary-step-head {
    min-height: 22px;
  }

  .ordinary-blueprint-amplify .enhance-upload-card {
    grid-template-columns: 76px minmax(0, 1fr) 24px;
    min-height: 72px;
    padding: 8px;
  }

  .ordinary-blueprint-amplify .enhance-upload-thumb {
    width: 76px;
    height: 52px;
  }

  .ordinary-blueprint-amplify .enhance-upload-card small {
    margin-top: 4px;
  }

  .ordinary-blueprint-amplify .enhance-upload-card div button {
    height: 26px;
    margin-top: 5px;
    padding: 0 10px;
  }

  .ordinary-blueprint-amplify .enhance-upload-drop {
    min-height: 42px;
  }

  .ordinary-blueprint-amplify .blueprint-chip-list button {
    min-height: 34px;
  }

  .ordinary-blueprint-amplify .blueprint-range-row {
    min-height: 26px;
  }

  .ordinary-blueprint-amplify .blueprint-range-row strong {
    min-height: 24px;
  }

  .ordinary-blueprint-amplify .blueprint-switch-row {
    min-height: 26px;
  }

  .ordinary-blueprint-amplify .ordinary-actions {
    padding-top: 8px;
  }

  .ordinary-blueprint-amplify .ordinary-primary-action {
    min-height: 46px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-amplify .ordinary-preview-column,
  .ordinary-blueprint-amplify .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    height: calc(100vh - 114px) !important;
    margin-top: 36px;
    max-height: calc(100vh - 114px) !important;
  }

  .ordinary-blueprint-amplify .ordinary-preview-card {
    padding: 14px;
  }

  .ordinary-blueprint-amplify .enhance-image {
    min-height: 300px;
  }

  .ordinary-blueprint-amplify .enhance-loupe {
    width: 132px;
    height: 118px;
  }

  .ordinary-blueprint-amplify .enhance-loupe.before {
    left: 16px;
    bottom: 72px;
  }

  .ordinary-blueprint-amplify .enhance-loupe.after {
    right: 16px;
    bottom: 72px;
  }

  .ordinary-blueprint-amplify .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-amplify .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-amplify .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-amplify-topbar {
    height: auto;
    min-height: 50px;
  }

  .ordinary-blueprint-app-shell .ordinary-amplify-topbar-inner {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50px;
    gap: 10px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ordinary-blueprint-app-shell .ordinary-amplify-topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .ordinary-amplify-brand {
    flex: 0 0 auto;
    min-width: auto;
    font-size: 22px;
  }

  .ordinary-amplify-nav {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 16px;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-amplify-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .ordinary-amplify-upgrade,
  .ordinary-amplify-api,
  .ordinary-amplify-points {
    min-width: auto;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ordinary-amplify-caret {
    display: none;
  }

  .ordinary-blueprint-amplify .ordinary-preview-column {
    grid-template-rows: auto auto;
  }

  .ordinary-blueprint-amplify .ordinary-records {
    max-height: 280px;
    overflow: hidden;
  }

  .ordinary-blueprint-amplify .tool-generation-records {
    height: 248px;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-amplify .enhance-record-list {
    display: flex !important;
    flex-wrap: nowrap;
    height: 198px;
    max-height: calc(100% - 30px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-amplify .enhance-record-item {
    grid-template-rows: 92px auto auto;
    flex: 0 0 158px;
    min-height: 148px;
  }
}

/* Ordinary tool 07 header and laptop fit pass. */
.ordinary-blueprint-app-shell .ordinary-color-topbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  width: min(1476px, calc(100% - 56px));
  height: 50px;
  margin: 0 auto;
}

.ordinary-color-brand {
  min-width: 106px;
  color: #6d55f2;
}

.ordinary-color-brand strong {
  color: #e450bd;
  font-style: normal;
}

.ordinary-color-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.05vw, 42px);
  min-width: 0;
  height: 50px;
  overflow: hidden;
  color: #1f2637;
  font-size: 14px;
  font-weight: 820;
  white-space: nowrap;
}

.ordinary-color-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 50px;
  color: inherit;
}

.ordinary-color-nav a span {
  position: relative;
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 0;
}

.ordinary-color-nav a:nth-child(1) span::before {
  position: absolute;
  inset: 2px 1px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  content: "";
}

.ordinary-color-nav a:nth-child(1) span::after {
  position: absolute;
  left: 4px;
  top: 5px;
  width: 7px;
  height: 1.6px;
  background: currentColor;
  box-shadow: 0 3px 0 currentColor;
  content: "";
}

.ordinary-color-nav a:nth-child(1) span {
  border-radius: 2px;
}

.ordinary-color-nav a:nth-child(2) span::before {
  position: absolute;
  inset: 1px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  content: "";
}

.ordinary-color-nav a:nth-child(2) span::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 5px;
  border-left: 1.7px solid currentColor;
  border-top: 1.7px solid currentColor;
  transform: skewY(-34deg) rotate(45deg);
  content: "";
}

.ordinary-color-nav a:nth-child(3) span::before {
  position: absolute;
  left: 1px;
  top: 3px;
  width: 9px;
  height: 8px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  content: "";
}

.ordinary-color-nav a:nth-child(3) span::after {
  position: absolute;
  right: 0;
  top: 5px;
  width: 4px;
  height: 5px;
  border: 1.7px solid currentColor;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  content: "";
}

.ordinary-color-nav a:nth-child(4) span::before {
  position: absolute;
  left: 6px;
  top: 0;
  width: 4px;
  height: 14px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  transform: rotate(42deg);
  content: "";
}

.ordinary-color-nav a:nth-child(5) span {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border: 0;
}

.ordinary-color-nav a:nth-child(5) span::before,
.ordinary-color-nav a:nth-child(5) span::after {
  display: block;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  content: "";
}

.ordinary-color-nav a:nth-child(6) span::before {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 2px;
  height: 9px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  content: "";
}

.ordinary-color-nav a:nth-child(6) span::after {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 7px;
  height: 4px;
  border: 1.7px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  content: "";
}

.ordinary-color-nav a.active {
  color: #6f55f2;
}

.ordinary-color-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  height: 50px;
}

.ordinary-color-actions button {
  cursor: pointer;
}

.ordinary-color-checkin,
.ordinary-color-points,
.ordinary-color-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
}

.ordinary-color-checkin {
  min-width: 98px;
  border: 1px solid #f3cde9;
  color: #b75cf0;
  background: #fff3fb;
}

.ordinary-color-checkin span {
  width: 15px;
  height: 15px;
  background: linear-gradient(135deg, #9058ff, #ff65bd);
  clip-path: polygon(50% 4%, 61% 35%, 95% 35%, 68% 55%, 79% 90%, 50% 70%, 21% 90%, 32% 55%, 5% 35%, 39% 35%);
}

.ordinary-color-points {
  min-width: 74px;
  border: 0;
  color: #475064;
  background: #f5f7ff;
}

.ordinary-color-points span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc44c, #f2a113);
  clip-path: polygon(50% 0, 63% 34%, 100% 40%, 72% 62%, 80% 100%, 50% 78%, 20% 100%, 28% 62%, 0 40%, 37% 34%);
}

.ordinary-color-upgrade {
  min-width: 110px;
  border: 0;
  color: #fff;
  background: linear-gradient(96deg, #7558f4, #e950ac);
}

.ordinary-color-upgrade span {
  width: 15px;
  height: 15px;
  background: #fff3a5;
  clip-path: polygon(50% 3%, 62% 36%, 98% 31%, 75% 58%, 84% 94%, 50% 76%, 16% 94%, 25% 58%, 2% 31%, 38% 36%);
}

.ordinary-color-caret {
  width: 20px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #4d566a;
}

.ordinary-color-caret::before {
  display: block;
  width: 8px;
  height: 8px;
  margin: 11px auto 0;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  content: "";
  transform: rotate(45deg);
}

.ordinary-color-actions .user-menu {
  top: 48px;
  right: 0;
}

@media (min-width: 901px) and (min-height: 861px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control,
  .ordinary-blueprint-color .ordinary-control {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control-scroll,
  .ordinary-blueprint-color .ordinary-control-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-color-topbar-inner {
    gap: 18px;
    width: min(100% - 40px, 1476px);
  }

  .ordinary-color-nav {
    justify-content: flex-start;
    gap: 21px;
  }

  .ordinary-color-actions {
    gap: 8px;
  }

  .ordinary-color-checkin,
  .ordinary-color-upgrade {
    min-width: 92px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color,
  .ordinary-blueprint-color {
    box-sizing: border-box;
    height: calc(100vh - 50px);
    max-height: calc(100vh - 50px);
    min-height: calc(100vh - 54px);
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control,
  .ordinary-blueprint-color .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control-scroll,
  .ordinary-blueprint-color .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px;
  }

  .ordinary-blueprint-color .ordinary-actions {
    grid-template-columns: minmax(0, 1fr) 64px;
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-color .enhance-tuning-step {
    gap: 9px;
    margin-bottom: 8px;
    padding: 12px;
  }

  .ordinary-blueprint-color .enhance-tuning-step .blueprint-switch-row,
  .ordinary-blueprint-color .enhance-more-row {
    display: none;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-preview-column,
  .ordinary-blueprint-color .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    max-height: calc(100vh - 80px);
  }

  .ordinary-blueprint-color .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-color .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-color .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-color,
  .ordinary-blueprint-color {
    box-sizing: border-box;
    height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    min-height: 0;
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control,
  .ordinary-blueprint-color .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control-scroll,
  .ordinary-blueprint-color .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px;
  }

  .ordinary-blueprint-color .ordinary-step {
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
  }

  .ordinary-blueprint-color .enhance-analysis-card {
    gap: 6px;
    padding: 9px;
  }

  .ordinary-blueprint-color .enhance-analysis-progress i {
    width: 22px;
    height: 22px;
    border-width: 5px;
  }

  .ordinary-blueprint-color .enhance-tuning-step {
    gap: 9px;
    margin-bottom: 8px;
    padding: 12px;
  }

  .ordinary-blueprint-color .enhance-tuning-step .blueprint-switch-row,
  .ordinary-blueprint-color .enhance-more-row {
    display: none;
  }

  .ordinary-blueprint-color .ordinary-actions {
    grid-template-columns: minmax(0, 1fr) 64px;
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-preview-column,
  .ordinary-blueprint-color .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    height: calc(100vh - 102px) !important;
    max-height: calc(100vh - 102px) !important;
  }

  .ordinary-blueprint-color .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-color .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-color .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-color-topbar {
    height: auto;
    min-height: 50px;
  }

  .ordinary-blueprint-app-shell .ordinary-color-topbar-inner {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50px;
    gap: 10px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ordinary-blueprint-app-shell .ordinary-color-topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .ordinary-color-brand {
    flex: 0 0 auto;
    min-width: auto;
    font-size: 22px;
  }

  .ordinary-color-nav {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 16px;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-color-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .ordinary-color-checkin,
  .ordinary-color-points,
  .ordinary-color-upgrade {
    min-width: auto;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ordinary-color-caret {
    display: none;
  }

  .ordinary-blueprint-color .ordinary-preview-column {
    grid-template-rows: auto auto;
  }

  .ordinary-blueprint-color .ordinary-records {
    height: 280px;
    max-height: 280px;
    overflow: hidden;
  }

  .ordinary-blueprint-color .tool-generation-records {
    height: 248px;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-color .enhance-record-list {
    display: flex !important;
    flex-wrap: nowrap;
    height: 198px;
    max-height: calc(100% - 30px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-color .enhance-record-item {
    grid-template-rows: 92px auto auto;
    flex: 0 0 158px;
    min-height: 148px;
  }
}

/* Ordinary tool 08 laptop fit pass. */
@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize,
  .ordinary-blueprint-colorize {
    box-sizing: border-box;
    height: calc(100vh - 50px);
    max-height: calc(100vh - 50px);
    min-height: calc(100vh - 54px);
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-control,
  .ordinary-blueprint-colorize .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-control-scroll,
  .ordinary-blueprint-colorize .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px;
  }

  .ordinary-blueprint-colorize .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-preview-column,
  .ordinary-blueprint-colorize .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    max-height: calc(100vh - 80px);
  }

  .ordinary-blueprint-colorize .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-colorize .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-colorize .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize,
  .ordinary-blueprint-colorize {
    box-sizing: border-box;
    height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    min-height: 0;
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-control,
  .ordinary-blueprint-colorize .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-control-scroll,
  .ordinary-blueprint-colorize .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px 14px 8px;
  }

  .ordinary-blueprint-colorize .ordinary-title {
    gap: 10px;
    margin-bottom: 10px;
  }

  .ordinary-blueprint-colorize .ordinary-title p {
    margin-top: 3px;
    line-height: 1.25;
  }

  .ordinary-blueprint-colorize .ordinary-step {
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
  }

  .ordinary-blueprint-colorize .enhance-upload-card {
    min-height: 82px;
    padding: 8px;
  }

  .ordinary-blueprint-colorize .enhance-upload-thumb {
    width: 72px;
    height: 56px;
  }

  .ordinary-blueprint-colorize .enhance-upload-card div button {
    height: 26px;
    margin-top: 5px;
  }

  .ordinary-blueprint-colorize .blueprint-chip-list,
  .ordinary-blueprint-colorize .enhance-output-grid,
  .ordinary-blueprint-colorize .enhance-format-tabs {
    gap: 7px;
  }

  .ordinary-blueprint-colorize .blueprint-chip-list button,
  .ordinary-blueprint-colorize .enhance-output-grid button,
  .ordinary-blueprint-colorize .enhance-format-tabs button {
    min-height: 30px;
    padding: 0 7px;
    font-size: 12px;
  }

  .ordinary-blueprint-colorize .blueprint-range-row,
  .ordinary-blueprint-colorize .blueprint-switch-row {
    min-height: 27px;
    gap: 8px;
  }

  .ordinary-blueprint-colorize .enhance-more-row {
    display: flex;
  }

  .ordinary-blueprint-colorize .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-preview-column,
  .ordinary-blueprint-colorize .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    height: calc(100vh - 102px) !important;
    max-height: calc(100vh - 102px) !important;
  }

  .ordinary-blueprint-colorize .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-colorize .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-colorize .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

/* Ordinary tool 08 header lock. */
.ordinary-blueprint-app-shell .ordinary-colorize-topbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  width: min(1450px, calc(100% - 88px));
  height: 50px;
  margin: 0 auto;
}

.ordinary-colorize-brand {
  min-width: 110px;
  color: #6d55f2;
}

.ordinary-colorize-brand strong {
  color: inherit;
  font-style: normal;
}

.ordinary-colorize-nav {
  display: flex;
  align-items: center;
  gap: clamp(26px, 4vw, 52px);
  min-width: 0;
  height: 50px;
  overflow: hidden;
  color: #1f2637;
  font-size: 14px;
  font-weight: 820;
  white-space: nowrap;
}

.ordinary-colorize-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 50px;
  color: inherit;
}

.ordinary-colorize-nav a.active {
  color: #6d55f2;
}

.ordinary-colorize-nav a.active::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: #6d55f2;
  content: "";
}

.ordinary-colorize-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  height: 50px;
}

.ordinary-colorize-member,
.ordinary-colorize-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
}

.ordinary-colorize-member {
  min-width: 104px;
  color: #e56f3c;
  background: #fff4ed;
}

.ordinary-colorize-member span {
  width: 15px;
  height: 15px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, #ff9c60, #ff663d);
}

.ordinary-colorize-points {
  min-width: 122px;
  color: #fff;
  background: linear-gradient(96deg, #6f55f2, #e54db0);
}

.ordinary-colorize-points span {
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.82);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.ordinary-colorize-points strong {
  font-size: 13px;
  font-weight: 900;
}

.ordinary-colorize-points em {
  margin-left: 14px;
  font-size: 19px;
  font-style: normal;
  line-height: 1;
}

.ordinary-colorize-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #121827;
  background: transparent;
}

.ordinary-colorize-icon::before {
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
}

.ordinary-colorize-help::before {
  content: "?";
}

.ordinary-colorize-bell::before {
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.4 2.4 0 0 0 2.25-1.55h-4.5A2.4 2.4 0 0 0 12 22ZM5.2 18.4h13.6l-1.4-1.95V11a5.4 5.4 0 0 0-4.2-5.25V4a1.2 1.2 0 0 0-2.4 0v1.75A5.4 5.4 0 0 0 6.6 11v5.45L5.2 18.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.4 2.4 0 0 0 2.25-1.55h-4.5A2.4 2.4 0 0 0 12 22ZM5.2 18.4h13.6l-1.4-1.95V11a5.4 5.4 0 0 0-4.2-5.25V4a1.2 1.2 0 0 0-2.4 0v1.75A5.4 5.4 0 0 0 6.6 11v5.45L5.2 18.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-colorize-settings::before {
  content: "⚙";
}

.ordinary-colorize-actions .user-menu {
  top: 48px;
  right: 0;
}

@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-colorize-topbar-inner {
    gap: 18px;
    width: min(100% - 40px, 1450px);
  }

  .ordinary-colorize-nav {
    gap: 32px;
  }

  .ordinary-colorize-actions {
    gap: 10px;
  }

  .ordinary-colorize-member {
    min-width: 92px;
  }

  .ordinary-colorize-points {
    min-width: 104px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-colorize-topbar {
    height: auto;
    min-height: 50px;
  }

  .ordinary-blueprint-app-shell .ordinary-colorize-topbar-inner {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50px;
    gap: 10px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ordinary-blueprint-app-shell .ordinary-colorize-topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .ordinary-colorize-brand {
    flex: 0 0 auto;
    min-width: auto;
    font-size: 22px;
  }

  .ordinary-colorize-nav {
    flex: 0 0 auto;
    gap: 18px;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-colorize-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .ordinary-colorize-member,
  .ordinary-colorize-points {
    min-width: auto;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ordinary-colorize-icon {
    width: 30px;
    height: 32px;
  }

  .ordinary-blueprint-colorize .ordinary-preview-column {
    grid-template-rows: auto auto;
  }

  .ordinary-blueprint-colorize .ordinary-records {
    height: 280px;
    max-height: 280px;
    overflow: hidden;
  }

  .ordinary-blueprint-colorize .tool-generation-records {
    height: 248px;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-colorize .enhance-record-list {
    display: flex !important;
    flex-wrap: nowrap;
    height: 198px;
    max-height: calc(100% - 30px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-colorize .enhance-record-item {
    grid-template-rows: 92px auto auto;
    flex: 0 0 158px;
    min-height: 148px;
  }
}

/* Ordinary tool 09 laptop fit pass. */
@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-anime,
  .ordinary-blueprint-anime {
    box-sizing: border-box;
    height: calc(100vh - 50px);
    max-height: calc(100vh - 50px);
    min-height: calc(100vh - 54px);
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-control,
  .ordinary-blueprint-anime .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-control-scroll,
  .ordinary-blueprint-anime .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px;
  }

  .ordinary-blueprint-anime .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-preview-column,
  .ordinary-blueprint-anime .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    max-height: calc(100vh - 80px);
  }

  .ordinary-blueprint-anime .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-anime .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-anime .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-anime,
  .ordinary-blueprint-anime {
    box-sizing: border-box;
    height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    min-height: 0;
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-control,
  .ordinary-blueprint-anime .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-control-scroll,
  .ordinary-blueprint-anime .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px 14px 8px;
  }

  .ordinary-blueprint-anime .ordinary-title {
    gap: 10px;
    margin-bottom: 10px;
  }

  .ordinary-blueprint-anime .ordinary-title p {
    margin-top: 3px;
    line-height: 1.25;
  }

  .ordinary-blueprint-anime .ordinary-step {
    gap: 7px;
    margin-bottom: 8px;
    padding: 9px 12px;
  }

  .ordinary-blueprint-anime .enhance-upload-card {
    min-height: 80px;
    padding: 8px;
  }

  .ordinary-blueprint-anime .enhance-upload-thumb {
    width: 72px;
    height: 54px;
  }

  .ordinary-blueprint-anime .enhance-upload-card div button {
    height: 26px;
    margin-top: 5px;
  }

  .ordinary-blueprint-anime .blueprint-range-row,
  .ordinary-blueprint-anime .blueprint-switch-row {
    min-height: 26px;
    gap: 8px;
  }

  .ordinary-blueprint-anime .enhance-scale-tabs,
  .ordinary-blueprint-anime .enhance-format-tabs {
    gap: 7px;
  }

  .ordinary-blueprint-anime .enhance-scale-tabs button,
  .ordinary-blueprint-anime .enhance-format-tabs button {
    min-height: 28px;
    padding: 0 7px;
    font-size: 12px;
  }

  .ordinary-blueprint-anime .anime-output-size-select {
    min-height: 31px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ordinary-blueprint-anime .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-preview-column,
  .ordinary-blueprint-anime .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    height: calc(100vh - 102px) !important;
    max-height: calc(100vh - 102px) !important;
  }

  .ordinary-blueprint-anime .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-anime .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-anime .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

/* Ordinary tool 09 header lock. */
.ordinary-blueprint-app-shell .ordinary-anime-topbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  width: min(1476px, calc(100% - 56px));
  height: 50px;
  margin: 0 auto;
}

.ordinary-anime-brand {
  min-width: 112px;
  color: #6d55f2;
}

.ordinary-anime-brand strong {
  color: #e450bd;
  font-style: normal;
}

.ordinary-anime-nav {
  display: flex;
  align-items: center;
  gap: clamp(26px, 4vw, 50px);
  min-width: 0;
  height: 50px;
  overflow: hidden;
  color: #31384a;
  font-size: 14px;
  font-weight: 810;
  white-space: nowrap;
}

.ordinary-anime-nav a,
.ordinary-anime-nav button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 50px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.ordinary-anime-nav a.active {
  color: #111827;
}

.ordinary-anime-nav a span {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-anime-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  height: 50px;
}

.ordinary-anime-points,
.ordinary-anime-recharge,
.ordinary-anime-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
}

.ordinary-anime-points {
  min-width: 86px;
  color: #df7f25;
  background: #fff6e8;
}

.ordinary-anime-points span {
  width: 15px;
  height: 15px;
  background: linear-gradient(180deg, #ffd66b, #f1a019);
  clip-path: polygon(45% 0, 100% 0, 62% 42%, 95% 42%, 33% 100%, 48% 54%, 14% 54%);
}

.ordinary-anime-recharge {
  min-width: 70px;
  color: #fff;
  background: linear-gradient(96deg, #e44791, #ec5eb0);
}

.ordinary-anime-create {
  min-width: 134px;
  color: #fff;
  background: linear-gradient(96deg, #6059f3, #e556b7);
}

.ordinary-anime-create span {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.ordinary-anime-caret {
  width: 30px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: #f4f6fb;
  color: #515a6c;
}

.ordinary-anime-caret::before {
  display: block;
  width: 8px;
  height: 8px;
  margin: 9px auto 0;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  content: "";
  transform: rotate(45deg);
}

.ordinary-anime-actions .user-menu {
  top: 48px;
  right: 0;
}

@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-anime-topbar-inner {
    gap: 18px;
    width: min(100% - 40px, 1476px);
  }

  .ordinary-anime-nav {
    gap: 28px;
  }

  .ordinary-anime-create {
    min-width: 112px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-anime-topbar {
    height: auto;
    min-height: 50px;
  }

  .ordinary-blueprint-app-shell .ordinary-anime-topbar-inner {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50px;
    gap: 10px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ordinary-blueprint-app-shell .ordinary-anime-topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .ordinary-anime-brand {
    flex: 0 0 auto;
    min-width: auto;
    font-size: 22px;
  }

  .ordinary-anime-nav {
    flex: 0 0 auto;
    gap: 18px;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-anime-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .ordinary-anime-points,
  .ordinary-anime-recharge,
  .ordinary-anime-create {
    min-width: auto;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ordinary-anime-caret {
    display: none;
  }

  .ordinary-blueprint-anime .ordinary-preview-column {
    grid-template-rows: auto auto;
  }

  .ordinary-blueprint-anime .ordinary-records {
    height: 280px;
    max-height: 280px;
    overflow: hidden;
  }

  .ordinary-blueprint-anime .tool-generation-records {
    height: 248px;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-anime .enhance-record-list {
    display: flex !important;
    flex-wrap: nowrap;
    height: 198px;
    max-height: calc(100% - 30px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-anime .enhance-record-item {
    grid-template-rows: 92px auto auto;
    flex: 0 0 158px;
    min-height: 148px;
  }
}

/* Ordinary tool 10 laptop fit pass. */
@media (max-width: 1400px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo,
  .ordinary-blueprint-old-photo {
    box-sizing: border-box;
    height: calc(100vh - 50px);
    max-height: calc(100vh - 50px);
    min-height: calc(100vh - 54px);
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-control,
  .ordinary-blueprint-old-photo .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-control-scroll,
  .ordinary-blueprint-old-photo .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px;
  }

  .ordinary-blueprint-old-photo .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-preview-column,
  .ordinary-blueprint-old-photo .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    max-height: calc(100vh - 80px);
  }

  .ordinary-blueprint-old-photo .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-old-photo .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-old-photo .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo,
  .ordinary-blueprint-old-photo {
    box-sizing: border-box;
    height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    min-height: 0;
    overflow: hidden;
    padding: 12px 28px 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-control,
  .ordinary-blueprint-old-photo .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-control-scroll,
  .ordinary-blueprint-old-photo .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px 14px 8px;
  }

  .ordinary-blueprint-old-photo .ordinary-title {
    gap: 10px;
    margin-bottom: 10px;
  }

  .ordinary-blueprint-old-photo .ordinary-title p {
    margin-top: 3px;
    line-height: 1.25;
  }

  .ordinary-blueprint-old-photo .ordinary-step {
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
  }

  .ordinary-blueprint-old-photo .enhance-upload-card {
    min-height: 82px;
    padding: 8px;
  }

  .ordinary-blueprint-old-photo .enhance-upload-thumb {
    width: 72px;
    height: 56px;
  }

  .ordinary-blueprint-old-photo .enhance-upload-card div button {
    height: 26px;
    margin-top: 5px;
  }

  .ordinary-blueprint-old-photo .blueprint-chip-list,
  .ordinary-blueprint-old-photo .enhance-output-grid,
  .ordinary-blueprint-old-photo .enhance-format-tabs {
    gap: 7px;
  }

  .ordinary-blueprint-old-photo .blueprint-chip-list button,
  .ordinary-blueprint-old-photo .enhance-output-grid button,
  .ordinary-blueprint-old-photo .enhance-format-tabs button {
    min-height: 30px;
    padding: 0 7px;
    font-size: 12px;
  }

  .ordinary-blueprint-old-photo .blueprint-range-row,
  .ordinary-blueprint-old-photo .blueprint-switch-row {
    min-height: 27px;
    gap: 8px;
  }

  .ordinary-blueprint-old-photo .ordinary-actions {
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-preview-column,
  .ordinary-blueprint-old-photo .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 188px;
    gap: 10px;
    height: calc(100vh - 102px) !important;
    max-height: calc(100vh - 102px) !important;
  }

  .ordinary-blueprint-old-photo .ordinary-records {
    padding: 12px 14px;
  }

  .ordinary-blueprint-old-photo .enhance-record-list {
    padding-top: 6px;
  }

  .ordinary-blueprint-old-photo .enhance-record-item {
    grid-template-rows: 72px auto auto;
    flex-basis: 152px;
    min-height: 128px;
    padding: 8px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-old-photo .ordinary-preview-column {
    grid-template-rows: auto auto;
  }

  .ordinary-blueprint-old-photo .ordinary-records {
    height: 280px;
    max-height: 280px;
    overflow: hidden;
  }

  .ordinary-blueprint-old-photo .tool-generation-records {
    height: 248px;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-old-photo .enhance-record-list {
    display: flex !important;
    flex-wrap: nowrap;
    height: 198px;
    max-height: calc(100% - 30px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-old-photo .enhance-record-item {
    grid-template-rows: 92px auto auto;
    flex: 0 0 158px;
    min-height: 148px;
  }
}

/* Ordinary tool 03 real Chrome left-panel fit lock. */
.ordinary-matting-matting-1 .matting-bg-select {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: #fff;
}

.ordinary-matting-matting-1 .matting-bg-select span {
  color: #344054;
  font-size: 12px;
  font-weight: 520;
}

.ordinary-matting-matting-1 .matting-bg-select select {
  width: 100%;
  height: 30px;
  min-width: 0;
  padding: 0 30px 0 10px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  color: #2e3650;
  background: #f9fbff;
  font-size: 12px;
  font-weight: 600;
  outline: none;
}

.ordinary-matting-matting-1 .matting-bg-select::after {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid #6b7280;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  pointer-events: none;
  transform: translateY(-62%) rotate(45deg);
}

.ordinary-matting-matting-1 .matting-bg-select b {
  display: none;
}

.ordinary-matting-matting-1 .matting-color-select,
.ordinary-matting-matting-1 .matting-shadow-color-select {
  position: relative;
  display: none;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 30px;
}

.ordinary-matting-matting-1 .matting-color-select span,
.ordinary-matting-matting-1 .matting-shadow-color-select span {
  color: #3e4858;
  font-size: 12px;
  font-weight: 520;
  line-height: 1.2;
}

.ordinary-matting-matting-1 .matting-color-select select,
.ordinary-matting-matting-1 .matting-shadow-color-select select {
  width: 100%;
  height: 28px;
  min-width: 0;
  padding: 0 30px 0 10px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  color: #2e3650;
  background: #f9fbff;
  font-size: 12px;
  font-weight: 600;
  outline: none;
}

.ordinary-matting-matting-1 .matting-color-select::after,
.ordinary-matting-matting-1 .matting-shadow-color-select::after {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid #6b7280;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  pointer-events: none;
  transform: translateY(-62%) rotate(45deg);
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 {
  grid-template-columns: 476px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  grid-template-areas:
    "pagehead pagehead"
    "control preview";
  gap: 12px 22px;
  padding: 16px 26px 18px;
  background: #f6f9fd;
  height: calc(100vh - 64px);
  min-height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
}

.ordinary-matting-matting-1 .ordinary-page-head {
  grid-area: pagehead;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.ordinary-matting-matting-1 .ordinary-page-title {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.ordinary-matting-matting-1 .ordinary-page-back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d7dfeb;
  border-radius: 7px;
  color: #172033;
  background: #fff;
  box-shadow: 0 8px 18px rgba(34, 47, 80, 0.05);
}

.ordinary-matting-matting-1 .ordinary-page-back::before {
  width: 10px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 0 1.8px 1.8px;
  content: "";
  transform: translateX(2px) rotate(45deg);
}

.ordinary-matting-matting-1 .ordinary-page-title h1 {
  margin: 0;
  overflow: hidden;
  color: #12182a;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordinary-matting-matting-1 .ordinary-page-title h1::after {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 1px solid #aab3c2;
  border-radius: 999px;
  color: #697386;
  content: "i";
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  vertical-align: middle;
}

.ordinary-matting-matting-1 .ordinary-page-tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ordinary-matting-matting-1 .ordinary-page-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 34px;
  padding: 0 18px;
  border: 1px solid #dbe2ee;
  border-radius: 7px;
  color: #252d3f;
  background: #fff;
  font-size: 13px;
  font-weight: 760;
  box-shadow: 0 8px 18px rgba(34, 47, 80, 0.04);
}

.ordinary-matting-matting-1 .ordinary-page-tools .ordinary-portrait-process-action {
  min-width: 148px;
  border-color: transparent;
  color: #fff;
  background: linear-gradient(100deg, #6b4df6 0%, #8f52ee 46%, #f151b8 100%);
  box-shadow: 0 12px 24px rgba(128, 82, 241, 0.24);
}

.ordinary-matting-matting-1 .ordinary-control {
  grid-area: control;
}

.ordinary-matting-matting-1 .ordinary-preview-column {
  grid-area: preview;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control-scroll {
  height: 100% !important;
  overflow: hidden !important;
  padding: 0;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-step {
  gap: 7px;
  margin-bottom: 0;
  padding: 10px 16px 9px;
  border-color: #e0e6ef;
  border-radius: 0;
  background: #fff;
}

.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .matting-upload-step,
.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .matting-setting-step,
.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .matting-background-step,
.ordinary-blueprint-app-shell .ordinary-matting-matting-1 .matting-protect-step {
  box-shadow: 0 10px 22px rgba(31, 45, 71, 0.025);
}

.ordinary-matting-matting-1 .ordinary-step:not(.matting-protect-step) {
  border-width: 0 1px;
  border-left: 1px solid #e0e6ef;
  border-right: 1px solid #e0e6ef;
  border-bottom: 1px solid #e5ebf3;
  box-shadow: none;
}

.ordinary-matting-matting-1 .matting-upload-step {
  border-top: 1px solid #e0e6ef !important;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.ordinary-matting-matting-1 .matting-background-step {
  border-radius: 0 0 8px 8px;
  border-bottom: 1px solid #e0e6ef !important;
  overflow: hidden;
}

.ordinary-matting-matting-1 .ordinary-step-head {
  min-height: 22px;
}

.ordinary-matting-matting-1 .ordinary-step-head b {
  flex-basis: 22px;
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.ordinary-matting-matting-1 .matting-upload-step .ordinary-step-head b {
  overflow: hidden;
  color: transparent;
}

.ordinary-matting-matting-1 .matting-upload-step .ordinary-step-head b::before {
  color: #fff;
  content: "✓";
}

.ordinary-matting-matting-1 .ordinary-step-head strong {
  color: #232b3a;
  font-size: 14px;
  font-weight: 700;
}

.ordinary-matting-matting-1 .matting-upload-card {
  min-height: 78px;
  grid-template-columns: 66px minmax(0, 1fr) 18px;
  gap: 12px;
  padding: 0;
  border: 0;
}

.ordinary-matting-matting-1 .matting-upload-thumb {
  width: 64px;
  height: 64px;
  background-color: #f8fafc;
  background-size: contain;
  background-repeat: no-repeat;
}

.ordinary-matting-matting-1 .matting-upload-card strong {
  color: #1f2937;
  font-size: 14px;
  font-weight: 620;
}

.ordinary-matting-matting-1 .matting-upload-card small {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.ordinary-matting-matting-1 .matting-upload-card div button {
  display: none;
}

.ordinary-matting-matting-1 .matting-range-row {
  grid-template-columns: 112px minmax(0, 1fr) 48px;
  gap: 10px;
  min-height: 24px;
}

.ordinary-matting-matting-1 .matting-range-row span,
.ordinary-matting-matting-1 .matting-toggle-row > span,
.ordinary-matting-matting-1 .matting-shadow-color-row > span {
  color: #3e4858;
  font-size: 12px;
  font-weight: 520;
  line-height: 1.2;
}

.ordinary-matting-matting-1 .matting-range-row strong {
  height: 26px;
  border: 1px solid #e1e6ef;
  border-radius: 7px;
  color: #535d6d;
  background: #fff;
  font-size: 12px;
  line-height: 24px;
  font-weight: 600;
}

.ordinary-matting-matting-1 .matting-toggle-row {
  min-height: 24px;
}

.ordinary-matting-matting-1 .matting-toggle-row.with-note {
  min-height: 36px;
}

.ordinary-matting-matting-1 .matting-safety-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
  color: #667085;
  font-size: 12px;
  font-weight: 520;
}

.ordinary-matting-matting-1 .matting-safety-note i {
  display: inline-grid;
  place-items: center;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  color: #20bd6b;
  background: #20bd6b;
}

.ordinary-matting-matting-1 .matting-safety-note i::before {
  width: 9px;
  height: 9px;
  background: #fff;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 16.4-4-4 1.4-1.4 2.6 2.6 8.2-8.2 1.4 1.4-9.6 9.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 16.4-4-4 1.4-1.4 2.6 2.6 8.2-8.2 1.4 1.4-9.6 9.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-matting-matting-1 .matting-background-step {
  margin-bottom: 8px;
}

.ordinary-matting-matting-1 .matting-background-step .matting-bg-tabs {
  display: none;
}

.ordinary-matting-matting-1 .matting-color-grid {
  gap: 11px;
  margin-top: 5px;
}

.ordinary-matting-matting-1 .matting-color,
.ordinary-matting-matting-1 .matting-eyedropper {
  width: 32px;
  height: 32px;
}

.ordinary-matting-matting-1 .matting-bg-color-label {
  display: block;
  margin-top: 7px;
  color: #3e4858;
  font-size: 12px;
  font-weight: 520;
}

.ordinary-matting-matting-1 .matting-shadow-color-row {
  display: grid;
  grid-template-columns: 112px 26px 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 24px;
}

.ordinary-matting-matting-1 .matting-shadow-color-row button {
  flex: 0 0 auto;
}

.ordinary-matting-matting-1 .matting-shadow-color-row button {
  width: 26px;
  height: 26px;
  margin-right: 4px;
  border: 1px solid #dfe5ef;
  border-radius: 999px;
  background:
    linear-gradient(45deg, #d8dde8 25%, transparent 25% 50%, #d8dde8 50% 75%, transparent 75%) 0 0 / 8px 8px,
    #fff;
}

.ordinary-matting-matting-1 .matting-shadow-color-row button:first-of-type {
  background: #000;
}

.ordinary-matting-matting-1 .matting-shadow-color-row button.active {
  border-color: #725cf4;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #725cf4;
}

.ordinary-matting-matting-1 .matting-preview-section {
  padding: 0;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 72px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-export-row {
  grid-template-columns: minmax(0, 1fr) 214px;
  justify-items: end;
  min-height: 72px;
  padding: 0 18px;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-more-edit {
  justify-self: end;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-download {
  width: 214px;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-stage {
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  margin: 14px;
  place-items: center;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-canvas.single {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  display: grid;
  place-items: center;
  background-image: none;
}

.ordinary-matting-matting-1 .matting-portrait-result {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-zoom-controls {
  left: 22px;
  right: auto;
  bottom: 22px;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-zoom-controls button,
.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-zoom-controls span {
  min-width: 34px;
  height: 34px;
  font-size: 13px;
}

.ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-loupe {
  right: 7%;
  top: 24%;
  width: 148px;
  height: 148px;
}

.ordinary-matting-matting-1 .matting-protect-step {
  margin-top: 12px;
  margin-bottom: 0;
  border: 1px solid #e0e6ef;
  border-radius: 8px;
  overflow: hidden;
}

.ordinary-matting-matting-1 .matting-protect-note {
  min-height: 38px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
}

.ordinary-matting-matting-1 .matting-protect-note i {
  width: 30px;
  height: 30px;
}

.ordinary-matting-matting-1 .matting-protect-note b {
  font-size: 13px;
  font-weight: 700;
}

.ordinary-matting-matting-1 .matting-protect-note small {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
}

.ordinary-matting-matting-1 .ordinary-preview-column {
  height: 100% !important;
  max-height: 100% !important;
  grid-template-rows: minmax(0, 1fr) 238px;
}

.ordinary-matting-matting-1 .matting-records {
  padding: 14px 18px 16px;
}

.ordinary-matting-matting-1 .matting-records .tool-generation-list {
  display: flex;
  grid-template-columns: none;
  gap: 14px;
  overflow: hidden;
}

.ordinary-matting-matting-1 .matting-records .tool-generation-item {
  grid-template-rows: 126px auto;
  flex: 0 0 144px;
  min-height: 176px;
}

.ordinary-matting-matting-1 .matting-records .tool-generation-thumb {
  height: 126px;
}

.ordinary-matting-matting-1 .matting-records .tool-generation-item em {
  display: none;
}

@media (max-height: 900px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting-2 {
    grid-template-columns: 397px minmax(0, 1fr);
    gap: 16px;
    padding: 46px 22px 18px;
    height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    overflow: hidden;
  }

  .ordinary-matting-matting-2 .ordinary-title {
    position: absolute;
    left: 22px;
    top: 10px;
    margin: 0;
  }

  .ordinary-matting-matting-2 .ordinary-title .panel-title {
    font-size: 22px;
  }

  .ordinary-matting-matting-2 .ordinary-control {
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
  }

  .ordinary-matting-matting-2 .ordinary-control-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
    padding: 7px 12px 3px;
  }

  .ordinary-matting-matting-2 .ordinary-step {
    gap: 3px;
    margin-bottom: 4px;
    padding: 6px;
  }

  .ordinary-matting-matting-2 .ordinary-step-head {
    min-height: 20px;
  }

  .ordinary-matting-matting-2 .ordinary-step-head b {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .ordinary-matting-matting-2 .ordinary-step-head strong {
    font-size: 14px;
  }

  .ordinary-matting-matting-2 .matting-upload-card {
    min-height: 66px;
    grid-template-columns: 58px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 8px;
  }

  .ordinary-matting-matting-2 .matting-upload-thumb {
    width: 56px;
    height: 56px;
  }

  .ordinary-matting-matting-2 .matting-upload-card strong {
    font-size: 13px;
  }

  .ordinary-matting-matting-2 .matting-upload-card small,
  .ordinary-matting-matting-2 .matting-upload-card div button {
    font-size: 11px;
    margin-top: 4px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-grid {
    gap: 10px;
  }

  .ordinary-matting-matting-2 .product-matting-source,
  .ordinary-matting-matting-2 .product-matting-upload-drop {
    min-height: 124px;
  }

  .ordinary-matting-matting-2 .product-matting-source span {
    height: 100px;
    min-height: 100px;
    background-size: contain !important;
  }

  .ordinary-matting-matting-2 .product-matting-upload-drop em {
    display: none;
  }

  .ordinary-matting-matting-2 .product-matting-source small {
    display: block;
    padding-bottom: 5px;
    font-size: 9px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-drop i {
    width: 16px;
    height: 16px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-drop small {
    display: none;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    margin-top: 4px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta strong {
    font-size: 12px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta span {
    font-size: 10px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta .matting-upload-remove {
    grid-row: 1 / 3;
    position: static;
    transform: none;
  }

  .ordinary-matting-matting-2 .matting-range-row {
    min-height: 18px;
    grid-template-columns: 76px minmax(0, 1fr) 38px;
    gap: 6px;
  }

  .ordinary-matting-matting-2 .matting-range-row input {
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .ordinary-matting-matting-2 .matting-toggle-row {
    min-height: 20px;
  }

  .ordinary-matting-matting-2 .matting-bg-tabs button {
    min-height: 30px;
    font-size: 12px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-presets {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 6px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-presets button,
  .ordinary-matting-matting-2 .product-matting-platforms button {
    height: 24px;
    font-size: 11px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-presets select,
  .ordinary-matting-matting-2 .product-matting-select-row select {
    height: 22px;
    font-size: 11px;
  }

  .ordinary-matting-matting-2 .matting-range-row {
    min-height: 18px;
  }

  .ordinary-matting-matting-2 .matting-range-row strong {
    height: 20px;
    line-height: 18px;
  }

  .ordinary-matting-matting-2 .product-matting-advanced-step {
    display: grid;
    gap: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .ordinary-matting-matting-2 .product-matting-advanced-step .ordinary-step-head {
    min-height: 18px;
  }

  .ordinary-matting-matting-2 .product-matting-advanced-grid {
    gap: 3px;
  }

  .ordinary-matting-matting-2 .product-matting-advanced-grid .product-matting-select-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .ordinary-matting-matting-2 .matting-other-step {
    gap: 5px;
  }

  .ordinary-matting-matting-2 .ordinary-actions {
    padding: 5px 12px 7px;
  }

  .ordinary-matting-matting-2 .ordinary-primary-action {
    height: 40px !important;
  }

  .ordinary-matting-matting-2 .ordinary-preview-column {
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    grid-template-rows: minmax(0, 1fr) 176px;
  }

  .ordinary-matting-matting-2 .matting-canvas.stage {
    background-size: contain, 24px 24px, 24px 24px, 24px 24px, 24px 24px;
  }

  .ordinary-matting-matting-2 .matting-records {
    padding: 8px 14px 10px;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    overflow: hidden;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-item {
    min-width: 0;
    flex: 1 1 0;
    grid-template-rows: 70px auto;
    min-height: 112px;
    padding: 6px;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-thumb {
    height: 70px;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-copy {
    padding-top: 4px;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-copy strong,
  .ordinary-matting-matting-2 .matting-records .tool-generation-copy small {
    font-size: 10px;
    line-height: 1.1;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-item em {
    display: none;
  }
}

@media (max-height: 900px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting-1 {
    grid-template-rows: 54px minmax(0, 1fr);
    padding-top: 12px;
    padding-bottom: 12px;
    height: calc(100vh - 64px);
    min-height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    overflow: hidden;
  }

  .ordinary-matting-matting-1 .ordinary-page-title h1 {
    font-size: 22px;
  }

  .ordinary-matting-matting-1 .ordinary-page-back {
    width: 30px;
    height: 30px;
  }

  .ordinary-matting-matting-1 .ordinary-page-tools button {
    min-width: 112px;
    height: 32px;
    padding: 0 14px;
  }

  .ordinary-matting-matting-1 .ordinary-page-tools .ordinary-portrait-process-action {
    min-width: 136px;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control-scroll {
    height: 100% !important;
    overflow: hidden !important;
    padding: 0;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-step {
    gap: 5px;
    margin-bottom: 0;
    padding: 7px 14px 6px;
  }

  .ordinary-matting-matting-1 .ordinary-step:not(.matting-protect-step) {
    border-width: 0 1px;
    border-left: 1px solid #e0e6ef;
    border-right: 1px solid #e0e6ef;
    border-bottom: 1px solid #e5ebf3;
  }

  .ordinary-matting-matting-1 .matting-upload-step {
    border-top: 1px solid #e0e6ef !important;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  .ordinary-matting-matting-1 .matting-background-step {
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid #e0e6ef !important;
    overflow: hidden;
  }

  .ordinary-matting-matting-1 .ordinary-step-head {
    min-height: 20px;
  }

  .ordinary-matting-matting-1 .matting-upload-card {
    min-height: 88px;
    grid-template-columns: 86px minmax(0, 1fr) 18px;
    padding: 0;
    border: 0;
  }

  .ordinary-matting-matting-1 .matting-upload-thumb {
    width: 84px;
    height: 84px;
  }

  .ordinary-matting-matting-1 .matting-upload-card div button {
    display: none;
  }

  .ordinary-matting-matting-1 .matting-range-row {
    min-height: 20px;
  }

  .ordinary-matting-matting-1 .matting-toggle-row {
    min-height: 20px;
  }

  .ordinary-matting-matting-1 .matting-toggle-row.with-note {
    min-height: 28px;
  }

  .ordinary-matting-matting-1 .matting-bg-select {
    min-height: 30px;
  }

  .ordinary-matting-matting-1 .matting-bg-select select {
    height: 24px;
  }

  .ordinary-matting-matting-1 .matting-bg-color-label,
  .ordinary-matting-matting-1 .matting-background-step .matting-color-grid,
  .ordinary-matting-matting-1 .matting-shadow-color-row {
    display: none;
  }

  .ordinary-matting-matting-1 .matting-color-select,
  .ordinary-matting-matting-1 .matting-shadow-color-select {
    display: grid;
    min-height: 28px;
  }

  .ordinary-matting-matting-1 .matting-color-select select,
  .ordinary-matting-matting-1 .matting-shadow-color-select select {
    height: 24px;
  }

  .ordinary-matting-matting-1 .matting-color-grid {
    gap: 8px;
    margin-top: 3px;
  }

  .ordinary-matting-matting-1 .matting-color,
  .ordinary-matting-matting-1 .matting-eyedropper {
    width: 28px;
    height: 28px;
  }

  .ordinary-matting-matting-1 .matting-protect-note {
    min-height: 28px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 7px;
  }

  .ordinary-matting-matting-1 .matting-protect-note i {
    width: 26px;
    height: 26px;
  }

  .ordinary-matting-matting-1 .matting-protect-note b {
    font-size: 12px;
  }

  .ordinary-matting-matting-1 .matting-protect-note small {
    font-size: 11px;
    line-height: 1.2;
  }

  .ordinary-matting-matting-1 .matting-protect-step {
    margin-top: 8px;
    border: 1px solid #e0e6ef;
    border-radius: 8px;
    overflow: hidden;
  }

  .ordinary-matting-matting-1 .ordinary-preview-column {
    height: 100% !important;
    max-height: 100% !important;
    grid-template-rows: minmax(0, 1fr) 172px;
  }

  .ordinary-matting-matting-1 .matting-records {
    padding: 10px 14px 12px;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-records {
    display: grid;
    grid-template-rows: 24px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-head {
    min-height: 22px;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-head strong {
    font-size: 13px;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-list {
    display: flex;
    grid-template-columns: none;
    overflow: hidden;
    padding-top: 6px;
    padding-bottom: 0;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-item {
    flex: 0 0 126px;
    grid-template-rows: 84px auto;
    min-height: 0;
    height: 100%;
    padding: 7px;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-thumb {
    height: 84px;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-copy strong {
    font-size: 11px;
    line-height: 1.15;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-copy small {
    font-size: 10px;
    line-height: 1.15;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-item em {
    display: none;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait {
    grid-template-rows: minmax(0, 1fr) 62px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-export-row {
    min-height: 62px;
    padding: 0 14px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-stage {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-canvas.single {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }

  .ordinary-matting-matting-1 .matting-portrait-result {
    width: 97%;
    height: 97%;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-loupe {
    right: 7.5%;
    top: 23%;
    width: 118px;
    height: 118px;
  }
}

/* Ordinary tool 11 visual audit lock, 2026-06-28 */
.ordinary-blueprint-app-shell .ordinary-sharpen-topbar {
  height: 68px;
}

.ordinary-blueprint-app-shell .ordinary-sharpen-topbar-inner {
  grid-template-columns: 260px minmax(0, 1fr) auto;
  height: 68px;
}

.ordinary-sharpen-brand strong {
  color: inherit;
  font-style: normal;
}

.ordinary-sharpen-points {
  grid-template-columns: 18px auto;
  min-width: 104px;
}

.ordinary-sharpen-points strong::before {
  content: "";
  margin: 0;
}

.ordinary-blueprint-sharpen .enhance-compare-stage.is-design-locked {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen,
.ordinary-blueprint-sharpen {
  min-height: calc(100vh - 68px);
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen {
  height: calc(100vh - 68px);
  overflow: hidden;
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen,
  .ordinary-blueprint-sharpen {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen .ordinary-control,
  .ordinary-blueprint-sharpen .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: calc(100vh - 90px) !important;
    max-height: calc(100vh - 90px) !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen .ordinary-control-scroll,
  .ordinary-blueprint-sharpen .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px 10px 10px;
  }

  .ordinary-blueprint-sharpen .ordinary-title {
    gap: 8px;
    margin-bottom: 6px;
  }

  .ordinary-blueprint-sharpen .ordinary-title::before {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  .ordinary-blueprint-sharpen .ordinary-title .panel-title {
    font-size: 18px;
  }

  .ordinary-blueprint-sharpen .ordinary-title p {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.22;
  }

  .ordinary-blueprint-sharpen .ordinary-step {
    gap: 6px;
    margin-bottom: 7px;
    padding: 8px;
  }

  .ordinary-blueprint-sharpen .ordinary-step-head,
  .ordinary-blueprint-sharpen .ordinary-step-head span {
    min-height: 22px;
  }

  .ordinary-blueprint-sharpen .ordinary-step-head b {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }

  .ordinary-blueprint-sharpen .enhance-upload-card {
    grid-template-columns: 52px minmax(0, 1fr) 24px;
    min-height: 64px;
    padding: 7px;
  }

  .ordinary-blueprint-sharpen .enhance-upload-thumb {
    width: 52px;
    height: 50px;
  }

  .ordinary-blueprint-sharpen .blueprint-range-row {
    grid-template-columns: 112px minmax(0, 1fr) 38px;
    gap: 6px;
    min-height: 24px;
  }

  .ordinary-blueprint-sharpen .blueprint-range-row strong {
    min-height: 23px;
  }

  .ordinary-blueprint-sharpen .enhance-more-row {
    min-height: 24px;
    padding: 4px 8px;
  }

  .ordinary-blueprint-sharpen .sharpen-settings-step {
    margin-bottom: 7px;
  }

  .ordinary-blueprint-sharpen .sharpen-output-step .enhance-output-group {
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
  }

  .ordinary-blueprint-sharpen .enhance-output-group + .enhance-output-group,
  .ordinary-blueprint-sharpen .sharpen-output-step .enhance-output-group + .enhance-output-group {
    margin-top: 4px;
  }

  .ordinary-blueprint-sharpen .blueprint-chip-list button,
  .ordinary-blueprint-sharpen .enhance-output-grid button,
  .ordinary-blueprint-sharpen .enhance-format-tabs button,
  .ordinary-blueprint-sharpen .enhance-quality-tabs button {
    min-height: 25px;
    padding: 0 6px;
  }

  .ordinary-blueprint-sharpen .sharpen-size-group .enhance-output-grid button {
    min-height: 32px;
  }

  .ordinary-blueprint-sharpen .ordinary-actions {
    padding: 8px 0 0;
    border-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-sharpen .sharpen-primary-action {
    min-height: 50px;
  }
}

/* Ordinary tool 11 sharpen left-panel clearance lock v1, 2026-06-28 */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen,
  .ordinary-workbench.ordinary-blueprint-sharpen {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-sharpen .ordinary-control,
  .ordinary-blueprint-sharpen .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 90px) !important;
    max-height: calc(100vh - 90px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-sharpen .ordinary-control-scroll,
  .ordinary-blueprint-sharpen .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-sharpen .ordinary-actions {
    flex: 0 0 auto !important;
    border-top: 0 !important;
    background: transparent !important;
  }
}

@media (min-width: 901px) and (max-height: 980px) {
  .ordinary-blueprint-sharpen .ordinary-step {
    gap: 6px !important;
    margin-bottom: 7px !important;
    padding: 8px 10px !important;
  }

  .ordinary-blueprint-sharpen .ordinary-title {
    margin-bottom: 7px !important;
  }

  .ordinary-blueprint-sharpen .enhance-upload-card {
    min-height: 68px !important;
    padding: 7px !important;
  }

  .ordinary-blueprint-sharpen .enhance-upload-thumb {
    width: 56px !important;
    height: 52px !important;
  }

  .ordinary-blueprint-sharpen .blueprint-range-row {
    min-height: 24px !important;
  }

  .ordinary-blueprint-sharpen .enhance-more-row {
    min-height: 24px !important;
    padding: 4px 8px !important;
  }

  .ordinary-blueprint-sharpen .sharpen-settings-step {
    margin-bottom: 7px !important;
  }

  .ordinary-blueprint-sharpen .blueprint-chip-list button,
  .ordinary-blueprint-sharpen .enhance-output-grid button,
  .ordinary-blueprint-sharpen .enhance-format-tabs button,
  .ordinary-blueprint-sharpen .enhance-quality-tabs button {
    min-height: 26px !important;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-sharpen {
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }
}

/* Ordinary tool 12 visual audit lock, 2026-06-28 */
.ordinary-blueprint-app-shell .ordinary-object-topbar {
  height: 68px;
}

.ordinary-blueprint-app-shell .ordinary-object-topbar-inner {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 30px;
  width: min(1472px, calc(100% - 64px));
  height: 68px;
}

.ordinary-object-brand strong {
  color: inherit;
  font-style: normal;
}

.ordinary-object-nav {
  justify-content: flex-start;
  gap: clamp(26px, 3.05vw, 44px);
  color: #1f2637;
}

.ordinary-object-nav a,
.ordinary-object-nav button {
  padding: 0 6px;
  background: transparent;
}

.ordinary-object-nav a.active-soft {
  position: relative;
  color: #b84af2;
  background: transparent;
  border-radius: 0;
}

.ordinary-object-nav a.active-soft::after {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -11px;
  height: 3px;
  border-radius: 999px;
  background: #f05aaa;
  content: "";
}

.ordinary-object-actions {
  gap: 12px;
}

.ordinary-object-vip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #7b5cf4, #d24bd3);
  box-shadow: 0 8px 18px rgba(124, 92, 244, 0.16);
  font-size: 14px;
  font-weight: 900;
}

.ordinary-object-vip span {
  width: 15px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 34%, 100% 50%, 60% 66%, 50% 100%, 40% 66%, 0 50%, 40% 34%);
}

.ordinary-object-points {
  grid-template-columns: 18px auto 12px;
  min-width: 118px;
}

.ordinary-object-points strong::before {
  content: "";
  margin: 0;
}

.ordinary-object-points em {
  display: block;
  color: #687184;
  font-size: 16px;
  font-style: normal;
  font-weight: 850;
}

.ordinary-object-actions > i {
  display: block;
  width: 1px;
  height: 24px;
  background: #e3e8f1;
}

.ordinary-object-doc,
.ordinary-object-bell,
.ordinary-object-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #2f3748;
}

.ordinary-object-doc::before,
.ordinary-object-bell::before {
  width: 20px;
  height: 20px;
  background: currentColor;
  content: "";
}

.ordinary-object-doc::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h8l4 4v14H6V3Zm7 2H8v14h8V8h-3V5Zm-3 7h4v2h-4v-2Zm0 4h4v2h-4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h8l4 4v14H6V3Zm7 2H8v14h8V8h-3V5Zm-3 7h4v2h-4v-2Zm0 4h4v2h-4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-object-bell::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.6 2.6 0 0 0 2.45-1.75h-4.9A2.6 2.6 0 0 0 12 22Zm7-5-1.8-2.1V10a5.2 5.2 0 0 0-4.1-5.1V3h-2.2v1.9A5.2 5.2 0 0 0 6.8 10v4.9L5 17v1.25h14V17Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.6 2.6 0 0 0 2.45-1.75h-4.9A2.6 2.6 0 0 0 12 22Zm7-5-1.8-2.1V10a5.2 5.2 0 0 0-4.1-5.1V3h-2.2v1.9A5.2 5.2 0 0 0 6.8 10v4.9L5 17v1.25h14V17Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-object-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.86) 0 18%, transparent 19%),
    linear-gradient(135deg, #dfb6ff, #a891ff);
}

@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-object {
    height: calc(100vh - 68px);
    min-height: calc(100vh - 68px);
    overflow: hidden;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-object .ordinary-control-scroll {
    max-height: 100%;
    padding: 10px 16px 12px;
  }

  .ordinary-blueprint-object .ordinary-title {
    margin-bottom: 8px;
  }

  .ordinary-blueprint-object .ordinary-title .panel-title {
    font-size: 20px;
  }

  .ordinary-blueprint-object .ordinary-title p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
  }

  .ordinary-blueprint-object .ordinary-step {
    gap: 8px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 10px 16px;
  }

  .ordinary-blueprint-object .inpaint-upload-card {
    grid-template-columns: 72px minmax(0, 1fr) 22px;
    min-height: 50px;
  }

  .ordinary-blueprint-object .inpaint-upload-card > span {
    width: 72px;
    height: 48px;
  }

  .ordinary-blueprint-object .inpaint-upload-card small {
    margin-top: 2px;
  }

  .ordinary-blueprint-object .inpaint-tool-tabs button {
    min-height: 34px;
  }

  .ordinary-blueprint-object .inpaint-range-list {
    gap: 7px;
    margin-top: 8px;
  }

  .ordinary-blueprint-object .blueprint-range-row {
    min-height: 32px;
  }

  .ordinary-blueprint-object .inpaint-mask-actions {
    gap: 10px;
    margin-top: 8px;
  }

  .ordinary-blueprint-object .inpaint-mask-actions button {
    height: 34px;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list button {
    min-height: 44px;
    padding: 8px 10px;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list strong {
    font-size: 12px;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list span {
    font-size: 11px;
    line-height: 1.2;
  }

  .ordinary-blueprint-object .ordinary-actions {
    padding: 8px 16px 12px;
  }

  .ordinary-blueprint-object .inpaint-primary-action {
    min-height: 50px;
  }

  .ordinary-blueprint-object .inpaint-cost-note {
    margin-top: 6px;
  }
}

.ordinary-blueprint-object .inpaint-preview-actions {
  display: grid;
  grid-template-columns: 148px 170px;
  gap: 12px;
  width: max-content;
  max-width: calc((100% - 14px) / 2);
  margin-left: auto;
  justify-content: normal;
}

.ordinary-blueprint-object .inpaint-stage-head {
  justify-content: flex-start;
  gap: 8px;
}

.ordinary-blueprint-object .inpaint-preview-toolbar > div:first-child button:first-child {
  position: relative;
  color: #2a3347;
  font-size: 0;
}

.ordinary-blueprint-object .inpaint-preview-toolbar > div:first-child button:first-child::before {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11V5.5a1.5 1.5 0 0 1 3 0V10h1V4.5a1.5 1.5 0 0 1 3 0V10h1V6.5a1.5 1.5 0 0 1 3 0V14c0 4-2.6 7-7.1 7H11c-2.1 0-3.9-.9-5.1-2.6L2.7 14a1.7 1.7 0 0 1 2.6-2.1L8 14.4V11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11V5.5a1.5 1.5 0 0 1 3 0V10h1V4.5a1.5 1.5 0 0 1 3 0V10h1V6.5a1.5 1.5 0 0 1 3 0V14c0 4-2.6 7-7.1 7H11c-2.1 0-3.9-.9-5.1-2.6L2.7 14a1.7 1.7 0 0 1 2.6-2.1L8 14.4V11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-object .inpaint-preview-actions .ghost-btn,
.ordinary-blueprint-object .inpaint-preview-actions .primary-btn {
  width: 100%;
  min-width: 0;
}

.ordinary-blueprint-object .inpaint-record-item em {
  display: none;
}

@media (max-width: 900px) {
  .ordinary-blueprint-object .inpaint-preview-actions {
    width: 100%;
  }
}

/* Ordinary tool 13 visual audit lock, 2026-06-28 */
.ordinary-blueprint-app-shell .ordinary-remove-watermark-topbar {
  height: 60px;
}

.ordinary-blueprint-app-shell .ordinary-remove-watermark-topbar-inner {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  width: min(1480px, calc(100% - 56px));
  height: 60px;
  margin: 0 auto;
}

.ordinary-remove-watermark-brand {
  color: #171928;
  font-size: 27px;
  font-weight: 950;
}

.ordinary-remove-watermark-brand span {
  color: #171928;
}

.ordinary-remove-watermark-brand strong {
  color: #8f50f4;
  font-style: normal;
}

.ordinary-remove-watermark-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(34px, 4.2vw, 58px);
  height: 60px;
  overflow: hidden;
  color: #242b3b;
  font-size: 14px;
  font-weight: 820;
  white-space: nowrap;
}

.ordinary-remove-watermark-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 60px;
  color: inherit;
}

.ordinary-remove-watermark-nav a.active-soft {
  color: #7b55f3;
  background: transparent;
}

.ordinary-remove-watermark-nav a.active-soft::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: #8d5cf5;
  content: "";
}

.ordinary-remove-watermark-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  height: 60px;
}

.ordinary-remove-watermark-member,
.ordinary-remove-watermark-points,
.ordinary-remove-watermark-recharge,
.ordinary-remove-watermark-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
}

.ordinary-remove-watermark-member {
  gap: 7px;
  min-width: 92px;
  padding: 0 12px;
  border: 0;
  color: #fff;
  background: linear-gradient(95deg, #7558f3, #de4eb6);
  box-shadow: 0 8px 18px rgba(129, 82, 234, 0.16);
}

.ordinary-remove-watermark-member span {
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14l1-10-5 3-3-7-3 7-5-3 1 10Zm1 2v-2h12v2H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14l1-10-5 3-3-7-3 7-5-3 1 10Zm1 2v-2h12v2H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-remove-watermark-points {
  display: grid;
  grid-template-columns: 18px auto 14px;
  gap: 8px;
  min-width: 118px;
  padding: 0 12px;
  border: 1px solid #e2e7f0;
  color: #2e374b;
  background: #fff;
}

.ordinary-remove-watermark-points span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff7c4 0 18%, transparent 19%),
    linear-gradient(135deg, #ffcf65, #efa71c);
}

.ordinary-remove-watermark-points strong {
  font-size: 13px;
  font-weight: 900;
}

.ordinary-remove-watermark-points em {
  color: #777f91;
  font-style: normal;
  font-weight: 780;
}

.ordinary-remove-watermark-recharge {
  min-width: 70px;
  padding: 0 16px;
  border: 0;
  color: #fff;
  background: linear-gradient(95deg, #8a59f6, #e94cab);
}

.ordinary-remove-watermark-caret {
  width: 44px;
  border: 1px solid #e2e7f0;
  color: #70798c;
  background: #fff;
}

.ordinary-remove-watermark-caret::before {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-remove-watermark-actions .user-menu {
  top: 48px;
  right: 0;
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark {
  min-height: calc(100vh - 60px);
  padding-top: 94px;
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-title {
  top: 28px;
}

.ordinary-blueprint-watermark .watermark-task-records {
  padding: 12px 16px;
}

.ordinary-blueprint-watermark .watermark-task-records .tool-generation-head {
  margin-bottom: 6px;
}

.ordinary-blueprint-watermark .watermark-task-head {
  min-height: 28px;
}

.ordinary-blueprint-watermark .watermark-task-row {
  min-height: 34px;
}

.ordinary-blueprint-watermark .watermark-task-thumb {
  width: 34px;
  height: 24px;
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark {
    padding-top: 16px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 214px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-head {
    min-height: 24px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-row {
    min-height: 26px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-thumb {
    width: 30px;
    height: 21px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-task-row:nth-of-type(n + 5) {
    display: grid;
  }
}

/* Short real-Chrome windows keep the locked title and scroll controls, rather
   than deleting the title to make the panel fit. */
@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark {
    padding-top: 74px !important;
    padding-bottom: 12px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-title {
    display: flex !important;
    top: 14px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    height: calc(100vh - 134px) !important;
    max-height: calc(100vh - 134px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 262px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-actions {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    background: #fff !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-actions .primary-btn,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-actions .ordinary-primary-action {
    min-height: 40px !important;
    height: 40px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 170px !important;
  }
}

/* Keep the watermark workspace inside a short real Chrome viewport. */
@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark {
    height: calc(100vh - 56px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 56px) !important;
    overflow: visible !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-preview-column {
    height: calc(100vh - 142px) !important;
    max-height: calc(100vh - 142px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control {
    position: relative !important;
    display: block !important;
    padding-bottom: 58px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-control-scroll {
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: 12px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-actions {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 4 !important;
    padding: 8px 10px 10px !important;
    background: #fff !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .ordinary-title {
    top: -46px !important;
  }
}

.ordinary-blueprint-watermark .watermark-page-head {
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 5;
  display: block;
}

.ordinary-blueprint-watermark .watermark-page-head h1 {
  margin: 0;
  color: #151b2d;
  font-size: 24px;
  line-height: 1.2;
}

.ordinary-blueprint-watermark .watermark-page-head p {
  margin: 8px 0 0;
  color: #6f7b90;
  font-size: 13px;
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-watermark .watermark-page-head {
    top: 14px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-remove-watermark-topbar {
    height: auto;
    min-height: 50px;
  }

  .ordinary-blueprint-app-shell .ordinary-remove-watermark-topbar-inner {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50px;
    gap: 12px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ordinary-blueprint-app-shell .ordinary-remove-watermark-topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .ordinary-remove-watermark-brand,
  .ordinary-remove-watermark-nav,
  .ordinary-remove-watermark-actions {
    flex: 0 0 auto;
  }

  .ordinary-remove-watermark-nav {
    gap: 18px;
    font-size: 13px;
  }

  .ordinary-remove-watermark-member,
  .ordinary-remove-watermark-points,
  .ordinary-remove-watermark-recharge,
  .ordinary-remove-watermark-caret {
    height: 32px;
  }
}

/* Ordinary tool 14 visual audit lock, 2026-06-28 */
.ordinary-blueprint-app-shell .ordinary-text-topbar {
  height: 64px;
  border-bottom-color: #e5ebf4;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(32, 45, 74, 0.04);
}

.ordinary-blueprint-app-shell .ordinary-text-topbar-inner {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 42px;
  width: min(1480px, calc(100% - 56px));
  height: 64px;
  margin: 0 auto;
}

.ordinary-text-brand,
.ordinary-text-brand span {
  color: #6552f3;
  font-size: 28px;
  font-weight: 950;
}

.ordinary-text-brand strong {
  color: #7e55f5;
  font-style: normal;
}

.ordinary-text-nav {
  gap: clamp(26px, 3.6vw, 54px);
  color: #1f2738;
  font-size: 14px;
  font-weight: 780;
}

.ordinary-text-nav a {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
}

.ordinary-text-nav a.active-soft {
  color: #7055f4;
  background: #f0edff;
}

.ordinary-text-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  height: 64px;
}

.ordinary-text-points,
.ordinary-text-member,
.ordinary-text-user,
.ordinary-text-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.ordinary-text-points {
  display: grid;
  grid-template-columns: 18px auto 14px;
  gap: 8px;
  min-width: 106px;
  padding: 0 12px;
  border: 1px solid #dfe6f0;
  color: #2c3549;
  background: #f8fbff;
}

.ordinary-text-points span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff6ba 0 18%, transparent 19%),
    linear-gradient(135deg, #ffcf55, #eca017);
}

.ordinary-text-points em {
  color: #596277;
  font-style: normal;
  font-weight: 760;
}

.ordinary-text-member {
  gap: 8px;
  min-width: 112px;
  padding: 0 16px;
  border: 0;
  color: #fff;
  background: linear-gradient(95deg, #7258f4, #e64dad);
  box-shadow: 0 8px 18px rgba(129, 82, 234, 0.14);
}

.ordinary-text-member span {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14l1-10-5 3-3-7-3 7-5-3 1 10Zm1 2v-2h12v2H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14l1-10-5 3-3-7-3 7-5-3 1 10Zm1 2v-2h12v2H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-text-user,
.ordinary-text-caret {
  border: 0;
  color: #242c3d;
  background: transparent;
}

.ordinary-text-user {
  min-width: 58px;
  padding: 0;
}

.ordinary-text-caret {
  width: 28px;
}

.ordinary-text-caret::before {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-text-actions .user-menu {
  top: 52px;
  right: 0;
}

.ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-text {
  padding-top: 12px;
}

.ordinary-blueprint-text .ordinary-control,
.ordinary-blueprint-text .ordinary-preview-column {
  max-height: calc(100vh - 92px);
}

.ordinary-blueprint-text .text-tool-step {
  gap: 11px;
}

.ordinary-blueprint-text .inpaint-tool-tabs button {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 8px 6px;
  color: #2f384d;
}

.ordinary-blueprint-text .inpaint-tool-tabs button::before {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  content: "";
}

.ordinary-blueprint-text .inpaint-tool-tabs button:nth-child(1)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m5 16 1.4-4.2L15.7 2.5a2.1 2.1 0 0 1 3 3L9.4 14.8 5 16Zm3.2-2.6 8.9-8.9-.8-.8-8.9 8.9-.5 1.3 1.3-.5ZM4 19h16v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m5 16 1.4-4.2L15.7 2.5a2.1 2.1 0 0 1 3 3L9.4 14.8 5 16Zm3.2-2.6 8.9-8.9-.8-.8-8.9 8.9-.5 1.3 1.3-.5ZM4 19h16v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-text .inpaint-tool-tabs button:nth-child(2)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 5h2v2H5V5Zm4 0h6v2H9V5Zm8 0h2v2h-2V5ZM5 9h2v6H5V9Zm12 0h2v6h-2V9ZM5 17h2v2H5v-2Zm4 0h6v2H9v-2Zm8 0h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 5h2v2H5V5Zm4 0h6v2H9V5Zm8 0h2v2h-2V5ZM5 9h2v6H5V9Zm12 0h2v6h-2V9ZM5 17h2v2H5v-2Zm4 0h6v2H9v-2Zm8 0h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-blueprint-text .inpaint-tool-tabs button:nth-child(3)::before {
  border: 2px dashed currentColor;
  border-radius: 50%;
  background: transparent;
}

.ordinary-blueprint-text .inpaint-tool-tabs button:nth-child(4)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m6.6 15.8 8.9-8.9 4.2 4.2-6.4 6.4H7.9l-1.3-1.7ZM3 19h18v2H3v-2Zm4.4-4 1 1.3h4l4.4-4.4-1.4-1.4L7.4 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m6.6 15.8 8.9-8.9 4.2 4.2-6.4 6.4H7.9l-1.3-1.7ZM3 19h18v2H3v-2Zm4.4-4 1 1.3h4l4.4-4.4-1.4-1.4L7.4 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.text-brush-color-row,
.text-mask-footer,
.text-model-select,
.text-more-row {
  min-width: 0;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #fff;
}

.text-brush-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 12px;
  color: #374154;
  font-size: 13px;
  font-weight: 780;
}

.text-brush-color-row span {
  width: 34px;
  height: 18px;
  border-radius: 4px;
  background: #ef5484;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.text-mask-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 0 0 10px;
  border: 0;
  background: transparent;
  color: #7b8496;
}

.text-mask-footer small {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-mask-footer small::before {
  margin-right: 5px;
  color: #8b94a5;
  content: "ⓘ";
}

.text-mask-footer button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #dde5f0;
  border-radius: 7px;
  color: #7055f4;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.text-mask-footer button::before {
  margin-right: 6px;
  content: "◎";
}

.text-model-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 10px;
  color: #30394d;
  font-size: 13px;
  font-weight: 820;
}

.text-model-select b {
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(95deg, #7357f4, #e94fab);
  font-size: 10px;
}

.text-model-select strong,
.text-model-select small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-model-select small {
  color: #7d8799;
  font-size: 12px;
  font-weight: 720;
}

.text-model-select span {
  width: 8px;
  height: 8px;
  border: solid #697386;
  border-width: 0 1.6px 1.6px 0;
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-blueprint-text .text-mode-step .blueprint-switch-row {
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}

.text-more-row {
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  color: #4a5469;
  font-size: 13px;
  font-weight: 780;
}

.text-more-row span {
  color: #697386;
}

.ordinary-blueprint-text .inpaint-preview-toolbar {
  min-height: 42px;
}

.ordinary-blueprint-text .inpaint-preview-toolbar button,
.ordinary-blueprint-text .inpaint-preview-toolbar span {
  min-width: 44px;
  height: 38px;
  background: #fff;
}

.ordinary-blueprint-text .inpaint-record-item.active::after {
  position: absolute;
  left: 16px;
  top: 116px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
  background: rgba(50, 58, 74, 0.82);
  content: "";
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-text-topbar,
  .ordinary-blueprint-app-shell .ordinary-text-topbar-inner {
    height: 56px;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-text {
    padding-top: 16px;
  }

  .ordinary-blueprint-text .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 156px;
  }

  .ordinary-blueprint-text .ordinary-step {
    gap: 7px;
    margin-bottom: 7px;
    padding: 9px;
  }

  .ordinary-blueprint-text .inpaint-upload-card {
    min-height: 66px;
    padding: 8px;
  }

  .ordinary-blueprint-text .inpaint-upload-card > span {
    width: 76px;
    height: 50px;
  }

  .ordinary-blueprint-text .inpaint-tool-tabs {
    gap: 8px;
  }

  .ordinary-blueprint-text .inpaint-tool-tabs button {
    min-height: 48px;
    padding: 6px 4px;
  }

  .ordinary-blueprint-text .inpaint-tool-tabs button::before {
    width: 16px;
    height: 16px;
  }

  .ordinary-blueprint-text .blueprint-range-row {
    min-height: 27px;
  }

  .text-brush-color-row,
  .text-mask-footer,
  .text-model-select,
  .ordinary-blueprint-text .text-mode-step .blueprint-switch-row,
  .text-more-row {
    min-height: 30px;
  }

  .text-mask-footer {
    grid-template-columns: 1fr auto;
  }

  .text-model-select {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .text-model-select small {
    display: none;
  }

  .ordinary-blueprint-text .inpaint-record-list {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 10px;
  }

  .ordinary-blueprint-text .inpaint-record-item {
    grid-template-rows: 88px auto;
    min-height: 116px;
    padding: 7px;
  }

  .ordinary-blueprint-text .inpaint-record-item strong {
    margin-top: 6px;
  }

  .ordinary-blueprint-text .inpaint-record-item small {
    display: block;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-text-topbar {
    height: auto;
    min-height: 58px;
  }

  .ordinary-blueprint-app-shell .ordinary-text-topbar-inner {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 58px;
    gap: 16px;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ordinary-blueprint-app-shell .ordinary-text-topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .ordinary-text-brand,
  .ordinary-text-nav,
  .ordinary-text-actions {
    flex: 0 0 auto;
  }

  .ordinary-text-nav {
    gap: 14px;
    font-size: 13px;
  }

  .ordinary-text-actions {
    gap: 8px;
  }

  .ordinary-text-points,
  .ordinary-text-member,
  .ordinary-text-user,
  .ordinary-text-caret {
    height: 32px;
  }
}

@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-text {
    height: calc(100vh - 64px);
    min-height: calc(100vh - 64px);
    overflow: hidden;
  }

  .ordinary-blueprint-text .inpaint-upload-step .ordinary-step-head {
    display: grid;
    grid-template-columns: 20px 64px minmax(0, 1fr);
    gap: 8px;
  }

  .ordinary-blueprint-text .inpaint-upload-step .ordinary-step-head strong {
    min-width: 64px;
    white-space: nowrap;
  }

  .ordinary-blueprint-text .inpaint-upload-step .ordinary-step-head span {
    justify-self: end;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ordinary-blueprint-text .ordinary-preview-card {
    position: relative;
  }

  .ordinary-blueprint-text .inpaint-blueprint-preview {
    position: static;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .ordinary-blueprint-text .inpaint-preview-toolbar {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 6;
    min-height: 40px;
    border-bottom: 0;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-text {
    height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
  }

  .ordinary-blueprint-text .ordinary-control-scroll {
    overflow: hidden;
  }

  .ordinary-blueprint-text .inpaint-upload-card {
    min-height: 58px;
  }

  .ordinary-blueprint-text .inpaint-upload-card > span {
    width: 70px;
    height: 46px;
  }

  .ordinary-blueprint-text .inpaint-upload-card small {
    margin-top: 2px;
  }

  .ordinary-blueprint-text .text-brush-ranges,
  .ordinary-blueprint-text .text-protect-ranges {
    gap: 5px;
    margin-top: 2px;
  }

  .ordinary-blueprint-text .text-brush-color-row,
  .ordinary-blueprint-text .text-more-row {
    display: none;
  }

  .ordinary-blueprint-text .text-mask-footer {
    display: flex;
    justify-content: flex-end;
    min-height: 28px;
  }

  .ordinary-blueprint-text .text-mask-footer small {
    display: none;
  }

  .ordinary-blueprint-text .text-model-select,
  .ordinary-blueprint-text .text-mode-step .blueprint-switch-row {
    min-height: 28px;
  }

  .ordinary-blueprint-text .text-model-select {
    padding: 0 9px;
  }

  .ordinary-blueprint-text .blueprint-switch-row i {
    flex-basis: 34px;
    width: 34px;
    height: 20px;
  }

  .ordinary-blueprint-text .blueprint-switch-row i::before {
    top: 3px;
    width: 14px;
    height: 14px;
  }

  .ordinary-blueprint-text .blueprint-switch-row input:checked + i::before {
    transform: translateX(14px);
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-text {
    height: auto;
    min-height: calc(100vh - 50px);
    overflow: visible;
  }

  .ordinary-blueprint-text .inpaint-blueprint-preview {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
  }

  .ordinary-blueprint-text .inpaint-preview-toolbar {
    position: static;
  }
}

/* Ordinary tool 15 visual audit lock, 2026-06-28 */
@media (min-width: 901px) and (min-height: 861px) and (max-height: 1050px) {
  .ordinary-blueprint-app-shell .montage-page {
    height: calc(100vh - 56px);
    min-height: 0;
    max-height: calc(100vh - 56px);
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-left {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) 58px;
    gap: 8px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-title {
    margin-bottom: 4px;
  }

  .ordinary-blueprint-app-shell .montage-title .panel-title {
    font-size: 24px !important;
    line-height: 1.08;
  }

  .ordinary-blueprint-app-shell .montage-title p {
    margin-top: 3px;
    font-size: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    padding: 10px;
  }

  .ordinary-blueprint-app-shell .montage-panel-head {
    min-height: 22px;
    margin-bottom: 8px;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 94px;
  }

  .ordinary-blueprint-app-shell .montage-layout-options {
    gap: 8px;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 50px auto;
    min-height: 82px;
    padding: 5px;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs button,
  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 30px;
  }

  .ordinary-blueprint-app-shell .montage-size-row {
    margin-top: 8px;
  }

  .ordinary-blueprint-app-shell .montage-size-row input {
    height: 31px;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    min-height: 24px;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    width: 24px;
    height: 24px;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    position: static;
    align-self: end;
    margin-top: 0;
    padding-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide {
    height: 56px;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-page {
    height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    padding-top: 16px;
    padding-bottom: 12px;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-left {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    gap: 7px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-title {
    margin-bottom: 4px;
  }

  .ordinary-blueprint-app-shell .montage-title .panel-title {
    font-size: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-title p {
    margin-top: 3px;
    font-size: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    padding: 9px;
  }

  .ordinary-blueprint-app-shell .montage-panel-head {
    min-height: 22px;
    margin-bottom: 7px;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 82px;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 48px auto;
    min-height: 78px;
    padding: 5px;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs button,
  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 28px;
  }

  .ordinary-blueprint-app-shell .montage-size-row {
    margin-top: 7px;
  }

  .ordinary-blueprint-app-shell .montage-size-row input {
    height: 30px;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    min-height: 0;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row,
  .ordinary-blueprint-app-shell .montage-bg-tabs,
  .ordinary-blueprint-app-shell .montage-style-step .swatches {
    display: none;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    position: static;
    align-self: end;
    margin-top: 0;
    padding-top: 0;
    background: transparent;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide {
    height: 56px;
  }

  .ordinary-blueprint-app-shell .montage-center {
    grid-template-rows: 48px minmax(0, 1fr) 178px;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip {
    height: 178px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .ordinary-blueprint-app-shell .montage-right {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 34px;
    gap: 10px;
    height: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
    margin-top: 60px;
    overflow: hidden;
  }

  .ordinary-blueprint-app-shell .montage-history-list {
    gap: 8px;
    max-height: none;
    min-height: 0;
    margin-top: 0;
    overflow-y: auto;
    padding-bottom: 2px;
  }

  .ordinary-blueprint-app-shell .montage-history-card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto auto 20px;
    gap: 3px 8px;
    min-height: 92px;
    padding: 8px;
  }

  .ordinary-blueprint-app-shell .montage-history-card > span {
    width: 52px;
    height: 52px;
  }

  .ordinary-blueprint-app-shell .montage-history-card strong {
    font-size: 12px;
  }

  .ordinary-blueprint-app-shell .montage-history-card small,
  .ordinary-blueprint-app-shell .montage-history-card em {
    font-size: 11px;
  }

  .ordinary-blueprint-app-shell .montage-history-card b:last-of-type {
    right: 9px;
    bottom: 8px;
  }

  .ordinary-blueprint-app-shell .montage-clear-history {
    margin-top: 0;
  }
}

/* Ordinary tool 1 visual audit lock, 2026-06-28 */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water {
    height: calc(100vh - 56px);
    min-height: 0;
    max-height: calc(100vh - 56px);
    overflow: hidden;
  }
}

@media (min-width: 901px) and (max-height: 860px) {
  /* The design keeps its full control scale. On shorter desktops only this pane scrolls. */
  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water {
    grid-template-rows: 32px minmax(0, 1fr);
    gap: 8px 22px;
    padding: 12px 30px 24px;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control {
    align-self: stretch;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 148px) !important;
    max-height: calc(100vh - 148px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px 16px 16px !important;
    scrollbar-gutter: stable;
  }

  .ordinary-tool-pdf-add-water .watermark-drop-zone {
    display: grid !important;
    min-height: 72px !important;
    margin-bottom: 8px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-step {
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-step:nth-of-type(2) {
    margin-bottom: 31px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-step-head {
    min-height: 26px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-upload-card {
    grid-template-columns: 48px minmax(0, 1fr) 28px !important;
    min-height: 42px !important;
    padding: 6px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-upload-thumb {
    width: 48px !important;
    height: 40px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-step .form-block,
  .ordinary-tool-pdf-add-water .ordinary-two-fields {
    min-height: 34px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-step input,
  .ordinary-tool-pdf-add-water .ordinary-step select {
    height: 34px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-step .tool-tab {
    min-height: 32px !important;
  }

  .ordinary-tool-pdf-add-water .control-row,
  .ordinary-tool-pdf-add-water .watermark-color-row {
    min-height: 28px !important;
  }

  .ordinary-tool-pdf-add-water .control-row strong {
    height: 28px !important;
  }

  .ordinary-tool-pdf-add-water .watermark-color-row button {
    height: 24px !important;
  }

  .ordinary-tool-pdf-add-water .watermark-inline-actions {
    margin-top: 2px !important;
  }

  .ordinary-tool-pdf-add-water .watermark-inline-actions .ai-advice-btn,
  .ordinary-tool-pdf-add-water .watermark-inline-actions .ghost-btn {
    height: 34px !important;
    min-height: 34px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-step .ordinary-primary-action {
    height: 42px !important;
    margin-top: 12px !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-preview-column {
    height: calc(100vh - 148px) !important;
    min-height: 0;
    max-height: calc(100vh - 148px) !important;
    grid-template-rows: minmax(0, 1fr) 244px;
    gap: 12px;
  }

  .ordinary-tool-pdf-add-water .ordinary-watermark-preview {
    grid-template-rows: 50px minmax(0, 1fr);
  }

  .ordinary-tool-pdf-add-water .pdf-watermark-records {
    min-height: 0;
    padding: 12px;
  }

  .ordinary-tool-pdf-add-water .pdf-watermark-record-list {
    gap: 18px;
  }

  .ordinary-tool-pdf-add-water .pdf-watermark-record-card {
    height: 181px;
  }
}

/* Ordinary tool 03 mobile fit lock, 2026-06-28 */
@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting-1 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "pagehead"
      "control"
      "preview" !important;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 64px);
    max-height: none;
    gap: 12px;
    overflow: visible;
    padding: 12px;
  }

  .ordinary-matting-matting-1 .ordinary-page-head {
    grid-area: pagehead;
    width: 100%;
    min-width: 0;
  }

  .ordinary-matting-matting-1 .ordinary-page-title {
    min-width: 0;
  }

  .ordinary-matting-matting-1 .ordinary-page-title h1 {
    max-width: 100%;
    font-size: 21px;
  }

  .ordinary-matting-matting-1 .ordinary-page-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }

  .ordinary-matting-matting-1 .ordinary-page-tools button,
  .ordinary-matting-matting-1 .ordinary-page-tools .ordinary-portrait-process-action {
    min-width: 0;
    width: 100%;
    height: 34px;
    padding: 0 10px;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control {
    grid-area: control;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid #dde6f2;
    background: #fff;
    box-shadow: 0 12px 28px rgba(30, 43, 70, 0.06);
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-1 .ordinary-control-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px;
  }

  .ordinary-matting-matting-1 .ordinary-step {
    padding: 12px;
  }

  .ordinary-matting-matting-1 .matting-upload-card {
    grid-template-columns: 68px minmax(0, 1fr) 22px;
    min-height: 82px;
  }

  .ordinary-matting-matting-1 .matting-bg-select,
  .ordinary-matting-matting-1 .matting-color-select,
  .ordinary-matting-matting-1 .matting-shadow-color-select {
    max-width: 100%;
  }

  .ordinary-matting-matting-1 .matting-range-row {
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr) 48px;
  }

  .ordinary-matting-matting-1 .ordinary-preview-column {
    grid-area: preview;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    grid-template-rows: auto auto;
  }

  .ordinary-matting-matting-1 .matting-preview-section {
    min-height: 430px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait {
    grid-template-rows: minmax(0, 1fr) 62px;
    height: auto;
    min-height: 430px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-stage {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-export-row {
    grid-template-columns: minmax(0, 1fr) 168px;
    min-height: 62px;
    padding: 0 12px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-download {
    width: 168px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-canvas.single {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-loupe {
    right: 6%;
    top: 18%;
    width: 96px;
    height: 96px;
  }

  .ordinary-matting-matting-1 .matting-preview-workspace.portrait .matting-zoom-controls {
    left: 16px;
    bottom: 16px;
    transform: scale(0.9);
    transform-origin: left bottom;
  }

  .ordinary-matting-matting-1 .matting-records {
    padding: 12px;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-item {
    min-width: 0;
    height: auto;
    min-height: 154px;
    grid-template-rows: 108px auto;
    padding: 7px;
  }

  .ordinary-matting-matting-1 .matting-records .tool-generation-thumb {
    height: 108px;
  }
}

/* Ordinary tool 03 mobile topbar fit lock, 2026-06-28 */
@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-portrait-topbar {
    height: auto;
  }

  .ordinary-blueprint-app-shell .ordinary-portrait-topbar .ordinary-blueprint-topbar-inner,
  .ordinary-blueprint-app-shell .ordinary-portrait-topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "nav nav";
    align-items: center;
    row-gap: 8px;
    column-gap: 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8px 12px 9px;
    overflow: visible;
  }

  .ordinary-portrait-brand {
    grid-area: brand;
    min-width: 0;
    font-size: 22px;
  }

  .ordinary-portrait-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    width: 100%;
    height: auto;
    min-width: 0;
    overflow: visible;
    font-size: 13px;
    line-height: 1;
  }

  .ordinary-portrait-nav a,
  .ordinary-portrait-nav button {
    flex: 0 0 auto;
    height: 24px;
    padding: 0 2px;
  }

  .ordinary-portrait-nav a.active-soft {
    border-bottom-width: 2px;
  }

  .ordinary-portrait-actions {
    grid-area: actions;
    justify-self: end;
    display: inline-flex;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }

  .ordinary-portrait-points {
    min-width: 78px;
    height: 30px;
    padding: 0 9px;
    grid-template-columns: 15px auto 9px;
  }

  .ordinary-portrait-recharge {
    min-width: 56px;
    height: 30px;
    padding: 0 10px;
  }

  .ordinary-portrait-account {
    min-width: 76px;
    height: 30px;
    padding: 0 10px;
  }

  .ordinary-matting-matting-1 .ordinary-page-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 9px;
  }

  .ordinary-matting-matting-1 .ordinary-page-title {
    width: 100%;
  }

  .ordinary-matting-matting-1 .ordinary-page-title h1 {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .ordinary-portrait-actions .ordinary-portrait-account {
    display: none;
  }

  .ordinary-portrait-nav {
    gap: 5px 8px;
    font-size: 12px;
  }

  .ordinary-portrait-nav a,
  .ordinary-portrait-nav button {
    height: 22px;
    padding: 0;
  }
}

/* Ordinary tool 04 desktop title spacing lock, 2026-06-28 */
@media (min-width: 901px) and (min-height: 901px) {
  .ordinary-blueprint-app-shell .ordinary-matting-matting-2 {
    grid-template-columns: 368px minmax(0, 1fr);
    gap: 22px;
    height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    overflow: hidden;
    padding: 72px 26px 20px;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-2 .ordinary-title {
    left: 30px;
    top: 26px;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-2 .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-matting-matting-2 .ordinary-preview-column {
    height: calc(100vh - 148px) !important;
    max-height: calc(100vh - 148px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-2 .ordinary-control {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-matting-matting-2 .ordinary-control-scroll {
    height: 100% !important;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding: 12px 16px 14px;
  }

  .ordinary-matting-matting-2 .ordinary-step {
    gap: 4px;
    margin-bottom: 5px;
    padding: 7px;
  }

  .ordinary-matting-matting-2 .ordinary-step-head {
    min-height: 22px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-grid {
    gap: 7px;
  }

  .ordinary-matting-matting-2 .product-matting-source,
  .ordinary-matting-matting-2 .product-matting-upload-drop {
    min-height: 96px;
  }

  .ordinary-matting-matting-2 .product-matting-source span {
    height: 88px;
  }

  .ordinary-matting-matting-2 .product-matting-source small {
    padding-bottom: 3px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-drop em {
    display: none;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-top: 4px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta strong {
    font-size: 13px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta span {
    font-size: 11px;
  }

  .ordinary-matting-matting-2 .product-matting-upload-meta .matting-upload-remove {
    position: static;
    transform: none;
  }

  .ordinary-matting-matting-2 .matting-range-row {
    grid-template-columns: 76px minmax(0, 1fr) 38px;
    gap: 7px;
    min-height: 20px;
  }

  .ordinary-matting-matting-2 .matting-range-row input {
    height: 18px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-presets,
  .ordinary-matting-matting-2 .product-matting-select-row {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 7px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-presets button,
  .ordinary-matting-matting-2 .product-matting-platforms button {
    height: 24px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-presets select,
  .ordinary-matting-matting-2 .product-matting-select-row select {
    height: 24px;
  }

  .ordinary-matting-matting-2 .product-matting-advanced-grid {
    gap: 4px;
  }

  .ordinary-matting-matting-2 .ordinary-actions {
    padding: 8px 16px 12px;
  }

  .ordinary-matting-matting-2 .ordinary-primary-action {
    height: 44px !important;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-list {
    gap: 12px;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-item {
    flex-basis: 118px;
    grid-template-rows: 116px auto;
    min-height: 168px;
  }

  .ordinary-matting-matting-2 .matting-records .tool-generation-thumb {
    height: 116px;
  }
}

/* Ordinary tool 04 product matting fidelity lock, 2026-06-28 */
.ordinary-product-matting-topbar .ordinary-blueprint-topbar-inner,
.ordinary-product-matting-topbar-inner {
  grid-template-columns: 122px minmax(0, 1fr) auto;
  gap: 32px;
}

.ordinary-product-matting-brand,
.ordinary-product-matting-brand span {
  color: #7a55f4;
}

.ordinary-product-matting-brand strong {
  color: #a84ff4;
}

.ordinary-product-matting-nav {
  justify-content: center;
  gap: clamp(34px, 4.1vw, 62px);
  color: #1f2740;
}

.ordinary-product-matting-nav a,
.ordinary-product-matting-nav button {
  padding: 0 8px;
  background: transparent;
}

.ordinary-product-matting-actions {
  gap: 10px;
}

.ordinary-product-matting-member,
.ordinary-product-matting-points,
.ordinary-product-matting-caret {
  border: 0;
  box-shadow: none;
}

.ordinary-product-matting-member {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  min-width: 108px;
  padding: 0 14px;
  border: 1px solid #f1d6ad;
  border-radius: 8px;
  color: #7a4c18;
  background: linear-gradient(180deg, #fff4df 0%, #fff8ed 100%);
  font-size: 14px;
  font-weight: 850;
}

.ordinary-product-matting-member span {
  width: 16px;
  height: 16px;
  background: #e99522;
  clip-path: polygon(50% 5%, 63% 39%, 96% 26%, 77% 60%, 86% 95%, 50% 78%, 14% 95%, 23% 60%, 4% 26%, 37% 39%);
}

.ordinary-product-matting-points {
  display: inline-grid;
  grid-template-columns: 18px auto 18px;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 118px;
  padding: 0 12px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(95deg, #6f55f6 0%, #8c55ef 44%, #ef58b4 100%);
  box-shadow: 0 10px 22px rgba(127, 86, 244, 0.2);
  font-size: 14px;
  font-weight: 900;
}

.ordinary-product-matting-points span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #7458f5;
  background: #fff;
}

.ordinary-product-matting-points span::before {
  width: 11px;
  height: 11px;
  background: currentColor;
  content: "";
  clip-path: polygon(50% 4%, 61% 35%, 94% 35%, 67% 54%, 78% 88%, 50% 68%, 22% 88%, 33% 54%, 6% 35%, 39% 35%);
}

.ordinary-product-matting-points strong {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.ordinary-product-matting-points em {
  color: #fff;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.ordinary-product-matting-caret {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 34px;
  color: #647089;
  background: transparent;
}

.ordinary-product-matting-caret::before {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

/* Ordinary tool 05 ID photo header and fidelity lock, 2026-06-28 */
.ordinary-blueprint-app-shell .ordinary-id-photo-topbar {
  height: 60px;
  border-bottom-color: #e4e9f2;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 12px rgba(35, 49, 78, 0.05);
}

.ordinary-id-photo-topbar .ordinary-blueprint-topbar-inner,
.ordinary-id-photo-topbar-inner {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 34px;
  width: min(1494px, calc(100% - 44px));
  height: 60px;
}

.ordinary-id-photo-brand {
  min-width: 112px;
  color: #674ff6;
  font-size: 26px;
  font-weight: 950;
}

.ordinary-id-photo-brand span {
  min-width: 0;
  color: inherit;
  font: inherit;
}

.ordinary-id-photo-brand strong {
  color: #9e4ff5;
  font-style: normal;
}

.ordinary-id-photo-nav {
  justify-content: flex-start;
  gap: clamp(28px, 3.6vw, 56px);
  color: #111827;
  font-size: 14px;
  font-weight: 760;
}

.ordinary-id-photo-nav a,
.ordinary-id-photo-nav button {
  height: 60px;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
}

.ordinary-id-photo-nav a.active-soft {
  color: #111827;
  background: transparent;
}

.ordinary-id-photo-nav a span {
  width: 7px;
  height: 7px;
  margin-left: 2px;
}

.ordinary-id-photo-actions {
  gap: 12px;
  height: 60px;
}

.ordinary-id-photo-points,
.ordinary-id-photo-recharge,
.ordinary-id-photo-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 850;
  box-shadow: none;
}

.ordinary-id-photo-points {
  gap: 8px;
  min-width: 114px;
  padding: 0 13px;
  border: 1px solid #e2e7f0;
  color: #5d4ff3;
  background: #fff;
}

.ordinary-id-photo-points span {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: #5b69f6;
  background: linear-gradient(135deg, #ffe9b2, #f6bb49);
}

.ordinary-id-photo-points span::before {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #fff4c5;
  box-shadow: 0 0 0 1px rgba(153, 93, 23, 0.18);
  content: "";
  transform: rotate(13deg);
}

.ordinary-id-photo-points strong {
  color: #5b4ff4;
  font-size: 14px;
  font-weight: 850;
}

.ordinary-id-photo-recharge {
  min-width: 80px;
  padding: 0 15px;
  border: 0;
  color: #fff;
  background: linear-gradient(95deg, #6d53f6 0%, #d653df 100%);
  box-shadow: 0 10px 18px rgba(115, 83, 246, 0.18);
}

.ordinary-id-photo-vip {
  display: inline-grid;
  grid-template-columns: 18px auto 12px;
  align-items: center;
  gap: 9px;
  min-width: 158px;
  padding: 0 15px;
  border: 1px solid #eadfcf;
  color: #5b3a13;
  background: #fffaf2;
}

.ordinary-id-photo-vip span {
  width: 18px;
  height: 18px;
  color: #e69a18;
  background: currentColor;
  clip-path: polygon(50% 6%, 62% 38%, 96% 26%, 78% 60%, 86% 94%, 50% 78%, 14% 94%, 22% 60%, 4% 26%, 38% 38%);
}

.ordinary-id-photo-vip strong {
  color: #4a351d;
  font-size: 14px;
  font-weight: 900;
}

.ordinary-id-photo-vip em {
  width: 7px;
  height: 7px;
  border: solid #8791a3;
  border-width: 0 1.6px 1.6px 0;
  font-style: normal;
  transform: translateY(-2px) rotate(45deg);
}

.ordinary-matting-matting-2 .product-matting-edge-buttons,
.ordinary-matting-matting-2 .product-matting-platforms {
  display: none;
}

.ordinary-matting-matting-2 .product-matting-edge-select,
.ordinary-matting-matting-2 .product-matting-platform-select select {
  display: block;
}

.ordinary-matting-matting-2 .product-matting-shadow-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.ordinary-matting-matting-2 .product-matting-shadow-row > span {
  color: #4a5568;
  font-size: 12px;
  font-weight: 700;
}

.ordinary-matting-matting-2 .product-matting-shadow-row b {
  color: #4b5568;
  font-size: 12px;
  font-weight: 750;
}

.ordinary-matting-matting-2 .product-matting-shadow-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ordinary-matting-matting-2 .product-matting-shadow-row i {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cbd3df;
}

.ordinary-matting-matting-2 .product-matting-shadow-row i::before {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  content: "";
}

.ordinary-matting-matting-2 .product-matting-shadow-row input:checked + i {
  background: #755cf5;
}

.ordinary-matting-matting-2 .product-matting-shadow-row input:checked + i::before {
  transform: translateX(16px);
}

.ordinary-matting-matting-2 .product-matting-setting-step .product-matting-advanced-grid {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #edf1f6;
}

.ordinary-matting-matting-2 .ordinary-product-page-head {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.product-matting-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.product-matting-page-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 128px;
  padding: 0 18px;
  border: 1px solid #d7e0ee;
  border-radius: 8px;
  color: #3d485c;
  background: rgba(255, 255, 255, 0.96);
  font-size: 14px;
  font-weight: 850;
  box-shadow: none;
}

.product-matting-page-actions button:last-child {
  border-color: #755cf5;
  color: #6d54f3;
  background: #fff;
}

.product-matting-page-actions i,
.product-matting-page-actions span {
  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
}

.product-matting-page-actions i {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 16V7.8l-3.2 3.2-1.4-1.4L12 4l5.6 5.6-1.4 1.4L13 7.8V16h-2Zm-6 4v-2h14v2H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 16V7.8l-3.2 3.2-1.4-1.4L12 4l5.6 5.6-1.4 1.4L13 7.8V16h-2Zm-6 4v-2h14v2H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.product-matting-page-actions span {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm0 6h16v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm0 6h16v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ordinary-matting-matting-2 .product-matting-preview-toolbar {
  justify-content: flex-start;
  min-height: 52px;
}

.ordinary-matting-matting-2 .matting-preview-workspace.is-stage {
  grid-template-rows: 52px minmax(0, 1fr) 80px;
}

.ordinary-matting-matting-2 .matting-preview-workspace.is-stage .matting-stage {
  margin: 0 18px 10px;
}

.product-matting-preview-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 2px;
  border: 1px solid #e2e8f2;
  border-radius: 8px;
  background: #f5f8fc;
}

.product-matting-preview-tabs button {
  height: 28px;
  padding: 0 15px;
  border: 0;
  border-radius: 6px;
  color: #6c7689;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
}

.product-matting-preview-tabs button.active {
  color: #6c52f4;
  background: #fff;
  box-shadow: 0 5px 14px rgba(40, 53, 92, 0.08);
}

.ordinary-matting-matting-2 .product-matting-upload-meta strong,
.ordinary-matting-matting-2 .product-matting-upload-meta span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 901px) and (min-height: 901px) {
  .ordinary-matting-matting-2 .product-matting-bg-inline {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .ordinary-matting-matting-2 .product-matting-bg-inline .matting-bg-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ordinary-matting-matting-2 .product-matting-bg-inline .matting-bg-tabs button,
  .ordinary-matting-matting-2 .product-matting-bg-inline .matting-bg-tabs button:not(.active) {
    display: inline-flex;
    min-height: 28px;
    height: 28px;
    padding: 0 7px;
    font-size: 11px;
    white-space: nowrap;
  }

  .ordinary-matting-matting-2 .product-matting-bg-inline .matting-bg-tabs button.active::after {
    display: none;
    content: "";
  }

  .ordinary-matting-matting-2 .product-matting-bg-inline .matting-bg-tabs i {
    width: 14px;
    height: 14px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-presets {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .ordinary-matting-matting-2 .product-matting-edge-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-buttons button {
    height: 28px;
  }

  .ordinary-matting-matting-2 .product-matting-edge-select {
    display: none;
  }

  .ordinary-matting-matting-2 .product-matting-platform-select {
    align-items: start;
  }

  .ordinary-matting-matting-2 .product-matting-platforms {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .ordinary-matting-matting-2 .product-matting-platforms button {
    height: 26px;
    padding: 0 5px;
    font-size: 10px;
    white-space: nowrap;
  }

  .ordinary-matting-matting-2 .product-matting-platform-select select {
    display: none;
  }

  .ordinary-matting-matting-2 .product-matting-shadow-row {
    grid-template-columns: 72px minmax(0, 1fr) 36px;
    min-height: 24px;
  }
}

@media (max-height: 900px) and (min-width: 901px) {
  .ordinary-matting-matting-2 .ordinary-product-page-head {
    top: 10px;
    right: 44px;
  }

  .product-matting-page-actions button {
    height: 36px;
    min-width: 92px;
    padding: 0 14px;
    font-size: 13px;
  }

  .product-matting-page-actions i,
  .product-matting-page-actions span {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-product-matting-topbar {
    height: auto;
  }

  .ordinary-blueprint-app-shell .ordinary-product-matting-topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "nav nav";
    align-items: center;
    row-gap: 8px;
    column-gap: 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8px 12px 9px;
    overflow: visible;
  }

  .ordinary-product-matting-brand {
    grid-area: brand;
    min-width: 0;
    font-size: 22px;
  }

  .ordinary-product-matting-nav {
    grid-area: nav;
    justify-content: flex-start;
    gap: 6px 18px;
    width: 100%;
    height: auto;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-product-matting-nav a {
    height: 24px;
    padding: 0 2px;
  }

  .ordinary-product-matting-actions {
    grid-area: actions;
    justify-self: end;
    gap: 6px;
    height: auto;
  }

  .ordinary-product-matting-member {
    min-width: 88px;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ordinary-product-matting-points {
    min-width: 84px;
    height: 30px;
    padding: 0 9px;
    grid-template-columns: 16px auto 14px;
    font-size: 12px;
  }

  .ordinary-product-matting-caret {
    display: none;
  }

  .ordinary-matting-matting-2 .ordinary-product-page-head {
    position: static;
    z-index: auto;
    display: flex;
    width: 100%;
    margin: 0;
  }

  .ordinary-matting-matting-2 .ordinary-title {
    position: static;
    left: auto;
    top: auto;
    margin: 0 0 12px;
  }

  .ordinary-matting-matting-2 .product-matting-page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

.ordinary-matting-matting-2 .product-matting-page-actions button {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }

  .ordinary-matting-matting-2 .matting-preview-workspace.is-stage {
    grid-template-rows: 52px minmax(320px, auto) auto;
  }
}

@media (max-width: 900px) {
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar {
    height: auto;
  }

  .ordinary-id-photo-topbar .ordinary-blueprint-topbar-inner,
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar-inner,
  .ordinary-id-photo-topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "nav nav";
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8px 12px 9px;
    overflow: visible;
  }

  .ordinary-id-photo-brand {
    grid-area: brand;
    min-width: 0;
    font-size: 22px;
  }

  .ordinary-id-photo-nav {
    grid-area: nav;
    justify-content: flex-start;
    gap: 6px 18px;
    width: 100%;
    height: auto;
    overflow: visible;
    font-size: 13px;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button {
    height: 24px;
    padding: 0 2px;
  }

  .ordinary-id-photo-actions {
    grid-area: actions;
    justify-self: end;
    gap: 6px;
    height: auto;
  }

  .ordinary-id-photo-points,
  .ordinary-id-photo-recharge,
  .ordinary-id-photo-vip {
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .ordinary-id-photo-points {
    min-width: 76px;
  }

  .ordinary-id-photo-recharge {
    min-width: 62px;
  }

  .ordinary-id-photo-vip {
    grid-template-columns: 15px auto 8px;
    gap: 6px;
    min-width: 70px;
    overflow-y: hidden;
  }
}

@media (max-width: 420px) {
  .ordinary-id-photo-topbar .ordinary-blueprint-topbar-inner,
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar-inner,
  .ordinary-id-photo-topbar-inner {
    gap: 8px;
    padding: 8px 10px 9px;
  }

  .ordinary-id-photo-actions {
    gap: 5px;
  }

  .ordinary-id-photo-points {
    min-width: 68px;
    padding: 0 6px;
  }

  .ordinary-id-photo-recharge {
    min-width: 56px;
    padding: 0 7px;
  }

  .ordinary-id-photo-vip {
    min-width: 60px;
    padding: 0 6px;
  }

  .ordinary-id-photo-nav {
    gap: 6px 14px;
  }
}

/* Ordinary tool 05 real 720px Chrome collision fix, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (max-height: 720px) {
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar,
  .ordinary-id-photo-topbar .ordinary-blueprint-topbar-inner,
  .ordinary-id-photo-topbar-inner {
    height: 52px;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button,
  .ordinary-id-photo-actions {
    height: 52px;
  }

  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    min-height: calc(100vh - 52px);
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .id-photo-blue-left,
  .id-photo-blue-main {
    max-height: calc(100vh - 64px);
  }

  .id-photo-blue-left {
    align-content: start;
    grid-template-rows: auto 38px;
  }

  .id-photo-blue-left-scroll {
    height: auto;
  }

  .id-photo-blue-actionbar {
    margin-top: 6px;
  }

  .id-photo-blue-main {
    grid-template-rows: minmax(0, 312px) 164px minmax(0, 16px);
    gap: 7px;
  }

  .id-photo-blue-result-card {
    overflow: hidden;
  }

  .id-photo-blue-result-grid {
    min-height: 0;
    align-items: stretch;
  }

  .id-photo-blueprint .id-photo-result-card {
    align-self: stretch;
    height: auto;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) 32px 28px;
    padding: 9px 10px;
  }

  .id-photo-result-card h3 {
    margin-bottom: 8px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 3px;
    padding-top: 5px;
  }

  .id-photo-blueprint .id-photo-result-meta div:nth-child(n+8) {
    display: none;
  }

  .id-photo-result-download,
  .id-photo-result-buttons {
    margin-top: 0;
  }

  .id-photo-result-download {
    height: 32px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 28px;
  }

  .id-photo-history {
    overflow: hidden;
  }

  .id-photo-blue-tip {
    margin-left: 12px;
  }
}

/* Ordinary tool 05 real Chrome design-proportion repair, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(348px, 372px) minmax(0, 1fr);
    gap: 18px;
    height: calc(100vh - 60px);
    min-height: 0;
    padding: 8px 22px 10px;
    overflow: hidden;
  }

  .id-photo-blue-left {
    align-content: start;
    grid-template-rows: auto 44px;
    max-height: none;
  }

  .id-photo-blue-left-scroll {
    height: auto;
    overflow: visible;
    padding-bottom: 0;
  }

  .id-photo-blue-title {
    min-height: 42px;
    gap: 10px;
    margin: 0 0 6px 4px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .id-photo-blue-title h1 {
    font-size: 20px;
    line-height: 1.04;
  }

  .id-photo-blue-title p {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.1;
  }

  .id-photo-blue-step {
    gap: 4px;
    margin-bottom: 4px;
    padding: 6px 9px;
  }

  .id-photo-blue-step-head {
    gap: 8px;
    min-height: 18px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .id-photo-blue-step-head strong {
    font-size: 14px;
    line-height: 1.08;
  }

  .id-photo-step-aside button {
    font-size: 11px;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-rows: 28px 13px;
    column-gap: 12px;
    row-gap: 2px;
  }

  .id-photo-upload-button {
    height: 28px;
    font-size: 12px;
  }

  .id-photo-upload-preview {
    width: 56px;
    height: 56px;
  }

  .id-photo-blue-upload small {
    font-size: 9.5px;
  }

  .id-photo-blue-colors {
    gap: 6px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 28px;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 9px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 27px;
  }

  .id-photo-size-current {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 11px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 6px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 25px 12px;
    gap: 2px;
    min-height: 41px;
    padding: 3px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 25px;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 9.5px;
    line-height: 13px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 4px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 9px;
    min-height: 18px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 64px minmax(0, 1fr) 34px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 11px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 22px;
    font-size: 10.5px;
  }

  .id-photo-print-tabs {
    gap: 7px;
    padding-left: 82px;
  }

  .id-photo-blue-actionbar {
    margin-top: 10px;
    padding: 0 4px;
  }

  .id-photo-generate-button {
    height: 44px !important;
    font-size: 15px;
  }

  .id-photo-blue-main {
    grid-template-rows: minmax(0, 390px) 250px 18px;
    gap: 10px;
    max-height: calc(100vh - 78px);
  }

  .id-photo-blue-result-card {
    grid-template-rows: 30px minmax(0, 1fr);
    padding: 14px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(246px, 268px);
    gap: 14px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(240px, 22vw, 276px);
    max-height: 352px;
  }

  .id-photo-blueprint .id-photo-result-card {
    align-self: stretch;
    height: auto;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) 38px 34px;
    padding: 12px;
  }

  .id-photo-result-card h3 {
    margin-bottom: 9px;
    font-size: 14px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 5px;
    padding-top: 6px;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    font-size: 11px;
  }

  .id-photo-result-download {
    height: 38px;
    margin-top: 6px;
    font-size: 14px;
  }

  .id-photo-result-buttons {
    gap: 8px;
    margin-top: 7px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 34px;
    font-size: 12px;
  }

  .id-photo-history {
    grid-template-rows: 32px minmax(0, 1fr);
    padding: 12px 16px;
    overflow: hidden;
  }

  .id-photo-history-head strong {
    font-size: 15px;
  }

  .id-photo-history-head div {
    gap: 18px;
    font-size: 12px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(148px, 166px);
    gap: 13px;
    padding-top: 6px;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 72px auto;
    gap: 6px;
    height: 154px;
    padding: 8px 10px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 66px;
    height: 72px;
  }

  .id-photo-blueprint .id-photo-history-copy {
    gap: 4px;
  }

  .id-photo-blueprint .id-photo-history-copy strong,
  .id-photo-blueprint .id-photo-history-copy small,
  .id-photo-history-more strong,
  .id-photo-history-more span {
    font-size: 11px;
    line-height: 1.18;
  }

  .id-photo-history-more i {
    width: 50px;
    height: 50px;
  }

  .id-photo-blue-tip {
    height: 18px;
    margin: 0 0 0 18px;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Ordinary tool 05 user Chrome spacious correction, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(348px, 360px) minmax(0, 1fr);
    gap: 18px;
    height: auto;
    min-height: 900px;
    padding: 18px 26px 22px;
    overflow: visible;
  }

  .id-photo-blue-left {
    grid-template-rows: auto 48px;
    max-height: none;
  }

  .id-photo-blue-left-scroll {
    height: auto;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 0;
  }

  .id-photo-blue-title {
    min-height: 50px;
    gap: 13px;
    margin-bottom: 11px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .id-photo-blue-title h1 {
    font-size: 24px;
    line-height: 1.08;
  }

  .id-photo-blue-title p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.18;
  }

  .id-photo-blue-step {
    gap: 6px;
    margin-bottom: 6px;
    padding: 8px 11px 7px;
  }

  .id-photo-blue-step-head {
    min-height: 22px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .id-photo-blue-step-head strong {
    font-size: 15px;
    line-height: 1.16;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-rows: 34px 16px;
    column-gap: 18px;
    row-gap: 4px;
  }

  .id-photo-upload-button {
    height: 34px;
    font-size: 13px;
  }

  .id-photo-upload-preview {
    width: 74px;
    height: 74px;
  }

  .id-photo-blue-upload small {
    font-size: 10.5px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 34px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 32px;
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 12px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 30px 14px;
    gap: 3px;
    min-height: 50px;
    padding: 4px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 30px;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 10.5px;
    line-height: 15px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 6px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 22px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 72px minmax(0, 1fr) 38px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 12px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 24px;
    font-size: 11.5px;
  }

  .id-photo-print-tabs {
    padding-left: 98px;
  }

  .id-photo-blue-actionbar {
    margin-top: 12px;
    padding: 0 4px;
  }

  .id-photo-generate-button {
    height: 48px !important;
    font-size: 16px;
  }

  .id-photo-blue-main {
    grid-template-rows: 430px 260px auto;
    gap: 14px;
    max-height: none;
    overflow: visible;
  }

  .id-photo-blue-result-card {
    grid-template-rows: 34px minmax(0, 1fr);
    padding: 16px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 14px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(286px, 24vw, 320px);
    max-height: 382px;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto minmax(0, 1fr) 44px 40px;
    padding: 14px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 8px;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    font-size: 12px;
  }

  .id-photo-result-download {
    height: 44px;
    font-size: 15px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 38px;
    font-size: 12px;
  }

  .id-photo-history {
    grid-template-rows: 34px minmax(0, 1fr);
    padding: 14px 16px;
  }

  .id-photo-history-head strong {
    font-size: 16px;
  }

  .id-photo-history-head div {
    gap: 20px;
    font-size: 13px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(156px, 176px);
    gap: 14px;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 92px auto;
    gap: 8px;
    height: 194px;
    padding: 10px 12px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 84px;
    height: 92px;
  }

  .id-photo-blueprint .id-photo-history-copy strong,
  .id-photo-blueprint .id-photo-history-copy small,
  .id-photo-history-more strong,
  .id-photo-history-more span {
    font-size: 12px;
    line-height: 1.22;
  }

  .id-photo-blue-tip {
    height: auto;
    margin-top: 2px;
    font-size: 12px;
  }
}

/* Ordinary tool 05 real Chrome spacious correction v10, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell,
  .ordinary-blueprint-app-shell .page-shell,
  .ordinary-blueprint-app-shell .page-content {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar,
  .ordinary-id-photo-topbar .ordinary-blueprint-topbar-inner,
  .ordinary-id-photo-topbar-inner {
    height: 60px;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button,
  .ordinary-id-photo-actions {
    height: 60px;
  }

  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(376px, 392px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    height: auto;
    min-height: 0;
    padding: 24px 28px 34px;
    overflow: visible;
  }

  .id-photo-blue-left {
    grid-template-rows: auto auto;
    max-height: none;
    overflow: visible;
  }

  .id-photo-blue-left-scroll {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 0;
  }

  .id-photo-blue-title {
    min-height: 58px;
    gap: 14px;
    margin: 0 0 12px 4px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .id-photo-blue-title h1 {
    font-size: 25px;
    line-height: 1.12;
  }

  .id-photo-blue-title p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.28;
  }

  .id-photo-blue-step {
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
  }

  .id-photo-blue-step-head {
    gap: 9px;
    min-height: 22px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .id-photo-blue-step-head strong {
    font-size: 15px;
    line-height: 1.18;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 82px;
    grid-template-rows: 38px 18px;
    column-gap: 18px;
    row-gap: 5px;
  }

  .id-photo-upload-button {
    height: 38px;
    font-size: 13px;
  }

  .id-photo-upload-preview {
    width: 80px;
    height: 80px;
    border-radius: 6px;
  }

  .id-photo-blue-upload small {
    font-size: 11px;
    line-height: 1.25;
  }

  .id-photo-blue-colors {
    gap: 10px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 42px;
    border-radius: 7px;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 12px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 36px;
    border-radius: 7px;
  }

  .id-photo-size-current {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 0 12px;
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 12px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 10px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 38px 16px;
    gap: 4px;
    min-height: 62px;
    padding: 4px;
    border-radius: 7px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 38px;
    border-radius: 5px;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 11px;
    line-height: 16px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 8px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    min-height: 26px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 76px minmax(0, 1fr) 42px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 12px;
    line-height: 1.2;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
  }

  .id-photo-print-tabs {
    gap: 10px;
    padding-left: 104px;
  }

  .id-photo-switch-row {
    min-height: 22px;
  }

  .id-photo-switch-row i {
    width: 34px;
    height: 19px;
  }

  .id-photo-switch-row i::before {
    width: 15px;
    height: 15px;
  }

  .id-photo-switch-row input:checked + i::before {
    transform: translateX(15px);
  }

  .id-photo-blue-actionbar {
    margin-top: 8px;
    padding: 0 4px;
  }

  .id-photo-generate-button {
    height: 48px !important;
    font-size: 16px;
  }

  .id-photo-blue-main {
    grid-template-rows: auto auto auto;
    gap: 18px;
    max-height: none;
    overflow: visible;
  }

  .id-photo-blue-result-card {
    grid-template-rows: 34px minmax(0, 1fr);
    min-height: 560px;
    padding: 18px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(268px, 286px);
    gap: 16px;
  }

  .id-photo-blue-canvas {
    min-height: 492px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(300px, 25vw, 334px);
    max-height: 434px;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto minmax(0, 1fr) 46px 40px;
    padding: 16px;
  }

  .id-photo-result-card h3 {
    margin-bottom: 12px;
    font-size: 15px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 9px;
    padding-top: 8px;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    gap: 8px;
    font-size: 12px;
  }

  .id-photo-result-download {
    height: 46px;
    margin-top: 8px;
    font-size: 15px;
  }

  .id-photo-result-buttons {
    gap: 10px;
    margin-top: 8px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 40px;
    font-size: 12px;
  }

  .id-photo-history {
    grid-template-rows: 34px auto;
    min-height: 234px;
    padding: 16px 18px;
    overflow: visible;
  }

  .id-photo-history-head strong {
    font-size: 16px;
  }

  .id-photo-history-head div {
    gap: 22px;
    font-size: 13px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(166px, 184px);
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0 2px;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 102px auto;
    gap: 9px;
    height: 186px;
    padding: 10px 12px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 92px;
    height: 102px;
  }

  .id-photo-blueprint .id-photo-history-copy {
    gap: 5px;
  }

  .id-photo-blueprint .id-photo-history-copy strong,
  .id-photo-blueprint .id-photo-history-copy small,
  .id-photo-history-more strong,
  .id-photo-history-more span {
    font-size: 12px;
    line-height: 1.25;
  }

  .id-photo-history-more i {
    width: 54px;
    height: 54px;
  }

  .id-photo-blue-tip {
    height: auto;
    margin: 0 0 0 20px;
    overflow: visible;
    font-size: 12px;
    white-space: normal;
  }
}

/* Ordinary tool 05 real Chrome balanced visible layout v11, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(368px, 382px) minmax(0, 1fr);
    gap: 22px;
    padding: 20px 26px 30px;
  }

  .id-photo-blue-title {
    min-height: 52px;
    margin-bottom: 10px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .id-photo-blue-title h1 {
    font-size: 24px;
  }

  .id-photo-blue-step {
    gap: 7px;
    margin-bottom: 8px;
    padding: 9px 11px;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 78px;
    grid-template-rows: 36px 17px;
    column-gap: 16px;
  }

  .id-photo-upload-preview {
    width: 76px;
    height: 76px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 38px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 34px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 35px 15px;
    min-height: 56px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 35px;
  }

  .id-photo-blue-step:nth-of-type(5),
  .id-photo-blue-step:nth-of-type(6) {
    gap: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 6px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    min-height: 23px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 25px;
  }

  .id-photo-print-tabs {
    padding-left: 98px;
  }

  .id-photo-blue-actionbar {
    margin-top: 6px;
  }

  .id-photo-generate-button {
    height: 46px !important;
  }

  .id-photo-blue-main {
    gap: 14px;
  }

  .id-photo-blue-result-card {
    min-height: 462px;
    padding: 16px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(258px, 276px);
    gap: 14px;
  }

  .id-photo-blue-canvas {
    min-height: 392px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(276px, 22vw, 306px);
    max-height: 366px;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto minmax(0, 1fr) 42px 38px;
    padding: 14px;
  }

  .id-photo-result-card h3 {
    margin-bottom: 10px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 7px;
    padding-top: 7px;
  }

  .id-photo-result-download {
    height: 42px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 37px;
  }

  .id-photo-history {
    min-height: 214px;
    padding: 14px 16px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(158px, 176px);
    gap: 14px;
    padding-top: 7px;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 92px auto;
    gap: 8px;
    height: 172px;
    padding: 9px 11px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 84px;
    height: 92px;
  }
}

/* Ordinary tool 05 real Chrome 768px viewport balance v12, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 780px) {
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar,
  .ordinary-id-photo-topbar .ordinary-blueprint-topbar-inner,
  .ordinary-id-photo-topbar-inner {
    height: 56px;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button,
  .ordinary-id-photo-actions {
    height: 56px;
  }

  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(350px, 368px) minmax(0, 1fr);
    gap: 18px;
    padding: 12px 24px 24px;
  }

  .id-photo-blue-left {
    grid-template-rows: auto 44px;
  }

  .id-photo-blue-title {
    min-height: 46px;
    gap: 11px;
    margin: 0 0 8px 2px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .id-photo-blue-title .ordinary-title-icon::before {
    width: 24px;
    height: 24px;
  }

  .id-photo-blue-title h1 {
    font-size: 22px;
    line-height: 1.08;
  }

  .id-photo-blue-title p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.16;
  }

  .id-photo-blue-step {
    gap: 5px;
    margin-bottom: 5px;
    padding: 7px 10px;
  }

  .id-photo-blue-step-head {
    gap: 8px;
    min-height: 19px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .id-photo-blue-step-head strong {
    font-size: 14px;
    line-height: 1.12;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 66px;
    grid-template-rows: 32px 14px;
    column-gap: 12px;
    row-gap: 3px;
  }

  .id-photo-upload-button {
    height: 32px;
    font-size: 12px;
  }

  .id-photo-upload-preview {
    width: 64px;
    height: 64px;
    border-radius: 6px;
  }

  .id-photo-blue-upload small {
    font-size: 10px;
    line-height: 1.12;
  }

  .id-photo-blue-colors {
    gap: 8px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 34px;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 31px;
  }

  .id-photo-size-current {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 11.5px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 7px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 30px 14px;
    gap: 3px;
    min-height: 50px;
    padding: 3px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 30px;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 10px;
    line-height: 14px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 4px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 9px;
    min-height: 20px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 66px minmax(0, 1fr) 34px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 11px;
    line-height: 1.12;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 22px;
    font-size: 10.5px;
  }

  .id-photo-print-tabs {
    gap: 8px;
    padding-left: 86px;
  }

  .id-photo-print-tabs i {
    top: -7px;
    padding: 1px 4px;
    font-size: 8px;
  }

  .id-photo-switch-row {
    min-height: 18px;
  }

  .id-photo-switch-row i {
    width: 30px;
    height: 17px;
  }

  .id-photo-switch-row i::before {
    width: 13px;
    height: 13px;
  }

  .id-photo-switch-row input:checked + i::before {
    transform: translateX(13px);
  }

  .id-photo-blue-actionbar {
    margin-top: 4px;
    padding: 0 3px;
  }

  .id-photo-generate-button {
    height: 44px !important;
    font-size: 15px;
  }

  .id-photo-blue-main {
    gap: 12px;
  }

  .id-photo-blue-result-card {
    min-height: 438px;
    padding: 14px;
  }

  .id-photo-blue-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(246px, 268px);
    gap: 12px;
  }

  .id-photo-blue-canvas {
    min-height: 370px;
  }

  .id-photo-blueprint .id-photo-output-preview {
    width: clamp(258px, 21vw, 288px);
    max-height: 342px;
  }

  .id-photo-blueprint .id-photo-result-card {
    grid-template-rows: auto minmax(0, 1fr) 40px 36px;
    padding: 13px;
  }

  .id-photo-result-card h3 {
    margin-bottom: 9px;
    font-size: 14px;
  }

  .id-photo-blueprint .id-photo-result-meta {
    gap: 6px;
    padding-top: 6px;
  }

  .id-photo-blueprint .id-photo-result-meta div,
  .id-photo-blueprint .id-photo-result-meta strong {
    font-size: 11.5px;
  }

  .id-photo-result-download {
    height: 40px;
    font-size: 14px;
  }

  .id-photo-result-buttons .ghost-btn {
    height: 36px;
  }

  .id-photo-history {
    min-height: 204px;
    padding: 13px 15px;
  }

  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(150px, 166px);
    gap: 12px;
    padding-top: 6px;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    grid-template-rows: 84px auto;
    gap: 7px;
    height: 160px;
    padding: 8px 10px;
  }

  .id-photo-blueprint .id-photo-history-thumb {
    width: 78px;
    height: 84px;
  }
}

/* Ordinary tool 05 real Chrome left-column unclutter pass v14, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(342px, 360px) minmax(0, 1fr);
    gap: 16px;
    padding-top: 10px;
  }

  .id-photo-blue-left {
    grid-template-rows: auto 42px;
  }

  .id-photo-blue-title {
    min-height: 40px;
    gap: 10px;
    margin-bottom: 6px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .id-photo-blue-title h1 {
    font-size: 20px;
  }

  .id-photo-blue-title p {
    margin-top: 2px;
    font-size: 11px;
  }

  .id-photo-blue-step {
    gap: 4px;
    margin-bottom: 4px;
    padding: 6px 9px;
  }

  .id-photo-blue-step-head {
    min-height: 18px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
    font-size: 10px;
  }

  .id-photo-blue-step-head strong {
    font-size: 13px;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-rows: 28px 13px;
    column-gap: 10px;
    row-gap: 2px;
  }

  .id-photo-upload-button {
    height: 28px;
    font-size: 11.5px;
  }

  .id-photo-upload-preview {
    width: 56px;
    height: 56px;
  }

  .id-photo-blue-upload small {
    font-size: 9.5px;
  }

  .id-photo-blue-colors {
    gap: 7px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 30px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 28px;
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 10.5px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 6px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 26px 13px;
    gap: 2px;
    min-height: 44px;
    padding: 3px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 26px;
  }

  .id-photo-blue-step:nth-of-type(5),
  .id-photo-blue-step:nth-of-type(6) {
    gap: 3px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 3px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 17px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 58px minmax(0, 1fr) 30px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 10px;
  }

  .id-photo-retouch-row input[type="range"] {
    height: 4px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 19px;
    font-size: 9.5px;
  }

  .id-photo-print-tabs {
    gap: 7px;
    padding-left: 70px;
  }

  .id-photo-switch-row {
    min-height: 16px;
  }

  .id-photo-switch-row i {
    width: 28px;
    height: 15px;
  }

  .id-photo-switch-row i::before {
    width: 11px;
    height: 11px;
  }

  .id-photo-switch-row input:checked + i::before {
    transform: translateX(13px);
  }

  .id-photo-blue-actionbar {
    margin-top: 3px;
  }

  .id-photo-generate-button {
    height: 40px !important;
    font-size: 14px;
  }

  .id-photo-generate-button em {
    height: 20px;
    padding: 0 9px;
    font-size: 11px;
  }
}

/* Ordinary tool 05 real Chrome comfortable left panel v15, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(374px, 392px) minmax(0, 1fr);
    gap: 20px;
    padding: 14px 24px 24px;
  }

  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 48px;
    height: calc(100vh - 82px);
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .id-photo-blue-left-scroll {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 8px 86px 0;
    scrollbar-gutter: stable;
  }

  .id-photo-blue-title {
    min-height: 52px;
    gap: 13px;
    margin: 0 0 10px 4px;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .id-photo-blue-title .ordinary-title-icon::before {
    width: 27px;
    height: 27px;
  }

  .id-photo-blue-title h1 {
    font-size: 24px;
    line-height: 1.1;
  }

  .id-photo-blue-title p {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.22;
  }

  .id-photo-blue-step {
    gap: 7px;
    margin-bottom: 8px;
    padding: 9px 11px;
  }

  .id-photo-blue-step-head {
    min-height: 22px;
  }

  .id-photo-blue-step-head b {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .id-photo-blue-step-head strong {
    font-size: 15px;
    line-height: 1.16;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-rows: 34px 16px;
    column-gap: 16px;
    row-gap: 4px;
  }

  .id-photo-upload-button {
    height: 34px;
    font-size: 13px;
  }

  .id-photo-upload-preview {
    width: 74px;
    height: 74px;
    border-radius: 7px;
  }

  .id-photo-blue-upload small {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .id-photo-blue-colors {
    gap: 9px;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 38px;
    border-radius: 7px;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 11px;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 34px;
    border-radius: 7px;
  }

  .id-photo-size-current {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 0 12px;
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 12px;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 8px;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 34px 15px;
    gap: 3px;
    min-height: 56px;
    padding: 4px;
    border-radius: 7px;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 34px;
    border-radius: 5px;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 10.5px;
    line-height: 15px;
  }

  .id-photo-blue-step:nth-of-type(5),
  .id-photo-blue-step:nth-of-type(6) {
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 6px;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    min-height: 22px;
  }

  .id-photo-retouch-row {
    grid-template-columns: 72px minmax(0, 1fr) 38px;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 12px;
    line-height: 1.16;
  }

  .id-photo-retouch-row input[type="range"] {
    height: 5px;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 25px;
    font-size: 11.5px;
  }

  .id-photo-print-tabs {
    gap: 9px;
    padding-left: 96px;
  }

  .id-photo-switch-row {
    min-height: 20px;
  }

  .id-photo-switch-row i {
    width: 32px;
    height: 18px;
  }

  .id-photo-switch-row i::before {
    width: 14px;
    height: 14px;
  }

  .id-photo-switch-row input:checked + i::before {
    transform: translateX(14px);
  }

  .id-photo-blue-actionbar {
    align-self: end;
    margin-top: 8px;
    padding: 0 4px;
    background: linear-gradient(180deg, rgba(243, 247, 253, 0), #f3f7fd 28%, #f3f7fd 100%);
  }

  .id-photo-generate-button {
    height: 46px !important;
    font-size: 16px;
  }

  .id-photo-generate-button em {
    height: 22px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* Ordinary tool 05 real Chrome final left comfort lock v17, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(376px, 394px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 20px !important;
    padding: 14px 24px 24px !important;
  }

  .id-photo-blue-left {
    display: grid !important;
    grid-template-rows: minmax(0, calc(100vh - 154px)) 50px !important;
    align-content: start !important;
    height: calc(100vh - 84px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left-scroll {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 16px 0 !important;
    scrollbar-gutter: stable !important;
  }

  .id-photo-blue-actionbar {
    position: relative !important;
    z-index: 2 !important;
    align-self: stretch !important;
    margin: 8px 0 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
  }

  .id-photo-generate-button {
    height: 48px !important;
    font-size: 16px !important;
  }

  .id-photo-blue-step {
    margin-bottom: 8px !important;
  }
}

/* Ordinary tool 05 real Chrome left spacious lock v18, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(384px, 404px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 22px !important;
    height: calc(100vh - 60px) !important;
    min-height: 0 !important;
    padding: 14px 24px 20px !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 58px !important;
    align-content: stretch !important;
    height: calc(100vh - 94px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left-scroll {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 14px 0 !important;
    scrollbar-gutter: stable !important;
  }

  .id-photo-blue-title {
    min-height: 56px !important;
    gap: 14px !important;
    margin: 0 0 12px 4px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  .id-photo-blue-title h1 {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  .id-photo-blue-title p {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
  }

  .id-photo-blue-step {
    gap: 7px !important;
    margin: 0 0 10px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
  }

  .id-photo-blue-step-head {
    gap: 9px !important;
    min-height: 22px !important;
  }

  .id-photo-blue-step-head b {
    flex-basis: 20px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }

  .id-photo-blue-step-head strong {
    font-size: 15px !important;
    line-height: 1.16 !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    grid-template-rows: 34px 16px !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
  }

  .id-photo-upload-button {
    height: 34px !important;
    font-size: 13px !important;
  }

  .id-photo-upload-preview {
    width: 74px !important;
    height: 74px !important;
    border-radius: 7px !important;
  }

  .id-photo-blue-upload small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .id-photo-blue-colors {
    gap: 9px !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 38px !important;
    border-radius: 7px !important;
  }

  .id-photo-size-row {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 11px !important;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 34px !important;
    border-radius: 7px !important;
  }

  .id-photo-size-current {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 0 12px !important;
  }

  .id-photo-size-current strong,
  .id-photo-size-current span {
    font-size: 12px !important;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 8px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 34px 15px !important;
    gap: 3px !important;
    min-height: 56px !important;
    padding: 4px !important;
    border-radius: 7px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 34px !important;
    border-radius: 5px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 10.5px !important;
    line-height: 15px !important;
  }

  .id-photo-blue-step:nth-of-type(5),
  .id-photo-blue-step:nth-of-type(6) {
    gap: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 6px !important;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 22px !important;
  }

  .id-photo-retouch-row {
    grid-template-columns: 72px minmax(0, 1fr) 38px !important;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 12px !important;
    line-height: 1.16 !important;
  }

  .id-photo-retouch-row input[type="range"] {
    height: 5px !important;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 25px !important;
    font-size: 11.5px !important;
  }

  .id-photo-print-tabs {
    gap: 9px !important;
    padding-left: 96px !important;
  }

  .id-photo-switch-row {
    min-height: 20px !important;
  }

  .id-photo-switch-row i {
    width: 32px !important;
    height: 18px !important;
  }

  .id-photo-switch-row i::before {
    width: 14px !important;
    height: 14px !important;
  }

  .id-photo-switch-row input:checked + i::before {
    transform: translateX(14px) !important;
  }

  .id-photo-blue-actionbar {
    position: relative !important;
    z-index: 2 !important;
    align-self: end !important;
    margin: 10px 0 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
  }

  .id-photo-generate-button {
    height: 48px !important;
    font-size: 16px !important;
  }

  .id-photo-generate-button em {
    height: 22px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* Ordinary tool 05 real Chrome left spacious lock v19, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar,
  .ordinary-blueprint-app-shell .ordinary-id-photo-topbar-inner,
  .ordinary-id-photo-topbar .ordinary-blueprint-topbar-inner {
    height: 56px !important;
  }

  .ordinary-id-photo-nav a,
  .ordinary-id-photo-nav button,
  .ordinary-id-photo-actions {
    height: 56px !important;
  }

  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(376px, 392px) minmax(0, 1fr) !important;
    gap: 20px !important;
    height: calc(100vh - 56px) !important;
    padding: 10px 24px 16px !important;
  }

  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 54px !important;
    height: calc(100vh - 82px) !important;
  }

  .id-photo-blue-left-scroll {
    padding: 0 8px 12px 0 !important;
  }

  .id-photo-blue-title {
    min-height: 52px !important;
    margin-bottom: 10px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
  }

  .id-photo-blue-step {
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding: 8px 11px !important;
  }

  .id-photo-upload-preview {
    width: 72px !important;
    height: 72px !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 74px !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 36px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 32px 15px !important;
    min-height: 54px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 32px !important;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 5px !important;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    min-height: 21px !important;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 24px !important;
  }

  .id-photo-blue-actionbar {
    margin-top: 8px !important;
  }

  .id-photo-generate-button {
    height: 46px !important;
  }
}

/* Ordinary tool 05 real Chrome left spacious lock v20, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(374px, 390px) minmax(0, 1fr) !important;
    padding-top: 8px !important;
    padding-bottom: 14px !important;
  }

  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 52px !important;
    height: calc(100vh - 78px) !important;
  }

  .id-photo-blue-left-scroll {
    padding: 0 8px 10px 0 !important;
  }

  .id-photo-blue-title {
    min-height: 40px !important;
    margin-bottom: 5px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .id-photo-blue-title h1 {
    font-size: 22px !important;
  }

  .id-photo-blue-title p {
    margin-top: 2px !important;
    font-size: 12px !important;
  }

  .id-photo-blue-step {
    margin-bottom: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .id-photo-blue-step-head {
    min-height: 19px !important;
  }

  .id-photo-upload-button {
    height: 30px !important;
  }

  .id-photo-upload-preview {
    width: 52px !important;
    height: 52px !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    grid-template-rows: 28px 11px !important;
    row-gap: 2px !important;
  }

  .id-photo-blue-upload small {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 28px !important;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 28px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 24px 12px !important;
    min-height: 42px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 24px !important;
  }

  .id-photo-blue-step:nth-of-type(5) {
    gap: 3px !important;
  }

  .id-photo-blue-step:nth-of-type(6),
  .id-photo-print-step {
    gap: 3px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .id-photo-retouch-panel {
    gap: 4px !important;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion {
    min-height: 18px !important;
  }

  .id-photo-print-panel {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 6px 10px !important;
    align-items: center;
  }

  .id-photo-print-tabs {
    grid-column: 1 / -1;
    gap: 8px !important;
    padding-left: 92px !important;
  }

  .id-photo-paper-select {
    display: contents !important;
  }

  .id-photo-paper-select span {
    grid-column: 1;
  }

  .id-photo-paper-select select {
    grid-column: 2;
    width: 100%;
    height: 23px !important;
  }

  .id-photo-print-step .id-photo-switch-row {
    grid-column: 1 / -1;
    min-height: 18px !important;
  }

  .id-photo-blue-actionbar {
    margin-top: 5px !important;
  }

  .id-photo-generate-button {
    height: 40px !important;
  }
}

/* Ordinary tool 05 real Chrome left bottom clearance v21, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 48px !important;
    height: calc(100vh - 76px) !important;
  }

  .id-photo-blue-left-scroll {
    padding: 0 8px 6px 0 !important;
  }

  .id-photo-blue-title {
    min-height: 38px !important;
    margin-bottom: 4px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .id-photo-blue-step {
    gap: 3px !important;
    margin-bottom: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .id-photo-upload-button {
    height: 28px !important;
  }

  .id-photo-upload-preview {
    width: 48px !important;
    height: 48px !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 50px !important;
    grid-template-rows: 28px 10px !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more,
  .id-photo-size-current,
  .id-photo-more-size {
    height: 26px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 22px 12px !important;
    min-height: 39px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 22px !important;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion {
    min-height: 16px !important;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 22px !important;
  }

  .id-photo-print-step .id-photo-switch-row {
    min-height: 17px !important;
  }

  .id-photo-blue-actionbar {
    margin-top: 4px !important;
  }

  .id-photo-generate-button {
    height: 38px !important;
  }
}

/* Ordinary tool 05 real Chrome left bottom clearance v22, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 42px !important;
    height: calc(100vh - 72px) !important;
  }

  .id-photo-blue-left-scroll {
    padding: 0 8px 36px 0 !important;
  }

  .id-photo-blue-title {
    min-height: 34px !important;
    margin-bottom: 3px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .id-photo-blue-title .panel-title {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  .id-photo-blue-title p {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .id-photo-blue-step {
    gap: 2px !important;
    margin-bottom: 3px !important;
    padding: 4px 12px !important;
  }

  .id-photo-blue-step .ordinary-step-head {
    min-height: 18px !important;
  }

  .id-photo-blue-step .ordinary-step-head strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  .id-photo-upload-button {
    height: 26px !important;
  }

  .id-photo-upload-preview {
    width: 46px !important;
    height: 46px !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 48px !important;
    grid-template-rows: 26px 10px !important;
    min-height: 46px !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more,
  .id-photo-size-current,
  .id-photo-more-size {
    height: 24px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 20px 11px !important;
    min-height: 36px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 20px !important;
  }

  .id-photo-retouch-panel {
    gap: 2px !important;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion {
    min-height: 15px !important;
  }

  .id-photo-print-panel {
    gap: 4px 10px !important;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 20px !important;
  }

  .id-photo-print-step .id-photo-switch-row {
    min-height: 16px !important;
  }

  .id-photo-blue-actionbar {
    margin-top: 2px !important;
  }

  .id-photo-generate-button {
    height: 36px !important;
  }
}

/* Ordinary tool 05 real Chrome 1536x937 left clearance lock v23, 2026-06-28 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 861px) and (max-height: 980px) {
  .ordinary-blueprint-app-shell .id-photo-blueprint,
  .id-photo-blueprint {
    grid-template-columns: minmax(374px, 390px) minmax(0, 1fr) !important;
    gap: 20px !important;
    height: calc(100vh - 60px) !important;
    min-height: 0 !important;
    padding: 12px 24px 16px !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 44px !important;
    height: calc(100vh - 88px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left-scroll {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 36px 0 !important;
    scrollbar-gutter: stable !important;
  }

  .id-photo-blue-title {
    min-height: 36px !important;
    gap: 10px !important;
    margin: 0 0 4px 4px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .id-photo-blue-title .ordinary-title-icon::before {
    width: 20px !important;
    height: 20px !important;
  }

  .id-photo-blue-title h1 {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }

  .id-photo-blue-title p {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  .id-photo-blue-step {
    gap: 3px !important;
    margin-bottom: 4px !important;
    padding: 5px 11px !important;
  }

  .id-photo-blue-step-head {
    gap: 8px !important;
    min-height: 18px !important;
  }

  .id-photo-blue-step-head b {
    flex-basis: 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
  }

  .id-photo-blue-step-head strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  .id-photo-upload-button {
    height: 28px !important;
    font-size: 12px !important;
  }

  .id-photo-upload-preview {
    width: 48px !important;
    height: 48px !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 50px !important;
    grid-template-rows: 28px 10px !important;
    column-gap: 14px !important;
    row-gap: 2px !important;
  }

  .id-photo-blue-upload small {
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .id-photo-blue-colors {
    gap: 7px !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more,
  .id-photo-size-current,
  .id-photo-more-size {
    height: 26px !important;
  }

  .id-photo-blueprint .id-photo-outfit-primary {
    gap: 7px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 22px 12px !important;
    gap: 2px !important;
    min-height: 39px !important;
    padding: 3px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 22px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option em,
  .id-photo-blueprint .id-photo-outfit-more,
  .id-photo-blueprint .id-photo-outfit-more em {
    font-size: 10px !important;
    line-height: 12px !important;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 3px !important;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 16px !important;
  }

  .id-photo-retouch-row {
    grid-template-columns: 72px minmax(0, 1fr) 36px !important;
  }

  .id-photo-retouch-row span,
  .id-photo-dermabrasion span,
  .id-photo-paper-select span,
  .id-photo-switch-row span,
  .id-photo-retouch-row strong {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 21px !important;
    font-size: 11px !important;
  }

  .id-photo-print-tabs {
    gap: 8px !important;
    padding-left: 88px !important;
  }

  .id-photo-paper-select {
    display: contents !important;
  }

  .id-photo-paper-select span {
    grid-column: 1 !important;
  }

  .id-photo-paper-select select {
    grid-column: 2 !important;
    width: 100% !important;
  }

  .id-photo-print-step .id-photo-switch-row {
    grid-column: 1 / -1 !important;
    min-height: 17px !important;
  }

  .id-photo-blue-actionbar {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 4px !important;
    padding: 0 4px !important;
  }

  .id-photo-generate-button {
    height: 38px !important;
    font-size: 15px !important;
  }
}

/* Ordinary tool 06 amplify result actions lock v1, 2026-06-28 */
.ordinary-blueprint-amplify .enhance-preview-amplify .amplify-download-btn.primary-btn,
.ordinary-blueprint-amplify .enhance-preview-amplify .amplify-download-btn {
  position: absolute !important;
  left: auto !important;
  right: 146px !important;
  bottom: 18px !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 104px !important;
  max-width: 132px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: linear-gradient(100deg, #6d55f2, #ec4fb0) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(93, 67, 225, 0.22) !important;
  transform: none !important;
}

/* Ordinary tool 08 colorize left-panel clearance lock v1, 2026-06-28 */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-colorize,
  .ordinary-workbench.ordinary-blueprint-colorize {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-control,
  .ordinary-blueprint-colorize .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-colorize .ordinary-control-scroll,
  .ordinary-blueprint-colorize .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-colorize .ordinary-actions {
    flex: 0 0 auto !important;
    padding: 10px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .ordinary-blueprint-colorize .ordinary-primary-action {
    height: 46px !important;
    min-height: 46px !important;
  }
}

@media (min-width: 901px) and (max-height: 980px) {
  .ordinary-blueprint-colorize .ordinary-step {
    gap: 7px !important;
    margin-bottom: 7px !important;
    padding: 9px 12px !important;
  }

  .ordinary-blueprint-colorize .ordinary-title {
    margin-bottom: 8px !important;
  }

  .ordinary-blueprint-colorize .enhance-upload-card {
    min-height: 74px !important;
    padding: 7px !important;
  }

  .ordinary-blueprint-colorize .enhance-upload-thumb {
    width: 72px !important;
    height: 52px !important;
  }

  .ordinary-blueprint-colorize .enhance-upload-card strong,
  .ordinary-blueprint-colorize .enhance-upload-card small {
    line-height: 1.15 !important;
  }

  .ordinary-blueprint-colorize .blueprint-chip-list,
  .ordinary-blueprint-colorize .enhance-output-grid,
  .ordinary-blueprint-colorize .enhance-format-tabs {
    gap: 6px !important;
  }

  .ordinary-blueprint-colorize .blueprint-chip-list button,
  .ordinary-blueprint-colorize .enhance-output-grid button,
  .ordinary-blueprint-colorize .enhance-format-tabs button {
    min-height: 28px !important;
    font-size: 12px !important;
  }

  .ordinary-blueprint-colorize .blueprint-range-row,
  .ordinary-blueprint-colorize .blueprint-switch-row {
    min-height: 25px !important;
  }
}

/* Ordinary tool 09 anime-detail left-panel clearance lock v1, 2026-06-28 */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-anime,
  .ordinary-workbench.ordinary-blueprint-anime {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-control,
  .ordinary-blueprint-anime .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-anime .ordinary-control-scroll,
  .ordinary-blueprint-anime .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-anime .ordinary-actions {
    flex: 0 0 auto !important;
    padding: 10px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .ordinary-blueprint-anime .ordinary-primary-action {
    height: 46px !important;
    min-height: 46px !important;
  }
}

@media (min-width: 901px) and (max-height: 980px) {
  .ordinary-blueprint-anime .ordinary-step {
    gap: 6px !important;
    margin-bottom: 7px !important;
    padding: 8px 12px !important;
  }

  .ordinary-blueprint-anime .ordinary-title {
    margin-bottom: 8px !important;
  }

  .ordinary-blueprint-anime .enhance-upload-card {
    min-height: 72px !important;
    padding: 7px !important;
  }

  .ordinary-blueprint-anime .enhance-upload-thumb {
    width: 72px !important;
    height: 52px !important;
  }

  .ordinary-blueprint-anime .blueprint-range-row,
  .ordinary-blueprint-anime .blueprint-switch-row {
    min-height: 24px !important;
  }

  .ordinary-blueprint-anime .enhance-scale-tabs button,
  .ordinary-blueprint-anime .enhance-format-tabs button {
    min-height: 27px !important;
  }

  .ordinary-blueprint-anime .anime-output-size-select {
    min-height: 29px !important;
  }
}

/* Ordinary tool 10 old-photo left-panel clearance lock v1, 2026-06-28 */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-old-photo,
  .ordinary-workbench.ordinary-blueprint-old-photo {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-control,
  .ordinary-blueprint-old-photo .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-old-photo .ordinary-control-scroll,
  .ordinary-blueprint-old-photo .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-old-photo .ordinary-actions {
    flex: 0 0 auto !important;
    padding: 10px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .ordinary-blueprint-old-photo .ordinary-primary-action {
    height: 46px !important;
    min-height: 46px !important;
  }
}

@media (min-width: 901px) and (max-height: 980px) {
  .ordinary-blueprint-old-photo .ordinary-step {
    gap: 6px !important;
    margin-bottom: 7px !important;
    padding: 8px 12px !important;
  }

  .ordinary-blueprint-old-photo .ordinary-title {
    margin-bottom: 8px !important;
  }

  .ordinary-blueprint-old-photo .enhance-upload-card {
    min-height: 72px !important;
    padding: 7px !important;
  }

  .ordinary-blueprint-old-photo .enhance-upload-thumb {
    width: 72px !important;
    height: 52px !important;
  }

  .ordinary-blueprint-old-photo .blueprint-range-row,
  .ordinary-blueprint-old-photo .blueprint-switch-row {
    min-height: 24px !important;
  }

  .ordinary-blueprint-old-photo .blueprint-chip-list button,
  .ordinary-blueprint-old-photo .enhance-output-grid button,
  .ordinary-blueprint-old-photo .enhance-format-tabs button {
    min-height: 28px !important;
  }
}

/* Ordinary tools 01 and 07-10 medium desktop viewport fit lock, 2026-07-05 */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 861px) and (max-height: 980px) {
  .ordinary-tool-pdf-add-water .ordinary-preview-column {
    height: calc(100vh - 148px) !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) 206px !important;
    gap: 10px !important;
    max-height: calc(100vh - 148px) !important;
  }

  .ordinary-tool-pdf-add-water .pdf-watermark-records {
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  .ordinary-tool-pdf-add-water .pdf-watermark-record-list {
    gap: 14px !important;
  }

  .ordinary-tool-pdf-add-water .pdf-watermark-record-card {
    height: 150px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-color,
  .ordinary-workbench.ordinary-blueprint-color,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-colorize,
  .ordinary-workbench.ordinary-blueprint-colorize,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-anime,
  .ordinary-workbench.ordinary-blueprint-anime,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-old-photo,
  .ordinary-workbench.ordinary-blueprint-old-photo {
    box-sizing: border-box !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control,
  .ordinary-blueprint-color .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 88px) !important;
    max-height: calc(100vh - 88px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-blueprint-color .ordinary-control-scroll,
  .ordinary-blueprint-color .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-color .ordinary-actions {
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    padding: 8px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .ordinary-blueprint-color .ordinary-primary-action {
    height: 46px !important;
    min-height: 46px !important;
  }
}

@media (max-width: 1600px) and (min-width: 901px) and (min-height: 981px) and (max-height: 1100px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-colorize,
  .ordinary-workbench.ordinary-blueprint-colorize,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-anime,
  .ordinary-workbench.ordinary-blueprint-anime,
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-old-photo,
  .ordinary-workbench.ordinary-blueprint-old-photo {
    box-sizing: border-box !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 1600px) and (min-width: 901px) and (max-height: 860px) {
  .id-photo-blue-tip {
    display: none !important;
  }
}

/* Ordinary tool 05 desktop history card fit, 2026-07-05 */
@media (max-width: 1400px) and (min-width: 901px) and (max-height: 820px) {
  .id-photo-blueprint .id-photo-history-list {
    grid-auto-columns: minmax(126px, 138px) !important;
    gap: 10px !important;
    overflow-x: hidden !important;
  }

  .id-photo-blueprint .id-photo-history-item,
  .id-photo-blueprint .id-photo-history-more {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  .id-photo-history-more i {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Ordinary tool 15 compact style controls must remain visible, 2026-07-05 */
@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-style-step {
    display: grid !important;
    grid-template-rows: auto repeat(3, 22px) 26px 24px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .montage-panel-head {
    min-height: 20px !important;
    margin-bottom: 0 !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 36px !important;
    min-height: 22px !important;
    gap: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row span,
  .ordinary-blueprint-app-shell .montage-style-step .control-row strong {
    font-size: 11px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row input[type="range"] {
    min-width: 0 !important;
  }

  .ordinary-blueprint-app-shell .montage-bg-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 26px !important;
    font-size: 11px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatches {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
  }
}

/* Ordinary tool 14 text removal left controls must not be clipped, 2026-07-05 */
@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-text .ordinary-control-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-text .text-brush-color-row {
    display: flex !important;
    min-height: 28px !important;
    padding: 0 10px !important;
  }

  .ordinary-blueprint-text .text-brush-color-row span {
    width: 30px !important;
    height: 15px !important;
  }

  .ordinary-blueprint-text .text-mask-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 28px !important;
  }

  .ordinary-blueprint-text .text-mask-footer small {
    display: block !important;
  }

  .ordinary-blueprint-text .text-mask-footer button {
    height: 27px !important;
    padding: 0 10px !important;
  }

  .ordinary-blueprint-text .text-more-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 30px !important;
    padding: 0 10px !important;
  }
}

/* Ordinary strict audit fixes for color boost and text removal, 2026-07-06 */
@media (max-width: 1400px) and (min-width: 901px), (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-color .enhance-tuning-step .blueprint-switch-row,
  .ordinary-blueprint-color .enhance-more-row {
    display: flex !important;
  }

  .ordinary-blueprint-color .enhance-tuning-step {
    gap: 5px !important;
    margin-bottom: 6px !important;
    padding: 9px 12px !important;
  }

  .ordinary-blueprint-color .enhance-tuning-step .blueprint-range-row,
  .ordinary-blueprint-color .enhance-tuning-step .blueprint-switch-row {
    min-height: 24px !important;
  }

  .ordinary-blueprint-color .enhance-more-row {
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-text .ordinary-control-scroll {
    height: auto !important;
    max-height: none !important;
  }

  .ordinary-blueprint-text .ordinary-actions {
    padding: 6px 18px 7px !important;
  }

  .ordinary-blueprint-text .ordinary-actions .primary-btn,
  .ordinary-blueprint-text .ordinary-actions .ordinary-primary-action {
    height: 48px !important;
    min-height: 48px !important;
  }

  .ordinary-blueprint-text .ordinary-actions .enhance-cost-note {
    display: none !important;
  }
}

@media (min-width: 901px) and (min-height: 821px) and (max-height: 980px) {
  .ordinary-tool-pdf-add-water .ordinary-step .ordinary-primary-action {
    height: 40px !important;
    margin-top: 4px !important;
  }
}

@media (min-width: 901px) and (min-height: 861px) and (max-height: 980px) {
  .ordinary-blueprint-text .ordinary-control-scroll {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ordinary-blueprint-text .ordinary-actions {
    padding: 6px 18px 7px !important;
  }

  .ordinary-blueprint-text .ordinary-actions .primary-btn,
  .ordinary-blueprint-text .ordinary-actions .ordinary-primary-action {
    height: 48px !important;
    min-height: 48px !important;
  }

  .ordinary-blueprint-text .ordinary-actions .enhance-cost-note {
    display: none !important;
  }
}

/* Real Chrome visual review fixes, 2026-07-06
   Keep the left controls close to the locked mockups instead of stretching or
   over-compressing them to satisfy automated viewport checks. */
@media (max-width: 1600px) and (min-width: 901px) and (min-height: 721px) and (max-height: 860px) {
  .id-photo-blue-left {
    grid-template-rows: auto auto !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .id-photo-blue-left-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    scrollbar-gutter: auto !important;
  }

  .id-photo-blue-title {
    min-height: 46px !important;
    margin-bottom: 8px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .id-photo-blue-title h1,
  .id-photo-blue-title .panel-title {
    font-size: 23px !important;
  }

  .id-photo-blue-step {
    gap: 5px !important;
    margin-bottom: 7px !important;
    padding: 7px 11px !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    grid-template-rows: 30px 13px !important;
    column-gap: 14px !important;
  }

  .id-photo-upload-button {
    height: 30px !important;
  }

  .id-photo-upload-preview {
    width: 62px !important;
    height: 62px !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    height: 32px !important;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 30px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 28px 13px !important;
    min-height: 47px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 28px !important;
  }

  .id-photo-retouch-panel,
  .id-photo-print-panel {
    gap: 4px !important;
  }

  .id-photo-retouch-row,
  .id-photo-dermabrasion,
  .id-photo-paper-select {
    min-height: 19px !important;
  }

  .id-photo-dermabrasion button,
  .id-photo-print-tabs button,
  .id-photo-paper-select select {
    height: 23px !important;
  }

  .id-photo-blue-actionbar {
    align-self: start !important;
    margin: 8px 0 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
  }

  .id-photo-generate-button {
    height: 44px !important;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-style-step {
    grid-template-rows: auto repeat(3, 26px) 30px 28px !important;
    gap: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .montage-panel-head {
    min-height: 22px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    min-height: 26px !important;
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 28px !important;
    font-size: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatches {
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 1400px) and (min-width: 901px) and (max-height: 820px) {
  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 36px !important;
    height: calc(100vh - 64px) !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left-scroll {
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 4px 0 !important;
    scrollbar-gutter: stable !important;
  }

  .id-photo-blue-step {
    margin-bottom: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .id-photo-blue-actionbar {
    transform: translateY(-8px) !important;
  }

  .id-photo-generate-button {
    height: 34px !important;
  }
}

@media (max-width: 1400px) and (min-width: 901px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .montage-style-step {
    grid-template-rows: auto repeat(3, 24px) 28px 24px !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    min-height: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 26px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex-basis: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* Ordinary tool 15 real Chrome left-panel breathing room, 2026-07-06 */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-left {
    padding-bottom: 14px !important;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-left {
    padding-bottom: 12px !important;
  }
}

/* Ordinary tool 15 real Chrome visual cleanup, 2026-07-09 */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-page {
    padding-bottom: 32px !important;
  }

  .ordinary-blueprint-app-shell .montage-left {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    align-self: start !important;
    align-content: start !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 112px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 12px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    align-self: start !important;
    min-height: 0 !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    padding: 9px 11px !important;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 96px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 48px auto !important;
    min-height: 78px !important;
    padding: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-shape {
    min-height: 48px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs button,
  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 30px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row {
    margin-top: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row input {
    height: 31px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row input[type="range"] {
    height: 18px !important;
    min-height: 18px !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 8 !important;
    align-self: end !important;
    margin-top: 10px !important;
    padding-top: 6px !important;
    background: linear-gradient(180deg, rgba(251, 252, 253, 0), #fbfcfd 34%) !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide,
  .ordinary-blueprint-app-shell .montage-settings-button {
    height: 50px !important;
    min-height: 50px !important;
  }

  .ordinary-blueprint-app-shell .montage-center {
    grid-template-rows: 48px minmax(0, 1fr) 118px !important;
    gap: 18px !important;
  }

  .ordinary-blueprint-app-shell .montage-canvas-viewport {
    padding-bottom: 2px !important;
  }

  .ordinary-blueprint-app-shell .montage-bottom-cue {
    bottom: 138px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip {
    height: 118px !important;
    overflow: hidden !important;
    padding: 7px 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs {
    align-items: center !important;
    gap: 7px !important;
    min-height: 26px !important;
    margin-bottom: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs button {
    height: 26px !important;
    padding: 0 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-list {
    align-items: start !important;
    gap: 10px !important;
    padding-bottom: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-thumb {
    grid-template-rows: 34px 18px !important;
    gap: 4px !important;
    flex-basis: 88px !important;
    min-width: 88px !important;
    min-height: 58px !important;
    padding: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-shape {
    min-height: 34px !important;
  }
}

@media (max-height: 920px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-left {
    gap: 8px !important;
    max-height: calc(100vh - 86px) !important;
    padding-bottom: 16px !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    padding: 7px 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 82px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 40px auto !important;
    min-height: 66px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-shape {
    min-height: 40px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    grid-template-rows: auto repeat(3, 24px) 28px 24px !important;
    gap: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    min-height: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex-basis: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    position: static !important;
    margin-top: 4px !important;
    padding-top: 2px !important;
    background: transparent !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide,
  .ordinary-blueprint-app-shell .montage-settings-button {
    height: 44px !important;
    min-height: 44px !important;
  }

  .ordinary-blueprint-app-shell .montage-center {
    grid-template-rows: 44px minmax(0, 1fr) 100px !important;
    gap: 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-bottom-cue {
    bottom: 118px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip {
    height: 100px !important;
    padding: 6px 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs {
    min-height: 22px !important;
    margin-bottom: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs button {
    height: 22px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-thumb {
    grid-template-rows: 30px 16px !important;
    gap: 4px !important;
    flex-basis: 78px !important;
    min-width: 78px !important;
    min-height: 52px !important;
    padding: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-shape {
    min-height: 30px !important;
  }
}

@media (max-height: 860px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-page {
    padding-top: 14px !important;
    padding-bottom: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-left {
    gap: 8px !important;
    max-height: calc(100vh - 76px) !important;
    padding-bottom: 14px !important;
  }

  .ordinary-blueprint-app-shell .montage-title {
    margin-bottom: 2px !important;
  }

  .ordinary-blueprint-app-shell .montage-title .panel-title {
    font-size: 22px !important;
    line-height: 1.04 !important;
  }

  .ordinary-blueprint-app-shell .montage-title p {
    margin-top: 1px !important;
    font-size: 11px !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    padding: 7px 9px !important;
  }

  .ordinary-blueprint-app-shell .montage-panel-head {
    min-height: 20px !important;
    margin-bottom: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 68px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options {
    gap: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 36px auto !important;
    min-height: 60px !important;
    padding: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-shape {
    min-height: 36px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs,
  .ordinary-blueprint-app-shell .montage-bg-tabs {
    gap: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs button,
  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 25px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row input {
    height: 26px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    grid-template-rows: auto repeat(3, 24px) 26px 23px !important;
    gap: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    min-height: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    position: static !important;
    margin-top: 2px !important;
    padding-top: 2px !important;
    background: transparent !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide,
  .ordinary-blueprint-app-shell .montage-settings-button {
    height: 46px !important;
    min-height: 46px !important;
  }

  .ordinary-blueprint-app-shell .montage-center {
    grid-template-rows: 44px minmax(0, 1fr) 104px !important;
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-bottom-cue {
    bottom: 122px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip {
    height: 104px !important;
    padding: 6px 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs {
    min-height: 26px !important;
    margin-bottom: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs button {
    height: 26px !important;
    padding: 0 9px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-thumb {
    grid-template-rows: 30px 16px !important;
    flex-basis: 78px !important;
    min-width: 78px !important;
    min-height: 52px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-shape {
    min-height: 30px !important;
  }
}

@media (max-height: 720px) and (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-page {
    padding-top: 8px !important;
    padding-bottom: 18px !important;
  }

  .ordinary-blueprint-app-shell .montage-left {
    gap: 6px !important;
    max-height: calc(100vh - 68px) !important;
    padding-bottom: 18px !important;
  }

  .ordinary-blueprint-app-shell .montage-title {
    min-height: 34px !important;
    margin-bottom: 0 !important;
  }

  .ordinary-blueprint-app-shell .montage-title .panel-title {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .ordinary-blueprint-app-shell .montage-title p {
    margin-top: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    padding: 5px 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-panel-head {
    min-height: 18px !important;
    margin-bottom: 3px !important;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 60px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options {
    gap: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 30px auto !important;
    min-height: 50px !important;
    padding: 3px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-shape {
    min-height: 30px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs,
  .ordinary-blueprint-app-shell .montage-bg-tabs {
    gap: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs button,
  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 23px !important;
    font-size: 11px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row {
    gap: 5px !important;
    margin-top: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row input {
    height: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    grid-template-rows: auto repeat(3, 22px) 24px 22px !important;
    gap: 3px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    min-height: 22px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row input[type="range"] {
    height: 18px !important;
    min-height: 18px !important;
  }

  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 23px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatches {
    gap: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex-basis: 18px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    position: static !important;
    margin-top: 2px !important;
    padding-top: 2px !important;
    background: transparent !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide,
  .ordinary-blueprint-app-shell .montage-settings-button {
    height: 40px !important;
    min-height: 40px !important;
  }

  .ordinary-blueprint-app-shell .montage-center {
    grid-template-rows: 42px minmax(0, 1fr) 98px !important;
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-bottom-cue {
    bottom: 114px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip {
    height: 98px !important;
    padding: 5px 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs {
    min-height: 22px !important;
    margin-bottom: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs button {
    height: 22px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-thumb {
    grid-template-rows: 28px 16px !important;
    flex-basis: 80px !important;
    min-width: 80px !important;
    min-height: 50px !important;
    padding: 4px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-shape {
    min-height: 28px !important;
  }
}

/* Ordinary tool real-browser audit: 1280 x 720 desktop fit, 2026-07-12 */
@media (min-width: 901px) and (max-height: 720px) {
  /* Keep the PDF export action inside the real browser viewport. */
  .ordinary-tool-pdf-add-water .ordinary-step .ordinary-primary-action {
    transform: translateY(-4px) !important;
  }

  /* Fill the remaining right column instead of leaving a dead band below history. */
  .id-photo-blue-main {
    grid-template-rows: minmax(312px, 1fr) 164px minmax(0, 16px) !important;
  }

  .id-photo-blue-result-grid {
    align-items: stretch !important;
  }

  .id-photo-blueprint .id-photo-output-preview {
    align-self: center !important;
    width: auto !important;
    height: min(360px, calc(100% - 36px)) !important;
    max-height: none !important;
    aspect-ratio: 25 / 35 !important;
  }

  .id-photo-blueprint .id-photo-output-preview img {
    width: 100% !important;
    height: 100% !important;
  }

  /* The enhanced-image tools fit their complete control sequence above the action. */
  .ordinary-blueprint-amplify .ordinary-control-scroll,
  .ordinary-blueprint-color .ordinary-control-scroll,
  .ordinary-blueprint-colorize .ordinary-control-scroll,
  .ordinary-blueprint-anime .ordinary-control-scroll,
  .ordinary-blueprint-old-photo .ordinary-control-scroll,
  .ordinary-blueprint-sharpen .ordinary-control-scroll {
    overflow-y: visible !important;
    padding-bottom: 0 !important;
  }

  .ordinary-blueprint-amplify .ordinary-step,
  .ordinary-blueprint-color .ordinary-step,
  .ordinary-blueprint-colorize .ordinary-step,
  .ordinary-blueprint-anime .ordinary-step,
  .ordinary-blueprint-old-photo .ordinary-step,
  .ordinary-blueprint-sharpen .ordinary-step {
    gap: 4px !important;
    margin-bottom: 4px !important;
    padding: 6px 10px !important;
  }

  .ordinary-blueprint-amplify .ordinary-title,
  .ordinary-blueprint-color .ordinary-title,
  .ordinary-blueprint-colorize .ordinary-title,
  .ordinary-blueprint-anime .ordinary-title,
  .ordinary-blueprint-old-photo .ordinary-title,
  .ordinary-blueprint-sharpen .ordinary-title {
    margin-bottom: 4px !important;
  }

  .ordinary-blueprint-amplify .enhance-upload-card,
  .ordinary-blueprint-color .enhance-upload-card,
  .ordinary-blueprint-colorize .enhance-upload-card,
  .ordinary-blueprint-anime .enhance-upload-card,
  .ordinary-blueprint-old-photo .enhance-upload-card,
  .ordinary-blueprint-sharpen .enhance-upload-card {
    min-height: 58px !important;
    padding: 5px !important;
  }

  .ordinary-blueprint-amplify .enhance-upload-thumb,
  .ordinary-blueprint-color .enhance-upload-thumb,
  .ordinary-blueprint-colorize .enhance-upload-thumb,
  .ordinary-blueprint-anime .enhance-upload-thumb,
  .ordinary-blueprint-old-photo .enhance-upload-thumb,
  .ordinary-blueprint-sharpen .enhance-upload-thumb {
    width: 56px !important;
    height: 42px !important;
  }

  .ordinary-blueprint-amplify .blueprint-range-row,
  .ordinary-blueprint-amplify .blueprint-switch-row,
  .ordinary-blueprint-color .blueprint-range-row,
  .ordinary-blueprint-color .blueprint-switch-row,
  .ordinary-blueprint-colorize .blueprint-range-row,
  .ordinary-blueprint-colorize .blueprint-switch-row,
  .ordinary-blueprint-anime .blueprint-range-row,
  .ordinary-blueprint-anime .blueprint-switch-row,
  .ordinary-blueprint-old-photo .blueprint-range-row,
  .ordinary-blueprint-old-photo .blueprint-switch-row,
  .ordinary-blueprint-sharpen .blueprint-range-row,
  .ordinary-blueprint-sharpen .blueprint-switch-row {
    min-height: 22px !important;
  }

  .ordinary-blueprint-amplify .blueprint-chip-list,
  .ordinary-blueprint-amplify .enhance-output-grid,
  .ordinary-blueprint-color .blueprint-chip-list,
  .ordinary-blueprint-colorize .blueprint-chip-list,
  .ordinary-blueprint-colorize .enhance-output-grid,
  .ordinary-blueprint-colorize .enhance-format-tabs,
  .ordinary-blueprint-anime .enhance-scale-tabs,
  .ordinary-blueprint-anime .enhance-format-tabs,
  .ordinary-blueprint-old-photo .blueprint-chip-list,
  .ordinary-blueprint-old-photo .enhance-output-grid,
  .ordinary-blueprint-old-photo .enhance-format-tabs,
  .ordinary-blueprint-sharpen .blueprint-chip-list,
  .ordinary-blueprint-sharpen .enhance-output-grid,
  .ordinary-blueprint-sharpen .enhance-format-tabs,
  .ordinary-blueprint-sharpen .enhance-quality-tabs {
    gap: 4px !important;
  }

  .ordinary-blueprint-amplify .blueprint-chip-list button,
  .ordinary-blueprint-amplify .enhance-output-grid button,
  .ordinary-blueprint-color .blueprint-chip-list button,
  .ordinary-blueprint-colorize .blueprint-chip-list button,
  .ordinary-blueprint-colorize .enhance-output-grid button,
  .ordinary-blueprint-colorize .enhance-format-tabs button,
  .ordinary-blueprint-anime .enhance-scale-tabs button,
  .ordinary-blueprint-anime .enhance-format-tabs button,
  .ordinary-blueprint-old-photo .blueprint-chip-list button,
  .ordinary-blueprint-old-photo .enhance-output-grid button,
  .ordinary-blueprint-old-photo .enhance-format-tabs button,
  .ordinary-blueprint-sharpen .blueprint-chip-list button,
  .ordinary-blueprint-sharpen .enhance-output-grid button,
  .ordinary-blueprint-sharpen .enhance-format-tabs button,
  .ordinary-blueprint-sharpen .enhance-quality-tabs button {
    min-height: 24px !important;
  }

  .ordinary-blueprint-amplify .ordinary-actions,
  .ordinary-blueprint-color .ordinary-actions,
  .ordinary-blueprint-colorize .ordinary-actions,
  .ordinary-blueprint-anime .ordinary-actions,
  .ordinary-blueprint-old-photo .ordinary-actions,
  .ordinary-blueprint-sharpen .ordinary-actions {
    padding-top: 5px !important;
  }

  .ordinary-blueprint-amplify .ordinary-primary-action,
  .ordinary-blueprint-color .ordinary-primary-action,
  .ordinary-blueprint-colorize .ordinary-primary-action,
  .ordinary-blueprint-anime .ordinary-primary-action,
  .ordinary-blueprint-old-photo .ordinary-primary-action,
  .ordinary-blueprint-sharpen .ordinary-primary-action {
    height: 40px !important;
    min-height: 40px !important;
  }

  .ordinary-blueprint-color .enhance-analysis-card {
    gap: 5px !important;
    padding: 7px !important;
  }

  /* Inpaint pages keep every tool and setting visible instead of scroll-trapping them. */
  .ordinary-blueprint-object .ordinary-control-scroll,
  .ordinary-blueprint-watermark .ordinary-control-scroll,
  .ordinary-blueprint-text .ordinary-control-scroll {
    overflow-y: visible !important;
    padding: 6px 10px 0 !important;
  }

  .ordinary-blueprint-object .ordinary-step,
  .ordinary-blueprint-watermark .ordinary-step,
  .ordinary-blueprint-text .ordinary-step {
    gap: 4px !important;
    margin-bottom: 4px !important;
    padding: 6px 10px !important;
  }

  .ordinary-blueprint-object .inpaint-upload-card,
  .ordinary-blueprint-watermark .inpaint-upload-card,
  .ordinary-blueprint-text .inpaint-upload-card {
    grid-template-columns: 56px minmax(0, 1fr) 18px !important;
    min-height: 42px !important;
    padding: 4px !important;
  }

  .ordinary-blueprint-object .inpaint-upload-card > span,
  .ordinary-blueprint-watermark .inpaint-upload-card > span,
  .ordinary-blueprint-text .inpaint-upload-card > span {
    width: 56px !important;
    height: 40px !important;
  }

  .ordinary-blueprint-object .inpaint-tool-tabs,
  .ordinary-blueprint-watermark .inpaint-tool-tabs,
  .ordinary-blueprint-text .inpaint-tool-tabs {
    gap: 5px !important;
  }

  .ordinary-blueprint-object .inpaint-tool-tabs button,
  .ordinary-blueprint-watermark .inpaint-tool-tabs button,
  .ordinary-blueprint-text .inpaint-tool-tabs button {
    min-height: 30px !important;
    padding: 3px 4px !important;
  }

  .ordinary-blueprint-text .inpaint-tool-tabs button::before {
    width: 14px !important;
    height: 14px !important;
  }

  .ordinary-blueprint-object .inpaint-range-list,
  .ordinary-blueprint-watermark .inpaint-range-list,
  .ordinary-blueprint-text .inpaint-range-list {
    gap: 4px !important;
    margin-top: 4px !important;
  }

  .ordinary-blueprint-object .blueprint-range-row,
  .ordinary-blueprint-watermark .blueprint-range-row,
  .ordinary-blueprint-text .blueprint-range-row {
    min-height: 22px !important;
  }

  .ordinary-blueprint-object .inpaint-mask-actions {
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .ordinary-blueprint-object .inpaint-mask-actions button {
    height: 28px !important;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list {
    gap: 5px !important;
  }

  .ordinary-blueprint-object .inpaint-mode-card-list button {
    min-height: 34px !important;
    padding: 5px 7px !important;
  }

  .ordinary-blueprint-watermark .inpaint-detect-button {
    min-height: 30px !important;
  }

  .watermark-protect-block {
    gap: 3px !important;
  }

  .watermark-protect-block .blueprint-switch-row,
  .watermark-more-row,
  .text-brush-color-row,
  .text-mask-footer,
  .text-model-select,
  .ordinary-blueprint-text .text-mode-step .blueprint-switch-row,
  .text-more-row {
    min-height: 26px !important;
  }

  .text-mask-footer button {
    height: 26px !important;
  }

  .text-model-select {
    gap: 6px !important;
    padding: 0 8px !important;
  }

  .ordinary-blueprint-object .ordinary-actions,
  .ordinary-blueprint-watermark .ordinary-actions,
  .ordinary-blueprint-text .ordinary-actions {
    padding: 5px 10px 6px !important;
  }

  .ordinary-blueprint-object .ordinary-primary-action,
  .ordinary-blueprint-watermark .ordinary-primary-action,
  .ordinary-blueprint-text .ordinary-primary-action {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Short desktop viewports keep blueprint-scale controls and scroll the left work area. */
@media (min-width: 901px) and (max-height: 860px) {
  /* Shared tool shell: the action remains reachable while controls retain their normal density. */
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-actions,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-actions {
    position: relative !important;
    z-index: 4;
    flex: 0 0 68px !important;
    min-height: 68px !important;
    padding: 10px 12px 8px !important;
    border-top: 1px solid #edf1f7 !important;
    background: #fff !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .ordinary-title,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .ordinary-title {
    margin-bottom: 14px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .ordinary-step,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .ordinary-step {
    gap: 9px !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-upload-card,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-upload-card {
    min-height: 72px !important;
    padding: 8px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-upload-thumb,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-upload-thumb {
    width: 72px !important;
    height: 54px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-range-row,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-switch-row,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-range-row,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-switch-row {
    min-height: 28px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-chip-list,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-output-grid,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-format-tabs,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-quality-tabs,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-scale-tabs,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-chip-list,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-output-grid,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-format-tabs,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-quality-tabs,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-scale-tabs {
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-chip-list button,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-output-grid button,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-format-tabs button,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-quality-tabs button,
  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-scale-tabs button,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .blueprint-chip-list button,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-output-grid button,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-format-tabs button,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-quality-tabs button,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .enhance-scale-tabs button {
    min-height: 30px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .inpaint-upload-card,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .inpaint-upload-card {
    min-height: 72px !important;
    padding: 8px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .inpaint-upload-card > span,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .inpaint-upload-card > span {
    width: 76px !important;
    height: 54px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .inpaint-tool-tabs button,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-control-scroll .inpaint-tool-tabs button {
    min-height: 46px !important;
    padding: 6px 8px !important;
  }

  .ordinary-blueprint-text .text-brush-color-row,
  .ordinary-blueprint-text .text-more-row {
    display: flex !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-primary-action,
  .ordinary-workbench:not(.ordinary-id-photo-shell) .ordinary-primary-action {
    height: 48px !important;
    min-height: 48px !important;
  }

  /* Certificate photo keeps the full six-step setup and lets its settings column scroll. */
  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 50px !important;
    align-content: stretch !important;
    height: calc(100vh - 102px) !important;
    max-height: calc(100vh - 102px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left-scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 16px 0 !important;
    scrollbar-gutter: stable !important;
  }

  .id-photo-blue-title {
    min-height: 56px !important;
    margin-bottom: 11px !important;
  }

  .id-photo-blue-title .ordinary-title-icon {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .id-photo-blue-title h1,
  .id-photo-blue-title .panel-title {
    font-size: 27px !important;
  }

  .id-photo-blue-step {
    gap: 7px !important;
    margin-bottom: 8px !important;
    padding: 9px 12px 8px !important;
  }

  .id-photo-blue-upload {
    grid-template-columns: minmax(0, 178px) 86px !important;
    grid-template-rows: 36px 16px !important;
    column-gap: 28px !important;
  }

  .id-photo-upload-button {
    height: 36px !important;
  }

  .id-photo-upload-preview {
    width: 82px !important;
    height: 82px !important;
  }

  .id-photo-blue-colors .color-dot,
  .id-photo-color-more {
    width: 42px !important;
    height: 42px !important;
  }

  .id-photo-size-current,
  .id-photo-more-size {
    height: 34px !important;
  }

  .id-photo-blueprint .id-photo-outfit-option,
  .id-photo-blueprint .id-photo-outfit-more {
    grid-template-rows: 36px 15px !important;
    min-height: 56px !important;
  }

  .id-photo-blueprint .id-photo-outfit-thumb {
    height: 36px !important;
  }

  .id-photo-blue-actionbar {
    position: static !important;
    transform: none !important;
    margin: 10px 0 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
  }

  .id-photo-generate-button {
    height: 48px !important;
  }

  /* Montage deliberately has a longer control stack; never reduce its cards to fit one screen. */
  .ordinary-blueprint-app-shell .montage-page {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }

  .ordinary-blueprint-app-shell .montage-left {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding: 0 !important;
  }

  .ordinary-blueprint-app-shell .montage-left-scroll {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 12px 0 !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 96px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options {
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 48px auto !important;
    min-height: 78px !important;
    padding: 5px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-shape {
    min-height: 48px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs button,
  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 30px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row {
    margin-top: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row input {
    height: 31px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    display: grid !important;
    grid-template-rows: auto repeat(3, 28px) 30px 28px !important;
    gap: 6px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    min-height: 28px !important;
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatches {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62px !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 8px 0 0 !important;
    background: #f1f6fd !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide,
  .ordinary-blueprint-app-shell .montage-settings-button {
    height: 50px !important;
    min-height: 50px !important;
  }

  /* Keep the contract preview visually full at real Chrome's short height. */
  .ordinary-blueprint-app-shell .montage-blueprint-preview-image {
    inset: 12px 14px !important;
    width: calc(100% - 28px) !important;
    height: calc(100% - 24px) !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }

  .ordinary-blueprint-app-shell .montage-page .collage {
    transform: scale(clamp(1.08, calc(var(--montage-zoom, 0.73) * 1.62), 1.22)) !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .ordinary-primary-icon {
    display: inline-block !important;
    flex: 0 0 18px !important;
    color: #fff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .ordinary-blueprint-app-shell .montage-history-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    min-height: 130px !important;
    padding: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-history-card > span {
    width: 84px !important;
    height: 84px !important;
  }
}

/* Production ordinary-workbench final cascade override, 2026-07-19 */
.ordinary-pane-empty strong,
.ordinary-pane-empty span {
  position: static !important;
  display: block !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.ordinary-pane-empty strong {
  color: #1f2937 !important;
}

.ordinary-pane-empty span {
  color: #788499 !important;
}

.enhance-image,
.inpaint-canvas,
.matting-canvas.before,
.image-task-pane,
.enhance-upload-thumb,
.inpaint-upload-card > span,
.id-photo-upload-preview,
.tool-generation-thumb,
.enhance-record-thumb,
.inpaint-record-item > span,
.watermark-task-thumb,
.pdf-watermark-record-card,
.matting-blueprint-record-card,
.matting-history-modal-list > button > span,
.id-photo-history-thumb,
.id-photo-history-modal-list > button > span,
.enhance-history-modal-list > button > span,
.watermark-history-modal-list > button > span,
.inpaint-history-modal-list > button > span,
.montage-history-card i,
.sharpen-task-name span,
.anime-split-image,
.anime-line-art-image,
.anime-result-grid span,
.ordinary-tool-pdf-add-water .preview-photo,
.ordinary-tool-pdf-add-water .watermark-live-result,
.watermark-checker .preview-photo {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.enhance-image.is-empty-pane,
.matting-canvas.is-empty-pane,
.inpaint-canvas.is-empty-pane,
.image-task-pane.is-empty,
.image-task-pane.is-missing-source,
.tool-generation-thumb.is-empty-thumb,
.enhance-record-thumb.is-empty-thumb,
.inpaint-record-item > span.is-empty-thumb,
.watermark-task-thumb.is-empty-thumb {
  background-image:
    linear-gradient(45deg, rgba(226, 233, 243, 0.72) 25%, transparent 25% 50%, rgba(226, 233, 243, 0.72) 50% 75%, transparent 75%) !important;
  background-color: #f8fbff !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: 22px 22px !important;
}

/* Keep tool 07 interaction geometry authoritative over legacy blueprint locks. */
.ordinary-blueprint-color .enhance-preview-color .color-enhance-stage {
  display: block;
}

.ordinary-blueprint-color .enhance-preview-color .color-enhance-stage.is-design-locked {
  background-image: none;
}

@media (max-width: 900px) {
  .ordinary-blueprint-color .enhance-preview-color .enhance-color-footer {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }
}

/* Primary actions live in a dedicated foreground footer, not inside the scroll stack. */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control,
  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control,
  .ordinary-matting-matting .ordinary-control,
  .ordinary-tool-pdf-add-water .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control,
  .ordinary-matting-matting .ordinary-control {
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-matting-matting .ordinary-control-scroll,
  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control-scroll,
  .ordinary-matting-matting .ordinary-control-scroll,
  .ordinary-tool-pdf-add-water .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ordinary-matting-matting .ordinary-actions {
    position: relative !important;
    z-index: 2;
    flex: 0 0 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 26px !important;
    border-top: 0 !important;
    background: #fff !important;
  }

  .ordinary-matting-matting .ordinary-primary-action {
    height: 64px !important;
    margin: 0 !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-actions {
    position: relative !important;
    z-index: 2;
    flex: 0 0 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    border-top: 1px solid #edf1f7 !important;
    background: #fff !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-actions .ordinary-primary-action {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 42px !important;
    margin: 0 !important;
  }
}

/* Smart matting keeps the blueprint control scale on shorter desktop windows. */
@media (min-width: 901px) and (max-height: 900px) {
  .ordinary-matting-matting .ordinary-control,
  .ordinary-tool-pdf-add-water .ordinary-control {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ordinary-matting-matting .ordinary-control-scroll,
  .ordinary-tool-pdf-add-water .ordinary-control-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ordinary-matting-matting .matting-mode-list {
    gap: 10px !important;
  }

  .ordinary-matting-matting .matting-mode-card {
    min-height: 56px !important;
    padding: 7px 12px !important;
  }

  .ordinary-matting-matting .matting-mode-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .ordinary-matting-matting .matting-upload-card {
    grid-template-columns: 66px minmax(0, 1fr) 20px !important;
    min-height: 70px !important;
    padding: 8px !important;
  }

  .ordinary-matting-matting .matting-upload-thumb {
    width: 56px !important;
    height: 56px !important;
  }

  .ordinary-matting-matting .matting-range-row {
    min-height: 26px !important;
  }

  .ordinary-matting-matting .matting-toggle-row {
    min-height: 25px !important;
  }

  .ordinary-matting-matting .matting-bg-tabs button {
    height: 33px !important;
    font-size: 10px !important;
  }

  .ordinary-matting-matting .matting-color,
  .ordinary-matting-matting .matting-eyedropper {
    width: 29px !important;
    height: 29px !important;
  }

  .ordinary-matting-matting .ordinary-actions {
    position: relative !important;
    z-index: 2;
    flex: 0 0 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 26px !important;
    border-top: 0 !important;
    background: #fff !important;
  }

  .ordinary-matting-matting .ordinary-primary-action {
    height: 64px !important;
    margin: 0 !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-actions {
    position: relative !important;
    z-index: 2;
    flex: 0 0 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    border-top: 1px solid #edf1f7 !important;
    background: #fff !important;
  }

  .ordinary-tool-pdf-add-water .ordinary-actions .ordinary-primary-action {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 42px !important;
    margin: 0 !important;
  }
}

/* PDF watermark: use the real Chrome content height, not the full display height. */
@media (min-width: 901px) and (max-height: 860px) {
  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water {
    height: calc(100vh - 56px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 56px) !important;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-control {
    align-self: stretch;
    height: calc(100vh - 108px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-preview-column {
    align-self: stretch;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-preview-column {
    grid-template-rows: minmax(0, 1fr) 170px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .pdf-watermark-record-list {
    gap: 14px;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .pdf-watermark-record-card {
    height: 118px;
  }

  .ordinary-blueprint-app-shell .ordinary-tool-pdf-add-water .ordinary-actions {
    transform: translateY(-8px);
  }
}

/* Smart matting mode selection is an overlay drawer, so it never consumes the settings stack. */
.ordinary-matting-matting .matting-mode-drawer {
  position: relative;
  z-index: 5;
  display: block;
}

.ordinary-matting-matting .matting-mode-drawer-trigger {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 7px 12px;
  border: 1px solid #8b63f6;
  border-radius: 8px;
  color: #243044;
  background: linear-gradient(180deg, #faf8ff, #fff);
  box-shadow: 0 0 0 1px rgba(128, 92, 246, 0.18) inset;
  text-align: left;
}

.ordinary-matting-matting .matting-mode-drawer-copy {
  min-width: 0;
}

.ordinary-matting-matting .matting-mode-drawer-copy strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
}

.ordinary-matting-matting .matting-mode-drawer-copy small {
  display: block;
  margin-top: 3px;
  color: #7c8798;
  font-size: 11px;
  font-weight: 650;
}

.ordinary-matting-matting .matting-mode-drawer-trigger > i {
  width: 9px;
  height: 9px;
  border-right: 2px solid #7f56f6;
  border-bottom: 2px solid #7f56f6;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

.ordinary-matting-matting .matting-mode-drawer.open .matting-mode-drawer-trigger > i {
  transform: translateY(3px) rotate(225deg);
}

.ordinary-matting-matting .matting-mode-drawer-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dfe5ef;
  border-radius: 9px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 16px 34px rgba(28, 42, 70, 0.16);
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.ordinary-matting-matting .matting-mode-drawer.open .matting-mode-drawer-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.ordinary-matting-matting .matting-mode-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 2px;
  color: #222b3d;
  font-size: 12px;
}

.ordinary-matting-matting .matting-mode-drawer-head button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: #7b8597;
  background: #f5f7fb;
  font-size: 18px;
  line-height: 1;
}

.ordinary-matting-matting .matting-mode-drawer-panel .matting-mode-card {
  min-height: 52px !important;
  padding: 6px 10px !important;
}

/* Unified generation workspace final blueprint structure, 2026-07-12 */
.generation-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: calc(100vh - 68px);
  padding: 12px clamp(18px, 3vw, 42px) 18px;
}

.generation-page-head {
  width: min(100%, 1480px);
  min-height: 42px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.generation-page-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.generation-page-title h1 {
  margin: 0;
  color: #171821;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.generation-page-title p {
  margin: 0;
  overflow: hidden;
  color: #858a99;
  font-size: 13px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-head-actions {
  flex: 0 0 auto;
  padding: 3px;
  gap: 2px;
  border-color: #e3e6ef;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(36, 43, 62, 0.04);
}

.generation-head-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #5f6573;
  font-size: 12px;
  font-weight: 650;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.generation-head-actions button:hover {
  border-color: #e1d9ff;
  background: #faf8ff;
  color: #7556dc;
  box-shadow: none;
}

.generation-head-action-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: currentColor;
}

.generation-head-action-icon.is-guide {
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.generation-head-action-icon.is-guide::before {
  content: "i";
  position: absolute;
  inset: -1px 0 0;
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.generation-head-action-icon.is-template::before,
.generation-head-action-icon.is-template::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.generation-head-action-icon.is-template::before {
  top: 1px;
  left: 1px;
  opacity: 0.58;
}

.generation-head-action-icon.is-template::after {
  right: 1px;
  bottom: 1px;
  background: #fff;
}

.generation-head-action-icon.is-reset {
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-36deg);
}

.generation-head-action-icon.is-reset::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

.generation-head-action-icon.is-history {
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.generation-head-action-icon.is-history::before,
.generation-head-action-icon.is-history::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 100%;
}

.generation-head-action-icon.is-history::before {
  height: 4px;
}

.generation-head-action-icon.is-history::after {
  height: 3px;
  transform: rotate(122deg);
}

.generation-layout {
  width: min(100%, 1480px);
  height: calc(100vh - 240px);
  min-height: 0;
  margin: 0 auto;
  align-items: stretch;
}

.generation-panel {
  height: 100%;
  max-height: none;
}

.generation-preview-column {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) minmax(132px, 158px);
  gap: 12px;
}

.generation-preview-card {
  min-height: 0;
}

.generation-recent-card {
  min-height: 132px;
  overflow: hidden;
}

.generation-recent-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.generation-taskbar {
  width: min(100%, 1480px);
  min-height: 60px;
  margin: 0 auto;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.35fr) auto;
  gap: 16px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.generation-task-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.generation-task-heading > strong {
  flex: 0 0 auto;
  color: #343948;
  font-size: 14px;
  font-weight: 800;
}

.generation-task-heading > span {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  background: #e6e8ef;
}

.generation-task-info {
  min-width: 0;
}

.generation-task-info small,
.generation-task-info b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-task-info small {
  color: #8a90a0;
  font-size: 11px;
  line-height: 1.2;
}

.generation-task-info b {
  margin-top: 3px;
  color: #4d5362;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.generation-task-track-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(78px, 1fr);
  align-items: center;
  gap: 10px;
}

.generation-task-track-wrap > span {
  overflow: hidden;
  color: #818796;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-task-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.generation-task-actions em {
  color: #868c9a;
  font-size: 11px;
  font-weight: 700;
}

.generation-task-actions button {
  height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #6e58d5;
  font-size: 12px;
  font-weight: 700;
}

.generation-task-actions button:hover:not(:disabled) {
  background: #f5f2ff;
}

.generation-task-actions .generation-cancel-unavailable {
  color: #a4a8b3;
  cursor: not-allowed;
}

.generation-task-actions button b {
  margin-left: 2px;
  font-size: 16px;
  line-height: 0;
}

.generation-taskbar.is-complete .generation-task-progress i {
  background: #63b590;
}

.generation-taskbar.is-failed .generation-task-progress i {
  background: #e77870;
}

.generation-help-modal,
.generation-template-modal {
  width: min(510px, calc(100vw - 32px));
  padding: 26px;
  border-radius: 8px;
}

.generation-help-modal > span,
.generation-template-modal-head > span {
  color: #8064e6;
  font-size: 12px;
  font-weight: 750;
}

.generation-help-modal h2,
.generation-template-modal h2 {
  margin: 6px 0 0;
  color: #202330;
  font-size: 20px;
  font-weight: 800;
}

.generation-help-modal ol {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.generation-help-modal li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.generation-help-modal li b {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: #f0ecff;
  color: #7658d8;
  font-size: 12px;
}

.generation-help-modal li p {
  margin: 2px 0 0;
  color: #606675;
  font-size: 13px;
  line-height: 1.55;
}

.generation-help-modal > .primary-btn {
  min-width: 108px;
}

.generation-template-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.generation-template-list button {
  display: grid;
  grid-template-columns: minmax(92px, 0.7fr) minmax(72px, auto) minmax(0, 2.5fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid #e5e7ef;
  border-radius: 7px;
  background: #fff;
  color: #323744;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.generation-template-list button:hover {
  border-color: #cfc4ff;
  background: #faf9ff;
}

.generation-template-list strong {
  font-size: 13px;
  font-weight: 800;
}

.generation-template-list span {
  color: #7658d8;
  font-size: 11px;
  font-weight: 700;
}

.generation-template-list small {
  overflow: hidden;
  color: #808694;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .generation-workbench {
    display: block;
  }

  .generation-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
  }

  .generation-page-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .generation-page-title p {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .generation-layout {
    height: auto;
    min-height: 0;
  }

  .generation-panel,
  .generation-preview-column {
    height: auto;
  }

  .generation-preview-column {
    grid-template-rows: auto auto;
  }

  .generation-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .generation-taskbar {
    width: 100%;
    margin-top: 12px;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .generation-task-track-wrap {
    grid-template-columns: minmax(100px, auto) minmax(90px, 1fr);
  }
}

@media (max-width: 640px) {
  .generation-head-actions {
    width: 100%;
  }

  .generation-head-actions button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 5px;
  }

  .generation-head-actions button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .generation-template-list button {
    grid-template-columns: 1fr auto;
  }

  .generation-template-list small {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* Ordinary tool 06: the short real-Chrome viewport scrolls controls, not the action layer. */
.ordinary-blueprint-amplify .enhance-compare-stage.is-design-locked {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.ordinary-blueprint-color .enhance-compare-stage.is-design-locked {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ordinary-blueprint-colorize .enhance-compare-stage.is-design-locked {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ordinary-blueprint-colorize .colorize-primary-action {
  position: relative;
}

.ordinary-blueprint-colorize .colorize-primary-action em {
  position: absolute;
  right: 14px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.ordinary-blueprint-colorize .enhance-record-list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ordinary-blueprint-colorize .enhance-record-thumb b {
  color: #129652;
  background: #ecf9ef;
}

.ordinary-blueprint-amplify .amplify-primary-action {
  position: relative;
}

.ordinary-blueprint-amplify .amplify-primary-action em {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.ordinary-blueprint-amplify .amplify-primary-action .ordinary-primary-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.69 3.86 5.45 5.45-10.6 10.6-5.62.17.17-5.62 10.6-10.6ZM16.1 2.45a2 2 0 0 1 2.83 0l2.62 2.62a2 2 0 0 1 0 2.83l-1 1-5.45-5.45 1-1ZM3.8 21.2l4.4-.14-4.26-4.26-.14 4.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.69 3.86 5.45 5.45-10.6 10.6-5.62.17.17-5.62 10.6-10.6ZM16.1 2.45a2 2 0 0 1 2.83 0l2.62 2.62a2 2 0 0 1 0 2.83l-1 1-5.45-5.45 1-1ZM3.8 21.2l4.4-.14-4.26-4.26-.14 4.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 901px) and (max-height: 860px) {
  /* Preserve the locked montage canvas/template proportion; only its panels scroll. */
  .ordinary-blueprint-app-shell .montage-center {
    grid-template-rows: 48px minmax(0, 1fr) 134px !important;
    gap: 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip {
    height: 134px !important;
    padding: 10px 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs {
    min-height: 28px !important;
    margin-bottom: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs button {
    height: 28px !important;
    padding: 0 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-thumb {
    grid-template-rows: 48px 18px !important;
    flex-basis: 82px !important;
    min-width: 82px !important;
    min-height: 76px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-shape {
    min-height: 48px !important;
  }

  .ordinary-blueprint-app-shell .ordinary-workbench.ordinary-blueprint-amplify .ordinary-actions,
  .ordinary-workbench.ordinary-blueprint-amplify .ordinary-actions {
    display: grid !important;
    grid-template-rows: 46px 16px;
    flex: 0 0 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    gap: 2px;
    padding: 5px 0 3px !important;
    border-top: 0 !important;
    background: #fff !important;
  }

  .ordinary-blueprint-amplify .ordinary-actions .ordinary-primary-action {
    width: 100%;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0;
  }

  .ordinary-blueprint-amplify .ordinary-actions .enhance-cost-note {
    align-self: center;
    margin: 0;
    line-height: 16px;
  }

  .id-photo-blue-left {
    grid-template-rows: minmax(0, 1fr) 56px !important;
    height: calc(100vh - 102px) !important;
    max-height: calc(100vh - 102px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .id-photo-blue-left-scroll {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 22px 0 !important;
    scrollbar-gutter: stable !important;
  }

  .id-photo-blue-actionbar {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    align-items: center !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 4px !important;
    border-top: 1px solid #edf1f7;
    background: #fff !important;
    box-shadow: 0 -8px 16px rgba(30, 43, 70, 0.05);
  }

  .id-photo-generate-button {
    width: 100%;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }
}

/* Final desktop contract baseline for montage. Never compact controls to fit height. */
@media (min-width: 901px) {
  .ordinary-blueprint-app-shell .montage-page {
    grid-template-columns: 396px minmax(0, 1fr) 238px !important;
    gap: 22px !important;
    height: calc(100vh - 68px) !important;
    min-height: 0 !important;
    padding: 8px 34px 16px !important;
    overflow: hidden !important;
  }

  .ordinary-blueprint-app-shell .montage-left {
    align-self: start !important;
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
  }

  .ordinary-blueprint-app-shell .montage-left-scroll {
    gap: 10px !important;
    padding: 0 8px 14px 0 !important;
  }

  .ordinary-blueprint-app-shell .montage-title {
    min-height: auto !important;
    margin: 0 0 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-title .panel-title {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  .ordinary-blueprint-app-shell .montage-title p {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: normal !important;
  }

  .ordinary-blueprint-app-shell .montage-step {
    padding: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-panel-head {
    min-height: 24px !important;
    margin-bottom: 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-source-slot,
  .ordinary-blueprint-app-shell .montage-upload-tile,
  .ordinary-blueprint-app-shell .source-preview,
  .ordinary-blueprint-app-shell .source-empty {
    min-height: 114px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options {
    gap: 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-thumb {
    grid-template-rows: 58px auto !important;
    min-height: 92px !important;
    padding: 6px !important;
  }

  .ordinary-blueprint-app-shell .montage-layout-options .template-shape {
    min-height: 58px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs,
  .ordinary-blueprint-app-shell .montage-bg-tabs {
    gap: 8px !important;
  }

  .ordinary-blueprint-app-shell .montage-ratio-tabs button,
  .ordinary-blueprint-app-shell .montage-bg-tabs button {
    height: 32px !important;
    font-size: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row {
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-size-row input {
    height: 34px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step {
    grid-template-rows: auto repeat(3, 30px) 32px 28px !important;
    gap: 7px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .control-row {
    grid-template-columns: 54px minmax(0, 1fr) 46px !important;
    min-height: 30px !important;
  }

  .ordinary-blueprint-app-shell .montage-style-step .swatch {
    flex-basis: 27px !important;
    width: 27px !important;
    height: 27px !important;
  }

  .ordinary-blueprint-app-shell .montage-left-actions .download-wide,
  .ordinary-blueprint-app-shell .montage-settings-button {
    height: 58px !important;
    min-height: 58px !important;
  }

  .ordinary-blueprint-app-shell .montage-center {
    align-self: start !important;
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    grid-template-rows: 48px minmax(520px, 1fr) 182px !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  .ordinary-blueprint-app-shell .montage-canvas-viewport {
    min-height: 520px !important;
    padding: 18px 26px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip {
    height: 182px !important;
    min-height: 182px !important;
    padding: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs {
    min-height: 32px !important;
    margin-bottom: 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filter-tabs button {
    height: 30px !important;
    padding: 0 10px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-list {
    gap: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-thumb {
    grid-template-rows: 66px auto !important;
    flex-basis: 86px !important;
    min-width: 86px !important;
    min-height: 102px !important;
  }

  .ordinary-blueprint-app-shell .montage-filmstrip .template-shape {
    min-height: 66px !important;
  }

  .ordinary-blueprint-app-shell .montage-right {
    align-self: start !important;
    height: calc(100% - 60px) !important;
    max-height: calc(100% - 60px) !important;
    margin-top: 60px !important;
    padding: 14px 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-history-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    min-height: 130px !important;
    padding: 12px !important;
  }

  .ordinary-blueprint-app-shell .montage-history-card > span {
    width: 84px !important;
    height: 84px !important;
  }
}

/* Final override: amplify records must stay compact on wide production viewports. */
.ordinary-blueprint-amplify .enhance-record-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 10px !important;
}

.ordinary-blueprint-amplify .enhance-record-item {
  flex: 0 0 192px !important;
  width: 192px !important;
  max-width: 192px !important;
  grid-template-rows: 96px auto auto !important;
  min-height: 156px !important;
}

.ordinary-blueprint-amplify .enhance-record-thumb {
  background-color: #f8fbff !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* 2026-07-25 ordinary tool launch polish: one quality/cost/records style for the 15 ordinary tools. */
.ordinary-output-quality-step,
.id-photo-blue-left .ordinary-output-quality-step,
.montage-left .ordinary-output-quality-step {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(126, 87, 245, 0.22) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(126, 87, 245, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #faf7ff 100%) !important;
  box-shadow: 0 12px 30px rgba(112, 86, 242, 0.10) !important;
}

.ordinary-output-quality-head b {
  color: #fff !important;
  background: linear-gradient(135deg, #6b4df6, #f151b8) !important;
  box-shadow: 0 8px 18px rgba(126, 87, 245, 0.22) !important;
}

.ordinary-output-quality-head span {
  color: #7c3aed !important;
  font-weight: 900 !important;
}

.ordinary-quality-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ordinary-quality-grid button {
  position: relative !important;
  display: grid !important;
  gap: 4px !important;
  min-height: 78px !important;
  padding: 12px 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  color: #344054 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
}

.ordinary-quality-grid button strong {
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.ordinary-quality-grid button small {
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

.ordinary-quality-grid button em {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  color: #8b3cf6 !important;
  background: #f4eaff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.ordinary-quality-grid button.active {
  border-color: rgba(126, 87, 245, 0.72) !important;
  background: linear-gradient(135deg, #f7f3ff 0%, #fff2fb 100%) !important;
  box-shadow: 0 14px 32px rgba(126, 87, 245, 0.18) !important;
}

.ordinary-quality-grid button.active::after {
  content: "✓";
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #6b4df6, #f151b8);
  font-size: 11px;
  font-weight: 900;
}

.ordinary-quality-note {
  margin: 10px 0 0 !important;
  color: #7b8192 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.ordinary-primary-action,
.ordinary-blueprint-app-shell .ordinary-primary-action,
.montage-page .ordinary-primary-action,
.id-photo-blueprint .ordinary-primary-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(100deg, #6b4df6 0%, #8f52ee 46%, #f151b8 100%) !important;
  box-shadow: 0 16px 34px rgba(128, 82, 241, 0.28) !important;
}

.ordinary-primary-action .ordinary-primary-icon {
  width: 19px !important;
  height: 19px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

.ordinary-primary-action .ordinary-primary-icon::before {
  content: "✦" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  font-size: 11px !important;
}

.ordinary-primary-action strong {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.ordinary-primary-cost,
.ordinary-primary-action > em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 42px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #7c3aed !important;
  background: rgba(255, 255, 255, 0.94) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.ordinary-primary-cost i::before,
.ordinary-primary-action > em i::before {
  content: "◆";
  color: #f151b8;
  font-size: 9px;
}

.ordinary-primary-action:disabled {
  cursor: not-allowed !important;
  filter: grayscale(0.18) opacity(0.76) !important;
  box-shadow: none !important;
}

.ordinary-records .tool-generation-records,
.tool-generation-records,
.id-photo-history {
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07) !important;
}

.ordinary-records .tool-generation-head,
.tool-generation-head,
.id-photo-history-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 0 2px 12px !important;
}

.ordinary-records .tool-generation-head strong,
.tool-generation-head strong,
.id-photo-history-head strong {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.ordinary-records .tool-generation-head button,
.tool-generation-head button,
.id-photo-history-head button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  color: #6b7280 !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.ordinary-records .tool-generation-list,
.tool-generation-list,
.enhance-record-list,
.inpaint-record-list,
.id-photo-history-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 2px 8px !important;
}

.tool-generation-item,
.enhance-record-item,
.inpaint-record-item,
.id-photo-blueprint .id-photo-history-item,
.id-photo-blueprint .id-photo-history-more {
  flex: 0 0 188px !important;
  width: 188px !important;
  min-height: 154px !important;
  display: grid !important;
  grid-template-rows: 88px auto auto !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 18px !important;
  color: #111827 !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

.tool-generation-item.active,
.enhance-record-item.active,
.inpaint-record-item.active,
.id-photo-blueprint .id-photo-history-item.active {
  border-color: rgba(126, 87, 245, 0.72) !important;
  box-shadow: 0 14px 30px rgba(126, 87, 245, 0.16) !important;
}

.tool-generation-thumb,
.enhance-record-thumb,
.inpaint-record-item > span,
.id-photo-blueprint .id-photo-history-thumb {
  position: relative !important;
  width: 100% !important;
  height: 88px !important;
  min-height: 88px !important;
  border-radius: 14px !important;
  background-color: #f8fbff !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

.tool-generation-copy,
.id-photo-history-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.tool-generation-copy strong,
.enhance-record-item > strong,
.inpaint-record-item > strong,
.id-photo-history-copy strong {
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tool-generation-copy small,
.enhance-record-item > small,
.inpaint-record-item > small,
.id-photo-history-copy small {
  overflow: hidden !important;
  color: #7b8192 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tool-generation-item > em,
.enhance-record-status,
.inpaint-record-item > em {
  justify-self: start !important;
  align-self: end !important;
  min-height: 24px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  color: #7c3aed !important;
  background: #f4eaff !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.tool-generation-item.is-processing .tool-generation-thumb,
.enhance-record-item.is-processing .enhance-record-thumb,
.inpaint-record-item.is-processing > span,
.id-photo-history-item.is-processing .id-photo-history-thumb {
  background-image: none !important;
}

.record-progress-overlay {
  backdrop-filter: blur(6px) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

.record-progress-overlay > b {
  color: #111827 !important;
  font-weight: 950 !important;
}

.record-progress-overlay > i {
  background: #edf2f7 !important;
}

.record-progress-overlay > i > em,
.record-progress-overlay > i > b {
  background: linear-gradient(90deg, #6b4df6, #f151b8) !important;
}

.id-photo-blueprint .ordinary-records.id-photo-history,
.ordinary-records.id-photo-history {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
  overflow: visible !important;
}

.id-photo-history-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.id-photo-history-actions label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  color: #6b7280 !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.id-photo-history-actions input {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  position: static !important;
  accent-color: #7c3aed !important;
}

.id-photo-delete-selected {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
}

.id-photo-delete-selected::before {
  content: "删" !important;
  display: inline !important;
}

.id-photo-history-more {
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  background: #faf5ff !important;
}

.id-photo-blueprint .id-photo-history-actions .id-photo-history-more,
.id-photo-history-actions .id-photo-history-more {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 84px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  text-align: center !important;
  box-shadow: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  place-items: center !important;
}

.sharpen-task-table,
.watermark-task-table,
.sharpen-task-head,
.watermark-task-head,
.sharpen-task-footer {
  display: none !important;
}

.enhance-more-row,
button.enhance-more-row,
.text-more-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(126, 87, 245, 0.28) !important;
  border-radius: 14px !important;
  color: #6b35d8 !important;
  background:
    linear-gradient(135deg, rgba(126, 87, 245, 0.10), rgba(241, 81, 184, 0.08)),
    #fff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 22px rgba(126, 87, 245, 0.10) !important;
}

.enhance-more-row::before,
button.enhance-more-row::before,
.text-more-row::before {
  content: "⚙";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #6b4df6, #f151b8);
  font-size: 13px;
}

.enhance-more-row.is-open,
button.enhance-more-row.is-open {
  border-color: rgba(126, 87, 245, 0.62) !important;
  background: linear-gradient(135deg, #f7f3ff, #fff2fb) !important;
}

.inpaint-advanced-toggle {
  margin-top: 12px !important;
}

.inpaint-advanced-settings {
  display: grid !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(126, 87, 245, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 87, 245, 0.10), transparent 34%),
    linear-gradient(180deg, #ffffff, #fbf9ff) !important;
  box-shadow: 0 14px 30px rgba(126, 87, 245, 0.10) !important;
}

.inpaint-advanced-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.inpaint-advanced-head strong {
  color: #201a34 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.inpaint-advanced-head small {
  color: #8a809c !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.toast {
  right: 24px !important;
  bottom: 24px !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
  padding: 12px 16px 12px 42px !important;
  border: 1px solid rgba(126, 87, 245, 0.18) !important;
  border-radius: 16px !important;
  color: #263044 !important;
  background:
    radial-gradient(circle at 16px 18px, #7c3aed 0 5px, transparent 6px),
    rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.enhance-compare-stage.is-source-waiting,
.color-enhance-stage.is-source-waiting,
.colorize-compare-stage.is-source-waiting,
.old-photo-compare-stage.is-waiting-result {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
}

.enhance-compare-stage.is-source-waiting .enhance-image.before,
.color-enhance-stage.is-source-waiting .enhance-image.before,
.colorize-compare-stage.is-source-waiting .enhance-image.before,
.old-photo-compare-stage.is-waiting-result .enhance-image.before {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 360px !important;
  clip-path: none !important;
  border-radius: 18px !important;
  background-size: contain !important;
}

.enhance-source-ready-note,
.old-photo-source-ready-note {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 360px !important;
  margin: 0 !important;
  border: 1px dashed #d6deec !important;
  border-radius: 18px !important;
  background:
    linear-gradient(45deg, rgba(226, 233, 243, 0.66) 25%, transparent 25% 50%, rgba(226, 233, 243, 0.66) 50% 75%, transparent 75%) 0 0 / 22px 22px,
    #f8fbff !important;
  box-shadow: none !important;
  transform: none !important;
}

.matting-preview-workspace.is-split .matting-stage,
.inpaint-dual-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
}

.matting-preview-workspace.is-split .matting-canvas,
.inpaint-dual-stage .inpaint-canvas,
.enhance-compare-stage .enhance-image {
  min-width: 0 !important;
  border-radius: 18px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 900px) {
  .ordinary-quality-grid {
    grid-template-columns: 1fr !important;
  }

  .enhance-compare-stage.is-source-waiting,
  .color-enhance-stage.is-source-waiting,
  .colorize-compare-stage.is-source-waiting,
  .old-photo-compare-stage.is-waiting-result,
  .matting-preview-workspace.is-split .matting-stage,
  .inpaint-dual-stage {
    grid-template-columns: 1fr !important;
  }
}