:root{font-family:Segoe UI,Arial,sans-serif;color:#10285d;background:#edf7fc;font-synthesis:none;--blue:#0788f8;--line:#d8e8f2;--muted:#65809a;--navy:#082468}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button,.button{border:1px solid #bbd8ed;background:#fff;color:var(--navy);padding:10px 17px;border-radius:9px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px}button:hover,.button:hover{background:#eaf6ff}button.primary{background:var(--blue);color:white;border-color:var(--blue)}button.danger{background:#f3204b;color:#fff;border:0}.icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}h1{font-size:27px;letter-spacing:-.7px}h2{font-size:22px;letter-spacing:-.4px}h3{font-size:17px}small,.muted{color:var(--muted)}small{font-size:13px}p{line-height:1.55}.layout{display:grid;grid-template-columns:98px 1fr;min-height:100vh}.sidebar{background:#f9fdff;border-right:1px solid var(--line);padding:24px 8px;display:flex;flex-direction:column;gap:17px;position:sticky;top:0;height:100vh}.navitem{border:0;background:transparent;flex-direction:column;padding:13px 5px;gap:8px;font-size:14px;font-weight:600;border-radius:12px}.navitem .icon{width:32px;height:32px}.navitem.active{background:#d5f5fc;color:#026fcd;box-shadow:inset 0 0 0 1px #a4e9f6}.logout{margin-top:auto}.main{min-width:0}.header{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:22px 26px;background:#ffffffdd;border-bottom:1px solid var(--line)}.brand{font-size:27px;font-weight:900;letter-spacing:-1.3px;font-style:italic;color:#07366d;white-space:nowrap}.brand span{color:#08afd7}.brand small{display:block;font-size:9px;font-style:normal;letter-spacing:2px;color:#325777}.header .title{border-left:1px solid var(--line);padding-left:24px}.header-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pill{border-radius:30px;padding:9px 14px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;background:#e8eef4;color:#516878;white-space:nowrap}.pill.online{background:#dcf9e6;color:#147645}.pill.critical{background:#ffe3e9;color:#c51c46}.pill.warning{background:#fff1cb;color:#8a5c05}.pill.info{background:#e0f3ff;color:#0875bb}.dot{width:8px;height:8px;background:currentColor;border-radius:50%}.content{padding:22px 26px 28px;max-width:1900px;margin:auto}.subbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;font-size:14px}.stale{background:#fff2ce;color:#775512;padding:12px 16px;border:1px solid #ead696;border-radius:9px;margin-bottom:18px}.cards{display:grid;gap:16px}.metrics{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:20px}.card{background:linear-gradient(145deg,#fff,#f8fcff);border:1px solid #e0edf5;border-radius:14px;padding:20px;box-shadow:0 5px 16px #12608a05;min-width:0}.metric{display:flex;align-items:center;gap:15px;padding:19px 17px}.metric .symbol{background:#e6f7ff;color:#078bec;width:45px;height:48px;border-radius:13px;display:grid;place-items:center}.metric label{color:var(--muted);display:block;font-size:14px;margin-bottom:8px}.metric strong{font-size:26px;letter-spacing:-.5px;white-space:nowrap}.metric strong small{font-size:15px;font-weight:500}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.chart{width:100%;height:260px;display:block}.chart text{font-size:12px;fill:#6c839a}.chart .grid{stroke:#e0edf5;stroke-width:1}.chart-note{font-size:13px;color:var(--muted);margin-top:15px}.bottom-metrics{grid-template-columns:repeat(4,1fr);margin-top:18px}.plant-diagram{background:radial-gradient(ellipse at center,#fff,#f1faff);border:1px solid #d7eaf4;border-radius:18px;padding:18px;overflow:auto}.process{width:100%;min-width:880px;display:block}.process text{font-family:Segoe UI,Arial,sans-serif;fill:#133367}.process .name{font-size:16px;font-weight:600}.process .reading{font-size:28px;font-weight:750}.process .label{font-size:14px}.pipe{fill:none;stroke:#e7bd24;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}.flow{fill:none;stroke:#16a9e9;stroke-width:5;stroke-dasharray:9 16}.flow.moving{animation:flow 3s linear infinite}@keyframes flow{to{stroke-dashoffset:-100}}@media(prefers-reduced-motion:reduce){.flow.moving{animation:none}}.process-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 2px 0}.tds{display:flex;align-items:center;gap:15px;font-size:20px;font-weight:700}.tds output{display:block;border:1.5px solid #2f6eba;border-radius:12px;min-width:160px;padding:11px 17px;background:white}.details-grid{display:grid;grid-template-columns:.9fr 1.05fr 1.5fr;gap:18px}.stack{display:grid;gap:14px}.pump-card h3{text-align:center}.pump-art{margin:14px auto 10px;display:block;color:#0c8bd9;width:65px;height:58px}.pump-card .pill{display:flex;justify-content:center}.pump-values{display:flex;justify-content:space-between;margin-top:12px;gap:12px}.pump-values strong{display:block;margin-top:5px}.tank-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tank-mini{text-align:center}.tank-mini h3{font-size:14px;min-height:38px}.tank-outline{height:126px;width:75px;margin:15px auto;border:4px solid #91abc0;border-radius:20px 20px 15px 15px;position:relative;overflow:hidden;background:#edf8fe}.tank-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(90deg,#058ac9,#16cbf2);border-top:2px solid #7beaff}.tank-outline b{position:absolute;left:0;right:0;top:45px;font-size:20px;text-shadow:0 1px white}.pressure-card{margin-top:18px}.pressure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:18px}.pressure-grid label{display:block;color:var(--muted);font-size:14px;min-height:36px}.pressure-grid strong{font-size:30px;display:block;margin-top:12px}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:17px}.toolbar input{flex:1;min-width:180px}input,select{border:1px solid #bfd7e8;background:white;border-radius:7px;padding:10px 12px;color:#15345d;min-width:0}input:focus,select:focus{outline:2px solid #79cbff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:#39718e;background:#e7f4fc;padding:13px 10px;white-space:nowrap}td{padding:13px 10px;border-bottom:1px solid #e0edf5;vertical-align:middle}td .pill{font-size:12px;padding:7px 10px}.empty{padding:50px 20px;text-align:center;color:var(--muted)}.alarm-grid{display:grid;grid-template-columns:1fr 2.2fr;gap:18px}.frequency{margin-top:18px;display:grid;gap:18px}.frequency-row{display:grid;gap:6px;font-size:14px}.bar-bg{height:13px;background:#eff5f8;border-radius:3px}.bar{height:100%;background:#159eef;border-radius:3px}.control-grid{display:grid;grid-template-columns:1.05fr 1.05fr 1.1fr 1.2fr;gap:15px}.control-grid .card{padding:17px}.control-grid h2{font-size:20px}.hint{font-size:14px;color:var(--muted);margin:9px 0 15px}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e1edf5;padding:14px 0;font-size:14px;font-weight:600}.toggle{display:flex;align-items:center;flex-direction:column;gap:5px;cursor:pointer}.toggle input{appearance:none;width:48px;height:27px;background:#b3c3d1;border:0;border-radius:30px;position:relative;padding:0;cursor:pointer}.toggle input:checked{background:#078cfb}.toggle input:after{content:'';width:21px;height:21px;position:absolute;left:3px;top:3px;background:white;border-radius:50%;transition:left .15s}.toggle input:checked:after{left:24px}.toggle small{font-size:11px;font-weight:400}.control-pump{padding:15px 0;border-bottom:1px solid #e1edf5}.control-pump .buttons{display:flex;gap:7px;margin-top:10px}.control-pump button{padding:7px 12px;min-height:34px}.delay-row{display:grid;grid-template-columns:1fr 67px 67px;gap:6px;align-items:center;padding:12px 0;border-bottom:1px solid #e1edf5;font-size:13px}.delay-row input{width:100%;padding:8px 4px}.field-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;font-size:14px}.field-row input{width:90px}.control-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}.notice{background:#e9f5ff;border:1px solid #b9def8;border-radius:10px;padding:13px 16px;font-size:14px;line-height:1.5;margin-bottom:17px}.login-screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 20% 30%,#d4f5ff,transparent 60%),#eef8fc;padding:25px}.login-card{width:min(440px,100%);padding:38px;background:white;border:1px solid #dcebf5;border-radius:22px;box-shadow:0 20px 90px #0a507612}.login-card h1{margin:35px 0 8px}.login-card label{display:block;margin:22px 0 7px;font-size:14px}.login-card input,.login-card button{width:100%}.login-card button{margin-top:26px}.error{color:#bd2548;font-size:14px;margin-top:16px}.login-card .muted{font-size:14px}.caption{font-size:13px;color:var(--muted);margin-top:22px;line-height:1.5}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#0c2a53;color:#fff;border-radius:10px;padding:13px 22px;box-shadow:0 10px 35px #0002;z-index:100;max-width:90vw;display:none}dialog{border:1px solid #cbe1ed;border-radius:15px;padding:28px;color:var(--navy);max-width:min(640px,90vw)}dialog::backdrop{background:#0a244c66}dialog ul{line-height:1.9}dialog button{margin-top:15px}.source-note{font-size:13px;color:var(--muted);margin-top:18px}.range{display:flex;align-items:center;gap:10px}.pagination{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:15px}.telemetry-time{font-variant-numeric:tabular-nums}
@media(min-width:1600px){.metric strong{font-size:32px}.content{padding:26px 30px}.header{padding:24px 30px}.process{max-height:610px}}@media(max-width:1200px){.metrics{grid-template-columns:repeat(3,1fr)}.details-grid{grid-template-columns:1fr 1fr}.details-grid>.stack:last-child{grid-column:1/-1}.control-grid{grid-template-columns:1fr 1fr}.header{gap:15px}.header .title{padding-left:15px}.alarm-grid{grid-template-columns:1fr}.frequency{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.layout{grid-template-columns:70px 1fr}.sidebar{padding:14px 4px;gap:9px}.navitem{font-size:11px;padding:12px 3px}.navitem .icon{width:25px;height:25px}.header{padding:16px}.brand{font-size:23px}.header .title{border:0;padding:0}h1{font-size:23px}.header-right{margin:0}.content{padding:15px}.metrics,.three,.bottom-metrics{grid-template-columns:1fr 1fr}.metric{padding:14px}.metric strong{font-size:24px}.metric .symbol{display:none}.details-grid,.control-grid{grid-template-columns:1fr}.details-grid>.stack:last-child{grid-column:auto}.tank-grid{grid-template-columns:1fr 1fr}.frequency{grid-template-columns:1fr 1fr}.three>.card:last-child{grid-column:1/-1}.process{min-width:850px}.pressure-grid strong{font-size:25px}.table-wrap{max-width:calc(100vw - 132px)}}@media(max-width:480px){.metrics,.three,.bottom-metrics{grid-template-columns:1fr}.header-right button{padding:8px}.brand small{font-size:8px}.frequency{grid-template-columns:1fr}.three>.card:last-child{grid-column:auto}.two{grid-template-columns:1fr}.tds{font-size:16px}.tds output{min-width:100px}.card{padding:15px}.pressure-grid{grid-template-columns:1fr}.pressure-grid label{min-height:0}.pressure-grid strong{margin-top:4px}.login-card{padding:25px}}