/* Section 01 clean rebuild: one editor, one material form and one recipe source. */
#product-margin.section01-rebuilt {
  overflow: clip;
}

.section01-stage {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  padding-bottom: 14px;
}

.section01-stage + .section-panel {
  margin-top: 14px;
}

#product-margin .section01-flow {
  display: grid;
  gap: 6px;
}

#product-margin .section01-heading {
  align-items: start;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

#product-margin .section01-heading .section-title-line,
#product-margin .section01-heading > p {
  min-width: 0;
}

#product-margin .section01-heading > p {
  grid-column: 1;
  margin: 0;
}

#product-margin .section01-heading .section-title-line {
  grid-column: 1;
}

/* Shared S01 editor tracks: name/usage | unit-price | save.
   Product-code / supplier span cols 2→end so the center split is one continuous line.
   Type select matches 保存并添加 width. */
#product-margin {
  /* Control width for longest desktop save label (es/pt) + matching Product/POS select.
     Grows left via margin; track stays 110px so name|price center split does not move. */
  --s01-side-action-width: 240px;
  /* Layout track stays at the prior 110px so the name | price center split does not move. */
  --s01-side-action-track: 110px;
  --s01-editor-col-gap: 10px;
  --s01-editor-cols: minmax(150px, 1.1fr) minmax(140px, 1fr) var(--s01-side-action-track);
}

#product-margin .s01-product-fields {
  align-items: end;
  display: grid;
  gap: 6px var(--s01-editor-col-gap);
  grid-template-columns: minmax(180px, 1.7fr) minmax(118px, 0.72fr) minmax(104px, 0.58fr);
}

#product-margin .s01-product-fields > .product-name-field {
  grid-column: 1;
  min-width: 0;
}

#product-margin .s01-product-fields > .product-type-field {
  grid-column: 2;
  min-width: 0;
}

#product-margin .s01-product-fields > .product-status-field {
  grid-column: 3;
  min-width: 0;
}

/* Restaurant (and any host) with product-type field removed from DOM. */
#product-margin .s01-product-fields.s01-product-fields--no-type {
  grid-template-columns: minmax(180px, 1.7fr) minmax(104px, 0.58fr);
}

#product-margin .s01-product-fields.s01-product-fields--no-type > .product-status-field {
  grid-column: 2;
  min-width: 0;
}

/* Services: sales-status selector removed. Name uses main width; type stays a compact selector. */
#product-margin .s01-product-fields.s01-product-fields--no-status {
  grid-template-columns: minmax(0, 1.7fr) minmax(148px, 16rem);
}

#product-margin .s01-product-fields.s01-product-fields--no-status > .product-type-field {
  grid-column: 2;
  min-width: 0;
  max-width: 16rem;
  width: 100%;
  justify-self: end;
}

#product-margin .s01-product-fields > .field {
  align-content: end;
  align-self: stretch;
  grid-template-rows: auto 46px;
  margin-bottom: 0;
  row-gap: 3px;
}

#product-margin .s01-product-fields > .field > select {
  height: 46px;
  min-height: 46px;
  min-width: 0;
  width: 100%;
}

#product-margin .s01-own-barcode-field {
  display: grid;
  gap: 3px;
  margin: 8px 0 0;
  max-width: 36rem;
}

.section01-stage .s01-scan-field-row {
  display: block;
  min-width: 0;
  width: 100%;
}

#product-margin .s01-own-barcode-field .s01-scan-field-row > input,
#product-margin .s01-own-barcode-field > input {
  height: 46px;
  min-height: 46px;
  width: 100%;
}

/* Desktop: keep Scan quiet (My Products dock is outside #product-margin). */
.section01-stage .s01-scan-btn {
  display: none;
}

#product-margin .s01-own-barcode-error {
  color: var(--danger, #b42318);
  font-size: 12px;
  font-weight: 650;
  margin: 2px 0 0;
}

.section01-stage .s01-product-search-field {
  display: grid;
  margin: 0 0 8px;
}

.section01-stage .s01-product-search-field .s01-scan-field-row > input,
.section01-stage .s01-product-search-field > input {
  height: 40px;
  min-height: 40px;
  width: 100%;
}

/* Fullscreen mobile barcode scan overlay — created on Scan tap only. */
.s01-barcode-scan-overlay {
  background: #0b1220;
  bottom: 0;
  color: #f8fafc;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 12000;
}

.s01-barcode-scan-sheet {
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  grid-template-rows: auto 1fr auto auto;
  height: 100%;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.s01-barcode-scan-copy {
  display: grid;
  gap: 4px;
  text-align: center;
}

.s01-barcode-scan-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

.s01-barcode-scan-guide {
  color: #cbd5e1;
  font-size: 0.95rem;
  margin: 0;
}

.s01-barcode-scan-viewport {
  align-items: center;
  background: #000;
  border-radius: 12px;
  display: grid;
  justify-items: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.s01-barcode-scan-video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.s01-barcode-scan-frame {
  border: 2px solid rgba(248, 250, 252, 0.92);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
  height: min(42vw, 160px);
  left: 50%;
  max-width: 86%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 280px);
}

.s01-barcode-scan-error {
  color: #fecaca;
  font-size: 0.92rem;
  font-weight: 650;
  margin: 0;
  text-align: center;
}

.s01-barcode-scan-cancel {
  background: #f8fafc;
  border: 0;
  border-radius: 10px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 750;
  min-height: 48px;
  width: 100%;
}

body.s01-barcode-scan-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .section01-stage .s01-scan-field-row {
    align-items: stretch;
    display: flex;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  .section01-stage .s01-scan-field-row > input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .section01-stage .s01-scan-btn {
    align-items: center;
    background: var(--surface-soft, #eef2f6);
    border: 1px solid var(--line, #d0d7de);
    border-radius: 8px;
    color: var(--ink, #0f172a);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.92rem;
    font-weight: 750;
    justify-content: center;
    line-height: 1;
    padding: 0 12px;
    white-space: nowrap;
  }

  .section01-stage .s01-own-barcode-field .s01-scan-btn {
    height: 46px;
    min-height: 46px;
  }

  .section01-stage .s01-product-search-field .s01-scan-btn {
    height: 40px;
    min-height: 40px;
  }
}

#product-margin .s01-product-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#product-margin .s01-product-identity-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.55em;
  min-width: 0;
}

#product-margin .s01-product-number {
  color: var(--muted);
  font-size: 0.92em;
  font-weight: 650;
  letter-spacing: 0.02em;
}

#product-margin .s01-product-identity-line > strong {
  font-weight: 800;
  min-width: 0;
}

#product-margin .s01-product-own-barcode {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Desktop table already has a status column — keep identity status for mobile cards. */
.section01-stage .s01-product-identity-line:has(.s01-product-status-inline) {
  display: none;
}

#product-margin .s01-material-input-hint {
  color: var(--muted);
  font-size: 11px;
  grid-column: 1 / -1;
  grid-row: 1;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
}

/* Same tracks as .s01-product-fields (via --s01-editor-cols).
   Supplier spans col2→end so left aligns with 单价／产品编号, right with 保存并添加. */
