:root {
  --bg:#f6f7f9; --card:#fff; --fg:#1d2129; --muted:#6b7480; --line:#e3e6ea;
  --accent:#2f6fed; --temp:#e8613c; --hum:#2f8fd8; --batt:#4a9d5f;
  --warn:#c9451f; --amber:#b47500; --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171a; --card:#1c2024; --fg:#e6e9ec; --muted:#8b949e;
          --line:#2b3138; --accent:#5b8def; --amber:#d99b28; }
}
* { box-sizing:border-box; }
body { margin:0; padding:16px; background:var(--bg); color:var(--fg);
       font:15px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.wrap { max-width:1040px; margin:0 auto; }

header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
h1 { font-size:20px; margin:0; font-weight:600; }
h2 { font-size:15px; margin:0 0 12px; font-weight:600; }
header .spacer { flex:1; }

.card { background:var(--card); border:1px solid var(--line);
        border-radius:var(--radius); padding:16px; margin-bottom:16px; }

select,input,button { font:inherit; color:var(--fg); background:var(--card);
        border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary,button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
button.linkbtn { border:none; background:none; padding:0; color:var(--muted); }
button.linkbtn:hover { color:var(--accent); }

.tiles { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
         margin-bottom:16px; }
.tile { background:var(--card); border:1px solid var(--line);
        border-radius:var(--radius); padding:12px 14px; }
.tile .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.tile .value { font-size:26px; font-weight:600; margin-top:2px; }
.tile .sub { font-size:12px; color:var(--muted); }
.tile.t .value{color:var(--temp)} .tile.h .value{color:var(--hum)} .tile.b .value{color:var(--batt)}

.badge { padding:2px 9px; border-radius:999px; font-size:12px; }
.badge.on { background:#e6f4ea; color:#1a7f37; }
.badge.off{ background:#fdeaea; color:#b42318; }
@media (prefers-color-scheme: dark) {
  .badge.on { background:#16301f; color:#6cc48a; }
  .badge.off{ background:#3a1c1a; color:#f08a7a; }
}

.ranges { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ranges .gap { flex:1; }

/* Висота задається ТУТ і має бути фіксованою — інакше Chart.js із
   maintainAspectRatio:false розганяє канву до десятків тисяч пікселів. */
.chart-box { position:relative; width:100%; height:320px; }
.chart-box.small { height:180px; }
.chart-box canvas { display:block; }
@media (max-width:600px) {
  .chart-box { height:240px; }
  .chart-box.small { height:150px; }
}

.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.row label { min-width:170px; color:var(--muted); font-size:14px; }

.hint { font-size:13px; color:var(--muted); }
.alert { border-radius:8px; padding:10px 12px; margin-bottom:10px; font-size:14px; }
.alert.red   { background:#fdeaea; color:#8f2318; border:1px solid #f3c3bd; }
.alert.amber { background:#fff6e5; color:var(--amber); border:1px solid #f0dcb0; }
@media (prefers-color-scheme: dark) {
  .alert.red   { background:#33191a; color:#f5a99e; border-color:#5a2a26; }
  .alert.amber { background:#332a15; color:#e0b458; border-color:#54441f; }
}
pre { background:var(--bg); border:1px solid var(--line); border-radius:8px;
      padding:12px; overflow:auto; font-size:12px; max-height:400px; }