*{box-sizing:border-box}
:root{font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#15263b;background:#f3f6fa;font-synthesis:none;text-rendering:optimizeLegibility;--blue:#1685e8;--navy:#12365b;--muted:#718096;--line:#e5ebf2;--green:#168653;--amber:#b77912;--red:#c43d4b}
body{margin:0;min-width:320px;background:linear-gradient(180deg,#fff 0,#fff 200px,#f3f6fa 270px,#f3f6fa 100%)}
button,input,select{font:inherit}
.app-shell{min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:center;padding-top:20px}
.brand{display:flex;align-items:center;justify-content:center;min-width:0}
.brand-logo{display:block;height:105px;width:auto;flex:none}
.intro-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.updated{font-size:13px;color:#7c8ba0;white-space:nowrap}
.icon-button{border:1px solid var(--line);background:#fff;color:#31506f;width:35px;height:35px;border-radius:10px;font-size:22px;line-height:1;cursor:pointer;transition:.2s}
.icon-button:hover{background:#edf6ff;color:#0875d1;transform:rotate(25deg)}.icon-button:disabled{opacity:.55;cursor:not-allowed;transform:none}.icon-button:disabled:hover{background:#fff;color:#31506f}
.grid-nav{display:none}
main{max-width:1440px;margin:0 auto;padding:32px clamp(16px,4vw,54px) 20px; padding-top:0}
.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.7px;color:#1780d9;margin:0 0 8px}
h1{font-size:clamp(26px,3vw,34px);letter-spacing:-1.2px;line-height:1.15;margin:0;color:#122d4a}
.intro-copy{font-size:15px;color:#77879a;margin:9px 0 0}
.connection-pill{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #dce6ef;border-radius:30px;background:#fff;color:#687b90;font-size:13px;white-space:nowrap}
.connection-dot{width:8px;height:8px;border-radius:50%;background:#f0aa3b}
.connection-pill.connected{color:#22754e;border-color:#d4ecdf;background:#f6fcf8}.connection-pill.connected .connection-dot{background:#23a363}
.connection-pill.error{color:#a83743;border-color:#f3d4d8;background:#fff8f8}.connection-pill.error .connection-dot{background:#d84956}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:25px}
.summary-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #e5ebf2;border-radius:15px;padding:18px;min-width:0;box-shadow:0 3px 12px rgba(28,54,83,.035)}
.summary-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:23px;font-weight:700;flex:none}
.summary-icon.blue{color:#1678d0;background:#eaf4ff}.summary-icon.cyan{color:#078d9e;background:#e6f9fb}.summary-icon.navy{color:#335e89;background:#edf2f8}.summary-icon.amber{color:#ad7614;background:#fff5df}
.summary-label{font-size:13px;font-weight:600;color:#738297;margin-bottom:6px;line-height:1.3}
.summary-value{font-size:28px;font-weight:800;letter-spacing:-1px;color:#193653;line-height:1.05;font-variant-numeric:tabular-nums}
.summary-value small{font-size:16px;letter-spacing:0;margin-left:3px}
.summary-value.compact{font-size:23px}
.summary-note{font-size:12px;color:#99a5b4;margin-top:6px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 17px}
.search-wrap{height:40px;min-width:220px;max-width:310px;flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e0e7ef;border-radius:10px;padding:0 12px;color:#8192a7}
.search-wrap span{font-size:23px;line-height:1;transform:rotate(-20deg)}
.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:#243e59;font-size:14px}
.search-wrap:focus-within{border-color:#83bdf1;box-shadow:0 0 0 3px #dceeff}
.filter-group{display:flex;gap:5px;flex-wrap:wrap}
.filter-chip{border:1px solid transparent;background:transparent;color:#718197;border-radius:8px;padding:9px 11px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.filter-chip:hover{background:#eaf1f8}.filter-chip.active{background:#e4f1ff;color:#096fc6;border-color:#d0e7ff}
.filter-chip span{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:4px;border-radius:5px;background:#fff;font-size:12px}
.toolbar-spacer{flex:1}
.select-wrap{display:flex;align-items:center;gap:8px;color:#7b899b;font-size:13px;white-space:nowrap}
.select-wrap select{height:39px;border:1px solid #e0e7ef;background:#fff;color:#29435f;border-radius:9px;padding:0 30px 0 10px;font-size:13px;outline:0}
.reservoir-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;align-items:stretch}
.reservoir-card{background:#fff;border:1px solid #e4eaf1;border-radius:16px;padding:19px 19px 15px;box-shadow:0 4px 15px rgba(30,55,82,.045);min-width:0;transition:transform .18s,box-shadow .18s}
.reservoir-card:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(30,55,82,.08)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.card-title{font-size:16px;font-weight:750;color:#183653;letter-spacing:-.3px;line-height:1.35;margin:0}
.card-id{font-size:12px;color:#a0aaba;margin-top:4px}
.status{display:inline-flex;align-items:center;gap:5px;flex:none;border-radius:20px;padding:6px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.status:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.status.normal{color:#168451;background:#e9f8ef}.status.alto{color:#9b6a0b;background:#fff5dd}.status.baixo{color:#bf3947;background:#ffedef}
.level-row{display:flex;align-items:center;gap:15px;min-height:104px;margin-bottom:16px}
.level-info{flex:1;min-width:0}
.level-number{font-size:42px;font-weight:800;letter-spacing:-2px;color:#117edb;line-height:1.05;font-variant-numeric:tabular-nums}
.level-number small{font-size:19px;letter-spacing:-.4px;margin-left:1px}
.volume-line{font-size:13px;color:#61758b;margin-top:8px;white-space:nowrap}
.volume-line strong{color:#29445f;font-weight:700}
.capacity-line{font-size:12px;color:#9aa7b6;margin-top:4px}
.progress-track{height:5px;background:#edf1f6;border-radius:8px;overflow:hidden;margin-top:13px}
.progress-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#37a8f7,#0876d4);transition:width .4s}
.tank{width:49px;height:94px;border:1.5px solid #9db0c3;border-radius:5px 5px 8px 8px;position:relative;overflow:hidden;background:#f5f9fd;flex:none;box-shadow:inset 0 0 0 3px #fff}
.tank:before{content:"";position:absolute;z-index:2;left:4px;right:4px;top:4px;height:2px;border-radius:2px;background:#dce8f3}
.tank-water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#5bb8fa,#1282e1);transition:height .5s;transform-origin:50% 100%;animation:water-sway 3.6s ease-in-out infinite alternate}
.tank-water.is-critical{background:linear-gradient(180deg,#5bb8fa,#dc3545)}
.tank-water.is-warning{background:linear-gradient(180deg,#5bb8fa,#db5b00)}
.tank-water:before{content:"";position:absolute;left:-10%;right:-10%;top:-3px;height:6px;background:#81ccfb;border-radius:50%}
.tank-water.is-critical:before{background:#fb8181}
.tank-water:after{content:"";position:absolute;left:0;right:0;top:-120px;height:120px;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='120'%3E%3Crect x='9.6' y='4' width='4.8' height='8.6' rx='2.4' fill='%2381ccfb' opacity='0.95'/%3E%3Crect x='28.1' y='44' width='3.8' height='6.8' rx='1.9' fill='%2381ccfb' opacity='0.8'/%3E%3Crect x='18.4' y='84' width='5.2' height='9.4' rx='2.6' fill='%2381ccfb' opacity='0.9'/%3E%3C/svg%3E");background-size:49px 120px;background-repeat:repeat-y;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0,rgba(0,0,0,1) calc(100% - 16px),rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 16px),transparent 100%);animation:tank-drop-fall 1.7s linear infinite}
@keyframes tank-drop-fall{from{background-position:0 0}to{background-position:0 120px}}
@keyframes water-sway{0%{transform:scaleX(1.02) skewX(-.7deg)}100%{transform:scaleX(1.02) skewX(.7deg)}}
@keyframes surface-sway{0%{transform:translateX(-6%) scaleX(.95) translateY(1px)}100%{transform:translateX(6%) scaleX(.95) translateY(1px)}}
@keyframes wave-roll{from{background-position:0 0}to{background-position:-16px 0}}
.reservoir-card.is-flowing .tank-water{transform-origin:50% 100%;animation:water-sway 3.6s ease-in-out infinite alternate}
.reservoir-card.is-flowing .tank-water:before{content:"";position:absolute;left:-10%;right:-10%;top:-5px;height:9px;border-radius:0;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0,2.5 C2,0.6 6,0.6 8,2.5 C10,4.4 14,4.4 16,2.5 L16,9 L0,9 Z' fill='%2381ccfb'/%3E%3C/svg%3E");background-size:16px 9px;background-repeat:repeat-x;transform-origin:50% 100%;animation:surface-sway 3.6s ease-in-out infinite alternate,wave-roll 3s linear infinite}
.reservoir-card.is-flowing .tank-water.is-critical:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0,2.5 C2,0.6 6,0.6 8,2.5 C10,4.4 14,4.4 16,2.5 L16,9 L0,9 Z' fill='%23fb8181'/%3E%3C/svg%3E")}
.reservoir-card.is-flowing .tank-water:after{animation:tank-drop-fall 1.7s linear infinite}
.reservoir-card:not(.is-flowing) .tank-water:after{display:none}
.tank-wrap{position:relative;flex:none}
.tank-leak{position:absolute;left:-4px;right:-4px;top:100%;height:40px;overflow:hidden;display:none;pointer-events:none}
.reservoir-card.is-draining .tank-leak{display:block}
.tank-leak:after{content:"";position:absolute;left:0;right:0;top:-30px;bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='57' height='26'%3E%3Crect x='22' y='2' width='3.2' height='5.8' rx='1.6' fill='%235bb8fa' opacity='0.9'/%3E%3Crect x='38' y='13' width='2.8' height='5' rx='1.4' fill='%235bb8fa' opacity='0.7'/%3E%3Crect x='12' y='19' width='3.4' height='6.2' rx='1.7' fill='%235bb8fa' opacity='0.85'/%3E%3C/svg%3E");background-size:57px 26px;background-repeat:repeat-y;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 62%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 100%);animation:tank-leak-fall 1.3s linear infinite}
@keyframes tank-leak-fall{from{background-position:0 0}to{background-position:0 26px}}
.reservoir-card:nth-child(2).is-draining .tank-leak:after{animation-delay:-.4s}
.reservoir-card:nth-child(3).is-draining .tank-leak:after{animation-delay:-.8s}
.reservoir-card:nth-child(4).is-draining .tank-leak:after{animation-delay:-1.2s}
.reservoir-card:nth-child(5).is-draining .tank-leak:after{animation-delay:-1.6s}
.reservoir-card:nth-child(2).is-flowing .tank-water,.reservoir-card:nth-child(2).is-flowing .tank-water:before{animation-delay:-.7s}
.reservoir-card:nth-child(3).is-flowing .tank-water,.reservoir-card:nth-child(3).is-flowing .tank-water:before{animation-delay:-1.4s}
.reservoir-card:nth-child(4).is-flowing .tank-water,.reservoir-card:nth-child(4).is-flowing .tank-water:before{animation-delay:-2.1s}
.reservoir-card:nth-child(5).is-flowing .tank-water,.reservoir-card:nth-child(5).is-flowing .tank-water:before{animation-delay:-2.8s}
@media(prefers-reduced-motion:reduce){.tank-water:after,.tank-leak:after{display:none}.tank-water,.tank-water:before{animation:none}}
.chart-section{border-top:1px solid #edf1f5;padding-top:13px}
.chart-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;gap:8px}
.chart-heading strong{font-size:12px;color:#435a73;font-weight:700}
.chart-heading span{font-size:11px;color:#a0abba}
.chart-wrap{height:122px;position:relative}
.chart-wrap canvas{width:100%!important;height:100%!important}
.card-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid #f0f3f7}
.card-foot-label{font-size:11px;color:#9aa6b5}
.history-controls{display:flex;align-items:center;gap:7px}
.history-controls input{width:124px;height:31px;border:1px solid #e2e8ef;border-radius:7px;color:#687c91;font-size:11px;padding:0 6px;min-width:0}
.history-controls button{border:0;background:#eaf4ff;color:#0874ce;border-radius:7px;height:31px;padding:0 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.history-controls button:hover{background:#d7ebff}
.loading-state,.empty-state{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;min-height:240px;background:#fff;border:1px solid #e4eaf1;border-radius:15px;color:#718197;font-size:15px}
.spinner{width:22px;height:22px;border:2px solid #dcebf8;border-top-color:#1685e8;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page-footer{display:flex;justify-content:space-between;gap:12px;margin-top:23px;padding:16px 2px;color:#9aa6b5;font-size:12px;border-top:1px solid #e4eaf1}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#173653;color:#fff;border-radius:10px;padding:12px 16px;font-size:14px;box-shadow:0 8px 25px #17365333;transition:.2s;z-index:10;max-width:calc(100% - 30px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1120px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reservoir-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.brand-logo{height:80px}.intro-actions{width:100%;justify-content:flex-start;gap:10px}main{padding:25px 14px 15px}.intro{align-items:flex-start;flex-direction:column}.connection-pill{font-size:12px}.summary-grid{gap:9px}.summary-card{padding:13px;gap:9px;border-radius:12px}.summary-icon{width:34px;height:34px;font-size:18px}.summary-label{font-size:12px;white-space:normal}.summary-value{font-size:25px}.summary-value.compact{font-size:19px}.summary-note{font-size:11px}.toolbar{gap:9px}.search-wrap{max-width:none;flex-basis:100%}.filter-group{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.filter-chip{padding:8px 9px}.toolbar-spacer{display:none}.select-wrap{margin-left:auto}.reservoir-grid{grid-template-columns:1fr;gap:12px}.reservoir-card{scroll-margin-top:16px}.reservoir-card{padding:17px}.chart-wrap{height:140px}.page-footer{flex-direction:column}.card-foot{align-items:flex-start;flex-direction:column}.history-controls{width:100%}.history-controls input{flex:1}.toast{bottom:130px}.grid-nav{display:flex;flex-direction:column;gap:10px;position:fixed;right:16px;bottom:22px;z-index:9}.grid-nav[hidden]{display:none}.grid-nav-button{width:46px;height:46px;border-radius:50%;border:1px solid #0c60a7;background:#0c60a7;color:#fff;font-size:20px;line-height:1;box-shadow:0 8px 20px rgba(23,54,83,.18);cursor:pointer;transition:.2s}.grid-nav-button:hover{background:#0a5290;border-color:#0a5290;color:#fff}.grid-nav-button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}}
@media(min-width:721px) and (max-width:900px){.reservoir-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-card{padding:14px}.summary-label{white-space:normal}}