#product-margin .s01-material-editor {
  align-items: start;
  display: grid;
  gap: 8px var(--s01-editor-col-gap);
  grid-template-columns: var(--s01-editor-cols);
}

#product-margin .s01-material-name-field {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

#product-margin .s01-material-editor > .s01-material-supplier-field {
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
}

#product-margin .s01-material-row2 {
  align-items: end;
  display: grid;
  gap: 8px var(--s01-editor-col-gap);
  grid-column: 1 / -1;
  grid-row: auto;
  grid-template-columns: subgrid;
  min-width: 0;
}

/* Row-1 name/supplier share one field-group: label + 46px control. */
#product-margin .s01-material-editor > .s01-material-name-field,
#product-margin .s01-material-editor > .s01-material-supplier-field {
  align-content: start;
  align-self: start;
  display: grid;
  grid-template-rows: auto 46px;
  margin-bottom: 0;
  row-gap: 3px;
}

/* Suggestions grow below; selected banner may grow taller than the search row. */
#product-margin .s01-material-editor > .s01-material-supplier-field {
  grid-template-rows: auto minmax(46px, auto) auto;
  overflow: visible;
}

#product-margin .s01-material-row2 > .field {
  align-content: end;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 46px;
  margin-bottom: 0;
  row-gap: 3px;
}

#product-margin .s01-material-editor > .s01-material-name-field > span:first-child,
#product-margin .s01-material-editor > .s01-material-supplier-field > span:first-child {
  align-self: start;
  line-height: 1.3;
  margin: 0;
  min-height: 1.3em;
}

#product-margin .s01-material-row2 > .field > span:first-child {
  align-self: end;
  margin-bottom: 0;
}

#product-margin .s01-material-editor > .field > input,
#product-margin .s01-usage-input-shell,
#product-margin .s01-material-editor .s01-money-input-shell,
#product-margin .s01-save-material {
  height: 46px;
  min-height: 46px;
}

#product-margin .s01-usage-input-shell {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  min-width: 0;
  overflow: hidden;
}

#product-margin .s01-usage-input-shell input,
#product-margin .s01-usage-input-shell select {
  border: 0;
  border-radius: 0;
  height: 44px;
  min-height: 44px;
  min-width: 0;
  width: 100%;
}

#product-margin .s01-usage-input-shell select {
  border-left: 1px solid var(--line);
  padding-left: 8px;
  padding-right: 28px;
}

#product-margin .s01-usage-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

#product-margin .s01-usage-input-shell:focus-within input,
#product-margin .s01-usage-input-shell:focus-within select {
  box-shadow: none;
  outline: 0;
}

#product-margin .s01-money-input-shell {
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

#product-margin .s01-money-input-shell input {
  border: 0;
  border-radius: 0;
  height: 44px;
  min-height: 44px;
  min-width: 0;
  overflow-x: auto;
  width: 100%;
}

#product-margin .s01-money-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

#product-margin .s01-money-input-shell:focus-within input {
  box-shadow: none;
  outline: 0;
}

#product-margin .s01-save-material {
  box-sizing: border-box;
  justify-self: end;
  margin-left: calc(var(--s01-side-action-track) - var(--s01-side-action-width));
  min-width: var(--s01-side-action-width);
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
  width: var(--s01-side-action-width);
}

/* Free width for the wider save control without moving the editor center split. */
#product-margin .s01-material-row2 > .s01-material-price-field {
  padding-right: calc(var(--s01-side-action-width) - var(--s01-side-action-track));
}

#product-margin .s01-save-mobile {
  display: none;
}

#product-margin .s01-target-section > summary {
  cursor: pointer;
  font-weight: 800;
}

#product-margin .s01-unsaved-guard,
#product-margin .s01-unsaved-product-guard {
  background: #fff8e8;
  border: 1px solid #dfc98f;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  margin-top: 5px;
  padding: 5px;
}

#product-margin .s01-unsaved-guard[hidden],
#product-margin .s01-unsaved-product-guard[hidden] {
  display: none;
}

#product-margin .s01-unsaved-guard > div,
#product-margin .s01-unsaved-product-guard > div,
#product-margin .s01-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#product-margin .s01-item-actions {
  justify-content: flex-end;
  /* Keep action hit targets above any auto-placed row content (e.g. supplier). */
  position: relative;
  z-index: 2;
}

#product-margin .s01-recipe-item > .s01-item-actions {
  display: flex;
}

#product-margin .s01-item-actions button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  padding: 7px 11px;
  position: relative;
  width: auto;
}

/* Ensure icon and empty padding both receive the click (not covered by children). */
#product-margin .s01-item-actions button > .s01-item-action-icon,
#product-margin .s01-item-actions button > .s01-item-action-text {
  pointer-events: none;
}

#product-margin .s01-recipe-item {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  padding: 4px 0;
}

#product-margin .s01-recipe-unit {
  display: none;
}

#product-margin .s01-recipe-item > div {
  display: grid;
  gap: 3px;
}

#product-margin .s01-recipe-item details {
  grid-column: 1 / -1;
}

#product-margin .s01-recipe-item details span {
  display: inline-block;
  margin: 3px 8px 0 0;
}

#product-margin .s01-empty {
  color: var(--muted);
  margin: 1px 0 0;
}

#product-margin .s01-cost-save-region {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 10px 16px;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.9fr);
  padding: 10px 12px;
}

#product-margin .s01-cost-result {
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 0;
}

#product-margin .s01-cost-result > span:first-child {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

#product-margin .s01-cost-result strong {
  box-sizing: border-box;
  color: var(--muted);
  font-size: clamp(22px, 2.6vw, 30px);
  font-variant-numeric: tabular-nums;
  grid-row: auto;
  line-height: 1.15;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-wrap: normal;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

#product-margin .s01-cost-save-region.has-cost .s01-cost-result strong,
#product-margin .s01-cost-result strong.is-ready {
  color: var(--accent-dark);
}

#product-margin .s01-cost-result small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#product-margin .s01-cost-confirmation {
  align-content: center;
  align-self: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 4px;
  justify-items: stretch;
  min-width: 0;
  padding: 0;
}

#product-margin .s01-final-save {
  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  justify-items: start;
  padding: 7px;
}

#product-margin .s01-final-save > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

#product-margin .s01-cost-confirmation > button {
  min-height: 44px;
  min-width: 0;
  white-space: normal;
  width: 100%;
}

#product-margin .s01-final-save > button {
  min-height: 44px;
  min-width: 190px;
  white-space: nowrap;
}

#product-margin #s01-cost-confirmation-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

#product-margin #s01-cost-confirmation-status:empty {
  display: none;
}

#product-margin #s01-cost-confirmation-status[data-kind="success"] {
  color: var(--accent-dark);
}

#product-margin .s01-pricing-workflows {
  align-items: stretch;
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

#product-margin .s01-pricing-workflows > .subsection {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
  margin: 0;
  min-width: 0;
  padding: 7px;
}

#product-margin .s01-pricing-workflows > .subsection.is-locked {
  opacity: .72;
}

#product-margin .s01-pricing-workflows input:disabled,
#product-margin .s01-pricing-workflows button:disabled {
  cursor: not-allowed;
}

#product-margin .s01-pricing-section {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

