:root{
  --bg:#12151c; --panel:#1a1f2b; --edge:#2a3140; --ink:#e8eaf0; --muted:#7d8595;
  --red:#e0604e; --yellow:#e5a83b; --green:#3fbf7f; --offline:#3a4150;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; padding:env(safe-area-inset-top) 0 24px;
}
header{
  display:flex; align-items:baseline; gap:12px;
  padding:16px 18px 8px; position:sticky; top:0; background:var(--bg); z-index:5;
}
header h1{font-size:20px; font-weight:700; margin:0; letter-spacing:.5px}
.conn{font-size:11px; color:var(--muted); margin-left:auto}
.conn.live{color:var(--green)} .conn.down{color:var(--red)}
.card{
  background:var(--panel); border:1px solid var(--edge); border-radius:16px;
  margin:12px; padding:16px;
}
.card h2{font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--muted); margin:0 0 14px}

/* --- LightStack bubbles --- */
.stack{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:14px}
.bub{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px}
.lamp{
  width:60px; height:60px; border-radius:50%;
  background:var(--offline); border:1px solid var(--edge);
  position:relative; transition:background .35s, box-shadow .35s;
}
.lamp::after{ /* shine */
  content:""; position:absolute; top:22%; left:24%; width:26%; height:24%;
  border-radius:50%; background:rgba(255,255,255,.28); filter:blur(1px);
  opacity:0; transition:opacity .35s;
}
.lamp.on::after{opacity:.7}
.bub .name{font-size:13px; font-weight:700}
.bub .st{font-size:11px; color:var(--muted); line-height:1.3; min-height:1.3em}
.bub .age{font-size:9px; color:var(--muted); opacity:.7}
.blink{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:.18}}

/* --- Temperature --- */
.temp-head{display:flex; justify-content:space-between; align-items:flex-start}
.hero{font-size:52px; font-weight:800; line-height:1}
.hero-sub{font-size:13px; color:var(--muted); margin-top:4px}
.temp-stats{font-size:11px; color:var(--muted); text-align:right; line-height:1.5}
.chart-wrap{position:relative; width:100%; height:200px; margin:10px 0 6px}
#chart,#detail-chart{width:100%; height:100%; display:block; touch-action:pan-y}
.selectors{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{
  flex:1 1 auto; min-width:44px; padding:10px 6px; font-size:12px;
  touch-action:manipulation; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;
  background:var(--panel); color:var(--muted); border:1px solid var(--edge);
  border-radius:9px; cursor:pointer; transition:.15s;
}
.seg button.on{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700}
.agg-note{font-size:10px; color:var(--muted); text-align:right; margin-top:6px; min-height:1em}
footer{text-align:center; color:var(--muted); font-size:10px; margin-top:14px}
@media (min-width:720px){
  body{max-width:860px; margin:0 auto}
  .chart-wrap{height:280px}
  .hero{font-size:64px}
}

/* --- machine detail --- */
.bub{cursor:pointer; -webkit-tap-highlight-color:transparent}
.bub .lamp{outline:0 solid transparent; transition:background .35s,box-shadow .35s,outline .15s}
.bub.active .lamp{outline:2px solid var(--ink); outline-offset:3px}
.detail-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.detail-head h2{margin:0; color:var(--ink); text-transform:none; letter-spacing:.2px; font-size:16px}
.xbtn{background:transparent; border:1px solid var(--edge); color:var(--muted);
  border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:13px; line-height:1}
.xbtn:hover{color:var(--ink); border-color:var(--muted)}
.detail-wrap{height:180px}
@media (min-width:720px){.detail-wrap{height:240px}}
.detail-head h2{flex:1 1 auto}
.detail-span{font-size:11px; color:var(--muted); margin-right:10px; white-space:nowrap}
.detail-span.live{color:var(--green, #3fbf7f)}
.seg button.nav{flex:0 0 auto; min-width:40px; font-size:13px}
.seg button:disabled{opacity:.35; cursor:default}
.seg button.live{flex:0 0 auto}