:root{--ink:#17232d;--muted:#71808a;--line:#e4e9e6;--paper:#f7f9f7;--white:#fff;--mint:#dff5e9;--green:#159b66;--orange:#e88b35;--red:#dc5d52;--navy:#243a4a;--shadow:0 10px 30px rgba(32,56,68,.06)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Space Grotesk',sans-serif}button,a{font:inherit}button{cursor:pointer;border:0}a{text-decoration:none;color:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:242px;background:#142733;color:#b4c5cb;padding:29px 18px 22px;display:flex;flex-direction:column;z-index:3}.brand{display:flex;gap:11px;align-items:center;color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:17px;letter-spacing:-.3px;padding:0 12px 45px}.brand small{display:block;font:500 8px 'DM Sans';letter-spacing:1.4px;color:#83a0a7;margin-top:4px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;background:#57d69b;color:#123329;border-radius:9px;font-size:21px}.sidebar nav{display:grid;gap:7px}.sidebar nav a{height:44px;display:flex;align-items:center;gap:15px;padding:0 13px;border-radius:8px;font-weight:600;transition:.2s}.sidebar nav a:hover,.sidebar nav a.active{background:#234453;color:#fff}.sidebar nav a span{font-size:19px;width:18px;text-align:center;color:#83a8ae}.sidebar nav a.active span{color:#67dda2}.sidebar nav b{margin-left:auto;background:#db6a54;color:#fff;font-size:10px;padding:3px 7px;border-radius:20px}.sidebar-foot{margin-top:auto;border-top:1px solid #2d4651;padding:20px 12px 0;display:flex;gap:10px;align-items:flex-start;font-size:12px}.sidebar-foot strong,.sidebar-foot small{display:block}.sidebar-foot small{color:#77929a;margin-top:4px}.online-dot,.demo-pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#52d691;box-shadow:0 0 0 4px rgba(82,214,145,.12);margin-top:4px}main{margin-left:242px;min-height:100vh}.topbar{height:105px;padding:28px 43px 22px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#94a19f}.topbar h1{font-size:26px;margin-top:7px;letter-spacing:-.7px}.top-actions{display:flex;align-items:center;gap:18px}.demo-pill{color:#50816b;background:#e9f7ee;padding:9px 14px;border-radius:20px;font-size:12px;font-weight:700;display:flex;gap:9px;align-items:center}.demo-pill i{width:6px;height:6px;margin:0;box-shadow:none}.icon-button{font-size:24px;color:#637278;background:transparent}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;background:#314b5c;font-size:11px;font-weight:700}.menu{display:none}.page{max-width:1440px;margin:auto;padding:31px 43px 58px}.status-banner{background:#e8f8ee;border:1px solid #cdecdc;border-radius:10px;padding:23px 27px;display:flex;align-items:center;gap:18px;margin-bottom:22px}.status-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#22b875;color:#fff;font-size:23px}.status-banner h2{color:#169764;font-size:24px;margin:3px 0}.status-banner p:not(.eyebrow){color:#648070;font-size:13px}.last-sync{margin-left:auto;color:#789286;font-size:9px;letter-spacing:1.3px;font-weight:700;text-align:right}.last-sync strong{display:block;color:#4c6a5d;font-size:12px;letter-spacing:0;margin-top:5px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-bottom:22px}.metric-card,.panel{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.metric-card{padding:21px 22px}.card-top{display:flex;align-items:center;gap:9px}.sensor-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:8px;font-size:20px}.seismic .sensor-icon{color:#5879a8;background:#edf3fb}.smoke .sensor-icon{color:#db7c2d;background:#fff3e8}.gas .sensor-icon{color:#45a47e;background:#e9f8f0}.sensor-label{font-weight:700;font-size:10px;letter-spacing:1.3px;color:#687b7e}.live-badge{margin-left:auto;font-size:9px;color:#3ba273;background:#e5f7ed;border-radius:4px;padding:4px 7px;font-weight:700}.metric-value{display:flex;align-items:baseline;gap:7px;margin:18px 0 2px}.metric-value strong{font:700 31px 'Space Grotesk'}.metric-value span{color:#718088;font-size:12px}.metric-card p{color:#91a09e;font-size:12px}.meter{height:5px;background:#edf0ef;border-radius:4px;margin:16px 0 8px;overflow:hidden}.meter i{display:block;height:100%;width:20%;border-radius:4px;background:#75a4d3}.smoke .meter i{background:#ec9c52}.gas .meter i{background:#55ba91}.metric-card small{color:#9ba8a6;font-size:11px}.metric-card small b{font-weight:600;color:#627471}.grid-two{display:grid;grid-template-columns:1.55fr 1fr;gap:19px;margin-bottom:22px}.panel{padding:21px 22px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-heading h3{font-size:17px;margin-top:4px}.panel-heading>a{font-size:12px;color:#279d6c;font-weight:700}.range-label,.room-summary{font-size:11px;color:#93a09e}.chart-wrap{height:240px}.alerts-list{display:grid;gap:4px}.alert-row{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0ee}.alert-row:last-child{border:0}.alert-dot{width:8px;height:8px;background:#e76b58;border-radius:50%;box-shadow:0 0 0 5px #fff0ed}.alert-dot.warning{background:#e99d48;box-shadow:0 0 0 5px #fff6e9}.alert-detail{flex:1}.alert-detail strong{display:block;font-size:12px}.alert-detail small{display:block;color:#9aa7a4;margin-top:3px;font-size:10px}.alert-time{color:#a2adaa;font-size:10px}.empty{color:#9aa7a4;padding:24px 0;text-align:center}.rooms-panel{margin-bottom:22px}.rooms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.room{padding:16px;background:#f9fbfa;border:1px solid #e8edeb;border-radius:8px}.room-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.room strong{font-size:13px}.room-status{font-size:9px;font-weight:700;padding:4px 7px;border-radius:4px}.room-status.normal{background:#e3f7ec;color:#269667}.room-status.warning{background:#fff0dc;color:#ce7924}.room-status.danger{background:#ffe6e3;color:#cb554b}.room-data{display:grid;grid-template-columns:1fr 1fr;gap:8px;color:#83918f;font-size:10px}.room-data b{display:block;color:#3a4b50;font-size:12px;margin-top:3px}.history-panel{margin-bottom:22px}.outline-button,.primary-button{padding:9px 13px;border-radius:6px;font-size:11px;font-weight:700}.outline-button{background:#fff;border:1px solid #cedad5;color:#55726a}.primary-button{background:#168e61;color:#fff}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:11px;min-width:650px}th{text-align:left;color:#9aa7a4;font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:9px 8px;border-bottom:1px solid var(--line)}td{padding:12px 8px;border-bottom:1px solid #eff2f0;color:#5e6d70}td strong{color:#35484e}.table-status{font-size:9px;font-weight:700}.table-status.normal{color:#219463}.table-status.warning{color:#cc7d27}.table-status.danger{color:#cf554c}.settings-panel{margin-bottom:20px}.settings-form{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.settings-form label{font-size:11px;color:#758683;font-weight:700}.settings-form input{display:block;width:100%;margin-top:7px;padding:10px;border:1px solid #d9e3df;border-radius:6px;color:var(--ink);font:600 13px 'DM Sans'}.form-note{margin-top:15px;color:#9aa7a4;font-size:11px}.status-banner.warning{background:#fff7e9;border-color:#f5dfad}.status-banner.warning .status-icon{background:#e8a446}.status-banner.warning h2{color:#c87a1f}.status-banner.danger{background:#ffefed;border-color:#f4d2ce}.status-banner.danger .status-icon{background:#dd6255}.status-banner.danger h2{color:#c44d43}@media(max-width:950px){.sidebar{width:205px}.sidebar .brand{padding-bottom:30px}main{margin-left:205px}.topbar,.page{padding-left:25px;padding-right:25px}.grid-two{grid-template-columns:1fr}.rooms-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.sidebar{transform:translateX(-100%);transition:.25s;width:242px}.sidebar.open{transform:translateX(0)}main{margin-left:0}.topbar{height:83px;padding:17px 18px;gap:15px}.menu{display:block;background:transparent;color:var(--ink);font-size:20px}.topbar h1{font-size:20px}.topbar .eyebrow{font-size:8px}.top-actions{gap:10px}.demo-pill{font-size:10px;padding:7px 9px}.avatar{display:none}.page{padding:19px 15px 40px}.status-banner{padding:18px;align-items:flex-start}.status-banner h2{font-size:20px}.last-sync{display:none}.metrics{grid-template-columns:1fr;gap:12px}.metric-card{padding:17px}.chart-wrap{height:205px}.rooms-grid{grid-template-columns:1fr}.settings-form{grid-template-columns:1fr 1fr}.panel{padding:17px}.panel-heading h3{font-size:15px}.history-panel{overflow:hidden}}