#submitModal {
  --dialog-gold: #bc8a48;
  --dialog-border: #eeece8;
  position: absolute;
  inset: auto 0 0;
  z-index: 300;
  display: none;
  width: 100%;
  height: var(--确认栏高);
  padding: 12px calc(14px + var(--安全右, env(safe-area-inset-right))) calc(10px + var(--安全下, env(safe-area-inset-bottom))) calc(14px + var(--安全左, env(safe-area-inset-left)));
  overflow: hidden;
  border-top: 1px solid var(--dialog-border);
  background: #fff;
  color: #282725;
}

#submitModal.is-open { display: block; }

#submitModal .submit-dialog,
#submitModal .submit-main-grid,
#submitModal .submit-form,
#submitModal .submit-review-panel,
#submitModal .submit-review-content {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#submitModal .submit-page-topbar,
#submitModal .submit-bird-panel,
#submitModal .brand-title,
#submitModal .panel-corner,
#submitModal .bottom-heading,
#submitModal .submit-customer-section > .submit-section-title { display: none; }

#submitModal button {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--dialog-border);
  border-radius: 6px;
  background: #faf9f7;
  color: #725b3d;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

#submitModal .submit-primary {
  border-color: var(--dialog-gold);
  background: linear-gradient(110deg, #b98441, #d3b080);
  color: #fff;
}

#submitModal button:disabled { opacity: 0.45; cursor: default; }
#submitModal button:active:not(:disabled) { filter: brightness(0.94); }
#submitModal :focus-visible { outline: 2px solid var(--dialog-gold); outline-offset: 2px; }

#submitModal .submit-main-grid { display: block; }
#submitModal .submit-review-content {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
}

#submitModal .submit-selected-section,
#submitModal .submit-customer-section { min-width: 0; min-height: 0; }
#submitModal .submit-selected-section { display: grid; grid-template-rows: 20px minmax(0, 1fr); gap: 5px; }

#submitModal .submit-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
}

#submitModal .submit-section-title strong { min-width: 0; }
#submitModal .submit-section-title em { flex-shrink: 0; color: #96918a; font-size: 10px; font-style: normal; }

#submitModal .submit-selection-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#submitModal .submit-selection-row {
  display: grid;
  grid-template-rows: minmax(18px, 1fr) auto auto;
  align-content: stretch;
  gap: 1px;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  border: 1px solid #f1eeea;
  border-radius: 6px;
  background: #faf9f7;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}

#submitModal .submit-selection-thumb {
  position: relative;
  width: 100%;
  min-height: 18px;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: #eae8e3;
}

#submitModal .submit-selection-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#submitModal .submit-selection-thumb span {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 17px;
  padding: 1px 3px;
  border-radius: 0 0 3px 0;
  background: #c49a63;
  color: #fff;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
}

#submitModal .submit-selection-row strong,
#submitModal .submit-selection-row em { display: block; min-width: 0; overflow-wrap: anywhere; }
#submitModal .submit-selection-row strong { font-weight: 600; }
#submitModal .submit-selection-row em { color: #8e8981; font-size: 9px; font-style: normal; }
#submitModal .submit-customer-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 15px;
  overflow: hidden;
  border-left: 1px solid var(--dialog-border);
}

#submitModal .submit-info-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#submitModal .submit-field {
  display: grid;
  grid-template-rows: 14px minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid var(--dialog-border);
  border-radius: 6px;
  background: #faf9f7;
  font-size: 11px;
}
#submitModal .submit-field > span { color: #938d84; font-size: 10px; line-height: 14px; }
#submitModal .submit-field input,
#submitModal .submit-field select {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline-offset: 0;
  background: transparent;
  color: #282725;
  font: inherit;
  font-size: 13px;
  line-height: 22px;
}

#submitModal .submit-field input::placeholder { color: #aaa39a; font-size: 10px; }
#submitModal .submit-field.is-invalid,
#submitModal .submit-field:has(input[aria-invalid="true"]) { border-color: #b12c27; background: #fff8f6; }
#submitModal .submit-message { flex-shrink: 0; margin: 0; color: #615c54; font-size: 10px; line-height: 14px; overflow-wrap: anywhere; }
#submitModal .submit-message:empty { display: none; }
#submitModal .submit-message[data-type="error"] { color: #a52a26; }

#submitModal .submit-privacy-consent {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin: 0;
  color: #8c867e;
  font-size: 11px;
  line-height: 16px;
}

#submitModal .submit-privacy-consent input { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--dialog-gold); }
#submitModal .submit-privacy-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#submitModal .submit-actions { display: grid; flex-shrink: 0; grid-template-columns: 1fr 1.2fr; gap: 8px; margin: 0; }

#imageZoomModal {
  --大图适配: contain;
  --全屏画布色: #111111;
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--全屏画布色);
  color: #fff;
}

