:root{color:#18212f;background:#f5f7f9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit}.app-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:24px 0 40px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 22px}.topbar-actions{display:flex;align-items:center;gap:8px}.brand{display:flex;align-items:center;gap:14px}.brand img{width:54px;height:54px;object-fit:contain}.brand h1,.brand p,.section-heading h2,.section-heading p{margin:0}.brand h1{font-size:1.45rem;line-height:1.1}.brand p,.section-heading p,.panel-meta{color:#667385}.icon-button{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid #d8dee8;border-radius:8px;background:#fff;color:#293647;cursor:pointer}.icon-button.active{border-color:#17657a;background:#eef5f8;color:#17657a}.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.status-panel,.metric-panel,.analytics-panel,.chart-panel,.readings-panel,.notice{background:#fff;border:1px solid #dfe5ee;border-radius:8px}.status-panel{padding:20px}.status-panel.alert{border-color:#d85151;box-shadow:inset 4px 0 #d85151}.status-panel.offline:not(.alert){border-color:#d89b00;box-shadow:inset 4px 0 #d89b00}.panel-title,.section-heading,.status-line,.notice{display:flex;align-items:center;gap:10px}.panel-title h2{margin:0;font-size:1rem}.reading-value{margin-top:18px;font-size:clamp(2rem,7vw,4.5rem);line-height:1;font-weight:800}.panel-meta{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;font-size:.9rem}.status-line{margin-top:16px;color:#197a4d;font-weight:700}.alert .status-line{color:#b12f2f}.status-line.offline{color:#8a5a00}.analytics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.metric-panel{display:flex;gap:12px;min-height:118px;padding:16px}.metric-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:#eef5f8;color:#17657a}.metric-panel p,.metric-panel strong,.metric-panel span{display:block}.metric-panel p{margin:0 0 8px;color:#607084;font-size:.78rem;font-weight:700;text-transform:uppercase}.metric-panel strong{font-size:1.55rem;line-height:1.1}.metric-panel span{margin-top:8px;color:#667385;font-size:.86rem}.metric-panel.ok .metric-icon{background:#e9f7ef;color:#197a4d}.metric-panel.warn .metric-icon{background:#fff1df;color:#a75a00}.notice{margin-bottom:16px;padding:12px 14px}.notice.error{color:#9f2c2c;border-color:#efb3b3;background:#fff6f6}.notice.alert-notice{align-items:flex-start;color:#8a3f00;border-color:#f1bf7c;background:#fff8ed}.notice.alert-notice div,.notice.alert-notice strong,.notice.alert-notice span{display:block}.notice.alert-notice span{margin-top:4px}.notice.notification-state{color:#4e5d6e;background:#fbfcfd}.chart-panel,.readings-panel{margin-top:16px;overflow:hidden}.sensor-analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.analytics-panel{padding:18px 20px}.analytics-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:18px 0 0}.analytics-list div{min-width:0}.analytics-list dt{color:#667385;font-size:.78rem;font-weight:700;text-transform:uppercase}.analytics-list dd{margin:4px 0 0;font-weight:800}.chart-wrap{padding:16px 18px 18px}.chart-wrap svg{display:block;width:100%;height:auto;min-height:260px}.chart-bg{fill:#fbfcfd}.grid-line{stroke:#e6ebf2;stroke-width:1}.axis-label{fill:#6a7787;font-size:13px}.axis-label.end{text-anchor:end}.trend-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.trend-point{stroke:#fff;stroke-width:2}.trend-line.fridge,.trend-point.fridge{stroke:#197a4d}.trend-point.fridge{fill:#197a4d}.trend-line.freezer,.trend-point.freezer{stroke:#2474a6}.trend-point.freezer{fill:#2474a6}.threshold-line{stroke-width:2;stroke-dasharray:7 6;opacity:.72}.threshold-line.fridge{stroke:#9f2c2c}.threshold-line.freezer{stroke:#7a4d9d}.chart-legend{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:12px;color:#4e5d6e;font-size:.9rem}.chart-legend span{display:inline-flex;align-items:center;gap:7px}.chart-legend i{display:inline-block;width:22px;height:3px;border-radius:999px}.chart-legend i.fridge{background:#197a4d}.chart-legend i.freezer{background:#2474a6}.threshold-note{color:#667385}.section-heading{justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e6ebf2}.section-actions{display:flex;align-items:center;gap:10px}.time-window-buttons{display:flex;gap:4px}.time-window-btn{padding:5px 11px;border:1px solid #d8dee8;border-radius:6px;background:#fff;color:#4e5d6e;font-size:.82rem;font-weight:600;cursor:pointer}.time-window-btn:hover{border-color:#17657a;color:#17657a}.time-window-btn.active{border-color:#17657a;background:#eef5f8;color:#17657a}.section-heading h2{font-size:1.05rem}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:13px 20px;text-align:left;border-bottom:1px solid #edf1f5}th{color:#5f6d7d;font-size:.78rem;text-transform:uppercase}tbody tr:hover{background:#fafbfd}.empty-state{padding:36px 20px;color:#667385;text-align:center}@media (max-width: 720px){.app-shell{width:min(100% - 20px,1180px);padding-top:12px}.status-grid,.analytics-grid,.sensor-analytics-grid,.analytics-list{grid-template-columns:1fr}.brand img{width:44px;height:44px}.brand h1{font-size:1.15rem}}