:root{color-scheme:light;--ink:#182b38;--muted:#75818e;--line:#e6eaf0;--accent:#13816a;--accent-dark:#0d6955;--surface:#fff;--canvas:#f4f6f9;--rail:84px;--radius:17px;--shadow:0 4px 24px #142d4210;font-family:'Segoe UI Variable','Segoe UI',Arial,sans-serif;font-size:14px;color:var(--ink);background:var(--canvas)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;min-height:38px;border:1px solid #dde3e9;border-radius:9px;background:#fff;color:#4f606e;font-size:12px;font-weight:600;transition:background .15s,border-color .15s,box-shadow .15s}button:hover{background:#f7faf9;border-color:#b9cfc6}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #72c6af;outline-offset:3px}button.primary,button.active{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover,button.active:hover{background:var(--accent-dark);border-color:var(--accent-dark)}.icon{width:19px;height:19px;flex:none}button .icon{width:16px;height:16px}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}p{margin:8px 0;color:var(--muted);line-height:1.65}.eyebrow{display:block;color:#88949e;font-size:9px;letter-spacing:1.6px;font-weight:700}h1,h2,h3{color:var(--ink)}
.app-rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:20;background:#142a33;display:flex;flex-direction:column;align-items:center;padding:25px 10px 19px;border-right:1px solid #14222d}.brand{display:flex;flex-direction:column;align-items:center;gap:10px}.logo{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;color:#fff;background:#258a72;font-size:28px;font-weight:750;letter-spacing:-2px;padding-right:2px;box-shadow:0 4px 14px #0002}.brandname{font-size:8px;font-weight:700;letter-spacing:1.7px;color:#9bb0b8}.app-rail nav{display:flex;flex-direction:column;gap:14px;margin-top:44px;width:100%}.nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#90a5ae;text-decoration:none;font-size:9px;font-weight:600;min-height:63px;border-radius:12px;transition:background .15s,color .15s}.nav-link .icon{width:21px;height:21px}.nav-link:hover{background:#233c46;color:#e6f1ee}.nav-link.current{background:#25463f;color:#9de4ca;box-shadow:inset 0 0 0 1px #467c662b}.rail-footer{display:flex;flex-direction:column;align-items:center;gap:10px;color:#6f8994;margin-top:auto;font-size:7px;letter-spacing:1.2px}.rail-footer .icon{width:19px;height:19px}
main{max-width:none;margin-left:var(--rail);padding:24px 32px 36px}.page-context{display:flex;align-items:center;justify-content:space-between;color:#94a0ab;font-size:11px;gap:12px;padding-bottom:23px;border-bottom:1px solid var(--line);margin-bottom:23px}.page-context>span:first-child{display:flex;align-items:center;gap:12px}.page-context b{font-size:11px;color:#364b58;letter-spacing:1px}.page-context i{font-style:normal;color:#c2cbd2}.context-tag{display:flex;align-items:center;gap:7px;color:#7c8b97}.context-tag .icon{width:14px;height:14px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px}.intro .eyebrow{color:var(--accent);font-size:9px}.intro h1{font-size:clamp(24px,2.15vw,33px);line-height:1.2;letter-spacing:-1px;font-weight:650;margin:9px 0 8px}.intro p{font-size:12px;margin:0}.intro .actions{flex-shrink:0}.intro .primary{box-shadow:0 4px 12px #157f6a20}
.metrics{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:16px;margin:24px 0 16px}.metrics article{position:relative;min-width:0;padding:19px 21px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 6px #10253303}.metrics article>span:not(.metric-icon){display:block;font-size:11px;color:#7c8a97;margin-bottom:12px}.metrics strong{display:flex;align-items:baseline;gap:7px;font-weight:650;font-size:32px;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}.metrics strong small{font-size:13px;letter-spacing:0;color:#a2adb6;font-weight:400}.metric-caption{font-size:10px;color:#9aa5ae;margin-top:12px;display:flex;align-items:center;gap:6px}.metric-icon{position:absolute;right:19px;top:16px;width:32px;height:32px;display:grid;place-items:center;background:#f2f5f8;color:#81909c;border-radius:10px}.metric-icon .icon{width:17px;height:17px}.metric-placed .metric-icon{background:#eef2fb;color:#7d97c5}.metric-online .metric-icon{background:#edf8f2;color:#4eae86}.metric-online strong{color:#168268}.status-dot{display:inline-block;width:5px;height:5px;flex:none;border-radius:50%;background:#51b990}.metrics .source{background:#153d37;border-color:#153d37;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.metrics .source:after{content:'';width:100px;height:100px;position:absolute;right:-36px;top:-24px;border:22px solid #ffffff05;border-radius:50%;pointer-events:none}.metrics .source>span.source-label{color:#9fc8b8;font-size:8px;letter-spacing:1.3px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:15px}.source .status-dot{background:#75d5aa;box-shadow:0 0 0 3px #75d5aa15}.source b{color:#effaf5;display:block;font-size:16px;line-height:1.4;font-weight:550;margin-bottom:8px}.source small{font-size:10px;color:#9cbbad;line-height:1.6}
.health-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:11px;color:#7b8892;margin:0 2px 16px;padding:0 2px;min-height:20px}.health-summary b{display:flex;align-items:center;gap:7px;font-weight:550;color:#956e67}.health-summary b:before{content:'';width:5px;height:5px;background:#c48c81;border-radius:50%}.health-summary b.critical{color:#a18a66}.health-summary b.critical:before{background:#c5aa7a}.health-summary b .battery-icon{width:17px;height:12px}.health-summary span{font-size:10px;color:#a1aab2;margin-left:auto}.live-connection{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;margin-bottom:20px;background:#fff;border:1px solid var(--line);border-radius:12px}.connection-copy{display:flex;align-items:center;gap:12px;min-width:0}.connection-symbol{display:grid;place-items:center;background:#f0f7f3;color:#4f9f81;border-radius:10px;width:35px;height:35px;flex:none}.connection-symbol svg{width:18px;height:18px}.live-connection strong{display:block;font-size:12px;font-weight:600;color:#425a50}.live-connection small{display:block;font-size:10px;color:#99a59e;margin-top:5px;line-height:1.5}.live-connection .actions{gap:7px}.live-connection button{padding:7px 12px;min-height:31px;font-size:10px;border-color:#e5e9e7}.live-connection #liveConnect{background:#f2f6f4;color:#6f8278;border-color:#f2f6f4}.live-connection #liveConnect:hover{background:#e8f1ec}.live-connection.error{border-color:#e6d2c4;background:#fffaf6}.live-connection.error .connection-symbol{background:#f7eae0;color:#b28569}.live-connection.error strong{color:#a36d50}
.workspace{display:grid;grid-template-columns:326px minmax(0,1fr);gap:20px;align-items:start;scroll-margin-top:20px}aside,.mapcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}aside{position:sticky;top:20px}.asidehead{display:flex;align-items:center;justify-content:space-between;padding:22px 18px 17px}.asidehead .eyebrow{font-size:8px;letter-spacing:1.3px}.asidehead h2{font-size:19px;letter-spacing:-.4px;margin:6px 0 0;font-weight:650}.asidehead h2 span{display:inline-block;vertical-align:middle;font-size:10px;letter-spacing:0;background:#f0f3f5;color:#98a4ae;padding:3px 6px;border-radius:5px;font-weight:500;margin-left:4px}.asidehead button{font-size:10px;min-height:30px;padding:6px 9px;border-radius:7px}.asidehead button.active{background:#edf6f1;border-color:#d8ebe1;color:#428466;box-shadow:none}.search-wrap{position:relative;margin:0 17px}.search-wrap>.icon{position:absolute;left:11px;top:11px;width:15px;height:15px;color:#acb6bd;pointer-events:none}#search{width:100%;font-size:11px;padding:10px 12px 10px 34px;border:1px solid #e9edf1;background:#f8f9fb;border-radius:8px;color:#485e6b;outline-offset:2px}#search::placeholder{color:#a5afb8}.filter{display:flex;flex-wrap:wrap;gap:5px;padding:14px 17px 12px}.filter button{border:1px solid transparent;padding:5px 8px;min-height:25px;font-size:9px;font-weight:550;color:#8c98a2;border-radius:6px;background:#f6f8fa}.filter button.active{color:#278366;background:#edf7f1;border-color:#dceee3}.filter button:hover{background:#eef2f4;color:#596e79}#sensorList{padding:0 9px 9px;max-height:570px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.sensor{display:grid;grid-template-columns:29px minmax(0,1fr) auto;gap:9px;width:100%;padding:14px 9px;margin:3px 0;align-items:start;text-align:left;border:1px solid transparent;border-radius:10px;background:white;min-height:86px}.sensor:hover{background:#f8faf9;border-color:#edf1ef}.sensor.selected{background:#f1f8f4;border-color:#c9e4d6;box-shadow:inset 3px 0 #4b9c77}.num{display:grid;place-items:center;flex:none;width:29px;height:29px;background:#f0f4f3;color:#7c958c;border-radius:9px;font-size:10px;font-weight:650;font-variant-numeric:tabular-nums}.sensor.selected .num{background:#268266;color:#fff}.sensor-info{min-width:0}.sensor .name{display:block;font-size:11px;font-weight:600;line-height:1.5;color:#3e5662;overflow-wrap:anywhere}.sensor .meta{display:block;font-size:8px;font-weight:400;margin-top:4px;color:#a3aeb6;line-height:1.5}.health{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;font-size:8px;font-weight:400}.status,.battery{display:inline-flex;align-items:center;gap:3px;padding:2px 4px;line-height:1.4;border-radius:4px;font-weight:450}.status.online{background:#eaf7ef;color:#54a07b}.status.offline{background:#f8efec;color:#b58579}.battery{background:#f3f5f5;color:#9aa7a5}.battery.critical{background:#fcf2e5;color:#b48b5f}.battery-icon{height:12px;width:17px;flex:none;vertical-align:middle}.sensor .values{text-align:right;white-space:nowrap;margin-top:1px;font-variant-numeric:tabular-nums;color:#2e6552;line-height:1.3}.sensor .temperature{display:block;font-size:16px;font-weight:650;letter-spacing:-.5px}.sensor .humidity{display:block;font-size:10px;font-weight:450;color:#96a7ae;margin-top:6px;letter-spacing:0}.sensor.is-offline .num{background:#f5f0ee;color:#af968b}.sensor.is-offline .name{color:#81909a}.sensor .unavailable-values{align-self:center;padding-right:6px}.noresult{padding:30px 16px;text-align:center;font-size:12px;color:#9cabb3}aside footer{padding:15px 18px;border-top:1px solid #edf0f3;color:#9ba9a5;font-size:9px;font-weight:450;background:#fcfdfd;line-height:1.5}
.maphead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px 18px}.maphead .eyebrow{color:#a5afb6;font-size:8px;letter-spacing:1.5px}.floorline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px}.floorline select{font-size:18px;font-weight:650;letter-spacing:-.5px;color:#2b4858;border:0;background:transparent;max-width:340px;min-width:0;padding:0 16px 0 0;margin-right:5px}.floorline button{font-size:9px;padding:5px 8px;min-height:26px;border-radius:6px;border-color:#edf0f3;color:#8f9ca7;background:#f9fafb;font-weight:500}.zoom{display:flex;align-items:center;gap:3px;flex:none;border:1px solid #e8edf1;border-radius:9px;padding:3px;background:#fff}.zoom button{border:0;padding:3px 8px;min-height:26px;border-radius:5px;font-size:14px;background:transparent;color:#7e8d99}.zoom button:hover{background:#f3f6f7}.zoom #fit{font-size:9px;font-weight:500;border-left:1px solid #eaf0ed;border-radius:0;padding-left:10px}.zoom span{font-size:9px;color:#82959f;min-width:35px;text-align:center;font-variant-numeric:tabular-nums}.instruction{padding:11px 24px;font-size:10px;line-height:1.6;color:#88a294;background:#f7faf8;border-block:1px solid #edf3ef}#viewport{display:flex;align-items:center;overflow:auto;min-height:420px;height:clamp(420px,54vh,640px);padding:64px 34px;background-color:#f9fbfc;background-image:radial-gradient(#d5dfe2 .65px,transparent .65px);background-size:14px 14px;overscroll-behavior:contain}#map{position:relative;flex:none;width:100%;background:#fff;box-shadow:0 12px 35px #253f5014,0 1px 4px #2944540c;border:1px solid #e7ecee;cursor:crosshair}#map img{width:100%;display:block;user-select:none}#pins{position:absolute;inset:0;pointer-events:none}.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;touch-action:none;padding:0;min-height:0;border:0;background:none;z-index:1;box-shadow:none}.pin:hover,.pin:active{background:none;transform:translate(-50%,-50%);z-index:3}.pinface{display:flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid #c8dfd2;background:#fffffffa;padding:6px 8px 6px 5px;box-shadow:0 4px 12px #203b4522;border-radius:9px}.pin .num{width:24px;height:27px;font-size:9px;border-radius:6px;background:#27836a;color:white}.pin b{font-size:10px;letter-spacing:-.2px;color:#315e4d;font-weight:650}.pin small{display:block;font-size:7px;color:#95b0a2;font-weight:450;text-align:left;margin-top:3px}.pin.selected{z-index:6}.pin.selected .pinface{outline:3px solid #69b79655;outline-offset:2px}.pin.is-offline .pinface{border-color:#ead9d2;background:#fffdfbf5}.pin.is-offline .num{background:#af9182;color:#fff}.pin.is-offline small{color:#b5a397}.pin.has-battery-warning .pinface{border-bottom:2px solid #d6a66d}.pin-battery{display:flex;gap:4px;align-items:center;font-size:8px;margin-top:3px;color:#b5804d}.pin-battery .battery-icon{width:15px;height:10px}.unavailable-mark{display:inline-grid;place-items:center;vertical-align:middle;width:18px;height:18px;background:#fcf2ed;border:1.4px solid #cea08d;border-radius:50%;font-size:12px;font-weight:750;color:#be8e77;line-height:1}.pin .unavailable-mark{width:18px;height:18px;font-size:12px}.unavailable-reading>.unavailable-mark{width:33px;height:33px;font-size:23px}.mapfooter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 24px;border-top:1px solid #edf0f3;border-bottom:1px solid #edf0f3;font-size:9px;color:#a2adb6;line-height:1.6}.mapfooter i{display:inline-block;width:5px;height:5px;background:#5baf88;border-radius:50%;margin:0 5px 1px 0}.mapfooter i.empty{background:#c4a795;margin-left:15px}#modeLabel{color:#84a18f}.detail{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:127px}.detail h3{font-size:19px;font-weight:600;letter-spacing:-.5px;margin:8px 0}.detail .eyebrow{font-size:8px}.detail p{font-size:11px;max-width:600px;margin:6px 0}.detailicon{display:grid;place-items:center;color:#acd0bf;background:#f3f9f5;border-radius:15px;width:65px;height:65px;flex:none}.detailicon .icon{width:31px;height:31px}.detail .health{font-size:10px}.health-note{padding:8px 10px;background:#f8faf9;border-left:2px solid #dce9e1;border-radius:0 5px 5px 0}.reading{flex:none;color:#26795b;min-width:100px;font-variant-numeric:tabular-nums;text-align:right}.reading>.temperature{font-size:30px;font-weight:550;letter-spacing:-1px}.reading>.humidity{display:block;font-size:12px;letter-spacing:0;color:#8aa59a;font-weight:450;margin-top:8px}.reading.unavailable-reading{color:#bd9a84}.unavailable-reading>small{display:block;font-size:10px;color:#bea996;margin-top:8px}.detailbuttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.detailbuttons button{font-size:10px;min-height:29px;padding:6px 10px;color:#92a19b;border-color:#e4ece7}.note{font-size:9px;color:#acb6bb;line-height:1.65;padding:12px 24px;background:#fcfdfd;border-top:1px solid #eff2f4}
.storage-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff8ef;border:1px solid #ebd5b8;border-radius:12px;padding:14px 17px;margin-bottom:18px;font-size:12px;color:#a27643}.storage-notice[hidden],button[hidden]{display:none}.storage-notice button{font-size:11px}.critical{color:#bd8851}#toast{position:fixed;bottom:25px;left:calc(50% + var(--rail)/2);transform:translateX(-50%);max-width:calc(100vw - 40px);z-index:80;display:none;color:#fff;background:#173c31;font-size:12px;line-height:1.5;padding:14px 22px;border:1px solid #325a48;border-radius:12px;box-shadow:0 8px 30px #14342733}
dialog{width:min(460px,calc(100vw - 32px));max-width:none;max-height:90vh;overflow:auto;padding:30px;border:1px solid #e0e9e3;border-radius:20px;color:var(--ink);box-shadow:0 22px 90px #152f4233}dialog::backdrop{background:#0f27365c;backdrop-filter:blur(4px)}dialog h2{font-size:23px;font-weight:600;letter-spacing:-.6px;margin:10px 0 24px}dialog label{display:block;font-size:12px;color:#71867a;font-weight:500}dialog input,dialog select{display:block;background:#f8faf9;border:1px solid #dfe8e2;border-radius:9px;padding:12px;width:100%;margin:8px 0 15px;font-size:13px;color:#3b5547}dialog p{font-size:12px;line-height:1.7;margin:16px 0 24px}dialog .actions{justify-content:flex-end;margin-top:22px}dialog a{color:var(--accent)}.api-dialog{width:min(550px,calc(100vw - 32px))}.api-dialog .error-message{font-size:12px;color:#bd6b50;line-height:1.6;white-space:pre-wrap}.api-dialog label{margin-top:14px}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#ccd7d6;border-radius:6px}::-webkit-scrollbar-track{background:transparent}
@media(min-width:1800px){main{padding-inline:40px}.workspace{grid-template-columns:345px minmax(0,1fr)}#sensorList{max-height:650px}.sensor{padding-block:16px}.sensor .name{font-size:12px}}
@media(max-width:1250px){main{padding:22px 24px}.intro{align-items:flex-end}.intro h1{font-size:26px}.intro .actions button{font-size:10px;padding:9px 10px}.metrics{gap:12px}.metrics article{padding:17px}.metric-icon{right:13px;top:13px}.metrics article>span:not(.metric-icon){font-size:10px}.metrics strong{font-size:29px}.source b{font-size:14px}.workspace{grid-template-columns:288px minmax(0,1fr);gap:16px}.sensor{grid-template-columns:24px minmax(0,1fr) auto;gap:7px;padding-inline:7px}.sensor>.num{width:24px;height:26px;font-size:9px}.sensor .name{font-size:10px}.sensor .temperature{font-size:14px}.sensor .meta{font-size:7px}.sensor .humidity{font-size:9px}.maphead{align-items:flex-start;flex-wrap:wrap;padding:20px}.floorline select{max-width:260px}.maphead .zoom{margin-left:auto}.instruction,.mapfooter,.detail,.note{padding-inline:20px}#viewport{padding-inline:25px}.health-summary span{display:none}}
@media(max-width:1000px){:root{--rail:70px}.app-rail{padding:22px 7px 18px}.logo{width:38px;height:38px;font-size:26px}.brandname{font-size:7px}.app-rail nav{margin-top:34px}.nav-link{font-size:8px}.intro{align-items:flex-start;gap:12px}.intro h1{font-size:24px;max-width:340px}.intro .actions{gap:6px}.intro .actions button{font-size:9px;padding:8px}.intro .actions .icon{display:none}.metrics{grid-template-columns:repeat(3,1fr)}.metrics .source{grid-column:1/-1;min-height:0;padding:12px 17px;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-radius:10px}.metrics .source>span.source-label,.source b{margin:0}.source b{font-size:12px}.source small{font-size:9px}.workspace{grid-template-columns:265px minmax(0,1fr);gap:14px}.live-connection{padding:10px 12px}.live-connection small{max-width:360px}.maphead .zoom{margin-left:0}.detail{flex-wrap:wrap}.floorline select{font-size:16px}#viewport{min-height:400px;height:460px}}
@media(max-width:800px){.workspace{display:flex;flex-direction:column}.workspace>aside,.workspace>.mapcard{width:100%}aside{position:static}.asidehead{padding:18px}.filter{padding-top:12px}#sensorList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;max-height:265px;padding:0 10px 10px}.sensor{font-size:12px;min-height:88px}.sensor .name{font-size:11px}.sensor .temperature{font-size:15px}.sensor .meta{font-size:8px}.sensor .values{display:block}.maphead{flex-wrap:nowrap;align-items:center}.maphead .zoom{margin-left:auto}.floorline select{font-size:18px}.health-summary{margin-bottom:12px}.live-connection .actions{margin-left:auto}.detailicon{width:48px;height:48px}.mapcard{margin-top:2px}#viewport{min-height:350px;height:420px}.intro h1{max-width:320px;font-size:24px}.metrics article>span:not(.metric-icon){font-size:9px}.metric-icon{width:26px;height:26px;top:13px;right:12px}.metric-icon .icon{width:14px;height:14px}.metrics article{padding:16px 14px}.metric-caption{font-size:9px}}
@media(max-width:600px){:root{--rail:0px}.app-rail{position:static;flex-direction:row;width:100%;height:66px;padding:12px 18px;border:0;gap:20px}.brand{flex-direction:row;gap:9px}.logo{width:32px;height:33px;border-radius:9px;font-size:23px}.brandname{display:block;font-size:9px;letter-spacing:1.8px;color:#c9d6da}.app-rail nav{flex-direction:row;width:auto;gap:5px;margin:0 0 0 auto}.nav-link{flex-direction:row;min-height:34px;padding:8px 10px;gap:6px;border-radius:7px}.nav-link .icon{width:16px;height:16px}.nav-link span{display:none}.app-rail .rail-footer{display:none}main{margin:0;padding:20px 16px 26px}.page-context{padding-bottom:16px;margin-bottom:20px;font-size:9px}.page-context b{font-size:9px}.context-tag{font-size:9px}.context-tag .icon{width:12px;height:12px}.intro{flex-direction:column;gap:16px}.intro h1{font-size:27px;max-width:350px;letter-spacing:-1px;line-height:1.25}.intro p{font-size:11px}.intro .actions{gap:8px}.intro .actions button{font-size:10px;padding:8px 11px}.intro .actions .icon{display:block;width:13px;height:13px}.metrics{gap:9px;margin:20px 0 13px}.metrics article{padding:14px 11px 12px;border-radius:12px}.metrics .metric-icon{display:none}.metrics strong{font-size:27px;gap:4px}.metrics strong small{font-size:10px}.metrics article>span:not(.metric-icon){font-size:8px;line-height:1.5;min-height:24px;margin-bottom:9px}.metric-caption{font-size:7px;line-height:1.6;margin-top:9px}.metrics .source{padding:12px 13px;gap:6px}.metrics .source>span.source-label{min-height:0;font-size:7px;margin-bottom:3px;flex-basis:100%}.source b{font-size:12px}.source small{font-size:8px}.health-summary{font-size:9px;gap:13px;margin-bottom:13px}.health-summary .battery-icon{display:none}.live-connection{padding:12px;border-radius:12px;margin-bottom:16px;gap:12px}.live-connection strong{font-size:10px}.live-connection small{font-size:8px;max-width:270px}.connection-copy{gap:9px}.connection-symbol{width:29px;height:29px;border-radius:8px}.connection-symbol svg{width:15px;height:15px}.live-connection .actions{padding-left:38px;margin-left:0}.live-connection button{font-size:9px;min-height:27px;padding:6px 9px}.workspace{gap:16px}aside,.mapcard{border-radius:14px}.asidehead{padding:19px 16px 14px}.asidehead h2{font-size:18px}.search-wrap{margin:0 15px}.filter{padding-inline:15px;gap:4px}.filter button{font-size:8px;padding:5px 8px}#sensorList{grid-template-columns:1fr;max-height:282px;padding-inline:8px}.sensor{grid-template-columns:28px minmax(0,1fr) auto;padding:12px 10px;gap:10px;min-height:84px}.sensor .name{font-size:12px}.sensor .meta{font-size:9px}.sensor .health{font-size:8px}.sensor .temperature{font-size:19px}.sensor .humidity{font-size:11px}.sensor>.num{width:28px;height:28px;font-size:10px}aside footer{padding:12px 16px;font-size:8px}.maphead{padding:20px 16px 15px;align-items:flex-start;flex-wrap:wrap;gap:12px}.maphead .zoom{margin-left:auto}.floorline select{font-size:17px;max-width:270px}.floorline button{font-size:8px}.instruction{padding:10px 16px;font-size:9px}#viewport{min-height:320px;height:350px;padding:50px 28px}.mapfooter{padding:12px 16px;font-size:8px;flex-wrap:wrap;gap:6px}.detail{padding:20px 16px;gap:15px}.detail h3{font-size:18px}.detail p{font-size:10px}.detail .health{font-size:9px}.reading>.temperature{font-size:27px}.note{padding:12px 16px;font-size:8px}#toast{left:50%;font-size:11px;padding:12px 16px;bottom:18px;width:max-content;max-width:calc(100vw - 32px)}dialog{padding:25px;border-radius:17px}dialog h2{font-size:21px}.storage-notice{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Reading sizes stay legible in a desktop control room. */
@media(min-width:801px){
.page-context{font-size:12px;padding-bottom:18px;margin-bottom:20px}.intro h1{font-size:30px}.intro p{font-size:13px}.intro .eyebrow{font-size:10px}.intro .actions button{font-size:12px}.metrics{margin-top:22px}.metrics article{padding-top:17px;padding-bottom:15px}.metrics article>span:not(.metric-icon){font-size:12px;margin-bottom:9px}.metric-caption{font-size:11px;margin-top:9px}.metrics .source>span.source-label{font-size:9px}.source b{font-size:16px}.source small{font-size:11px}.nav-link{font-size:10px}.live-connection strong{font-size:13px}.live-connection small{font-size:11px}.live-connection button{font-size:11px}.sensor .name{font-size:12px}.sensor .meta{font-size:9px}.sensor .temperature{font-size:18px}.sensor .humidity{font-size:11px}.health{font-size:9px}.filter button{font-size:10px}.search-wrap input#search{font-size:12px}.asidehead .eyebrow{font-size:9px}.asidehead button{font-size:11px}.maphead .eyebrow{font-size:9px}.floorline button{font-size:10px}.zoom #fit,.zoom span{font-size:10px}.instruction{font-size:11px}.mapfooter{font-size:10px}.detail p{font-size:12px}.detail .eyebrow{font-size:9px}.note{font-size:10px}
}
.eyebrow{color:#7d8c95}.sensor .meta{color:#8999a2}.sensor .humidity{color:#7e939e}.sensor .name{color:#344f5d}.metric-caption{color:#8797a2}.metrics article>span:not(.metric-icon){color:#71838e}.health-summary span{color:#82939d}.live-connection small{color:#85978d}.source small{color:#adccbf}.filter button{color:#7a8b96}.sensor.is-offline .name{color:#71858f}.status.offline{color:#a77768}.battery{color:#82958e}.pin b{font-size:11px}.pin small{font-size:8px}.mapfooter{color:#8498a3}.instruction{color:#71937f}.note{color:#8c9fa6}
.status.online{color:#357d59}.status.offline{color:#9b6e5d}.battery{color:#6f877b}.floorline button{color:#627c87}.filter button{color:#687f8a}.sensor .humidity{color:#688492}.live-connection #liveConnect{color:#527566}@media(min-width:1001px){#viewport{height:clamp(400px,33vw,590px);min-height:400px}}

/* Use the whole monitor; the floor plan expands with the available workspace. */
@media(min-width:1001px){
  main{padding-inline:24px}
  .workspace{grid-template-columns:clamp(300px,16vw,420px) minmax(0,1fr)}
  #viewport{height:auto;min-height:300px;max-height:calc(100vh - 160px);align-items:flex-start;padding:32px 28px}
}
@media(min-width:1800px){
  main{padding-inline:28px}
  .intro h1{font-size:34px}.intro p{font-size:15px}
  .metrics article>span:not(.metric-icon){font-size:14px}.metrics strong{font-size:38px}.metrics strong small{font-size:15px}.metric-caption,.source small{font-size:13px}.source b{font-size:19px}
  .live-connection strong{font-size:15px}.live-connection small{font-size:13px}.live-connection button,.intro .actions button{font-size:13px}
  .sensor{grid-template-columns:32px minmax(0,1fr) auto;gap:11px;min-height:96px;padding:16px 11px}
  .sensor .name{font-size:clamp(13px,.55vw,16px)}.sensor .temperature{font-size:clamp(20px,1vw,26px)}.sensor .humidity{font-size:13px}.sensor .meta{font-size:11px}.health{font-size:10px}
  .filter button{font-size:11px;padding:6px 9px}.search-wrap input#search{font-size:14px}.asidehead h2{font-size:22px}
  .floorline select{font-size:23px;max-width:500px}.floorline button,.zoom #fit,.zoom span{font-size:12px}.instruction{font-size:12px}
  .pin b{font-size:13px}.pin small{font-size:9px}.pin .num{width:28px;height:30px;font-size:11px}.pinface{padding:7px 10px 7px 6px;gap:8px}
  .detail h3{font-size:23px}.detail p{font-size:14px}.reading>.temperature{font-size:38px}.reading>.humidity{font-size:14px}
}
/* Per-sensor history stays in the shared database. */
.history-dialog{width:min(1280px,calc(100vw - 48px));max-height:92vh;padding:28px;border-radius:20px;overflow:auto}
.history-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:23px}.history-header h2{font-size:25px;margin:8px 0 5px;letter-spacing:-.5px}.history-header p{font-size:12px;margin:0}.history-close{width:34px;height:34px;min-height:34px;border-radius:9px;font-size:25px;font-weight:400;padding:0;flex:none;color:#7d9189;background:#f6f8f7;border-color:#edf0ed}
.history-controls{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:17px;background:#f7faf8;border:1px solid #e5eee8;border-radius:12px}.history-date-control{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.history-controls label{font-size:10px;color:#7a9083}.history-controls input,.history-controls select{margin:6px 0 0;background:#fff;padding:8px 10px;border-radius:7px;min-height:36px;font-size:12px}.history-controls button{min-height:36px;padding:8px 12px;font-size:11px}.history-date-control>label{min-width:170px}.history-days-label{min-width:235px;max-width:100%}.history-controls button:disabled{opacity:.35;cursor:default}
.history-day-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:23px 1px 16px}.history-day-heading h3{font-size:17px;margin:0 0 6px;font-weight:600}.history-day-heading span{font-size:11px;color:#8a9c92}.history-zone{background:#f3f6f4;padding:6px 9px;border-radius:6px;white-space:nowrap}.history-status{font-size:12px;line-height:1.6;color:#789084;padding:10px 13px;margin-bottom:15px;border:1px solid #e4ede7;border-radius:9px;background:#f7faf8}.history-status[hidden]{display:none}.history-status.error{color:#ac6d51;background:#fff8f1;border-color:#ead5c1}
.history-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.history-chart-card{min-width:0;border:1px solid #e5ebe8;border-radius:14px;overflow:hidden;background:white}.history-chart-heading{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 7px}.history-chart-heading>span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#496354}.history-chart-heading i{width:7px;height:7px;background:#21856a;border-radius:50%}.humidity-card .history-chart-heading i{background:#4e8cc4}.history-chart-heading b{font-size:12px;font-weight:500;color:#9aa9a0}.history-plot{position:relative;margin:4px 10px 0;min-height:240px}.history-svg{display:block;width:100%;height:auto;overflow:visible;outline-offset:0;border-radius:7px;touch-action:pan-y}.history-svg text{font-family:inherit;font-size:10px;fill:#91a298}.history-grid line{stroke:#edf1ee;stroke-width:1;stroke-dasharray:3 4}.history-lines path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}.history-lines circle{fill:currentColor;stroke:white;stroke-width:1.5}.history-cursor line{stroke:#a5b9ae;stroke-width:1;stroke-dasharray:4 3}.history-cursor circle{stroke:white;stroke-width:2}.history-chart-empty{display:grid;place-items:center;text-align:center;min-height:240px;padding:30px;font-size:12px;color:#9aaa9f;background:linear-gradient(0deg,#fafcfb,white);border-radius:8px}.history-tooltip{position:absolute;pointer-events:none;z-index:1;white-space:nowrap;background:#23493c;color:white;border-radius:6px;padding:7px 9px;font-size:10px;box-shadow:0 3px 12px #13352825}.history-tooltip[hidden]{display:none}
.history-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:#f9fbfa;border-top:1px solid #edf1ee;padding:14px 17px}.history-stats>div{min-width:0}.history-stats span{display:block;color:#98a99f;font-size:9px;line-height:1.4;margin-bottom:7px}.history-stats b{color:#3e7c61;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}.humidity-card .history-stats b{color:#4f83ac}.history-footer{display:flex;flex-direction:column;gap:5px;margin:18px 2px 0;color:#94a69a;font-size:10px;line-height:1.6}.history-footer>span:first-child{color:#7d9586}
@media(max-width:900px){.history-charts{grid-template-columns:1fr}.history-dialog{width:calc(100vw - 32px);padding:23px}.history-days-label{flex:1;min-width:190px}.history-header h2{font-size:22px}}
@media(max-width:600px){.history-dialog{width:calc(100vw - 18px);padding:17px;border-radius:15px;max-height:94vh}.history-header{margin-bottom:17px;gap:10px}.history-header h2{font-size:19px;overflow-wrap:anywhere}.history-header .eyebrow{font-size:8px}.history-controls{padding:12px;gap:12px}.history-date-control{gap:6px}.history-date-control>label{min-width:0;flex:1}.history-controls input{font-size:11px;padding:8px;min-width:0}.history-controls button{padding:8px 10px}.history-days-label{width:100%}.history-day-heading{margin-top:18px}.history-day-heading h3{font-size:15px}.history-day-heading span{font-size:9px}.history-zone{font-size:8px!important;padding:5px 6px}.history-chart-heading{padding:16px 15px 6px}.history-plot{margin-inline:5px}.history-stats{padding:13px}.history-stats b{font-size:17px}.history-footer{font-size:9px}.history-chart-empty{font-size:11px}}
.history-view-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.history-view-options select{font-size:10px;margin:0;padding:6px 8px;width:auto;background:#fff;border-color:#e4ece6}.history-dialog .history-view-options .history-zone{font-size:9px}@media(max-width:600px){.history-day-heading{align-items:flex-start}.history-view-options{max-width:145px;gap:5px}.history-view-options select{font-size:9px;max-width:145px}.history-view-options .history-zone{font-size:8px!important}}
.floor-workspace{min-width:0;width:100%}#floorOverview{display:flex;flex-direction:column;gap:20px}#floorOverview[hidden],#floorEditor[hidden]{display:none}.overview-name{font-size:21px;font-weight:650;letter-spacing:-.4px;margin:8px 0 5px}.overview-count{font-size:11px;margin:0;color:#89a094}.overview-viewport{padding:25px 28px;background:#f9fbfc;border-top:1px solid #edf1ef;overflow:auto}.overview-map{position:relative;background:white;box-shadow:0 3px 18px #253f5012;width:100%;min-width:0}.overview-map>img{display:block;width:100%;height:auto;user-select:none}.overview-pins{position:absolute;inset:0;pointer-events:none}.overview-pins .pin{cursor:pointer}.overview-footer{padding:12px 24px;font-size:10px;color:#8a9f93;border-top:1px solid #edf1ef}.overview-edit{flex:none}.back-floors{margin-bottom:12px;color:#43846c;background:#edf6f1;border-color:#d8e9df}#floorEditor{scroll-margin-top:20px}@media(max-width:800px){.floor-workspace{width:100%}.overview-name{font-size:18px}.overview-viewport{padding:22px 15px}.overview-card .maphead{align-items:flex-start;flex-wrap:wrap}.overview-count{font-size:10px}.overview-edit{font-size:10px}.overview-footer{font-size:9px;padding:12px 16px}}@media(min-width:1800px){.overview-name{font-size:25px}.overview-count{font-size:13px}}
.overview-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.plan-tools{display:flex;align-items:center;gap:3px;border:1px solid #e3eae7;border-radius:8px;padding:3px;background:#fff}.plan-tools button{min-height:28px;padding:4px 10px;border:0;background:transparent;font-size:13px}.plan-tools .plan-zoom-fit{font-size:10px;border-left:1px solid #e7eeea;border-radius:0}.plan-zoom-value{font-size:10px;min-width:40px;text-align:center;color:#6f8d7e;font-variant-numeric:tabular-nums}.zoom-pane{overflow:auto!important;position:relative;touch-action:none;cursor:grab;overscroll-behavior:auto;max-height:75vh;display:block!important;padding:24px!important}.zoom-pane.is-panning{cursor:grabbing}.zoom-map{flex:none;max-width:none!important;min-height:0;transform-origin:0 0}.zoom-map>img{width:100%;height:auto;display:block;max-width:none}.zoom-pane .pin{cursor:pointer}.overview-viewport.zoom-pane{min-height:220px}@media(max-width:600px){.overview-controls{gap:6px}.plan-tools button{padding:4px 8px}.overview-card .maphead{gap:12px}}