.copy-module-title {
  display: block;
  color: #93c5fd;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.prototype-copy-list .copy-card input,
.prototype-copy-list .copy-card textarea {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prototype-copy-list .copy-card:focus-within {
  border-color: rgba(96, 165, 250, 0.62);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.prototype-copy-list .copy-card input:focus,
.prototype-copy-list .copy-card textarea:focus {
  border-color: rgba(96, 165, 250, 0.58);
  background: rgba(2, 6, 23, 0.62);
}

.prototype-copy-list .copy-card textarea {
  height: auto;
  min-height: 76px;
  max-height: 180px;
  resize: vertical;
}

.copy-mobile-actions {
  display: none;
  gap: 6px;
}

.copy-delete-button {
  width: 24px;
  height: 24px;
}

.copy-meta-row {
  min-width: 0;
  flex-wrap: wrap;
}

.copy-meta-row span {
  overflow-wrap: anywhere;
}

.copy-design-details {
  margin-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, .16);
  color: #94a3b8;
  font-size: 12px;
}

.copy-design-details summary {
  padding: 8px 0 3px;
  color: #93c5fd;
  cursor: pointer;
  font-weight: 800;
}

.copy-design-details p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.copy-design-details p b { color: #dbeafe; }
.copy-design-details p span { color: #94a3b8; }

.copy-design-details small {
  display: block;
  line-height: 1.55;
}

.copy-content-blocks {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.copy-content-blocks label {
  display: grid;
  grid-template-columns: minmax(74px, .42fr) 1fr;
  gap: 7px;
  align-items: center;
}

.copy-content-blocks label span {
  color: #cbd5e1;
  font-weight: 700;
}

.copy-content-blocks input {
  min-width: 0;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.copy-content-blocks em {
  color: #64748b;
  font-style: normal;
}

.detail-step1-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.detail-step1-actions #prepareBtn {
  grid-column: 2;
}

.product-info-readiness {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
  margin: 2px 14px 14px;
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 10px;
  background: rgba(37, 99, 235, .08);
  color: #dbeafe;
}

.product-info-readiness strong { font-size: 13px; }
.product-info-readiness small { color: #93c5fd; line-height: 1.45; }
.product-info-readiness[data-state="recognized"],
.product-info-readiness[data-state="manual"] { border-color: rgba(52, 211, 153, .34); background: rgba(16, 185, 129, .08); }
.product-info-readiness[data-state="recognized"] strong,
.product-info-readiness[data-state="manual"] strong { color: #a7f3d0; }
.product-info-readiness[data-state="processing"] { border-color: rgba(167, 139, 250, .55); background: rgba(109, 40, 217, .14); }
.product-info-readiness[data-state="partial"] { border-color: rgba(129, 140, 248, .58); background: rgba(67, 56, 202, .16); }
.product-info-readiness[data-state="partial"] strong { color: #c7d2fe; }
.product-info-readiness[data-state="failed"],
.product-info-readiness[data-state="empty"] { border-color: rgba(248, 113, 113, .58); background: rgba(127, 29, 29, .24); }
.product-info-readiness[data-state="failed"] strong,
.product-info-readiness[data-state="empty"] strong { color: #fecaca; }
.product-info-panel.is-attention { border-color: rgba(248, 113, 113, .7); box-shadow: 0 0 0 3px rgba(248, 113, 113, .1); }
.product-info-message.is-empty,
.product-info-message.is-failed { border-color: rgba(248, 113, 113, .48); background: rgba(127, 29, 29, .22); color: #fecaca; }
.product-info-message.is-processing { border-color: rgba(167, 139, 250, .48); background: rgba(109, 40, 217, .12); color: #ddd6fe; }

.detail-step1-actions #returnToCopyBtn,
.copy-footer-actions #backResultsBtn {
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 14px;
  background: rgba(37, 99, 235, .12);
  box-shadow: none;
  font-size: inherit;
}

.detail-step1-actions #returnToCopyBtn { grid-column: 3; justify-self: end; }
.copy-footer-actions #backResultsBtn { grid-column: 3; justify-self: end; }

.result-card.is-pending {
  border-color: rgba(96, 165, 250, 0.24);
}

.result-art.is-pending,
.detail-generation-empty {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(96, 165, 250, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.9));
}

.result-art.is-pending::before,
.detail-generation-empty::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.09) 45%, transparent 70%);
  content: "";
  animation: detailLoadingSweep 1.8s ease-in-out infinite;
}

.detail-generation-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  min-height: 260px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 14px;
  color: #e2e8f0;
}

.detail-generation-placeholder,
.detail-generation-error {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 9px;
  max-width: 82%;
  text-align: center;
}

.detail-generation-placeholder strong,
.detail-generation-empty strong {
  color: #e2e8f0;
  font-size: 15px;
}

.detail-generation-placeholder small,
.detail-generation-empty small,
.detail-generation-error small {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.55;
}

.detail-generation-spinner {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: detailSpin 0.9s linear infinite;
}

.detail-generation-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(15, 23, 42, 0.84);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
}

.detail-generation-badge.error {
  border-color: rgba(251, 113, 133, 0.32);
  color: #fecdd3;
}

.detail-result-grid.long-mode .result-art.is-pending {
  min-height: 520px;
}

.result-art.has-image img {
  cursor: zoom-in;
}

/* A long detail image remains a thumbnail in the shared four-column result grid. */
.detail-result-grid .result-card.is-long-result .result-art {
  aspect-ratio: 3 / 4;
}

.detail-result-grid .result-card.is-long-result .result-art.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Align the detail workshop with the product-suite's blue technology visual system. */
.detail-workspace .detail-card {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 28%),
    rgba(15, 23, 42, 0.78);
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.24);
}

.detail-workspace .detail-steps {
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(15, 23, 42, 0.72);
}

.detail-workspace .detail-steps button.active b {
  background: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.18);
}

/* Step 1 upload area: 180px -> 234px, with larger post-upload tiles. */
.detail-workspace #dropZone {
  min-height: 264px;
}

