:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#17202a;background:#f4f6f8;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}
.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,78px);background:#fff;border-bottom:1px solid #e7eaef}
.brand{font-size:19px;font-weight:850;letter-spacing:1px;display:flex;align-items:center;gap:11px;color:#1e2630}.brand small{display:block;font-size:10px;letter-spacing:2.4px;color:#88919b;margin-top:2px}.brandmark{background:#b22d33;color:#fff;border-radius:10px;width:40px;height:40px;display:grid;place-items:center;font-size:25px;font-weight:800}
.rightnav{display:flex;align-items:center;gap:20px}.mode{font-size:10px;color:#7d8790;font-weight:700;letter-spacing:1px}.logout{border:1px solid #dbe1e7;border-radius:8px;background:white;padding:10px 16px;color:#46505d}
.shell{max-width:1450px;margin:0 auto;padding:34px clamp(20px,5vw,78px)}.overview{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.eyebrow{margin:0 0 9px;color:#a6383d;font-size:11px;font-weight:800;letter-spacing:1.5px}.overview h1,.loginbox h1{font-size:clamp(25px,3vw,34px);margin:0 0 9px;letter-spacing:-1px}.muted{color:#84909b;font-size:13px;margin:0}
.status{border-radius:100px;padding:10px 16px;font-size:12px;font-weight:700;display:flex;gap:9px;align-items:center;border:1px solid #dee2e8;background:#fff;color:#5d6974}.status.online{color:#167548;border-color:#ccebd9;background:#f3fbf6}.dot{width:9px;height:9px;border-radius:50%;background:#8996a3}.online .dot{background:#24ad69;box-shadow:0 0 0 3px #d7f5e3}
.meta{display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-size:12px;color:#85909e;border-bottom:1px solid #e6ebef;padding:25px 0;margin-bottom:22px}.meta strong{color:#40505e}.download{margin-left:auto;text-decoration:none;border:1px solid #d7dee4;background:white;color:#7a292e;border-radius:8px;padding:9px 13px;font-weight:750}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sensor{background:#fff;border:1px solid #e6ebf0;border-radius:14px;padding:20px;min-height:128px;box-shadow:0 5px 20px #192e4b05;display:flex;flex-direction:column;justify-content:space-between}.sensortop{color:#7f8d9a;display:flex;align-items:center;gap:9px;font-size:12px}.sensoricon{font-size:15px;color:#ad3439}.reading{display:flex;align-items:baseline;gap:7px;white-space:nowrap}.reading strong{font-size:clamp(23px,2.6vw,34px);letter-spacing:-1.2px}.reading small{font-size:12px;color:#929ba5}.empty{color:#a4acb3!important}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.panel{border:1px solid #e6ebf0;background:#fff;border-radius:14px;padding:24px 24px 14px;min-width:0}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.panelhead h2{font-size:18px;margin:0 0 20px;letter-spacing:-.3px}.legend{display:flex;align-items:center;gap:7px;color:#7a8592;font-size:12px}.legenddot{width:8px;height:8px;border-radius:100%}.legenddot.red{background:#b22d33}.legenddot.slate{background:#7c879d}.legenddot.blue{background:#287db8}.panel canvas{display:block;width:100%;height:220px}.chartfoot{color:#a0a7b1;font-size:11px;margin:4px 0 0}footer{color:#89939d;font-size:11px;text-align:center;margin:25px auto 5px}
.loginbg{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 35% 0%,#f8eeee,#f4f6f8 46%)}.loginbox{max-width:430px;width:100%;border:1px solid #e2e6eb;background:#fff;border-radius:18px;box-shadow:0 24px 80px #17202a16;padding:30px}.loginbody{padding:37px 0 20px}.loginbody .muted{margin-bottom:23px}.loginbody label{font-size:12px;color:#566470;font-weight:650;display:block;margin:0 0 17px}.loginbody input{border:1px solid #dce2e8;width:100%;border-radius:8px;padding:12px;font-size:15px;margin-top:8px;outline:0}.loginbody input:focus{border-color:#b22d33}.primary{background:#b22d33;color:#fff;border:0;border-radius:8px;padding:14px;width:100%;font-weight:760;margin-top:8px}.loginerror{padding:12px;border-radius:8px;background:#fff0f0;color:#9a1f29;font-size:13px}.loginfoot{font-size:11px;text-align:center;color:#a0a8b1;margin:0}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-grid{grid-template-columns:1fr}.mode{display:none}}
@media(max-width:450px){.cards{gap:10px}.sensor{padding:15px;min-height:110px}.topbar{height:66px}.brand{font-size:15px}.brandmark{width:36px;height:36px}.meta{gap:10px}.download{margin-left:0}.reading strong{font-size:23px}.panel{padding:19px 14px}}