#product-margin .s01-pricing-section > h3,
#product-margin .s01-target-section > summary {
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  overflow-wrap: anywhere;
}

#product-margin .s01-workflow-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 3px 0 5px;
}

#product-margin .s01-pricing-grid {
  display: grid;
  gap: 5px;
}

#product-margin .s01-pricing-results {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#product-margin .s01-pricing-results .result-field {
  min-width: 0;
}

#product-margin .s01-percent-input-shell {
  display: contents;
}

#product-margin .s01-percent-input-shell > strong {
  display: none;
}

#product-margin .s01-target-section {
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
}

#product-margin .s01-target-content {
  padding-top: 1px;
}

#product-margin .s01-adopt-price {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 750;
  justify-self: start;
  min-height: 40px;
  padding: 7px 10px;
}

#product-margin .s01-adopt-price:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent-dark);
}

#product-margin .s01-adopt-price:disabled {
  border-color: var(--line);
  color: var(--muted);
}

#product-margin .s01-final-save {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}

#product-margin .s01-final-save > div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}

#product-margin .s01-final-save > div > span {
  font-weight: 800;
}

#product-margin #s01-final-price {
  color: var(--accent-dark);
  font-size: 20px;
  line-height: 1.2;
  white-space: nowrap;
}

#product-margin #section01-message {
  color: var(--accent-dark);
  grid-column: 1 / -1;
  margin: 0;
}

#product-margin #section01-message:empty {
  display: none;
}

#product-margin #section01-message[data-kind="error"] {
  color: var(--danger, #a83a32);
}

/* MASTER-PLAN Stage 4: progressive Section 01 guidance.
   desktop-section-01-guided-step-decoration-removal-001
   (+ mobile-material-row-index-divider-cleanup-001):
   hide guided-step index badges (1/2/3/4) and left vertical rail on all viewports;
   reclaim rail indent; keep uniform 1px card border (no missing left edge).
   Keep formal section title badge `.section-number` ("01") unchanged. */
#product-margin .s01-guided-step {
  border: 1px solid transparent;
  border-radius: 12px;
  box-sizing: border-box;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

#product-margin .s01-guided-step::before {
  content: none;
  display: none;
}

#product-margin .s01-guided-step.is-current {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 8px 22px rgba(15, 91, 68, .11);
}

#product-margin .s01-guided-step.is-locked {
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  border-color: color-mix(in srgb, var(--line) 68%, transparent);
  filter: saturate(.45);
  opacity: .58;
}

/* general-detailed-calculator-button-hierarchy-batch-001
   (extends general-section-01-button-hierarchy-batch-001)
   Section 01 scoped under #product-margin.
   Color / border / shadow / state only — width, height, gap, padding, font-size, position locked. */
#product-margin .s01-guided-step.is-current .primary-action:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(180deg, #17352b 0%, #10231d 100%);
  border-color: rgba(199, 161, 90, 0.62);
  box-shadow: 0 2px 8px rgba(16, 35, 29, 0.22);
  color: #fffdf8;
}

#product-margin .s01-guided-step.is-current .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#product-margin .s01-guided-step.is-current .primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 3px 10px rgba(16, 35, 29, 0.3);
}

#product-margin .s01-guided-step.is-current .primary-action:active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 1px 4px rgba(16, 35, 29, 0.18);
}

#product-margin .s01-guided-step.is-current .primary-action:disabled,
#product-margin .s01-guided-step.is-current .primary-action[aria-disabled="true"] {
  background: #d9dfdc;
  border-color: #c4ccc8;
  box-shadow: none;
  color: #68736e;
}

/* Completed steps: demote former Primary to Secondary (same size/position). */
#product-margin .s01-guided-step.is-complete .primary-action {
  background: var(--surface-soft, #f3eee3);
  border-color: rgba(23, 33, 29, 0.14);
  box-shadow: none;
  color: var(--ink, #17211d);
}

#product-margin .s01-guided-step.is-complete .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#product-margin .s01-guided-step.is-complete .primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background: #ebe4d6;
  border-color: rgba(23, 33, 29, 0.22);
  box-shadow: none;
}

/* Locked later steps: quiet non-primary (clearly weaker than current/complete). */
#product-margin .s01-guided-step.is-locked .primary-action {
  background: #d9dfdc;
  border-color: #c4ccc8;
  box-shadow: none;
  color: #68736e;
}

/* Remove — Compact Tertiary Danger (light; not solid page-level red). */
#product-margin .s01-item-actions [data-s01-action="remove-material"] {
  background: #ffffff;
  border-color: rgba(185, 28, 28, 0.38);
  box-shadow: none;
  color: #b91c1c;
}

#product-margin .s01-item-actions [data-s01-action="remove-material"]:hover,
#product-margin .s01-item-actions [data-s01-action="remove-material"]:focus-visible {
  background: rgba(185, 28, 28, 0.06);
  border-color: rgba(185, 28, 28, 0.5);
  box-shadow: none;
  color: #991b1b;
}

#product-margin .s01-item-actions [data-s01-action="remove-material"]:active {
  background: rgba(185, 28, 28, 0.1);
  box-shadow: none;
}

/* Unsaved guards: Save = Primary strength; Discard = Tertiary Danger; Continue = Secondary. */
#product-margin .s01-unsaved-guard [data-s01-action="guard-save"],
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-save"] {
  background: linear-gradient(180deg, #17352b 0%, #10231d 100%);
  border-color: rgba(199, 161, 90, 0.62);
  box-shadow: 0 2px 8px rgba(16, 35, 29, 0.22);
  color: #fffdf8;
}

#product-margin .s01-unsaved-guard [data-s01-action="guard-save"]:hover,
#product-margin .s01-unsaved-guard [data-s01-action="guard-save"]:focus-visible,
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-save"]:hover,
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-save"]:focus-visible {
  box-shadow: 0 3px 10px rgba(16, 35, 29, 0.3);
}

#product-margin .s01-unsaved-guard [data-s01-action="guard-discard"],
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-discard"] {
  background: #ffffff;
  border-color: rgba(185, 28, 28, 0.38);
  box-shadow: none;
  color: #b91c1c;
}

#product-margin .s01-unsaved-guard [data-s01-action="guard-discard"]:hover,
#product-margin .s01-unsaved-guard [data-s01-action="guard-discard"]:focus-visible,
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-discard"]:hover,
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-discard"]:focus-visible {
  background: rgba(185, 28, 28, 0.06);
  border-color: rgba(185, 28, 28, 0.5);
  box-shadow: none;
  color: #991b1b;
}

#product-margin .s01-unsaved-guard [data-s01-action="guard-continue"],
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-continue"] {
  background: var(--surface-soft, #f3eee3);
  border-color: rgba(23, 33, 29, 0.14);
  box-shadow: none;
  color: var(--ink, #17211d);
}

#product-margin .s01-unsaved-guard [data-s01-action="guard-continue"]:hover,
#product-margin .s01-unsaved-guard [data-s01-action="guard-continue"]:focus-visible,
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-continue"]:hover,
#product-margin .s01-unsaved-product-guard [data-s01-action="product-guard-continue"]:focus-visible {
  background: #ebe4d6;
  border-color: rgba(23, 33, 29, 0.22);
  box-shadow: none;
}