#imageZoomModal.is-open { display: block; }
#imageZoomModal.is-bird {
  --全屏画布色: #efefee;
}
#imageZoomModal .image-zoom-stage,
#imageZoomModal .image-zoom-content {
  background: var(--全屏画布色);
}

#imageZoomModal .image-zoom-close {
  position: absolute;
  top: calc(var(--返回按钮上距) + var(--安全上, env(safe-area-inset-top)));
  right: calc(2.3% + var(--安全右, env(safe-area-inset-right)));
  z-index: 2;
  width: var(--返回按钮尺寸);
  height: var(--返回按钮尺寸);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--选配金);
  box-shadow: 0 3px 12px #00000012;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

#imageZoomModal .image-zoom-close .selection-icon { font-size: var(--返回图标尺寸); }
#imageZoomModal .image-zoom-close:focus-visible { outline: 2px solid #986321; outline-offset: -2px; }
#imageZoomModal .image-zoom-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#imageZoomModal .image-zoom-stage.is-dragging { cursor: grabbing; }
#imageZoomModal .image-zoom-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(var(--zoom-scale, 1));
  transform-origin: center center;
}

#imageZoomModal .image-zoom-content.is-zoom-animating { transition: transform 220ms ease-out; }
#imageZoomModal .image-zoom-content > img,
#imageZoomModal .image-zoom-overlay-stack,
#imageZoomModal .image-zoom-overlay-stack > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--大图适配);
  object-position: 50% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}

#imageZoomModal .image-zoom-base { z-index: 0; }
#imageZoomModal .image-zoom-overlay { z-index: 1; }
#imageZoomModal .image-zoom-overlay-stack { z-index: 2; }
#imageZoomModal img.is-empty,
#imageZoomModal img:not([src]) { visibility: hidden; }
#imageZoomModal .image-zoom-caption {
  display: none;
}

@media (max-width: 760px) and (orientation: landscape) {
  #submitModal { padding: 10px calc(10px + var(--安全右, env(safe-area-inset-right))) calc(8px + var(--安全下, env(safe-area-inset-bottom))) calc(10px + var(--安全左, env(safe-area-inset-left))); }
  #submitModal .submit-review-content { gap: 12px; }
  #submitModal .submit-customer-section { gap: 6px; padding-left: 12px; overflow: hidden; }
  #submitModal .submit-selected-section { grid-template-rows: 22px minmax(0, 1fr); gap: 6px; }
  #submitModal .submit-section-title { font-size: 14px; line-height: 22px; }
  #submitModal .submit-selection-list { gap: 5px; overflow: hidden; }
  #submitModal .submit-selection-row { padding: 4px; font-size: 10px; line-height: 12px; }
  #submitModal .submit-selection-row em { font-size: 9px; }
  #submitModal .submit-info-grid { gap: 6px; }
  #submitModal .submit-field { padding: 5px 7px; }
  #submitModal .submit-field input,
  #submitModal .submit-field select { font-size: 12px; min-height: 20px; }
  #submitModal .submit-field input::placeholder { font-size: 11px; }
  #submitModal .submit-privacy-consent { min-height: 24px; font-size: 10px; line-height: 14px; }
  #submitModal .submit-actions { gap: 8px; }
  #submitModal button { min-height: 34px; font-size: 12px; }
}

@media (min-height: 600px) and (orientation: landscape) {
  #submitModal { padding-top: 16px; padding-bottom: calc(16px + var(--安全下, env(safe-area-inset-bottom))); }
  #submitModal .submit-review-content { gap: 24px; }
  #submitModal .submit-customer-section { gap: 8px; padding-left: 24px; }
  #submitModal .submit-selected-section { grid-template-rows: 30px minmax(0, 1fr); gap: 10px; }
  #submitModal .submit-section-title { font-size: 20px; line-height: 30px; }
  #submitModal .submit-section-title em { font-size: 12px; }
  #submitModal .submit-selection-list { gap: 8px; }
  #submitModal .submit-selection-row { gap: 4px; padding: 6px; font-size: 14px; line-height: 18px; }
  #submitModal .submit-selection-row em { font-size: 12px; }
  #submitModal .submit-selection-thumb span { min-width: 24px; font-size: 12px; line-height: 20px; }
  #submitModal .submit-info-grid { gap: 10px; grid-template-rows: repeat(2, minmax(54px, 1fr)); }
  #submitModal .submit-field { grid-template-rows: 18px minmax(24px, 1fr); gap: 4px; padding: 9px 12px; }
  #submitModal .submit-field > span { font-size: 12px; line-height: 18px; }
  #submitModal .submit-field input,
  #submitModal .submit-field select { font-size: 16px; line-height: 24px; }
  #submitModal .submit-field input::placeholder { font-size: 14px; }
  #submitModal .submit-privacy-consent { gap: 8px; min-height: 36px; font-size: 12px; line-height: 18px; }
  #submitModal .submit-privacy-consent input { flex-basis: 20px; width: 20px; height: 20px; }
  #submitModal .submit-actions { gap: 12px; }
  #submitModal button { min-height: 44px; font-size: 16px; }
  #submitModal .submit-message { font-size: 12px; line-height: 18px; }
}