.detail-workspace #dropZone.is-empty .upload-add-tile {
  height: 234px;
  border-color: rgba(148, 163, 184, 0.38);
  background:
    radial-gradient(circle at 50% 32%, rgba(96, 165, 250, 0.09), transparent 34%),
    rgba(255, 255, 255, 0.1);
}

.detail-workspace #dropZone:not(.is-empty) .upload-add-tile,
.detail-workspace #dropZone:not(.is-empty) .upload-preview-tile {
  flex-basis: 264px;
  width: 264px;
  height: 264px;
}

.detail-workspace #dropZone .upload-icon-box {
  background: rgba(35, 48, 79, 0.9);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28);
}

.detail-generation-mode {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.24);
}

.detail-generation-mode-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.detail-generation-mode-head span {
  color: #60a5fa;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.detail-generation-mode-head h4 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 16px;
}

.detail-generation-mode-head small {
  color: #94a3b8;
  font-size: 12px;
  text-align: right;
}

.detail-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: start;
  column-gap: 10px;
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.045);
  color: #94a3b8;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.detail-mode-card > span {
  display: grid;
  grid-row: 1 / span 3;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #60a5fa;
  font-size: 13px;
}

.detail-mode-card strong,
.detail-mode-card small,
.detail-mode-card b {
  display: block;
}

.detail-mode-card strong {
  color: inherit;
  font-size: 14px;
}

.detail-mode-card small {
  margin-top: 4px;
  color: #718096;
  font-size: 12px;
  line-height: 1.4;
}

.detail-mode-card b {
  margin-top: 7px;
  color: #60a5fa;
  font-size: 12px;
}

.detail-mode-card.active {
  border-color: rgba(59, 130, 246, 0.96);
  background: rgba(37, 99, 235, 0.16);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.32) inset, 0 12px 28px rgba(37, 99, 235, 0.1);
  color: #f8fafc;
}

.detail-mode-card.active::after {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 16px #60a5fa;
  content: "";
}

.detail-mode-card[data-detail-mode="long"].active {
  border-color: rgba(168, 85, 247, 0.9);
  background: radial-gradient(circle at right top, rgba(168, 85, 247, 0.16), transparent 38%), rgba(88, 28, 135, 0.12);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.28) inset, 0 12px 28px rgba(168, 85, 247, 0.1);
}

.detail-mode-card[data-detail-mode="long"].active > span,
.detail-mode-card[data-detail-mode="long"].active b {
  color: #d8b4fe;
}