#product-margin .s01-action-feedback {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  min-height: 1.3em;
}

#product-margin .s01-action-feedback:empty {
  display: none;
}

#product-margin .s01-material-row2 > .s01-action-feedback {
  grid-column: 3;
  justify-self: center;
  text-align: center;
}

#product-margin .s01-cost-confirmation > .s01-action-feedback,
#product-margin .s01-final-save > .s01-action-feedback {
  justify-self: start;
}

.section01-stage .s01-library-toggle {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 10%, #fffaf0);
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(15, 91, 68, 0.1);
  color: #0b5d46;
  cursor: pointer;
  display: flex;
  gap: 0;
  font-weight: 900;
  justify-content: flex-start;
  min-height: 44px;
  padding: 5px 6px;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
  width: 190px;
}

/* Product management stays available without competing with product creation. */
.section01-stage .s01-products-dock {
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  border-color: var(--line);
  box-shadow: none;
}

.section01-stage .s01-library-toggle {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 750;
}

.section01-stage .s01-library-toggle:hover,
.section01-stage .s01-library-toggle[aria-expanded="true"] {
  background: var(--surface-soft);
  border-color: var(--line);
  box-shadow: none;
  color: var(--ink);
}

.section01-stage .s01-library-toggle:hover {
  background: color-mix(in srgb, var(--accent) 15%, #fffaf0);
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  box-shadow: 0 7px 18px rgba(15, 91, 68, 0.14);
}

.section01-stage .s01-library-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 19%, #fffaf0);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  box-shadow: 0 6px 16px rgba(15, 91, 68, 0.15);
}

.section01-stage .s01-products-dock {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 7%, #fffaf0);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 10px;
  box-sizing: border-box;
  display: grid;
  gap: 8px 14px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 8px;
  min-width: 0;
  padding: 9px 11px;
  width: 100%;
}

.section01-stage .s01-library-hint {
  color: color-mix(in srgb, var(--muted) 78%, var(--accent));
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  max-width: 620px;
  text-align: left;
  justify-self: start;
  grid-column: 2;
  grid-row: 1;
}

.section01-stage .s01-library-toggle {
  grid-column: 1;
  grid-row: 1;
}

.section01-stage .s01-products-icon {
  fill: none;
  flex: 0 0 auto;
  height: 21px;
  margin-right: 8px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 21px;
}

.section01-stage .s01-library-indicator {
  margin-left: 5px;
  transition: transform 150ms ease;
}

.section01-stage .s01-library-panel {
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 10px;
  width: 100%;
}

.section01-stage .s01-library-panel[hidden] {
  display: none;
}

.section01-stage .s01-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
}

.section01-stage .s01-status-filters button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  min-height: 38px;
  padding: 4px 6px;
}

.section01-stage .s01-status-filters button.is-selected {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 800;
}

.section01-stage .s01-library-toggle:focus,
.section01-stage .s01-library-panel button:focus,
.section01-stage .s01-product-history > summary:focus,
#product-margin .s01-final-save button:focus,
#product-margin .s01-cost-confirmation button:focus,
#product-margin .s01-adopt-price:focus {
  outline: none;
}

.section01-stage .s01-library-toggle:focus-visible,
.section01-stage .s01-library-panel button:focus-visible,
.section01-stage .s01-product-history > summary:focus-visible,
#product-margin .s01-final-save button:focus-visible,
#product-margin .s01-cost-confirmation button:focus-visible,
#product-margin .s01-adopt-price:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.section01-stage .s01-product-table {
  min-width: 0;
  width: 100%;
}

.section01-stage .s01-empty {
  color: var(--muted);
  margin: 0;
}

.section01-stage .s01-product-table-header,
.section01-stage .s01-product-card {
  display: grid;
  gap: 4px;
  grid-template-columns:
    minmax(150px, 1.45fr)
    minmax(65px, 0.55fr)
    minmax(78px, 0.75fr)
    minmax(72px, 0.7fr)
    minmax(60px, 0.55fr)
    minmax(60px, 0.4fr)
    minmax(282px, 1.9fr)
}

.section01-stage .s01-product-table--no-status .s01-product-table-header,
.section01-stage .s01-product-table--no-status .s01-product-card {
  grid-template-columns:
    minmax(150px, 1.45fr)
    minmax(78px, 0.75fr)
    minmax(72px, 0.7fr)
    minmax(60px, 0.55fr)
    minmax(60px, 0.4fr)
    minmax(282px, 1.9fr)
}

.section01-stage .s01-product-table-header {
  align-items: end;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 0;
}

.section01-stage .s01-product-table-header > span:last-child {
  text-align: right;
}

.section01-stage .s01-product-card {
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 5px 0;
}

.section01-stage .s01-product-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.section01-stage .s01-product-cell > strong,
.section01-stage .s01-product-cell > time,
.section01-stage .s01-product-cell > small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.section01-stage .s01-product-cell > small,
.section01-stage .s01-product-cell > time {
  color: var(--muted);
  font-size: 11px;
}

.section01-stage .s01-product-status-cell > strong {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: 999px;
  color: var(--accent-dark);
  justify-self: start;
  padding: 4px 7px;
  white-space: nowrap;
}

.section01-stage .s01-product-cell-label,
.section01-stage .s01-product-updated-mobile {
  display: none;
}

.section01-stage .s01-product-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
  min-width: 0;
}

.section01-stage .s01-product-row-actions button,
.section01-stage .s01-product-history > summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  min-height: 34px;
  padding: 6px 7px;
  white-space: nowrap;
}

.section01-stage .s01-product-history {
  display: contents;
}

.section01-stage .s01-product-updated-cell > time {
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: keep-all;
}

.section01-stage .s01-product-history > summary {
  align-items: center;
  display: flex;
  font-weight: 750;
  list-style: none;
}

.section01-stage .s01-product-history > summary::-webkit-details-marker {
  display: none;
}

.section01-stage .s01-product-history > div {
  border-top: 1px solid var(--line);
  flex: 0 0 100%;
  margin-top: 2px;
  padding-top: 7px;
  text-align: left;
}

.section01-stage .s01-product-history span,
.section01-stage .s01-product-history strong {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 5px;
}

