.fs-sim{max-width:1180px;margin:0 auto;color:#1e2b3a}
.fs-sim *{box-sizing:border-box}
.fs-sim-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.fs-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.fs-tabs button{border:1px solid #c5d3e2;background:#fff;color:#0b2a4a;border-radius:999px;padding:.6rem 1.1rem;font-size:1rem;font-weight:600;cursor:pointer}
.fs-tabs button[aria-selected="true"]{background:#0a6fb8;border-color:#0a6fb8;color:#fff}
.fs-tabs button:focus-visible,.fs-play:focus-visible,.fs-sim select:focus-visible,.fs-sim input:focus-visible{outline:3px solid #14a3c7;outline-offset:2px}
.fs-sim-ctl{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.fs-play{border:0;background:#0b2a4a;color:#fff;border-radius:999px;padding:.6rem 1.2rem;font-size:1rem;font-weight:600;cursor:pointer}
.fs-sim-ctl label{font-size:.95rem}
.fs-sim select{padding:.4rem .6rem;border:1px solid #c5d3e2;border-radius:8px;font-size:1rem}
.fs-scene{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.2rem;align-items:start}
.fs-fig{margin:0;border:1px solid #d3deea;border-radius:14px;overflow:hidden;background:#eef4fa}
.fs-svg{display:block;width:100%;height:auto}
.fs-svg .bg{fill:#eef4fa}
.fs-svg .ttl{font:700 17px Arial,Helvetica,sans-serif;fill:#0b2a4a}
.fs-svg .lbl{font:600 13px Arial,Helvetica,sans-serif;fill:#41566b}
.fs-svg .plbl{font:700 14px Arial,Helvetica,sans-serif;fill:#0b2a4a;paint-order:stroke;stroke:#ffffff;stroke-width:3.5px;stroke-linejoin:round}
.fs-svg .mkt{font:11px Arial,Helvetica,sans-serif;fill:#41566b}
.fs-svg .mk{stroke:#7b8da0;stroke-width:1.2;stroke-dasharray:5 4}
.fs-svg .mk.bad{stroke:#d93a3a}
.fs-svg .well{fill:#fff;stroke:#44566a;stroke-width:4}
.fs-svg .water{fill:url(#fsWater)}
.fs-svg .water.sew{fill:url(#fsSew)}
.fs-svg .wsurf{fill:rgba(255,255,255,.55)}
.fs-svg .pipe{fill:none;stroke:#8a98a8;stroke-width:13}
.fs-svg .flow{fill:none;stroke:#bfeaff;stroke-width:4;stroke-dasharray:9 13;opacity:0;animation:fsflow .8s linear infinite}
.fs-svg .flow.on{opacity:1}
.fs-svg .flow.sewflow{stroke:#e8d9a8}
@keyframes fsflow{to{stroke-dashoffset:-22}}
.fs-svg .pump .body{fill:#cfd6de;stroke:#33475b;stroke-width:3}
.fs-svg .pump.run .body{fill:#2fa152}
.fs-svg .pump.alarm .body{fill:#d93a3a}
.fs-svg .pump .rotor path{stroke:#33475b;stroke-width:3;stroke-linecap:round;fill:none}
.fs-svg .pump.run .rotor path{stroke:#fff}
.fs-svg .pump .rotor{transform-box:fill-box;transform-origin:center}
.fs-svg .pump.run .rotor{animation:fsspin .7s linear infinite}
.fs-svg .pump .hub{fill:#33475b}
@keyframes fsspin{to{transform:rotate(360deg)}}
.fs-svg .lt rect{fill:#0b2a4a}
.fs-svg .lt text{font:700 10px Arial,Helvetica,sans-serif;fill:#fff}
.fs-svg .lt line,.fs-svg .radar{stroke:#0b2a4a;stroke-width:1.5;stroke-dasharray:3 3}
.fs-svg .lvbig{font:800 30px Arial,Helvetica,sans-serif;fill:#0b2a4a;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.fs-svg .valve{fill:#fff;stroke:#33475b;stroke-width:3}
.fs-svg .house path{fill:#fff;stroke:#33475b;stroke-width:3}
.fs-svg .soil{fill:#c7b08a}
.fs-svg .aq{fill:#a9d6ee}
.fs-svg .gr{stroke:#4c9a4c;stroke-width:6}
.fs-svg .casing{fill:#fff;stroke:#44566a;stroke-width:4}
.fs-svg .dl{stroke:#0a6fb8;stroke-width:2.5}
.fs-svg .cone{fill:none;stroke:#0a6fb8;stroke-width:2;stroke-dasharray:6 4}
.fs-svg .gauge{fill:#fff;stroke:#33475b;stroke-width:4}
.fs-svg .tick{stroke:#33475b;stroke-width:2}
.fs-svg .gnum{font:700 10px Arial,Helvetica,sans-serif;fill:#33475b}
.fs-svg .needle{stroke:#d93a3a;stroke-width:3;stroke-linecap:round}
.fs-svg .gtxt{font:800 15px Arial,Helvetica,sans-serif;fill:#0b2a4a}
.fs-svg .air{fill:#dfe8f1}
.fs-hmi{background:#0f2236;color:#e6eef7;border-radius:14px;padding:1rem 1.1rem}
.fs-hmi h3{color:#fff;font-size:1.05rem;margin:0 0 .6rem;letter-spacing:.02em}
.fs-hmi h4{color:#9fb8d0;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin:1rem 0 .4rem}
.fs-hmi dl{margin:0}
.fs-hmi .r{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem}
.fs-hmi dt{color:#9fb8d0}
.fs-hmi dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.fs-hmi small{font-weight:400;color:#9fb8d0}
.lamp{display:inline-block;width:12px;height:12px;border-radius:50%;background:#556;vertical-align:middle;margin-right:.1rem}
.lamp.run,.lamp.ok{background:#37d66a;box-shadow:0 0 8px #37d66a}
.lamp.bad{background:#ff4a4a;box-shadow:0 0 8px #ff4a4a;animation:fsblink 1s steps(2) infinite}
.lamp.warn{background:#ffc247;box-shadow:0 0 8px #ffc247}
@keyframes fsblink{50%{opacity:.35}}
.fs-ctl{margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.15)}
.fs-rng{display:block;font-size:.92rem;margin-bottom:.8rem;color:#e6eef7}
.fs-rng span{display:block;color:#9fb8d0}
.fs-rng input[type=range]{width:100%;margin-top:.3rem}
.fs-rng select{width:100%;margin-top:.3rem}
.fs-chk{display:flex;gap:.5rem;align-items:center;font-size:.95rem}
.fs-log{list-style:none;margin:0;padding:0;font-size:.85rem;min-height:5rem}
.fs-log li{padding:.2rem 0;color:#cfe0f0}
.fs-log li b{color:#7fd3ee;font-weight:600;margin-right:.3rem}
.fs-log li.bad{color:#ff8d8d}.fs-log li.ok{color:#8ff0ae}
.fs-sim-note{font-size:.9rem;color:#41566b;margin-top:1rem}
.fs-sim.paused .flow,.fs-sim.paused .pump.run .rotor,.fs-sim.paused .lamp.bad{animation-play-state:paused}
.fs-sr{position:absolute;left:-9999px}
@media(max-width:900px){.fs-scene{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fs-svg .flow,.fs-svg .pump.run .rotor{animation:none}.fs-svg .flow.on{stroke-dasharray:none}}

.fs-svg .fm{fill:#ffffff;stroke:#33475b;stroke-width:3}
.fs-svg .fmt{font:700 11px Arial,Helvetica,sans-serif;fill:#33475b}
.fs-svg .fmv{font:700 13px Arial,Helvetica,sans-serif;fill:#0b2a4a;paint-order:stroke;stroke:#ffffff;stroke-width:3.5px;stroke-linejoin:round}

.fs-svg .bld{fill:#f6efe4;stroke:#6b5a46;stroke-width:3}
.fs-svg .roof{fill:#6b5a46}
.fs-svg .door{fill:#a58b69;stroke:#6b5a46;stroke-width:2}
.fs-svg .bld-w{fill:#cfe6f5;stroke:#6b5a46;stroke-width:2}

.fs-svg .pipe.thin{stroke-width:5}
.fs-svg .flow.thin{stroke-width:2.5;stroke-dasharray:5 7}
.fs-svg .media{fill:#e3d29b}
.fs-svg .well.bw{stroke:#e0a020}
.fs-svg .water.chem{fill:#e8e07a}
.fs-svg .suw:hover .bld{fill:#fff7e8}
.fs-svg .suw:focus-visible{outline:3px solid #14a3c7}

.fs-svg .bars{stroke:#44566a;stroke-width:2.5}
.fs-svg .diff{fill:#44566a}
.fs-svg .sludge{fill:#8a6d3b}
.fs-svg .water.act{fill:#9aa35c;opacity:.9}
.fs-svg .bub{fill:#ffffff;opacity:0}
.fs-svg .bubs.on .bub{animation:fsbub 2.2s linear infinite}
@keyframes fsbub{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-175px);opacity:0}}
.fs-sim.paused .bubs.on .bub{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.fs-svg .bubs.on .bub{animation:none;opacity:.6}}

.fs-svg .pipe{stroke-linejoin:miter;stroke-linecap:butt}

.fs-svg .zone{fill:none;stroke-width:5;stroke-linecap:butt}
.fs-svg .zr{stroke:#d93a3a}
.fs-svg .zy{stroke:#f2b705}
.fs-svg .zg{stroke:#2fa152}

.fs-trends{margin-top:1.4rem}
.fs-trends h3{font-size:1.15rem;margin:0 0 .8rem;color:#0b2a4a}
.fs-tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem}
.fs-chart{margin:0;border:1px solid #d3deea;border-radius:12px;padding:.8rem .9rem 1rem;background:#fff}
.fs-chart figcaption{font-size:.98rem;color:#0b2a4a}
.fs-ch-u{color:#41566b;font-size:.85rem}
.fs-leg{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.35rem 0 .5rem;font-size:.85rem;color:#41566b}
.fs-lg b{color:#0b2a4a;font-variant-numeric:tabular-nums}
.fs-lg i{display:inline-block;width:18px;height:0;border-top:3px solid var(--c);vertical-align:middle;margin-right:.3rem}
.fs-lg i.dash{border-top-style:dashed}
.fs-chart canvas{display:block;width:100%;height:160px}
@media(max-width:560px){.fs-tgrid{grid-template-columns:1fr}}

.fs-svg .vlv path{stroke:#33475b;stroke-width:1.5;stroke-linejoin:round}
.fs-svg .vlv.open path{fill:#2fa152}
.fs-svg .vlv.closed path{fill:#d93a3a}
.fs-btns{display:flex;gap:.5rem;margin:0 0 .6rem}
.fs-btn{background:#0a6fb8;color:#fff;border:0;border-radius:8px;padding:.5rem .9rem;font-weight:600;font-size:.95rem;cursor:pointer}
.fs-btn:hover,.fs-btn:focus-visible{background:#14a3c7;color:#0b2a4a}
.fs-note{margin:.2rem 0 0;font-size:.85rem;color:#9fb8d0}