/* 电商页顶栏/底栏/主内容共用加宽容器，其它页面仍走全局 .site-container */
body:has(.ecom-index) .site-container {
  width: min(1536px, 100%);
}

body:has(.ecom-workbench) .site-container {
  width: min(1440px, 100%);
}

.ecom-page {
  --ecom-accent: #6254f5;
  --ecom-accent-soft: #f1efff;
  color: #202332;
  width: 100%;
  margin: 0 auto;
  font-size: 13px;
}

.ecom-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.2rem;
  margin: 0 0 0.8rem;
  color: #888d99;
  font-size: 0.82rem;
}

.ecom-breadcrumb a { color: inherit; text-decoration: none; }
.ecom-breadcrumb a:hover { color: #5546ed; }
.ecom-breadcrumb strong { color: #282b37; font-weight: 650; }

.ecom-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 0.92fr) minmax(390px, 2.7fr) minmax(185px, 0.72fr);
  gap: 0.85rem;
  align-items: stretch;
}

.ecom-config,
.ecom-preview,
.ecom-history {
  min-width: 0;
  border: 1px solid #e7e8ed;
  border-radius: 1.05rem;
  background: #fff;
  box-shadow: 0 2px 0 rgba(20, 24, 40, 0.035);
}

.ecom-config {
  display: flex;
  flex-direction: column;
  gap: 1.12rem;
  padding: 1.15rem;
}

