*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f7fb;color:#172033}.topbar{height:76px;background:#fff;border-bottom:1px solid #e7ebf2;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:5}.brand{display:flex;gap:12px;align-items:center}.brand-icon{width:42px;height:42px;border-radius:12px;background:#102a43;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}.brand b{display:block;font-size:14px}.brand small{display:block;color:#7a8798;font-size:11px;margin-top:4px}.connection{padding:8px 12px;border-radius:99px;font-size:12px;font-weight:700}.connection span{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#98a2b3}.connection.online{background:#eaf8f0;color:#16824b}.connection.online span{background:#20b26b}.connection.offline{background:#fff0f0;color:#b42318}.container{max-width:1250px;margin:auto;padding:34px 5% 60px}.hero{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#59708b}.hero h1{font-size:32px;margin:8px 0}.hero p{color:#6d7888;margin:0;max-width:680px}.device-box{background:#fff;border:1px solid #e6ebf1;border-radius:16px;padding:14px 18px;min-width:210px}.device-box b,.device-box span{display:block}.device-box span{font-size:11px;color:#8a94a3;margin-top:5px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric,.panel{background:#fff;border:1px solid #e6ebf1;border-radius:18px;box-shadow:0 5px 18px #162b3d0b}.metric{padding:22px}.metric-label{font-size:11px;font-weight:800;color:#7c8796;letter-spacing:.7px;margin-bottom:12px}.metric strong{font-size:31px}.metric div span{color:#7c8796}.metric small{display:block;color:#8b95a3;margin-top:8px}.status{display:inline-block;padding:8px 12px;border-radius:10px;font-size:18px;font-weight:800;background:#eef2f6}.status.sehat{background:#e8f8ef;color:#147a45}.status.tidak-sehat{background:#fff7df;color:#9a6900}.status.berbahaya{background:#ffebeb;color:#b42318}.panel{padding:22px;margin-top:18px}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-title h2{font-size:18px;margin:5px 0 0}.outputs{padding-bottom:18px}.output-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.output{background:#f7f9fc;border-radius:12px;padding:14px}.output span,.output b{display:block}.output span{font-size:11px;color:#7a8595}.output b{margin-top:6px}.on{color:#138a4b}.off{color:#87909c}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.chart-panel canvas{height:290px!important}.zones{display:grid;gap:12px}.zones div{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:11px;background:#f8fafc;border-radius:10px;font-size:13px}.zones b{font-size:12px;color:#667085}.dot{width:10px;height:10px;border-radius:50%}.healthy{background:#20b26b}.warning{background:#f5b82e}.danger{background:#e5484d}.info{display:flex;justify-content:space-between;border-bottom:1px solid #eef1f5;padding:11px 0;font-size:13px}.info:last-child{border:0}footer{text-align:center;color:#8a94a3;font-size:12px;padding:20px} @media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.output-grid{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.hero{display:block}.device-box{margin-top:18px}}@media(max-width:560px){.cards{grid-template-columns:1fr}.topbar{padding:0 4%}.brand b{font-size:11px}.container{padding:24px 4%}.hero h1{font-size:26px}}