@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;650;700;800&display=swap";:root{font-synthesis:none;color:#282f2a;background:#f5f4f0;font-family:DM Sans,sans-serif;font-size:14px}.quick-access{z-index:20;border:1px solid var(--line);background:var(--surface);border-radius:14px;max-width:1180px;margin:18px auto 0;padding:10px;position:sticky;top:10px;box-shadow:0 4px 18px #15251b0d}.quick-access .action-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.quick-access .action-grid button{justify-content:center;gap:12px;min-height:48px;font-size:13px;font-weight:600}.quick-access .action-grid button:nth-child(-n+2){color:#425968;background:#e6edf0}.quick-access .action-grid button:nth-child(n+3){background:var(--tint)}.cleaning-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:21px}.cleaning-heading{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.cleaning-heading h3{align-items:center;gap:8px;display:flex}.cleaning-heading>span{color:var(--muted);text-transform:capitalize;font-size:11px}.cleaning-grid{gap:8px;display:grid}.cleaning-grid button{text-align:left;background:var(--tint);align-items:center;gap:12px;min-height:59px;display:flex}.cleaning-grid button>svg{color:#809386}.cleaning-grid strong{font-size:12px;font-weight:600;display:block}.cleaning-grid small{color:var(--muted);margin-top:4px;font-size:10px;display:block}.saved-routines{margin-top:12px}.saved-routines summary{cursor:pointer;color:var(--muted);min-height:36px;padding-top:8px;font-size:11px}.cleaning-panel [role=status]{margin-top:12px;font-size:11px}@media (width<=1240px){.quick-access{margin-left:30px;margin-right:30px}}@media (width<=720px){.quick-access{margin:12px 16px 0;padding:8px;top:0}.quick-access .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.quick-access .action-grid button{min-height:44px;padding:8px;font-size:11px}.cleaning-panel{padding:20px}}.setting-row{color:var(--muted);justify-content:space-between;align-items:center;gap:10px;margin:12px 0;font-size:12px;display:flex}.setting-row select{border:1px solid var(--line);background:var(--tint);max-width:65%;min-height:44px;color:var(--text);border-radius:8px;padding:8px}.setting-row input[type=color]{border:1px solid var(--line);background:var(--tint);border-radius:6px;width:60px;min-height:44px}.appliance-buttons{flex-wrap:wrap}.appliance-buttons button{flex:1 0 25%}.room-panel>.device-control{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.device-control .slider-label{margin-top:14px}.mapping-notice{border:1px solid var(--line);background:var(--surface);border-radius:10px;margin-bottom:20px;padding:14px 18px;font-size:12px}.mapping-notice summary{cursor:pointer;min-height:30px}.empty-state{padding:20px 0}.sensor-detail{justify-content:space-between;gap:10px;margin:12px 0;font-size:12px;display:flex}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid var(--line,#dedfd8);background:var(--surface,#fff);border-radius:9px;min-height:44px;padding:9px 14px;transition:background .18s,box-shadow .18s}button:hover:not(:disabled){background:var(--hover,#eeefe8)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #789584}a{color:inherit}button svg{flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,.brand{font-family:Manrope,sans-serif}h1{letter-spacing:-1.3px;font-size:34px;font-weight:650}h2{letter-spacing:-.8px;font-size:27px}h3{font-size:13px;font-weight:600}p{color:var(--muted);line-height:1.7}.app{--bg:#f5f4f0;--surface:#fff;--muted:#858880;--text:#2e352f;--line:#e8e9e2;--hover:#f0f2ec;--tint:#f7f8f4;background:var(--bg);min-height:100vh;color:var(--text)}.app.dark{--bg:#171c1a;--surface:#222925;--muted:#a3aea6;--text:#e4e9e3;--line:#343e36;--hover:#313b33;--tint:#28312a}.topbar{background:var(--surface);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:22px;height:85px;padding:0 max(32px,50vw - 650px);display:flex}.brand{letter-spacing:-1.5px;font-size:29px;font-weight:800;text-decoration:none}.brand span{color:#819985;padding-left:3px;font-size:12px}nav{align-items:center;gap:9px;height:100%;display:flex}nav button{min-width:118px;color:var(--muted);background:0 0;border:0;justify-content:center;align-items:center;gap:9px;display:flex}nav button.active{color:#415a44;background:#edf2e9}nav button.active:after{content:"";background:#69856b;border-radius:50%;width:5px;height:5px}.header-right{align-items:center;gap:22px;display:flex}.connection{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.connection svg{color:#78937b}.theme-button{background:0 0;border-radius:50%;place-items:center;width:44px;padding:0;display:grid}.app main{max-width:1240px;margin:auto;padding:36px 30px 28px}.page-heading{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.eyebrow{letter-spacing:2px;color:var(--muted);margin-bottom:9px;font-size:10px;font-weight:700}.heading-dot{color:#829880}.page-heading p{margin-top:7px}.home-stats{align-items:center;gap:9px;font-size:12px;display:flex}.home-stats svg{color:#ac974e;margin-right:5px}.home-stats strong{font-size:17px;font-weight:500}.home-stats span{color:var(--muted)}.divider{background:var(--line);width:1px;height:27px;margin:0 12px}.home-layout{grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);align-items:start;gap:25px;display:grid}.plan-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}.plan-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px 21px;display:flex}.plan-toolbar>span{align-items:center;gap:10px;font-size:12px;font-weight:600;display:flex}.plan-toolbar svg{color:var(--muted)}.room-select{align-items:center;display:flex;position:relative}.room-select select{background:var(--tint);max-width:185px;min-height:44px;color:var(--text);border:1px solid var(--line);appearance:none;border-radius:8px;padding:8px 30px 8px 12px;font-size:12px}.room-select>svg{pointer-events:none;position:absolute;right:10px}.plan-stage{background:#fafaf8;padding:20px 38px 17px;position:relative}.floor-plan{width:100%;max-width:510px;margin:auto;line-height:0;position:relative}.floor-plan>img{width:100%;height:auto;display:block}.floor-plan-layers{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.room-darkness{transition:fill-opacity .4s}.room-hit{fill:#0000;stroke:#0000;stroke-width:5px;cursor:pointer}.room-hit:hover{fill:#b7cfaa0d;stroke:#b7cfaa88}.room-hit.selected{stroke:#bbd0a1;stroke-width:6px}.room-hit:focus-visible{stroke:#577154;stroke-width:9px;outline:none}.room-label{fill:#fff;paint-order:stroke;stroke:#202b32aa;stroke-width:4px;text-anchor:middle;pointer-events:none;font-family:DM Sans,sans-serif;font-size:23px;font-weight:700}.marker{cursor:pointer;color:#728796}.marker>circle:not(.hit-target),.marker>rect:not(.hit-target){fill:#f7f9f3;stroke:#dfe4dc;stroke-width:1.5px;filter:drop-shadow(0 2px 4px #101e2533)}.marker.active.lights{color:#92752b}.marker.active.lights>circle:not(.hit-target){fill:#f9e7a4;stroke:#f9e7a4}.marker.active.radiator{color:#cc7441}.marker text{fill:#3e4942;pointer-events:none;font-size:20px;font-weight:600}.marker .position{fill:#fff;paint-order:stroke;stroke:#26334099;stroke-width:3px;font-size:18px}.marker svg{pointer-events:none}.marker.unavailable{color:#a14d4d}.marker .hit-target{fill:#0000;stroke:none;filter:none}.marker:focus-visible{outline:none}.marker:focus-visible>circle:not(.hit-target),.marker:focus-visible>rect:not(.hit-target){stroke:#527c57;stroke-width:7px}.plan-compass{color:#a7aca3;flex-direction:column;align-items:center;gap:5px;font-size:9px;display:flex;position:absolute;top:22px;right:13px}.plan-compass span{font-size:23px}.plan-legend{color:var(--muted);border-top:1px solid var(--line);align-items:center;gap:19px;padding:19px 22px;font-size:10px;display:flex}.plan-legend span{align-items:center;gap:6px;display:flex}.plan-legend i{border-radius:50%;width:7px;height:7px}.legend-on{background:#d6bd6a}.legend-off{background:#76838b}.legend-hint{margin-left:auto}.right-column{flex-direction:column;gap:19px;display:flex}.room-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:25px}.room-panel>.eyebrow{justify-content:space-between;align-items:center;display:flex}.room-description{align-items:center;gap:7px;margin-top:9px;font-size:12px;display:flex}.status-dot{background:#83918b;border-radius:50%;width:6px;height:6px;display:inline-block}.status-dot.on{background:#c5ac5c}.status-dot.unavailable{background:#b16950}.climate-summary{background:var(--tint);border:1px solid var(--line);border-radius:11px;grid-template-columns:1fr 1fr;margin:23px 0 25px;padding:19px 10px;display:grid}.climate-summary>div{grid-template-columns:20px auto;justify-content:center;align-items:center;gap:5px 6px;display:grid}.climate-summary>div+div{border-left:1px solid var(--line)}.climate-summary svg{color:var(--muted)}.climate-summary strong{letter-spacing:-1px;font-size:23px;font-weight:500}.climate-summary small{color:var(--muted);grid-column:2;font-size:10px}.room-panel section+section{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.room-panel h3{align-items:center;gap:8px;margin-bottom:12px;display:flex}.room-panel h3 svg{color:var(--muted)}.room-panel h3 span{background:var(--tint);border-radius:5px;margin-left:auto;padding:3px 7px;font-size:10px}.device-control{padding:10px 0}.device-heading{align-items:center;gap:11px;display:flex}.device-icon{background:var(--tint);color:#8b9791;border-radius:11px;place-items:center;width:39px;height:39px;display:grid}.device-icon.lit{color:#b09749;background:#fbf3d7}.device-icon.heating{color:#bd724c;background:#f8eade}.device-heading strong{text-transform:capitalize;font-size:12px;font-weight:500;display:block}.device-heading small{color:var(--muted);margin-top:4px;font-size:10px;display:block}.switch{border:none;width:44px;min-width:44px;min-height:44px;margin-left:auto;padding:0;position:relative;background:0 0!important}.switch:before{content:"";background:#d9ddd6;border-radius:20px;position:absolute;inset:10px 0}.switch.on:before{background:#9aac87}.switch>span{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:13px;left:3px;box-shadow:0 1px 3px #0002}.switch.on>span{transform:translate(20px)}.button-group{gap:7px;margin:14px 0 9px;display:flex}.button-group button{background:var(--tint);flex:1;justify-content:center;align-items:center;gap:6px;padding:6px;font-size:11px;display:flex}.slider-label{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:7px;font-size:10px;display:flex}.slider-label input{width:100%;min-height:28px}.slider-label button{min-height:32px;margin-left:auto;font-size:10px}.slider-label b{color:var(--text);font-weight:500}input[type=range]{accent-color:#8d9eab;cursor:pointer}.target{background:var(--tint);border-radius:9px;justify-content:space-between;align-items:center;gap:7px;margin-top:12px;padding:8px 10px;font-size:11px;display:flex}.target span{align-items:center;font-size:18px;display:flex}.target input{width:62px;color:var(--text);background:0 0;border:0;min-height:44px;font-size:18px}.target button{padding:5px 10px;font-size:11px}.panel-note{text-align:center;border-top:1px solid var(--line);color:var(--muted);margin-top:20px;padding-top:17px;font-size:10px}.quick-actions{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:21px}.quick-actions h3{margin-bottom:13px}.action-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.action-grid button{text-align:left;background:var(--tint);justify-content:space-between;align-items:center;gap:5px;font-size:11px;display:flex}.action-grid button span{color:var(--muted)}footer{max-width:1240px;color:var(--muted);letter-spacing:.4px;justify-content:space-between;margin:auto;padding:0 30px 25px;font-size:9px;display:flex}.category-tabs{flex-wrap:wrap;gap:8px;margin-bottom:25px;display:flex}.category-tabs button{color:var(--muted);background:0 0;border-color:#0000}.category-tabs button.active{background:var(--surface);color:var(--text);border-color:var(--line)}.controls-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.controls-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}.controls-card h2{margin-bottom:18px;font-size:18px}.sensor-reading{color:var(--text);font-size:25px}.sensor-reading span{color:var(--muted);font-size:12px;display:block}dialog{border:1px solid var(--line);background:var(--surface);width:calc(100% - 32px);max-width:440px;color:var(--text);border-radius:17px;padding:28px}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#15231dcc}dialog h2{margin-bottom:14px;font-size:24px}dialog p{margin:10px 0}.dialog-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.primary{color:#fff;background:#4d6553;border:0;border-radius:9px;padding:13px 18px;text-decoration:none;display:inline-block}.primary:hover:not(:disabled){background:#3d5242}.error,.offline{color:#b34e43;font-size:12px}.error{margin-top:10px}.offline{text-align:center;background:#fcebe4;padding:12px 24px}.focused{outline-offset:7px;border-radius:7px;outline:2px solid #b2c2a4}.dev-tools{border:1px dashed var(--line);color:var(--muted);border-radius:10px;padding:15px;font-size:11px}.dev-tools summary{cursor:pointer;min-height:30px;padding-top:7px}.dev-tools label{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:12px 0;display:flex}.dev-tools label input:not([type=checkbox]),.dev-tools select{background:var(--surface);max-width:145px;color:var(--text);border:1px solid var(--line);border-radius:5px;padding:8px}.dev-tools textarea{width:100%;height:150px}.dev-tools h3{margin-top:20px}.calibrating svg{touch-action:none}.calibrating .room-hit{stroke:#27a797;stroke-width:3px}.calibrating .room-label{pointer-events:auto;cursor:move}.vertex{fill:#f4ff82;stroke:#35412e;stroke-width:2px;cursor:move}.coordinate{color:#fff;pointer-events:none;background:#17291ee6;padding:12px;font-size:12px;line-height:1;position:absolute;bottom:0;left:0}.setup{max-width:620px;margin:15vh auto;padding:30px}.setup h1{margin:20px 0}.setup p{color:#747d76;margin-bottom:22px}@media (width>=1450px){.app main{max-width:1340px}.home-layout{grid-template-columns:minmax(0,1.8fr) minmax(350px,1fr)}.floor-plan{max-width:min(550px,68.14vh - 207.827px)}}@media (width<=1000px){.topbar{padding:0 25px}.home-layout{grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr);gap:18px}.room-panel{padding:20px}.plan-stage{padding:18px 13px}.plan-compass{display:none}.legend-hint{display:none!important}.controls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.connection{font-size:10px}.header-right{gap:10px}}@media (width<=720px){.marker.climate text{font-size:30px}.marker.climate rect:not(.hit-target){x:-124px;y:-27px;width:248px;height:54px}.marker circle.hit-target{r:85px}.marker rect.hit-target{x:-124px;y:-85px;width:248px;height:170px}.room-label{font-size:29px}.slider-label button{min-height:44px}.topbar{flex-wrap:wrap;gap:13px;height:auto;min-height:76px;padding:17px 20px}.brand{font-size:26px}nav{order:3;justify-content:center;width:100%}nav button{flex:1}.connection{max-width:125px}.app main{padding:25px 16px}.page-heading{gap:14px;margin-bottom:22px}h1{font-size:28px}.page-heading p{font-size:12px}.eyebrow{letter-spacing:1.6px;font-size:8px}.home-stats{flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:92px}.home-stats .divider,.home-stats strong:nth-last-child(2),.home-stats span:last-child{display:none}.home-layout{flex-direction:column;gap:18px;display:flex}.plan-card,.right-column{width:100%}.plan-stage{padding:12px 6px}.plan-toolbar{padding:9px 13px}.room-select select{max-width:160px}.floor-plan{max-width:510px}.plan-legend{padding:14px}.room-panel{padding:24px}.climate-summary strong{font-size:26px}.controls-grid{grid-template-columns:1fr}.category-tabs{gap:2px}.category-tabs button{padding:8px 9px;font-size:11px}footer{gap:12px;padding:0 17px 24px;font-size:8px}.action-grid button{min-height:48px;font-size:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}