@media (max-width: 900px) {
  .section01-stage {
    padding-bottom: 8px;
  }

  .section01-stage + .section-panel {
    margin-top: 8px;
  }

  #product-margin .section01-flow {
    gap: 6px;
  }

  /* Kill stacked .subsection top rule + margin that creates nested empty bands. */
  #product-margin .subsection {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  #product-margin .s01-added-section {
    background: color-mix(in srgb, var(--surface) 94%, #eef3ef);
    border: 0;
    border-radius: 8px;
    margin-top: 0;
    padding: 6px 8px;
  }

  #product-margin .s01-empty {
    margin: 0;
    font-size: 12px;
  }

  #product-margin .section01-heading {
    gap: 2px;
    margin-bottom: 0;
  }

  #product-margin .section01-heading > p {
    font-size: 11px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  #product-margin {
    --s01-editor-col-gap: 6px;
    /* Fixed third track — `auto` collapses on product-fields (code spans 2/-1, no col-3 child). */
    --s01-editor-cols: minmax(0, 1.1fr) minmax(0, 1fr) var(--s01-side-action-track);
  }

  /* Mobile identity: name full width; type | status side by side (ZH/EN same structure). */
  #product-margin .s01-product-fields {
    align-items: end;
    gap: 8px var(--s01-editor-col-gap);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  #product-margin .s01-product-fields > .field {
    min-width: 0;
    row-gap: 2px;
  }

  #product-margin .s01-product-fields > .field > span:first-child {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  #product-margin .s01-product-fields > .field > select {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    width: 100%;
  }

  #product-margin .s01-product-fields > .product-name-field {
    grid-column: 1 / -1;
  }

  #product-margin .s01-product-fields > .product-type-field {
    grid-column: 1;
  }

  #product-margin .s01-product-fields > .product-status-field {
    grid-column: 2;
  }

  #product-margin .s01-product-fields.s01-product-fields--no-status {
    grid-template-columns: minmax(0, 1fr);
  }

  #product-margin .s01-product-fields.s01-product-fields--no-status > .product-name-field,
  #product-margin .s01-product-fields.s01-product-fields--no-status > .product-type-field {
    grid-column: 1 / -1;
    max-width: none;
    justify-self: stretch;
  }

  /* Same shared tracks as product-fields; supplier spans price+save. */
  #product-margin .s01-material-editor {
    gap: 8px var(--s01-editor-col-gap);
    grid-template-columns: var(--s01-editor-cols);
  }

  #product-margin .s01-material-editor > .s01-material-name-field {
    grid-column: 1;
    grid-row: auto;
  }

  #product-margin .s01-material-editor > .s01-material-supplier-field {
    grid-column: 2 / -1;
    grid-row: auto;
  }

  #product-margin .s01-material-input-hint {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #product-margin .s01-material-editor > .s01-material-row2,
  #product-margin .s01-material-row2 {
    gap: 8px var(--s01-editor-col-gap);
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: subgrid;
  }

  #product-margin .s01-material-editor > .s01-material-supplier-create,
  #product-margin .s01-material-supplier-create {
    grid-column: 1 / -1;
  }

  #product-margin .s01-save-material {
    align-self: end;
    box-sizing: border-box;
    font-size: 13px;
    height: 40px;
    justify-self: end;
    line-height: 1;
    margin-left: calc(var(--s01-side-action-track) - var(--s01-side-action-width));
    max-height: 40px;
    min-height: 40px;
    min-width: var(--s01-side-action-width);
    padding: 0 6px;
    width: var(--s01-side-action-width);
  }

  #product-margin .s01-material-editor > .s01-material-name-field,
  #product-margin .s01-material-editor > .s01-material-supplier-field {
    grid-template-rows: auto 46px;
  }

  #product-margin .s01-material-editor > .s01-material-supplier-field {
    grid-template-rows: auto minmax(46px, auto) auto;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected {
    flex-wrap: wrap;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected-label {
    flex: 1 1 100%;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected-actions {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  #product-margin .s01-material-row2 > .field {
    grid-template-rows: minmax(2.5em, auto) 46px;
  }

  #product-margin .s01-usage-input-shell {
    grid-template-columns: minmax(0, 1fr) minmax(54px, auto);
  }

  #product-margin .s01-usage-input-shell select {
    padding-left: 5px;
    padding-right: 22px;
  }

  #product-margin .s01-material-price-shell strong {
    min-width: 48px;
    padding-left: 6px;
    padding-right: 6px;
  }

  #product-margin .s01-save-desktop {
    display: none;
  }

  #product-margin .s01-save-mobile {
    display: inline;
  }

  #product-margin .s01-recipe-item {
    align-items: start;
    background: color-mix(in srgb, var(--surface) 96%, #e8f0ea);
    border: 0;
    border-radius: 8px;
    gap: 5px 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    margin: 0 0 6px;
    padding: 8px 10px;
  }

  #product-margin .s01-recipe-item:last-child {
    margin-bottom: 0;
  }

  #product-margin .s01-recipe-item > .s01-recipe-main {
    display: contents;
  }

  #product-margin .s01-recipe-item > .s01-recipe-price {
    display: contents;
  }

  #product-margin .s01-recipe-name {
    align-self: center;
    font-size: 15px;
    font-weight: 800;
    grid-column: 1 / 3;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #product-margin .s01-recipe-usage,
  #product-margin .s01-recipe-unit,
  #product-margin .s01-recipe-unit-price,
  #product-margin .s01-recipe-item-cost {
    display: grid;
    font-size: 0;
    gap: 2px;
    min-width: 0;
  }

  #product-margin .s01-recipe-usage::before,
  #product-margin .s01-recipe-unit::before,
  #product-margin .s01-recipe-unit-price::before,
  #product-margin .s01-recipe-item-cost::before {
    color: var(--muted);
    content: attr(data-mobile-label);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
  }

  #product-margin .s01-recipe-usage::after,
  #product-margin .s01-recipe-unit::after,
  #product-margin .s01-recipe-unit-price::after,
  #product-margin .s01-recipe-item-cost::after {
    color: var(--ink);
    content: attr(data-mobile-value);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  /* Keep currency + amount one unit (e.g. AUD 0.50); do not char-wrap mid-number. */
  #product-margin .s01-recipe-item-cost::after {
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
  }

  /* With display:contents parents, supplier must occupy its own row under the name. */
  #product-margin .s01-recipe-supplier {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-top: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #product-margin .s01-recipe-usage {
    grid-column: 1;
    grid-row: 3;
  }

  #product-margin .s01-recipe-unit {
    grid-column: 2;
    grid-row: 3;
  }

  #product-margin .s01-recipe-unit-price {
    grid-column: 1;
    grid-row: 4;
  }

  #product-margin .s01-recipe-item-cost {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border-radius: 7px;
    grid-column: 2;
    grid-row: 4;
    min-width: 0;
    padding: 5px 7px;
  }

  #product-margin .s01-item-actions {
    align-self: start;
    flex-wrap: nowrap;
    gap: 4px;
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
  }

  #product-margin .s01-item-actions button {
    align-items: center;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 4px;
    width: 44px;
  }

  #product-margin .s01-item-action-icon {
    font-size: 18px;
    line-height: 1;
  }

  #product-margin .s01-item-action-text {
    display: none;
  }

  /* Compact cost confirm card stacks on tablet/phone. */
  #product-margin .s01-cost-save-region {
    align-items: stretch;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    padding: 10px;
  }

  #product-margin .s01-cost-result {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
  }

  #product-margin .s01-cost-result strong {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
    overflow: visible;
    overflow-wrap: normal;
    text-align: right;
    white-space: nowrap;
    width: 100%;
  }

  #product-margin .s01-cost-confirmation {
    background: transparent;
    border: 0;
    border-radius: 0;
    border-top: 0;
    gap: 4px;
    padding: 0;
  }

  #product-margin .s01-cost-confirmation > button {
    width: 100%;
  }

  #product-margin #s01-cost-confirmation-status {
    text-align: left;
  }

  /* Formal save: light region only — no thick bordered card. */
  #product-margin .s01-final-save {
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    border: 0;
    border-radius: 8px;
    gap: 4px;
    padding: 8px 10px;
  }

  #product-margin .s01-final-save > p {
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
  }

  #product-margin .s01-cost-confirmation > button,
  #product-margin .s01-final-save > button {
    justify-self: stretch;
    min-width: 0;
    width: 100%;
  }

  #product-margin .s01-pricing-workflows {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Price calc card: one light region; results use bg only (no nested ring). */
  #product-margin .s01-pricing-workflows > .s01-pricing-section {
    background: color-mix(in srgb, var(--surface) 94%, #e8f0ea);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    padding: 8px 10px;
  }

  #product-margin .s01-pricing-section > h3 {
    text-align: center;
  }

  /* Target margin: simple disclosure bar, not a heavy card. */
  #product-margin .s01-pricing-workflows > .s01-target-section {
    background: color-mix(in srgb, var(--gold) 8%, var(--surface));
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    padding: 0;
  }

  #product-margin .s01-pricing-workflows > .s01-target-section > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 6px;
    list-style: none;
    min-height: 40px;
    padding: 8px 12px;
    text-align: left;
  }

  #product-margin .s01-pricing-workflows > .s01-target-section > summary::-webkit-details-marker {
    display: none;
  }

  #product-margin .s01-pricing-workflows > .s01-target-section > summary::before {
    color: var(--muted);
    content: "▶";
    flex: 0 0 auto;
    font-size: 0.72em;
    line-height: 1;
  }

  #product-margin .s01-pricing-workflows > .s01-target-section[open] > summary::before {
    content: "▼";
  }

  #product-margin .s01-pricing-workflows > .s01-target-section[open] {
    padding: 0 0 8px;
  }

  #product-margin .s01-pricing-workflows > .s01-target-section[open] > summary {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    margin-bottom: 6px;
  }

  #product-margin .s01-pricing-workflows > .s01-target-section .s01-target-content {
    padding: 0 10px;
  }

  #product-margin .s01-pricing-grid {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  #product-margin .s01-pricing-results {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 0;
    border-radius: 8px;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
    padding: 6px;
  }

  #product-margin .s01-pricing-results > .result-field {
    margin: 0;
    min-width: 0;
  }

  #product-margin .s01-pricing-results > .result-field > span {
    font-size: 11px;
  }

  #product-margin .s01-pricing-results output,
  #product-margin .s01-target-section .s01-pricing-results output {
    display: block;
    font-size: clamp(13px, 4vw, 16px);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    line-height: 1.3;
    min-width: 0;
    overflow: visible;
    text-align: right;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
  }

  #product-margin .s01-target-margin-label-unit {
    display: none;
  }

  #product-margin .s01-percent-input-shell {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    height: 46px;
    overflow: hidden;
  }

  #product-margin .s01-percent-input-shell:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  #product-margin .s01-percent-input-shell > input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 44px;
    min-height: 44px;
    min-width: 0;
    outline: 0;
  }

  #product-margin .s01-percent-input-shell > strong {
    align-items: center;
    align-self: stretch;
    border-left: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  #product-margin .s01-cost-confirmation > .primary-action,
  #product-margin .s01-final-save > .primary-action {
    width: 100%;
  }

  #product-margin .s01-material-editor > .s01-material-name-field,
  #product-margin .s01-material-editor > .s01-material-supplier-field {
    align-content: start;
    grid-template-rows: auto 40px;
  }

  #product-margin .s01-material-editor > .s01-material-supplier-field {
    grid-template-rows: auto minmax(40px, auto) auto;
  }

  #product-margin .s01-material-row2 > .field {
    grid-template-rows: minmax(1.2em, auto) 40px;
  }

  #product-margin .s01-product-fields > .field {
    grid-template-rows: minmax(1.2em, auto) 40px;
  }

  #product-margin .s01-usage-input-shell,
  #product-margin .s01-money-input-shell,
  #product-margin .s01-code-control {
    height: 40px;
    min-height: 40px;
  }

  #product-margin .s01-usage-input-shell input,
  #product-margin .s01-usage-input-shell select,
  #product-margin .s01-money-input-shell input,
  #product-margin .s01-code-control > input,
  #product-margin .s01-code-control > select {
    height: 40px;
    min-height: 40px;
  }

  #product-margin .s01-save-material {
    height: 40px;
    max-height: 40px;
    min-height: 40px;
  }

  #product-margin .s01-cost-confirmation > button,
  #product-margin .s01-final-save > button,
  #product-margin .s01-adopt-price {
    min-height: 40px;
  }

  #product-margin .s01-workflow-note {
    font-size: 11px;
    line-height: 1.3;
    margin: 0 0 4px;
  }

  #product-margin .s01-pricing-section > h3 {
    font-size: 15px;
    margin: 0 0 2px;
  }

  #product-margin .s01-percent-input-shell {
    height: 40px;
  }

  #product-margin .s01-percent-input-shell > input {
    height: 38px;
    min-height: 38px;
  }

  /* Formal save note: allow full 2–3 line wrap on phone; never ellipsize. */
  #product-margin .s01-final-save > p {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    margin: 0;
  }

  #product-margin .s01-cost-confirmation > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 0;
  }

  .section01-stage .s01-library-hint {
    display: none;
  }

  .section01-stage .s01-products-dock {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .section01-stage .s01-library-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    min-height: 40px;
    width: 100%;
  }

  .section01-stage .s01-library-panel {
    grid-column: 1;
    grid-row: 3;
  }

  .section01-stage .s01-status-filters {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section01-stage .s01-status-filters {
    width: 100%;
  }

  .section01-stage .s01-product-table-header {
    display: none;
  }

  .section01-stage .s01-product-card {
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: grid;
    gap: 5px 4px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-top: 4px;
    padding: 4px;
  }

  .section01-stage .s01-product-cell-label {
    color: var(--muted);
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
  }

  .section01-stage .s01-product-name-cell {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .section01-stage .s01-product-status-cell {
    display: none;
  }

  .section01-stage .s01-product-identity-line:has(.s01-product-status-inline) {
    display: flex;
  }

  .section01-stage .s01-product-cost-cell {
    grid-column: 1 / 5;
    grid-row: 2;
  }

  .section01-stage .s01-product-price-cell {
    grid-column: 5 / 9;
    grid-row: 2;
  }

  .section01-stage .s01-product-margin-cell {
    grid-column: 9 / 13;
    grid-row: 2;
  }

  .section01-stage .s01-product-cost-cell > strong,
  .section01-stage .s01-product-price-cell > strong {
    display: block;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    text-align: right;
    white-space: nowrap;
    width: 100%;
  }

  .section01-stage .s01-product-updated-cell {
    display: none;
  }

  .section01-stage .s01-product-cell > .s01-product-updated-mobile {
    color: var(--muted);
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: 2px;
  }

  .section01-stage .s01-product-row-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
  }

  .section01-stage .s01-product-row-actions button,
  .section01-stage .s01-product-history > summary {
    font-size: 11px;
    min-height: 36px;
    padding: 6px 7px;
  }

  .section01-stage .s01-product-history > summary {
    justify-content: center;
  }
}

