*{box-sizing:border-box}
:root{
 --bg:#0e1626;--bg2:#151f30;--panel:#202b3b;--panel2:#263244;--border:#344154;
 --text:#f5f7fb;--muted:#9ca9bb;--cyan:#09a7e5;--cyan2:#13c6e8;
 --green:#38d39f;--red:#e75f78;--yellow:#f0bd2e;--purple:#9b5de5;
}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{font-size:14px}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.app-shell{display:flex;min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;background:#1d2939;border-right:1px solid #314052;z-index:20;transition:.25s}
.main{margin-left:280px;min-height:100vh;width:calc(100% - 280px);transition:.25s}
.topbar{height:129px;background:#202b3a;border-bottom:1px solid #344153;display:flex;align-items:center;justify-content:space-between;padding:22px 30px 18px 25px}
.date-line{font-weight:800;font-size:14px}.time-line{font-size:12px;color:#91a0b4;margin-top:4px}
.user-box{display:flex;align-items:center;gap:13px;text-align:right}.user-box strong{display:block}.user-box small{display:block;color:#9ba8bb;font-size:10px;margin-top:3px}.avatar{width:34px;height:34px;border-radius:50%;background:#19aee6;display:grid;place-items:center;font-weight:800}.logout{font-size:11px;color:#aab5c4;margin-left:7px}.logout:hover{color:white}
.content{padding:28px 32px 55px;max-width:1500px;margin:auto}
.brand{display:flex;align-items:center;gap:12px;padding:35px 30px 25px}.brand-title{font-size:27px;font-weight:900;letter-spacing:-1px;line-height:.9}.brand-sub{font-size:11px;letter-spacing:3px;font-weight:700}.brand-caption{font-size:8px;color:#9ca7b7;margin-top:4px}
.brand-mark{position:relative;width:43px;height:52px;transform:skew(-16deg)}
.signal{position:absolute;display:block;border-radius:2px;background:#16d1ad}.s1{width:12px;height:42px;left:2px;top:8px;transform:rotate(32deg)}.s2{width:13px;height:29px;left:17px;top:18px;transform:rotate(32deg)}.s3{width:11px;height:15px;left:29px;top:2px;transform:rotate(32deg)}
.collapse-btn{position:absolute;right:23px;top:160px;width:34px;height:34px;border-radius:9px;border:1px solid #526176;background:#263243;color:#b8c3d2;cursor:pointer;font-size:20px}.collapse-btn:hover{background:#334155}
.nav{padding:70px 24px 0}.nav a{display:flex;gap:16px;align-items:center;height:48px;padding:0 18px;margin:8px 0;border-radius:9px;color:#bec8d5;font-size:14px}.nav a span{width:18px;text-align:center;font-size:20px}.nav a.active{background:#123f5c;color:#16b9f0}.nav a:hover{background:#25374b;color:white}
.sidebar-footer{position:absolute;left:0;right:0;bottom:0;padding:18px 40px;color:#8e9bad;font-size:11px;border-top:1px solid #344153;display:flex;justify-content:space-between}.online-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green)}
.sidebar-collapsed .sidebar{width:76px}.sidebar-collapsed .main{margin-left:76px;width:calc(100% - 76px)}.sidebar-collapsed .brand>div:last-child,.sidebar-collapsed .nav b,.sidebar-collapsed .sidebar-footer{display:none}.sidebar-collapsed .brand{padding-left:17px}.sidebar-collapsed .nav{padding-left:13px;padding-right:13px}.sidebar-collapsed .nav a{justify-content:center;padding:0}.sidebar-collapsed .collapse-btn{right:21px}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:25px}.page-head h1{margin:0;font-size:27px;letter-spacing:-.6px}.page-head p{margin:5px 0 0;color:#9daabd;font-size:14px}.month-box{height:51px;min-width:247px;border:1px solid #3a4658;border-radius:11px;background:#202b3b;display:flex;align-items:center;justify-content:space-around}.month-box strong{font-size:14px}
.cards-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px}.card{position:relative;min-height:220px;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:23px 20px;overflow:hidden;box-shadow:0 9px 30px rgba(0,0,0,.12)}.revenue-card{background:linear-gradient(135deg,#22c39e,#1b9fc1)}.purple-card{background:linear-gradient(135deg,#9861e8,#c02cda)}.slate-card{background:linear-gradient(135deg,#4a586d,#31343b)}.blue-card{background:linear-gradient(135deg,#3baee9,#4b64ed)}.orange-card{background:linear-gradient(135deg,#ff8a20,#f0363e)}.card-label,.card-title{font-weight:800;font-size:13px}.big-value{font-size:25px;font-weight:900;margin-top:10px}.muted{color:#9ba8bb}.divider{height:1px;background:rgba(255,255,255,.19);margin:14px 0}.stat-row{display:flex;justify-content:space-between;margin:10px 0;color:#f2f4f8}.stat-row span{color:rgba(255,255,255,.72)}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}.mini-grid>div{background:rgba(255,255,255,.14);border-radius:9px;padding:10px}.mini-grid small{display:block;color:rgba(255,255,255,.7);font-size:9px}.mini-grid strong{font-size:20px;display:block;margin-top:3px}.footnote{margin-top:12px;color:rgba(255,255,255,.75)}.water-icon{position:absolute;right:24px;top:20px;font-size:34px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:31px 0 15px}.section-title h2{margin:0;font-size:18px}.section-title p{margin:4px 0;color:#8998ac}.table-card{background:var(--panel);border:1px solid var(--border);border-radius:11px;overflow:hidden}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px}th,td{padding:15px 12px;text-align:left;border-bottom:1px solid #344154;white-space:nowrap}th{font-size:11px;color:#91a0b5;letter-spacing:.3px;background:#202b3b;position:sticky;top:0}td{font-size:13px}tbody tr:hover{background:#273447}.empty{text-align:center;color:#8492a6;padding:35px}.subline{display:block;color:#8290a4;font-size:10px;margin-top:4px}
.btn{border:1px solid #405069;background:#293548;color:#f4f7fa;border-radius:8px;padding:10px 15px;cursor:pointer}.btn:hover{filter:brightness(1.12)}.btn.primary{background:#0a9ddd;border-color:#0a9ddd}.btn.small{padding:8px 12px;font-size:12px}.btn.xs{padding:5px 8px;font-size:10px}.cyan-btn{border-color:#159ec9}.warn-btn{border-color:#c69b20}.actions{display:flex;gap:5px}
.badge{display:inline-block;border-radius:12px;padding:4px 9px;font-size:10px;border:1px solid transparent}.badge.green{color:#5ae4b3;border-color:#268d70;background:rgba(56,211,159,.08)}.badge.red{color:#ff738a;border-color:#a83348;background:rgba(231,95,120,.08)}.badge.yellow{color:#ffd760;border-color:#a88726;background:rgba(240,189,46,.08)}.badge.cyan{color:#55d6ff;border-color:#2487a6;background:rgba(9,167,229,.08)}
.filter-row,.monitor-toolbar{display:flex;justify-content:flex-end;gap:9px;margin-bottom:16px}.filter-row input,.filter-row select,.monitor-toolbar select,.form-stack input,.form-grid input{background:#3a4659;border:1px solid #526075;color:white;border-radius:8px;padding:11px 13px;outline:none}.filter-row input{width:280px}.filter-row select,.monitor-toolbar select{min-width:150px}.filter-row input:focus,.filter-row select:focus{border-color:#10abe5}
.monitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.meter-card{background:#202b3b;border:1px solid #39475b;border-radius:11px;padding:17px}.meter-top,.relay-row{display:flex;justify-content:space-between;align-items:center}.meter-user{font-size:11px;color:#8997aa;margin:9px 0 13px}.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.pulse.on{background:#e94d63;box-shadow:0 0 8px #e94d63}.pulse.off{background:#777}.relay-row{background:#2d3a4c;padding:7px 9px;font-size:11px}.relay-row .open{color:#39dca4}.relay-row .closed{color:#ff6d84}.meter-main{font-size:27px;font-weight:900;margin-top:16px}.meter-main small{font-size:14px}.meter-label{font-size:10px;color:#8795a8}.meter-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:16px}.meter-stats div{padding:10px;background:#263345}.meter-stats small{display:block;color:#7f8da1;font-size:9px}.meter-stats b{display:block;margin-top:3px}
.tabs{display:flex;gap:2px;margin-bottom:14px}.tab{border:0;background:#202b3b;color:#9eabbc;padding:11px 16px;cursor:pointer}.tab:first-child{border-radius:8px 0 0 8px}.tab:last-child{border-radius:0 8px 8px 0}.tab.active{background:#0b9fdc;color:#fff}
.config-layout{display:grid;grid-template-columns:230px 1fr;gap:20px}.config-menu,.config-panel{background:#202b3b;border:1px solid #39475a;border-radius:11px}.config-menu{padding:10px;height:max-content}.config-menu button{width:100%;text-align:left;border:0;background:transparent;color:#b2bfce;padding:13px;border-radius:8px;cursor:pointer}.config-menu button.selected{background:#078fcb;color:#fff}.config-panel{padding:25px}.config-panel h2{margin:0 0 5px;font-size:18px}.notice{margin:18px 0;padding:13px 15px;border-radius:8px}.notice.warning{border:1px solid #885b2a;background:#332a20;color:#f0bd65}.notice.success{border:1px solid #2b7d62;background:#1c332d;color:#66d6ad}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label,.form-stack label{display:flex;flex-direction:column;gap:7px;color:#dce2ea;font-size:12px}.param-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.param-grid div{background:#273447;border:1px solid #35445a;border-radius:8px;padding:13px}.param-grid small{display:block;color:#8795a9}.param-grid b{display:block;margin-top:4px}
.login-page{display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#203550 0,#0e1626 55%)}.login-card{width:min(430px,92vw);background:#202b3b;border:1px solid #3b485b;border-radius:14px;padding:32px;box-shadow:0 25px 70px rgba(0,0,0,.4)}.login-brand{padding:0 0 25px}.login-card h1{margin:0;font-size:25px}.login-card p{margin:6px 0 22px}.form-stack{display:flex;flex-direction:column;gap:15px}.form-stack input{width:100%;margin-top:7px}.full{width:100%;margin-top:3px}.login-note{text-align:center;color:#7e8ca0;font-size:10px;margin-top:17px}.alert{padding:11px;border-radius:8px;margin-bottom:14px}.alert.danger{background:#3a2029;border:1px solid #8f3349;color:#ff8497}.toast{position:fixed;right:25px;bottom:25px;opacity:0;transform:translateY(10px);transition:.2s;padding:12px 15px;border-radius:8px;background:#263447;border:1px solid #46566c;z-index:99}.toast.show{opacity:1;transform:none}.toast.success{border-color:#2d9675}.toast.danger{border-color:#a83950}code{background:#152033;padding:2px 5px;border-radius:4px;color:#61d5f8}
@media(max-width:1000px){.sidebar{width:76px}.main{margin-left:76px;width:calc(100% - 76px)}.brand>div:last-child,.nav b,.sidebar-footer{display:none}.brand{padding-left:17px}.nav{padding-left:13px;padding-right:13px}.nav a{justify-content:center;padding:0}.collapse-btn{right:21px}.cards-grid{grid-template-columns:1fr 1fr}.config-layout{grid-template-columns:1fr}}
@media(max-width:700px){.topbar{height:88px;padding:15px}.content{padding:22px 15px 45px}.page-head{display:block}.month-box{margin-top:15px;width:100%}.cards-grid{grid-template-columns:1fr}.filter-row,.monitor-toolbar{justify-content:stretch;flex-wrap:wrap}.filter-row input{width:100%}.form-grid,.param-grid{grid-template-columns:1fr}.user-box>div:first-child,.logout{display:none}}