/* /assets/css/sim/system-economic/simple-business-cash-flow-simulator.css — 本页专属样式（en/zh 共用），源文件 <style> 搬运 + 无障碍色 */

/* ============ SVG 内文字（源文件 .tag/.tag-sm/.tag-num 搬运，文字色改无障碍值） ============ */
body[data-topic="business-cash-flow"] .svg-title{fill:#16202c;}
body[data-topic="business-cash-flow"] .tag{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:13px;fill:#334155;
}
body[data-topic="business-cash-flow"] .tag-sm{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:11px;fill:#5b6472;
}
body[data-topic="business-cash-flow"] .tag-num{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:11px;fill:#5b6472;
}
body[data-topic="business-cash-flow"] .legend{fill:#5b6472;}

/* ============ 外壳（坐标系为该模拟器唯一的 shell-layer，须始终可见） ============ */
body[data-topic="business-cash-flow"] .shell-layer{pointer-events:none;}
body[data-topic="business-cash-flow"] .stage[data-shell="glass"] .shell-layer{opacity:1;}

/* ============ 现金流趋势线动画 ============ */
body[data-topic="business-cash-flow"] .cash-line{
  fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  transition:d 0.3s ease;
}
body[data-topic="business-cash-flow"] .cash-area{fill:url(#area-grad);transition:d 0.3s ease;}

/* ============ 危险状态脉冲 ============ */
body[data-topic="business-cash-flow"] .danger-pulse{
  animation:cfPulseRed 1.5s infinite;
  transform-origin:center;
}
@keyframes cfPulseRed{
  0%{transform:scale(1);opacity:0.8}
  50%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1);opacity:0}
}

/* ============ 控制面板（源文件 .controls 搬运） ============ */
body[data-topic="business-cash-flow"] .controls{
  width:100%;margin:10px 0 4px;background:#fff;border:1px solid #dbe3ee;border-radius:12px;
  padding:16px 20px 18px;display:flex;flex-wrap:wrap;gap:14px 24px;
  box-shadow:0 2px 8px rgba(0,0,0,0.02);
}
body[data-topic="business-cash-flow"] .ctrl-group{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;}
body[data-topic="business-cash-flow"] .ctrl-group label{font-size:13px;color:#475569;display:flex;justify-content:space-between;align-items:baseline;}
body[data-topic="business-cash-flow"] .ctrl-group label b{color:#1d4ed8;font-size:14px;}
body[data-topic="business-cash-flow"] input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#bfdbfe,#1d4ed8);outline:none;cursor:pointer;
}
body[data-topic="business-cash-flow"] input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid #1d4ed8;box-shadow:0 2px 6px rgba(29,78,216,.35);cursor:grab;
}
body[data-topic="business-cash-flow"] input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;}
body[data-topic="business-cash-flow"] input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #1d4ed8;
  box-shadow:0 2px 6px rgba(29,78,216,.35);cursor:grab;
}
body[data-topic="business-cash-flow"] .readouts{display:flex;gap:10px;flex-wrap:wrap;width:100%;}
body[data-topic="business-cash-flow"] .readout{
  flex:1 1 120px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;
  padding:9px 12px;text-align:center;
}
body[data-topic="business-cash-flow"] .readout .k{font-size:11px;color:#5b6472;letter-spacing:.03em;margin-bottom:3px;}
body[data-topic="business-cash-flow"] .readout .v{font-size:19px;font-weight:700;color:#1d4ed8;font-variant-numeric:tabular-nums;line-height:1.1;}
body[data-topic="business-cash-flow"] .readout .v small{font-size:11px;font-weight:500;color:#5b6472;margin-left:2px;}
body[data-topic="business-cash-flow"] .readout.profit{background:#f0fdf4;border-color:#bbf7d0;}
body[data-topic="business-cash-flow"] .readout.profit .v{color:#047857;}
body[data-topic="business-cash-flow"] .readout.loss{background:#fef2f2;border-color:#fecaca;}
body[data-topic="business-cash-flow"] .readout.loss .v{color:#dc2626;}
body[data-topic="business-cash-flow"] .readout.gold{background:#fefce8;border-color:#fde68a;}
body[data-topic="business-cash-flow"] .readout.gold .v{color:#b45309;}

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  body[data-topic="business-cash-flow"] .cash-line,
  body[data-topic="business-cash-flow"] .cash-area{transition:none;}
  body[data-topic="business-cash-flow"] .danger-pulse{animation:none;opacity:0;}
}

/* ============ 移动端：控制面板排在能量链之后 ============ */
@media (max-width:1160px){
  body[data-topic="business-cash-flow"] .controls{order:4;}
}