@media (max-width: 430px) {
  #product-margin .section01-flow {
    gap: 6px;
  }

  /* Keep formal mobile identity: name full; type | status side by side. */
  #product-margin .s01-product-fields {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  #product-margin .s01-product-fields > .product-name-field {
    grid-column: 1 / -1;
  }

  #product-margin .s01-product-fields > .product-type-field {
    grid-column: 1;
  }

  #product-margin .s01-product-fields > .product-status-field {
    grid-column: 2;
  }

  #product-margin .s01-product-fields.s01-product-fields--no-status {
    grid-template-columns: minmax(0, 1fr);
  }

  #product-margin .s01-product-fields.s01-product-fields--no-status > .product-name-field,
  #product-margin .s01-product-fields.s01-product-fields--no-status > .product-type-field {
    grid-column: 1 / -1;
    max-width: none;
    justify-self: stretch;
  }

  #product-margin .s01-product-fields > .field,
  #product-margin .s01-material-row2 > .field {
    align-content: end;
    grid-template-rows: auto 40px;
    row-gap: 2px;
  }

  #product-margin .s01-product-fields > .field > select {
    height: 40px;
    min-height: 40px;
  }

  #product-margin .s01-own-barcode-field > input {
    height: 40px;
    min-height: 40px;
  }

  #product-margin .s01-material-editor > .s01-material-name-field,
  #product-margin .s01-material-editor > .s01-material-supplier-field {
    align-content: start;
    align-self: start;
    grid-template-rows: auto 40px;
    row-gap: 2px;
  }

  #product-margin .s01-material-editor > .s01-material-supplier-field {
    grid-template-rows: auto minmax(40px, auto) auto;
  }

  #product-margin .s01-product-fields > .field > span:first-child,
  #product-margin .s01-material-row2 > .field > span:first-child {
    align-self: end;
  }

  #product-margin .s01-material-editor > .s01-material-name-field > span:first-child,
  #product-margin .s01-material-editor > .s01-material-supplier-field > span:first-child {
    align-self: start;
    line-height: 1.3;
    margin: 0;
    min-height: 1.3em;
  }

  /* Phone: writing order, each field full width —
     材料名称 → 用量 → 单价 → 供应商 → 保存并添加. */
  #product-margin .s01-material-editor {
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
  }

  #product-margin .s01-material-input-hint {
    grid-column: 1;
    order: 0;
  }

  #product-margin .s01-material-editor > .s01-material-name-field {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 1;
    width: 100%;
  }

  #product-margin .s01-material-editor > .s01-material-row2,
  #product-margin .s01-material-row2 {
    display: contents;
  }

  #product-margin .s01-material-usage-field {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 2;
    width: 100%;
  }

  /* Beat `#product-margin .s01-material-row2 > .field { display:grid }` specificity. */
  #product-margin .s01-material-row2 > .s01-material-price-field.field,
  #product-margin .s01-material-price-field.field {
    /* Flex stack avoids input size=20 (~224px) intrinsic track leaving a half-row blank. */
    align-content: stretch;
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-end;
    order: 3;
    padding-right: 0;
    row-gap: 2px;
    width: 100%;
  }

  #product-margin .s01-material-row2 > .s01-material-price-field.field > span:first-child,
  #product-margin .s01-material-price-field.field > span:first-child {
    display: block;
    width: 100%;
  }

  #product-margin .s01-material-row2 > .s01-material-price-field.field .s01-money-input-shell,
  #product-margin .s01-material-row2 > .s01-material-price-field.field .s01-money-input-shell input,
  #product-margin .s01-material-price-field.field .s01-money-input-shell,
  #product-margin .s01-material-price-field.field .s01-money-input-shell input {
    box-sizing: border-box;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  #product-margin .s01-material-editor > .s01-material-supplier-field {
    grid-column: 1;
    grid-row: auto;
    order: 4;
  }

  #product-margin .s01-material-editor > .s01-material-supplier-create,
  #product-margin .s01-material-supplier-create {
    grid-column: 1;
    order: 5;
  }

  #product-margin .s01-material-editor > .s01-material-name-field > input,
  #product-margin .s01-usage-input-shell,
  #product-margin .s01-material-editor .s01-money-input-shell {
    min-height: 40px;
  }

  #product-margin .s01-material-supplier-field input[data-s02v2-counterparty-search] {
    height: 40px;
    min-height: 40px;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected {
    flex-wrap: wrap;
    height: auto;
    min-height: 40px;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected-label {
    flex: 1 1 100%;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected-actions {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  #product-margin .s01-usage-input-shell input,
  #product-margin .s01-usage-input-shell select,
  #product-margin .s01-money-input-shell input {
    min-height: 38px;
  }

  #product-margin .s01-save-material {
    grid-column: 1;
    grid-row: auto;
    height: 44px;
    justify-self: stretch;
    margin-left: 0;
    max-height: 44px;
    max-width: 100%;
    min-height: 44px;
    order: 6;
    width: 100%;
  }

  /* With row2 display:contents, place feedback after save — never grid-row:3 (caused blank half-rows). */
  #product-margin .s01-material-row2 > .s01-action-feedback {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
    order: 7;
    text-align: left;
    width: 100%;
  }

  #product-margin .s01-product-fields,
  #product-margin .s01-material-editor {
    gap: 6px;
  }

  #product-margin .s01-pricing-grid {
    gap: 6px;
  }

  #product-margin .s01-workflow-note {
    margin: 0 0 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  #product-margin .s01-cost-save-region {
    margin-top: 0;
    padding: 10px;
  }

  #product-margin .s01-cost-result {
    align-items: start;
    padding: 0;
  }

  #product-margin .s01-cost-result strong {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
    overflow: visible;
    overflow-wrap: normal;
    text-align: right;
    white-space: nowrap;
    width: 100%;
  }

  #product-margin .s01-cost-confirmation {
    gap: 4px;
    padding: 0;
  }

  #product-margin .s01-cost-confirmation > button {
    width: 100%;
  }

  #product-margin .s01-pricing-workflows {
    gap: 6px;
  }

  #product-margin .s01-pricing-workflows > .s01-pricing-section {
    border: 0;
    padding: 8px 10px;
  }

  #product-margin .s01-pricing-results {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 0;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
    padding: 6px;
  }

  #product-margin .s01-pricing-results output,
  #product-margin .s01-target-section .s01-pricing-results output {
    display: block;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    text-align: right;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
  }

  #product-margin .s01-pricing-workflows > .s01-target-section {
    border: 0;
  }

  #product-margin .s01-final-save {
    border: 0;
    gap: 4px;
    padding: 8px 10px;
  }

  .section01-stage .s01-products-dock {
    gap: 0;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .section01-stage .s01-library-hint {
    display: none;
  }

  .section01-stage .s01-library-toggle {
    min-height: 40px;
    padding: 4px 6px;
  }

  #product-margin .s01-percent-input-shell {
    height: 40px;
  }

  #product-margin .s01-percent-input-shell > input {
    height: 38px;
    min-height: 38px;
  }

}