.ecom-config__heading { display: flex; align-items: center; gap: 0.7rem; }
.ecom-mark {
  display: grid;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 0.82rem;
  background: var(--ecom-accent-soft);
  color: var(--ecom-accent);
  font-size: 0.78rem;
  font-weight: 750;
}
.ecom-config__heading h1 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.ecom-config__heading p { margin: 0.25rem 0 0; color: #858a97; font-size: 0.76rem; line-height: 1.45; }

.ecom-field { display: grid; gap: 0.52rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.ecom-field__heading,
.ecom-choice-field legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  color: #575c69;
  font-size: 0.82rem;
  font-weight: 650;
}
.ecom-field__heading span,
.ecom-choice-field legend span { color: #999eaa; font-size: 0.72rem; font-weight: 400; }
.ecom-field-hint { margin: 0; color: #8c91a0; font-size: 0.7rem; line-height: 1.55; }

.ecom-upload {
  position: relative;
  display: grid;
  grid-template-columns: 5.7rem minmax(0, 1fr);
  gap: 0.7rem;
  min-width: 0;
  min-height: 6.5rem;
  padding: 0.45rem;
  overflow: hidden;
  border: 1px solid #e4e5eb;
  border-radius: 0.8rem;
  background: #fbfbfc;
}
.ecom-upload:focus-within,
.ecom-reference-upload:focus-within { outline: 3px solid color-mix(in srgb, var(--ecom-accent) 20%, transparent); }
.ecom-upload.is-dragging,
.ecom-reference-upload.is-dragging { border-color: var(--ecom-accent); background: var(--ecom-accent-soft); }
.ecom-upload > input[type="file"],
.ecom-reference-upload > input[type="file"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ecom-upload__preview { width: 5.7rem; height: 5.7rem; border-radius: 0.58rem; background: #fff; object-fit: cover; }
.ecom-upload__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.25rem; padding: 0.45rem 0.25rem; }
.ecom-upload__copy strong { max-width: 100%; overflow: hidden; color: #393d49; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.ecom-upload__copy > span { color: #969ba7; font-size: 0.68rem; }
.ecom-text-button { position: relative; z-index: 2; margin: 0.15rem 0 0; padding: 0; border: 0; background: transparent; color: var(--ecom-accent); font-size: 0.7rem; font-weight: 650; cursor: pointer; }
.ecom-upload__remove { position: absolute; z-index: 2; top: 0.32rem; right: 0.35rem; border: 0; background: rgba(255,255,255,.9); color: #707583; font-size: 0.66rem; cursor: pointer; }
.ecom-example-badge { position: absolute; z-index: 2; top: 0.35rem; left: 0.35rem; padding: 0.18rem 0.42rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #646977; font-size: 0.6rem; line-height: 1.4; }

.ecom-chip-list { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.ecom-chip-list button {
  min-height: 1.82rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid #e5e6ec;
  border-radius: 999px;
  background: #fff;
  color: #7d8290;
  font: inherit;
  font-size: 0.69rem;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.ecom-chip-list button:hover { border-color: var(--ecom-accent); color: var(--ecom-accent); }
.ecom-chip-list button.is-selected { border-color: var(--ecom-accent); background: var(--ecom-accent-soft); color: var(--ecom-accent); font-weight: 650; }

.ecom-input,
.ecom-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #e7e8ed;
  border-radius: 0.7rem;
  background: #fafafb;
  color: #343845;
  font: inherit;
  font-size: 0.74rem;
}
.ecom-input { min-height: 2.65rem; padding: 0.6rem 0.7rem; }
.ecom-textarea { min-height: 5rem; padding: 0.65rem 0.7rem; resize: vertical; line-height: 1.55; }
.ecom-input:focus,
.ecom-textarea:focus { border-color: color-mix(in srgb, var(--ecom-accent) 55%, #fff); outline: 3px solid color-mix(in srgb, var(--ecom-accent) 13%, transparent); background: #fff; }
.ecom-input::placeholder,
.ecom-textarea::placeholder { color: #a0a4ae; }

.ecom-generation-summary { display: grid; gap: 0.58rem; padding: 0.78rem; border-radius: 0.75rem; background: #f8f8fb; }
.ecom-generation-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ecom-generation-summary span { color: #858a97; font-size: 0.68rem; }
.ecom-generation-summary strong { color: #383c48; font-size: 0.72rem; font-weight: 650; text-align: right; }
.ecom-generation-summary .ecom-accent-text { color: var(--ecom-accent); }

.ecom-choice-field { gap: 0.6rem; }
.ecom-choice-field legend { float: left; margin-bottom: 0.12rem; }
.ecom-choice-field legend + * { clear: both; }
.ecom-garment-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; clear: both; }
.ecom-garment-option-wrap { display: grid; gap: 0.26rem; }
.ecom-garment-option {
  position: relative;
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 5.55rem;
  padding: 0.42rem;
  overflow: hidden;
  border: 1px solid #e3e5eb;
  border-radius: 0.75rem;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
}
.ecom-garment-option-wrap.is-selected .ecom-garment-option { border-color: var(--ecom-accent); box-shadow: inset 0 0 0 1px var(--ecom-accent); }
.ecom-garment-option > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ecom-garment-option:focus-within { outline: 3px solid color-mix(in srgb, var(--ecom-accent) 20%, transparent); }
.ecom-garment-option__image { display: block; width: 3.35rem; height: 4.55rem; overflow: hidden; border-radius: 0.48rem; background: #f4f4f6; }
.ecom-garment-option__image img { width: 100%; height: 100%; object-fit: cover; }
.ecom-garment-option > span:nth-of-type(2) { display: grid; gap: 0.22rem; }
.ecom-garment-option strong { color: #454956; font-size: 0.7rem; }
.ecom-garment-option small { color: #999eaa; font-size: 0.62rem; }
.ecom-garment-option__change { position: absolute; right: 0.36rem; bottom: 0.3rem; color: var(--ecom-accent); font-size: 0.62rem; }
.ecom-garment-option--empty { grid-template-columns: 2rem minmax(0, 1fr); border-style: dashed; }
.ecom-garment-option__symbol { display: grid; width: 2.6rem; height: 4.25rem; place-items: center; overflow: hidden; border: 1px dashed #e5e6ec; border-radius: 0.5rem; color: #8c91a0; font-size: 0.62rem; }
.ecom-garment-option__symbol img { width: 100%; height: 100%; object-fit: cover; }
.ecom-garment-upload { position: relative; display: grid; min-height: 1.7rem; place-items: center; overflow: hidden; border: 1px solid #e9e8ef; border-radius: 0.5rem; color: var(--ecom-accent); font-size: 0.65rem; cursor: pointer; }
.ecom-garment-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.ecom-segmented { display: inline-grid; grid-template-columns: repeat(2, minmax(5.3rem, 1fr)); gap: 0.32rem; clear: both; }
.ecom-segmented label { display: grid; min-height: 2.2rem; place-items: center; padding: 0.35rem 0.9rem; border: 1px solid #e4e5eb; border-radius: 999px; background: #fff; color: #828795; cursor: pointer; font-size: 0.72rem; transition: all 150ms ease; }
.ecom-segmented label.is-selected { border-color: var(--ecom-accent); background: var(--ecom-accent-soft); color: var(--ecom-accent); font-weight: 650; }
.ecom-segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ecom-segmented label:focus-within { outline: 3px solid color-mix(in srgb, var(--ecom-accent) 20%, transparent); }
.ecom-output-note { display: grid; gap: 0.35rem; padding: 0.8rem; border: 1px solid #eee7fb; border-radius: 0.75rem; background: #faf7ff; }
.ecom-output-note strong { color: var(--ecom-accent); font-size: 0.75rem; }
.ecom-output-note p,
.ecom-output-note small { margin: 0; color: #777d89; font-size: 0.69rem; line-height: 1.55; }

.ecom-reference-upload {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.8rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #e5e6ec;
  border-radius: 0.72rem;
  background: #fff;
}
.ecom-reference-upload__thumb { position: relative; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 0.55rem; background: #f3f3f6; }
.ecom-reference-upload__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ecom-reference-upload__thumb .ecom-example-badge { top: auto; bottom: 0.1rem; left: 0.1rem; padding: 0.08rem 0.25rem; font-size: 0.48rem; }
.ecom-reference-upload__action svg,
.ecom-reference-upload .ecom-upload__remove svg { display: block; width: 1rem; height: 1rem; }
.ecom-reference-upload__text { display: grid; min-width: 0; gap: 0.25rem; }
.ecom-reference-upload__text strong { overflow: hidden; color: #494d59; font-size: 0.71rem; text-overflow: ellipsis; white-space: nowrap; }
.ecom-reference-upload__text small { color: #8b909c; font-size: 0.64rem; }
.ecom-reference-upload__action { position: relative; z-index: 2; display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; background: #f6f5ff; color: var(--ecom-accent); font-size: 0.72rem; white-space: nowrap; cursor: pointer; }
.ecom-reference-upload .ecom-upload__remove { position: relative; top: auto; right: auto; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #f6f5ff; color: var(--ecom-accent); font-size: 1.1rem; line-height: 1; }
.ecom-reference-upload [hidden] { display: none; }
.ecom-reference-upload--empty .ecom-reference-upload__thumb { display: grid; place-items: center; border: 1px dashed #d6d8e0; color: #8d92a0; font-size: 0.85rem; }
.ecom-reference-upload--empty .ecom-upload__remove { font-size: 1rem; }

.ecom-submit-area { display: grid; gap: 0.45rem; margin-top: auto; padding-top: 0.3rem; }
.ecom-submit { display: grid; min-height: 3.55rem; place-content: center; gap: 0.2rem; border: 0; border-radius: 0.75rem; background: var(--ecom-accent); color: #fff; font: inherit; cursor: pointer; }
.ecom-submit:disabled { background: color-mix(in srgb, var(--ecom-accent) 34%, #fff); cursor: not-allowed; }
.ecom-submit:enabled:hover { filter: brightness(0.95); }
.ecom-submit:focus-visible { outline: 2px solid var(--ecom-accent); outline-offset: 3px; }
.ecom-submit span { font-size: 0.82rem; font-weight: 700; }
.ecom-submit small { color: rgba(255,255,255,.85); font-size: 0.66rem; }
.ecom-submit-area > p { margin: 0; color: #9398a4; font-size: 0.64rem; line-height: 1.5; }

.ecom-preview { display: flex; min-height: 52rem; flex-direction: column; padding: 1.15rem; }
.ecom-preview__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ecom-preview__top h2 { margin: 0; color: #282b36; font-size: 0.98rem; font-weight: 700; }
.ecom-preview__status { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.25rem 0.78rem; border-radius: 999px; background: #f6f5ff; color: var(--ecom-accent); font-size: 0.68rem; font-weight: 650; }
.ecom-preview__title { margin: 1rem 0 1.3rem; color: var(--ecom-accent); font-size: clamp(1rem, 1.5vw, 1.24rem); font-weight: 700; text-align: center; }
.ecom-compare { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem minmax(0, 1fr); align-items: center; gap: 0.65rem; width: min(100%, 42rem); margin: 0 auto; }
.ecom-compare__figure { position: relative; display: flex; min-width: 0; height: clamp(17rem, 31vw, 22rem); flex-direction: column; margin: 0; }
.ecom-compare__figure > img,
.ecom-result-empty { width: 100%; height: calc(100% - 1.7rem); border-radius: 0.95rem; }
.ecom-compare__source { padding: 0.45rem; border: 1px solid #e5e6ec; border-radius: 1rem; background: #fff; }
.ecom-compare__source > img { object-fit: contain; background: #fafafb; }
.ecom-compare__label { position: absolute; top: 0.8rem; left: 0.8rem; max-width: calc(100% - 1.6rem); overflow: hidden; padding: 0.32rem 0.68rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #676c79; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.ecom-compare__figure figcaption { display: grid; flex: 1; place-items: end center; padding-top: 0.3rem; color: #858a97; font-size: 0.66rem; }
.ecom-compare__arrow { display: grid; min-height: 3.4rem; place-items: center; border-radius: 999px; background: #f6f5ff; color: var(--ecom-accent); font-size: 0.7rem; font-weight: 650; }
.ecom-compare__arrow svg { width: 2rem; height: 2rem; }
.ecom-compare__result { padding: 0.48rem; border: 1.5px solid var(--ecom-accent); border-radius: 1rem; }
.ecom-result-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; padding: 1rem; border: 1px solid #f0f0f3; background: #fbfbfd; text-align: center; }
.ecom-result-empty strong { color: #343744; font-size: 0.83rem; }
.ecom-result-empty > span { color: #898e9b; font-size: 0.68rem; }
.ecom-result-empty small { margin-top: auto; color: #a1a5af; font-size: 0.58rem; }
.ecom-result-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; padding: 0.45rem; overflow: auto; }
.ecom-result-item { display: grid; min-width: 0; margin: 0; gap: 0.28rem; align-content: start; border: 1px solid #ececf1; border-radius: 0.55rem; background: #fff; overflow: hidden; }
.ecom-result-item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #f7f7f9; }
.ecom-result-item a { padding: 0.28rem 0.4rem 0.4rem; color: var(--ecom-accent); font-size: 0.62rem; text-align: center; text-decoration: none; }
.ecom-result-item > span { display: grid; min-height: 4rem; place-items: center; padding: 0.5rem; color: #969aa7; font-size: 0.62rem; text-align: center; }
.ecom-output-groups { margin-top: 2rem; }
.ecom-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; }
.ecom-section-heading h3 { margin: 0; color: #585d69; font-size: 0.79rem; font-weight: 650; }
.ecom-section-heading span { color: #9398a3; font-size: 0.66rem; }
.ecom-output-groups__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.ecom-output-group { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-width: 0; min-height: 5rem; padding: 0.65rem; border: 1px solid #e5e6ec; border-radius: 0.8rem; background: #fff; text-align: left; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.ecom-output-group:hover,
.ecom-output-group.is-selected { border-color: color-mix(in srgb, var(--ecom-accent) 44%, #fff); background: #fdfcff; }
.ecom-output-group__count { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: 0.65rem; background: #f1efff; color: #6254f5; font-size: 0.95rem; font-weight: 750; }
.ecom-output-group__count--green { background: #e9f8f1; color: #159568; }
.ecom-output-group__count--violet { background: #f2edff; color: #8754f6; }
.ecom-output-group > span:nth-child(2) { display: grid; min-width: 0; gap: 0.25rem; }
.ecom-output-group strong { color: #3e424e; font-size: 0.74rem; }
.ecom-output-group small { color: #8d92a0; font-size: 0.62rem; }
.ecom-output-group__view { color: var(--ecom-accent); font-size: 0.61rem; }
.ecom-preview__disclaimer { margin: 2rem 0 1.2rem; color: #828795; font-size: 0.69rem; text-align: center; }
.ecom-guidance { display: flex; align-items: baseline; gap: 0.85rem; width: min(100%, 37rem); margin: 0 auto; padding: 0.75rem 0.9rem; border: 1px solid #f4e7ed; border-radius: 0.72rem; background: #fff9fb; }
.ecom-guidance strong { flex: 0 0 auto; color: #e44688; font-size: 0.7rem; }
.ecom-guidance span { color: #7c818d; font-size: 0.68rem; line-height: 1.55; }
.ecom-guidance--violet { border-color: #eee7fb; background: #faf7ff; }
.ecom-guidance--violet strong { color: var(--ecom-accent); }
.ecom-sample-disclaimer { margin: auto 0 0; padding-top: 1.1rem; color: #a0a4ae; font-size: 0.62rem; text-align: center; }

.ecom-history { position: relative; display: flex; min-height: 52rem; flex-direction: column; padding: 1.15rem 0.95rem 0.9rem; }
.ecom-history__heading { display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.9rem; border-bottom: 1px solid #ececf1; }
.ecom-history__heading h2 { margin: 0; font-size: 0.84rem; font-weight: 700; }
.ecom-history__heading span { color: #7c8290; font-size: 0.9rem; }
.ecom-history__empty { display: grid; flex: 1; align-content: center; justify-items: center; gap: 0.7rem; padding: 1rem 0; text-align: center; }
.ecom-history__clock { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border: 1px solid #e6e7ed; border-radius: 50%; color: var(--ecom-accent); font-size: 1.25rem; }
.ecom-history__clock svg { width: 1.3rem; height: 1.3rem; }
.ecom-history__empty strong { color: #787e8b; font-size: 0.78rem; font-weight: 500; }
.ecom-history__empty p { max-width: 11rem; margin: -0.3rem 0 0; color: #a0a4ae; font-size: 0.62rem; line-height: 1.5; }
.ecom-history__library { display: block; padding: 0.85rem 0 0.25rem; border-top: 1px solid #ececf1; color: var(--ecom-accent); font-size: 0.7rem; font-weight: 650; text-align: center; text-decoration: none; }
.ecom-history__list { display: grid; gap: 0.45rem; padding: 0.8rem 0; overflow: auto; }
.ecom-history__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.45rem; padding: 0.58rem 0.62rem; border: 1px solid #ececf1; border-radius: 0.55rem; background: #fff; color: #545967; text-align: left; cursor: pointer; }
.ecom-history__item:hover { border-color: color-mix(in srgb, var(--ecom-accent) 40%, #fff); }
.ecom-history__item strong { overflow: hidden; color: #414552; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.ecom-history__item span { color: var(--ecom-accent); font-size: 0.62rem; }
.ecom-history__item small { grid-column: 1 / -1; color: #9297a3; font-size: 0.59rem; }

.ecom-index { padding: 0.2rem 0 2rem; }
.ecom-index__intro { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin: 1.1rem 0 1.5rem; }
.ecom-eyebrow { margin: 0 0 0.45rem; color: #6558e8; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.13em; }
.ecom-index__intro h1 { margin: 0; color: #232634; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.04em; }
.ecom-index__intro p:last-child { margin: 0.5rem 0 0; color: #777d8b; font-size: 0.91rem; }
.ecom-price-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border: 1px solid #ece9ff; border-radius: 999px; background: #fbfaff; color: #6357e7; font-size: 0.73rem; white-space: nowrap; }
.ecom-price-status > span { width: 0.43rem; height: 0.43rem; border-radius: 50%; background: #8f80ff; }
.ecom-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ecom-tool-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e7e8ed; border-radius: 1rem; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 2px 0 rgba(20,24,40,.035); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.ecom-tool-card:hover { transform: translateY(-3px); border-color: #d6d2ff; box-shadow: 0 12px 30px rgba(35, 32, 86, .08); }
.ecom-tool-card__image { position: relative; height: 13rem; overflow: hidden; background: #f4f4f6; }
.ecom-tool-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.ecom-card-example-label { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.3rem 0.58rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #646977; font-size: 0.63rem; }
.ecom-tool-card:hover .ecom-tool-card__image img { transform: scale(1.025); }
.ecom-tool-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem; }
.ecom-tool-card__index { color: #766be4; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; }
.ecom-tool-card--pink .ecom-tool-card__index,
.ecom-tool-card--pink .ecom-tool-card__link { color: #d63e83; }
.ecom-tool-card--violet .ecom-tool-card__index,
.ecom-tool-card--violet .ecom-tool-card__link { color: #8050e8; }
.ecom-tool-card h2 { margin: 0.45rem 0 0; color: #262936; font-size: 1.12rem; }
.ecom-tool-card p { min-height: 2.7rem; margin: 0.55rem 0 1rem; color: #777d8a; font-size: 0.78rem; line-height: 1.7; }
.ecom-tool-card__meta { display: flex; justify-content: space-between; gap: 0.4rem; padding: 0.7rem 0; border-top: 1px solid #f0f0f3; color: #858a96; font-size: 0.66rem; }
.ecom-tool-card__meta span:last-child { color: #675be9; }
.ecom-tool-card__link { display: flex; justify-content: space-between; margin-top: auto; padding-top: 0.72rem; color: #6254f5; font-size: 0.75rem; font-weight: 700; }
.ecom-index__note { margin: 1.05rem 0 0; color: #9297a3; font-size: 0.69rem; text-align: center; }
.ecom-live-status { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; max-width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: 0.75rem 1rem; transform: translateY(0.4rem); border: 1px solid #e8e5ff; border-radius: 0.75rem; background: #fff; color: #45495a; box-shadow: 0 10px 32px rgba(25, 29, 49, .12); opacity: 0; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease; font-size: 0.76rem; }
.ecom-live-status.is-visible { transform: translateY(0); opacity: 1; }
.ecom-generation-error { padding: 0.75rem; border: 1px solid #f4d5d0; border-radius: 0.6rem; background: #fff8f6; color: #b42318; }
.ecom-generation-error[hidden] { display: none; }
.ecom-submit-area .ecom-generation-error p { margin: 0; color: inherit; font-size: 0.78rem; line-height: 1.55; }
.ecom-generation-error .ecom-text-button { margin-top: 0.45rem; color: #9b321d; }

@media (max-width: 1060px) {
  .ecom-workspace { grid-template-columns: minmax(245px, 0.85fr) minmax(340px, 1.7fr); }
  .ecom-history { grid-column: 1 / -1; min-height: 0; }
  .ecom-history__empty { min-height: 8rem; }
  .ecom-preview { min-height: 39rem; }
  .ecom-history__library { align-self: stretch; }
}

@media (max-width: 720px) {
  body:has(.ecom-page) .site-container { width: 100%; }
  .ecom-workspace { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .ecom-config { order: 1; padding: 1rem; }
  .ecom-preview { order: 2; min-height: 0; padding: 1rem; }
  .ecom-history { order: 3; grid-column: auto; }
  .ecom-compare { grid-template-columns: minmax(0, 1fr) 2.45rem minmax(0, 1fr); gap: 0.4rem; }
  .ecom-compare__figure { height: clamp(14rem, 66vw, 20rem); }
  .ecom-compare__arrow { min-height: 2.55rem; font-size: 0.62rem; }
  .ecom-compare__arrow svg { width: 1.5rem; height: 1.5rem; }
  .ecom-output-groups { margin-top: 1.35rem; }
  .ecom-output-groups__list { grid-template-columns: 1fr; }
  .ecom-output-group { min-height: 4.1rem; }
  .ecom-output-group__count { width: 2.25rem; height: 2.25rem; }
  .ecom-tool-grid { grid-template-columns: 1fr; }
  .ecom-tool-card { display: grid; grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr); }
  .ecom-tool-card__image { height: 100%; min-height: 13rem; }
  .ecom-tool-card__body { padding: 0.9rem; }
  .ecom-tool-card p { min-height: 0; font-size: 0.72rem; }
  .ecom-tool-card__meta { flex-direction: column; gap: 0.25rem; }
}

body:has(.ecom-workbench) { background: #f5f6fa; }
.ecom-workbench[data-ecom-tool] {
  --ecom-accent: #6254f5 !important;
  --ecom-accent-soft: #f1efff !important;
  width: 100%;
  padding-bottom: 2rem;
  font-size: 14px;
}
.ecom-workbench .ecom-workspace { grid-template-columns: 340px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ecom-workbench :is(.ecom-config, .ecom-preview, .ecom-history) { padding: 1.5rem; border-radius: 1.25rem; border-color: #e4e7ef; box-shadow: 0 4px 20px rgba(32,35,50,.03); }
.ecom-workbench .ecom-config { gap: 1.25rem; }
.ecom-workbench small,
.ecom-workbench .ecom-reference-upload__thumb .ecom-example-badge,
.ecom-workbench .ecom-garment-option__symbol { font-size: 12px; }
.ecom-workbench .ecom-config__heading { align-items: start; padding-bottom: 1.25rem; border-bottom: 1px solid #eceef4; }
.ecom-workbench .ecom-config__heading h1 { font-size: 1.2rem; line-height: 1.4; }
.ecom-workbench .ecom-config__heading p { color: #667085; font-size: 13px; line-height: 1.6; }
.ecom-workbench .ecom-mark { font-size: 14px; }
.ecom-workbench .ecom-field__heading,
.ecom-workbench .ecom-choice-field legend { color: #344054; font-size: 14px; }
.ecom-workbench .ecom-field__heading > span:first-child { color: #344054; font-size: 14px; font-weight: 650; }
.ecom-workbench .ecom-field__heading span,
.ecom-workbench .ecom-choice-field legend span { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-upload { grid-template-columns: 5rem minmax(0, 1fr); padding: .625rem; gap: .75rem; background: #f9fafc; }
.ecom-workbench .ecom-upload__preview { width: 5rem; height: 6rem; object-fit: contain; }
.ecom-workbench .ecom-upload__copy { padding: .5rem 0; }
.ecom-workbench .ecom-upload__copy strong { font-size: 14px; }
.ecom-workbench .ecom-upload__copy > span { color: #667085; font-size: 12px; line-height: 1.5; }
.ecom-workbench .ecom-example-badge { font-size: 12px; }
.ecom-workbench .ecom-upload__remove { min-height: 1.75rem; padding: .2rem .45rem; font-size: 12px; }
.ecom-workbench .ecom-chip-list { gap: .5rem; }
.ecom-workbench .ecom-chip-list button { min-height: 2.25rem; font-size: 12px; color: #475467; }
.ecom-workbench .ecom-chip-list button.is-selected { color: var(--ecom-accent); }
.ecom-workbench :is(.ecom-input, .ecom-textarea) { background: #fff; font-size: 14px; }
.ecom-workbench .ecom-input { min-height: 2.75rem; }
.ecom-workbench .ecom-textarea { min-height: 5.5rem; }
.ecom-workbench :is(.ecom-input, .ecom-textarea)::placeholder { color: #767f90; font-size: 12px; }
.ecom-workbench .ecom-generation-summary { padding: .875rem; border: 1px solid #e9e6ff; background: #f8f7ff; }
.ecom-workbench .ecom-generation-summary > div { align-items: start; }
.ecom-workbench .ecom-generation-summary span { flex-shrink: 0; color: #667085; font-size: 12px; }
.ecom-workbench .ecom-generation-summary strong { font-size: 12px; line-height: 1.6; }
.ecom-workbench .ecom-submit-area { margin-top: 0; padding-top: 1rem; border-top: 1px solid #eceef4; gap: .625rem; }
.ecom-workbench .ecom-submit { min-height: 3.25rem; border-radius: .875rem; box-shadow: 0 4px 12px rgba(98,84,245,.16); }
.ecom-workbench .ecom-submit:disabled { background: #e6e2ff; color: #6555b3; box-shadow: none; }
.ecom-workbench .ecom-submit span { font-size: 14px; }
.ecom-workbench .ecom-submit small { font-size: 12px; color: inherit; }
.ecom-workbench .ecom-submit-area > p { color: #667085; font-size: 12px; line-height: 1.7; }
.ecom-workbench .ecom-text-button { font-size: 12px; }
.ecom-workbench .ecom-preview { min-height: 0; }
.ecom-workbench .ecom-preview__top { order: -3; }
.ecom-workbench .ecom-preview__top h2 { font-size: 1.125rem; }
.ecom-workbench .ecom-preview__status { min-height: 2rem; font-size: 12px; }
.ecom-workbench .ecom-preview__title { order: -2; margin: .5rem 0 1.25rem; text-align: left; font-size: 14px; font-weight: 400; color: #667085; }
.ecom-workbench .ecom-compare { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; gap: 1rem; }
.ecom-workbench .ecom-compare__source { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: .75rem; height: auto; padding: .625rem .875rem; border-radius: .75rem; background: #f9fafc; }
.ecom-workbench .ecom-compare__source > img { grid-row: 1 / 3; width: 3rem; height: 3rem; border-radius: .4rem; object-fit: contain; }
.ecom-workbench .ecom-compare__label { position: static; align-self: end; max-width: 100%; padding: 0; background: transparent; color: #344054; font-size: 13px; }
.ecom-workbench .ecom-compare__source figcaption { display: block; padding-top: .2rem; font-size: 12px; }
.ecom-workbench .ecom-compare__result { height: auto; min-height: 26rem; padding: 0; border: 0; border-radius: 1rem; }
.ecom-workbench .ecom-result-empty { min-height: 26rem; height: auto; padding: 2rem; gap: .875rem; border: 1px dashed #d7dbea; background: #f9fafc; }
.ecom-workbench .ecom-result-empty strong { color: #344054; font-size: 1.25rem; }
.ecom-workbench .ecom-result-empty > span { color: #667085; font-size: 14px; line-height: 1.6; }
.ecom-workbench .ecom-result-empty small { margin-top: .5rem; color: #667085; font-size: 12px; }
.ecom-workbench .ecom-compare__result > figcaption { display: block; flex: none; padding-top: .75rem; color: #667085; font-size: 12px; text-align: left; }
.ecom-workbench .ecom-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; gap: .875rem; overflow: visible; }
.ecom-workbench .ecom-result-item { border-radius: .75rem; gap: 0; }
.ecom-workbench .ecom-result-item img { aspect-ratio: 1; height: auto; object-fit: contain; background: #f9fafc; }
.ecom-workbench .ecom-result-item figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem; color: #475467; font-size: 12px; }
.ecom-workbench .ecom-result-item a { min-height: 2rem; padding: .375rem .65rem; border: 1px solid #e9e6ff; border-radius: .5rem; background: #f8f7ff; font-size: 12px; }
.ecom-workbench .ecom-result-item > span { min-height: 10rem; color: #667085; font-size: 12px; line-height: 1.6; }
.ecom-workbench .ecom-output-groups { order: -1; margin: .25rem 0 1rem; }
.ecom-workbench .ecom-section-heading { margin-bottom: .75rem; }
.ecom-workbench .ecom-section-heading h3 { font-size: 14px; }
.ecom-workbench .ecom-section-heading > span { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-output-groups__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ecom-workbench .ecom-output-group { display: flex; min-height: 2.5rem; padding: .5rem .75rem; gap: .5rem; border-radius: .625rem; }
.ecom-workbench .ecom-output-group > span:nth-child(2),
.ecom-workbench .ecom-output-group > span:first-child:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.ecom-workbench .ecom-output-group__count { width: auto; height: auto; background: transparent; font-size: 12px; }
.ecom-workbench .ecom-output-group strong { font-size: 13px; }
.ecom-workbench .ecom-output-group small { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-output-group__view { display: none; }
.ecom-workbench .ecom-output-group.is-selected { border-color: var(--ecom-accent); background: var(--ecom-accent-soft); }
.ecom-workbench .ecom-preview__disclaimer { margin: 1rem 0 .75rem; color: #667085; text-align: left; font-size: 12px; }
.ecom-workbench .ecom-guidance { width: 100%; margin-top: 1rem; border-color: #e9e6ff; background: #f8f7ff; }
.ecom-workbench .ecom-guidance strong { color: var(--ecom-accent); font-size: 12px; }
.ecom-workbench .ecom-guidance span { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-sample-disclaimer { margin: 0; color: #667085; font-size: 12px; line-height: 1.6; text-align: left; }
.ecom-workbench .ecom-history { grid-column: 1 / -1; min-height: 0; }
.ecom-workbench .ecom-history__heading { justify-content: space-between; align-items: center; }
.ecom-workbench .ecom-history__heading h2 { margin-bottom: .375rem; font-size: 1rem; }
.ecom-workbench .ecom-history__heading span { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-history__library { min-height: 2.5rem; padding: .5rem .875rem; border: 1px solid #e4e7ef; border-radius: .625rem; font-size: 13px; white-space: nowrap; cursor: pointer; }
.ecom-workbench .ecom-history__empty { min-height: 8rem; gap: .5rem; }
.ecom-workbench .ecom-history__empty strong { color: #475467; font-size: 14px; }
.ecom-workbench .ecom-history__empty p { max-width: none; color: #667085; font-size: 12px; }
.ecom-workbench .ecom-history__clock { width: 2.5rem; height: 2.5rem; }
.ecom-workbench .ecom-history__list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-height: 19rem; gap: .75rem; padding-bottom: 0; }
.ecom-workbench .ecom-history__item { padding: 1rem; gap: .5rem; border-radius: .75rem; }
.ecom-workbench .ecom-history__item strong { font-size: 14px; }
.ecom-workbench .ecom-history__item span,
.ecom-workbench .ecom-history__item small { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-history__item.is-selected { border-color: var(--ecom-accent); background: var(--ecom-accent-soft); }
.ecom-workbench .ecom-step { display: inline-grid; width: 1.5rem; height: 1.5rem; margin-right: .3rem; place-items: center; border-radius: .4rem; background: var(--ecom-accent-soft); color: var(--ecom-accent); font-size: 12px; }
.ecom-workbench .ecom-garment-option { min-height: 7rem; grid-template-columns: 3rem minmax(0, 1fr); }
.ecom-workbench .ecom-garment-option__image,
.ecom-workbench .ecom-garment-option__symbol { width: 3rem; height: 4.5rem; }
.ecom-workbench .ecom-garment-option i { display: none; }
.ecom-workbench .ecom-garment-option strong { font-size: 14px; }
.ecom-workbench .ecom-garment-option small { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-garment-upload { min-height: 2rem; font-size: 12px; }
.ecom-workbench .ecom-tryon-garment-field .ecom-segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ecom-workbench .ecom-upload--tryon-garment:has([data-preview][hidden]) { grid-template-columns: minmax(0, 1fr); min-height: 8.5rem; border-style: dashed; }
.ecom-workbench .ecom-upload--tryon-garment:has([data-preview][hidden]) .ecom-upload__copy { align-items: center; text-align: center; }
.ecom-workbench .ecom-field-hint { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-tryon-references { display: grid; gap: .75rem; }
.ecom-workbench .ecom-tryon-reference-grid { display: grid; gap: .875rem; }
.ecom-workbench .ecom-reference-upload__text strong { font-size: 14px; }
.ecom-workbench .ecom-reference-upload__text small { color: #667085; font-size: 12px; }
.ecom-workbench .ecom-segmented label { min-height: 2.5rem; font-size: 14px; }
.ecom-workbench [hidden] { display: none !important; }
.ecom-workbench :is(button, a, input, textarea):focus-visible { outline: 3px solid var(--ecom-accent); outline-offset: 3px; }
.ecom-workbench[data-result-state="processing"] .ecom-result-empty::before { content: ""; width: 2rem; height: 2rem; border: 2px solid var(--ecom-accent-soft); border-top-color: var(--ecom-accent); border-radius: 50%; animation: ecom-processing 1s linear infinite; }
.ecom-workbench[data-result-state="success"] .ecom-preview__status { color: #15803d; background: #f0fdf4; }
.ecom-workbench[data-result-state="empty"] .ecom-preview__status { color: #b45309; background: #fffbeb; }
.ecom-workbench[data-task-status="partiallyfailed"] .ecom-preview__status { color: #b45309; background: #fffbeb; }
.ecom-workbench[data-task-status="failed"] .ecom-preview__status { color: #b42318; background: #fff1f0; }
.ecom-workbench .ecom-result-item--failed { border-color: #f4d5d0; background: #fffafa; }
.ecom-workbench .ecom-result-item--failed > span { color: #b42318; }
.ecom-workbench .ecom-live-status { font-size: 12px; }
.ecom-workbench[data-ecom-tool="garment"] .ecom-result-grid,
.ecom-workbench[data-ecom-tool="try-on"] .ecom-result-grid { grid-template-columns: minmax(0, 1fr); }
.ecom-workbench[data-ecom-tool="garment"] .ecom-result-item img,
.ecom-workbench[data-ecom-tool="try-on"] .ecom-result-item img { aspect-ratio: auto; height: 30rem; }
@keyframes ecom-processing { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .ecom-workbench .ecom-workspace { grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; }
  .ecom-workbench :is(.ecom-config, .ecom-preview, .ecom-history) { padding: 1.125rem; }
  .ecom-workbench .ecom-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ecom-workbench .ecom-workspace { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ecom-workbench .ecom-history { grid-column: auto; }
  .ecom-workbench .ecom-breadcrumb { flex-wrap: wrap; font-size: 12px; gap: .4rem; }
  .ecom-workbench .ecom-result-empty { min-height: 20rem; padding: 1.5rem; }
  .ecom-workbench .ecom-compare__result { min-height: 20rem; }
  .ecom-workbench .ecom-guidance { flex-direction: column; gap: .35rem; }
  .ecom-workbench .ecom-history__heading { gap: .75rem; }
  .ecom-workbench .ecom-history__list { grid-template-columns: minmax(0, 1fr); }
  .ecom-workbench .ecom-result-item figcaption { flex-wrap: wrap; }
  .ecom-workbench[data-ecom-tool="garment"] .ecom-result-item img,
  .ecom-workbench[data-ecom-tool="try-on"] .ecom-result-item img { height: 23rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ecom-page *, .ecom-page *::before, .ecom-page *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}