/* ============================================================
   DOAS 健康家 · 新风管道系统水力计算页面样式
   ============================================================ */
body { overflow: hidden; }

#main {
  position: fixed; inset: 60px 0 0 0; display: flex;
  gap: 12px; padding: 12px 14px 14px;
}

/* ---------- 左：输入面板 ---------- */
#inputPanel {
  width: 330px; flex-shrink: 0; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 14px; backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 14px;
}
#inputPanel::-webkit-scrollbar { width: 6px; }
#inputPanel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.panel-sec { display: flex; flex-direction: column; gap: 8px; }
.sec-title {
  font-size: 12.5px; font-weight: 600; color: #cdd6e4;
  letter-spacing: 0.3px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.param-row {
  display: grid; grid-template-columns: 118px 1fr 64px; align-items: center; gap: 8px;
}
.param-row label { font-size: 12px; color: #c3cddc; }
.param-row input[type="number"], .param-row .txt {
  width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; border-radius: 6px; padding: 4px 7px; font-size: 12.5px; outline: none;
  font-variant-numeric: tabular-nums;
}
.param-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(78,161,255,0.25); }
.param-row .pval { font-size: 12px; color: var(--muted); text-align: right; }
.param-row .sel {
  width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; border-radius: 6px; padding: 4px 6px; font-size: 12.5px; outline: none;
}
.param-row .sel option { background: #161d2b; }
.param-row input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }

.order-btn {
  margin-top: 2px; padding: 12px 10px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #06203a; font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(78,161,255,0.35); transition: all .15s;
}
.order-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.order-btn:active { transform: translateY(0); }
.order-btn.loading { opacity: 0.6; pointer-events: none; }
.order-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.order-fmt-label { font-size: 12px; color: #c3cddc; white-space: nowrap; }
.order-fmt {
  width: 92px; flex-shrink: 0; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12); color: #fff; border-radius: 8px;
  padding: 10px 8px; font-size: 13px; outline: none; cursor: pointer;
}
.order-fmt option { background: #161d2b; }
.order-row .order-btn { flex: 1; margin-top: 0; }

/* ---------- 右：结果 ---------- */
#rightCol {
  flex: 1; min-width: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
#rightCol::-webkit-scrollbar { width: 6px; }
#rightCol::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.card {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px;
  padding: 14px 16px; backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.card-title { font-size: 13px; font-weight: 600; color: #cdd6e4; margin-bottom: 10px; letter-spacing: 0.3px; }

/* 结论卡 */
#verdict { display: flex; gap: 18px; align-items: stretch; }
.vc-left { flex: 1; min-width: 0; }
.vc-title { font-size: 13px; font-weight: 600; color: #cdd6e4; margin-bottom: 12px; }
.vc-numbers { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 12px; }
.vc-big { display: flex; flex-direction: column; align-items: center; min-width: 92px; }
.vc-big span { font-size: 30px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.vc-big em { font-style: normal; font-size: 11px; color: var(--muted); }
.vc-big label { font-size: 11px; color: var(--muted); margin-top: 4px; }
.vc-vs { font-size: 13px; color: var(--muted); padding-bottom: 34px; }
.vc-big.vc-ext span { color: #4ea1ff; }
.vc-big.vc-flow span { color: #34d399; }
.bar-wrap { position: relative; margin-top: 6px; }
.bar { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: visible; }
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px;
  background: linear-gradient(90deg, #34d399, #4ea1ff); min-width: 2px; transition: width .3s;
}
.bar-fill.over { background: linear-gradient(90deg, #fbbf24, #f87171); }
.bar-ext {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.7); border-radius: 2px;
}
.bar-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.vc-right { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.badge {
  font-size: 14px; font-weight: 700; padding: 9px 12px; border-radius: 10px; text-align: center;
}
.badge.ok { color: #d1fae5; background: rgba(52,211,153,0.15); border: 1px solid rgba(52,211,153,0.55); }
.badge.warn { color: #fde68a; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.6); }
.badge.danger { color: #fecaca; background: rgba(248,113,113,0.14); border: 1px solid rgba(248,113,113,0.6); }
.vc-note { font-size: 12px; color: #c3cddc; line-height: 1.6; }
.vc-sug { margin: 0; padding-left: 18px; font-size: 12px; color: #fbbf24; line-height: 1.8; }

/* 系统示意图 */
#flowDiagram { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fnode {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 9px; font-size: 11.5px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #dbe3ef;
}
.fnode .fn-name { font-weight: 600; white-space: nowrap; }
.fnode .fn-val { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fnode.dim { opacity: 0.55; }
.fnode.hl { border-color: var(--accent); box-shadow: 0 0 12px rgba(78,161,255,0.3); }
.farrow { color: #6b7689; font-size: 13px; flex-shrink: 0; }
.diag-note { margin-top: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* 明细表 */
.dt { width: 100%; border-collapse: collapse; font-size: 12px; }
.dt th, .dt td { padding: 6px 9px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dt thead th { color: var(--muted); font-weight: 600; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.dt tbody td { color: #dbe3ef; }
.dt td:nth-child(3), .dt th:nth-child(3), .dt td:nth-child(4), .dt th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.dt tfoot th { color: #fff; border-top: 1px solid rgba(255,255,255,0.15); font-size: 13px; }
.dt tfoot th:nth-child(3) { text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.dt tfoot th:nth-child(4) { text-align: right; }

.foot-note { font-size: 11px; color: #6b7689; line-height: 1.7; padding: 0 4px; }

@media (max-width: 1080px) {
  #main { flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #inputPanel { width: 100%; max-height: 42vh; }
  #rightCol { min-height: 52vh; }
  #topbar { padding: 0 12px; }
  #topbar .stats { gap: 12px; }
  #topbar .stats .num { font-size: 14px; }
  #topbar .stats .lbl { font-size: 10px; }
  #verdict { flex-direction: column; }
  .vc-right { width: 100%; }
}

.flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow-row + .flow-row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.08); }