@media (min-width: 901px) {
  .section01-stage {
    border-bottom: 6px solid color-mix(in srgb, var(--accent) 16%, #e6decc);
    padding-bottom: 26px;
  }

  .section01-stage + .section-panel {
    margin-top: 28px;
  }

  .section01-stage .s01-products-dock {
    background: color-mix(in srgb, var(--gold) 8%, #f3f7f1);
    border-color: color-mix(in srgb, var(--accent) 30%, #d8cfbd);
    box-shadow: 0 5px 16px rgba(36, 70, 56, .08);
    margin-top: 24px;
    padding: 12px 14px;
  }

  #product-margin .s01-target-section > summary {
    cursor: default;
    list-style: none;
    pointer-events: none;
  }

  #product-margin .s01-target-section > summary::-webkit-details-marker {
    display: none;
  }

  /* Desktop: product/POS type select matches 保存并添加 width. */
  #product-margin .s01-code-control {
    grid-template-columns: minmax(0, 1fr) var(--s01-side-action-width);
  }

  #product-margin .s01-code-control > select {
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
    padding-left: 8px;
    padding-right: 22px;
  }

  #product-margin .s01-save-material {
    box-sizing: border-box;
    min-width: var(--s01-side-action-width);
    width: var(--s01-side-action-width);
  }

}


