/* 成本结构：标签与输入同一行；小节标题为 emoji + 文案（彩色 emoji 依赖系统 / Noto Color Emoji） */
.cost-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cost-section {
  margin: 0;
  padding: 0;
  border: none;
}
.cost-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}
.cost-section-icon {
  font-family: "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}
.cost-section-title-text {
  line-height: 1.3;
}

/* 单行：左文案 + 右输入区（3～4 位数字宽度足够） */
.cost-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 5px;
  font-size: 13px;
}
.cost-row:last-child {
  margin-bottom: 0;
}
.cost-label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 0 1 46%;
  min-width: 0;
  color: #64748b;
  line-height: 1.35;
}
.cost-label::before {
  content: "·";
  flex-shrink: 0;
  color: #94a3b8;
  font-weight: 700;
  line-height: 1.35;
}

/* 输入壳 + 框外单位（元、% 无背景） */
.cost-row-right {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.cost-unit-outside {
  flex-shrink: 0;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1;
}

/* 附图风格：圆角边框 + 数值区 + 步进 + 单位 */
.cost-input-shell {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: min(220px, 52%);
  align-items: stretch;
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  overflow: hidden;
}
.cost-input-shell:focus-within {
  border-color: #4a69bd;
  box-shadow: 0 0 0 2px rgba(74, 105, 189, 0.15);
}
.cost-input-shell input[type="number"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 8rem;
  padding: 8px 10px;
  border: none;
  border-radius: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  color: #0f172a;
  background: transparent;
}
.cost-input-shell input[type="number"]:focus {
  outline: none;
}
.cost-input-shell input[type="number"]::-webkit-outer-spin-button,
.cost-input-shell input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cost-input-shell input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.cost-stepper {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-left: 1px solid #e2e8f0;
  background: #f8fafc;
}
.cost-step {
  flex: 1;
  min-height: 18px;
  padding: 0 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  color: #64748b;
  font-family: inherit;
}
.cost-step:hover {
  background: #e2e8f0;
  color: #334155;
}
.cost-step:active {
  background: #cbd5e1;
}

.cost-hint {
  margin: 0 0 8px 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.45;
}

/* 左栏成本区完整展开，不限制高度、不出现纵向滚动条 */
.calc-col--cost .cost-form {
  max-height: none;
  overflow: visible;
}

/* 盈利测算：销售数据同行、只读结果 */
.profit-section {
  margin-bottom: 16px;
}
.profit-section:last-child {
  margin-bottom: 0;
}
.profit-section-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}
.profit-sale-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.profit-inline-field {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 6px;
  margin: 0;
  cursor: pointer;
}
.profit-inline-label {
  flex: 0 1 auto;
  font-size: 13px;
  color: #64748b;
  line-height: 1.35;
}
.profit-inline-label--result {
  flex: 0 1 auto;
  min-width: 0;
}
.profit-inline-field .cost-row-right {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-start;
}
.profit-result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}
.profit-readonly-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.profit-readonly {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  text-align: right;
  min-width: 4.5rem;
}
.profit-readonly.is-empty {
  font-size: 15px;
  font-weight: 500;
  color: #94a3b8;
}

@media (max-width: 520px) {
  .cost-row {
    flex-wrap: wrap;
  }
  .cost-label {
    flex: 1 1 100%;
  }
  .cost-input-shell {
    max-width: none;
  }
}