:root{
  --navy:#082b40;--blue:#0789cc;--water:#27c6ee;--bg:#edf3f6;--line:#d6e2e8;
  --text:#17364a;--muted:#6d808b;--green:#14966b;--red:#d54b54;--amber:#db8b19;
  --hold:#e8f4fc;--hold-line:#5e9dca;--shadow:0 10px 28px rgba(10,45,65,.09)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,"Segoe UI",sans-serif;font-size:16px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}.top{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;gap:15px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;text-decoration:none;color:var(--text)}.brand img{width:126px;height:43px;object-fit:contain;object-position:left center}.product{color:var(--muted);border-left:1px solid var(--line);padding-left:16px;font-size:.86rem}.top-spacer{flex:1}.demo-tag{color:#0877ae;border:1px solid #a9d2e4;background:#eef9fd;padding:6px 9px;border-radius:99px;font-size:.68rem;font-weight:850}.clock-live{color:var(--green);font-size:.75rem;font-weight:800;white-space:nowrap}.clock-live:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px;animation:pulse 1.7s infinite}.lang{display:flex;padding:2px;border:1px solid var(--line);border-radius:8px;background:#f6f9fb}.lang button{border:0;background:transparent;border-radius:6px;padding:6px 8px;color:var(--muted);font-size:.7rem}.lang button.active{background:var(--navy);color:#fff;font-weight:800}.layout{display:grid;grid-template-columns:62px minmax(1040px,1fr) 320px;min-height:calc(100vh - 64px)}nav{background:var(--navy);padding:13px 7px}nav button,nav a{width:100%;height:46px;border:0;border-radius:9px;background:transparent;color:#c6d7df;margin:3px 0;display:grid;place-items:center;text-decoration:none}nav button.active,nav button:hover,nav a:hover{background:var(--blue);color:#fff}nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-spacer{height:calc(100vh - 330px);min-height:80px}main{padding:15px;min-width:0}.head{display:flex;align-items:center;margin-bottom:11px;gap:16px}.head h1{font-size:1.12rem;margin:0}.head p{font-size:.78rem;color:var(--muted);margin:3px 0 0}.controls{margin-left:auto;display:flex;gap:7px}.controls button{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.76rem;font-weight:750}.controls .primary{background:var(--blue);color:#fff;border-color:var(--blue)}.controls .active{background:#e8f4fc;border-color:#5e9dca;color:#155f8d}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:9px}.metric{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-width:0}.metric strong{font-size:1.03rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric span{display:block;font-size:.66rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alerts{display:flex;align-items:center;gap:10px;border:1px solid #9dd6c0;background:#edf9f4;color:#117653;border-radius:9px;padding:8px 11px;margin-bottom:9px;font-size:.73rem}.alerts b{font-size:.75rem}.alerts span{color:inherit}.alerts.hold{background:#e8f4fc;border-color:#8fc1e2;color:#155f8d}.alerts.protective{background:#fff3d7;border-color:#e2a33c;color:#815000}.alerts.fault{background:#ffe8ea;border-color:#d54b54;color:#a5232e}.network{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}.network-head{padding:10px 13px;border-bottom:1px solid var(--line);font-size:.82rem;font-weight:800;display:flex;align-items:center;gap:8px}.network-head span{font-weight:400;color:var(--muted)}.mode-switch{margin-left:auto;display:flex;border:1px solid var(--line);padding:2px;border-radius:8px;background:#f4f8fa}.mode-switch button{border:0;background:transparent;color:var(--muted);padding:6px 9px;border-radius:6px;font-size:.68rem;font-weight:800}.mode-switch button.active{background:#fff;color:var(--navy);box-shadow:0 2px 7px rgba(18,54,75,.12)}.scenarios{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}.scenarios>span{font-size:.62rem;color:var(--muted);font-weight:850;letter-spacing:.06em;white-space:nowrap}.scenario{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 9px;font-size:.66rem;font-weight:750}.scenario:hover,.scenario.active{background:var(--blue);border-color:var(--blue);color:#fff}.canvas-scroll{overflow:auto;background:linear-gradient(#fbfdfe,#f5fafc)}.canvas{min-width:1120px;position:relative}.canvas svg{width:100%;height:auto;display:block}.pipe-base{fill:none;stroke:#b7c9d1;stroke-width:14;stroke-linecap:round;stroke-linejoin:round}.pipe-charged{fill:none;stroke:#efb739;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}.pipe-flow{fill:none;stroke:#0da5da;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 12;opacity:0;animation:waterFlow 2.1s linear infinite;filter:drop-shadow(0 0 3px rgba(13,165,218,.45))}.pipe-charged.on,.pipe-flow.on{opacity:1}.pipe-flow.reverse{animation-direction:reverse}.field{cursor:pointer;outline:none}.field-card{fill:#fff;stroke:#b9cad2;stroke-width:2}.field.selected .field-card{stroke:#5e9dca;fill:#f2f9fd}.field.status-operating .field-card{stroke:#5fbe99;fill:#e9f8f2}.field.status-hold .field-card{stroke:#5e9dca;fill:#e8f4fc}.field.status-fault .field-card{stroke:#76000b;fill:#d4001c}.field-title{fill:#17364a;font-size:12px;font-weight:900;text-anchor:middle}.field-line{fill:#607987;font-size:10px;font-weight:750;text-anchor:middle}.field.status-fault .field-title,.field.status-fault .field-line{fill:#fff}.furrow{stroke:#c6d9b5;stroke-width:3}.asset{cursor:pointer;outline:none}.asset:hover .asset-ring,.asset.selected .asset-ring{stroke:var(--blue)!important;stroke-width:4!important}.asset-panel{fill:#fff;stroke:#a8bbc5;stroke-width:2}.asset-title{fill:#17364a;font-size:11px;font-weight:900}.asset-data{fill:#6d808b;font-size:9px;font-weight:750}.valve-body{fill:#fff;stroke:#79909d;stroke-width:3}.valve-disc{fill:#e8f1f5;stroke:#0a7fc2;stroke-width:2}.handle{stroke:#17364a;stroke-width:6;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .35s ease}.handle-knob{fill:#17364a;transition:.2s}.valve-label{fill:#17364a;font-size:11px;font-weight:900;text-anchor:middle}.t-port{stroke:#7460b8;stroke-width:5;stroke-linecap:round}.pump-card{fill:#fff;stroke:#8dc5da;stroke-width:2}.pump-casing{fill:#e7f6fb;stroke:#087fb9;stroke-width:3;stroke-linejoin:round}.impeller{stroke:#087fb9;stroke-width:3;transform-box:fill-box;transform-origin:center}.pump.status-operating .impeller{animation:pumpSpin 1.7s linear infinite}.borewell-wall{fill:#e8eef1;stroke:#879ba6;stroke-width:2}.borewell-water{fill:#55c9eb;opacity:.82}.borewell-bubble{fill:#fff;opacity:0}.pump.status-operating .borewell-bubble{opacity:.85;animation:bubbleUp 1.8s linear infinite}.pump.status-operating .pump-casing{fill:#dff6ed;stroke:#14966b}.sensor-pill{fill:#fff;stroke:#a9d2e4;stroke-width:2}.sensor-text{fill:#0877ae;font-size:9px;font-weight:900;text-anchor:middle}.status-operating .asset-panel,.status-operating .valve-body,.status-operating .pump-card{stroke:#5fbe99!important;fill:#e9f8f2!important}.status-operating .asset-title,.status-operating .asset-data,.status-operating .valve-label{fill:#117653!important}.status-hold .asset-panel,.status-hold .valve-body,.status-hold .pump-card{stroke:#5e9dca!important;fill:#e8f4fc!important}.status-hold .asset-title,.status-hold .asset-data,.status-hold .valve-label{fill:#155f8d!important}.status-manual .asset-panel,.status-manual .valve-body,.status-manual .pump-card{stroke:#c83b47!important;fill:#ffe6e8!important}.status-manual .asset-title,.status-manual .asset-data,.status-manual .valve-label{fill:#a5232e!important}.status-protective .asset-panel,.status-protective .valve-body,.status-protective .pump-card{stroke:#b56d00!important;stroke-width:4!important;fill:#f5a300!important;animation:protectiveInterlockFlash .9s steps(1,end) infinite}.status-protective .asset-title,.status-protective .asset-data,.status-protective .valve-label{fill:#3d2600!important}.status-fault .asset-panel,.status-fault .valve-body,.status-fault .pump-card{stroke:#76000b!important;stroke-width:4!important;fill:#d4001c!important;animation:faultTripFlash .42s steps(1,end) infinite}.status-fault .asset-title,.status-fault .asset-data,.status-fault .valve-label{fill:#fff!important}.flow-badge rect{fill:#082b40}.flow-badge text{fill:#fff;font-size:10px;font-weight:850;text-anchor:middle}.network-note{fill:#6d808b;font-size:10px;font-weight:800}.port-label{fill:#7460b8;font-size:9px;font-weight:900;text-anchor:middle}.telemetry-link{fill:none;stroke:#8fb5c6;stroke-width:2;stroke-dasharray:4 5}.legend{border-top:1px solid var(--line);padding:8px 12px;font-size:.65rem;color:var(--muted);display:flex;gap:13px;flex-wrap:wrap;align-items:center}.key{display:flex;align-items:center;gap:5px}.key i{width:9px;height:9px;border-radius:50%;background:var(--green)}.key i.water{width:24px;border-radius:5px;background:linear-gradient(90deg,#078aca,#b4f1ff,#078aca);background-size:38px;animation:waterKey .9s linear infinite}.key i.charged{width:24px;height:6px;border-radius:5px;background:#efb739}.key i.status-hold-key{width:24px;height:13px;border-radius:4px;background:#e8f4fc;border:2px solid #5e9dca}.key i.status-manual-key{width:24px;height:13px;border-radius:4px;background:#d54b54;border:2px solid #a5232e}.key i.status-protective-key{width:24px;height:13px;border-radius:4px;background:#f5a300;border:2px solid #b56d00;animation:protectiveInterlockFlash .9s steps(1,end) infinite}.key i.status-fault-key{width:24px;height:13px;border-radius:4px;background:#d4001c;border:2px solid #76000b;animation:faultTripFlash .42s steps(1,end) infinite}.model-note{margin-left:auto}.paused .pipe-flow,.paused .impeller,.paused .borewell-bubble,.paused .clock-live:before,.paused .status-protective .asset-panel,.paused .status-protective .valve-body,.paused .status-protective .pump-card,.paused .status-fault .asset-panel,.paused .status-fault .valve-body,.paused .status-fault .pump-card,.paused .status-protective-key,.paused .status-fault-key{animation-play-state:paused!important}
aside{background:#fff;border-left:1px solid var(--line);padding:14px;min-width:0}.aside-inner{position:sticky;top:75px;max-height:calc(100vh - 80px);overflow:auto;padding-right:2px}.aside-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.aside-head h2{font-size:1.02rem;margin:0}.live-small{font-size:.62rem;color:var(--green);font-weight:850}.section{border-top:1px solid var(--line);margin-top:13px;padding-top:11px}.section:first-of-type{border-top:0;margin-top:10px}.section h3{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 7px}.schedule-card{border:1px solid var(--line);border-radius:9px;background:#f6fafc;padding:9px}.schedule-state{padding:7px 8px;border-radius:7px;background:#e8f4fc;color:#155f8d;font-size:.68rem;font-weight:850;margin-bottom:8px}.schedule-state.operating{background:#e9f8f2;color:#117653}.schedule-state.protective{background:#fff3d7;color:#815000}.schedule-state.fault{background:#ffe8ea;color:#a5232e}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:7px 0}.form-control label{display:block;font-size:.6rem;color:var(--muted);font-weight:800;margin-bottom:3px}.form-control input,.form-control select{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;padding:6px 7px;color:var(--text);font-size:.7rem}.day-row{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.day-btn{border:1px solid var(--line);border-radius:5px;background:#fff;padding:5px 1px;font-size:.57rem;font-weight:850}.day-btn.active{background:#e8f4fc;border-color:#5e9dca;color:#155f8d}.progress-track{height:7px;background:#dfe8ec;border-radius:99px;overflow:hidden;margin:7px 0}.progress-track i{display:block;height:100%;background:var(--green);width:0;transition:width .25s}.button-row{display:flex;gap:6px;margin-top:7px}.action{width:100%;border:0;border-radius:7px;padding:8px;font-size:.68rem;font-weight:850}.action.primary{background:var(--blue);color:#fff}.action.secondary{background:#fff;border:1px solid var(--line)}.action.danger{background:var(--red);color:#fff}.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.field-btn{border:1px solid var(--line);border-radius:7px;background:#fff;padding:6px 3px;text-align:center}.field-btn strong,.field-btn span{display:block}.field-btn strong{font-size:.68rem}.field-btn span{font-size:.52rem;color:var(--muted);margin-top:2px}.field-btn.active{background:#edf9f4;border-color:#5fbe99;color:#117653}.field-btn.complete{background:#e8f4fc;border-color:#5e9dca;color:#155f8d}.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}.toggle-copy strong,.toggle-copy span{display:block}.toggle-copy strong{font-size:.7rem}.toggle-copy span{font-size:.58rem;color:var(--muted);margin-top:2px}.switch{width:40px;height:22px;border:0;border-radius:99px;background:#b9c7ce;padding:3px;flex:0 0 auto}.switch:after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}.switch.on{background:var(--green)}.switch.on:after{transform:translateX(18px)}.source-cards{display:grid;gap:6px}.source-card{border:1px solid var(--line);border-radius:8px;padding:8px;background:#f9fbfc;position:relative}.source-top{display:flex;justify-content:space-between;align-items:center;gap:7px}.source-name{font-size:.7rem;font-weight:850}.state-pill{padding:3px 6px;border-radius:99px;background:#eaf0f3;color:var(--muted);font-size:.52rem;font-weight:950;letter-spacing:.03em}.source-card.status-operating{border-color:#5fbe99;background:#e9f8f2}.source-card.status-hold{border-color:#5e9dca;background:#e8f4fc}.source-card.status-manual{border-color:#c83b47;background:#ffe6e8}.source-card.status-protective{border:3px solid #b56d00;background:#f5a300;animation:protectiveInterlockFlash .9s steps(1,end) infinite}.source-card.status-fault{border:3px solid #76000b;background:#d4001c;color:#fff;animation:faultTripFlash .42s steps(1,end) infinite}.source-card.status-fault .source-data span,.source-card.status-fault .source-data strong{color:#fff}.source-data{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}.source-data div{background:rgba(255,255,255,.75);border-radius:5px;padding:4px;text-align:center}.source-data strong,.source-data span{display:block}.source-data strong{font-size:.61rem}.source-data span{font-size:.48rem;color:var(--muted)}.source-actions{display:flex;gap:4px;margin-top:6px}.mini-btn{flex:1;border:1px solid var(--line);background:#fff;border-radius:5px;padding:5px 2px;font-size:.54rem;font-weight:850}.mini-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.asset-inspector{border:1px solid var(--line);border-radius:9px;background:#f8fbfc;padding:9px}.eyebrow{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:850}.ititle{font-size:.95rem;margin:5px 0 2px}.itype{font-size:.65rem;color:var(--muted);line-height:1.35}.state-box{margin:8px 0;padding:7px;border-radius:7px;background:#edf8f4;color:var(--green);font-size:.66rem;font-weight:850;position:relative}.state-box.status-hold{background:#e8f4fc;color:#155f8d}.state-box.status-manual{background:#ffe6e8;color:#a5232e}.state-box.status-protective{background:#f5a300;color:#3d2600;animation:protectiveInterlockFlash .9s steps(1,end) infinite}.state-box.status-fault{background:#d4001c;color:#fff;animation:faultTripFlash .42s steps(1,end) infinite}.prop{display:flex;justify-content:space-between;gap:8px;font-size:.64rem;margin:6px 0}.prop span{color:var(--muted)}.prop b{text-align:right}.select{width:100%;border:1px solid var(--line);border-radius:6px;padding:6px;background:#fff;font-size:.68rem}.safety-log{border-radius:8px;padding:8px;background:#edf8f4;border:1px solid #b6e4d1;color:#087150;font-size:.62rem;line-height:1.45}.safety-log.protective{background:#fff3d7;border-color:#e2a33c;color:#815000}.safety-log.fault{background:#ffe8ea;border-color:#d54b54;color:#a5232e}.toast{position:fixed;right:330px;bottom:20px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;font-size:.72rem;opacity:0;transform:translateY(10px);transition:.2s;z-index:30;max-width:390px}.toast.show{opacity:1;transform:none}
@keyframes waterFlow{to{stroke-dashoffset:-96}}@keyframes pumpSpin{to{transform:rotate(360deg)}}@keyframes bubbleUp{0%{transform:translateY(18px);opacity:0}25%{opacity:.9}100%{transform:translateY(-36px);opacity:0}}@keyframes waterKey{to{background-position:38px 0}}@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(20,150,107,0)}100%{box-shadow:0 0 0 0 rgba(20,150,107,0)}}@keyframes protectiveInterlockFlash{0%,100%{box-shadow:0 0 0 1px rgba(181,109,0,.3),0 0 10px rgba(245,163,0,.42);background-color:#f5a300}50%{box-shadow:0 0 0 4px rgba(245,163,0,.26),0 0 18px rgba(255,190,39,.75);background-color:#ffc13d}}@keyframes faultTripFlash{0%,100%{box-shadow:0 0 0 1px rgba(118,0,11,.4),0 0 16px rgba(255,0,32,.72);background-color:#c90019;color:#fff}50%{box-shadow:0 0 0 6px rgba(255,0,32,.36),0 0 26px rgba(255,0,32,1);background-color:#ff102f;color:#fff}}
@media(prefers-reduced-motion:reduce){.pipe-flow,.impeller,.borewell-bubble,.status-protective,.status-fault,.status-protective-key,.status-fault-key{animation:none!important}}
@media(max-width:1280px){.layout{grid-template-columns:62px minmax(1040px,1fr) 310px}.metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.layout{display:block}.layout nav{display:flex;padding:4px;position:sticky;top:64px;z-index:15}.layout nav button,.layout nav a{width:46px;flex:0 0 46px}.nav-spacer{display:none}.network{overflow-x:auto}aside{border-left:0}.aside-inner{position:static;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}.aside-head{grid-column:1/-1}.section{margin-top:0}.metrics{grid-template-columns:repeat(2,1fr)}.product,.demo-tag{display:none}.toast{right:15px}}
@media(max-width:620px){.top{padding:0 10px}.brand img{width:105px}.clock-live{display:none}.head{align-items:flex-start;flex-direction:column}.controls{margin-left:0;width:100%;overflow-x:auto}.aside-inner{display:block}.section{margin-top:12px}.metrics{grid-template-columns:1fr 1fr}.model-note{width:100%;margin-left:0}}

/* SVG assets use fill/filter animation so their safety state is unmistakable. */
.status-protective .asset-panel,.status-protective .valve-body,.status-protective .pump-card{animation:protectiveSvgFlash .9s steps(1,end) infinite!important}
.status-fault .asset-panel,.status-fault .valve-body,.status-fault .pump-card{animation:faultSvgFlash .42s steps(1,end) infinite!important}
@keyframes protectiveSvgFlash{0%,100%{fill:#f5a300;filter:drop-shadow(0 0 4px rgba(245,163,0,.45))}50%{fill:#ffc13d;filter:drop-shadow(0 0 10px rgba(255,190,39,.95))}}
@keyframes faultSvgFlash{0%,100%{fill:#c90019;filter:drop-shadow(0 0 5px rgba(255,0,32,.65))}50%{fill:#ff102f;filter:drop-shadow(0 0 12px rgba(255,0,32,1))}}
@media(prefers-reduced-motion:reduce){.status-protective .asset-panel,.status-protective .valve-body,.status-protective .pump-card,.status-fault .asset-panel,.status-fault .valve-body,.status-fault .pump-card{animation:none!important}}