/* Material supplier picker (shared business partners, one control). */
.s01-supplier-partners-host {
  min-width: 0;
  width: 100%;
}

#product-margin .s01-material-supplier-field .s01-supplier-partners-host,
#product-margin .s01-material-supplier-field .bp-picker,
#product-margin .s01-material-supplier-field .s02v2-settlement-party {
  display: contents;
}

#product-margin .s01-material-supplier-field .bp-picker {
  margin: 0;
}

#product-margin .s01-material-supplier-field input[data-s02v2-counterparty-search] {
  box-sizing: border-box;
  grid-row: 2;
  height: 46px;
  min-height: 46px;
  min-width: 0;
  width: 100%;
}

/* Default / narrow: name row + actions row inside the same selected box. */
#product-margin .s01-material-supplier-field .s02v2-settlement-selected {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-row: 2;
  height: auto;
  justify-content: space-between;
  max-width: 100%;
  min-height: 46px;
  min-width: 0;
  overflow: visible;
  width: 100%;
}

#product-margin .s01-material-supplier-field .s02v2-settlement-selected-label {
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#product-margin .s01-material-supplier-field .s02v2-settlement-selected-label strong {
  font-weight: 800;
}

#product-margin .s01-material-supplier-field .s02v2-settlement-selected-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-start;
}

#product-margin .s01-material-supplier-field .s02v2-settlement-selected-actions .secondary-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Desktop: one row — name left (ellipsis) + change/clear right. */
@media (min-width: 901px) {
  #product-margin .s01-material-supplier-field .s02v2-settlement-selected {
    flex-wrap: nowrap;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected-label {
    flex: 1 1 auto;
  }

  #product-margin .s01-material-supplier-field .s02v2-settlement-selected-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

#product-margin .s01-material-supplier-field .s02v2-settlement-suggestions,
#product-margin .s01-material-supplier-field .s01-supplier-save-flash {
  grid-row: 3;
  min-width: 0;
}

#product-margin .s01-material-supplier-field .s02v2-settlement-suggestions:empty,
#product-margin .s01-material-supplier-field .s02v2-settlement-suggestions:not(:has(*)) {
  display: none;
}

#product-margin .s01-supplier-save-flash {
  color: var(--success, #1f6b45);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
}

#product-margin .s01-material-supplier-create {
  grid-column: 1 / -1;
  grid-row: auto;
  min-width: 0;
  width: 100%;
}

#product-margin .s01-material-supplier-create[hidden] {
  display: none !important;
}

#product-margin .s01-supplier-create-panel {
  background: color-mix(in srgb, var(--panel, #fff) 92%, var(--line, #d7dde5));
  border: 1px solid var(--line, #d7dde5);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
}

#product-margin .s01-supplier-create-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

#product-margin .s01-supplier-create-grid {
  display: grid;
  gap: 8px 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#product-margin .s01-supplier-create-panel .bp-create-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* Supplier create — Primary matches DPC hierarchy language (color/shadow only). */
#product-margin .s01-supplier-create-panel .bp-create-actions .primary-action,
#product-margin .s01-supplier-create-panel .bp-create-actions .bp-create-save {
  background: linear-gradient(180deg, #17352b 0%, #10231d 100%);
  border-color: rgba(199, 161, 90, 0.62);
  box-shadow: 0 2px 8px rgba(16, 35, 29, 0.22);
  color: #fffdf8;
  opacity: 1;
  visibility: visible;
}

#product-margin .s01-supplier-create-panel .bp-create-actions .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#product-margin .s01-supplier-create-panel .bp-create-actions .bp-create-save:hover:not(:disabled):not([aria-disabled="true"]),
#product-margin .s01-supplier-create-panel .bp-create-actions .primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#product-margin .s01-supplier-create-panel .bp-create-actions .bp-create-save:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 3px 10px rgba(16, 35, 29, 0.3);
}

#product-margin .s01-supplier-create-panel .bp-create-actions .primary-action:disabled,
#product-margin .s01-supplier-create-panel .bp-create-actions .bp-create-save:disabled,
#product-margin .s01-supplier-create-panel .bp-create-actions .primary-action[aria-disabled="true"],
#product-margin .s01-supplier-create-panel .bp-create-actions .bp-create-save[aria-disabled="true"] {
  background: #d9dfdc;
  border-color: #c4ccc8;
  box-shadow: none;
  color: #68736e;
  cursor: not-allowed;
  opacity: 1;
}

#product-margin .s01-supplier-create-panel .bp-create-actions .secondary-action,
#product-margin .s01-supplier-create-panel .bp-create-actions .bp-create-cancel {
  background: var(--surface-soft, #f3eee3);
  border-color: rgba(23, 33, 29, 0.14);
  box-shadow: none;
  color: var(--ink, #17211d);
}

#product-margin .s01-recipe-supplier {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 2px;
}

@media (max-width: 900px) {
  #product-margin .s01-supplier-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  #product-margin .s01-supplier-create-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #product-margin .s01-supplier-create-panel {
    padding: 10px;
  }

  #product-margin .s01-supplier-create-panel .bp-create-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #product-margin .s01-supplier-create-panel .bp-create-actions .primary-action,
  #product-margin .s01-supplier-create-panel .bp-create-actions .secondary-action {
    width: 100%;
  }
}

/* Final Stage 4 cascade: keep the library secondary at every viewport. */
.section01-stage .s01-products-dock {
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  border: 1px solid var(--line);
  box-shadow: none;
}

.section01-stage .s01-library-toggle {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 750;
}

.section01-stage .s01-library-toggle:hover,
.section01-stage .s01-library-toggle[aria-expanded="true"] {
  background: var(--surface-soft);
  border-color: var(--line);
  box-shadow: none;
  color: var(--ink);
}

@media (max-width: 900px) {
  /* Compact guided-step card padding on phone/tablet; chrome already hidden globally. */
  #product-margin .s01-guided-step {
    border-radius: 9px;
    gap: 6px;
    padding: 8px 8px 8px 12px;
  }
}