.rule-row[data-type="transform"] {
  display: block;
  padding: 0;
}

.transform-main {
  display: grid;
  grid-template-columns: 25px 1fr 1fr 1fr 1.2fr 36px;
  gap: 8px;
  align-items: center;
  padding: 8px;
}

.rule-condition {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1.4fr;
  gap: 8px;
  align-items: center;
  padding: 8px 52px 8px 41px;
  border-top: 1px dashed var(--line);
  background: #f4f7f5;
  border-radius: 0 0 10px 10px;
}

.rule-condition > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
}

@media (max-width: 800px) {
  .transform-main,
  .rule-condition {
    grid-template-columns: 1fr;
    padding: 8px;
  }
}

.mapping-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: -7px 0 18px;
  color: var(--muted);
  font-size: 12px;
}

.mapping-help code,
.mapping-row code {
  background: #eef3ef;
  border-radius: 5px;
  padding: 2px 6px;
}

.mapping-table {
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}

.mapping-head,
.mapping-row {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) 35px minmax(260px, 1.2fr);
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}

.mapping-head {
  background: #173e2f;
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mapping-row {
  font-weight: 500;
  border-top: 1px solid var(--line);
}

.mapping-row:nth-child(odd) { background: #fafbfa; }
.mapping-row > span,
.mapping-head > span:nth-child(2) { text-align: center; color: #8b968f; }
.mapping-row input { margin: 0; }

@media (max-width: 650px) {
  .mapping-head { display: none; }
  .mapping-row { grid-template-columns: 1fr; gap: 5px; }
  .mapping-row > span { display: none; }
}

.preview-selectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.preview-note {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
}

.preview-products {
  display: grid;
  gap: 18px;
}

.preview-product {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.preview-product-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #f7f9f7;
}

.preview-product-head span {
  color: var(--green2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.preview-product-head h3 { margin: 3px 0; font-size: 17px; }
.preview-product-head p { margin: 0; color: var(--muted); font-size: 12px; }
.preview-status { padding: 5px 9px; border-radius: 99px; font-size: 11px; white-space: nowrap; }
.preview-status.included { background: #e0f3e8; color: #17613f; }
.preview-status.excluded { background: #f8e3e3; color: #8b2929; }
.preview-table-wrap { overflow-x: auto; }
.preview-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.preview-table th { padding: 8px 10px; text-align: left; background: #173e2f; color: white; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.preview-table th:nth-child(1) { width: 17%; }
.preview-table th:nth-child(2) { width: 16%; }
.preview-table th:nth-child(3), .preview-table th:nth-child(4) { width: 33.5%; }
.preview-table td { border-top: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.preview-table .disabled-row { opacity: .48; background: #f7f7f7; }
.preview-value { max-height: 78px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #59635d; }
.preview-value.output { color: var(--ink); font-weight: 600; }
.rule-audit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 14px 18px; border-top: 1px solid var(--line); }
.rule-audit h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.rule-audit p { margin: 4px 0; color: var(--muted); font-size: 12px; }
.audit-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #aeb6b1; }
.audit-dot.pass { background: #2a9b65; }
.audit-dot.fail { background: #c84c4c; }
.preview-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px; border: 1px dashed #c8d2cb; border-radius: 11px; color: var(--muted); text-align: center; }
.preview-empty b { color: var(--ink); }

@media (max-width: 800px) {
  .preview-selectors, .rule-audit { grid-template-columns: 1fr; }
  .preview-product-head { flex-direction: column; }
  .preview-table { min-width: 850px; }
}