/* /assets/css/sim/mechanical/centrifugal-pump-adjust-pressure-and-see-flow-rate.css — 本页专属样式（en/zh 共用） */
/* ===== 离心泵模拟器 · Centrifugal pump simulator ===== */

/* ===== 控制面板 ===== */
body[data-topic="centrifugal-pump-pressure-flow"] .controls{
  max-width:900px;width:100%;margin:8px 6px 4px;
  background:#fff;border:1px solid #dbe3ee;border-radius:12px;
  padding:16px 20px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
}
body[data-topic="centrifugal-pump-pressure-flow"] .ctrl-group{
  flex:1 1 340px;display:flex;flex-direction:column;gap:8px;
}
body[data-topic="centrifugal-pump-pressure-flow"] .ctrl-group label{
  font-size:14px;color:#475569;display:flex;justify-content:space-between;align-items:baseline;
}
body[data-topic="centrifugal-pump-pressure-flow"] .ctrl-group label b{color:#1d4ed8;font-size:15px}
body[data-topic="centrifugal-pump-pressure-flow"] input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#bfdbfe,#2563eb);outline:none;cursor:pointer;
}
body[data-topic="centrifugal-pump-pressure-flow"] input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid #2563eb;box-shadow:0 2px 6px rgba(37,99,235,.35);cursor:grab;
}
body[data-topic="centrifugal-pump-pressure-flow"] input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing}
body[data-topic="centrifugal-pump-pressure-flow"] input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #2563eb;
  box-shadow:0 2px 6px rgba(37,99,235,.35);cursor:grab;
}

body[data-topic="centrifugal-pump-pressure-flow"] .readouts{display:flex;gap:12px;flex-wrap:wrap}
body[data-topic="centrifugal-pump-pressure-flow"] .readout{
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 16px;
  min-width:130px;text-align:center;
}
body[data-topic="centrifugal-pump-pressure-flow"] .readout .k{
  font-size:12px;color:#5b6a7d;letter-spacing:.04em;margin-bottom:4px;
}
body[data-topic="centrifugal-pump-pressure-flow"] .readout .v{
  font-size:22px;font-weight:700;color:#1d4ed8;font-variant-numeric:tabular-nums;line-height:1.1;
}
body[data-topic="centrifugal-pump-pressure-flow"] .readout .v small{
  font-size:12px;font-weight:500;color:#5b6a7d;margin-left:3px;
}

/* ===== SVG 内文字 ===== */
body[data-topic="centrifugal-pump-pressure-flow"] .tag{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:15px;fill:#334155;
}
body[data-topic="centrifugal-pump-pressure-flow"] .tag-sm{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:12px;fill:#5b6472;
}
body[data-topic="centrifugal-pump-pressure-flow"] .tag-num{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:13px;fill:#5b6472;font-weight:600;
}

/* ===== 流动虚线 ===== */
body[data-topic="centrifugal-pump-pressure-flow"] .flow-line{
  fill:none;stroke:#3b82f6;stroke-width:3;stroke-linecap:round;stroke-dasharray:12 12;
  animation:dashMove 1.4s linear infinite;
}
@keyframes dashMove{to{stroke-dashoffset:-24}}

/* ===== 叶轮旋转 ===== */
body[data-topic="centrifugal-pump-pressure-flow"] #impeller{
  transform-box:view-box;transform-origin:380px 330px;animation:sim01-spin 1.7s linear infinite;
}
@keyframes sim01-spin{to{transform:rotate(360deg)}}

/* ===== 压力表指针过渡 ===== */
body[data-topic="centrifugal-pump-pressure-flow"] #needle{
  transition:transform .35s cubic-bezier(.34,1.3,.64,1);
}

/* ===== 外壳（不拦截事件） ===== */
body[data-topic="centrifugal-pump-pressure-flow"] .shell-layer{pointer-events:none}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="centrifugal-pump-pressure-flow"] #impeller{animation:none}
  body[data-topic="centrifugal-pump-pressure-flow"] .flow-line{animation:none;stroke-dasharray:none;opacity:.45}
  body[data-topic="centrifugal-pump-pressure-flow"] #needle{transition:none}
}

/* ===== 窄屏：控制面板排在能量链之后、显示模式之前 ===== */
@media (max-width:1160px){
  body[data-topic="centrifugal-pump-pressure-flow"] .controls{order:4;margin:0 6px}
}