/* Settings editors share the page gutters; only their internal presentation changes. */
#app #editor .editor-page-bar {
  margin: 0 0 18px;
  padding: 0 0 14px;
  min-height: 32px;
  background: transparent;
}
#app #editor .editor-top { margin: 0 0 24px; padding: 0; border: 0; }
#app #editor .editor-top h2 { font-size: 28px !important; line-height: 1.3; }
#app #editor .editor-top p { margin: 8px 0 0; }
#app #editor .form-section {
  display: grid;
  gap: 22px;
  margin: 0 0 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
#app #editor .form-section-title { margin: 0; padding: 0; gap: 12px; align-items: flex-start; }
#app #editor .form-section-title h3 { margin: 0; font-size: 17px !important; line-height: 1.5; }
#app #editor .form-section-title p { margin: 7px 0 0; font-size: 12px; line-height: 1.8; }
#app #editor .form-section-body { min-width: 0; }
#app #editor .product-info-template-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
#app #editor .product-info-template-actions label { max-width: 100%; }
#app #editor .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
#app #editor .form-field { min-width: 0; gap: 8px; align-content: start; }
#app #editor .form-field > span { font-weight: 650; color: var(--ink); }
#app #editor .form-field > small { line-height: 1.7; font-weight: 400; }
#app #editor :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) { min-height: 42px; }
#app #editor textarea { min-height: 104px; line-height: 1.7; }
#app #editor .repeat-list { gap: 16px; }
#app #editor .repeat-card { margin: 0; padding: 20px; border-radius: 10px; }
#app #editor .repeat-card + .repeat-card { margin-top: 16px; }
#app #editor .form-section-body > .quiet { margin-top: 14px; }
#app #editor .image-upload-field input[type=file] { padding: 10px; height: auto; background: var(--paper); }
#app #editor .image-upload-field input[type=file]::file-selector-button {
  margin-right: 12px; padding: 7px 12px; border: 0; border-radius: 6px;
  background: #e9efe3; color: #4c6642; font-weight: 650; cursor: pointer;
}
#app #editor .image-crop-picker { width: 100%; max-width: 360px; margin: 4px 0 0; padding: 12px; background: #f5f7f1; }
#app #editor .image-crop-frame { display: block; min-height: 0; margin: 0 auto; border: 0; }
#app #editor .image-crop-frame img { display: block; width: 100%; height: auto; max-height: none; }
#app #editor .image-crop-frame img[hidden] { display: none; }
#app #editor .image-crop-frame:has(img[hidden]) { display: grid; place-items: center; min-height: 140px; padding: 12px; }
#app #editor .image-crop-frame:has(img[hidden]) .image-crop-selection { display: none; }
#app #editor .image-crop-picker small { font-size: 11px; }
#app #editor .managed-image-preview:not(.image-crop-frame) { max-width: 240px; min-height: 100px; }
#app #editor .managed-image-preview:not(.image-crop-frame) img { max-height: 220px; }
#app #editor .editor-sticky {
  margin: 24px 0 0; padding: 14px 20px; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); box-shadow: 0 -4px 18px rgba(45, 60, 36, .045);
}
/* Keep headings above their content. Media is grouped into compact cards,
   never a full-width upload row with a distant preview. */
#app #editor :is(#product-main-images, #product-detail-images) {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch;
  counter-reset: editor-image;
}
#app #editor :is(#product-main-images, #product-detail-images) > .repeat-card {
  min-width: 0; margin: 0; padding: 16px; counter-increment: editor-image;
}
#app #editor #product-main-images > .repeat-card::before {
  content: "第 " counter(editor-image) " 张"; display: block;
  margin-bottom: 12px; padding-right: 24px; font-weight: 700; color: var(--ink);
}
#app #editor #product-main-images > .repeat-card:first-child::before { content: "第 1 张 · 列表封面"; }
#app #editor :is(.product-main-image-card, .product-detail-image-card) .image-upload-field {
  display: flex; flex-direction: column; gap: 10px;
}
#app #editor :is(.product-main-image-card, .product-detail-image-card) .image-upload-field > span { order: 0; font-size: 12px; }
#app #editor .product-main-image-card .image-crop-picker {
  order: 1; display: grid; grid-template-rows: 280px auto;
  align-items: center; max-width: none; margin: 0; padding: 10px;
}
#app #editor .product-main-image-card .image-crop-picker-head { display: none; }
#app #editor .product-main-image-card .image-crop-frame { grid-row: 1; }
#app #editor .product-main-image-card .image-crop-picker-actions { grid-row: 2; flex-wrap: wrap; gap: 8px; }
#app #editor :is(.product-main-image-card, .product-detail-image-card) input[type=file] { order: 2; min-width: 0; max-width: 100%; }
#app #editor :is(.product-main-image-card, .product-detail-image-card) .image-upload-field > small { order: 3; }
#app #editor .product-main-image-card .image-upload-field > small:not([data-image-status]) { display: none; }
#app #editor .product-detail-image-card .managed-image-preview { order: 1; width: 100%; max-width: none; height: 280px; }
#app #editor .product-detail-image-card .managed-image-preview img { width: 100%; height: 100%; max-height: 280px; object-fit: contain; }
#app #editor .supply-basics-grid > .form-field:first-child { grid-column: 1 / -1; max-width: 760px; width: 100%; }
#app #editor .supply-basics-grid > .image-upload-field {
  grid-column: auto; padding: 16px; border: 1px solid var(--line); border-radius: 10px;
  background: #f8f9f5; display: flex; flex-direction: column; gap: 10px; align-self: stretch;
}
#app #editor .supply-basics-grid > .image-upload-field > span { order: 0; }
#app #editor .supply-basics-grid .image-crop-picker { order: 1; margin: 0; max-width: none; }
#app #editor .supply-basics-grid .image-crop-picker-head { display: none; }
#app #editor .supply-basics-grid .managed-image-preview:not(.image-crop-frame) { order: 1; width: 100%; max-width: none; height: 280px; }
#app #editor .supply-basics-grid input[type=file] { order: 2; min-width: 0; }
#app #editor .supply-basics-grid .image-upload-field > small { order: 3; }
@media (min-width: 1100px) {
  #app #editor :is(#product-main-images, #product-detail-images) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1450px) {
  #app #editor :is(#product-main-images, #product-detail-images) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app #editor .supply-basics-grid > .image-upload-field {
    display: grid; grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; align-items: start; column-gap: 16px;
  }
  #app #editor .supply-basics-grid > .image-upload-field > span { grid-column: 1 / -1; grid-row: 1; }
  #app #editor .supply-basics-grid :is(.image-crop-picker, .managed-image-preview:not(.image-crop-frame)) { grid-column: 1; grid-row: 2 / span 3; }
  #app #editor .supply-basics-grid input[type=file] { grid-column: 2; grid-row: 2; }
  #app #editor .supply-basics-grid .image-upload-field > small { grid-column: 2; }
}
@media (min-width: 1900px) {
  #app #editor :is(#product-main-images, #product-detail-images) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #app #editor .form-section { padding: 18px; gap: 18px; margin-bottom: 16px; }
  #app #editor .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #app #editor .repeat-card { padding: 16px; }
  #app #editor .editor-sticky { padding: 12px; gap: 8px; }
  #app #editor .editor-top h2 { font-size: 24px !important; }
}