@import url("variables.css");
.topbar{height:72px;position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:.7rem;min-width:0}.brand img{width:132px;height:39px}.brand-text{font-size:.75rem;color:var(--muted);white-space:nowrap}.top-actions{margin-left:auto;display:flex;align-items:center;gap:.55rem}.clock{text-align:right;line-height:1.2;font-variant-numeric:tabular-nums;font-size:.82rem}.demo-banner{position:fixed;top:72px;left:var(--sidebar);right:0;z-index:90;padding:.45rem 1rem;text-align:center;background:rgba(255,189,74,.12);border-bottom:1px solid rgba(255,189,74,.35);color:var(--amber);font-weight:850;font-size:.78rem;letter-spacing:.08em;transition:left var(--normal)}.sidebar{position:fixed;z-index:95;top:72px;bottom:0;left:0;width:var(--sidebar);padding:3.25rem .75rem 1rem;background:var(--panel-solid);border-right:1px solid var(--line);overflow:auto;transition:width var(--normal),transform var(--normal)}.side-nav{display:grid;gap:.25rem}.side-nav a{display:flex;align-items:center;gap:.7rem;min-height:43px;padding:.6rem .8rem;border-radius:9px;color:var(--muted);text-decoration:none;white-space:nowrap}.side-nav a:hover,.side-nav a.active{color:var(--text);background:var(--panel2)}.side-nav a.active{box-shadow:inset 3px 0 var(--cyan)}.nav-icon{width:22px;text-align:center}.sidebar-toggle{position:absolute;right:.6rem;top:.6rem}.app-main{margin-left:var(--sidebar);padding-top:108px;transition:margin var(--normal)}body.sidebar-collapsed{--sidebar:78px}.sidebar-collapsed .nav-label,.sidebar-collapsed .sidebar-foot{display:none}.sidebar-foot{margin-top:2rem;padding:.75rem;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line)}.mobile-menu{display:none}.hero{min-height:calc(100vh - 108px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);align-items:center;gap:2rem;padding:clamp(3rem,8vw,7rem) clamp(1rem,5vw,5rem);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:480px;height:480px;right:-180px;top:10%;border:1px solid rgba(72,223,255,.2);border-radius:50%;box-shadow:0 0 80px rgba(72,223,255,.08),inset 0 0 80px rgba(72,223,255,.04);animation:spin 30s linear infinite;pointer-events:none}.hero h1{font-size:clamp(2.3rem,5vw,4.8rem);line-height:1.03;margin:.7rem 0 1rem;max-width:900px}.hero h1 span{background:linear-gradient(100deg,var(--text),var(--cyan));-webkit-background-clip:text;color:transparent}.hero .lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:760px}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}.health-card{position:relative;z-index:1}.health-ring{width:190px;aspect-ratio:1;margin:1rem auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--green) 0 99.3%,var(--panel2) 99.3%);box-shadow:0 0 45px rgba(53,211,154,.15)}.health-ring:before{content:"";position:absolute;width:158px;aspect-ratio:1;border-radius:50%;background:var(--panel-solid)}.health-ring strong{position:relative;font-size:2.2rem}.health-grid{grid-template-columns:repeat(2,1fr)}.health-stat{padding:.7rem;border-top:1px solid var(--line)}.health-stat strong{display:block;font-size:1.15rem}.kpi-grid{grid-template-columns:repeat(4,minmax(185px,1fr))}.kpi-card{position:relative;overflow:hidden;border-radius:var(--radius-sm);padding:1rem;min-height:160px}.kpi-card:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--status,var(--green))}.kpi-head{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem}.kpi-value{font-size:1.65rem;font-weight:800;margin:.65rem 0 0;font-variant-numeric:tabular-nums}.kpi-value small{font-size:.8rem;color:var(--muted)}.spark{width:100%;height:42px;margin:.4rem 0}.spark polyline{fill:none;stroke:var(--cyan);stroke-width:2;vector-effect:non-scaling-stroke}.kpi-foot{display:flex;justify-content:space-between;align-items:center;font-size:.72rem}.trend{color:var(--green)}.process-layout{grid-template-columns:minmax(0,2fr) minmax(270px,1fr)}.process-wrap{overflow:auto}.process-svg{min-width:780px;width:100%;height:auto;border-radius:12px;background:rgba(2,13,24,.35)}.process-svg .pipe{fill:none;stroke:#1d5671;stroke-width:14}.process-svg .water-flow{fill:none;stroke:#42ddff;stroke-width:5;stroke-dasharray:12 14;animation:flow 2s linear infinite}.process-svg .electric{fill:none;stroke:#ffcb4d;stroke-width:4;stroke-dasharray:5 12;animation:flow 1.4s linear infinite}.process-svg .node{cursor:pointer}.process-svg .node rect,.process-svg .node circle{fill:#102a42;stroke:#55dff7;stroke-width:2}.process-svg .node:hover rect,.process-svg .node:focus rect{stroke:#fff;stroke-width:3}.process-svg text{fill:#dceeff;font:12px system-ui}.rotor{transform-box:fill-box;transform-origin:center;animation:spin 2s linear infinite}.sim-paused .process-svg *{animation-play-state:paused!important}.tank-water{fill:#258db7;transition:y 1s,height 1s}.process-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.detail-list{display:grid;grid-template-columns:1fr auto;gap:.55rem;border-top:1px solid var(--line);padding-top:1rem}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;font-weight:700}.chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-card{min-height:330px}.chart-card canvas{max-height:245px}.chart-fallback{display:none;place-items:center;min-height:220px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px}.chart-controls{display:flex;gap:.4rem;flex-wrap:wrap}.range-btn.active{background:var(--blue);color:white}.table-wrap{overflow:auto;border-radius:var(--radius)}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:.8rem;border-bottom:1px solid var(--line)}th{font-size:.75rem;text-transform:uppercase;color:var(--muted)}tbody tr:hover{background:rgba(72,223,255,.04)}.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}.field,select,textarea,input{border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:9px;padding:.7rem;min-height:44px}.ai-grid{grid-template-columns:repeat(3,1fr)}.insight-card h3{margin:.4rem 0}.meter{height:8px;background:var(--panel2);border-radius:9px;overflow:hidden}.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:inherit}.feed{grid-column:span 2}.feed-item{padding:1rem;border-left:3px solid var(--cyan);background:rgba(72,223,255,.04);margin:.6rem 0;border-radius:0 10px 10px 0}.city-grid,.services-grid{grid-template-columns:repeat(3,1fr)}.city-card{position:relative;overflow:hidden}.city-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}.city-stats{grid-template-columns:repeat(3,1fr);font-size:.8rem}.city-stats strong{display:block;font-size:1rem}.services-grid{grid-template-columns:repeat(4,1fr)}.service{min-height:130px}.service span{font-size:1.5rem;color:var(--cyan)}.contact-layout{grid-template-columns:.7fr 1.3fr}.contact-form{grid-template-columns:repeat(2,1fr)}.form-group{display:grid;gap:.35rem}.form-group.full{grid-column:1/-1}.form-group label{font-size:.82rem;color:var(--muted)}textarea{min-height:145px;resize:vertical}.error-text{min-height:1.1em;color:var(--red);font-size:.75rem}.honeypot{position:absolute;left:-9999px}.form-status{padding:.8rem;border-radius:9px;display:none}.form-status.show{display:block;background:rgba(53,211,154,.1);color:var(--green)}footer{padding:2rem clamp(1rem,3vw,3rem);border-top:1px solid var(--line);color:var(--muted)}.footer-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}.modal{border:0;padding:0;background:transparent;color:var(--text);max-width:520px;width:calc(100% - 2rem)}.modal::backdrop{background:rgba(0,8,16,.75);backdrop-filter:blur(4px)}.modal-card{padding:1.5rem;border-radius:var(--radius)}.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.25rem}.toast{position:fixed;right:1rem;bottom:1rem;z-index:500;padding:1rem;border-radius:10px;transform:translateY(150%);transition:transform var(--normal)}.toast.show{transform:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes flow{to{stroke-dashoffset:-52}}