:root{--navy:#080b0e;--blue:#d9b775;--water:#27c6ee;--bg:#080b0e;--line:#31434d;--text:#edf2f3;--muted:#9caab1;--green:#29b783;--red:#e25560;--amber:#eda63b}
body{background:var(--bg);color:var(--text)}
.top{height:82px;background:linear-gradient(110deg,#080b0efb,#111c22f7);border-color:#ffffff18;padding:0 22px;gap:17px;backdrop-filter:blur(16px)}
.municipal-brand{display:flex;align-items:center;line-height:0;flex:0 0 auto}
.municipal-brand img{display:block;width:172px;height:54px;object-fit:contain;filter:drop-shadow(0 2px 4px #000b)}
.product{color:#bac5c9;border-color:#ffffff1d;font-size:.86rem}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.top-actions a{border:1px solid #425761;border-radius:5px;color:#c4d0d4;padding:9px 11px;font-size:.72rem;font-weight:750;white-space:nowrap}
.top-actions a.current,.top-actions a:hover{background:#d9b775;border-color:#d9b775;color:#10171b}
.live{margin-left:4px;color:var(--green)}
.layout{grid-template-columns:62px minmax(1040px,1fr) 330px;min-height:calc(100vh - 82px)}
.layout>nav{background:#0e171c;border-right:1px solid #ffffff12}
.layout>nav button.active,.layout>nav button:hover{background:#8c713d;color:#fff}
main{background:#0b1115;padding:18px}
.head h1{font-size:1.3rem;color:#f5f4ee}.head p{color:#9ba9af}
.controls button,.controls .play-3d{background:#142027;border:1px solid #3a4c55;color:#dfe7e9;padding:8px 11px;border-radius:8px;font-size:.76rem;font-weight:750}.controls .play-3d{background:#21323b;color:#edd39e}.controls .primary{background:#d9b775;border-color:#d9b775;color:#11191e}
.network-guide{display:flex;justify-content:space-between;gap:20px;align-items:center;background:linear-gradient(100deg,#161e1c,#10212a);border:1px solid #6b5838;border-radius:9px;padding:10px 13px;margin:0 0 10px;font-size:.72rem;color:#b7c5ca}
.network-guide b{color:#e5c789}.network-guide a{color:#e6c98f;border-bottom:1px solid #806c48;padding-bottom:2px;white-space:nowrap}
.metric,.network,.asset,.oht,aside{background:#101a20;color:var(--text);border-color:var(--line)}
.metric{box-shadow:inset 0 1px #ffffff08}.metric span,.data,.oht p,.itype,.note,.prop span{color:var(--muted)}
.network{box-shadow:0 18px 45px #0007}.network-head{border-color:var(--line);background:#111c22}.canvas{background:radial-gradient(ellipse at center,#1b2a32,#0c1317 72%)}
.asset,.oht{background:#132028}.asset:hover,.asset.selected,.oht.selected{border-color:#d9b775;box-shadow:0 0 0 3px #d9b77522}
.branch,.wtp-storage-route,.route-group,.control-box{background:#0d181e;border-color:#2b414b}
.storage-pump-routes,.pump-route-row{border-color:#2b414b}
.route-head b,.name,.ititle{color:#eef2f2}
.network-head span,.label{color:#91a2a9}
.legend{border-color:var(--line);color:#9eafb6;background:#0e171c}
aside{border-color:var(--line)}
.section{border-color:#ffffff17}
.state,.interlock{background:#102b24;color:#4bd19b}
.interlock.warn{background:#302516;color:#efb755}
.action.secondary{background:#15232b;border-color:#40535d;color:#e5edef}
.schedule-rule{background:#0d181e!important;border-color:#30444d!important;color:#aebec5!important}
.alerts.ok{background:#10281f!important;border-color:#255f4b!important}.alerts.warn{background:#312619!important}.alerts.critical{background:#32191c!important}
.flow-comparison>div,.delivery-error{background:#0d181e!important;border-color:#30444d!important}
.status-legend{background:#0e171c!important;border-color:#30444d!important}
.toast{background:#d9b775;color:#10171b}

@media(max-width:1150px){.product{display:none}.top-actions a{padding:8px}.municipal-brand img{width:145px}.layout{grid-template-columns:54px minmax(1020px,1fr) 310px}}
@media(max-width:820px){.top{height:auto;min-height:76px;flex-wrap:wrap;padding:9px 13px}.municipal-brand img{width:132px;height:44px}.top-actions{order:3;width:100%;margin:0}.top-actions a{flex:1;text-align:center}.live{margin-left:auto}.layout{min-height:0}.network-guide{align-items:flex-start;flex-direction:column}.layout>nav{display:none}main{padding:10px}.canvas{background:#0c1317}aside{background:#101a20}}