* {
  box-sizing: border-box;
}
.tools-content { width: 100%; background: white; padding: 1.5rem;}
/* 液体过滤袋流量与压力单位换算器 ———————————— 样式 */
.wrap { background: white; }
.tab-bar { display: flex; gap: 6px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tab-btn { padding: 7px 16px; border-radius: 10px; border: 0.5px solid #e6e6e6; background: transparent; color: #17191b; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.tab-btn.active { background: #fff; color: #007bff; border-color: #007bff; font-weight: 500; }
.tab-btn:hover:not(.active) { background: #e6e6e6; }
.panel { display: none; }
.panel.active { display: block; }
.card { background: #fff; border: 0.5px solid #e6e6e6; border-radius: 15px; padding: 1.25rem; margin-bottom: 1rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.field label { font-size: 12px; color: #17191b; display: block; margin-bottom: 5px; }
.field input, .field select { width: 100%; box-sizing: border-box; }
.irow { display: flex; align-items: center; gap: 6px; }
.irow input { flex: 1; }
.irow select { width: auto; }
.divider { display: flex; align-items: center; justify-content: center; padding: 0.4rem 0 0.9rem; color: #409eff; font-size: 18px; }
.rg { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rc { background: #fbfbfb; border-radius: 10px; padding: 0.8rem 1rem; }
.rc.hi { border: 0.5px solid #a0cfff; background: #ecf5ff; }
.rc .rl { font-size: 12px; color: #17191b; margin-bottom: 3px; }
.rc .rv { font-size: 19px; font-weight: 500; color: #17191b; }
.rc.hi .rv { color: #409eff; }
.rc .ru { font-size: 11px; color: #17191b; }
.st { font-size: 13px; font-weight: 500; margin-top: 10px; }
.sec { font-size: 13px; font-weight: 650; color: #17191b; margin: 0 0 10px; }
.tip { font-size: 12px; color: #f56c6c; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid #e6e6e6; line-height: 1.6; }
@media (max-width: 480px) { .row2,.row3 { grid-template-columns: 1fr; } }


/* 液体过滤袋选型推荐工具 ------------------------------ 样式 */
.step-bar { display: flex; align-items: center; gap: 0; margin-bottom: 1.75rem;  flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6B7280; }
.step.active { color: #17191B; font-weight: 500; }
.step.done { color: #1F7A4A; }
.s-num { width: 22px; height: 22px; border-radius: 50%; border: 0.5px solid #D7DEE8; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;}
.step.active .s-num { background: #F3F6FA; border-color: #C9D4E5;}
.step.done .s-num { background: #E7F6EC; border-color: transparent; color: #1F7A4A;}
.s-div { flex: 1; height: 0.5px; background: #E9EEF5; margin: 0 8px; min-width: 18px; }
.page { display: none; }
.page.active { display: block; }
.chip-group { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.chip { padding: 5px 12px; border-radius: 20px;border: 0.5px solid #D7DEE8;font-size: 12px;cursor: pointer;background: transparent;color: #4B5563;transition: all 0.15s;user-select: none;}
.chip.sel {background: #F3F6FA;border-color: #C9D4E5;color: #17191B;font-weight: 500;}
#liquid-filterbag-selector .nav {display: flex;gap: 10px;margin-top: 1.25rem;}

.res-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.res-title {
  font-size: 17px;
  font-weight: 650;
}

.res-sub {
  font-size: 13px;
  color: #4B5563;
  margin-top: 3px;
}

.mat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 1rem;
}

.mat-card {
  border-radius: 16px;
  padding: 1rem;
  border: 0.5px solid #E9EEF5;
}

.mat-card.best {
  border: 2px solid #a0cfff;
}

.mat-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.mat-badge.best {
  background: #E8F2FC;
  color: #1A6FBF;
}

.mat-badge.alt {
  background: #F3F6FA;
  color: #4B5563;
}

.mat-name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.mat-props {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.prop-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #F3F6FA;
  color: #4B5563;
}

.mat-reason {
  font-size: 12px;
  color: #4B5563;
  line-height: 1.6;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 1rem;
}

.spec-c {
  background: #fff;
  border-radius: 12px;
  border: 0.5px solid #ecf5ff;
  padding: 0.8rem 1rem;
}

.spec-c .sl {
  font-size: 12px;
  color: #4B5563;
  margin-bottom: 3px;
}

.spec-c .sv {
  font-size: 18px;
  font-weight: 500;
}

.spec-c .su {
  font-size: 11px;
  color: #6B7280;
}

.spec-c.hi {
  border: 0.5px solid #a0cfff;
  background: #ecf5ff;
}

.spec-c.hi .sv {
  color: #409eff;
}

.warn-box {
  background: #FFF4D6;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 12px;
  color: #8A5A00;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.restart {
  font-size: 12px;
  color: #6B7280;
  cursor: pointer;
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 0.5px solid #E9EEF5;
}

.restart:hover {
  color: #4B5563;
}

.tip {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.6;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid #E9EEF5;
}

#liquid-filterbag-selector .nav .btn { flex: 1; }
#liquid-filterbag-selector .cta-row .btn { flex: 1; }

@media (max-width: 480px) { .nav, .cta-row { flex-direction: column; } .nav button { width: 100%; } }