/* E-commerce upload zones — match free-generation compact row layout (自由生图 / 图1) */

:root {
  --yj-upload-shell-border: 1px solid #e2e8f0;
  --yj-upload-shell-border-hover: 1px solid rgba(124, 58, 237, 0.28);
  --yj-upload-shell-bg: #f7f8fb;
  --yj-upload-shell-bg-hover: rgba(139, 92, 246, 0.06);
  --yj-upload-shell-inset: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --yj-upload-shell-inset-hover: inset 0 0 0 1px rgba(167, 139, 250, 0.10);
  --yj-upload-frame-border: 1px solid #dfe7f2;
  --yj-upload-frame-radius: 8px;
  --yj-upload-frame-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  /* Legacy aliases — keep solid borders everywhere. */
  --yj-upload-dash: var(--yj-upload-shell-border);
  --yj-upload-dash-hover: var(--yj-upload-shell-border-hover);
  /* Commerce paired empty upload (product + reference) — single edit point. */
  --yj-commerce-empty-height: 100px;
  --yj-commerce-empty-padding: 8px 10px;
  --yj-commerce-btn-gap: 4px;
  --yj-commerce-btn-padding: 8px 10px;
  --yj-commerce-plus-size: 20px;
  --yj-commerce-text-max-width: 240px;
  --yj-commerce-text-color: #64748b;
  --yj-commerce-text-size: 11px;
  --yj-commerce-text-line: 1.32;
}

/* Commerce paired empty upload: product + reference/competitor share one rule set. */
.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  justify-content: center !important;
  align-items: center !important;
  min-height: var(--yj-commerce-empty-height) !important;
  max-height: var(--yj-commerce-empty-height) !important;
  height: var(--yj-commerce-empty-height) !important;
  padding: var(--yj-commerce-empty-padding) !important;
}

.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--yj-commerce-btn-gap) !important;
  padding: var(--yj-commerce-btn-padding) !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  color: inherit !important;
}

.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: var(--yj-commerce-text-max-width) !important;
  text-align: center !important;
  white-space: normal !important;
  color: var(--yj-commerce-text-color) !important;
}

.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text__main,
.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text__meta {
  display: block !important;
  text-align: center !important;
  white-space: normal !important;
  margin-top: 0 !important;
  font-size: var(--yj-commerce-text-size) !important;
  line-height: var(--yj-commerce-text-line) !important;
  color: var(--yj-commerce-text-color) !important;
}

