:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#10213d;background:#f4f7fb
}
*{box-sizing:border-box}
body{margin:0}
.topbar{display:flex;align-items:center;justify-content:space-between;background:#0b2447;color:#fff;padding:16px 4vw;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}.brand h1{margin:0;font-size:24px}.brand small{opacity:.75}.drop{font-size:30px}
nav{display:flex;align-items:center;gap:13px}.navlink{color:#fff;text-decoration:none;font-size:14px}
.wrap{max-width:1180px;margin:auto;padding:22px}
.card{background:#fff;border:1px solid #e8edf4;border-radius:16px;padding:20px;box-shadow:0 7px 24px #10213d0d}
.toolbar{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.toolbar-right{display:flex;align-items:center;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px}
input,select{padding:10px;border:1px solid #d7e0eb;border-radius:9px;background:#fff;min-width:150px}
button{border:0;border-radius:9px;background:#0b2447;color:#fff;padding:10px 14px;cursor:pointer;font-weight:650}
button:hover{filter:brightness(1.08)}button.danger{background:#b4232d}.primary{background:#0b4f8a}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat span{color:#65758b}.stat strong{display:block;font-size:31px;margin:10px 0}.smallstrong{font-size:18px!important}.stat small{color:#4f6076}
.progress{height:12px;background:#e8eef5;border-radius:99px;overflow:hidden}.progress i{height:100%;display:block;width:0;background:#159947;transition:width .5s}
.badge,.status-chip,.mode-chip{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:750}
.badge.online{background:#dcfce7;color:#166534}.badge.warning{background:#fef3c7;color:#92400e}.badge.offline{background:#fee2e2;color:#991b1b}
.main-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-bottom:14px}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.section-head h2,.card h2{margin:0 0 5px;font-size:19px}
.muted{color:#738096;font-size:13px;margin:0}
.tank-wrap{display:flex;justify-content:center;align-items:stretch;gap:12px;padding:14px 0 2px}
.tank{height:245px;width:170px;border:5px solid #8291a5;border-top:10px solid #8291a5;border-radius:18px 18px 24px 24px;position:relative;overflow:hidden;background:#f8fafc}
.water-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#48b8ff,#1778c8);transition:height .6s}
.water-fill:before{content:"";position:absolute;left:-10%;top:-8px;width:120%;height:15px;background:#8bd5ff;border-radius:50%}
.tank-percent{position:absolute;inset:0;display:grid;place-items:center;font-size:31px;font-weight:800;text-shadow:0 1px 3px #fff}
.tank-scale{display:flex;flex-direction:column;justify-content:space-between;color:#6c7b90;font-size:11px;padding:5px 0}
.status-chip{background:#eef2f7;color:#526175}
.health-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf1f5}.health-row:last-child{border-bottom:0}
.health-row b.good{color:#15803d}.health-row b.warn{color:#a16207}.health-row b.bad{color:#b91c1c}
.control-head{margin-bottom:12px}.mode-chip{background:#e8eef5;color:#334155}
.actions{display:flex;gap:9px;flex-wrap:wrap}.message{margin-top:11px;font-size:13px;color:#475569;min-height:18px}
.chart-card{margin-top:14px}.chart-holder{height:390px}.chart-holder canvas{max-height:390px}
.period-tabs{display:flex;gap:5px}.period-tabs button{padding:7px 10px;background:#e7edf5;color:#334155}.period-tabs button.active{background:#0b4f8a;color:white}
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}
.alarm-list{max-height:230px;overflow:auto}.alarm{padding:10px;border-bottom:1px solid #edf1f5}.alarm:last-child{border:0}.alarm .sev{font-weight:750}.alarm.critical .sev{color:#b91c1c}.alarm.warning .sev{color:#a16207}
.smallbtn{font-size:11px;padding:6px 9px}
footer{text-align:center;padding:24px;color:#778499;font-size:12px}
@media(max-width:900px){.summary-grid{grid-template-columns:repeat(2,1fr)}.main-grid,.bottom-grid{grid-template-columns:1fr}.chart-holder{height:330px}}
@media(max-width:560px){.topbar{align-items:flex-start}.brand small{display:none}nav{gap:8px}.navlink{font-size:12px}.wrap{padding:12px}.summary-grid{grid-template-columns:1fr 1fr;gap:10px}.card{padding:15px}.stat strong{font-size:26px}.toolbar{align-items:stretch;flex-direction:column;gap:12px}.toolbar-right{justify-content:space-between}.tank{height:210px;width:145px}.chart-holder{height:280px}.formgrid{grid-template-columns:1fr}.period-tabs button{padding:7px 8px}}