.detail-mode-card[data-detail-mode="long"].active::after {
  background: #c084fc;
  box-shadow: 0 0 16px #c084fc;
}

.copy-footer-actions #generateImagesBtn {
  min-width: 380px;
  min-height: 62px;
  padding: 12px 30px;
  background: linear-gradient(105deg, #2563eb, #8b5cf6 52%, #ec4899);
  box-shadow: 0 14px 30px rgba(99, 102, 241, 0.25);
}

.copy-footer-actions #generateImagesBtn > span {
  display: block;
  font-size: 16px;
}

.copy-footer-actions #generateImagesBtn small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.result-card.is-error {
  border-color: rgba(251, 113, 133, 0.36);
}

.result-art.is-error {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(244, 114, 182, 0.15), transparent 32%),
    linear-gradient(145deg, #1f1630, #301c2d 56%, #181c32);
}

.result-art.is-error::before {
  position: absolute;
  inset: 14% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 113, 133, 0.72), transparent);
  box-shadow: 0 0 18px rgba(251, 113, 133, 0.56);
  content: "";
  animation: detailErrorScan 2s ease-in-out infinite;
}

.detail-generation-error::before {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(251, 113, 133, 0.48);
  border-radius: 50%;
  background: rgba(251, 113, 133, 0.1);
  color: #fda4af;
  content: "!";
  font-size: 22px;
  font-weight: 900;
}

.detail-generation-error strong {
  color: #fecdd3;
}

@keyframes detailLoadingSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes detailSpin {
  to { transform: rotate(360deg); }
}

@keyframes detailErrorScan {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(150px); opacity: 1; }
}

@media (max-width: 760px) {
  .copy-mobile-actions { display: flex; }
  .detail-workspace #dropZone:not(.is-empty) .upload-add-tile,
  .detail-workspace #dropZone:not(.is-empty) .upload-preview-tile { flex-basis: 100%; width: 100%; height: 234px; }
  .detail-mode-grid { grid-template-columns: 1fr; }
  .detail-generation-mode-head { align-items: start; flex-direction: column; }
  .detail-generation-mode-head small { text-align: left; }
  .copy-footer-actions #generateImagesBtn { min-width: 0; }
}

/* Keep every AI detail interaction in the product-suite's blue-purple system. */
.detail-workspace .detail-steps button.active b {
  background: rgba(139, 92, 246, 0.18);
  color: #d8b4fe;
}

.detail-workspace .advanced-check input,
.detail-workspace .module-card input {
  accent-color: #8b5cf6;
}

.detail-workspace .detail-cta > button,
.detail-workspace .module-generate-row button,
.detail-workspace .result-primary-btn {
  background: linear-gradient(105deg, #2563eb, #8b5cf6 52%, #ec4899);
  box-shadow: 0 14px 30px rgba(99, 102, 241, 0.25);
}

.detail-workspace .detail-cta button small {
  color: #ede9fe;
}

.detail-workspace .copy-card.drag-over {
  border-color: #8b5cf6;
}

.detail-workspace .module-card:has(input:checked) {
  border-color: rgba(139, 92, 246, 0.72);
  background: rgba(88, 28, 135, 0.16);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.14) inset;
}

.detail-workspace .result-art:not(.is-pending):not(.is-error) {
  background: linear-gradient(145deg, #172554, #312e81 55%, #7e22ce);
}

.detail-workspace .long-mode .result-art:not(.is-pending):not(.is-error) {
  background: linear-gradient(#172554, #312e81, #581c87);
}

.detail-workspace .result-progress-track i {
  background: linear-gradient(90deg, #2563eb, #8b5cf6, #c084fc);
}

.detail-image-modal-stage {
  overflow: hidden;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
}

.detail-image-modal-stage.is-zoomed {
  cursor: grab;
}

.detail-image-modal-stage.is-zoomed:active {
  cursor: grabbing;
}

.detail-image-modal-stage #modalImage {
  transition: transform 0.12s ease-out;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}

.detail-image-modal-stage.is-panning #modalImage {
  transition: none;
}

.detail-preview-zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(15, 23, 42, 0.8);
  color: #ddd6fe;
  font-size: 11px;
  pointer-events: none;
}