*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#172033;font-family:system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit;cursor:pointer}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.green{background:#22c55e}.orange{background:#f59e0b}.red{background:#ef4444}header{height:76px;background:white;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:25px;padding:0 25px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:9px;font-size:25px;min-width:260px}.brand b{display:block;font-size:21px}.brand small{display:block;color:#6b84ad;font-size:13px}nav{display:flex;gap:6px;flex:1}nav button{border:0;background:white;padding:10px 14px;border-radius:10px}nav button.active{background:#eaf2ff;color:#2563eb}.sys{text-align:right;font-size:13px}.sys small{display:block;color:#64748b;margin-top:3px}.logout-form{display:inline-block;margin-left:10px}.logout-form button{border:0;background:transparent;color:#2563eb;padding:2px 0;font-size:12px}.logout-form button:hover{text-decoration:underline}main{display:flex;gap:20px;padding:20px;max-width:1800px;margin:auto}.summary{background:white;border:1px solid #e5e7eb;border-radius:15px;padding:16px;width:185px;height:max-content;position:sticky;top:96px;box-shadow:0 5px 20px #0f172a0b}.summary div{margin:11px 0}.summary hr{border:0;border-top:1px solid #e5e7eb}.summary small{color:#64748b}.summary button{width:100%;margin-top:10px;border:1px solid #dbe3ee;background:white;border-radius:7px;padding:7px}.maparea{flex:1;min-width:0}.maptitle{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 3px 10px;color:#64748b;font-size:13px}.maptitle b{color:#172033;font-size:17px}.mapcontrols{display:flex;align-items:center;justify-content:flex-end;gap:10px}.mapcontrols button{border:1px solid #2563eb;background:#2563eb;color:white;border-radius:8px;padding:8px 12px;font-weight:600}.mapcontrols button[aria-pressed="true"]{background:#172033;border-color:#172033}.housemap{position:relative;width:100%;aspect-ratio:1.72;background:white;border:1px solid #dfe5ee;border-radius:17px;overflow:hidden;box-shadow:0 7px 30px #0f172a12}.housemap>img{width:100%;height:100%;display:block}.sensor{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;padding:0;min-width:85px;touch-action:auto;z-index:5;cursor:pointer}.housemap.edit-enabled .sensor{touch-action:none;cursor:grab}.housemap.edit-enabled .sensor:active{cursor:grabbing}.face{font-size:29px;line-height:30px}.tube{width:12px;height:40px;border:3px solid white;background:#e2e8f0;border-radius:10px;margin:-3px auto 2px;box-shadow:0 2px 5px #0004;position:relative}.tube i{position:absolute;left:2px;right:2px;bottom:2px;height:65%;border-radius:8px;background:#22c55e}.sensor-label,.label{display:flex;flex-direction:column;align-items:center;background:#fffffff2;border-radius:7px;padding:4px 7px;box-shadow:0 4px 13px #0f172a22}.label b{font-size:14px;color:#15803d}.label span{font-size:11px;color:#2563eb;font-weight:700}.label small{font-size:8px;color:#475569}.sensor.offline{opacity:.6;filter:grayscale(.5)}.tip{display:inline-block;background:#edf5ff;border:1px solid #d8e8ff;color:#41638f;border-radius:8px;padding:9px 12px;margin-top:11px;font-size:12px}.legend{float:right;margin-top:15px;color:#64748b;font-size:11px}.backdrop,.help{position:fixed;inset:0;background:#0f172a66;backdrop-filter:blur(3px);display:none;z-index:50;align-items:center;justify-content:flex-end}.backdrop.open,.help.open{display:flex}.panel{height:100%;width:min(500px,100vw);background:white;padding:25px;overflow:auto;position:relative;box-shadow:-15px 0 45px #0003}.x{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:28px;color:#64748b}.panelhead{display:grid;grid-template-columns:1fr 70px auto;align-items:center;gap:10px;padding:8px 0 18px;border-bottom:1px solid #e5e7eb}.panelhead h2{margin:3px 0}.panelhead small{color:#64748b}.panelhead #bigThermo{font-size:52px;text-align:center}.reading{text-align:right}.reading>b{display:block;font-size:32px;color:#f59e0b}.reading>strong{display:block;color:#2563eb;font-size:19px}.reading>small,.reading>em{display:block;color:#64748b;font-size:11px}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:15px 0}.tabs button{border:1px solid #dce3ec;background:white;border-radius:7px;padding:8px 2px;font-size:11px}.tabs button.active{background:#2563eb;color:white;border-color:#2563eb}.chart{height:185px;margin:8px 0}.chart>b{font-size:13px}.chart canvas{width:100%!important;height:155px!important}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.stats div{border:1px solid #e2e8f0;border-radius:8px;text-align:center;padding:9px 3px}.stats b{display:block;color:#2563eb}.stats small{color:#64748b;font-size:9px}.closemain{background:#2563eb;color:white;border:0;border-radius:8px;padding:10px 18px;margin-top:18px}.help{align-items:center;justify-content:center}.help section{position:relative;background:white;width:min(450px,calc(100vw - 30px));border-radius:15px;padding:28px}.help p{line-height:1.6;color:#475569}.login-page{min-height:100vh;background:linear-gradient(145deg,#eaf2ff 0%,#f8fafc 48%,#eefdf5 100%)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:36px;box-shadow:0 22px 60px #0f172a1c}.login-brand{font-size:44px}.login-eyebrow{margin:14px 0 4px;color:#2563eb;font-size:12px;font-weight:800;letter-spacing:.14em}.login-card h1{margin:0;font-size:28px}.login-intro{color:#64748b;line-height:1.5;margin:10px 0 24px}.login-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:9px;padding:10px 12px;margin-bottom:16px;font-size:14px}.login-form{display:grid;gap:8px}.login-form label{font-size:13px;font-weight:700;margin-top:6px}.login-form input{width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:11px 12px;font:inherit;outline:none}.login-form input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.login-form button{margin-top:12px;border:0;border-radius:9px;background:#2563eb;color:white;padding:12px;font-weight:700}.login-form button:hover{background:#1d4ed8}@media(max-width:800px){header{height:auto;flex-wrap:wrap;padding:10px}.brand{min-width:0;flex:1}nav button{padding:8px}.sys{order:3;width:100%;text-align:left}main{display:block;padding:10px}.summary{width:100%;position:static;display:flex;justify-content:space-around;align-items:center}.summary hr,.summary small,.summary button{display:none}.maptitle{display:block}.mapcontrols{justify-content:space-between;margin-top:7px}.maptitle span{display:block;margin-top:3px}.housemap{overflow:hidden}.panelhead{grid-template-columns:1fr 55px}.reading{grid-column:1/-1;text-align:left}.login-shell{display:grid;padding:16px}.login-card{padding:26px}}
.sensor-edit-actions{margin-top:18px;padding:14px;border:1px solid #fecaca;border-radius:10px;background:#fff7f7}.sensor-edit-actions[hidden]{display:none}.sensor-edit-actions strong{color:#991b1b}.sensor-edit-actions p{margin:6px 0 12px;color:#64748b;font-size:12px;line-height:1.45}.remove-gauge-button{border:1px solid #dc2626;border-radius:8px;background:#dc2626;color:white;padding:9px 13px;font-weight:700}.remove-gauge-button:hover{background:#b91c1c}.remove-gauge-button:disabled{cursor:wait;opacity:.65}

/* Match the floor plan's native 1200 x 760 proportions. */
.housemap {
    aspect-ratio: 1200 / 760;
}

/*
 * On phones, the map receives a protected edge around the actual floor
 * plan. Gauges may extend beyond the plan, but remain inside this shell.
 */
@media (max-width: 800px) {
    .housemap-shell {
        padding: 42px 12px 44px;
        overflow: hidden;
        background: white;
        border: 1px solid #dfe5ee;
        border-radius: 17px;
        box-shadow: 0 7px 30px #0f172a12;
    }

    .housemap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .sensor {
        min-width: 58px;
    }

    .sensor .face {
        font-size: 22px;
        line-height: 23px;
    }

    .sensor .tube {
        width: 9px;
        height: 29px;
        margin-top: -2px;
        border-width: 2px;
    }

    .sensor .tube i {
        left: 1px;
        right: 1px;
        bottom: 1px;
    }

    .sensor .label {
        min-width: 58px;
        padding: 3px 4px;
        white-space: nowrap;
    }

    .sensor .label b {
        font-size: 12px;
        line-height: 1.15;
    }

    .sensor .label span {
        font-size: 9px;
        line-height: 1.15;
    }

    .sensor .label small {
        font-size: 7px;
        line-height: 1.15;
    }
}

@media (max-width: 420px) {
    .housemap-shell {
        padding-right: 8px;
        padding-left: 8px;
    }

    .sensor {
        min-width: 54px;
    }

    .sensor .label {
        min-width: 54px;
    }
}