.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn__plus {
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid color-mix(in srgb, var(--color-primary, #7c3aed) 22%, #e2e8f0) !important;
  border-radius: 10px !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary, #7c3aed) 7%, #ffffff) 0%,
    #ffffff 100%
  ) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px color-mix(in srgb, var(--color-primary, #7c3aed) 10%, transparent) !important;
  font-size: var(--yj-commerce-plus-size) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--accent-purple, #7c3aed) !important;
  margin: 0 !important;
}

.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn:hover .add-image-btn__plus {
  border-color: color-mix(in srgb, var(--color-primary, #7c3aed) 38%, #c4b5fd) !important;
  color: var(--brand-primary, #6d28d9) !important;
}

.upload-zone--commerce-stack.upload-zone--yj-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.upload-zone--yj-compact .add-image-btn__plus,
.upload-zone--yj-compact .rewrite-slot-placeholder__icon.upload-zone-icon-box,
.add-image-btn__plus,
.rewrite-slot-placeholder__icon.upload-zone-icon-box {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-primary, #7c3aed) 22%, #e2e8f0);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary, #7c3aed) 7%, #ffffff) 0%,
    #ffffff 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px color-mix(in srgb, var(--color-primary, #7c3aed) 10%, transparent);
  font-size: var(--yj-commerce-plus-size, 22px);
  font-weight: 300;
  line-height: 1;
  color: var(--accent-purple, #7c3aed);
  margin: 0 !important;
}

.upload-zone--yj-compact .add-image-btn:hover .add-image-btn__plus,
.upload-zone--yj-compact:hover .upload-zone-icon-box,
.rewrite-upload-zone:hover .upload-zone-icon-box,
.selfmedia-upload-zone:hover .upload-zone-icon-box {
  border-color: color-mix(in srgb, var(--color-primary, #7c3aed) 38%, #c4b5fd);
  color: var(--brand-primary, #6d28d9);
}

.upload-zone--yj-compact .upload-text__main,
.add-image-btn .upload-text__main,
.rewrite-slot-placeholder .upload-text__main {
  display: block !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.upload-zone--yj-compact .upload-text__meta,
.add-image-btn .upload-text__meta,
.rewrite-slot-placeholder .upload-text__meta {
  display: block !important;
  margin-top: 2px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* Shell: empty upload zones (GPT / matting / yj-compact; commerce-stack overrides height below). */
#panelStandard.mode-matting #uploadZone:not(.upload-zone--has-items):not(.upload-zone--matting-compact):not(:has(.uploaded-item)),
.upload-zone--yj-compact:not(.upload-zone--commerce-stack):not(.upload-zone--has-items):not(:has(.uploaded-item)),
#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
#gpt-image-form-root .upload-zone.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
#gpt-image-form-root .upload-zone.upload-zone--gpt-product.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80px !important;
  max-height: 88px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border: var(--yj-upload-shell-border) !important;
  border-radius: 6px !important;
  background: var(--yj-upload-shell-bg) !important;
  box-shadow: var(--yj-upload-shell-inset) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.upload-zone--yj-compact:not(.upload-zone--commerce-stack):not(.upload-zone--has-items):not(:has(.uploaded-item)):hover,
.upload-zone--yj-compact:not(.upload-zone--commerce-stack):not(.upload-zone--has-items):not(:has(.uploaded-item)).drag-over,
#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)):hover,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)):hover,
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)):hover,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)):hover,
#gpt-image-form-root .upload-zone.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)):hover,
#gpt-image-form-root .upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)).drag-over,
#panelStandard.mode-matting #uploadZone:not(.upload-zone--has-items):not(.upload-zone--matting-compact):not(:has(.uploaded-item)):hover,
#panelStandard.mode-matting #uploadZone:not(.upload-zone--has-items):not(.upload-zone--matting-compact):not(:has(.uploaded-item)).drag-over {
  border: var(--yj-upload-shell-border-hover) !important;
  background: var(--yj-upload-shell-bg-hover) !important;
  box-shadow: var(--yj-upload-shell-inset-hover) !important;
}

#productUploadSection .preview-container.preview-area,
#panelStandard.mode-matting #productUploadSection .preview-container.preview-area {
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Row affordance inside zone (GPT / matting — commerce-stack uses column block above). */
#panelStandard.mode-matting #uploadZone:not(.upload-zone--has-items):not(.upload-zone--matting-compact):not(:has(.uploaded-item)) .add-image-btn,
#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn,
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  color: inherit !important;
}

.upload-zone--yj-compact:not(.upload-zone--commerce-stack):not(.upload-zone--has-items) .add-image-btn .upload-text,
#gpt-image-panel .upload-zone--gpt-compact:not(.upload-zone--has-items) .add-image-btn .upload-text,
#nano-banana-panel .upload-zone--gpt-compact:not(.upload-zone--has-items) .add-image-btn .upload-text,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder .upload-text,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .rewrite-slot-placeholder .upload-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  max-width: none !important;
  text-align: left !important;
  white-space: normal !important;
  color: #0f172a !important;
}

/* Rewrite panel — match commerce-stack upload shell (主图功能区). */
body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone {
  min-height: var(--yj-commerce-empty-height) !important;
  max-height: var(--yj-commerce-empty-height) !important;
  height: var(--yj-commerce-empty-height) !important;
  padding: var(--yj-commerce-empty-padding) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: var(--yj-commerce-btn-padding) !important;
  border: none !important;
  text-align: left !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder .upload-text {
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder .upload-text__main,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder .upload-text__meta {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 0 !important;
  font-size: var(--yj-commerce-text-size) !important;
  line-height: var(--yj-commerce-text-line) !important;
  font-weight: 500 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder .upload-text__meta {
  margin-top: 1px !important;
  color: var(--yj-commerce-text-color) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder .upload-text__main {
  color: #94a3b8 !important;
}

/* Selfmedia panel — match rewrite / commerce upload shell */
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone {
  min-height: var(--yj-commerce-empty-height) !important;
  max-height: var(--yj-commerce-empty-height) !important;
  height: var(--yj-commerce-empty-height) !important;
  padding: var(--yj-commerce-empty-padding) !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: var(--yj-commerce-btn-padding) !important;
  border: none !important;
  text-align: left !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder__icon {
  display: inline-flex !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder .upload-text {
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder .upload-text__main,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder .upload-text__meta {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 0 !important;
  font-size: var(--yj-commerce-text-size) !important;
  line-height: var(--yj-commerce-text-line) !important;
  font-weight: 500 !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder .upload-text__meta {
  margin-top: 1px !important;
  color: var(--yj-commerce-text-color) !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder .upload-text__main {
  color: #94a3b8 !important;
}

/* Brand-vi + legacy rewrite-upload-zone shell */
.selfmedia-upload-zone,
.rewrite-upload-zone {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80px !important;
  max-height: 88px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border: var(--yj-upload-shell-border) !important;
  border-radius: 6px !important;
  background: var(--yj-upload-shell-bg) !important;
  box-shadow: var(--yj-upload-shell-inset) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone:hover,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone.drag-over,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone:hover,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone.selfmedia-upload-zone--drag,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone.drag-over,
.selfmedia-upload-zone:hover,
.selfmedia-upload-zone--drag,
.rewrite-upload-zone:hover,
.rewrite-upload-zone.drag-over {
  border: var(--yj-upload-shell-border-hover) !important;
  background: var(--yj-upload-shell-bg-hover) !important;
  box-shadow: var(--yj-upload-shell-inset-hover) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  overflow: hidden !important;
}

.reference-upload-zone .add-image-btn__hint {
  display: none !important;
}

/* Outer frame for dual upload columns (selfmedia / brand blocks). */
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-card {
  padding: 10px 12px !important;
  border: var(--yj-upload-frame-border) !important;
  border-radius: var(--yj-upload-frame-radius) !important;
  background: #ffffff !important;
  box-shadow: var(--yj-upload-frame-shadow) !important;
  box-sizing: border-box !important;
}

/* Matting large drop zone — solid shell instead of dashed. */
#panelStandard.mode-matting #uploadZone {
  border: var(--yj-upload-shell-border) !important;
  border-radius: var(--yj-upload-frame-radius) !important;
  background: var(--yj-upload-shell-bg) !important;
  box-shadow: var(--yj-upload-shell-inset) !important;
}

#panelStandard.mode-matting #uploadZone.drag-over {
  border: var(--yj-upload-shell-border-hover) !important;
  background: var(--yj-upload-shell-bg-hover) !important;
  box-shadow: var(--yj-upload-shell-inset-hover) !important;
}

/* GPT / Nano empty upload boxes — override legacy dashed rules in style.css. */
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact,
#gpt-image-form-root .upload-zone.upload-zone--gpt-compact,
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact {
  border: var(--yj-upload-shell-border) !important;
  border-style: solid !important;
  background: var(--yj-upload-shell-bg) !important;
  box-shadow: var(--yj-upload-shell-inset) !important;
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact.drag-over,
#gpt-image-form-root .upload-zone.upload-zone--gpt-compact.drag-over,
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact.drag-over,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.drag-over {
  border: var(--yj-upload-shell-border-hover) !important;
  border-style: solid !important;
  background: var(--yj-upload-shell-bg-hover) !important;
  box-shadow: var(--yj-upload-shell-inset-hover) !important;
}

/* E-commerce upload blocks — align outer card with parameter sections. */
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-card {
  padding: 10px 12px !important;
  border: var(--yj-upload-frame-border) !important;
  border-radius: var(--yj-upload-frame-radius) !important;
  background: #ffffff !important;
  box-shadow: var(--yj-upload-frame-shadow) !important;
  box-sizing: border-box !important;
}

/* Reference upload expandable — single framed panel, no nested clip. */
.upload-ref-expandable.is-open,
.upload-ref-expandable[open] {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.upload-ref-expandable__inner {
  padding: 12px !important;
  border: var(--yj-upload-frame-border) !important;
  border-radius: var(--yj-upload-frame-radius) !important;
  background: #ffffff !important;
  box-shadow: var(--yj-upload-frame-shadow) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#productUploadSection .upload-ref-extras {
  margin-top: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#productUploadSection .upload-ref-expandable,
#productUploadSection .upload-ref-expandable .preview-container.preview-area,
#productUploadSection .upload-ref-expandable .reference-upload-zone {
  max-height: none !important;
  overflow: visible !important;
}

#productUploadSection #referenceUploadZone.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)),
#productUploadSection #fashionModelReferenceUploadZone.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  min-height: 128px !important;
  max-height: none !important;
  height: 128px !important;
  overflow: hidden !important;
}

#productUploadSection .upload-ref-expandable__head {
  margin-bottom: 8px !important;
}

#productUploadSection .upload-ref-expandable__body-grid {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Figure-1 compact upload shell — force solid borders on all upload drop zones. */
#uploadZone.upload-zone--yj-compact,
#referenceUploadZone.reference-upload-zone,
.upload-zone.upload-zone--yj-compact,
.reference-upload-zone,
.upload-zone.upload-zone--gpt-compact,
.rewrite-upload-zone,
.selfmedia-upload-zone,
.ocv-upload-zone {
  border-style: solid !important;
}

.reference-upload-zone:hover,
.reference-upload-zone.drag-over,
#uploadZone.upload-zone--yj-compact:hover,
#uploadZone.upload-zone--yj-compact.drag-over,
#referenceUploadZone.reference-upload-zone:hover,
#referenceUploadZone.reference-upload-zone.drag-over {
  border-style: solid !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  background: var(--yj-upload-shell-bg-hover) !important;
  box-shadow: var(--yj-upload-shell-inset-hover) !important;
}

.reference-upload-zone.upload-zone--has-items,
.reference-upload-zone:has(.uploaded-item) {
  border: var(--yj-upload-shell-border) !important;
  border-style: solid !important;
  background: var(--yj-upload-shell-bg) !important;
}

.reference-upload-zone.upload-zone--has-items .add-image-btn,
.reference-upload-zone:has(.uploaded-item) .add-image-btn {
  border: 1px solid #e2e8f0 !important;
  border-style: solid !important;
  background: #ffffff !important;
}

.ocv-upload-zone {
  border: var(--yj-upload-shell-border) !important;
  border-radius: 6px !important;
  background: var(--yj-upload-shell-bg) !important;
  box-shadow: var(--yj-upload-shell-inset) !important;
}

.ocv-upload-zone.is-dragging {
  border: var(--yj-upload-shell-border-hover) !important;
  background: var(--yj-upload-shell-bg-hover) !important;
  box-shadow: var(--yj-upload-shell-inset-hover) !important;
}

/* Product upload outer card — commerce empty stack uses tokens in :root above. */
#productUploadSection .upload-block--product {
  padding: 6px 8px !important;
  gap: 6px !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: var(--r-card, 8px) !important;
  background: var(--bg-card, #ffffff) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#productUploadSection {
  --yj-commerce-empty-height: 150px;
}

#productUploadSection #uploadZone.upload-zone--commerce-stack:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  min-height: 150px !important;
  max-height: 150px !important;
  height: 150px !important;
}

#productUploadSection .preview-container.preview-area {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
}

/* Shared empty product upload: one surface, consistent 112px target on both sizes. */
html body[data-app-feature] #panelStandard #productUploadSection .upload-block--product {min-height:0 !important;height:auto !important;padding-bottom:12px !important}
html body[data-app-feature] #panelStandard #productUploadSection .upload-block__body,
html body[data-app-feature] #panelStandard #productUploadSection .preview-area {background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;min-height:0 !important;height:auto !important}
html body[data-app-feature] :is(#panelStandard #productUploadSection #uploadZone.upload-zone,#panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone.upload-zone--gpt-compact):not(.upload-zone--has-items):not(:has(.uploaded-item)) {display:flex !important;align-items:center !important;justify-content:center !important;height:112px !important;min-height:112px !important;max-height:none !important;padding:12px !important;border:1px dashed #b8c3d3 !important;border-radius:10px !important;background:#f7f8fa !important;box-shadow:none !important;box-sizing:border-box !important}
html body[data-app-feature] :is(#panelStandard #productUploadSection #uploadZone.upload-zone,#panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone.upload-zone--gpt-compact):not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:12px !important;width:100% !important;height:100% !important;min-height:0 !important;max-height:none !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;position:static !important;transform:none !important}
html body[data-app-feature] :is(#panelStandard #productUploadSection #uploadZone.upload-zone,#panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone.upload-zone--gpt-compact):not(.upload-zone--has-items):not(:has(.uploaded-item)) .upload-text {display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:4px !important;text-align:left !important;white-space:normal !important}
html body[data-app-feature] :is(#panelStandard #productUploadSection #uploadZone.upload-zone,#panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone.upload-zone--gpt-compact):not(.upload-zone--has-items):not(:has(.uploaded-item)) .upload-text__main {font-size:14px !important;font-weight:600 !important;color:#273244 !important;text-align:left !important}
html body[data-app-feature] :is(#panelStandard #productUploadSection #uploadZone.upload-zone,#panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone.upload-zone--gpt-compact):not(.upload-zone--has-items):not(:has(.uploaded-item)) .upload-text__meta {font-size:12px !important;line-height:1.5 !important;color:#566174 !important;text-align:left !important}
html body[data-app-feature] :is(#panelStandard #productUploadSection #uploadZone.upload-zone,#panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone.upload-zone--gpt-compact):not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn__plus {width:36px !important;min-width:36px !important;height:36px !important;min-height:36px !important;border:1px solid #d6dce6 !important;border-radius:8px !important;background:#fff !important;color:var(--yj-appearance-primary,#6d28d9) !important;box-shadow:none !important;font-size:22px !important}
html body[data-app-feature] :is(#panelStandard #productUploadSection #uploadZone.upload-zone,#panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone.upload-zone--gpt-compact):focus-within {outline:2px solid var(--yj-appearance-primary,#6d28d9) !important;outline-offset:2px !important}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload,
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-param,
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block,
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block .upload-block__body,
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block .preview-area {height:auto !important;min-height:0 !important;max-height:none !important;}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel :is(.gpt-step-card--upload,.gpt-upload-param,.gpt-upload-block,.upload-block__body,.preview-area):has(#gptImageUploadBox) {height:auto !important;min-height:0 !important;max-height:none !important;flex-shrink:0 !important;}

/* Paired reference uploads use the same empty-state surface, with wrapping in narrow columns. */
html body[data-app-feature] .page-container.app-container :is(#panelRewrite #rewriteProductZone,#panelRewrite #rewriteCompetitorZone,#panelSelfmediaArticle #selfmediaProductUploadZone,#panelSelfmediaArticle #selfmediaReferenceUploadZone):not(:has(.rewrite-slot-preview:not([hidden]))) {min-height:112px !important;height:auto !important;max-height:none !important;border:1px dashed #b8c3d3 !important;border-radius:10px !important;background:#f7f8fa !important;box-shadow:none !important;padding:12px !important;box-sizing:border-box !important}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite #rewriteProductZone,#panelRewrite #rewriteCompetitorZone,#panelSelfmediaArticle #selfmediaProductUploadZone,#panelSelfmediaArticle #selfmediaReferenceUploadZone) .rewrite-slot-placeholder {min-height:86px !important;height:auto !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:12px !important;padding:0 !important;background:transparent !important}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite,#panelSelfmediaArticle) .rewrite-slot-placeholder__icon {width:36px !important;min-width:36px !important;height:36px !important;min-height:36px !important;border:1px solid #d6dce6 !important;border-radius:8px !important;background:#fff !important;box-shadow:none !important;color:var(--yj-appearance-primary,#6d28d9) !important;font-size:22px !important}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite,#panelSelfmediaArticle) .rewrite-slot-placeholder .upload-text {min-width:0 !important;white-space:normal !important;overflow:visible !important;text-align:left !important}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite,#panelSelfmediaArticle) .rewrite-slot-placeholder .upload-text__main {font-size:14px !important;font-weight:600 !important;color:#273244 !important;white-space:normal !important;overflow:visible !important;text-align:left !important}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite,#panelSelfmediaArticle) .rewrite-slot-placeholder .upload-text__meta {font-size:12px !important;line-height:1.5 !important;color:#566174 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;text-align:left !important}
html body[data-app-feature] .page-container.app-container #panelOneClickVideo #ocvUploadZone {display:grid !important;grid-template-columns:36px minmax(0,1fr) !important;column-gap:12px !important;row-gap:4px !important;min-height:112px !important;height:auto !important;padding:20px !important;border:1px dashed #b8c3d3 !important;border-radius:10px !important;background:#f7f8fa !important;box-shadow:none !important;text-align:left !important}
html body[data-app-feature] .page-container.app-container #panelOneClickVideo #ocvUploadZone .ocv-upload-zone__plus {grid-row:1 / 3 !important;align-self:center !important;display:grid !important;place-items:center !important;width:36px !important;height:36px !important;border:1px solid #d6dce6 !important;border-radius:8px !important;background:#fff !important;color:var(--yj-appearance-primary,#6d28d9) !important;font-size:22px !important}
html body[data-app-feature] .page-container.app-container #panelOneClickVideo #ocvUploadZone strong {font-size:14px !important;color:#273244 !important;align-self:end !important}
html body[data-app-feature] .page-container.app-container #panelOneClickVideo #ocvUploadZone em {font-size:12px !important;line-height:1.5 !important;font-style:normal !important;color:#566174 !important;align-self:start !important}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite #rewriteProductZone,#panelRewrite #rewriteCompetitorZone,#panelSelfmediaArticle #selfmediaProductUploadZone,#panelSelfmediaArticle #selfmediaReferenceUploadZone):not(:has(.rewrite-slot-preview:not([hidden]))) .rewrite-slot-inner {position:static !important;height:auto !important;min-height:86px !important;max-height:none !important;width:100% !important;flex:none !important;overflow:visible !important;}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite,#panelSelfmediaArticle) .rewrite-slot-placeholder .upload-text {flex:1 1 0% !important;width:auto !important;max-width:calc(100% - 48px) !important;}
html body[data-app-feature] .page-container.app-container :is(#panelRewrite #rewriteProductZone,#panelRewrite #rewriteCompetitorZone,#panelSelfmediaArticle #selfmediaProductUploadZone,#panelSelfmediaArticle #selfmediaReferenceUploadZone) .rewrite-slot-placeholder {position:static !important;inset:auto !important;width:100% !important;max-width:100% !important;}

/* The empty upload target must fit its preview wrapper; retain filled-list constraints. */
html body[data-app-feature] #panelStandard #productUploadSection .preview-area:has(> #uploadZone):not(:has(.uploaded-item)):not(:has(> .upload-zone--has-items)) {height:auto !important;min-height:112px !important;max-height:none !important;}

/* One upload group: product input and optional references share a single frame. */
html body[data-app-feature] #panelStandard.dynamic-panel #productUploadSection.upload-section-group {
  box-sizing:border-box !important; width:100% !important; min-width:0 !important;
  padding:8px !important; border:1px solid #e5e9f2 !important; border-radius:8px !important;
  background:#fff !important; box-shadow:none !important;
}
html body[data-app-feature] #panelStandard.dynamic-panel #productUploadSection.upload-section-group > .upload-block.upload-block--product {
  width:100% !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:transparent !important; box-shadow:none !important;
}
html body[data-app-feature] #panelStandard.dynamic-panel #productUploadSection.upload-section-group > .upload-ref-extras {
  width:100% !important; margin:8px 0 0 !important; padding:0 !important; border:0 !important;
}
html body[data-app-feature] #panelStandard #productUploadSection #toggleReferencePanel {
  display:flex !important; align-items:center !important; width:100% !important; max-width:none !important;
  min-height:40px !important; box-sizing:border-box !important; padding:8px 10px !important;
  border:1px dashed #dce2ed !important; border-radius:8px !important;
  background:#f7f8fa !important; box-shadow:none !important; text-align:left !important;
}
/* Uploaded previews replace the empty target; author display rules must respect hidden. */
html body[data-app-feature] .page-container.app-container #panelOneClickVideo #ocvUploadZone[hidden],
html body[data-app-feature] .page-container.app-container #panelOneClickVideo #ocvUploadList[hidden] { display:none !important; }
html body[data-app-feature] .page-container.app-container #panelOneClickVideo #ocvUploadList {
  margin-top:0; flex-wrap:wrap; overflow:visible;
  min-height:112px; background:#f7f8fa; border-color:#b8c3d3;
}
html body[data-app-feature] #panelOneClickVideo #ocvUploadList .ocv-upload-thumb img { object-fit:contain; }

.uploaded-item .upload-preview-btn {
  position:absolute; left:4px; bottom:4px; z-index:4;
  min-height:26px; padding:3px 8px; border:0; border-radius:6px;
  background:rgba(15,23,42,.85); color:#fff; font-size:12px; cursor:pointer;
}
.upload-preview-btn:focus-visible { outline:2px solid #7c3aed; outline-offset:2px; }
.commerce-material-preview {
  position:fixed; inset:0; margin:auto;
  width:min(900px,92vw); max-height:90vh; padding:16px; box-sizing:border-box;
  border:1px solid #dce2ed; border-radius:12px; background:#fff; color:#172033;
}
.commerce-material-preview::backdrop { background:rgba(15,23,42,.65); }
.commerce-material-preview__header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.commerce-material-preview__header strong { overflow-wrap:anywhere; min-width:0; }
.commerce-material-preview__header button { flex-shrink:0; min-height:36px; padding:6px 12px; cursor:pointer; }
.commerce-material-preview > img { display:block; max-width:100%; max-height:72vh; margin:auto; object-fit:contain; }
.commerce-material-preview > img[hidden] { display:none; }

/* Free image references: wrap within the form instead of a clipped single strip. */
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 8px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .uploaded-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 8px !important;
  overflow: visible !important;
}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item {
  width: 100% !important;
  min-width: 0 !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item .remove-image-btn {
  top: 3px !important;
  right: 3px !important;
  box-shadow: none !important;
}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item):not(:has(.uploaded-item:nth-child(10))) .add-image-btn:not(.disabled) {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  gap: 8px !important;
}
html body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn .upload-text {
  max-width: none !important;
}
/* One reference upload tray; each image can declare what to borrow. */
html body:is([data-app-feature="main-image"],[data-app-feature="detail-page"]) #referenceUploadZone #referenceUploadedList .uploaded-item.reference-item--with-usage {
  width:132px !important;height:152px !important;flex:0 0 132px !important;position:relative;
}
html body:is([data-app-feature="main-image"],[data-app-feature="detail-page"]) #referenceUploadZone #referenceUploadedList .uploaded-item.reference-item--with-usage .preview-img {
  height:110px !important;width:100% !important;object-fit:cover;
}
.reference-usage-select {position:absolute;left:6px;right:6px;bottom:6px;width:calc(100% - 12px);height:30px;border:1px solid #d9d2e8;border-radius:7px;background:#fff;color:#46345f;font-family:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;z-index:3;}
.reference-usage-select:focus-visible {outline:2px solid #a67ae8;outline-offset:2px;}
html body #referenceUploadedList .reference-item--with-usage .upload-preview-btn {top:76px !important;bottom:auto !important;}
body:is([data-app-feature="main-image"],[data-app-feature="detail-page"]) #referenceUploadZone:has(.reference-item--with-usage) {height:auto !important;min-height:176px !important;max-height:none !important;}
/* Keep a native, focusable picker; the associated label supplies activation. */
.gpt-upload-block .gpt-native-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.gpt-upload-block .gpt-native-file-input:focus-visible ~ .add-image-btn {
  outline: 2px solid #8b5cf6; outline-offset: -4px;
}