/* /assets/css/sim/system-economic/heart-rate-blood-flow-simplified-simulator.css — 本页专属样式（en/zh 共用） */
/* merged from source <style> (sim-15-heart-rate-blood-flow-simplified-simulator.html) */

/* ===== SVG 文字与标注 ===== */
.svg-title{fill:#16202c}
.tag{font-family:var(--sans);font-size:14px;fill:#334155}
.tag-sm{font-family:var(--sans);font-size:12px;fill:#5b6472}
.legend{fill:#5b6472}

/* ===== 控制面板 ===== */
.controls{display:flex;flex-wrap:wrap;gap:16px 28px;
  padding:14px 16px 16px;margin:0 6px;border-top:1px solid var(--line-soft);}
.ctrl-group{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;}
.ctrl-group label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;}
.ctrl-group label b{color:var(--accent);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
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;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:#fff;border:3px solid #2563eb;box-shadow:0 2px 6px rgba(37,99,235,.35);cursor:grab;}
input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid #2563eb;box-shadow:0 2px 6px rgba(37,99,235,.35);cursor:grab;}

/* ===== 读数 ===== */
.readouts{display:flex;gap:12px;flex-wrap:wrap;width:100%;}
.readout{flex:1 1 140px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;
  padding:10px 14px;text-align:center;}
.readout .k{font-size:12px;color:#5b6472;letter-spacing:.04em;margin-bottom:4px;}
.readout .v{font-size:20px;font-weight:700;color:var(--accent-2);font-variant-numeric:tabular-nums;line-height:1.1;}
.readout .v small{font-size:12px;font-weight:500;color:#5b6472;margin-left:3px;}
.readout.highlight{background:#eff6ff;border-color:#bfdbfe;}
.readout.highlight .v{color:var(--accent);}

/* ===== 移动端顺序（与 style.css 的 display:contents 排序配套） ===== */
@media (max-width:1160px){
  .controls{order:4}
}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  .heart-beat{animation:none !important}
  body[data-topic="heart-rate-blood-flow"] *{animation:none}
}