:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#173d3d;background:#f4f7f6;font-synthesis:none;--teal:#137a70;--muted:#687c79;--border:#dde7e3}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #70bfb3;outline-offset:4px}a{color:inherit}.topbar{height:98px;border-bottom:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1160px)/2))}.brand{text-decoration:none;display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700;letter-spacing:-.8px}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--teal);color:white;font-size:38px;font-weight:400;line-height:1}.brand-sub{display:block;font-size:8px;letter-spacing:2.2px;font-weight:600;margin-top:4px}.top-actions{display:flex;gap:25px;align-items:center}.small{font-size:12px;color:var(--muted)}.text-button{background:none;border:0;color:var(--teal);font-size:13px;font-weight:600}main{max-width:1216px;margin:auto;padding:48px 28px 24px;min-height:calc(100vh - 180px)}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--teal)}h1{font-size:34px;letter-spacing:-1.2px;font-weight:600;margin:10px 0 9px}h2{font-size:21px;letter-spacing:-.5px;font-weight:600;margin:8px 0}p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}.badge{white-space:nowrap;padding:9px 14px;border-radius:30px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:8px}.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.offline{background:#e9edeb;color:#76837e}.online{background:#e2f2ea;color:#287f58}.summary-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:22px}.card{background:white;border:1px solid var(--border);border-radius:18px;padding:27px}.card-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.5px;font-weight:600}.card-label>span{font-size:20px;font-weight:400}.temperature-card{color:#fff;background:#136e65;border-color:#136e65;background-image:radial-gradient(ellipse at 95% 90%,#25887b 0%,transparent 60%)}.temperature{display:flex;align-items:baseline;gap:12px;margin:16px 0 5px}.temperature>span:first-child{font-size:64px;font-weight:500;letter-spacing:-4px;font-variant-numeric:tabular-nums}.unit{font-size:26px;font-weight:300;color:#b8d7d2}.temperature-card p{color:#c8e0db;font-size:12px}.card-foot{border-top:1px solid #ffffff29;display:flex;justify-content:space-between;margin-top:25px;padding-top:15px;font-size:10px;letter-spacing:1px}.card-foot span{letter-spacing:0;color:#b7d7d1}.device-card h2{margin:22px 0 8px}.device-card p{font-size:12px}.device-card dl{margin:24px 0 0}.device-card dl>div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf1ef;padding-top:13px;margin-top:13px;font-size:12px}dt{color:var(--muted)}dd{margin:0;text-align:right}.chart-card{margin-top:24px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.periods{display:flex;background:#f1f5f3;border-radius:8px;padding:4px;gap:3px}.periods button{background:transparent;border:0;padding:7px 14px;border-radius:6px;font-size:11px;color:var(--muted)}.periods button[aria-pressed=true]{background:white;color:var(--teal);box-shadow:0 1px 4px #1c423211;font-weight:600}.chart-wrap{height:245px;position:relative;margin-top:20px}canvas{display:block;width:100%;height:100%}.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px}.chart-empty>span{font-size:52px;color:#a8c8be;line-height:1}.chart-empty strong{font-size:13px;font-weight:500}.chart-empty p{font-size:11px}.relays-section{margin-top:36px}.secondary-button{padding:10px 15px;background:white;border:1px solid var(--border);border-radius:8px;color:#526d64;font-size:11px}.relays-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.relay{background:#fff;border:1px solid var(--border);border-radius:14px;padding:21px}.relay-head{display:flex;justify-content:space-between;align-items:center}.relay-icon{width:33px;height:33px;border:1px solid var(--border);border-radius:9px;display:grid;place-items:center;color:#8ca49b;font-size:17px}.relay-number{font-size:10px;color:#84948e}.relay h3{font-size:15px;font-weight:600;margin:20px 0 7px}.relay p{font-size:11px;min-height:35px}.relay button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:15px;border:0;border-radius:8px;background:#edf2ef;color:#567165;padding:10px 12px;font-size:11px;font-weight:600}.relay button.on{background:#e0f2e8;color:#20734c}.switch{width:28px;height:16px;border-radius:10px;background:#b8c9c0;display:flex;align-items:center;padding:2px}.switch:before{content:"";width:12px;height:12px;border-radius:50%;background:white}.on .switch{background:#2c9375;justify-content:flex-end}.footnote{font-size:11px;margin-top:14px}.login-card{max-width:430px;margin:50px auto 80px;background:white;padding:36px;border:1px solid var(--border);border-radius:18px}.login-card h1{font-size:29px}.login-card form{margin-top:25px}.login-card label{display:block;font-size:12px;margin:18px 0 8px}.login-card input{width:100%;border:1px solid #ccdcd4;background:#fbfcfb;border-radius:8px;padding:12px;color:#173d3d}.primary-button{display:flex;justify-content:space-between;width:100%;padding:13px 16px;color:white;background:var(--teal);border:0;border-radius:8px;font-size:13px;font-weight:600;margin-top:18px}.error{font-size:12px;color:#a74335;margin-top:14px}.notification{border:1px solid #d9b7a2;color:#895432;background:#fff5ed;padding:12px 16px;border-radius:9px;margin-bottom:20px}.loading{margin:100px auto;text-align:center}footer{max-width:1216px;display:flex;justify-content:space-between;margin:24px auto 0;padding:22px 28px 30px;font-size:10px;color:#7e948b;border-top:1px solid var(--border)}footer>span:first-child{font-weight:700;color:#426b5f}
@media(max-width:760px){.topbar{height:78px;padding:0 20px}.top-actions .small{display:none}main{padding:30px 20px 20px}.page-heading{align-items:flex-start;flex-direction:column}h1{font-size:28px}.summary-grid{grid-template-columns:1fr}.relays-grid{grid-template-columns:repeat(2,1fr)}.card{padding:22px}.chart-card .section-heading{align-items:flex-start;flex-direction:column}.chart-wrap{height:210px}.section-heading h2{font-size:19px}.secondary-button{max-width:140px;line-height:1.4}.login-card{padding:27px;margin-top:20px}.chart-empty strong{max-width:230px;line-height:1.5}footer{margin-top:10px;padding:20px}.device-card dl>div{font-size:11px}.temperature>span:first-child{font-size:58px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease,opacity .15s ease}.card{animation:appear .35s ease-out}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}