:root {
  color-scheme: dark;
  --bg: #08110f;
  --panel: #101c19;
  --line: #263b35;
  --muted: #8ea49e;
  --text: #edf8f4;
  --green: #51e0a0;
  --cyan: #5ad8e6;
  --amber: #f1c45b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top right, #163229 0, var(--bg) 42%); color: var(--text); min-height: 100vh; }
main { width: min(1180px, calc(100% - 32px)); margin: auto; padding: 32px 0 56px; }
header, .controls, .panel-title, .quality div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.65rem, 4vw, 2.6rem); letter-spacing: -.04em; }
h2 { font-size: 1.1rem; }
h3 { font-size: .9rem; font-weight: 600; color: #c8d8d3; }
.eyebrow { color: var(--green); letter-spacing: .16em; font-size: .68rem; font-weight: 750; margin-bottom: 5px; }
.status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: #66736f; box-shadow: 0 0 0 5px #66736f18; }
.status.online { color: var(--green); }
.status.online i { background: var(--green); box-shadow: 0 0 0 5px #51e0a022; }
.controls { justify-content: flex-start; flex-wrap: wrap; margin: 28px 0 18px; padding: 12px 14px; background: #0d1815cc; border: 1px solid var(--line); border-radius: 12px; }
.controls label { color: var(--muted); font-size: .8rem; }
input, select { margin-left: 6px; color: var(--text); background: #17241f; border: 1px solid #314840; border-radius: 7px; padding: 7px 9px; }
.history-controls { display: flex; align-items: center; gap: 12px; }
.history-controls[hidden] { display: none; }
button { color: #07110e; background: var(--green); border: 0; border-radius: 7px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
#updated { margin-left: auto; color: var(--muted); font-size: .78rem; }
.cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.cards article, .panel { background: linear-gradient(145deg, #14221e, #0d1714); border: 1px solid var(--line); border-radius: 15px; }
.cards article { min-height: 126px; padding: 17px; position: relative; overflow: hidden; }
.cards article span { display: block; color: var(--muted); font-size: .74rem; margin-bottom: 17px; }
.cards strong { font-size: clamp(1.35rem, 3vw, 2rem); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.cards small { color: var(--muted); margin-left: 4px; }
.cards .primary { border-color: #358465; background: linear-gradient(145deg, #15352a, #10221c); }
.meter { height: 4px; border-radius: 4px; background: #294239; position: absolute; left: 17px; right: 17px; bottom: 15px; overflow: hidden; }
.meter b { display: block; height: 100%; width: 0; background: var(--green); transition: width .4s; }
.panel { margin-top: 14px; padding: 19px; }
.panel-title { margin-bottom: 18px; }
.panel-title > span { color: var(--muted); font-size: .75rem; }
.cell-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px; }
.cell { background: #172620; border: 1px solid #294239; border-radius: 10px; padding: 10px; }
.cell span { display: block; color: var(--muted); font-size: .67rem; margin-bottom: 7px; }
.cell strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.cell.low { border-color: #a67a35; background: #312719; color: var(--amber); }
.cell.high { border-color: #31818a; background: #123034; color: var(--cyan); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.temperatures { display: flex; flex-wrap: wrap; gap: 10px; }
.temperature { background: #172620; border-radius: 10px; padding: 12px 16px; }
.temperature span { color: var(--muted); font-size: .7rem; margin-right: 12px; }
.temperature strong { color: var(--amber); }
.quality { margin: 0; }
.quality div { border-bottom: 1px solid var(--line); padding: 8px 0; }
.quality div:last-child { border: 0; }
dt { color: var(--muted); font-size: .75rem; } dd { margin: 0; font-variant-numeric: tabular-nums; }
.history { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.history .panel-title { grid-column: 1 / -1; margin: 0; }
.chart { min-width: 0; background: #0b1512; border-radius: 11px; padding: 13px; }
.chart h3 { margin-bottom: 10px; }
.chart canvas { display: block; width: 100%; height: 180px; }
.empty { color: var(--muted); font-size: .85rem; grid-column: 1 / -1; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } .cell-grid { grid-template-columns: repeat(4, 1fr); } .history { grid-template-columns: 1fr; } .history .panel-title { grid-column: 1; } }
@media (max-width: 600px) { main { width: min(100% - 20px, 1180px); padding-top: 20px; } header { align-items: flex-start; } .controls { flex-wrap: wrap; } #updated { width: 100%; margin: 0; } .cards { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; gap: 0; } .cell-grid { grid-template-columns: repeat(3, 1fr); } }