@media (orientation: portrait) {
  #submitModal { overflow-y: auto; }
  #submitModal .submit-review-content { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  #submitModal .submit-dialog,
  #submitModal .submit-main-grid,
  #submitModal .submit-form,
  #submitModal .submit-review-panel { overflow: visible; }
  #submitModal .submit-selected-section { min-height: 168px; }
  #submitModal .submit-customer-section { padding: 10px 0 0; border-top: 1px solid var(--dialog-border); border-left: 0; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  #imageZoomModal .image-zoom-content.is-zoom-animating { transition: none; }
}


/* 确认栏贴在选配画布底部，做成和效果图一样的圆角白卡片。 */
.app-shell:not(.is-home) > #submitModal {
  position: relative;
  inset: auto;
  z-index: 20;
  width: min(97.2%, calc(var(--app-viewport-height, 100dvh) * 844 / 390 * 0.972));
  height: 48%;
  max-height: 52%;
  margin: 0 0 1.2% 0;
  padding: 12px 16px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px #00000018;
}
html.is-wxapp-webview .app-shell:not(.is-home) > #imageZoomModal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

html.is-wxapp-webview .app-shell:not(.is-home) > #submitModal {
  position: absolute;
  left: 1.4%;
  right: 1.4%;
  bottom: 2.2%;
  width: auto;
  height: 48%;
  max-height: none;
  margin: 0;
}


#imageZoomModal .image-zoom-close {
  top: calc(12px + var(--安全上, env(safe-area-inset-top)));
  right: calc(12px + var(--安全右, env(safe-area-inset-right)));
  width: 40px;
  height: 40px;
}
#imageZoomModal .image-zoom-close .selection-icon { font-size: 22px; }


#submitModal {
  display: block;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease, visibility 0s 320ms;
}
#submitModal.is-open {
  display: block;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease, visibility 0s;
}

#submitModal .submit-customer-section {
  gap: 4px;
  min-height: 0;
  overflow: hidden;
}
#submitModal .submit-info-grid {
  flex: 1 1 auto;
  min-height: 0;
  gap: 5px;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
#submitModal .submit-field {
  grid-template-rows: 12px minmax(0, 1fr);
  gap: 1px;
  padding: 4px 7px;
  font-size: 11px;
}
#submitModal .submit-field > span { font-size: 10px; line-height: 12px; }
#submitModal .submit-field input,
#submitModal .submit-field select {
  min-height: 18px;
  font-size: 12px;
  line-height: 18px;
}
#submitModal .submit-field input::placeholder { font-size: 11px; }
#submitModal .submit-message {
  flex-shrink: 0;
  min-height: 16px;
  max-height: 32px;
  overflow: hidden;
  font-size: 10px;
  line-height: 14px;
}
#submitModal .submit-message:empty {
  display: block;
  visibility: hidden;
}
#submitModal .submit-privacy-consent {
  min-height: 22px;
  font-size: 10px;
  line-height: 14px;
}
#submitModal .submit-actions { gap: 6px; }
#submitModal button { min-height: 32px; font-size: 12px; }

@media (min-width: 900px) {
  #submitModal .submit-info-grid { gap: 6px; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  #submitModal .submit-field { grid-template-rows: 12px minmax(0, 1fr); padding: 5px 8px; }
  #submitModal .submit-field > span { font-size: 10px; line-height: 12px; }
  #submitModal .submit-field input,
  #submitModal .submit-field select { font-size: 13px; min-height: 18px; line-height: 18px; }
  #submitModal .submit-privacy-consent { min-height: 22px; font-size: 10px; line-height: 14px; }
  #submitModal button { min-height: 34px; font-size: 13px; }
}


#imageZoomModal {
  display: block;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease, visibility 0s 280ms;
}
#imageZoomModal.is-open {
  display: block;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 280ms ease, visibility 0s;
}
#imageZoomModal .image-zoom-stage {
  transform: scale(0.96);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}
#imageZoomModal.is-open .image-zoom-stage {
  transform: none;
}
#imageZoomModal .image-zoom-close {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
}
#imageZoomModal.is-open .image-zoom-close {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  #imageZoomModal,
  #imageZoomModal .image-zoom-stage,
  #imageZoomModal .image-zoom-content,
  #imageZoomModal .image-zoom-close { transition: none; }
}