@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap";:root{--ink:#242321;--muted:#817e76;--paper:#f6f4ef;--line:#e5e1d8;--white:#fffefa;--terracotta:#c96752;--blue:#5684a5}*{box-sizing:border-box}body{color:var(--ink);background:var(--paper);margin:0;font-family:DM Sans,sans-serif;font-size:14px}button{color:inherit;cursor:pointer;font:inherit;border:0}.app-shell{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--line);background:#eeece5;flex-direction:column;flex-shrink:0;width:244px;padding:33px 20px 22px;display:flex}.brand{letter-spacing:-.6px;align-items:center;gap:10px;margin:0 12px 72px;font-size:21px;font-weight:700;display:flex}.brand-mark{background:var(--terracotta);color:#fff;border-radius:9px;justify-content:center;align-items:center;width:31px;height:31px;font-size:25px;line-height:1;display:inline-flex;transform:rotate(-15deg)}.icon{justify-content:center;align-items:center;width:19px;display:inline-flex}.sidebar-label,.eyebrow{color:#9a968e;letter-spacing:1.3px;text-transform:uppercase;font-size:10px;font-weight:700}.sidebar-label{margin:0 12px 15px}nav{gap:5px;display:grid}.nav-item{color:#77736c;text-align:left;background:0 0;border-radius:7px;align-items:center;gap:12px;padding:12px;display:flex}.nav-item.active{color:var(--ink);background:#e2ded5;font-weight:700}.nav-count{background:#d9d4c9;border-radius:20px;margin-left:auto;padding:2px 8px;font-size:11px}.sidebar-spacer{flex:1}.connection{color:#615f59;border-bottom:1px solid #ddd8cd;padding:16px 12px 20px;font-size:12px}.status-dot{background:#62a46e;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}.connection-time{color:#9a968e;margin:7px 0 0 14px;font-size:11px}.profile{align-items:center;gap:10px;padding:20px 8px 0;display:flex}.avatar{color:#554d42;background:#d5c8ae;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:11px;font-weight:700;display:flex}.profile strong,.profile span{font-size:12px;display:block}.profile span{color:#969189;margin-top:3px;font-size:11px}.more-button{color:#969189;background:0 0;margin-left:auto}.main-content{flex:1;min-width:0}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:83px;padding:0 clamp(24px,5vw,74px);display:flex}.breadcrumb{color:#aaa59c;gap:12px;display:flex}.breadcrumb b{color:#cbc5bb;font-weight:400}.breadcrumb strong{color:#5d5a54;font-weight:500}.top-actions{align-items:center;gap:18px;display:flex}.last-sync{color:#6d8c72;font-size:12px}.round-button,.menu-button{color:#77736c;background:0 0;font-size:18px}.menu-button{display:none}.content-wrap{max-width:1280px;margin:0 auto;padding:59px clamp(24px,5vw,74px) 30px}.welcome-row,.section-heading{justify-content:space-between;align-items:flex-end;display:flex}.welcome-row{margin-bottom:43px}.eyebrow{margin-bottom:10px;display:block}.welcome-row h1,.section-heading h2{letter-spacing:-.8px;margin:0;font-family:Playfair Display,serif;font-weight:500}.welcome-row h1{font-size:clamp(31px,3vw,40px)}.subtitle{color:var(--muted);margin:10px 0 0;font-size:15px}.add-button{background:var(--ink);color:#fff;border-radius:5px;padding:12px 17px}.add-button span{vertical-align:-2px;margin-right:9px;font-size:20px;line-height:0}.hero-grid{grid-template-columns:1.6fr repeat(4,minmax(110px,1fr));gap:16px;display:grid}.current-card{background:var(--terracotta);color:#fff8f2;border-radius:8px;flex-direction:column;justify-content:space-between;min-height:211px;padding:28px 30px 22px;display:flex}.light{color:#f2b5a4}.card-heading{justify-content:space-between;display:flex}.current-card h2{letter-spacing:-3px;margin:17px 0 0;font-size:58px;font-weight:500;line-height:1}.current-card sup{letter-spacing:0;vertical-align:18px;margin-left:5px;font-size:25px}.thermo-icon{color:#f0b29f;font-size:50px;line-height:1}.card-footer{color:#f7c8b9;align-items:center;gap:12px;font-size:12px;display:flex}.divider{background:#e18d79;width:1px;height:16px}.trend{color:#fff6e6;margin-left:auto}.stat-card{background:var(--white);border:1px solid var(--line);border-radius:8px;min-height:211px;padding:27px 28px}.stat-top{justify-content:space-between;align-items:center;display:flex}.stat-top .icon{color:#aaa49a;font-size:19px}.stat-card>strong{letter-spacing:-2px;margin:26px 0 18px;font-size:43px;font-weight:500;display:block}.stat-card>strong span{color:#aaa49a;margin-left:3px;font-size:23px}.stat-card p{color:#969189;margin-top:12px;font-size:11px}.meter{background:#eee9e0;border-radius:10px;height:5px;overflow:hidden}.meter span{background:var(--blue);border-radius:inherit;height:100%;display:block}.section-heading{margin:63px 0 24px}.section-heading h2{font-size:25px}.text-button{color:#6c6a63;background:0 0;font-size:12px}.text-button span{color:var(--terracotta);margin-left:8px;font-size:18px}.room-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.room-card{border:1px solid var(--line);text-align:left;background:0 0;border-radius:7px;align-items:center;min-width:0;padding:15px;transition:background .2s,border .2s;display:flex}.room-card:hover,.room-card.selected{background:var(--white);border-color:#d2ccc1}.room-icon{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:37px;height:37px;font-size:10px;font-weight:700;display:flex}.room-info{min-width:0;margin-left:10px}.room-info strong,.room-info span{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.room-info strong{font-size:12px}.room-info span{color:#9b978f;margin-top:4px;font-size:10px}.room-reading{text-align:right;margin-left:auto}.room-reading strong,.room-reading span{white-space:nowrap;display:block}.room-reading strong{letter-spacing:-.6px;font-size:19px;font-weight:500}.room-reading span{margin-top:4px;font-size:10px}.history-section{margin-top:67px}.history-heading{margin-top:0}.range-picker{background:#ebe8e0;border-radius:5px;gap:2px;padding:3px;display:flex}.range-picker button{color:#969189;background:0 0;border-radius:4px;padding:7px 12px;font-size:11px}.range-picker button.active{background:var(--white);color:var(--ink);box-shadow:0 1px 3px #d7d2c8}.chart-card{background:var(--white);border:1px solid var(--line);border-radius:8px;margin-top:25px;padding:28px 30px 19px}.chart-summary{justify-content:space-between;display:flex}.chart-summary strong{letter-spacing:-1px;font-size:27px;font-weight:500}.chart-summary p{color:#9a968e;margin:4px 0 0;font-size:11px}.positive{color:#62a46e;margin-left:10px;font-size:11px}.high-low{align-items:flex-end;gap:25px;padding-bottom:4px;display:flex}.high-low span{color:#969189;font-size:11px}.high-low b{color:#47443f;margin-left:5px;font-weight:500}.high-dot,.low-dot{border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.high-dot{background:var(--terracotta)}.low-dot{background:var(--blue)}.chart-wrap{margin-top:28px;padding-left:38px;position:relative}.chart{width:100%;height:225px;overflow:visible}.grid-line{stroke:#eeeae3;stroke-width:1px}.area-fill{fill:#f7e5dc;opacity:.7}.chart-line{fill:none;stroke:var(--terracotta);stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px}.chart-dot{fill:var(--terracotta);stroke:#fff;stroke-width:3px}.chart-labels{color:#aaa69d;flex-direction:column;justify-content:space-between;font-size:10px;display:flex;position:absolute;top:4px;bottom:33px;left:0}.chart-times{color:#aaa69d;justify-content:space-between;margin-top:10px;font-size:10px;display:flex}.chart-times span:last-child{color:var(--terracotta)}footer{color:#aaa69d;text-align:center;margin-top:34px;font-size:10px}footer span{margin:0 6px}@media (width<=920px){.sidebar{width:205px}.hero-grid{grid-template-columns:1.2fr 1fr}.current-card{grid-row:span 2}.room-grid{grid-template-columns:repeat(2,1fr)}}.room-selector{align-items:center;gap:12px;margin-top:18px;display:flex}.room-selector label{color:#9a968e;letter-spacing:1.3px;font-size:10px;font-weight:700}.room-selector select{background:var(--white);border:1px solid var(--line);color:var(--ink);font:inherit;border-radius:5px;padding:8px 28px 8px 10px}.room-selector span{color:#aaa69d;font-size:11px}.chart-high,.chart-low,.chart-average{fill:none;stroke-dasharray:5 5;stroke-width:1.5px}.chart-high{stroke:var(--terracotta);opacity:.65}.chart-low{stroke:var(--blue);opacity:.65}.chart-average{stroke:#8d877d;stroke-width:1.2px}.chart-dot-above{fill:var(--terracotta)}.chart-dot-below{fill:var(--blue)}.chart-legend{color:#969189;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px;margin-top:12px;font-size:10px;display:flex}.chart-legend span{align-items:center;gap:5px;display:inline-flex}.chart-legend i{border-radius:50%;width:6px;height:6px;display:inline-block}.legend-actual{background:var(--terracotta)}.legend-high{background:var(--terracotta);opacity:.65}.legend-low{background:var(--blue);opacity:.65}.legend-average{background:#8d877d}.humidity-history{margin-top:42px}.empty-chart{color:#aaa69d;justify-content:center;align-items:center;height:225px;font-size:12px;display:flex}@media (width<=680px){.sidebar{z-index:4;height:100vh;transition:left .2s;position:fixed;top:0;left:-250px;box-shadow:4px 0 20px #3a332b1c}.sidebar.open{left:0}.menu-button{margin-right:14px;display:inline-block}.topbar{height:64px;padding:0 20px}.breadcrumb{font-size:12px}.top-actions{gap:10px}.last-sync{display:none}.content-wrap{padding:36px 20px 25px}.welcome-row{align-items:flex-start;margin-bottom:29px;display:block}.welcome-row h1{font-size:32px}.add-button{margin-top:22px}.hero-grid{grid-template-columns:1fr 1fr;display:grid}.current-card{grid-area:auto/span 2}.stat-card{min-height:172px;padding:21px}.stat-card>strong{margin:21px 0 14px;font-size:34px}.air-bars{margin-top:29px}.air-bars i{width:17px}.section-heading{align-items:flex-start;margin-top:47px;display:block}.text-button{margin-top:15px;padding:0}.room-grid{grid-template-columns:1fr}.history-section{margin-top:47px}.history-heading .range-picker{width:fit-content;margin-top:19px}.range-picker button{padding:7px 9px}.chart-card{padding:22px 15px 14px}.chart-wrap{padding-left:29px}.chart{height:180px}.high-low{gap:6px;display:grid}.chart-times{font-size:9px}}